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


.StaffList{
	width:100%;
	text-align:left;
	margin:auto;

}

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

}

.StaffDetailArea_ul{
	font-size:0;
	width:100%;

}

.StaffDetailArea_li{
    box-sizing: border-box;
    display: inline-block;
    margin: auto;
    padding: 1%;
    position: relative;
    vertical-align: top;
    width: 25%;
}

.StaffDetailArea_li a{
	color:#1f1f1f;
}
.StaffDetailArea_li a:hover{
	color:#1f1f1f;

}

.StaffDetail {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.StaffDetail img{
	width:100%;

}

.StaffDetail .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;
}

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

.StaffDetail .caption p {
	font-size:20px;
	padding-top:50%;
	color:#fff;
	opacity:0;
	text-align:center;
	
}

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

.caption img{
	width:25%;
	margin:5% 0 0 5%;
	text-align:left;
	display: none;

}

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

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

.StaffDetail .mask1 {
	top:-50%;
}

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

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

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

.StaffNameArea{
	width:100%;
	text-align:center;
	margin:10px auto;

}
.StaffNameArea p{
    font-size: 16px;
    font-weight: bold;
    letter-spacing: normal;

}

.StaffPositionArea{
	width:100%;
	text-align:center;
	margin:0 auto 10px;

}
.StaffPositionArea p{
	font-size:13px;

}