@charset "utf-8";

#interviews .inner-sct { padding: 20px 0 80px;}
#interviews .bloc { width: 88%; max-width: 1180px; margin: 0 auto; padding: 20px 0;}
#interviews .box { position: relative; width: 100%; max-width: 840px;}
#interviews .box:before { content: ''; display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%;
 position: absolute; left: 30px; top: 20px; z-index: 2;
}
#interviews .box.box-1 { }
#interviews .box.box-2 { margin: 0 auto;}
#interviews .box.box-3 { margin: 0 0 0 auto;}
#interviews .box a { position: relative; display: block; width: 100%;}
#interviews .box a figure { position: relative; width: 100%; padding-top: 42%; border-radius: 30px; overflow: hidden;}
#interviews .box a figure img { position: absolute; left: 50%; top: 50%; width: auto; height: 100%; transform: translate(-50%,-50%);
 transition: 0.3s ease;
}
#interviews .box a figure img.sp { display: none;}
#interviews .box a:hover figure img { transform: translate(-50%,-50%) scale(1.1); opacity: 0.8;}

#interviews .box dl { position: absolute; left: 0; top: 50%; width: 50%; transform: translateY(-50%);}
#interviews .box.box-1 dl { left: 50%;}
#interviews .box.box-2 dl { left: 72px;}
#interviews .box.box-3 dl { left: 50%;}
#interviews .box dl dt { margin-bottom: 8px; line-height: 1.2;}
#interviews .box dl dt > span { display: inline-block; padding: 8px 20px; background: #ba9d32; border-radius: 50px;}
#interviews .box dl dt span.name { display: inline-block; margin-right: 15px;
 color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 0.2rem; vertical-align: middle;
}
#interviews .box dl dt span.eng { display: inline-block; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; vertical-align: middle;}
#interviews .box dl dt br { display: none;}
#interviews .box dl dd { margin-bottom: 8px; font-size: 20px; line-height: 1.2;}
#interviews .box dl dd:last-child { margin-bottom: 0px;}
#interviews .box dl dd span.tag { display: inline-block; padding: 5px 20px; background: #fff; border-radius: 50px; color: #000;}
#interviews .box dl dd br { display: none;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#interviews .box:before { content: none;}
	#interviews .box a figure { padding-top: 58%;}
	#interviews .box a figure img.pc { display: none;}
	#interviews .box a figure img.sp { display: block; width: 100%; height: auto;}
	#interviews .box a:hover figure img { transform: translate(-50%,-50%);}
	#interviews .box dl dt { margin-bottom: 12px;}
	#interviews .box dl dt > span { display: inline-block; padding: 0px; background: none; border-radius: 0px;}

	#interviews .box dl dt span.name { display: inline-block; margin-right: 0px; margin-bottom: 8px; padding: 6px 20px;
		 background: #ba9d32; border-radius: 50px; font-size: 26px;}
	#interviews .box dl dt span.eng { background: #ba9d32; border-radius: 50px; padding: 6px 20px; font-size: 18px;}
	#interviews .box dl dt br { display: block;}
}
@media (max-width: 641px) {
	#interviews .box.box-2 dl { left: 50px;}
	#interviews .box dl dt span.name { font-size: 21px;}
	#interviews .box dl dt span.eng { font-size: 14px;}
	#interviews .box dl dd { margin-bottom: 6px; font-size: 14px;}
}
@media (max-width: 481px) {
	#interviews .inner-sct { padding: 12px 0 60px;}
	#interviews .bloc { padding: 12px 0;}
	#interviews .box a figure { border-radius: 20px;}
	#interviews .box.box-1 dl { left: 55%;}
	#interviews .box.box-2 dl { left: 20px;}
	#interviews .box.box-3 dl { left: 55%;}
	#interviews .box dl dt { margin-bottom: 10px;}
	#interviews .box dl dt span.name { margin-bottom: 2px; font-size: 18px; padding: 2px 12px;}
	#interviews .box dl dt span.eng { padding: 2px 12px; font-size: 12px; letter-spacing: 0.05rem;}
	#interviews .box dl dd { margin-bottom: 6px; font-size: 12px;}
	#interviews .box dl dd span.tag { padding: 0; background: none;}
	#interviews .box dl dd span.tag span { display: inline-block; padding: 2px 12px; background: #fff; border-radius: 50px;}
	#interviews .box dl dd span.tag span.mb { margin-bottom: 6px;}
}



#interview { background: url('../img/bg-3.png') no-repeat 50% 100% / 2000px auto;}
@media (max-width: 641px) {
	#interview { background: url('../img/bg-3@sp.png') no-repeat 50% 100% / 100% auto;}
}

#interview .inner-sct { padding: 150px 0;}
#interview article { position: relative; width: 92%; max-width: 1200px; margin: 0 auto; padding: 20px 0 80px;}
#interview article:after { content: ''; display: block; width: 100%; height: calc(100% - 160px); background: #ededed; border-radius: 50px;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#interview article .mainView { position: relative; width: 90%; max-width: 1050px; margin: 0 auto 40px; z-index: 2;}
#interview article .mainView figure { position: relative; width: 100%; border-radius: 30px; overflow: hidden;}
#interview article .mainView figure img { width: 100%; }
#interview article .mainView figure img.sp { display: none;}
#interview article .mainView dl { position: absolute; left: 50%; top: 50%; width: 50%; transform: translateY(-50%);}
#interview article .mainView dl.left { left: 10%;}
#interview article .mainView dl dt { margin-bottom: 16px; line-height: 1.2;}
#interview article .mainView dl dt > span { display: inline-block; padding: 8px 20px; background: #ba9d32; border-radius: 50px;}
#interview article .mainView dl dt span.name { display: inline-block; margin-right: 15px; color: #fff; font-size: 32px; font-weight: 700; vertical-align: middle;}
#interview article .mainView dl dt span.eng { display: inline-block; color: #fff; font-size: 22px; font-weight: 700; vertical-align: middle;}
#interview article .mainView dl dd { margin-bottom: 14px; font-size: 24px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.2;}
#interview article .mainView dl dd:last-child { margin-bottom: 0px;}
#interview article .mainView dl dd span.tag { display: inline-block; margin-right: 8px; padding: 5px 20px; background: #fff; border-radius: 50px;}
#interview article .mainView dl dt br { display: none;}
#interview article .mainView dl dd br { display: none;}


#interview article .box { position: relative; width: 90%; max-width: 1050px; margin: 0 auto 40px; padding: 30px 50px 40px; z-index: 2;
 background: #fff; border-radius: 50px;
}
#interview article .box:last-child { margin-bottom: 0px;}
#interview article .box .tit { position: relative; padding-left: 35px; padding-bottom: 20px; border-bottom: solid 3px #ededed;}
#interview article .box .tit:before { content: ''; display: block; width: 14px; height: 14px;
 background: #ba9d32; border-radius: 50%;
 position: absolute; left: 5px; top: 0.5em;
}
#interview article .box .tit h3 { font-size: 20px; font-weight: 700; letter-spacing: 0.2rem; line-height: 1.4;}
#interview article .box .ctn { padding-top: 20px;}
#interview article .box .ctn p { font-size: 15px; font-weight: 600; letter-spacing: 0.15rem; line-height: 2;}

#interview article .pht-L { position: relative; width: 92%; max-width: 1050px; margin: 0 auto 40px; z-index: 2;
 background: url('http://recruit.tfnmobile.com/wp-content/uploads/2025/05/bg-interview.png') no-repeat 100% 50% / auto 100%;
}
#interview article .pht-L figure { }
#interview article .pht-L figure img { width: 100%; max-width: 660px; border-radius: 50px;}
#interview article .pht-R { position: relative; width: 92%; max-width: 1050px; margin: 0 auto 40px; z-index: 2;
 background: url('http://recruit.tfnmobile.com/wp-content/uploads/2025/05/bg-interview.png') no-repeat 0% 50% / auto 100%;
}
#interview article .pht-R figure {  text-align: right;}
#interview article .pht-R figure img { width: 100%; max-width: 660px; border-radius: 50px;}
@media (max-width: 1001px) {
	#interview article .mainView dl dt span.name { font-size: 24px;}
	#interview article .mainView dl dt span.eng { font-size: 18px;}
	#interview article .mainView dl dd { font-size: 20px;}
}
@media (max-width: 801px) {
	#interview article .mainView { margin-bottom: 30px;}
	#interview article .mainView figure { border-radius: 20px;}
	#interview article .mainView figure img.pc { display: none;}
	#interview article .mainView figure img.sp { display: block;}

	#interview article .mainView dl dt { margin-bottom: 12px;}
	#interview article .mainView dl dt > span { display: inline-block; padding: 0px; background: none; border-radius: 0px;}

	#interview article .mainView dl dt span.name { display: inline-block; margin-right: 0px; margin-bottom: 8px; padding: 6px 20px;
		 background: #ba9d32; border-radius: 50px; font-size: 26px;}
	#interview article .mainView dl dt span.eng { background: #ba9d32; border-radius: 50px; padding: 6px 20px; font-size: 18px;}
	#interview article .mainView dl dt br { display: block;}
	#interview article .mainView dl dd { font-size: 16px;}
	#interview article .mainView dl dd br { display: none;}

	#interview article .box { margin-bottom: 30px; padding: 20px 30px 30px; border-radius: 20px;}
	#interview article .box .tit { padding-bottom: 16px;}
	#interview article .box .tit h3 { font-size: 18px; letter-spacing: 0.1rem;}
	#interview article .box .ctn { padding-top: 16px;}
	#interview article .box .ctn p { font-size: 14px; font-weight: 400;}
	#interview article .pht-L { margin-bottom: 30px; background: none;}
	#interview article .pht-L figure img { border-radius: 20px;}
	#interview article .pht-R { margin-bottom: 30px; background: none;}
	#interview article .pht-R figure img { border-radius: 20px;}
}
@media (max-width: 481px) {
	#interview .inner-sct { padding: 80px 0;}
	#interview article { padding: 12px 0 40px;}
	#interview article:after { height: calc(100% - 80px); border-radius: 20px;}
	#interview article .mainView { margin-bottom: 20px;}
	#interview article .mainView dl { left: 52%;}
	#interview article .mainView dl.left { left: 20px;}
	#interview article .mainView dl dt { margin-bottom: 10px;}
	#interview article .mainView dl dt span.name { margin-bottom: 2px; font-size: 18px; padding: 2px 8px;}
	#interview article .mainView dl dt span.eng { padding: 2px 8px; font-size: 12px; letter-spacing: 0.05rem;}
	#interview article .mainView dl dd { margin-bottom: 6px; font-size: 12px;}
	#interview article .mainView dl dd span.tag { padding: 0; background: none;}
	#interview article .mainView dl dd span.tag span { display: inline-block; padding: 2px 8px; background: #fff; border-radius: 50px;}
	#interview article .mainView dl dd span.tag span.mb { margin-bottom: 6px;}

	#interview article .box { margin-bottom: 20px; padding: 15px 18px 20px;}
	#interview article .box .tit { padding-left: 20px; padding-bottom: 12px; border-bottom: solid 2px #ededed;}
	#interview article .box .tit:before { width: 10px; height: 10px; left: 0px; top: 0.32em;}
	#interview article .box .tit h3 { font-size: 14px;}
	#interview article .box .ctn { padding-top: 12px;}
	#interview article .box .ctn p { font-size: 12px; letter-spacing: 0.05rem; line-height: 1.65;}
	#interview article .pht-L { margin-bottom: 20px;}
	#interview article .pht-R { margin-bottom: 20px;}

}



#pager .inner-wide { position: relative; width: 92%; max-width: 1200px; margin: 0 auto; padding: 50px 0px;}
#pager .btn-prev,
#pager .btn-next { width: 28%; max-width: 160px; position: absolute; top: 50%; transform: translateY(-50%);}
#pager .btn-back { width: 40%; max-width: 200px; margin: 0 auto;}
#pager .btn-prev { left: 0;}
#pager .btn-next { right: 0;}
#pager .btn-prev a,
#pager .btn-next a,
#pager .btn-back a { position: relative; display: block; width: 100%; padding: 7px 0; border-radius: 50px; overflow: hidden;
 background: linear-gradient(-40deg,#000 40%,#ba9d32 60%); background-size: 500% 500%; background-position: 100% 0%;
 color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.2rem; text-decoration: none;
 transition: background 0.4s ease;
}
#pager .btn-prev a { text-align: right;}
#pager .btn-prev a span,
#pager .btn-next a span,
#pager .btn-back a span { position: relative; display: inline-block; z-index: 2;}
#pager .btn-prev a span,
#pager .btn-next a span { padding: 0 24px; transition: 0.4s ease 0.02s;}
#pager .btn-prev a svg,
#pager .btn-next a svg,
#pager .btn-back a svg { width: 18px; fill: #fff; position: absolute; top: 50%; z-index: 2; transition: 0.4s ease 0.1s;}
#pager .btn-prev a svg,
#pager .btn-next a svg { transform: translateY(-50%);}
#pager .btn-prev a svg { left: 24px;}
#pager .btn-next a svg { right: 24px;}

#pager .btn-prev a:hover,
#pager .btn-next a:hover { background-position: 0% 0%;}
#pager .btn-prev a:hover svg { left: 18px;}
#pager .btn-next a:hover svg { right: 18px;}

#pager .btn-back a:before,
#pager .btn-back a:after { content: ''; display: block; position: absolute;}
#pager .btn-back a:before{ width: 8px; height: 8px; background: #fff; border-radius: 50%; right: 30px; top: 50%; transform: translate(0,-50%); z-index: 2;
 transition: 0.4s ease;
}
#pager .btn-back a span { padding-left: 30px; transition: 0.4s ease 0.06s;}
#pager .btn-back a svg { left: 30px; transform: translate(-100px,-50%) scale(0);}
#pager .btn-back a:hover { background-position: 0% 0%;}
#pager .btn-back a:hover:before{ height: 2px; transform: translate(50px,-50%);}
#pager .btn-back a:hover:after { transform: translateX(65%);}
#pager .btn-back a:hover span { text-indent: 50px;}
#pager .btn-back a:hover svg { transform: translate(0,-50%) scale(1);}
@media (max-width: 801px) {
	#pager .btn-prev a,
	#pager .btn-next a,
	#pager .btn-back a { font-size: 16px;}
}
@media (max-width: 481px) {
	#pager .inner-wide { padding: 30px 0px;}
	#pager .btn-prev,
	#pager .btn-next { width: 30%;}
	#pager .btn-back { width: 32%;}
	#pager .btn-prev a,
	#pager .btn-next a,
	#pager .btn-back a { font-size: 13px;}
	#pager .btn-back a { padding: 6px 0;}
	#pager .btn-back a:before{ width: 5px; height: 5px; right: 15px;}
	#pager .btn-prev a span,
	#pager .btn-next a span { padding: 0 16px;}
	#pager .btn-back a span { padding-left: 20px;}
	#pager .btn-prev a svg,
	#pager .btn-next a svg,
	#pager .btn-back a svg { width: 12px;}
	#pager .btn-prev a svg { left: 10px;}
	#pager .btn-next a svg { right: 10px;}
	#pager .btn-back a svg { left: 16px;}
	#pager .btn-back a:hover span { text-indent: 20px;}
}