@charset "utf-8";

/*======= pageHairstyle ========================================================*/

.blockHairstyle {
	margin:40px 0 50px;
}
.postBoxBase{
	float: left;
	width: 750px;
}

/*listHairstyle-----------*/
.listHairstyle{
	margin-bottom: 20px;
}
.listHairstyle li{
	float:left;
	margin-right:22px;
	margin-bottom:26px;
	width:170px;
}
.listHairstyle li:nth-child(4n){
	margin-right:0;
}
.listHairstyle .photo{
	margin-bottom:10px;
}
.listHairstyle .postTtl{
	font-size:13px;
	line-height:1.8;
}
@media screen and (min-width:768px) {
	.listHairstyle a:hover{
		display: block;
		opacity:0.7;
	}
}

/* aside ===========================*/
.postNavi{
	float: right;
	width: 180px;
	font-size: 14px;
}

/* [localNavi] ローカルナビ改修 ----------*/
.postNavi .localNavi {
	margin-bottom:20px;
}
.postNavi .localNavi li {
	display:block;
	float:none;
	width:100%;
	margin:0;
}
.postNavi .localNavi a {
	display:block;
	width:100%;
	height:auto;
	margin-bottom: 10px;
	border:none;
	text-align:left;
	vertical-align:middle;
	font-size:15px;
	line-height: 1.4;
}
.postNavi .localNavi a:hover,
.postNavi .localNavi li.selected a,
.postNavi .localNavi li.selected02 a{
	background:#FFF;
	color:#999;
}
.postNavi .localNavi a .typeFirst{
	color: #000;
	font-weight:bold;
}
.postNavi .localNavi a .typeFirst:before{
	content: "▼";
	font-size: 82%;
	vertical-align:middle;
	padding-right: 4px;
}

.postNavi .localNavi input {
	opacity: 0;
}
.postNavi .localNavi label {
	cursor: pointer;
}

@media screen and (max-width:768px) {
	.blockHairstyle {
		margin: 0
	}
	.postBoxBase, .postNavi{
		float: none;
		width: 100%;
	}
	.postNavi .localNavi {
		margin-bottom: 10px;
	}
	.listHairstyle li{
		margin-right:4%;
		width:48%;
	}
	.listHairstyle li:nth-child(even){
		margin-right:0;
	}
}


/*======= pageHairstyle ========================================================*/
.hairTitle {
	font-size:22px;
	font-weight:bold;
	line-height: 1.4;
	margin-bottom: 10px;
}
.listPostCat{
	margin-bottom: 30px;
}
.listPostCat li{
	font-size:94%;
	color:#878787;
	padding: 0 12px;
	border: 1px solid #878787;
	margin-right: 3px;
	display: inline-block;
	line-height: 1.6;
}

.photoBox {
	float:left;
	width:320px;
	margin-bottom: 24px;
}

#hairKeyv .slideBase {
	margin-bottom:13px;
	text-align: center;
}

#hairKeyv .slideNav p {
	margin-right: 2%;
}
#hairKeyv .slideNav p:last-child {
	margin-right:0 !important;
}
#hairKeyv .slideNav p img {
	opacity:0.7;
	transition:all 0.3s;
}
#hairKeyv .slideNav p.slick-current img {
	opacity:1;
}

.commentBox {
	float:right;
	width:390px;
}
.commentBox .txtCom{
	margin-bottom: 24px;
}
.commentBox .txtCom p{
	margin-bottom: 1em;
}
/*stylistData-----------*/
.stylistData{
	padding: 12px;
	border: 1px solid #CBCBCB;
}
.stylistData .photo{
	float:left;
	width: 30%;
	margin-right: 3%;
}
.stylistData .dataBox{
	float:left;
	width: 67%;
}
.stylistData .dataBox .name{
	font-size: 113%;
	font-weight: bold;
	margin-bottom: 12px;
}
.btnType01.reserveBtn a{
	font-size: 107%;
	padding: 3px 10px;
	font-weight: bold;
	display: block;
}

.blockRank .listOsusume {
	padding-left: 28px;
}
.blockRank .listOsusume li{
	width:204px;
	margin-right:34px;
}
@media screen and (max-width:768px) {
	.hairTitle {
		font-size: 15px;
	}
	.commentBox .txtCom{
		font-size: 12px;
	}
	#pageHairstyledetail .postBoxBase, .postNavi {
		margin-bottom: 0;
	}
	.photoBox, .commentBox{
		float: none;
		width:100%;
		margin-bottom: 20px;
	}
	.slick-track img{
		width:100%;
	}
	.btnType01.reserveBtn a{
		padding: 8px 10px;
	}
	
	.blockRank .listOsusume{
		margin-top: 20px;
		padding-left:0;
	}
	.blockRank .listOsusume li {
		width: 48%;
		margin-right: 4%;
		margin-bottom: 18px;
	}
}