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

/* ================= font ====================== */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);

/* ============================================= */

html{
	width:100%;
}



body{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#4C4C4C;
	font-size:12px;
	line-height:1.7;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#FFF;
}


.ie8 body{
	min-width:800px;
}





header{
	width:98%;
	max-width:1300px;
	margin:1% auto;
}

header .mainimg{
	width:100%;
	background:url(../../images/mainimg.jpg) center bottom no-repeat;
	background-size:cover;
}
header .mainimg h2{
	width:90%;
	margin:0 auto;
	text-align:left;
}

header .mainimg h2 img{
	width:100%;
	max-width:400px;
	padding:200px 0;
}

header .titleBox{
	width:100%;
	border-top:2px solid #FFF;
	background:#76766F;
}
header .titleBox h1{
	width:60%;
	max-width:400px;
	margin: auto;
	text-align:center;
	padding:50px 0;
}

















.contents{
	width:98%;
	max-width:1300px;
	margin:0 auto;
}

.scene{
	width:100%;
	margin-top:2px;
}
.leftBox{
	width:50%;
	float:left;
	box-sizing:border-box;
	border-right:1px solid #FFF;
}
.rightBox{
	width:50%;
	float:left;
	box-sizing:border-box;
	border-left:1px solid #FFF;
}
.rightBox .top{
	box-sizing:border-box;
	border-bottom:1px solid #FFF;
}
.rightBox .bottom{
	box-sizing:border-box;
	border-top:1px solid #FFF;
}
.bkcolor{
	background:#76766F;
}





.specBox{
	width:100%;
	background:#76766F;
	border-top:2px solid #FFF;
	box-sizing:border-box;
	padding:25px;
	text-align:left;
	color:#FFF;
}
.specBox.noline{
	border-top:none !important;
}
.specBox h2{
	width:100%;
	max-width:320px;
	margin-bottom:1em;
}
.specBox h3{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.3em;
	letter-spacing:0.05em;
	line-height:1;
	padding:0.5em 0 0.5em;
}

.specBox p{
	padding-bottom:0.5em;
	line-height:1.3;
}
.specBox p span{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
	font-size:1.1em;
	letter-spacing:0.05em;
}
.specBox .column{
	padding:0.2em 0 1.0em;
	line-height:1.5;
}
.specBox .column02{
	padding:0 0 2.2em;
	line-height:1.5;
}
.specBox a{
	color:#FFF;
	-webkit-transition: color 0.2s;
	   -moz-transition: color 0.2s;
	        transition: color 0.2s;
}
.specBox a:hover{
	color:#97D5F2;
}


.leftBox .specBox{
	box-sizing:border-box;
}
.rightBox .specBox{
	box-sizing:border-box;
}









.subtitle{
	width:100%;
	padding:40px 0 35px;
	color:#070E28;
	margin-top:1%;
}
.subtitle h2{
	width:60%;
	max-width:210px;
	margin:0 auto;
	padding-bottom:20px;
}
.subtitle h3{
	font-size:1.2em;
	line-height:1.6;
}

.subtitle.fiberpile{
	background:#97D5F2;
}
.subtitle.thermo{
	background:#F7DFBC;
}



.itemList{
	width:100%;
	overflow:hidden;
}
.itemList ul{
	width:101%;
	text-align:left;
	font-size:0;
}
.itemList ul li{
	width:19%;
	display:inline-block;
	margin:1% 1% 1% 0;
	font-size:12px;
	vertical-align:top;
	text-align:center;
}
.itemList ul li a img{
	-webkit-transition: opacity 0.25s;
	   -moz-transition: opacity 0.25s;
	    -ms-transition: opacity 0.25s;
	        transition: opacity 0.25s;
}
.itemList ul li a:hover img{
	filter:alpha(opacity=60); 
	-moz-opacity:0.60;
	-khtml-opacity:0.6;
	opacity:0.60;
}

.itemList ul li h4{
	line-height:1.3;
	padding-top:1em;
}
.itemList ul li h4 span{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:1.15em;
	letter-spacing:0.02em;
}

.itemList .fiberpile a{
	color:#4C96C9;
}
.itemList .thermo a{
	color:#DD5219;
}






.instagram{
	padding:110px 0;
}
.instagram .logo{
	width:65px;
	margin:0 auto;
}

.instagram .hash{
	text-align:center;
	font-weight:bold;
	font-size:2.0em;
}
.instagram a{
	display:inline-block;
	color:#666;
	-webkit-transition: opacity 0.25s;
	   -moz-transition: opacity 0.25s;
	    -ms-transition: opacity 0.25s;
	        transition: opacity 0.25s;
}

.instagram a:hover{
	filter:alpha(opacity=60); 
	-moz-opacity:0.60;
	-khtml-opacity:0.6;
	opacity:0.60;
}



br.mb{ display:none;}



@media screen and (max-width: 768px) {

header .mainimg h2{text-align:center;}
header .mainimg h2 img{width:70%;max-width:none;padding:28% 0;}

header .titleBox h1{padding:7% 0;}


.specBox{padding:3%;}

.leftBox .specBox{padding:6%;}
.rightBox .specBox{padding:6%;}



.subtitle{padding:5.5% 0 4.5%;}

.itemList ul li{width:24%;}


.instagram{padding:10% 0;}




}

@media screen and (max-width: 600px) {

header{width:96%;margin:2% auto;}

.contents{width:96%}


.scene{margin-top:2%;}
.bkcolor{background:none;}

.leftBox{
	width:100%;
	float:none;
	border:none;
}
.rightBox{
	width:100%;
	float:none;
	border:none;	
}
.rightBox .top{border-top:2px solid #FFF;}

.no03{border-top:2px solid #FFF;}

.specBox{padding:4%;}

.leftBox .specBox{padding:4%;}
.rightBox .specBox{padding:4%;}


.subtitle{margin-top:2%;}
.subtitle h2{padding-bottom:1.5em;}

.itemList ul{
	width:102%;
}
.itemList ul li{
	width:31.3333%;
	margin:2% 2% 2% 0;
}

.instagram{padding:13% 0;}

br.mb{ display:block;}
}

@media screen and (max-width: 450px){
	
header .mainimg h2 img{width:85%;}

header .titleBox h1{padding:9% 0;}
.itemList ul li{width:48%;}

.subtitle{padding:9% 0 6%;}
.subtitle h3{font-size:1.1em;}


.specBox p span{font-size:1.05em;letter-spacing:0;}

.instagram .logo{width:60px;}
.instagram .hash{font-size:1.8em;}

}

@media screen and (max-width: 360px){
.instagram .logo{width:50px;}
.instagram .hash{font-size:1.6em;}
.itemList ul li h4{ font-size:0.9em;padding-top:0.5em;}
}



/* ========================================================
                            Clerfix
   ======================================================== */


ul:after,
.scene:after,
.rightBox:after,
.sceneIn:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}