@charset "UTF-8";
/* CSS Document */

/* -----------------------------
TITLE BLOCK 
----------------------------- */
#title{
	width:52.14%;
	position:relative;
	margin:0 auto;
	padding-top:110px;
}
#title h1{
	width:32.357vw;
	padding-top:6.571vw;
	padding-bottom:7.143vw;
	margin:0 auto;
}
#title .copy_box{
	display:block;
	text-align:left;
	margin-bottom:8.571vw;
}

@media screen and (max-width:767px) {
	#title{
		width:80%;
		padding-top:80px;
	}
	#title h1{
		width:50vw;
		padding-top:2vw;
		padding-bottom:10vw;
		margin:0 auto;
	}
	#title .copy_box{
		display:block;
		text-align:left;
		margin-bottom:8.571vw;
	}
}
/* -----------------------------
PHOTO BLOCK 
----------------------------- */
#photo{
	position:relative;
	width:100%;
	margin-bottom:4.286vw;
}
@media screen and (max-width:767px) {
	
}

/* -----------------------------
SYSTEM BLOCK 
----------------------------- */
#system{
	margin:0;
	position:relative;
	min-height:100vh;
}
#system{
	background:url("/factory/image/system_bg_pc.jpg") no-repeat center top;
	background-size:cover;
}

#system .detail_box{
	width:90%;
	max-width:1100px;
	padding:4.714vw 0;
	margin:0 auto;
}
#system .detail_box .copy_box{
	width:100%;
	padding:0.714vw 3.214vw;
	margin-top:3.571vw;
	
	font-size:1.5rem;
	color:#FFF;
	
	background:rgba(0,0,0,0.4);
	border-radius:10px;
}

@media screen and (max-width:767px) {
	#system{
		margin:0;
		position:relative;
		min-height:initial;
	}
	#system{
		background:url("/factory/image/system_bg_sp.jpg") no-repeat center top;
		background-size:cover;
	}

	#system .detail_box{
		width:90%;
		max-width:1100px;
		padding:4.714vw 0;
		margin:0 auto;
	}
	#system .detail_box .copy_box{
		width:100%;
		padding:5.333vw;
	}
}

/* -----------------------------
EXAMPLE BLOCK 
----------------------------- */
#example{
	margin:0;
	position:relative;
	width:100%;
	background:#ededed;
}
#example .title_box{
	display:flex;
	align-items:center;
	justify-content: center;
}
#example .title_box h2{
	padding:4.286vw 0;
	text-align:center;
	
	font-size:3.0rem;
}
#example .title_box h2::after{
	content:"施工例";
	border:solid 1px #cecece;
	
	display:block;
	margin-top:0.714vw;
	padding:0.143vw;
	text-align:center;
	font-size:1.8rem;
}
#example ul.photo_block{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    
	justify-content: space-between;
}
#example ul.photo_block li{
	width:20%;
	height:40.714vw;
	position:relative;
}
#example ul.photo_block li img,
#example ul.photo_block .bnb img{
	position:absolute;
	top:0;
	left:0;
}
#example ul.photo_block li h3{
	position:absolute;
	bottom:0;
	z-index: 10;
	width:100%;
	letter-spacing: initial;
}
#example ul.photo_block li h3{
	background:rgba(0,0,0,0.6);
	color:#FFF;
	font-size:1.1rem;
	line-height:1.5;
	padding:0.4vw 1vw;
	margin: 0;
}
#example ul.photo_block li a{
	display:block;
}
#example ul.photo_block li a:hover{
	opacity:0.5;
}



@media screen and (max-width:767px) {
	#example .title_box h2{
		font-size:2.4rem;
	}
	#example .title_box h2::after{
		font-size:1.4rem;
	}
	#example ul.photo_block{
		margin-bottom:6.667vw;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;

		justify-content: space-between;
	}
	#example ul.photo_block li{
		width:100%;
		height:57vh;
		position:relative;
		overflow:hidden;
	}
	#example ul.photo_block li img{
		object-fit: cover;
		object-position: 50% 50%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
    #example ul.photo_block .bnb img{
        object-position: initial!important;
        top: 40%!important;
    }
	#example ul.photo_block li h3{
		font-size:1.2rem;
		padding:1vw 2vw 1.5vw;
	}
}