@charset "utf-8";
/*--------------------------------------------------

	MAIN VISUAL │ メインビジュアル
	
--------------------------------------------------*/
#mv {padding-top: 43%;}
#mv::before {
	content: '';
	opacity: .6;
	position: absolute;
	top: 39.3%;
	right: 0;
	width: 24%;
	height: 200%;
	background: linear-gradient(-45deg, #C5F3FE 30%, #FCFFD1, #B6EFEB, #C3F2FF);
}
#mv .image-crossfader {position: absolute;top: 0;left: 0;z-index: -1;width: 100%;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(../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 .wrap {position: absolute;top: 16%;right: 10%;}
#mv .wrap p {display: flex;align-items: center;margin-bottom: 2%;color: #2f3031;font-size: 2.4vw;}
#mv .wrap p span.txt1 {padding: .2em .3em;background: #53BEFF;color: #fff;font-size: 1.3em;}
#mv .wrap p span.txt2 {padding: .3em 10vw .2em .3em;background: rgba(255, 255, 255, .3);}
#mv .wrap h1 {display: flex;align-items: center;padding-left: 5vw;color: #2f3031;font-size: 2.7vw;}
#mv .wrap h1 span.txt1 {padding: .2em.3em;background: #00D5D5;color: #fff;font-size: 1.3em;}
#mv .wrap h1 span.txt2 {padding: .3em 3vw .2em .3em;background: rgba(255, 255, 255, .3);}
@media only screen and ( max-width : 767px ) {
	#mv {padding-top: 100%;}
	#mv::before {top: 35.45%;width: 30%;}
	#mv::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent, #fff 80%);
	}
	#mv .wrap {top: 17%;right: 0;}
	#mv .wrap p {font-size: 4.5vw;}
	#mv .wrap h1 {font-size: 4.8vw;}
}
@media only screen and ( max-width : 500px ) {
	#mv .wrap {top: 22%;}
	#mv::before {top: 40.4%;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {padding: clamp(70px, calc(70px + 60 * ((100vw - 375px) / 1545)), 130px) 0 clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#message .container {flex-direction: row-reverse;align-items: center;}
#message .container figure {width: 35%;}
#message .container .wrap {width: 50%;}
#message .container .wrap p {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	color: #00ABDE;
	font-weight: 500;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
}
#message .container .wrap p:last-child {margin-bottom: 0;}
@media only screen and (max-width: 767px){
	#message .container figure {width: 100%;margin-bottom: 30px;}
	#message .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	SERVICE │ 事業紹介

--------------------------------------------------*/
#service {background: #fff;}
#service::before {
	content: '';
	position: absolute;
	top: 10%;
	left: 0;
	z-index: -1;
	width: 25%;
	height: 15%;
	background: linear-gradient(-45deg, #F0FEFF, #DDFFEB, #CCECFF);
}
#service .container:not(:last-child) {margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
#service .container h3 {margin-bottom: clamp(35px, calc(35px + 20 * ((100vw - 375px) / 1545)), 55px);text-align: center;}
#service .container h3 span {
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
	border-bottom: 2px solid #C4D7D9;
	color: #3AABDE;
	font-weight: 500;
	font-size: clamp(22px, calc(22px + 8 * ((100vw - 375px) / 1545)), 30px);
}
#service .container:nth-of-type(3) h3 span {color: #41D9ED;}
#service .container h3 span::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: calc(tan(60deg) * 15px / 2);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: #C4D7D9;
}
#service .container:nth-of-type(2) ul {align-items: center;}
#service .container:nth-of-type(2) ul li:nth-child(1) {
	width: 68%;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	border-radius: 20px;
	background: #41BFED;
}
#service .container:nth-of-type(2) ul li:nth-child(2) {
	width: 32%;
	padding: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border-radius: 0 20px 20px 0;
	background: #ECF4F5;
}
#service .container ul li h4 {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	color: #00C5E0;
	font-weight: 500;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#service .container:nth-of-type(2) ul li:nth-child(1) h4 {color: #fff;font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);}
#service .container:nth-of-type(2) ul li:nth-child(1) h4 span {display: block;font-size: 2em;text-align: center;}
#service .container:nth-of-type(2) ul li:nth-child(2) h4 {color: #41BFED;}
#service .container:nth-of-type(2) ul li .wrap {flex-direction: row-reverse;}
#service .container:nth-of-type(2) ul li .wrap figure {width: 49%;}
#service .container:nth-of-type(2) ul li .wrap .content {width: 49%;}
#service .container:nth-of-type(2) ul li:nth-child(1) .wrap .content p {color: #fff;font-weight: 500;font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);}
#service .container:nth-of-type(3) ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border-radius: 20px;
	background: #ECF4F5;
}
@media only screen and ( max-width: 1024px ) {
	#service .container:nth-of-type(2) ul li .wrap figure {width: 100%;margin-bottom: 20px;}
	#service .container:nth-of-type(2) ul li .wrap .content {width: 100%;}
	#service .container:nth-of-type(3) ul {grid-template-columns: 1fr;}
}
@media only screen and ( max-width: 767px ) {
	#service .container:nth-of-type(2) ul li:nth-child(1) {width: 100%;border-radius: 20px 20px 0 0;}
	#service .container:nth-of-type(2) ul li:nth-child(2) {width: 100%;border-radius: 0 0 20px 20px;}
}
/*--------------------------------------------------

	WORK STYLE │ 働くポイント

--------------------------------------------------*/
#work_point {background: linear-gradient(-45deg, #66DAE3, #53BDF5);}
#work_point .title_common p {color: #81F5FF;}
#work_point .title_common h2 {color: #fff;}
#work_point ol {gap: 15px 0;}
#work_point ol li.item {
	position: relative;
	z-index: 1;
	width: calc(100% / 3 - 10px);
	padding: clamp(50px, calc(50px + 70 * ((100vw - 375px) / 1545)), 120px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	overflow: hidden;
	background: #fff;
}
#work_point ol li.item:nth-child(1) {border-top-left-radius: 50px;}
#work_point ol li.item:nth-child(3) {border-top-right-radius: 50px;}
#work_point ol li.item:nth-child(4) {width: calc(100% / 2 - 10px);border-bottom-left-radius: 50px;}
#work_point ol li.item:nth-child(5) {width: calc(100% / 2 - 10px);border-bottom-right-radius: 50px;}
#work_point ol li.item .title_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70px;
	margin-bottom: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
}
#work_point ol li.item .title_wrap p {
	position: absolute;
	top: -3%;
	left: 0;
	z-index: -1;
	color: #DDFCF1;
	font-size: clamp(120px, calc(120px + 70 * ((100vw - 375px) / 1545)), 190px);
	line-height: 1;
}
#work_point ol li.item .title_wrap h3 {
	color: #24BFED;
	font-weight: 700;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#work_point ol li.item figure {height: 143px;margin: 0 auto 20px;}
#work_point ol li.item:nth-child(1) figure {max-width: 116px;}
#work_point ol li.item:nth-child(2) figure {max-width: 132px;}
#work_point ol li.item:nth-child(3) figure {max-width: 130px;}
#work_point ol li.item:nth-child(4) figure {max-width: 132px;}
#work_point ol li.item:nth-child(5) figure {max-width: 143px;}
#work_point ol li.item ul {display: flex;flex-wrap: wrap;gap: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px) 8px;}
#work_point ol li.item ul li {
	padding: 10px clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	border: 2px solid #5DC5ED;
	border-radius: 50px;
	background: #E6FBFF;
	font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);
}
@media only screen and ( max-width: 1024px ) {
	#work_point ol {gap: 10px;}
	#work_point ol li.item {width: 100%;}
	#work_point ol li.item:nth-child(1) {border-radius: 50px 50px 0 0;}
	#work_point ol li.item:nth-child(3) {border-radius: 0;}
	#work_point ol li.item:nth-child(4) {width: 100%;border-radius: 0;}
	#work_point ol li.item:nth-child(5) {width: 100%;border-radius: 0 0 50px 50px;}
	#work_point ol li.item .title_wrap {height: auto;}
	#work_point ol li.item figure {height: auto;}
}
@media only screen and ( max-width: 500px ) {
	#work_point ol li.item:nth-child(1) figure {max-width: 96px;}
	#work_point ol li.item:nth-child(2) figure {max-width: 112px;}
	#work_point ol li.item:nth-child(3) figure {max-width: 110px;}
	#work_point ol li.item:nth-child(4) figure {max-width: 112px;}
	#work_point ol li.item:nth-child(5) figure {max-width: 123px;}
}
/*--------------------------------------------------

	INTERVIEWE │ インタビュー

--------------------------------------------------*/
#interview {overflow: hidden;}
#interview::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
	width: 60%;
	height: 100%;
	background: linear-gradient(-45deg, #EDFFFE, #FCFFD1, #DDFFFD, #C3F2FF);
}
#interview ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#interview ul li {position: relative;padding-top: 20%;}
#interview ul li p.num {
	position: absolute;
	top: 0;
	right: 100%;
	color: #00E2EB;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
	writing-mode: vertical-rl;
}
#interview ul li p.num span {font-size: 1.5em;}
#interview ul li figure {
	overflow: hidden;
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	border-radius: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#interview ul li figure img {transition: .5s;}
#interview ul li:hover figure img {transform: scale(1.1);}
#interview ul li .wrap {position: relative;padding-bottom: clamp(90px, calc(90px + 10 * ((100vw - 375px) / 1545)), 100px);}
#interview ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	color: #444;
	font-weight: 700;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
	letter-spacing: .06em;
	line-height: 2;
}
#interview ul li .wrap h3 span {display: inline-block;margin-right: 5px;padding: 10px;background: #00CCE6;color: #fff;font-size: 1.05em;}
#interview ul li .wrap dl dt {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	color: #444;
	font-size: clamp(26px, calc(26px + 10 * ((100vw - 375px) / 1545)), 36px);
	letter-spacing: .02em;
}
#interview ul li .wrap dl dd {color: #444;font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);}
#interview ul li .wrap p.read {
	display: flex;
	gap: 10px;
	position: absolute;
	right: 24px;
	bottom: 17px;
	z-index: 1;
	padding: 15px 35px;
	border: 4px solid #41BFED;
	border-radius: 50px;
	background: #fff;
	color: #41BFED;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	line-height: 1;
	text-align: center;
	transition: .3s;
}
#interview ul li:hover .wrap p.read {background: #41BFED;color: #fff;}
#interview ul li .wrap p.read img {width: clamp(18px, calc(18px + 4 * ((100vw - 375px) / 1545)), 22px);}
@media only screen and ( max-width: 1024px ) {
	#interview ul {display: flex;gap: 0;max-width: 500px;}
}
@media only screen and ( max-width: 767px ) {
	#interview .inner {width: 75%;}
}
/*--------------------------------------------------

	IDEAL CANDIDATE │ 求める人物像

--------------------------------------------------*/
#ideal_candidate {background: linear-gradient(-45deg, #A4F2F8, #7BD7FF);}
#ideal_candidate .inner {max-width: 967px;}
#ideal_candidate .title_common p {color: #D9FFFC;}
#ideal_candidate ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-top: clamp(150px, calc(150px + 100 * ((100vw - 375px) / 1545)), 250px);}
#ideal_candidate ul li {
	position: relative;
	padding: 80% clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 35px) clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	border-radius: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	background: #fff;
}
#ideal_candidate ul li figure {
	position: absolute;
	bottom: 48%;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	margin: 0 auto clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#ideal_candidate ul li:nth-child(2) figure {width: 85%;}
#ideal_candidate ul li:nth-child(3) figure {left: 55%;width: 105%;}
#ideal_candidate ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	color: #3AABDE;
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: .06em;
	text-align: center;
}
@media only screen and ( max-width: 1024px ) {
	#ideal_candidate ul {grid-template-columns: 1fr;margin-top: 0;}
	#ideal_candidate ul li {display: flex;align-items: center;gap: 30px;padding: 20px;}
	#ideal_candidate ul li figure {position: initial;transform: none;width: 30%;margin-bottom: 0;}
	#ideal_candidate ul li:nth-child(2) figure,
	#ideal_candidate ul li:nth-child(3) figure {width: 30%;}
	#ideal_candidate ul li .wrap {flex: 1;}
	#ideal_candidate ul li .wrap h3 {text-align: left;}
}
@media only screen and ( max-width: 767px ) {
	#ideal_candidate ul li {gap: 20px;}
	#ideal_candidate ul li figure,
	#ideal_candidate ul li:nth-child(2) figure,
	#ideal_candidate ul li:nth-child(3) figure {width: clamp(80px, calc(80px + 40 * ((100vw - 375px) / 1545)), 120px);}
}
/*--------------------------------------------------

	ENTRY │ エントリー

--------------------------------------------------*/
#entry {background: url(../img/front/entry/bg.webp) no-repeat center / cover;}
#entry .inner {max-width: 960px;}
#entry .title_common {margin-bottom: 25px;}
#entry .container {
	position: relative;
	padding: 20px;
	padding: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px) 20px;
	border-radius: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	background: #fff;
}
#entry .container .wrap {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#entry .container .wrap p {text-align: center;}
#entry .container a {
	display: flex;
	justify-content: center;
	position: relative;
	max-width: clamp(360px, calc(360px + 200 * ((100vw - 375px) / 1545)), 560px);
	margin: 0 auto;
	padding: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px) 0;
	border-radius: 4em;
	background: linear-gradient(85deg, #20D0F0, #54E3DE, #FCF762);
	color: #fff;
	font-weight: 700;
	font-size: clamp(18px, calc(18px + 18 * ((100vw - 375px) / 1545)), 36px);
	letter-spacing: .2em;
	text-align: center;
}
#entry .container a img {position: absolute;top: 50%;right: 8%;transform: translateY(-50%);width: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);}