@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 bottom 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;
}

.coordinate{
	width:100%;
	padding:40px 0 40px;
	overflow:hidden;
}
.coordinate .left{
	width:46%;
	float:left;

}
.coordinate .right{
	width:46%;
	float:right;
}
.coordinate h4{
	font-size:1.5em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:400;
	letter-spacing:0.01em;
}

.coordinate .comment{
	width:100%;
	text-align:left;
	padding-top:1em;
	font-size:1.1em;
}

.coordinate ul{
	width:105%;
	font-size:0;
	text-align:left;
}
.coordinate ul li{
	width:45%;
	margin:4% 5% 0 0;
	vertical-align:top;
	display:inline-block;
	font-size:11px;
}
.coordinate ul li p{
	padding-top:0.5em;
}

.coordinate .pickimg{
	width:80%;
	margin:0 auto 10px;
}

.coordinate .buy{
	width:100%;
	margin:0 auto;
	margin-top:2em;
}
.coordinate .buy a{
	width:100%;
	display:block;
	font-family:'Roboto Condensed', sans-serif;
	font-size:1.8em;
	font-weight:400;
	color:#444;
	line-height:1.2;
	padding:0.4em 0 0.4em 0;
	letter-spacing:0.05em;
	border:2px solid #666;
	box-sizing: border-box;
	-webkit-transition:border-color 0.2s,color 0.2s;
	   -moz-transition:border-color 0.2s,color 0.2s;
	        transition:border-color 0.2s,color 0.2s;
}
.coordinate .buy a span{
	font-size:0.8em;
	padding-left:0.2em;
	letter-spacing:0;
}
.coordinate .buy a:hover{
	color:#D70920;
	border-color:#D70920;
}

.coordinate .pickimg a img{
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.coordinate .pickimg a:hover img{
	filter:alpha(opacity=70);
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}












.fabric{
	width:100%;
	padding:40px 0 20px;
}

.fabric .icon{
	width:120px;
	margin:0 auto;
	padding-bottom:1.5em;
}
.fabric p{
	font-size:1.2em;
	line-height:1.7;
}










.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;}











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










@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{padding:6% 0;}



.fabric p{text-align:left;}
.fabric p br{display:none;}



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

/* =========== footer ========== */
footer{padding:4% 0 4%;}

}


@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{padding:0;}
.coordinate .left{width:95%;float:none; margin:17% auto;}
.coordinate .right{width:95%;float:none;margin:17% auto 0;}
.coordinate h5{padding-bottom:0em;}

.coordinate.second{padding-bottom:14%;}

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


.fabric .icon{
	width:30%;
}
.fabric p{ font-size:1.1em;}


}

@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;}

/* =========== footer ========== */
footer{font-size:0.85em;}
footer br{display:block;}


}


@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;
}