@charset "utf-8";

/*--------------------------------------------------

	MAIN VISUAL │ メインビジュアル

--------------------------------------------------*/
#mv {position: relative;z-index: 3;margin-bottom: 20px;padding-top: 50%;}
#mv .image-crossfader {position: absolute;top: 0;right: 0;z-index: -1;width: 82%;height: 100%;overflow: hidden;}
#mv .image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transform: scale(1.2);
	transition:
	opacity 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
	transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	background: url(../recruit/img/front/mv/img_main.webp) no-repeat center / cover;
}
#mv .image-crossfader-inner.is-visible {z-index: 1;opacity: 1;transform: scale(1.02);}
#mv .title_wrap {position: absolute;top: 50%;left: 10%;transform: translateY(-50%);z-index: 3;}
#mv .title_wrap h1 {margin-bottom: 10%;color: #0A4480;font-weight: 700;font-size: 4vw;line-height: 1.4;}
#mv .title_wrap p {color: #0A4480;font-weight: 500;font-size: 1.5vw;}
#mv a {
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg) translateY(-50%);
	color: #fff;
	font-weight: 700;
	font-size: 1vw;
}
#mv a::before {
	content: '';
	position: absolute;
	bottom: 50%;
	left: 108%;
	width: 5vw;
	height: 1vw;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: skew(55deg);
}
@media only screen and (max-width: 767px) {
	#mv {padding-top: 100%;}
	#mv .title_wrap {top: 60%;left: 4%;}
	#mv .title_wrap h1 {font-size: 9vw;}
	#mv .title_wrap p {font-size: 3.2vw;}
	#mv a {top: 78%;font-size: 2vw;}
	#mv a::before {width: 7vw;height: 1.2vw;}
}
/*--------------------------------------------------

	Message │ メッセージ

--------------------------------------------------*/
#message {position: relative;overflow: hidden;}
#message::before {
	content: 'Message';
	position: absolute;
	top: 5%;
	left: 0;
	width: 100%;
	color: #F7FBFF;
	font-weight: 700;
	font-size: clamp(60px, calc(60px + 60 * ((100vw - 375px) / 1545)), 120px);
	letter-spacing: .05em;
}
#message::after {content: '';position: absolute;bottom: 0;right: 0;z-index: -1;width: 85%;height: 75%;background: #F8F9FA;}
#message .title_common p {color: #333;text-align: left;}
#message .title_common h2 {text-align: left;}
#message .title_common .bottomBorder::before {left: 2%;transform: none;}
#message .container figure {width: 35%;margin: 0 calc(50% - 50vw);}
#message .container .wrap {width: 60%;}
#message .container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 700;
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
}
#message .container .wrap .content p {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#message .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#message .container figure {width: 100vw;margin-bottom: 30px;}
	#message .container .wrap {width: 100%;}
	#message .container .wrap h3 {font-size: 2.4rem;}
}
/*--------------------------------------------------

	Features │ エスアイエス３つの特長

--------------------------------------------------*/
#features .title_common {margin-bottom: 17%;}
#features ul li {margin-bottom: clamp(50px, calc(50px + 250 * ((100vw - 375px) / 1545)), 300px);}
#features ul li:nth-child(even) {flex-direction: row-reverse;}
#features ul li:last-child {margin-bottom: 0;}
#features ul li figure {position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 50%;}
#features ul li:nth-child(odd) figure {right: 0;left: inherit;}
#features ul li .wrap {width: 45%;}
#features ul li .wrap h3 {
	position: relative;
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 700;
	font-size: clamp(20px, calc(20px + 12 * ((100vw - 375px) / 1545)), 32px);
}
#features ul li .wrap h3 span {
	position: absolute;
	top: 50%;
	left: -5%;
	transform: translateY(-50%);
	z-index: -1;
	color: #E8F4FF;
	font-size: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);
	letter-spacing: .05em;
}
@media only screen and ( max-width : 1024px ) {
	#features .title_common {margin-bottom: 100px;}
	#features ul li figure {position: initial;transform: none;width: 100%; margin-bottom: 30px;}
	#features ul li .wrap {width: 100%;}
	#features ul li .wrap h3 {padding-left: 10px;}
	#features ul li .wrap h3 span {left: -2%;}
}
/*--------------------------------------------------

	Personality │ 求める人物像

--------------------------------------------------*/
#personalit .inner {max-width: 1200px;}
#personality p.pr {margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px);text-align: center;}
#personality ol li.item:not(:last-child) {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#personality ol li.item dl {display: flex;}
#personality ol li.item dl dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);
	border: 1px solid #3175BB;
	background: #3175BB;
	color: #fff;
	font-size: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 1545)), 60px);
}
#personality ol li.item dl dd {
	flex: 1;
	padding: clamp(15px, calc(15px + 20 * ((100vw - 375px) / 1545)), 35px);
	border: 1px solid #333;
}
#personality ol li.item dl dd h3 {
	margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-bottom: clamp(5px, calc(5px + 10 * ((100vw - 375px) / 1545)), 15px);
	border-bottom: 1px solid #333;
	font-weight: 700;
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	letter-spacing: .05em;
}
#personality ol li.item dl dd ul li {position: relative;padding-left: 20px;}
#personality ol li.item dl dd ul li::before {content: '・';position: absolute;left: 0;}
/*--------------------------------------------------

	Interview │ 社員インタビュー

--------------------------------------------------*/
#interview {position: relative;overflow: hidden;}
#interview::after {
	content: 'Interview';
	position: absolute;
	top: 70%;
	right: -2%;
	z-index: -1;
	transform: translateY(-50%);
	height: 100%;
	color: #F7FBFF;
	font-weight: 700;
	font-size: clamp(60px, calc(60px + 60 * ((100vw - 375px) / 1545)), 120px);
	letter-spacing: .05em;
	writing-mode: vertical-rl;
}
#interview ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#interview ul li {position: relative;}
#interview ul li figure {margin-bottom: 15px;overflow: hidden;}
#interview ul li figure img {transition: .3s;}
#interview ul li:hover figure img {transform: scale(1.1);}
#interview ul li .wrap h3 {margin-bottom: 10px;font-weight: 700;font-size: 2rem;}
#interview ul li .wrap dl dt {margin-bottom: 10px;font-size: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);line-height: 1;}
#interview ul li .wrap dl dd {font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);}
@media only screen and ( max-width : 1024px ) {
	#interview ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#interview ul {grid-template-columns: 1fr;}
	#interview ul li {display: flex;align-items: center;gap: 3vw;}
	#interview ul li figure {width: 35%;margin-bottom: 0;}
	#interview ul li .wrap {flex: 1;}
	#interview ul li .wrap h3 {font-size: 4.1vw;}
	#interview ul li .wrap dl dd {font-size: 1.2rem;}
}
/*--------------------------------------------------

	Job description │ 募集職種一覧

--------------------------------------------------*/
#job_description ul li {position: relative;max-width: 500px;margin: 0 auto;border: 1px solid #333;background: #fff;}
#job_description ul li figure {border-bottom: 1px solid #333;overflow: hidden;}
#job_description ul li figure img {transition: .5s;}
#job_description ul li:hover figure img {transform: scale(1.1);}
#job_description ul li .wrap {padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#job_description ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 700;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
}
#job_description ul li .wrap dl dt {position: relative;padding-left: 20px;}
#job_description ul li .wrap dl dt::before {content: 'ー';position: absolute;left: 0;}
#job_description ul li .wrap dl dt span {background: #fff;}
#job_description ul li .wrap dl dd {position: relative;padding-right: 40px;}
#job_description ul li .wrap dl dd span {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	border-radius: 9999px;
	background: #333;
	transition: .3s;
}
#job_description ul li:hover .wrap dl dd span {right: -5%;}
#job_description ul li .wrap dl dd span::before,
#job_description ul li .wrap dl dd span::after {
	content: '';
	position: absolute;
	top: calc(50% - 0.5px);
	right: 0;
	width: 12px;
	height: 1px;
	border-radius: 9999px;
	background: #333;
	transform-origin: calc(100% - 0.5px) 50%;
}
#job_description ul li .wrap dl dd span::before {transform: rotate(45deg);}
#job_description ul li .wrap dl dd span::after {transform: rotate(-45deg);}
#job_description .view {text-align: center;}
#job_description .view a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding: 15px 20px 15px 40px;
	border: 1px solid #fff;
	border-radius: 50px;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	transition: .3s;
}
#job_description .view a:hover {border-color:#333;}
#job_description .view a .arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid #3175BB;
	border-radius: 50%;
	background: #3175BB;
	transition: .3s;
}
#job_description .view a:hover .arrow {border-color: #333;background: #fff;}
#job_description .view a .arrow span {position: relative;width: 20px;height: 2px;margin: 7.1px 0;border-radius: 9999px;background: #fff;transition: .3s;}
#job_description .view a:hover .arrow span {background: #333;}
#job_description .view a .arrow span::before,
#job_description .view a .arrow span::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	right: 0;
	width: 12px;
	height: 2px;
	border-radius: 9999px;
	background: #fff;
	transform-origin: calc(100% - 1px) 50%;
	transition: .3s;
}
#job_description .view a .arrow span::before {transform: rotate(45deg);}
#job_description .view a .arrow span::after {transform: rotate(-45deg);}
#job_description .view a:hover .arrow span::before,
#job_description .view a:hover .arrow span::after {background: #333;}
@media only screen and ( max-width : 767px ) {
	#job_description ul {grid-template-columns: 1fr;}
}