@charset "utf-8";
/* =================================================================================
 clothes
================================================================================= */
/*衣装用のヘッダー*/
#mainHead #topTtl,
#mainHeadOut .subMenu{display: none;}

#mainHead {height: 50px;}

#mainHead .mainNav.menuOpen{top: 52px;}

#mainHead .siteLogo {top: -28px;}

#subContainer {margin-top: 53px;}

.clothMenuArea .ttlClothCate{
	font-size:20px;
	font-weight: bold;
	margin-bottom:15px;
}

.clothMenuLink > dt{
	padding-bottom:10px;
	border-bottom: 1px solid #7e7e7e;
	font-weight: bold;
}

.clothMenuLink > dd{margin-bottom:30px;}

.clothMenuLink .lst li a{
	display: block;
	padding:10px;
	color:#333;
	border-bottom: 1px dotted #7e7e7e;
}

.clothMenuLink .lst li a.current{background-color: #f2f2f2;}

#clothesThum li.slick-current{position: relative;}

#clothesThum li.slick-current:after{
	position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    border:2px solid #ff882e;
    box-sizing: border-box;
    content: '';
}

@media only screen and (min-width:640px){
	/*衣装用のヘッダー*/
	#mainHead #topTtl{display: block;}

	#subContainer {margin-top: 133px;}

	.wrapClothes{padding-bottom: 50px;}

	.wrapClothes .clothMenuArea {
		float:left;
		width: 250px;
	}

	.clothMenuLink > dd{margin-bottom:40px;}

	.clothMenuLink .lst li a{
		font-size:14px;
		transition: all .8s;
	}

	.clothMenuLink .lst li a:hover{background-color: #f2f2f2;}

	.wrapClothes .lstClothArea{
		float:right;
		width: 850px
	}

	.clothMenuArea .ttlClothCate{font-size:22px;}

	#mainHead .siteLogo {top: 0;}
}

.lstConCloth{
	margin-left:-15px;
	font-size: 0;
	letter-spacing: 0;
	word-spacing: 0;
}

.lstConCloth li {
    display: inline-block;
    width: 47%;
    width: -webkit-calc(50% - 15px);
    width: -moz-calc(50% - 15px);
    width: calc(50% - 15px);
    height: 100%;
    margin: 0 0 20px 15px;
    vertical-align: top;
    box-sizing: border-box;
}

.lstConCloth li a{
	display: block;
	color:#333;
	font-size: 14px;
}

.lstConCloth li:nth-last-of-type(2) ,
.lstConCloth li:last-child {margin-bottom: 0;}

.lstConCloth li img {width: 100%;}

.lstConCloth .wrapClothImg{
	display: block;
	position: relative;
}

.ttlCateCloth{
	margin-bottom: 20px;
	padding-bottom: 10px;
	font-size:16px;
	font-weight: bold;
	border-bottom: 1px solid #333;
}

.ttlCateCloth .clothesName{
	margin-left:15px;
	padding-left: 15px;
	font-size:14px;
	font-weight: normal;
	line-height: 1.2;
	border-left: 1px solid #333;
}

@media only screen and (min-width:640px){
	.ttlCateCloth{
		padding-bottom: 15px;
		font-size:22px;
	}

	.lstConCloth li a img{transition: all .8s;}

	.lstConCloth li a:hover img{transform: scale(1.1);}

	.lstConCloth{margin:0 0 -22px -22px;}

	.lstConCloth li{
		width: 196px;
		margin: 0 0 22px 22px;
	}

	.lstConCloth li:nth-last-of-type(2) ,
	.lstConCloth li:last-child {margin-bottom: 22px;}

	.lstConCloth .wrapClothImg{
		height: 290px;
		overflow: hidden;
	}

}

/*article*/
.wrapDtl {padding-bottom: 20px;}

.wrapDtl #clothesMain{margin-bottom: 15px;}

/*.wrapDtl #clothesThum{display: none;}*/

.wrapDtl #clothesThum img,
.wrapDtl #clothesMain img{width: 100%;}

.wrapDtl #clothesThum{
	width : 97%;
	width: -webkit-calc(100% + 10px);
	width: -moz-calc(100% + 10px);
	width: calc(100% + 10px);
	margin: 0 0 10px -10px;
}

.wrapDtl #clothesThum li{
	width:calc( 33% - 10px ) !important;
	margin:0 0 10px 10px;
    vertical-align: top;
}

@media only screen and (min-width:640px){
	.wrapDtl #clothesThum{display: block;}

	.wrapDtl .sideImg {
	    width: 332px;
	    float: left;
	}

	.wrapDtl #clothesMain{margin-bottom: 20px;}

	.wrapDtl #clothesThum{margin-left:-4px;}

	.wrapDtl #clothesThum li{
	    width: 80px !important;
	    margin:0 0 4px 4px;
	}

	.wrapDtl #clothesThum li a{transition: all .8s;}

	.wrapDtl #clothesThum li a:hover{opacity: .7;}

	.wrapDtl .sideExe{
		width: 500px;
	    float: right;
	    box-sizing: border-box;
	}
}

.otherClothes{
	padding: 15px;
	border: 1px solid #6f624e;
}

.otherClothes .sttl{
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #6f624e;
}

@media only screen and (min-width:640px){
	.otherClothes{padding: 20px;}

	.otherClothes .lstConCloth{margin-left: -8px;}

	.otherClothes .lstConCloth li{
		width:155px;
		margin-left: 8px;
	}

	.otherClothes .lstConCloth .wrapClothImg {
	    height: 230px;
	}

}

#clothesThum li:focus {outline: 0;}

@media only screen and (min-width:640px){
	#clothesThum li:hover{
		cursor: pointer;
		opacity: .7;
	}

}


/* clear fix
------------------------------------------------------- */
.wrapDtl:after,
.wrapClothes:after{
	content:"";
	display:block;
	clear:both;
	height:0;
}
/* EOF */