@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(normalize.css);
@import url(../plugin/fontawesome/css/all.min.css);
@import url(../plugin/aos/aos.css);
/*@import url(../plugin/OwlCarousel/assets/owl.carousel.min.css); @import url(../plugin/OwlCarousel/assets/owl.theme.default.css);*/
/*@import url(../plugin/lightGallery/css/lightgallery.min.css);*/
/*@import url(../plugin/Remodal/remodal.css); @import url(../plugin/Remodal/remodal-default-theme.css);*/
@import url(../plugin/slick/slick.css); @import url(../plugin/slick/slick-theme.css);
@import url(common_parts.css);
@import url(common.css);

/*
 interview
==============================*/


/* index-header ----------*/
#index-header { position: relative; padding: 10rem 2rem 12rem; }
#index-header::before, #index-header::after { position: absolute; left: 0; content: ""; width: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
#index-header::before { bottom: 6rem; height: 16.4rem; border-bottom: solid 3px #FFF; background-image: url(../images/interview/bg_1.svg); }
#index-header::after { bottom: 0; height: 19.4rem; background-image: url(../images/interview/bg_2.svg); }
#index-header h1 { color: #FFF; line-height: 1; }
#index-header h1 span { display: block; text-align: center; }
#index-header h1 .e { font-size: 10rem; font-weight: 800; font-family: 'Saira Extra Condensed', sans-serif; letter-spacing: 0.05em; }
#index-header h1 .j { margin-top: 3rem; font-size: 3.6rem; }
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-header { position: relative; padding: 2rem 2rem 8rem; }
	#index-header h1 { margin-bottom: 4rem; }
	#index-header h1 .e { font-size: 8rem; }
	#index-header h1 .j { margin-top: 1rem; font-size: 2.4rem; }
}

/* index-contents ----------*/
#index-contents { position: relative; }
#index-contents::before { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 45.6rem; background-repeat: no-repeat; background-position: center bottom; background-size: contain; background-image: url(../images/interview/bg_3.svg); }
#index-contents .inner { position: relative; z-index: 1; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#index-contents { padding-bottom: 25rem; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#index-contents { padding-bottom: 15rem; }
}

/* detail-header ----------*/
#detail-header { padding: 9rem 0 14rem; }
#detail-header .inner { max-width: 180rem; position: relative; }
#detail-header .pw { padding: 0 12rem; }
#detail-header .pw img { border-radius: 4rem; }
#detail-header .tw { position: absolute; bottom: -3rem; left: 2rem; }
#detail-header .tw h1 { position: absolute; top: -5rem; display: inline-block; padding: 2rem 3rem; border-radius: 5rem; color: #003B80; background-color: #FAF000; line-height: 1.2; }
#detail-header .tw h1 strong { font-size: 3.2rem; vertical-align: middle; }
#detail-header .tw h1 small { font-size: 2rem; vertical-align: middle; }
#detail-header .tw .w { display: inline-block; margin-left: 3.5rem; padding: 4rem 2.5rem 2.5rem; border-radius: 2rem; background-color: #FFF; }
#detail-header .tw .w h2 { display: inline-block; padding: 0.8rem 2rem; border-radius: 3rem; color: #FFF; background-color: #003B80; line-height: 1.2; font-size: 1.6rem; }
#detail-header .tw .w p { font-size: 1.6rem; color: #003B80; }
@media screen and (max-width:1240px) {
	#detail-header { padding: 4rem 0 7rem; }
	#detail-header .pw { padding: 0 6rem; }
	#detail-header .tw { bottom: -5rem; }
}
@media screen and (max-width:896px) { /* iPhone 横 m */
	#detail-header { padding: 3rem 0 6rem; }
	#detail-header .pw { padding: 0 2rem; }
	#detail-header .tw { position: relative; bottom: 0; left: 1rem; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#detail-header { padding: 3rem 0 3rem; }
	#detail-header .tw h1 { top: -3rem; padding: 1.4rem 2rem; }
	#detail-header .tw h1 strong { font-size: 2rem; }
	#detail-header .tw h1 small { font-size: 1.4rem; }
	#detail-header .tw { top: 100%; bottom: auto; width: calc(100% - 5rem); }
	#detail-header .tw .w { width: calc(100% + 1.5rem); margin-left: 1rem; padding: 4rem 2rem 2rem; }
}

/* detail-contents ----------*/
#detail-contents {}
#detail-contents .contents { display: flex; padding: 8rem; border-radius: 6rem; background-color: #FFF; }
#detail-contents .contents .pw { width: 42%; }
#detail-contents .contents .pw img { position: relative; width: calc(100% + 14rem); max-width: none; border-radius: 4rem; }
#detail-contents .contents .tw { width: 53%; }
#detail-contents .contents .tw h2 { position: relative; font-size: 2rem; color: #003B80; padding: 0.5rem 1rem; line-height: 1.4; }
#detail-contents .contents .tw h2 span { position: relative; z-index: 1; }
#detail-contents .contents .tw h2:before { content: ""; position: absolute; top: -0.25rem; width: calc(100% + 8rem); height: 100%; background-color: #FAF000; }
#detail-contents .contents .tw h3 { margin-top: 3rem; font-size: 2.8rem; color: #003B80; }
#detail-contents .contents .tw p { margin-top: 3rem; font-size: 1.6rem; text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF; }
#detail-contents .contents.-r { flex-direction: row-reverse; background-image: url(../images/interview/bg_4.svg); background-repeat: no-repeat; background-position: left 7rem bottom; }
#detail-contents .contents.-r .tw { margin-right: 6%; }
#detail-contents .contents.-r .tw h2:before { left: -8rem; }
#detail-contents .contents.-l { background-image: url(../images/interview/bg_5.svg); background-repeat: no-repeat; background-position: right 7rem bottom; }
#detail-contents .contents.-l .pw img { position: relative; left: -14rem; }
#detail-contents .contents.-l .tw { margin-left: 6%; }
#detail-contents .contents.-l .tw p { padding-bottom: 6rem; }
#detail-contents .contents.-l .tw h2:before { left: 0; }
#detail-contents .bridge { width: 100%; height: 13rem; background-image: url(../images/index/sv_bridge.svg); background-repeat: no-repeat; background-position: center; }
#detail-contents .flow { margin-top: 10rem; }
#detail-contents .flow h4 {text-align: center; color: #FAF000; font-size: 2.8rem; }
#detail-contents .flow .flow_list {}
#detail-contents .flow .flow_list li { display: flex; margin-top: 2rem; padding: 3rem 6rem; border-radius: 5rem; background-color: #FFF; align-items: center; }
#detail-contents .flow .flow_list span { display: block; }
#detail-contents .flow .flow_list .time { width: 10rem; margin-right: 5rem; color: #003B80; text-align: right; font-size: 3.2rem; font-weight: bold; }
#detail-contents .flow .flow_list .tw { width: calc(100% - 10rem - 5rem); }
#detail-contents .flow .flow_list .tw .h { color: #EF4E16; font-size: 2.4rem; font-weight: bold; }
#detail-contents .flow .flow_list .tw .t { font-size: 1.6rem; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#detail-contents .contents { display: block; padding: 4rem 4rem 12rem; }
	#detail-contents .contents .pw { width: 100%; margin-bottom: 3rem; }
	#detail-contents .contents .pw img { width: 100%; }
	#detail-contents .contents .tw { width: 100%; }
	#detail-contents .contents .tw h2:before { width: calc(100% + 4rem); }
	#detail-contents .contents.-r .tw { margin-right: 0; }
	#detail-contents .contents.-r .tw h2:before { left: -4rem; }
	#detail-contents .contents.-l .tw h2:before { left: -4rem; }
	#detail-contents .contents.-l .tw { margin-left: 0 }
	#detail-contents .contents.-l .pw img { left: 0; }
}
@media screen and (max-width:480px) { /* iPhone 縦 s */
	#detail-contents .flow .flow_list li { margin-top: 1.5rem; padding: 2rem 4rem; }
	#detail-contents .flow .flow_list .time { width: 9rem; margin-right: 3rem; }
	#detail-contents .flow .flow_list .tw { width: calc(100% - 9rem - 3rem); }
}

/* detail-other_interview ----------*/
#detail-other_interview { padding-top: 10rem; width: 100%; overflow: hidden; }
#detail-other_interview h2 { display: flex; margin-bottom: 3rem; }
#detail-other_interview h2 span { color: #FFF; font-size: 3rem; }
#detail-other_interview h2 a { margin-left: auto; }
#detail-other_interview .interview_list li { margin: 0 2.5rem; }
@media screen and (max-width:896px) { /* iPhone 横 m */
	#detail-other_interview .interview_list li { margin: 0 1rem; }
}