@charset "utf-8";
/* 文字化け防止 */
/* CSS Document */


.HairStyleListArea{
	width:100%;
	text-align:center;
	margin:auto;

}

.HairStyleListDetailArea{
	width:100%;
	margin:2% auto 0;

}

.HairStyleListDetailArea_ul{
	font-size:0;
	width:100%;
	text-align:left;

}

.HairStyleListDetailArea_li{
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 1%;
    position: relative;
	width: 33.3%;
}
.HairStyleListDetailArea_li a{
	display:inline-block;
	overflow:hidden;
}
.HairStyleListDetailArea img{
	width:100%;


}
.hairstyleList {
	overflow: hidden;
	position: relative;
	cursor: pointer;
	height:auto;
}

.hairstyleList .caption {
	width:100%;
	height:100%;
	visibility:hidden;
	font-size:15px;
	color:#fff;
	top:0;
	left:0;
	position:absolute;
	text-align:left;
	-webkit-transition:all 0.3s step-end;
	transition:all 0.3s step-end;
}

.hairstyleList:hover .caption {
	visibility:visible;
}

.hairstyleList .caption p {
	font-size:13px;
	padding-top:69%;
	color:#fff;
	opacity:0;
	text-align:center;
}

.hairstyleList:hover .caption p {
	opacity:1;
}

.caption img{
	width:20%;
	margin:5% 0 0 5%;
	text-align:left;

}

.hairstyleList .mask1{
	width:100%;
	height:88%;
	position:absolute;
	left:0;
	background-color:rgba(255,255,255, 0.2);
	-webkit-transition:	all 0.5s ease;
	transition:all 0.5s ease;
}

.hairstyleList .mask2 {
	width:100%;
	height:12%;
	position:absolute;
	left:0;
	background-color:rgba(85,188,221,0.7);
	-webkit-transition:	all 0.5s ease;
	transition:all 0.5s ease;
}

.hairstyleList .mask1 {
	top:-88%;
}

.hairstyleList:hover .mask1 {
	top:0;
}

.hairstyleList .mask2 {
	bottom:-50%;
}

.hairstyleList:hover .mask2 {
	bottom:0;
}