@charset "utf-8";  
/*------------------------------------------------------------ 
    HAIR CATALOG css
------------------------------------------------------------*/  

.sectionHd{
	text-align:center;
	margin-bottom:30px;
	font-size:38px;
	height:43px;
	line-height:43px;
	font-weight:bold;
	padding-bottom:27px;
	background:no-repeat 50% bottom;
	background-size:153px 17px;
	color:#543F27;
	background-image:url(../../img/bg-section-hd01.png);
}

#category{
	width:auto;
	max-width:720px;
	margin:0 auto;
	padding:0 10px;
	overflow:hidden;
}

#category li{
	width:44.44444444444444%;
	height:60px;
}

#category a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:60px;
	color:#543F27;
	font-size:150%;
	font-family:Arial, Helvetica, sans-serif;
	background:#EFE9E2;
	border-radius:5px;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

#category .selected{
	color:#fff;
	background:#543F27;
}

#category a:hover{
	color:#fff;
	background:#543F27;
}

#photo{
	width:auto;
	padding:0 10px;
	margin-top:50px;
	border-top:1px solid #E8DFD3;
}

#photo-list{
	width:100%;
	max-width:1022px;
	margin:0 auto;
	letter-spacing: -.40em;
}

#photo-list > li{
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	width:19.56947162426614%;
	padding:3.620352250489237% 0;
	color:#533F26;
	position:relative;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:7.240704500978474%;}

#photo-list div{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}

#photo-list ul li{
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
}

.photo-name{
	font-size:117%;
	font-weight:bold;
	margin:15px 0 10px;
}

#pagination{
	width:auto;
	max-width:1024px;
	margin:30px auto 0;
	padding:0 10px;
	overflow:hidden;
}

#pagination li{
	width:40px;
	height:40px;
	float:left;
	text-align:center;
	line-height:40px;
	font-size:125%;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	margin:0 5px 5px 0;
	border:1px solid #E4E4E4;
}

#pagination a{
	display:block;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:#fff;
	color:#543F27;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
}

#pagination .selected,
#pagination a:hover{
	color:#fff;
	background:#543F27;
}


#footer{ margin-top:0;}

/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* PC */
@media screen and (min-width: 789px){
.photoItem:nth-child(3n+2):last-child{ margin-right:calc(33.33333333% + 8px);}
}


/* TABLET */
@media screen and (max-width: 788px){

.sectionHd{
	font-size:242%;
	height:32px;
	line-height:32px;
}

#photo{
	padding:19px 10px;
	margin-top:50px;
}

#photo-list > li{
	width:22.28473581213307%;
	padding:1.810176125244619% 0;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:3.620352250489237%;}

}

/* SP */
@media screen and (max-width: 560px){

.sectionHd{
	font-size:192%;
	height:25px;
	line-height:25px;
	margin-bottom:20px;
}

#category li{
	height:45px;
}

#category a{
	line-height:45px;
	font-size:134%;
}

#photo{
	padding:14px 5px;
	margin-top:30px;
}

#photo-list > li{
	width:50%;
	padding:5px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

#photo-list > li:not(:nth-child(4n)){ margin-right:0;}

.photo-name{ margin:10px 0 5px;}

}




.flex{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	padding-top:50px;
}

.photoItem{ width:calc(33.33333333% - 16px);}
.photoItem:nth-child(n+4){ margin-top:24px;}

.iframeWrap{
	position: relative;
	height: 0;
	width: 100%;
	overflow:hiddem;
	padding-top:177.7777777777778%;
}

.iframeWrap iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


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

.photoItem{ width:calc(50% - 12px);}
.photoItem:nth-child(n+3){ margin-top:24px;}


}


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

.flex{ padding-top:30px;}

.photoItem{ width:calc(50% - 8px);}
.photoItem:nth-child(n+3){ margin-top:20px;}


}