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


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

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

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



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;
	-webkit-text-size-adjust: 100%;
}
.ie8 body{
	min-width:1000px;	
}



header{
	background:url(../images/mainimg.jpg) center center no-repeat;
	background-size:cover;
	width:100%;
}
header h1{
	width:80%;
	max-width:380px;
	margin:0 auto;
	padding:12% 0;
}



#copy{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	line-height:1.7;
}
#copy h2{
	font-size:2.0em;
	padding:3em 0 0.8em;	
}
#copy p{
	font-size:1.2em;
}



#itemBox{
	width:90%;
	max-width:1000px;
	margin:0 auto;
	padding-bottom:70px;
}
#itemBox h3{
	width:100%;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	padding:0.2em 0;
	font-size:2.5em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	letter-spacing:0.05em;
	margin-top:70px;
}
#itemBox h4{
	width:100%;
	border-bottom:2px solid #000;
	padding:1.5em 0 0.2em;
	font-size:2.0em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	letter-spacing:0.05em;
}

.coordinate{
	width:100%;
	margin-top:25px;
}
.coordinate .left{
	width:48%;
	float:left;
}
.coordinate .right{
	width:48%;
	float:right;
}
.coordinate h5{
	font-size:1.8em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	letter-spacing:0.05em;
	padding-bottom:1em;
}
.coordinate .toggle{
	cursor:pointer;
	margin:20px auto 0;
	font-size:1.1em;
	padding:0.9em 0;
	line-height:1;
	width:95%;
	background:#E6E6E6;
	-webkit-transition:background-color 0.2s, color 0.2s;
	   -moz-transition:background-color 0.2s, color 0.2s;
	        transition:background-color 0.2s, color 0.2s;
}
.coordinate .toggle.active{
	background:#333;
	color:#FFF;
}
.coordinate .speclist{
	width:95%;
	margin:0 auto;
	text-align:left;
	display:none;
}
.coordinate .speclist p{
}
.coordinate .speclist p.top{
	margin-top:0.5em;
}
.coordinate .speclist a{
	color:#333;
	width:100%;
	display:block;
	padding:0.15em 0.3em;
	box-sizing: border-box;
	-webkit-transition:background-color 0.2s;
	   -moz-transition:background-color 0.2s;
	        transition:background-color 0.2s;
}
.coordinate .speclist a:hover{
	color:#333;
	width:100%;
	display:block;
	background:#E6E6E6;
}




.itemlist{
	width:100%;
	overflow:hidden;
	margin:0 auto;
	margin-top:35px;
}
.itemlist ul{
	width:104%;
	text-align:left;
	font-size:0;
}
.itemlist ul li{
	width:21%;
	margin-right:4%;
	margin-bottom:4%;
	display:inline-block;
	text-align:center;
	font-size:12px;
	vertical-align:top;
}
.itemlist .itemimg{
	width:90%;
	margin:0 auto;
}
.itemlist .itemimg a{
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.itemlist .itemimg a:hover{
	filter:alpha(opacity=70);
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}





.itemlist h5{
	font-size:1.3em;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:400;
	line-height:1.2;
	padding-bottom:0.2em;
}
.itemlist p{
	font-size:1.0em;
}
.itemlist .itemcomment{
	text-align:left;
	padding:0.5em 0;
}
.itemlist p.buy{
	width:100%;
	margin:0 auto;
	margin-top:0.5em;
}
.itemlist p.buy a{
	width:100%;
	display:block;
	font-family:'Roboto Condensed', sans-serif;
	font-size:1.4em;
	font-weight:400;
	color:#FFF;
	line-height:1.2;
	padding:0.3em 0 0.3em 0;
	letter-spacing:0.05em;
	-webkit-transition:background-color 0.2s;
	   -moz-transition:background-color 0.2s;
	        transition:background-color 0.2s;
}
.itemlist p.buy a span{
	font-size:0.7em;
	padding-left:0.2em;
	letter-spacing:0;
}
.itemlist p.men a{background:#000;}
.itemlist p.unisex a{background:#666;}
.itemlist p.women a{ background:#DD6AB8;}

.itemlist p.men a:hover{background:#666;}
.itemlist p.unisex a:hover{background:#B3B3B3;}
.itemlist p.women a:hover{ background:#DF98CE;}

















@media screen and (min-width: 1200px) {
header h1{padding:145px 0;}
}

@media screen and (max-width: 820px) {
header h1{width:60%;max-width:none;padding:15% 0;}
#copy{padding-bottom:4%;}
#copy p{text-align:left;}
#copy p br{display:none;}
#copy h2{padding:9% 0 0.5em;font-size:1.8em;}

#itemBox{padding-bottom:10%;}
#itemBox h3{margin-top:5%;}

.coordinate{margin-top:3.5%;padding-bottom:5%;}
.coordinate .left{width:50%;}
.coordinate .right{width:50%;}


.coordinate .left .toggle{margin:5% 0 0;}
.coordinate .right .toggle{margin:5% 0 0 5%;}
.coordinate .left .speclist{margin:0; font-size:0.95em;}
.coordinate .right .speclist{margin:0 0 0 5%; font-size:0.95em;}



.itemlist{margin-top:5%;width:90%;}
.itemlist ul{width:108%;}
.itemlist ul li{width:42%;margin-right:8%;margin-bottom:7%;}

}


@media screen and (max-width: 550px) {
#copy h2{font-size:1.8em; text-align:left;}
#copy p{font-size:1.25em;}

#itemBox{padding-bottom:5%;}
#itemBox h3{font-size:2.2em;}


.coordinate .left{width:100%;float:none;}
.coordinate .right{width:100%;float:none;margin-top:5%;}
.coordinate h5{padding-bottom:0em;}

.coordinate .left .toggle{margin:5% auto 0; width:100%;}
.coordinate .right .toggle{margin:5% auto 0; width:100%;}
.coordinate .left .speclist{margin:0 auto; font-size:1em; width:100%;}
.coordinate .right .speclist{margin:0 auto; font-size:1em; width:100%;}

.itemlist{width:100%;}
.itemlist ul{width:105%;}
.itemlist ul li{width:45%;margin-right:5%;margin-bottom:5%;}


}

@media screen and (max-width: 450px) {
header h1{padding:17% 0;}
#copy{line-height:1.6;}
#copy h2{font-size:1.7em;}
.itemlist .itemimg{width:95%;}
.itemlist p{font-size:0.9em;}
.itemlist ul{width:106%;}
.itemlist ul li{width:44%;margin-right:6%;margin-bottom:8%;}
#itemBox h3{font-size:2.0em;}
#itemBox h4{font-size:1.8em;}
.coordinate h5{font-size:1.6em;}

}


@media screen and (max-width: 360px) {
#copy{line-height:1.5;}
#copy h2{font-size:1.5em;}
#copy p{font-size:1.1em;}

#itemBox h3{font-size:1.9em;}
#itemBox h4{font-size:1.7em;}
}
















.coordinate:after,
ul:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}