@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{
	margin: auto;
	width: 33.3%;
	padding:1%;
	box-sizing:border-box;
//	float: left;
	overflow: visible;
}
.HairStyleListDetailArea_li a{
	display:inline-block;
	overflow: visible;
	
}

.HairStyleListDetailArea img{
	width:100%;
	
}
.hairstyleList {
	height: 100%;
	overflow: visible;
	position: relative;
	width: 100%;
	cursor: pointer;	
}

.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;
	display: none;
}

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

.hairstyleList .caption p {
	font-size:13px;
	padding-top:110%;
	color:#1f1f1f;
	opacity:0;
	text-align:center;
	font-weight:bold;
}

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

.caption img{
	width:25%;
	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;
	display: none;
}

.hairstyleList .mask2 {
	width:100%;
	height:12%;
	position:absolute;
	left:0;
	background-color:rgba(255,255,255,0.9);
	-webkit-transition:	all 0.5s ease;
	transition:all 0.5s ease;
	display: none;
}

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

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

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

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