@charset "UTF-8";



/* ------------------------------
	.head_ttl_box
------------------------------ */
.head_ttl_box{
	background: url(../img/recruit/interview/head_ttl_img2.jpg) no-repeat center bottom;
	background-size: cover;
}


@media screen and (max-width: 768px) {
	.head_ttl_box{
		background: url(../img/recruit/interview/head_ttl_img2_sp.jpg) no-repeat center center;
		background-size: cover;
	}
}



/* ------------------------------
	.interview
------------------------------ */
.interview{
	position: relative;
	padding: 100px 0;
}

.interview_lead{
	position: relative;
	padding: 115px 0 65px;
	min-height: 500px;
	overflow: hidden;
}

.interview .inview{
	opacity: 0;
	transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.2s;
}
.interview .inview.inviewed-active{
	opacity: 1;
}

.interview_lead.inview{
	opacity: 1;
}
.interview_lead.inview .img,
.interview_lead.inview .wrap{
	opacity: 0;
	transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.2s;
}
.interview_lead.inview.inviewed-active .img,
.interview_lead.inview.inviewed-active .wrap{
	opacity: 1;
}

.interview_lead .img{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: calc(50% + 260px);
	height: 100%;
}
@media screen and (min-width: 769px) {
	.interview_lead .img img{
		width: 100%;
		min-height: 100%;
		height: auto;
		object-fit: cover;
	}
	.ie .interview_lead .img img{
		min-height: 0;
	}
}

.interview_lead .wrap{
	position: relative;
	z-index: 2;
}

.interview_lead .lead_ttl{
	margin-bottom: 50px;
	font-size: 8.5rem;
	line-height: 1;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.interview_lead .lead_ttl .min{
	display: block;
	margin-top: 20px;
	font-size: 2.1rem;
	font-weight: normal;
	letter-spacing: 0;
}

.interview_lead .ttl{
	margin-bottom: 40px;
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.3;
	word-break: break-all;
	text-shadow: 0 0 5px rgba(255,255,255, 0.02);
}
.interview_lead .ttl .num{
	margin-right: 25px;
	font-size: 8.0rem;
}

.interview_lead .txt{
	font-size: 2.1rem;
	line-height: 1.6;
}

.interview_lead .name{
	margin-top: 5px;
	font-size: 3.0rem;
	font-weight: bold;
}

.interview .wide_img{
	padding: 100px 0;
	background: #fff;
}
.interview .wide_img,
.interview .wide_img img{
	width: 100%;
}


@media screen and (max-width: 768px){
	.interview{
		padding: 50px 0 0;
	}

	.interview_lead{
		min-height: 0;
		padding: 0;
	}

	.interview_lead_wrap{
		background: #f5f5f5;
	}

	.interview_lead .lead_ttl{
		margin: 0;
		padding-bottom: 20px;
		text-align: center;
		font-size: 3.7rem;
		letter-spacing: 0;
		background: #fff;
	}
	.interview_lead .lead_ttl .min{
		margin-top: 13px;
		font-size: 1.6rem;
	}

	.interview_lead .ttl{
		margin-bottom: 5px;
		font-size: 2.0rem;
	}
	.interview_lead .ttl .num{
		margin-right: 10px;
		font-size: 5.0rem;
	}

	.interview_lead .txt{
		font-size: 1.4rem;
	}
	.interview_lead .name{
		margin-top: 0;
		font-size: 1.8rem;
	}

	.interview_lead .img{
		position: relative;
		width: 100%;
	}

	.interview .wide_img{
		padding: 0;
	}
}



/* ------------------------------
	.message
------------------------------ */
.message{
	position: relative;
	margin: 100px 0;
}
.message::before{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 100px;
	content: "";
	display: block;
	width: calc(50% + 588px);
	height: 100%;
	background: #f5f5f5;
}

.message .wrap{
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}

.message .img{
	width: 460px;
}

.message .txt_box{
	width: 610px;
	padding-top: 40px;
	padding-right: 60px;
}

.message .txt_box .ttl{
	margin-bottom: 60px;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 2;
	word-break: break-all;
}

.message .txt_box .txt{
	word-break: break-all;
}


@media screen and (max-width: 768px){
	.message{
		padding: 30px 0 50px;
		margin: 0 auto;
		background: #f5f5f5;
	}

	.message::before{
		display: none;
	}

	.message .wrap{
		flex-direction: column;
	}

	.message .img{
		width: 100%;
		margin-bottom: 10px;
	}

	.message .txt_box{
		width: 100%;
		padding: 0;
	}

	.message .txt_box .ttl{
		margin-bottom: 20px;
		font-size: 2.0rem;
		line-height: 1.8;
	}
}



/* ------------------------------
	.question
------------------------------ */
.question{
	position: relative;
	margin: 100px 0;
}
.question::before{
	position: absolute;
	z-index: 1;
	right: 0;
	top: 100px;
	content: "";
	display: block;
	width: calc(50% + 625px);
	height: calc(100% - 100px);
	max-height: 850px;
	background: #f5f5f5;
}

.question .wrap{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.question .txt_box{
	width: 670px;
	padding: 10px 60px 60px;
}

.question .txt_box .ttl{
	margin-bottom: 70px;
	font-size: 3.0rem;
	line-height: 2;
	font-weight: bold;
}

.question .img_box{
	width: 460px;
}

.question .img_box .img + .img{
	margin-top: 70px;
}

.question_box{
	width: 100%;
	padding-bottom: 50px;
	border-bottom: 1px solid rgba(37,58,98, 0.3);
}

.question_box + .question_box{
	margin-top: 50px;
}

.question_box .question_ttl{
	position: relative;
	padding-left: 100px;
	font-size: 2.1rem;
	line-height: 2;
	word-break: break-all;
}

.question_box .txt{
	position: relative;
	padding-left: 100px;
	margin-top: 25px;
	word-break: break-all;
}

.question_box .question_ttl::before,
.question_box .txt::before{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	font-weight: bold;
	font-size: 3.0rem;
	line-height: 1;
}
.question_box .question_ttl::before{
	content: "Q.";
}
.question_box .txt::before{
	content: "A.";
}


@media screen and (max-width: 768px){
	.question{
		padding: 30px 0;
		margin: 0 auto;
		background: #f5f5f5;
	}

	.question .wrap{
		flex-direction: column;
	}

	.question .wrap > .img{
		margin-bottom: 20px;
	}

	.question .txt_box .ttl{
		margin-bottom: 30px;
		font-size: 2.0rem;
		line-height: 1.8;
	}

	.question .txt_box{
		width: 100%;
		padding: 0;
	}

	.question .img{
		width: 100%;
	}
	.question .img_box{
		width: 100%;
	}

	.question_box{
		padding-bottom: 25px;
	}
	.question_box + .question_box{
		margin-top: 25px;
	}

	.question_box .question_ttl{
		padding-left: 35px;
		font-size: 1.8rem;
		line-height: 1.8;
	}

	.question_box .txt{
		padding-left: 35px;
		margin-top: 20px;
	}

	.question_box .question_ttl::before{
		top: 5px;
	}
	.question_box .question_ttl::before,
	.question_box .txt::before{
		font-size: 2.2rem;
	}

	.question .img_box .img,
	.question .img_box .img + .img{
		margin-top: 25px;
	}
}



/* ------------------------------
	.schedule
------------------------------ */
.schedule{
	position: relative;
	margin: 70px 0 100px;
}

.schedule .str_ttl{
	margin-bottom: 65px;
}

.schedule_list{
	padding-left: 40px;
}

.schedule_list li + li{
	margin-top: 65px;
}

.schedule_list .time{
	padding: 5px 0 5px 85px;
	margin-bottom: 13px;
	background: url(../img/recruit/interview/schedule_ico01.png) no-repeat center left;
	background-size: 50px;
	font-size: 3.6rem;
	font-weight: bold;
	word-break: break-all;
	line-height: 1.3;
}

.schedule_list .txt_box{
	position: relative;
	padding: 30px 40px;
	margin-left: 85px;
	background: #f5f5f5;
}

.schedule_list li:not(:last-child) .txt_box::before{
	position: absolute;
	top: 0;
	left: -60px;
	content: "";
	display: block;
	width: 0;
	height: calc(100% + 40px);
	border-left: 2px solid #253a62;
}
.schedule_list li:not(:last-child) .txt_box::after{
	position: absolute;
	bottom: -50px;
	left: -69px;
	content: "";
	display: block;
	border-top: 15px solid #253a62;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}

.schedule_list .txt_box > * + *{
	margin-top: 10px;
}

.schedule_list .txt_box .ttl{
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: bold;
	word-break: break-all;
}

.schedule_list .txt_box .txt{
	word-break: break-all;
}


@media screen and (max-width: 768px){
	.schedule{
		margin: 50px auto;
	}

	.schedule .str_ttl{
		margin-bottom: 40px;
	}

	.schedule_list{
		padding-left: 0;
	}

	.schedule_list li + li{
		margin-top: 25px;
	}

	.schedule_list .time{
		padding-left: 60px;
		margin-bottom: 15px;
		background-size: 40px;
		font-size: 2.6rem;
	}

	.schedule_list .txt_box{
		margin-left: 45px;
		padding: 15px 20px;
	}

	.schedule_list li:not(:last-child) .txt_box::before{
		left: -26px;
		height: calc(100% + 5px);
	}

	.schedule_list li:not(:last-child) .txt_box::after{
		bottom: -10px;
		left: -33px;
		border-top: 13px solid #253a62;
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
	}

	.schedule_list .txt_box .ttl{
		font-size: 1.8rem;
	}
}



/* ------------------------------
	.interview_wrap
------------------------------ */
.interview_wrap{
	padding: 100px 0;
}

.interview_wrap .str_ttl{
	margin-bottom: 60px;
}

.interview_list{
	display: flex;
	justify-content: center;
}

.interview_list .interview_box{
	width: 32%;
}

@media screen and (min-width: 769px) {
	.interview_list .interview_box:nth-child(2){
		transition-delay: 0.3s;
	}
	.interview_list .interview_box:nth-child(3){
		transition-delay: 0.6s;
	}
}

.interview_list .interview_box + .interview_box{
	margin-left: 2%;
}

.interview_list .interview_box a{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 67%;
}

@media screen and (min-width: 769px){
	.interview_list .interview_box a .txt_box *{
		-webkit-transition: all .4s ease;
		transition: all .4s ease;
	}
	.interview_list .interview_box a:hover{
		opacity: 1;
	}

	.interview_list .interview_box a:hover .txt_wrap{
		background: #253a62;
	}
	.interview_list .interview_box a:hover .txt_wrap *{
		color: #fff;
	}

	.interview_list .interview_box a:hover .txt_wrap::before,
	.interview_list .interview_box a:hover .txt_wrap::after{
		border-color: #fff;
	}
}

.interview_list .interview_box .txt_wrap{
	position: relative;
	z-index: 2;
	width: 240px;
	min-height: 180px;
	padding: 25px;
	margin: 0 auto;
	background: #fff;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.interview_list .interview_box .img{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: 100%;
	padding-top: 80%;
	overflow: hidden;
}
.interview_list .interview_box .img img{
	position: absolute;
	height: auto;
	top: 50%;
	left: 50%;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	overflow: hidden;
}

.interview_list .interview_box .txt_wrap .num{
	font-size: 4.8rem;
	margin-right: 20px;
}
.interview_list .interview_box .txt_wrap .txt{
	font-size: 1.8rem;
	line-height: 1.6;
}
.interview_list .interview_box .txt_wrap .txt.min,
.interview_list .interview_box .txt_wrap .txt .min{
	font-size: 1.2rem;
}

.interview_list .interview_box .txt_wrap .txt + .txt{
	margin-top: 2px;
}

.interview_list .interview_box .txt_box{
	display: flex;
}

.interview_list .interview_box .btn{
	margin: 15px auto 0;
}
.interview_list .interview_box .btn_nolink{
	width: 170px;
	font-size: 1.4rem;
}

.interview_wrap .round_btn{
	margin-top: 100px;
}


@media screen and (max-width: 768px){
	.interview_wrap{
		padding: 50px 0;
	}

	.interview_wrap .str_ttl{
		margin-bottom: 30px;
	}

	.recruit .btn{
		margin-top: 25px;
	}

	.interview_list{
		flex-direction: column;
		width: 100%;
	}

	.interview_list .interview_box{
		width: 100%;
	}
	.interview_list .interview_box + .interview_box{
		margin-left: 0;
		margin-top: 20px;
	}

	.interview_list .interview_box a{
		padding-top: 64%;
	}

	.interview_list .interview_box .txt_wrap{
		width: 210px;
		height: auto;
		min-height: 150px;
		padding: 20px;
	}

	.interview_list .interview_box .txt_wrap .num{
		font-size: 3.8rem;
	}

	.interview_list .interview_box .txt_wrap .txt{
		font-size: 1.5rem;
	}

	.interview_list .interview_box .btn_nolink{
		width: 130px;
		font-size: 1.2rem;
	}

	.interview_wrap .round_btn{
		margin-top: 50px;
	}
}



/* ------------------------------
	.btn_wrap
------------------------------ */
.btn_wrap{
	display: flex;
	justify-content: center;
	padding: 100px 0;
}

.btn_wrap .round_btn + .round_btn{
	margin-left: 45px;
}


@media screen and (max-width: 768px) {
	.btn_wrap{
		flex-direction: column;
		align-items: center;
		padding: 0 0 50px;
		background: #f5f5f5;
	}

	.btn_wrap .round_btn + .round_btn{
		margin-left: 0;
		margin-top: 15px;
	}
}