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

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

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

.fl{float:left;}
.fr{float:right;}

/* scrolltopcontrol アイコン */
#topcontrol:hover{
}
#topcontrol{
	z-index:100000;
}




body{color:#333;}
a{color:#333;}
a:hover{color:#999;}

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


hr.w100{
	height:0px;
	border:none;
	border-top:1px solid #666;
	width:100%;
}

hr{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:0 0 5px 0;
	width: 18px;
	text-align:left;
}
hr.white{border-top:2px solid #FFF;}
br.res{ display:none;}






header{
	width:100%;
	background:#E6E7E6;
	text-align:right;
	position:relative;
}
header .headerIn{
	width:93%;
	max-width:1300px;
	margin:0 auto;
	text-align:right;
	position:absolute;
	z-index:10;
	position:absolute;
	z-index:10;
	top:40%;
	left:0;
	right:0;
}
header .mainimg{
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
header .mainimg p{
	width:66%;
	max-width:850px;
	display:inline-block;
}
header h1{
	width:35%;
	max-width:440px;
}


.concept{
	background:#272727;
	color:#FFF;
	position:relative;
	overflow:hidden;
}
.conceptIMG{
	width:98%;
	margin:0 auto;
	max-width:1300px;
}
.conceptIMG .img01{
	width:290px;
	float:left;
}
.conceptIMG .img02{
	width:290px;
	float:right;
}

.conceptIn{
	width:490px;
	margin:0 auto;
	position:absolute;
	left:0;
	right:0;
	top:50%;
	margin-top:-10em;
	text-align:left;
}
.conceptIn h2{
	font-size:3.0em;
	font-weight:bold;
	text-align:center;
	padding-bottom:0.5em;
	text-indent:-0.3em;
}
.conceptIn p{
	font-size:1.3em;
	line-height:1.7;
}







.aVoice{
	width:93%;
	max-width:1100px;
	margin:0 auto;
}

.aVoice h2{
	font-family: 'Roboto', sans-serif;
	font-weight:600;
	font-size:4.0em;
	line-height:1.2;
	padding:100px 0 0;
}

.aVoiceInner{
	width:100%;
	text-align:left;
	margin-top:80px;
}
.aVoiceInner.line{
	border-top:1px dotted #000;
	padding-top:60px;
	margin-top:60px;
}
.faceImg{
	width:180px;
	float:left;
}
.voiceInfo{
	width:100%;
	float:right;
	margin-left:-210px;
}
.voiceInfo .infoIn{
	margin-left:210px;
}
.voiceInfo h3{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.5em;
	line-height:1.2;
}
.voiceInfo h4{
	font-size:1.1em;
	padding-bottom:1em;
}
.voiceInfo p{
	font-size:1.2em;
}

.aVoice .comment{
	font-size:1.2em;
	margin-top:1.5em;
}









.itemall{
	width:100%;
	border-bottom:1px solid #CCC;
}
.itemall.top{
	border-top:1px solid #000;
	margin-top:80px;
}
.itemallIn{
	width:93%;
	max-width:1100px;
	margin:0 auto;
	text-align:left;
}
.textBox{
	width:100%;
	padding-top:40px;
}
.textBox h3{
	font-size:2.6em;
	line-height:1.4;
	font-weight:bold;
}
.textBox p{
	font-size:1.3em;
	line-height:1.6;
	padding-top:0.8em;
}
.textBox p span{
	font-size:0.8em;
}


.inspiTxt{
	display:inline-block;
	float:left;
}
.inspiImg{
	width:300px;
	float:left;
	margin-left:5%;
	padding:0 !important;
}
.smartseam{
	width:95%;
	font-size:1.1em;
	line-height:1.5;
	margin-top:20px;
}
.smartseam .seamtxt{
	width:50%;
	float:left;
}
.smartseam h4{
	font-size:1.2em;
	padding-bottom:0.3em;
}
.smartseam .seamimg{
	width:45%;
	float:right;
}

.archTxt{
	float:left;
	width:60%;
}
.archIcon{
	float:right;
	width:35%;
}
.archIconIn{
	margin-bottom:15px;
}
.archIconIn .fab_icon{
	width:18%;
	float:left;
	padding:0;
}
.archIconIn .fab_txt{
	width:78%;
	float:right;
}
.archIconIn .fab_txt h4{
	font-weight:bold;
}
.archIconIn .fab_txt p{
	font-size:1.0em !important;
	padding-top:0.2em;
}









.magflow{
	padding-bottom:10px;
}

.mag_medi{
	display:inline-block;
	border:1px solid #333;
	padding:0.2em !important;
	line-height:1.0em;
	margin:0 0 0.5em;
	font-size:1em !important;
}
.magBox{
	background:url(../../images/dot.png) 0 0 repeat-x;
	padding:30px 0 0;
	margin-top:30px;
}
.magBox > h3{
	font-size:2.0em;
	font-weight:bold;
	padding-bottom:1em;
}
.magBox .itemBox{}
.magImg{
	float:left;
	width:32%;
}
.mag_itemBox{
	float:right;
	width:65%;
}
.mag_itemBox h2{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.0em;
	line-height:1.2;
}
.mag_itemBox h3{
	font-size:0.9em;
	margin-bottom:1em;
}
.mag_itemBox .img{
	width:52%;
	float:left;	
}
.mag_itemBox .itemspec{
	width:44%;
	float:right;
}
.mag_info{
	font-size:0.9em !important;
	padding:0.5em 0 0.8em;
}
.red{
	color:#F00;
	padding-right:0.3em;
}
.mag_note{
	font-size:0.9em;
	padding-top:2em;
	
}







.halfItem{
	width:47%;
	float:right;
}
.halfImg{
	width:45%;
	float:left;
	background:url(../../images/img001.jpg) center center no-repeat;
	background-size:cover;
}
.mb_img{display:none;}

.halfItem .itemBox{
	padding:20px 0 35px;
}



.itemBox{
	width:100%;
	padding:35px 0;
}

.itemBox .itemLeft{
	float:left;
	width:47%;
	position:relative;
}
.itemBox .itemRight{
	float:right;
	width:47%;
	position:relative;
}
.itemBox h2{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.0em;
	line-height:1.2;
}
.itemBox h3{
	font-size:0.9em;
	margin-bottom:1em;
}
.itemBox .img{
	width:53%;
	float:left;
}
.itemBox .itemspec{
	width:42%;
	float:right;
	text-align:left;
}
.itemspec .color{
	width:90%;
	margin-bottom:10px;
}
.itemspec .icon{
	width:60%;
	margin-bottom:5%;
}
.itemspec .madical{
	font-size:0.85em;
	border:1px solid #999;
	display:inline-block;
	padding:1px 3px;
	margin-bottom:10px;
}
.itemspec h4{
	padding-bottom:0.5em;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}
.itemspec p{line-height:1.4;}
.itemspec .buy a{
	width:100%;
	max-width:125px;
	display:block;
	background:#000;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.3em;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1;
	padding:6px 0 5px 0;
	color:#FFF;
	margin-top:5px;
}



.socksinfo{
	background:#F3F3F3;
	width:100%;
	margin-top:40px;
	padding:30px 0;
}
.socksinfo .infoIn{
	width:93%;
	max-width:1000px;
	margin:0 auto;
	text-align:left;
	font-size:1.1em;
	
}
.socksinfo .infoLeft{
	width:43%;
	float:left;
}
.socksinfo .infoRight{
	width:50%;
	float:right;
}
.socksinfo .infoRight .text{
	width:60%;
	float:left;
}
.socksinfo .infoRight .arch{
	width:35%;
	float:right;
}
.socksinfo h3{
	font-size:1.2em;
	font-weight:bold;
	padding-bottom:0.3em;
}



.note{
	width:93%;
	max-width:1100px;
	margin:0 auto;
	text-align:left;
	font-size:0.9em;
	margin-top:10px;
}






.buy a{
	transition: background-color 0.15s linear;
	-webkit-transition: background-color 0.15s linear;
}
.buy span{
	font-size:0.8em;
	margin-left:0.5em;
}
.men a:hover{ background-color: #555;}
.women a:hover{ background-color: #F27076;}
.unisex a:hover{ background-color:#B3B3B3;}






/* ---------- youtube --------- */

.film,
.film02{
	position:relative;
	width:100%;
	max-width:1100px;
	margin:30px auto 0;
	background:#000;
}
.filmIn{
	position:relative;
	width:100%;
	max-width:1100px;
	margin:0 auto;
}
.movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.movie iframe{
	position:absolute;
	top:0;
	right:0;
	width:100% !important;
	height:100% !important;
}

.start,
.start02{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../../images/mov_bk.png) center center repeat;
	cursor:pointer;
}

.start_mb{
	top:0;
	position:absolute;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	cursor:pointer;
}


.playinner{
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:50%;
	margin-top:-17%;
}
.playinner h2{
	width:72%;
	margin:0 auto;
	padding:0;
}
.playbt{
	width:10%;
	margin:2% auto;
}
.start .playbt{
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	-ms-transition: opacity 0.25s;
	transition: opacity 0.25s;
}



.film_mb,
.film_mb02{
	width:100%;
	margin:5% auto 0;
}
.main_youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin:0 auto;
}
.main_youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}













/* ================ gallery ================= */

.gallery{
	width:99.6%;
	margin:0 auto;
	overflow:hidden;
	margin-top:50px;
	position:relative;
	z-index:1;
}
.gallery h2{
	font-family: 'Roboto', sans-serif;
	font-weight:600;
	font-size:4.0em;
	line-height:1.2;
	padding:50px 0 90px;
}
.gallery ul.galleryList{
	width:100.2%;
}
.gallery ul.galleryList li{
	width:24.8%;
	margin-right:0.2%;
	margin-bottom:0.2%;
	float:left;
	position:relative;
}

.gallery ul.galleryList li a{
	display:block;
	background:rgba(0,0,0,0);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:10000;
}

/*View Mobile*/
.gallery.viewMb{
	width:100%;
	padding:5px 0 15px 0;
	position:relative;
	overflow:visible;
	
}
.gallery.viewMb ul.galleryList{
	width:100%;
	position:relative;
}
.gallery.viewMb ul.galleryList li{
	width:100%;
	margin:0 0%;
	position:relative;
	float:none;
	display:inline-block;
}
.gallery.viewMb ul.galleryList li a{
	display:none;
}










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

header h1{width:39%;}
header .mainimg p{width:64%;}

.concept{width:100%;}
.conceptIMG{width:98%;}
.conceptIMG .img01{width:23%;padding-top:5%;}
.conceptIMG .img02{width:23%;padding-top:5%;}
.conceptIn{width:55%;}
.conceptIn h2{font-size:2.5em;}
.conceptIn p{font-size:1.2em;}

.gallery ul.galleryList li{width:33.133333%;}


.aVoice h2{font-size:3.5em;padding:100px 0 0;}
.gallery h2{font-size:3.5em;padding:40px 0 80px;}


.playinner h2{padding:0;width:75%;}


.itemall.top{margin-top:5%;}

}



@media only screen and (max-width: 890px) {
.textBox h3{font-size:2.3em;}
.inspiImg{width:280px;}
.archTxt{width:55%;}
.archIcon{width:40%;}
.archIconIn .fab_icon{width:23%;}
.archIconIn .fab_txt{width:70%;}
.socksinfo .infoLeft{width:47%;}
.socksinfo .infoRight{width:47%;}
.socksinfo .infoRight .text{width:55%;}
.socksinfo .infoRight .arch{width:40%;}
.magBox h2 br{display:none;}
.magImg{width:30%;}
.mag_itemBox{width:67%;}

}




@media only screen and (max-width: 768px) {
.wide{display:none;}
header .mainimg p{
	width:100%;
	display:block;
	margin:0 auto;
}
header h1{
	margin:0 auto;
	width:60%;
	top:50%;
	margin-top:-4%;
}
.conceptIn{
	width:90%;
	position:static;
	top:0;
	margin:0 auto;
	padding:50px 0 1em;
}
.conceptIMG{width:70%;}
.conceptIMG .img01{width:45%;padding-top:0%;}
.conceptIMG .img02{width:45%;padding-top:0%;}


.smartseam{font-size:1.05em;}


.aVoice{width:100%;}
.aVoice h2{font-size:3.2em;padding:13% 0 0;}
.aVoiceInner{margin-top:10%;}
.aVoiceInner.line{padding-top:10%;}
.aVoiceInner .clear{width:90%;margin:0 auto;}
.faceImg{width:160px;}

.voiceInfo{margin-left:-190px;}
.voiceInfo .infoIn{margin-left:190px;}
.aVoice .comment{width:90%;margin:0 auto;padding-top:1.5em;}
.playinner h2{padding:0;}

.gallery ul.galleryList li{width:49.8%;}
.gallery h2{font-size:3.2em;padding:5% 0 13%;}

.itemall.top{ margin:0; border-top:none;}

}



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

.itemallIn{width:90%;}
.textBox{width:100%;padding-top:8%;}
.textBox h3{font-size:2.2em;}
.textBox h3 br{display:none;}

.inspiTxt{float:none;}
.inspiTxt p br{display:none;}
.inspiImg{width:60%;float:none;margin:3% auto 0;}

.itemBox{padding:7% 0;}
.itemBox h2{text-align:center;}
.itemBox h3{text-align:center;}
.itemBox .itemLeft{float:none;width:70%;margin:0 auto;}
.itemBox .itemRight{float:none;width:70%;margin:10% auto 0;}

.halfItem{width:100%;float:none;}
.halfImg{display:none;}
.halfItem .itemBox{width:70%;margin:0 auto;}
.mb_img{display:block;}

.archTxt{float:none;width:100%;}
.archIcon{float:none;width:100%;}
.archIconIn{margin:3% 0;}
.archIconIn .fab_icon{width:12%;}
.archIconIn .fab_txt{width:85%;}

.socksinfo{margin-top:0;padding:5% 0;}
.socksinfo .infoIn{width:90%;}
.socksinfo .infoLeft{width:100%;float:none;}
.socksinfo .infoRight{width:100%;float:none;margin-top:5%;}
.socksinfo .infoRight .text{width:65%;}
.socksinfo .infoRight .arch{width:30%;}




.magflow{padding-bottom:2%;}
.magBox{padding:5% 0 0;margin-top:6%;}
.magBox > h3{text-align:center;}
.magImg{float:none;width:45%;margin:0 auto;}

.mag_itemBox{float:none;margin:8% auto 0;width:100%;}
.mag_itemBox .img{width:45%;}
.mag_itemBox .itemspec{width:52%;}


.faceImg{
	width:100%;
	max-width:200px;
	float:none;
	margin:0 auto 30px;
}
.aVoice h2{font-size:3.0em;}
.voiceInfo{float:none;margin-left:0;}
.voiceInfo .infoIn{margin-left:0;}
.aVoiceInner.line{padding-top:0%; border:none;}

.voiceInfo h3{text-align:center;}
.voiceInfo h4{text-align:center;}
.voiceInfo p{text-align:center;}


.gallery h2{font-size:3.0em;padding:0% 0 12%;}

.itemall.top{ margin-top:5%;}


}






@media only screen and (max-width: 460px) {
header h1{width:75%;margin-top:-6%;}

.conceptIn h2{font-size:1.9em;}
.conceptIMG{width:90%;}
.conceptIMG .img01{width:50%;}
.conceptIMG .img02{width:50%;}


.conceptIn p{font-size:1.15em;}



.textBox h3{font-size:1.9em;}
.textBox h3 br{ display:block;}
.inspiImg{width:80%;margin:5% auto 0;}

.itemBox{ padding:12% 0;}
.itemBox .img{width:55%;}
.itemBox .itemLeft{width:100%;}
.itemBox .itemRight{width:100%;margin:15% auto 0;}
.halfItem .itemBox{width:100%;margin:0 auto;}

.itemspec .buy a{width:100%;max-width:none;}

.archIconIn .fab_icon{width:20%;}
.archIconIn .fab_txt{width:75%;}
.socksinfo{padding:8% 0;}
.socksinfo .infoRight{margin-top:8%;}
.socksinfo .infoRight .text{width:100%;float:none;}
.socksinfo .infoRight .arch{width:60%;float:none;margin:3% auto 0;}



.smartseam{width:70%;margin:0 auto;}
.smartseam .seamtxt{width:100%; float:none; padding-top:1em;}
.smartseam .seamimg{width:100%; float:none;padding-top:0.5em;}



.magflow .textBox p br{display:none;}

.magBox{padding:8% 0 0;margin-top:8%;}

.magBox > h3{
	font-size:1.8em;

}

.magImg{width:60%;}
.mag_itemBox .img{width:80%;float:none;margin:0 auto;}
.mag_itemBox .itemspec{width:100%;text-align:center;}
.mag_itemBox .itemspec .specIn{display:inline-block;text-align:left;}


.voiceInfo p{text-align:left;}
.voiceInfo h4{padding-bottom:3em;}

.voiceInfo p{font-size:1.15em;}
.aVoice .comment{font-size:1.15em;}

}

@media only screen and (max-width: 360px) {
.textBox h3{font-size:1.7em;}
.textBox p{font-size:1.1em;}
.inspiImg{width:90%;}
.itemBox .itemLeft{width:100%;}
.itemBox .itemRight{width:100%;}
.archIconIn{margin:5% 0;}

.comInfo h2{font-size:1.5em;}

.aVoice h2{font-size:2.7em;}
.gallery h2{font-size:2.7em;}

.voiceInfo h3{
	font-size:2.2em;
}

}












/* -----------------------------------------
                   Clearfix 
   ----------------------------------------- */
.clear:after,
.itemall:after,
.textBox:after,
.itemBox:after,
.archIconIn:after,
.itemLeft:after,
.itemRight:after,
.magBox:after,
.mag_itemBox:after,
.comment .item:after,
.socksinfo:after,
.comment:after,
.socksinfo .infoIn:after,
ul:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}








/* ================================ footer ============================== */
footer{
	width:90%;
	margin:0 auto;
	padding:4em 0 3em;
	font-size:0.9em;
}
footer p{padding:0.2em 0;}
footer a{color:#191919;}
footer a:hover{color:#FECE02;}
footer br{display:none;}


@media only screen and (max-width: 768px) {
footer{padding:4% 0 4%;}
}

@media only screen and (max-width: 575px) {
footer{font-size:0.85em;}
footer br{display:block;}
}