@charset "utf-8";
/*---------- 共通 ---------*/
#lower_layer h3{font-family: 'Noto-Sans-JP-Medium'; font-size: 22px; line-height: 150%;}
#lower_layer h3 span{font-size: 69px; line-height: 103%; display: inline-block; letter-spacing: 0.05em; padding: 0 0 9px;}


#lower_layer h4{font-size: 22px; line-height: 144%; color: #fff;font-family: 'Noto-Sans-JP-Medium'; text-align: center;}
#lower_layer h4 span{font-size: 39px;font-family: 'Noto-Sans-JP-Bold'; display: inline-block; padding: 0 0 14px;}

/* ------------------------------------------------------------ #reasons ------------------------------------------------------------ */
#fv{ overflow: hidden;position: relative;}
#fv .video_box{position:absolute; top: 0px; width: 100%; height: auto; padding: 939px 0 0;}
#fv .video_box video{width: 100%; height: 100%; object-fit: cover;position:absolute; top: 0px; }
#fv .fv_box{ padding: 199px 0 187px;}
#fv .fv_box .img_1{ position: absolute; top: -85px; right: -85px;}

#fv .fv_box .fv_tt{max-width: 1356px; padding: 0 50px; margin: 0 auto; position: relative;}
#fv .fv_box .fv_tt .fv_tt_2{position: relative; z-index: 10;}
#fv .fv_box .fv_tt h2{font-size: 22px;}
#fv .fv_box .fv_tt h2 span{font-family: "din-1451-lt-pro-engschrift", sans-serif; font-weight: 400; font-style: normal; font-size: 216px; line-height: 90%; display: inline-block; padding: 25px 0 0;}
#fv .fv_box .fv_tt p{font-size: 23px;font-family: 'Noto-Sans-JP-Medium'; line-height: 148%;}
#fv .fv_box .fv_tt p span{font-size: 49px;font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; display: inline-block; padding: 0 0 10px}


/* ------------------------------------------------------------ #philosophy ------------------------------------------------------------ */
#philosophy{padding: 153px 0 0;}
#philosophy .philosophy_inner{ width: 1200px; padding: 0 50px; margin-right: auto; margin-left: auto;}
#philosophy h3{text-align: right;}
#philosophy .box_list .box_1{padding: 0 20px 0 0;}
#philosophy .box_list .box_2{padding: 149px 20px 0 0;}
#philosophy .box_list .box_3{padding: 282px 0 0;}
#philosophy .box_list .box .text_box{padding: 14px 0 0;}
#philosophy .box_list .box .text_box p{padding: 15px 0 0; line-height: 150%;}

/* ------------------------------------------------------------ #recruitment ------------------------------------------------------------ */
#recruitment{padding: 95px 0 71px;}
#recruitment h3{text-align: center;}
#recruitment .recruitment_list{ -webkit-animation-name: fadeInUp_2; animation-name: fadeInUp_2; }
@-webkit-keyframes fadeInUp_2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp_2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

#recruitment .recruitment_btn{padding: 61px 0 0;}
#recruitment .recruitment_btn h4{font-size: 26px; text-align: center; border: 1px solid #fff; border-radius: 20px 20px 0 0; padding: 15px 0 14px; width: 397px; background: #000;}
#recruitment .recruitment_btn h4.active{background: linear-gradient(90deg, #346BED, #79ADD9, #B22DB2);}
#recruitment .recruitment_btn h4:not(:last-child){margin: 0 5px 0 0;}
#recruitment .recruitment_box{background: #222222; padding: 67px 80px 53px;}
#recruitment .recruitment_box .box{border: 2px solid #fff;}
#recruitment .recruitment_box .box{display: none;}
#recruitment .recruitment_box .box.active{display: block;}
#recruitment .recruitment_box .box table{width: 100%; height: auto;}
#recruitment .recruitment_box .box table th{font-size: 22px;font-family: 'Noto-Sans-JP-Medium'; line-height: 146%; padding: 26px 0 23px; width: 295px; border-right: 2px solid #fff;}
#recruitment .recruitment_box .box table td{font-size: 22px;font-family: 'Noto-Sans-JP-Medium'; line-height: 146%; padding: 26px 0 23px 44px;}
#recruitment .recruitment_box .box table tr:not(:last-child) th,
#recruitment .recruitment_box .box table tr:not(:last-child) td{border-bottom: 2px solid #fff;}
#recruitment p.tt_title{font-size: 32px; line-height: 219%; color: #fff;font-family: 'Noto-Sans-JP-Bold'; text-align: center; padding: 70px 0 0;}


/* ------------------------------------------------------------ #recruitment ------------------------------------------------------------ */
#contact .cta_link { padding: 0 144px 0 0;}

@media only screen and (max-width:768px) {
	
	/*---------- 共通 ---------*/
	#lower_layer h3{font-size: 12px; text-align: left; }
	#lower_layer h3 span{font-size: 35px; padding: 0 0 9px;}
	
	
	#lower_layer h4{font-size: 16px; font-family: 'Noto-Sans-JP-Regular';}
	#lower_layer h4 span{font-size:26px; padding: 0 0 6px;font-family: 'Noto-Sans-JP-Medium';}
	
	/* ------------------------------------------------------------ #reasons ------------------------------------------------------------ */
	#fv{ }
	#fv .fv_box{ padding: 80px 0 70px;}
	#fv .fv_box .img_1{ top: 38%; right: -2%; width: 81%; height: auto;}
	#fv .video_box{padding: 429px 0 0;}
	
	#fv .fv_box .fv_tt{padding: 0%; margin: 0 auto; width: 95%;}
	#fv .fv_box .fv_tt h2{font-size: 16px;}
	#fv .fv_box .fv_tt h2 span{ font-size: 78px; line-height: 90%; padding: 25px 0 0;}
	#fv .fv_box .fv_tt p{font-size: 12px;}
	#fv .fv_box .fv_tt p span{font-size: 18px;padding: 0 0 10px}
	
	
	/* ------------------------------------------------------------ #philosophy ------------------------------------------------------------ */
	#philosophy{padding: 32px 0 0;}
	#philosophy .philosophy_inner{ width: 100%; padding: 0;}
	#philosophy h3{text-align: center;}
	#philosophy .box_list{padding: 30px 0 0;}
	#philosophy .box_list .box .text_box{padding: 14px 0 0; width: 209px; height: auto; }
	#philosophy .box_list .box_1{padding: 13px 5% 41px 0; background: url(../images/recruit/philosophy_img_1_sp.jpg) no-repeat center center; background-size: cover;}
	#philosophy .box_list .box_1 .text_box{margin: 0 0 0 auto;}
	#philosophy .box_list .box_2{padding: 27px 0 27px 5%; background: url(../images/recruit/philosophy_img_2_sp.jpg) no-repeat center center; background-size: cover;}
	#philosophy .box_list .box_2 .text_box{margin: 0 auto 0 0;}
	#philosophy .box_list .box_3{padding: 13px 5% 13px 0; background: url(../images/recruit/philosophy_img_3_sp.jpg) no-repeat center center; background-size: cover;}
	#philosophy .box_list .box_3 .text_box{margin: 0 0 0 auto;}
	#philosophy .box_list .box .text_box p{padding: 12px 0 0; line-height: 200%; letter-spacing: 0.04em;}
	
	/* ------------------------------------------------------------ #recruitment ------------------------------------------------------------ */
	#recruitment{padding: 50px 0 0px;}
	#recruitment h3{text-align: center;font-size: 16px;}
	#recruitment h3 span{font-size: 28px;}
	#recruitment .recruitment_list{ -webkit-animation-name: fadeInUp_2; animation-name: fadeInUp_2; }
	@-webkit-keyframes fadeInUp_2 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInUp_2 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	
	#recruitment .recruitment_btn{padding: 36px 0 16px; flex-direction: row; justify-content: space-between;}
	#recruitment .recruitment_btn h4{font-size: 13px; border-radius: 0px; border:none; padding: 0 0 10px; width: auto; }
	#recruitment .recruitment_btn h4.active{  background: linear-gradient(90deg, #346BED, #79ADD9, #B22DB2); background-repeat: no-repeat; background-size: 100% 15%; background-position: 0 100%; }
	#recruitment .recruitment_btn h4:not(:last-child){margin: 0 5px 0 0;}
	#recruitment .recruitment_box .box {border: none;}
	#recruitment .recruitment_box{ padding: 30px 5%;}
	#recruitment .recruitment_box .box table tr:first-child th{border-top: 1px solid #fff;}
	#recruitment .recruitment_box .box table th{font-size: 14px;padding: 20px 0 0; width: 100%; display: block; text-align: left; line-height: 200%; border-right: none;border-bottom: none;font-family: 'Noto-Sans-JP-Regular';}
	#recruitment .recruitment_box .box table td{font-size: 14px;padding: 5px 0 20px 0; display: block; text-align: left; line-height: 200%;border-bottom: 1px solid #fff;font-family: 'Noto-Sans-JP-Regular';}
	#recruitment .recruitment_box .box table tr:not(:last-child) th{border-bottom: none; }
	#recruitment .recruitment_box .box table tr:not(:last-child) td{border-bottom: 1px solid #fff;}
	#recruitment p.tt_title{font-size: 16px; padding:62px 0 0; text-align: left;font-family: 'Noto-Sans-JP-Medium'; line-height: 150%;}
	
	
	/* ------------------------------------------------------------ #recruitment ------------------------------------------------------------ */
	#contact .cta_link { padding: 0 144px 0 0;}
}