@charset "UTF-8";



/********************************************************************************************************
/* 左右（スタッフレイアウト）
*********************************************************************************************************/

.box {
	margin: 50px auto 100px auto;
	width: 80%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.text {
	width: calc(100% - 450px);

}


.pict {
	width: 419px;
}

.pict img {
  width: 100%;
  height:auto;
}

.box:nth-child(odd) {
  flex-direction: row-reverse;
}
.box:nth-child(odd) .text {
  text-align: left;
}
.box:nth-child(even) .pict {
  margin-left: 0;
  margin-right: 3%;
}




p.senpai_title {
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 0px;
	letter-spacing: 2px;
	line-height: 1.8;
	font-size: 110%;
	font-weight: 700;
	color: #FA9EA9;
}


p.answer {
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 0px;
	letter-spacing: 2px;
	line-height: 1.8;
}


/********************************************************************************************************
/* 先輩配置設定
*********************************************************************************************************/

ul.senpai {
	margin : 50px auto 0px auto;
	width:100%; 
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}



ul.senpai li {
	position: relative;
	display: block;
	width: 46%;
	vertical-align: top;
	text-align: left;
	letter-spacing: 2px;

}





/********************************************************************************************************
/* 先輩紹介設定
*********************************************************************************************************/




.staff_contents > section {
	display: block;


}
/*staff_area*/
.staff_area{
	background-size: 100% !important;
	cursor: pointer;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin-bottom: 5px;
}
.staff_contents .staff_area figure{
	position: relative;
}
.staff_contents .staff_area figure .mask{
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.staff_contents .staff_area .mask{

	background: url(../images/mask01.png) no-repeat;
	background-size: 100%;
	z-index: 100;
}




.mask01{
	position: absolute;
	top: 0;
	right: -139px;
	width: 100%;
	height: 100%;
	background-position: right;
	background: url(../images/mask02.png) no-repeat;
	object-fit: cover;
	z-index: 100;
}



.active .mask01{
	background: url(../images/mask02active.png) no-repeat;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 100;
}





.staff_contents .staff_area.active .mask{
	background: url(../images/mask01active.png) no-repeat;
	background-size: 100%;
}
.staff_area .staff_name{
	position: absolute;
	top: 55%;
	left: 0;
}
staff_area p,
.staff_area h2{

	font-weight: bold;
}
.staff_area p{
	font-size: 12px;
	line-height: 1.66666;
	letter-spacing: 0.05em;
}
.staff_area h2{
	padding: 10px 0 0 0;
	font-size: 24px;
	letter-spacing: 0.1em;
	line-height: 1;
}
.staff_area h2 span{
	padding: 10px 0 0 0;
	display: block;
	font-family: 'Walter Turncoat', cursive;
	font-size: 10px;
}
/*comment*/
.staff_contents .comment h3,
.staff_contents .comment p{
	color: #fff;
}
.staff_contents .comment h3{
	padding: 25px 0 12px 0;
	font-size: 14px;
	font-weight: bold;
}
.staff_contents .comment h3 span{
	padding-right: 5px;
}
.staff_contents .comment p{
	font-size: 12px;
}
.staff_contents .comment .btn{
	display: block;
	width: 18.93333%;
	margin: 0 auto;
	padding: 30px 0 20px 0;
	padding: 8vw 0 5.33333vw 0;
	cursor: pointer;
}
@media (max-width: 767px) {
	.staff_contents .staff_area p,
	.staff_contents .comment p{
		font-size: 3.2vw
	}
	.staff_contents .staff_area h2{
		padding: 2.66666vw 0 0 0;
		font-size: 6.4vw;
	}
	.staff_contents .staff_area h2 span{
		padding: 2.66666vw 0 0 0;
		font-size: 2.66666vw;
	}
	/*comment*/
	.staff_contents .comment .inner{
		margin: 20px 0;
		padding: 0 15px;
		background: #27333b;
		position: relative;
	}
	.staff_contents .comment .inner:before,
	.staff_contents .comment#staff17Comment .inner:before{
		content: "";
		width: 0;
		height: 0;
		display: block;
		border: 20px solid transparent;
		border-bottom: 20px solid #27333b;
		position: absolute;
		top: -39px;
		left: 15px;
	}
	.staff_contents .comment:nth-child(even) .inner:before{
		left: 50%;
		margin-left: 4.5%;
	}
	.staff_contents .comment h3{
		font-size: 3.73333vw;
	}
}
@media (min-width: 768px) {
	.staffTit{
		width: 150px;
		margin-bottom: 20px !important;
	}
	.staff_contents{
		width: 80%;
		margin: -60px auto 0 auto;
	}
	.staff_contents .firstTxt{
		padding: 30px 0 10px 0;
		font-size: 16px;
		line-height: 2;
	}
	.staff_area:nth-child(odd){
		margin-right: 102px;
	}
	/*staff_area*/
	.staff_contents .staff_area{
		width: 419px;
		margin-top: 60px;
		top:0;
		transition: 0.3s ease-in-out;
	}
	.staff_contents .staff_area:hover{
		position: relative;
		top: -10px;
	}
	.staff_contents .staff_area figure .mask{
		width: 247px;
		height: 247px;
		background: url(../images/mask01_pc.png) no-repeat;
		top: 0;
		left: auto;
		right: 0;
	}
	.staff_contents .staff_area.active figure .mask{
		background: url(../images/mask01active_pc.png) no-repeat;
	}
	.staff_contents .staff_area .staff_name{
		left: 0;
		top: auto;
		bottom: 50px;
	}
	.staff_contents .staff_area .staff_name .position{
		margin: 0;
		font-size: 14px;
	}
	.staff_contents .staff_area .staff_name h2{
		margin: 0;
		letter-spacing: 0.3em;
	}
	.staff_contents .staff_area .staff_name h2 span{
		padding-top: 15px;
		letter-spacing: 0.2em;
	}
	/*comment*/
	.staff_contents .comment{
		padding: 0 200%;
		margin: 0 -200%;
	}
	.staff_contents .comment .inner{
		padding: 0 200%;
		margin: 40px -200% 0 -200%;
		background: #25325A;
		position: relative;
	}
	.staff_contents .comment .inner:before,
	.staff_contents .comment#staff17Comment .inner:before{
		content: "";
		width: 0;
		height: 0;
		display: block;
		border: 40px solid transparent;
		border-bottom: 40px solid #27333b;
		position: absolute;
		top: -70px;
		left: 50%;
		margin-left: -470px;
	}
	.staff_contents .comment:nth-child(even) .inner:before{
		margin-left: 50px;
	}
	.staff_contents .comment .inner ul{
		font-size: 0;
		margin-bottom: 20px;
	}
	.staff_contents .comment .inner ul li{
		padding: 0 20px 20px 10px;
		width: 100%;
		display: inline-block;
		vertical-align: top;
	}
	.staff_contents .comment .inner ul li:nth-child(even){
		padding: 0 10px 0 20px;
	}
	.staff_contents .comment .inner ul li h3{
		padding: 40px 0 20px 0;
		font-size: 16px;
	}
	.staff_contents .comment h3 span{
		padding-top: 8px;
		font-size: 22px;
	}
	.staff_contents .comment .inner ul li p{
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 2.0px;
	}
	.staff_contents .comment .btn,.staff_contents .comment .btn img{
		width: 70px;
	}
	.staff_contents .comment .btn{
		padding: 0 0 30px 0;
	}
}



/******************************************************************************
/* スマートフォンサイズ
*******************************************************************************/


@media screen and (max-width:600px) {


.pcOnly {
	display: none;
}


.spOnly {
	display: block;
}


/********************************************************************************************************
/* 左右（スタッフレイアウト）
*********************************************************************************************************/

.box {
	margin: 0px auto 30px auto;
	width: 90%;
	display:block;
	flex-direction: row;
	justify-content: space-between;
}



.text {
	width: 100%;
	display: block;

}


.pict {
	width: 100%;
	display: block;
}

.pict img {
  width: 100%;
  height:auto;
}



/********************************************************************************************************
/* 左右（スタッフレイアウト）
*********************************************************************************************************/

.senpai {
	margin : 70px auto 0px auto;
	width:100%; 
	flex-direction: column;
}



.senpai .flex01 {
	position: relative;
	display: block;
	width: 100%;
	vertical-align: top;
	text-align: left;
	letter-spacing: 2px;
}

.senpai .flex02 {
	position: relative;
	display: block;
	width: 100%;
	vertical-align: top;
	text-align: left;
	letter-spacing: 2px;
}



p.answer {
	width: 100%;
	display: block;
	padding-top: 20px;
	padding-bottom: 0px;

}



.staff_contents > section {
	display: block;


}
/*staff_area*/
.staff_contents .staff_area{
	background-size: 100% !important;
	cursor: pointer;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin-bottom: 5px;
}
.staff_contents .staff_area figure{
	position: relative;
}
.staff_contents .staff_area figure .mask{
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.staff_area .mask{

	background: url(../images/mask01.png) no-repeat;
	background-size: 100%;
	z-index: 100;

}





}