@charset "utf-8";
/* ------------------------------------------------------------ common */
#fv .side{ z-index: 1;}

h2{ font-size: 60px; font-family: 'Noto-Sans-JP-Medium';  line-height: 140%; }
h2 span{ display: block; padding: 0 0 20px; font-size: 36px; font-family: 'Metropolis-Bold'; color: #0a2663; }
h3{ font-size: 30px; font-family: 'Noto-Sans-JP-Medium'; line-height: 190%; }



/* ------------------------------------------------------------ fv */
#fv{ padding: 200px 0 0; position: relative; z-index: 1; width: 100%; height: 100vh; min-height: 1100px; max-height: 1200px; background: none; }
#fv:before{ position: absolute; z-index: -1; top: 0; left: 0; content: ""; width: 100%; height: 70%; background: #0a2663; }
#fv:after{ position: absolute; z-index: 1; top: 240px; left: calc(50% - 650px); content: ""; width: 495px; height: 275px; background: url(../images/interview/text_01.png) center/cover no-repeat; }

#fv .side .scroll{ color: #0a2663; }
#fv .side .scroll span{ background: #0a2663; }

#fv .top_box{ overflow: hidden; position: relative; padding: 0 0 140px; display: flex; justify-content: center; align-items: flex-end; }
#fv .top_box:after{ position: absolute; bottom: 90px; left: 0; content: ""; width: 92%; height: 100px; background: #fff; }
#fv .top_box:before{ position: absolute; bottom: 80px; right: 30px; content: ""; width: 778px; height: 227px; z-index: 10; background: url(../images/interview/text_hamada.png) center/cover no-repeat; }

#fv.mukai .top_box:before{ background-image: url(../images/interview/text_yoshihisa.png); width: 795px; }
#fv.mukai:after{ background-image: url(../images/interview/text_02.png); }

#fv.ito .top_box:before{ background-image: url(../images/interview/text_ito.png); width: 575px; }
#fv.ito:after{ background-image: url(../images/interview/text_03.png); }

#fv.koike .top_box:before{ background-image: url(../images/interview/text_koike.png); width: 722px; }
#fv.koike:after{ background-image: url(../images/interview/text_01.png); }


#fv .top_box .w_box{ position: relative; z-index: 1; bottom: -140px; left: 13%; width: 50%; min-width: 700px; max-width: 900px; height: auto; padding: 80px 100px; background: #fff; }
#fv .top_box .w_box h2{ padding: 0 0 75px; font-size: 40px; line-height: 150%; font-family: 'Noto-Sans-JP-Medium'; }
#fv .top_box .w_box h2 span{ display: block; padding: 0 0 30px; font-size: 30px; color: #0a2663; font-family: 'Metropolis-Bold'; }
#fv .top_box .w_box p{ font-size: 36px; letter-spacing: 0.2em; color: #0a2663; font-family: 'Noto-Sans-JP-Medium'; }
#fv .top_box .w_box p small{ display: block; padding: 0 0 10px; font-size: 16px; font-family: 'Noto-Sans-JP-Regular'; letter-spacing: 0; }

#fv .top_box .pic{ width: 60%; min-width: 1000px; height: 700px; }
#fv .top_box .pic img{ width: 100%; object-position: top; object-fit: cover;}


/* ------------------------------------------------------------ q01 */
.txt{  }
.txt h3{ padding: 0 0 50px; font-size: 30px; font-family: 'Noto-Sans-JP-Medium'; }
.txt h3 hr{ display: inline-block; width: 40px; height: 2px; background: #0a2663; border: none; position: relative; top: -9px; margin: 0 10px 0 0;  }
.txt p{ padding: 0 0 80px; font-size: 18px; line-height: 230%; font-family: 'Noto-Sans-JP-Regular'; }

#q01{ padding: 0 0 40px; }


/* ------------------------------------------------------------ q02 */
#q02{ position: relative; padding: 0 0 50px; }
#q02:after{ position: absolute; content: ""; bottom: 90px; right: 0; background: #fff; width: 81%; height: 440px; }
#q02 img{ width: 82%; height: auto; }
#q02 .txt{ position: relative; z-index: 1; top: -100px; }
#q02 .txt p{ padding: 0; }


/* ------------------------------------------------------------ q03 */
#q03{ padding: 0 0 90px; }
#q03 .flex{ display: flex; justify-content: space-between; align-items: flex-start; }
#q03 .txt{ width: 480px; }
#q03 .item{ width: 550px; height: auto; }


/* ------------------------------------------------------------ message */
#message{ position: relative; padding: 210px 0 110px; }
#message:before{ position: absolute; z-index: 2; top: 0; left: 54%; transform: translate(-50%,0); content: ""; width: 846px; height: 237px; background: url(../images/interview/txt_message.png) center top no-repeat; }

#message .w_box{ position: relative; padding: 65px 50px 50px; background: #fff; border: 1px solid #000; }
#message .w_box:before{ position: absolute; z-index: -1; top: 15px; right: -15px; content: ""; width: 100%; height: 100%; background: #0a2663; }

#message .w_box h3{ position: absolute; top: -20px; left: 50%; transform: translate(-50%,0); background: #fff; padding: 5px 30px; font-size: 30px; font-family: 'Noto-Sans-JP-Medium'; }
#message .w_box p{ font-size: 18px; line-height: 200%; }






/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
/* ------------------------------------------------------------ common */
	#fv .animation{ bottom: 36%; right: 7%; }
	#fv .side{ height: 44%; bottom: 170px; }
	
	h2{ font-size: 30px; }
	h2 span{ font-size: 20px; padding: 0 0 15px; }


/* ------------------------------------------------------------ fv */
	#fv{ padding: 22vw 0 0; height: auto; min-height: auto; max-height: auto; }
	#fv:before{ height: 62%; }
	#fv:after{ top: 20vw; left: 0; width: 222px; height: 130px; background: url(../images/interview/text_01-sp.png) center/cover no-repeat; }
	
	#fv .top_box{ justify-content: flex-end; padding: 18vw 0 76vw; }
	#fv .top_box:after{ display: none; }
	#fv .top_box:before{ right: 0; bottom: 60px; width: 310px; height: 90px; z-index: 2; }
	
	#fv.mukai .top_box:before{ width: 305px; }
	
	#fv.ito .top_box:before{ width: 225px; }
	
	#fv.koike .top_box:before{ width: 285px; bottom: 0px; }
	
	#fv .top_box .w_box{ position: absolute; left: 0; bottom: 50px; min-width: 93%; max-width: 93%; height: 45%; padding: 30px 20px 30px 12%; }
	#fv .top_box .w_box h2{ padding: 0 0 30px; font-size: 23px; }
	#fv .top_box .w_box h2 span{ padding: 0 0 10px; font-size: 15px; }
	#fv .top_box .w_box p{ font-size: 18px; }
	#fv .top_box .w_box p small{ padding: 0 0 5px; font-size: 10px; }
	
	#fv .top_box .pic{ width: 86%; min-width: 60%; height: auto; }
	#fv .top_box .pic img{ object-position: initial; object-fit: initial; height: auto; }
	

/* ------------------------------------------------------------ q01 */
	.txt h3{ padding: 0 0 30px; font-size: 20px; }
	.txt h3 hr{ width: 15px; top: -7px; }
	.txt p{ padding: 0 0 40px; font-size: 13px; line-break: strict; }
	
	#q01{ padding: 0 0 30px; }
	

/* ------------------------------------------------------------ q02 */
	#q02{ padding: 0 0 50px; }
	#q02 img{ width: 100%; height: auto; }
	#q02 .txt{ top: 0; padding: 40px 0 0; }
	#q02:after{ display: none; }


/* ------------------------------------------------------------ q03 */
	#q03{ padding: 0 0 20px; }
	#q03 .flex{ flex-direction: column-reverse; }
	
	#q03 .txt{ padding: 30px 0 0; width: 100%; }
	#q03 .item{ width: 100%; }


/* ------------------------------------------------------------ message */
	#message{ padding: 90px 0 60px; }
	#message:before{ width: 90%; height: 90px; background: url(../images/interview/txt_message.png) center top/cover no-repeat; }
	
	#message .w_box{ padding: 25px 5% 20px; }
	#message .w_box:before{ top: 11px; right: -11px; }
	#message .w_box h3{ top: -22px; padding: 8px 14px; font-size: 17px; width: 60%; text-align: center; }
	#message .w_box p{ font-size: 13px; }






}