@charset "utf-8";

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

.blockHairstyle {
	margin:40px 45px 50px;
}
.postBoxBase {
	float:right;
	width:738px;
}
.postBoxBase.contentInner {
	padding:0;
}

/*listHairstyle-----------*/
.listHairstyle {
	margin-bottom:20px;
}
.listHairstyle li{
	float:left;
	margin-right:46px;
	margin-bottom:26px;
	width:150px;
}
.listHairstyle li:nth-child(4n){
	margin-right:0;
}
.listHairstyle .photo{
	margin-bottom:10px;
}
.listHairstyle .postTtl{
	font-size:13px;
	line-height:1.5;
}
.listHairstyle a:hover{
	display:block;
	opacity:0.7;
}

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

/* [localNavi] ローカルナビ改修 ----------*/
.postNavi .localNavi {
	margin-bottom:20px;
}
.postNavi .localNavi li {
	display:block;
	float:none;
	margin:0 0 6px;
}
.postNavi .localNavi a {
	display:block;
	width:100%;
	height:auto;
	border:none;
	text-align:left;
	vertical-align:middle;
	font-size:13px;
	line-height: 1.4;
}
.postNavi .localNavi input {
	display:block;
	width:100%;
	height:0;
	border:none;
	text-align:left;
	vertical-align:middle;
	opacity:0;
}

.postNavi .localNavi label {
	cursor:pointer;
}

.postNavi .localNavi a:hover,
.postNavi .localNavi li.selected a,
.postNavi .localNavi li.selected02 a{
	background: #fff;
	color:#bc9f3d;
}
.postNavi .localNavi a .typeFirst{
	color: #000;
	font-weight:bold;
}
.postNavi .localNavi a .typeFirst:before{
	color: #f99400;
	content: "▼";
	font-size: 82%;
	vertical-align:middle;
	padding-right: 4px;
}
.selectg {
    text-decoration:underline;
}

@media screen and (min-width:769px) {
	.postNavi{ width:138px; }

/* [localNavi] ローカルナビ改修 ----------*/
	.postNavi .localNavi li { margin-bottom:12px;line-height: 1; }
	.postNavi .localNavi li:nth-child(n+2) { padding-left:1em; }
/**/
	.postNavi .localNavi li.selected,
	.postNavi .localNavi li.selected02,
	.postNavi .localNavi a,
	.postNavi .localNavi a:hover,
	.postNavi .localNavi li.selected a,
	.postNavi .localNavi li.selected02 a { background:transparent !important; }
}
@media screen and (max-width:768px) {
	.postBoxBase.contentInner {
		padding:0 15px 60px;
	}
	.blockHairstyle {
		margin: 0
	}
	.blockHairstyle .p2-list-specialMenu {
		font-size: 12px;
	}
	.postBoxBase, .postNavi{
		float: none;
		width: 100%;
	}
	.postNavi .localNavi {
		margin-bottom: 10px;
	}
	.listHairstyle li{
		margin-right:4%;
		width:48%;
	}
	.listHairstyle .postTtl{
		font-size: 100%;
	}
	.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 {
}
#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-top:1px dotted #534741;
	border-bottom:1px dotted #534741;
}
.stylistData .photo {
	float:left;
	position:relative;
	width:100px;
	height:100px;
	margin-right:30px;
	overflow:hidden;
	border-radius:100%;
}
.stylistData .photo img {
	position:absolute;
	top:-100%;
	right:-100%;
	bottom:-100%;
	left:-100%;
	margin:auto;
}
.stylistData .dataBox{
	float:left;
	width:calc(100% - 130px);
}
.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 .sttl04 {
	color: #534741;
	font-size: 14px;
	font-weight: bold;
	line-height: 30px;
	height: 30px;
	padding: 0 45px 0 60px;
	position:relative;
	border-top:1px solid #E4D9CD;
	border-bottom:1px solid #998675;
	background:-moz-linear-gradient(top, #FFF 0%, #E8E0D7 24%, #C2BB99 100%);
	background:-webkit-linear-gradient(top, #FFF 0%,#E8E0D7 24%,#C2BB99 100%);
	background:linear-gradient(to bottom, #FFF 0%,#E8E0D7 24%,#C2BB99 100%);
}

.blockRank .sttl04:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 45px;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	background: url(../img/common/h_square.png);
	background-size: cover;
}


.blockRank .listOsusume li{
	width:175px;
	margin-right:34px;
}
@media screen and (max-width:768px) {
	.hairTitle {
		font-size:16px;
		font-weight:bold;
		line-height:1.4;
		margin-bottom:10px;
	}
	#pageHairstyledetail .postBoxBase, .postNavi {
		margin-bottom: 0;
	}
	.photoBox, .commentBox{
		float: none;
		width:100%;
		margin-bottom: 20px;
	}
	.stylistData .photo {
		margin-right:20px;
	}
	.stylistData .dataBox{
		width:calc(100% - 120px);
	}
	.slick-track img{
		width:100%;
	}
	.btnType01,
	.btnType01 a {
		display:block;
		width:auto;
		max-width:240px;
		font-size:14px;
	}
	.blockRank .sttl04 {
		padding-left:35px;
	}
	.blockRank .sttl04:before {
		left: 20px;
	}

	.blockRank .postTtl {
		font-size: 100%;
	}
	.blockRank .listOsusume li {
		width: 48%;
		margin-right: 4%;
		margin-bottom: 18px;
	}
}