@charset "UTF-8";
/* CSS Document */

/*=======================
#staff
=======================*/
#staff_img {
	margin:0;
	background-image:url(../img/bg_staff.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	height:600px;
	background-color:white;
}
/* ウィンドウ幅が1201px以上の場合の記述 */
@media screen and (min-width:1201px) {
#staff_img {
	background-size:cover;
}
}
#staff_img p{
    text-align:center;
    padding-top:240px;
    position: relative;
    z-index: 10;
}
#staff_box{
    max-width: 900px;
    width: 100%;
    margin:0 auto 0 auto;
    padding-bottom:100px;
}
.staff_detail{
    max-width: 200px;
    width: 22.2222%;
    float:left;
}
#staff1{
    margin-top:115px;
    margin-left: 9%;
}
#staff2{
    height:280px;
    margin-left: 8%;
    margin-right: 8%;
}
#staff_logo{
    max-width: 200px;
    margin-top:145px;
    width: 100%;
}
#staff3{
    margin-top:115px;
}
#staff4{
    margin-top:15px;
}
#staff5{
    margin-left: 55.5555%;
    margin-top:15px;
}
#staff6{
    margin-left: 22.2222%;
}
#staff7{
    margin-left: 11.1111%;
}
.staff_img{
    width: 100%;
    font-size:12px;
    padding-bottom:10px;
}
.staff_img em{
    font-size:130%;
    font-style:normal;
}
.staff_detail p{
    text-align:center;
    padding-bottom:5px;
    font-size:18px;
}

/*=======================
.staff_detail
=======================*/
.staff_detail ul li {
	/*width:300px;*/
	width: 100%;
	height:auto;
	float:left;
	position:relative;
	line-height:0;
	overflow:hidden;
	text-align:center;
	list-style:none;
	vertical-align:middle;
}
.staff_detail ul li img {
  max-width:200px;
	width:100%;
	height:auto;
	-webkit-transition:2s;
	-moz-transition:2s;
	-o-transition:2s;
	transition:2s;
}
.staff_detail ul li:hover img {
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
}
.staff_detail ul li a {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	text-align:center;
	background:rgba(255, 255, 255, 0.9);
	line-height:0;
	text-decoration:none;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s;
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity=0);
	-ms-filter:"alpha(opacity=0)";
	font-size:100%;
}
.staff_detail ul li a > div {
	margin:0 5%;
	line-height:1.6em;
	display:block;
	color:#000;
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}
.staff_detail ul li a > div .inner{
	top: 0;
	-webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	transform:translateY(0);
}
.staff_detail ul li a > div .inner .btn{
	display: none;
}
.staff_detail ul li a > div span {
	font-size:80%;
	display:block;
}
.staff_detail ul li a:hover {
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
	-ms-filter:"alpha(opacity=100)";
}


#staff_txt{
	height: 335px;
	position: relative;
}
#staff_txt .title_block{
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	margin: auto;
}
#staff_txt h2{
	position: absolute;
	top: 78px;
	left: 0;
	right: 0;
	margin: auto;
}
#staff_txt h2 + p{
	position: absolute;
	left: 0;
	right: 0;
	top: 155px;
	margin: auto;
}
@media screen and (min-width: 750px) and (max-width: 957px){
	#staff_txt h2 + p{
		bottom: 206px;
	}
}
#staff_txt .txt_block{
	position: absolute;
	left: 0;
	right: 0;
	top: 172px;
	margin: auto;
}


/* SP */
@media screen and (max-width: 750px){
	#staff_img {
		height:280px;
		background-size: 150% auto;
	}
	#staff_img p{
		padding: 0;
		display: block;
		max-width: 120px;
		width: 16%;
		margin: auto;
		position: relative;
		top: 50%;
		left: 0;
		right: 0;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#staff_img p img{
		width: 100%;
		height: auto;
	}


	.staff_detail ul li:hover img {
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
		background: #fff;
	}
    #staff_box{
        padding-bottom:50px;
        position:relative;
    }
    .staff_detail{
        width: 20%;
        float:left;
    }
    #staff1{
        margin-top:14%;
        margin-left:10%;
    }
    #staff2{
        height:auto;
        margin: 0 10%;
    }
    #staff_logo{
        margin-top:18%;
        width: 100%;
    }
    #staff_logo img{
        max-width: 45px;
        width: 22.5%;
        height: auto;
    }
    #staff3{
        margin-top:15%;
    }
    #staff4{
        margin-left:3%;
    }
    #staff5{
        margin-left: 53%;
    }
    #staff6{
        margin-left: 24%;
        margin-top: -3%;
    }
    #staff7{
        margin-top: -3%;
    }
	.staff_img{
        width: 100%;
        font-size:12px;
        //padding-bottom:10px;
        padding-bottom:0;
	}
	.staff_img em{
        font-size:130%;
        font-style:normal;
	}
	.staff_detail p{
        text-align:center;
        padding-bottom:0;
        font-size:12px;
        clear:both;
        line-height:1;
	}
	.staff_detail p.staff_name{
    		padding:0.66em 0;
    }
	.staff_detail ul li a:hover {
		opacity:0;
		-moz-opacity:0;
		filter:alpha(opacity=0);
		-ms-filter:"alpha(opacity=0)";
	}

	.staff_detail p img{
		height: auto;
	}
	#staff1.staff_detail p img{
		max-width: 95px;
		width: 45%;
	}
	#staff2.staff_detail p img{
		max-width: 100px;
		width: 45%;
	}
	#staff3.staff_detail p img{
		max-width: 90px;
		width: 45%;
	}
	#staff4.staff_detail p img{
		max-width: 135px;
		width: 45%;
	}
	#staff5.staff_detail p img{
		max-width: 92px;
		width: 45%;
	}
	#staff6.staff_detail p img{
		max-width: 92px;
		width: 45%;
	}
	#staff7.staff_detail p img{
		max-width: 92px;
		width: 45%;
	}

	.staff_detail ul li > a{
		background: rgba(255,255,255,.01);
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}
	.staff_detail ul li > a.active{
		opacity: 1;
	}
	.staff_detail ul li > a.active > div {
		display:block;
		z-index: 99;
	}
	.staff_detail ul li a > div {
		margin:0 0;
		line-height:1.6em;
		display:none;
		background: rgba(0,0,0,0.7);
		position:fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0);
		z-index: -1;
	}
	.staff_detail ul li a > div .inner{
		color:#fff;
		position:fixed;
		top:50%;
		left: 0;
		right: 0;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	.staff_detail ul li a > div .inner .btn{
		display: block;
	}
	.staff_detail ul li a > div .inner .btn{
		position: relative;
		padding-top: 50px;
	}
	.staff_detail ul li a > div .inner .btn div{
		position: absolute;
	}
	.staff_detail ul li a > div .inner .btn div img{
		background: rgba(255,255,255,.01);
	}
	.staff_detail ul li a > div .inner .btn div.preview{
		max-width: 82px;
		width: 10.9333%;
		left: 5.0667%;
	}
	.staff_detail ul li a > div .inner .btn div.close{
		max-width: 54px;
		width: 7.2%;
		left: 0;
		right: 0;
		margin: auto;
	}
	.staff_detail ul li a > div .inner .btn div.next{
		max-width: 44px;
		width: 5.8667%;
		right: 4.5333%;
	}
	.staff_detail ul li a > div em {
		color: #fff;
	}
	.staff_detail ul li > a:hover {
		opacity:1;
		-moz-opacity:1;
		filter:alpha(opacity=100);
		-ms-filter:"alpha(opacity=100)";
	}

#staff_txt{/*
    height: 236.5px;*/
    padding:0;
}
#staff_txt .title_block{
	position: absolute;
	top: 31px;
	left: 0;
	right: 0;
	margin: auto;
 text-align:center;
}
#staff_txt .title_block img{
  width:8.133333333333333%;
  height:auto;
  }
#staff_txt h2{
	position: absolute;
	top: calc(51px - (((1em * 1.5) - 1em) / 2));
	left: 0;
	right: 0;
	margin: auto;
  padding:0;
}
#staff_txt h2 + p{
	position: absolute;
	left: 0;
	right: 0;
	top: 115px;
	margin: auto;
  text-align:center;
}
#staff_txt h2 + p img{
    width: 13.3333333%;
    height: auto;
  }
#staff_txt .txt_block{
	position: absolute;
	left: 0;
	right: 0;
   top: 131px;
	margin: auto;
}

}