@charset "utf-8";
#staffIntroduction{position:relative;}
#staffIntroduction .staffList figure{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#staffIntroduction .staffList figure img{
	position:relative;
	border-radius:50%;
	overflow:hidden;
	z-index:1;
}
#staffIntroduction .staffList .staffName{
	display:table;
	line-height:1.0;
	color:#fff;
}
#staffIntroduction .staffList .staffName[data-color="pink"]{background-color:#d29576;}
#staffIntroduction .staffList .staffName[data-color="blue"]{background-color:#6888B8;}
#staffIntroduction .staffList .staffName[data-color="purple"]{background-color:#A279BA;}
#staffIntroduction .staffList .staffName[data-color="green"]{background-color:#6E9D97;}
#staffIntroduction .staffList .staffDetails{
	width:100%;
	background-color:#fff;
	color:#707070;
}
#staffIntroduction .staffList .staffDetails p{line-height:2.0;}
.btwFg{}
#interview{}
#interview .interviewBox{margin:0 auto;}
#interview .interviewBox .txtBox:not(.txtBoxFirst){margin:0 auto;}
#interview .interviewBox .interviewFg img{overflow:hidden;}
#interview .interviewBox[data-dir="full"] .interviewFg img,
#interview .interviewBox .interviewFg[data-over] img{max-width:initial;}
#interview .interviewBox h3{display:block;}
#interview .interviewBox[data-dir="full"] h3{position:relative;}
#interview .interviewBox h3 span{
	display:table;
	background-color:#fff;
	color:#ca8766;
	line-height:2.333;
}
#interview .interviewList > *{display:block;}
#interview .interviewList dt{
	line-height:1.0;
	text-align:center;
}
#interview .interviewList dt[data-color="pink"]{
	background-color:#edd3c5;
	color:#ca8766;
}
#interview .interviewList dt[data-color="green"]{
	background-color:#D7ECE9;
	color:#6E9D97;
}
#interview .interviewList dt[data-color="blue"]{
	background-color:#BFD0EA;
	color:#6888B8;
}
#interview .interviewList dt[data-color="purple"]{
	background-color:#EAD8F4;
	color:#A279BA;
}
#interview .interviewList dd{line-height:2.0;}
#interview .interviewOnlyFg{margin:0 auto;}
#interview .interviewOnlyFg img{overflow:hidden;}
#checkPointBox .inner{
	position:relative;
	margin:0 auto;
	background-color:#fff;
	border-radius:10px;
}
#checkPointBox .aboutList li a{
	color:#d29576;
	text-decoration:none;
}
#checkPointBox .aboutList li a:hover{opacity:0.7;}
#checkPointBox .aboutList li a,
#checkPointBox .aboutList li *{display:block;}
#checkPointBox .aboutList li strong:after{
	content:"";
	display:inline-block;
	background:url(../img/common/slider-next.svg) no-repeat center center / contain;
}
@media screen and (max-width:1159.999px){
	main > *:not([data-full]){
		width:100%;
		padding:0 6.4vw;
	}
	#titleFV{background:url("../img/page-staff/mv-sp.jpg") no-repeat center bottom / cover;}
	#titleFV img{opacity:0!important;}
	#staffIntroduction{
		margin:48px auto 80px;
		background:url("../img/page-staff/staff-bg-sp.png") no-repeat;
		background-position:center 65px;
		background-size:contain;
	}
	#staffIntroduction .staffList{width:100%;}
	#staffIntroduction .staffList+.staffList{
		margin-top:30px;
		padding-top:30px;
		border-top:1px solid #f9f6f5;
	}
	#staffIntroduction .staffList figure img{
		width:100px;
		/*border:3px solid #d29576;*/
	}
	#staffIntroduction .staffList figure figcaption{width:calc(100% - 113px);}
	#staffIntroduction .staffList .staffName{
		padding:6px 8px;
		font-size:1.8rem;
	}
	#staffIntroduction .staffList .staffName small{font-size:1.0rem;}
	#staffIntroduction .staffList .staffData{
		margin-top:10px;
		font-size:1.2rem;
	}
	#staffIntroduction .staffList .staffDetails{
		margin-top:22px;
		padding:20px 6.4vw;
		border-radius:10px;
		font-size:1.3rem;
	}
	.btwFg{
		position:relative;
		width:100%;
		height:53.333vw;
	}
	.btwFg img{
		width:100%;
		height:100%;
		max-width:initial;
		object-fit:cover;
		object-position:64% center;
	}
	#interview{margin-top:50px;}
	#interview .interviewBox{
		width:100%;
		padding:0 6.4vw;
	}
	#interview .interviewBox+.interviewBox{margin-top:55px;}
	#interview .interviewBox:not([data-dir="full"]) .interviewFg img,
	#interview .interviewOnlyFg img{border-radius:8px;}
	#interview .interviewBox h3{font-size:1.8rem;}
	#interview .interviewBox h3 span{padding:0 10px;}
	#interview .interviewBox h3 span+span{margin-top:6px;}
	#interview .interviewBox .txtBoxFirst{}
	#interview .interviewBox .txtBox:not(.txtBoxFirst){margin-top:26px;}
	#interview .interviewBox[data-dir="full"] .interviewFg{
		position:relative;
		width:100vw;
		height:53.333vw;
		margin:0 -6.4vw;
	}
	#interview .interviewBox[data-dir="full"] .interviewFg img{
		width:100%;
		height:100%;
		max-width:initial;
		object-fit:cover;
		object-position:center center;
	}
	#interview .interviewBox h3{
		position:relative;
		z-index:1;
	}
	#interview .interviewBox[data-dir="full"] h3{margin-top:-32px;}
	/*
	#interview .interviewBox:not([data-dir="full"]) .interviewFg:not([data-over]),
	#interview .interviewBox:not([data-dir="full"]) .interviewFg:not([data-over])+.txtBoxFirst{
		display:inline-block;
		vertical-align:middle;
	}
	#interview .interviewBox:not([data-dir="full"]) .interviewFg:not([data-over])+.txtBoxFirst{width:43.2vw;}*/
	
	#interview .interviewBox[data-dir="right"] .txtBoxFirst h3{margin:0 0 16px -3.2vw;}
	#interview .interviewBox[data-dir="right"] .interviewFg:not([data-over]){
		width:43.466vw;
		margin-left:auto;
	}
	#interview .interviewBox[data-dir="right"] .interviewFg:not([data-over]) img{
		width:46.933vw;
		margin-right:-2.133vw;
	}

	#interview #interview04.interviewBox[data-dir="right"] .interviewFg:not([data-over]) img{
		width:80vw;
		max-width:initial;
		height:58.673vw;
		margin-left:-30.7vw;
		margin-right:0;
		object-fit:cover;
		object-position:center center;
	}
	#interview #interview02.interviewBox[data-dir="left"] .interviewFg:not([data-over]) img{
		width: 80vw;
		max-width: initial;
		height: 58.673vw;
		margin-left:-6.4vw;
		margin-right:0;
		object-fit:cover;
		object-position:center center;
	}
	#interview .interviewBox[data-dir="right"] .interviewFg[data-over]{
		width:73.6vw;
		margin-left:auto;
	}
	#interview .interviewBox[data-dir="right"] .interviewFg[data-over] img{
		width:80vw;
		margin-right:-6.4vw;
	}
	#interview .interviewBox:not([data-dir="full"]) .txtBoxFirst{margin-top:-18px;}
	#interview .interviewBox[data-dir="left"] .interviewFg:not([data-over]){width:44.8vw;}
	#interview .interviewBox[data-dir="left"] .interviewFg:not([data-over]) img{
		width:46.933vw;
		margin-left:-2.133vw;
	}
	#interview .interviewBox[data-dir="left"] .interviewFg[data-over]{
		width:73.6vw;
		margin-right:auto;
	}
	#interview .interviewBox[data-dir="left"] .interviewFg[data-over] img{
		width:80vw;
		margin-left:-6.4vw;
	}
	#interview .interviewBox[data-dir="left"] .txtBoxFirst h3{margin:0 0 16px -3.2vw;}
	#interview .interviewBox[data-dir="full"] .interviewList{margin-top:30px;}
	#interview .interviewList > *{font-size:1.3rem;}
	#interview .interviewList dt{
		min-width:46px;
		display:table;
		padding:7px 10px;
		border-radius:4px;
	}
	#interview .interviewList dd{margin-top:8px;}
	#interview .interviewList dd+dt{margin-top:26px;}
	#interview .interviewOnlyFg{
		width:93.333vw;
		margin:75px auto 0;
	}
	#checkPointBox{
		width:100vw;
		padding:140px 0 78px;
		text-align:center;
	}
	#checkPointBox .inner{
		width:80vw;
		margin:0 auto;
		padding:30px 1vw;
	}
	#checkPointBox .menuTtl{
		position:absolute;
		wdth:332px;
		top:-38px;
		left:-14px;
	}
	#checkPointBox .aboutList{
		width:260px;
		margin:0 auto;
	}
	#checkPointBox .aboutList li{width:100%;}
	#checkPointBox .aboutList li+li{margin-top:30px;}
	#checkPointBox .aboutList li a{display:block;}
	#checkPointBox .aboutList li span{
		margin-top:13px;
		color:#707070;
		line-height:1.4;
		font-size:1.1rem;
	}
	#checkPointBox .aboutList li strong{
		margin-top:14px;
		font-size:1.6rem;
	}
	#checkPointBox .aboutList li strong:after{
		width:18px;
		height:18px;
		margin-left:10px;
		vertical-align:-2px;
	}
}
@media screen and (min-width:1160px){
	#staffIntroduction{
		flex-wrap:wrap;
		margin:94px auto 224px;
		background:url("../img/page-staff/staff-bg.png") no-repeat;
		background-position:center bottom 117px;
	}
	#staffIntroduction .staffList{width:550px;}
	#staffIntroduction .staffList:nth-of-type(n+3){margin-top:50px;}
	#staffIntroduction .staffList figure{padding-left:16px;}
	#staffIntroduction .staffList figure img{
		width:240px;
		/*border:4px solid #d29576;*/
	}
	#staffIntroduction .staffList figure figcaption{width:270px;}
	#staffIntroduction .staffList .staffName{
		padding:8px;
		font-size:2.4rem;
	}
	#staffIntroduction .staffList .staffName small{font-size:1.2rem;}
	#staffIntroduction .staffList .staffData{
		margin-top:24px;
		font-size:1.3rem;
	}
	#staffIntroduction .staffList .staffDetails{
		margin-top:-12px;
		padding:36px 40px 30px;
		border-radius:10px;
	}
	#interview{margin-top:146px;}
	#interview .interviewBox:not([data-dir="full"]){width:1140px;}
	#interview .interviewBox+.interviewBox{margin-top:110px;}
	#interview .interviewBox:not([data-dir="full"]) .interviewFg img,
	#interview .interviewOnlyFg img{border-radius:16px;}
	#interview .interviewBox h3{font-size:3.0rem;}
	#interview .interviewBox h3 span{padding:0 20px;}
	#interview .interviewBox h3 span+span{margin-top:10px;}
	#interview .interviewBox .txtBox:not(.txtBoxFirst){
		width:1024px;
		margin-top:80px;
	}
	#interview .interviewBox[data-dir="full"]{
		padding-right:calc(50% - 512px);
		padding-left:calc(50% - 512px);
	}
	#interview .interviewBox:not([data-dir="full"]){
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-wrap:wrap;
	}
	#interview .interviewBox[data-dir="full"] .interviewFg img{
		width:100vw;
		margin-right:calc(-50vw + 464px);
		margin-left:calc(-50vw + 464px);
	}
	#interview .interviewBox[data-dir="full"] h3{margin-top:-32px;}
	#interview .interviewBox[data-dir="right"]{flex-direction:row-reverse;}
	#interview .interviewBox[data-dir="right"] .txtBoxFirst h3{margin:0 -93px 80px -58px;}
	#interview .interviewBox[data-dir="right"] .interviewFg{width:430px;}
	#interview .interviewBox[data-dir="right"] .interviewFg[data-over] img{
		width:820px;
		margin-right:-390px;
	}
	#interview .interviewBox[data-dir="right"] .txtBoxFirst{
		width:710px;
		padding:0 70px 0 58px;
	}
	#interview .interviewBox[data-dir="left"] .interviewFg{width:500px;}
	#interview .interviewBox[data-dir="left"] .interviewFg[data-over] img{
		width:890px;
		margin-left:-390px;
	}
	#interview .interviewBox[data-dir="left"] .txtBoxFirst{
		width:640px;
		padding-left:60px;
	}
	#interview .interviewBox[data-dir="left"] .txtBoxFirst h3{margin:0 0 80px -152px;}
	#interview .interviewBox[data-dir="full"] h3{margin:-30px 0 80px -58px;}
	#interview .interviewList{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		flex-wrap:wrap;
	}
	#interview .interviewList > *{font-size:1.6rem;}
	#interview .interviewList dt{
		min-width:52px;
		padding:7px 10px;
		border-radius:4px;
	}
	#interview .interviewList dd{
		width:calc(100% - 78px);
		margin-top:-2px;
	}
	#interview .interviewList dt+dd+dt,
	#interview .interviewList dd+dt+dd{margin-top:52px;}
	#interview .interviewOnlyFg{
		width:96vw;
		max-width:1760px;
		margin-top:130px;
	}
	#checkPointBox{width:100%;}
	#checkPointBox .inner{
		width:1140px;
		margin:150px auto 140px;
		padding:30px 35px;
	}
	#checkPointBox .menuTtl{
		position:absolute;
		wdth:420px;
		top: -60px;
		left:-20px;
	}
	#checkPointBox .aboutList{
		display:flex;
		justify-content:space-between;
	}
	#checkPointBox .aboutList li{width:500px;}
	#checkPointBox .aboutList li a{display:table;}
	#checkPointBox .aboutList li a > *{
		display:table-cell;
		text-align:left;
		vertical-align:middle;
	}
	#checkPointBox .aboutList li .txtBox{padding-left:30px;}
	#checkPointBox .aboutList li span{
		color:#707070;
		line-height:1.4;
		font-size:1.2rem;
	}
	#checkPointBox .aboutList li strong{
		margin-top:14px;
		font-size:2.0rem;
	}
	#checkPointBox .aboutList li strong:after{
		width:24px;
		height:24px;
		margin-left:6px;
		vertical-align:-2px;
	}
}