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



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

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

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




body{
	width:100%;
	height:100%;
	min-height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#333;
	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:100;
}



.fade{
	position:relative;
}


.pageanchor{
	position:absolute;
	top:-80px;
}

.wide{ display:block;}

/* -----------------------------------------
                   Header 
   ----------------------------------------- */

header{
	width:100%;
	margin:0 auto;
	position:relative;
}
.mainimg{
	position:relative;
	width:100%;
	z-index:1;
}

.cp_icon{
	width:17%;
	max-width:200px;
	position:absolute;
	top:90px;
	right:50px;
	z-index:1000;
}


#wrapper{
	width:100%;
	margin:0 auto;
}









.read{
	width:100%;
	background:url(../../images/copy_bk.jpg) center center no-repeat;
	background-size:cover;
}
.read .readIn{
	padding:80px 0;
	color:#FFF;
	text-align:center;
}
.read .readIn h1{
	width:650px;
	margin:0 auto;
	padding-bottom:40px;
}
.read .readIn p.maincopy{
	font-size:1.2em;
	line-height:2.2;
	letter-spacing:0.02em;
	padding-bottom:3em;
}

.read .readIn .wacloth{
	width:270px;
	margin:0 auto;
}




/* ================ movie ================= */


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

.film{
	position:relative;
	width:100%;
	background:#000;
}
.film .filmIn{
	position:relative;
	width:80%;
	margin:0 auto;
}

.film .movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.film .movie iframe{
	position:absolute;
	top:0;
	right:0;
	width:100% !important;
	height:100% !important;
}


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

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

.film .playinner{
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:50%;
	margin-top:-200px;
}
.film .playinner h2{
	width:650px;
	margin:0 auto;
}

.film .playbt{
	width:100px;
	margin:0 auto;
	margin-top:30px;
}



.film .start .playbt,
.film .start02 .playbt{
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	-ms-transition: opacity 0.25s;
	transition: opacity 0.25s;
}



/* ================ ATHLETE ================= */

.athlete{
	width:100%;
	/*border-top:1px solid #CCC;*/
	position:relative;
}

.athlete h2.subtit{
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	font-size:2.8em;
	line-height:1;
	padding:2.0em 0 1.8em 0;
}

.athlete_list{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
.athlete_list ul.athlete_slide{
	font-size:0;
	width:104%;
}
.athlete_list ul.athlete_slide li{
	display:inline-block;
	font-size:12px;
	width:29.33333%;
	margin-right:4%;
	margin-bottom:5%;
	text-align:left;
	vertical-align:top;
}
.athlete_list ul.athlete_slide li h3{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.0em;
	line-height:1.4;
	margin-top:0.3em;
}
.athlete_list ul.athlete_slide li h4{
	font-size:1.2em;
}
.athlete_list ul.athlete_slide li p.txt{
	margin-top:1em;
	font-size:1.1em;
}







/*Viee Mobile*/

.athlete.viewMb{
	margin-bottom:50px;
}

.viewMb .athlete_list{
	overflow:visible;
	width:85%;
}
.viewMb .athlete_list ul.athlete_slide{
	width:100%;
	position:relative;
}
.viewMb .athlete_list ul.athlete_slide li{
	margin:0 0.2%;
	margin-bottom:20px;
}
.athlete_list ul.athlete_slide li p.txt{
	font-size:1.1em !important;
}





/* ================ item ================= */

.item{
	padding-top:70px;
	margin-top:20px;
	padding-bottom:20px;
	border-top:1px solid #CCC;
}
.itemIn{
	width:90%;
	margin:0 auto;
	max-width:1100px;
	padding-bottom:40px;
}


.dotline{
	background:url(../../images/dot_yoko.gif) 0 0 repeat-x;
}


.itemtxtBox{
	width:58%;
	text-align:left;
	float:left;
}
.itemtxtBox h2.name{
	width:400px;
	margin-bottom:10px;
}
.itemtxtBox .wacloth{
	width:200px;
}
.itemtxtBox h3{
	font-size:1.9em;
	padding:1.2em 0 0.5em 0;
}


.itemtxtBox ul{
}
.itemtxtBox li{
	margin-left:1.4em;
	list-style:disc;
	list-style-position:outside;
	font-size:1.1em;
	margin-bottom:0.5em;
}
.itemtxtBox .itemname h4{
	font-size:1.1em;
	margin-top:1.5em;
	margin-bottom:0.5em;
}

.itemtxtBox .itemname .buy8{
	background:#666;
	color:#FFF;
	display:inline-block;
	padding:0.8em 1.0em;
	margin-top:0.5em;
	line-height:1;
}


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

.sex{
	height:25px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}

.itemimg{
	width:40%;
	float:right;
	display:table;
}
.itemimg p{
	display:table-cell;
	vertical-align:bottom;
}








.item h2.subtit{
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	font-size:2.8em;
	line-height:1;
	padding:1.6em 0 1.2em 0;
}


.other_item{
	width:100%;
	margin:0 auto;
}

.item_3f66100{
	width:47%;
	float:left;
	position:relative;
}

.item_3f66101{
	width:47%;
	float:right;
	position:relative;
}
.itemIn .socksimg{
	width:40%;
	margin-left:5%;
	float:left;
}

.itemIn .spec{
	width:50%;
	text-align:left;
	display:inline-block;
	position:absolute;
	bottom:0;
	right:0;	
}

.spec hr,
hr.sexline{
	height:0px;
	border:none;
	border-top:2px solid #000;
	margin:5px 0 5px 0;
	width: 18px;
	text-align:left;
}
.spec .sex{
	height:25px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:1.5em;
	line-height:1;
}
a{ color: #000}

.spec .socksname{
	margin-bottom:0.5em;
}
.buy{
	width:150px;
}
.buy a{
	width:100%;
	display:block;
	background:#000;
	font-weight:300;
	font-size:1.1em;
	letter-spacing:0.1em;
	text-align:center;
	line-height:1;
	padding:8px 0 7px 0;
	color:#FFF;
	margin-top:5px;
}
.buy a{
	transition: background-color 0.15s linear;
	-webkit-transition: background-color 0.15s linear;
}

.men a:hover{ background-color: #555;}
.women a:hover{ background-color: #F27076;}
.unisex a:hover{ background-color:#B3B3B3;}

.mroelink{
	margin-top:40px;
}
.mroelink a{
	box-sizing:border-box;
	border:1px solid #666;
	width:100%;
	display:block;
	font-size:1.5em;
	padding:0.5em 0;
	-webkit-transition: background-color 0.2s, color 0.2s;
	   -moz-transition: background-color 0.2s, color 0.2s;
	    -ms-transition: background-color 0.2s, color 0.2s;
        	transition: background-color 0.2s, color 0.2s;
}
.mroelink a:hover{
	background:#000;
	color:#FFF;
}



/* ================ kamiito ================= */

/*
#wacloth{
	position:absolute;
	top:450px;
	left:0;
}
*/
.kamiito{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	margin-top:70px;
	text-align:center;
	padding-bottom:50px;
	position:relative;
}

.kamiito h2{
	font-size:2.2em;
	margin-bottom:1.0em;
}
.kamiito h3{
	font-size:1.2em;
	line-height:2.0;
	margin-bottom:1.0em;
}




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

.gallery{
	width:99%;
	margin:0 auto;
	overflow:hidden;
	margin-top:3%;
	position:relative;
	z-index:1;
}
.gallery ul.galleryList{
	width:100.5%;
}
.gallery ul.galleryList li{
	width:24.5%;
	margin-right:0.5%;
	margin-bottom:0.5%;
	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:40px 0 0 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;
}





.store_link{
	width:99%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
.store_link a{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-size:2.5em;
	letter-spacing:0.05em;
	color:#FFF;
	background:#000;
	display:block;
	padding:0.8em 0;
	-webkit-transition: background-color 0.2s;
	   -moz-transition: background-color 0.2s;
	    -ms-transition: background-color 0.2s;
        	transition: background-color 0.2s;
}
.store_link a:hover{
	background:#999;
}






br.mb01{display:none;}
br.mb02{display:none;}
br.mb03{display:block;}
br.mb04{display:none;}


@media only screen and (max-width: 1200px) {
.gallery ul.galleryList li{width:32.833333%;}
}

@media only screen and (max-width: 1000px) {
.mbview01{display:none;}
}

@media only screen and (max-width: 920px) {
.item_3f66100{width:50%;}
.item_3f66101{width:50%;}
.itemIn .socksimg{width:45%;}
.itemIn .spec{font-size:0.9em;}
}

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

br.mb01{display:block;}

.cp_icon{
	width:20%;
	top:5%;
	right:5%;
}


.read{background-position:center right;}
.read .readIn h1{width:80%;}
.read .readIn p.maincopy{letter-spacing:0em;}
.read .readIn .wacloth{width:34%;}


.film .filmIn{

	width:100%;
	
}

.film .playinner{margin-top:-150px;}
.film .playinner h2{width:70%;}
.film .playbt{width:80px;margin-top:20px;}


.athlete_list ul.athlete_slide li{
	width:46%;
}
.athlete_list ul.athlete_slide li p.txt{
	font-size:1.0em;
}




.itemtxtBox{
	width:100%;
	float:none;
	text-align:center;
}
.itemtxtBox h2.name{
	width:60%;
	margin-left:auto;
	margin-right:auto;
}
.itemtxtBox .wacloth{
	width:30%;
	margin:0 auto;
}
.itemtxtBox h3{text-align:center;}
.itemtxtBox ul{display:inline-block;margin:0 auto;}
.itemtxtBox li{text-align:left;}
.itemtxtBox .itemname{display:inline-block;}
.itemtxtBox .itemname h4{font-size:1.2em;}
.itemimg{
	float:none;
	margin:0 auto;
	margin-top:50px;
	margin-bottom:20px;
	display:block;
	width:50%;
}


.item_3f66100{width:47%;}
.item_3f66101{width:47%;}
.itemIn .socksimg{width:40%;}
.itemIn .spec{font-size:1.0em;}


.item h2.subtit{padding:1.5em 0 1.2em 0;}
.item_3f66100{text-align:center;}
.item_3f66101{text-align:center;}

.itemIn .socksimg{width:70%; margin:0 auto; float:none;}
.itemIn .spec{
	width:80%;
	text-align:left;
	display:inline-block;
	position:relative;
	bottom:0;
	right:0;
	margin-top:20px;
}
.buy{width:100%;}
.mainbuy{ max-width:180px; margin:0 auto;}
.mroelink{
	width:91%;
	margin:0 auto;
	margin-top:40px;
}
.mroelink{margin-top:40px;}

.kamiito{
	margin-top:40px;
	padding-bottom:40px;
}

.kamiito h2{font-size:2.0em;}
.kamiito h3{font-size:1.1em;}


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


.store_link{
	width:90%;
	margin-top:10%;
	margin-bottom:6%;
}
.store_link a{
	font-size:1.8em;
	padding:0.6em 0;
}

}






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

.wide{display:none;}


.cp_icon{
	width:27%;
}



br.mb02{display:block;}
br.mb03{display:none;}






.read .readIn{padding:3em 0;}
.read .readIn h1{ width:90%; padding-bottom:1.5em;}
.read .readIn p.maincopy{
	font-size:1.1em;
	text-align:left;
	width:90%;
	margin:0 auto;
}
.read .readIn .wacloth{width:50%;}
.read .readIn p.maincopy br.mb01{display:none;}




.film{ border-top:30px solid #000;border-bottom:30px solid #000; background:#000;}
.film .playinner{margin-top:-21%;}
.film .playinner h2{width:80%;}
.film .playbt{width:12%;margin-top:1%;}



.athlete_list ul.athlete_slide{
	width:100%;
}
.athlete_list ul.athlete_slide li{
	width:100%;
	margin-right:0;
	margin-bottom:10%;
}
.athlete h2.subtit{
	font-size:2.2em;
	padding:1.6em 0 1.3em 0;
	
}

.item{ padding-top:15%;}
.itemIn{padding-bottom:20px;}


.item h2.subtit{font-size:2.2em;}


.itemtxtBox h2.name{width:90%;}
.itemtxtBox .wacloth{width:60%;}
.itemtxtBox h3{font-size:1.7em;}
.itemimg{width:65%;}


.itemIn .socksimg{width:90%;}
.itemIn .spec{width:95%;font-size:0.9em;}
.itemIn .spec br{ display:none;}
.mroelink{ margin-top:20px; width:98%}
.mroelink a{font-size:1.2em;}



.kamiito{
	margin-top:10%;
	padding-bottom:10%;
}
.kamiito h2{margin-bottom:0.7em;}
.kamiito h3{
	font-size:1.05em;
	line-height:1.8;
	text-align:left;
}
.kamiito h3 br{
	display:none;
}



}




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

br.mb04{display:block;}

.read .readIn p.maincopy{line-height:1.8;}


.monitorIn h2{font-size:1.8em;}
.monitorIn .copy{font-size:1.1em; margin-top:1em;}
.moniter_item p{width:90%;}

.mroelink{width:95%;}
.mroelink a{font-size:1.1em;}


.itemtxtBox h3{font-size:1.6em;}
.itemtxtBox .itemname h4{font-size:1.05em;}


}











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








/* -----------------------------------------
                   Clearfix 
   ----------------------------------------- */

ul:after,
li:after,
.monitorIn .mainBox:after,
.itemIn:after,
.seminarIn:after,
.guideMen:after,
.other_item:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}