@charset "utf-8";

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

/* rc_pmv ----------*/
#rc_pmv { background-image: url(/image/hsl/about/recruit_new/interview/mv.jpg); }

/* rc_interview ----------*/
#rc_interview {}
#rc_interview .list { display: flex; flex-wrap: wrap; margin-bottom: 40px; }
#rc_interview .list a { position: relative; width: calc((99.9% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; }
#rc_interview .list a:nth-child(3n) { margin-right: 0; }
#rc_interview .list a:before { position: absolute; bottom: 0; left: 0; content: ""; width: calc(100% - 20px); height: 25%; background-color: #CC0022; }
#rc_interview .list a { display: block; text-decoration: none; }
#rc_interview .list a span { display: block; }
#rc_interview .list a .pw { position: relative; z-index: 1; }
#rc_interview .list a .pw img { width: 100%; }
#rc_interview .list a .tw { position: relative; z-index: 2; margin-top: -30px; margin-right: 20px; padding: 20px; background-color: #CC0022; box-sizing: border-box; }
#rc_interview .list a .h { margin-bottom: 20px; padding: 0 20px 10px 0; border-bottom: solid 4px #FFF; color: #FFF; font-size: 16px; font-weight: bold; box-sizing: border-box; }
#rc_interview .list a .h { background-image: url(/image/hsl/about/recruit_new/common/icon_bt_next.svg); background-position: right center; background-repeat: no-repeat; }
#rc_interview .list a .t { color: #FFF; font-size: 14px; }
@media screen and (max-width:800px) {
	#rc_interview .list a { width: calc((99.9% - 20px) / 2); margin-right: 20px !important; }
	#rc_interview .list a:nth-child(2n) { margin-right: 0 !important; }
}
@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_interview .list a { width: 100%; margin-right: 0 !important; }
}

/* rc_interview_page ----------*/
#rc_interview_page { background-image: url(/image/hsl/about/recruit_new/interview/bg_1.jpg), url(/image/hsl/about/recruit_new/interview/bg_2.jpg); background-repeat: no-repeat; background-size: contain; background-position: center top, center bottom 3%; }
#rc_interview_page_header { position: relative; }
#rc_interview_page_header .pw { width: 55%; }
#rc_interview_page_header .pw img { width: 100%; }
#rc_interview_page_header .tw { position: absolute; top: 100px; right: 0; width: 50%; padding: 50px 25px; color: #FFF; background-color: #CC0022; }
#rc_interview_page_header .tw h2 { line-height: 1.4; font-size: 24px; }
#rc_interview_page_header .tw p { font-size: 16px; font-weight: bold; }
#rc_interview_page_header .tw p strong { color: #FFF; font-size: 18px; }
#rc_interview_page_contents {}
#rc_interview_page_contents .nbox { position: relative; padding-left: 100px; }
#rc_interview_page_contents .nbox:before { position: absolute; left: 0; padding: 50px 15px; border: solid 1px #CC0022; color: #CC0022; font-size: 50px; font-weight: bold; }
#rc_interview_page_contents .nbox:nth-child(1):before { content: "1"; }
#rc_interview_page_contents .nbox:nth-child(2):before { content: "2"; }
#rc_interview_page_contents .nbox:nth-child(3):before { content: "3"; }
#rc_interview_page_contents .nbox .pw { width: 45%; overflow: hidden; margin-left: 30px; float: right; }
#rc_interview_page_contents .nbox .pw img { width: 100%; }
#rc_interview_page_contents .nbox .tw { overflow: hidden; }
#rc_interview_private { position: relative; }
#rc_interview_private .pw { position: absolute; top: 0; right: 0; width: 45%; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); -webkit-transform-origin: right top; transform-origin: right top; }
#rc_interview_private .pw img { width: 100%; }
#rc_interview_private .tw { width: 66%; padding: 50px 120px 50px 50px; background-color: #F2F2F2; font-weight: bold; box-sizing: border-box; }
#rc_interview_page .btw { padding-top: 60px; text-align: center; }
@media screen and (max-width:900px) {
	#rc_interview_page_header .pw { width: 100%; }
	#rc_interview_page_header .tw { position: inherit; top: 0; width: 100%; padding: 25px; box-sizing: border-box; }
}
@media screen and (max-width:600px) {
	#rc_interview_page_contents .nbox .pw { width: 100%; margin-left: 0; float: none; margin-bottom: 20px; }
	#rc_interview_private .pw { position: inherit; width: 100%; -webkit-transform: rotate(0); transform: rotate(0); }
	#rc_interview_private .tw { width: 100%; padding: 25px; }
}
@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_interview_page_contents .nbox { padding-left: 0; }
	#rc_interview_page_contents .nbox:before { position: inherit; display: block; width: 100%; margin-bottom: 20px; padding: 15px; text-align: center; font-size: 30px; box-sizing: border-box; }

}