@charset "utf-8";
/* アコーディオン用のスタイル */
.read-more-btn {display: none;}
@media only screen and ( max-width : 1024px ) {
	.accordion-item {position: relative;padding-bottom: 10px;}
	.read-more-btn {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		border: none;
		background: none;
		color: #0066cc;
		font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);
		transition: color 0.3s ease;
		cursor: pointer;
	}
	.read-more-btn:hover {color: #004499;}
	.read-more-btn::after {
		content: " >>";
		font-size: .8em;
		margin-left: 5px;
		transition: transform .3s ease;
	}
	.read-more-btn.active::after {transform: rotate(180deg);}
	.accordion-content {max-height: 0;overflow: hidden;transition: max-height .3s ease;}
	.accordion-content.active {max-height: fit-content;padding-bottom: 30px;}
	.sp-accordion {display: block;}
	.sp-hide {display: none;}
}
/*-------------------------------------------------

	Main Visual │ メインビジュアル

--------------------------------------------------*/
#mv {position: relative;z-index: 2;text-align: center;}
.image-crossfader {
	position: relative;
	z-index: -2;
	width: 100%;
	margin-bottom: clamp(30px, calc(30px + 15 * ((100vw - 375px) / 1545)), 45px);
	padding-top: 40.4%;
	overflow: hidden;
}
.image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	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-size: cover;
	background-position: center;
}
.image-crossfader-inner:nth-of-type(1) {background-image: url("../img/front/mv/slide01.webp");}
.image-crossfader-inner:nth-of-type(2) {background-image: url("../img/front/mv/slide02.webp");}
.image-crossfader-inner:nth-of-type(3) {background-image: url("../img/front/mv/slide03.webp");}
.image-crossfader-inner:nth-of-type(4) {background-image: url("../img/front/mv/slide04.webp");}
.image-crossfader-inner.is-visible {z-index: 1;opacity: 1;}
#mv .inner {position: absolute;top: 0;left: 50%;transform: translateX(-50%);z-index: 2;height: 100%;}
#mv .wrap {position: absolute;bottom: 10%;left: 0;z-index: 2;width: 100%;padding: 1% 0;background: #005AAB;}
#mv .wrap h1 {
	color: #fff;
	font-weight: bold;
	font-size: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	line-height: 1.4;
	letter-spacing: .1em;
	text-align: center;
}
#mv a {text-align: center;color: #005AAB;font-size: clamp(10px, calc(10px + 2 * ((100vw - 375px) / 1545)), 12px);}
#mv a img {display: block;width: clamp(10px, calc(10px + 6 * ((100vw - 375px) / 1545)), 16px);margin: 0 auto 10px;}
@media only screen and ( max-width : 1024px ) {
	#mv {margin-top: 70px;}
}
@media only screen and ( max-width : 767px ) {
	.image-crossfader {padding-top: 85.3%;}
	.image-crossfader-inner:nth-of-type(1) {background-image: url("../img/front/mv/slide01_sp.webp");}
	.image-crossfader-inner:nth-of-type(2) {background-image: url("../img/front/mv/slide02_sp.webp");}
	.image-crossfader-inner:nth-of-type(1) {background-image: url("../img/front/mv/slide03_sp.webp");}
	.image-crossfader-inner:nth-of-type(2) {background-image: url("../img/front/mv/slide04_sp.webp");}
	#mv .wrap h1 {font-size: 4vw;}
}
/*--------------------------------------------------

	Message │ メッセージ

--------------------------------------------------*/
#message .accordion-text::before {background: linear-gradient(transparent, #fff);}
#message .wrap p {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#message .wrap p:last-child {margin-bottom: 30px;}
#message ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin-top: 50px;}
#message ul li {
	padding-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border: 1px solid #707070;
	border-radius: 20px;
}
#message ul li img {
	display: block;
	width: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	margin: 0 auto clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
}
@media only screen and ( max-width : 1024px ) {
	.accordion {position: relative;padding-bottom: 30px;}
	.accordion-btn {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);
		color: #005AAB;
		cursor: pointer;
		transition: all .2s;
	}
	.accordion-btn::after {content: "VIEW MORE >>";}
	.accordion-text {position: relative;overflow: hidden;}
	.accordion-text.is-hide {height: 270px;}
	.accordion-text::before {
		content: '';
		position: absolute;
		bottom: 0;
		z-index: 1;
		width: 100%;
		height: 60px;
		background: linear-gradient(transparent, #fff);
	}
	.accordion-btn.is-show {bottom: 0;}
	.accordion-btn.is-show::after {content: "CLOSE >>";}
	.accordion-btn.is-show + .accordion-text::before {display: none;}
	.accordion-text.is-hide {height: 180px;}
}
#message ul li p {text-align: center;}
@media only screen and ( max-width : 767px ) {
	#message ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#message .read-more-btn {width: 100%;}
}
/*--------------------------------------------------

	In numbers │ 数字で見るTOKAI

--------------------------------------------------*/
#numbers ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
@media only screen and ( max-width : 767px ) {
	#numbers ul {grid-template-columns: repeat(2, 1fr);}
}

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

	Business │ 会社概要・事業紹介

--------------------------------------------------*/
#business {background: #F8FAFF;}
#business .main_block {margin-bottom: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);}
#business .main_block h3 {
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#business .main_block ul li {align-items: flex-start;margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);}
#business .main_block ul li:nth-child(2) {flex-direction: row-reverse;margin-bottom: 0;}
#business .main_block ul li figure {width: 45%;overflow: hidden;border-radius: 1em;}
#business .main_block ul li .wrap {width: 50%;}
#business .syicky_block {display: flex;position: relative;}
#business .syicky_block aside {width: clamp(200px, calc(200px + 100 * ((100vw - 375px) / 1545)), 300px);}
#business .syicky_block aside ul {
	position: sticky;
	top: 0;
	display: grid;
	gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-top: 100px;
}
#business .syicky_block aside ul li a {
	color: #CBD4DC;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 14 * ((100vw - 375px) / 1545)), 28px);
}
#business .syicky_block aside ul li a.is-current {color: #005AAB;}
#business .syicky_block .container {flex: 1;}
#business .syicky_block .container .wrap {margin-bottom: 30px;}
#business .syicky_block .container .wrap:last-child {margin-bottom: 0;}
#business .syicky_block .container .wrap figure {margin-bottom: 20px;}
#business .syicky_block .container .wrap h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#business .syicky_block .container .wrap .txt_content {margin-bottom: 20px;}
#business .syicky_block .container .wrap .txt_content p {margin-bottom: 20px;}
#business .syicky_block .container .wrap .txt_content p:last-child {margin-bottom: 0;}
#business .syicky_block .container .wrap .pickup_content {
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	border-radius: 10px;
	background: #fff;
}
#business .syicky_block .container .wrap .pickup_content p {margin-bottom: 20px;}
#business .syicky_block .container .wrap .pickup_content dl {overflow: hidden;}
#business .syicky_block .container .wrap .pickup_content dl dt {
	float: left;
	width: 100px;
	margin-bottom: 10px;
	padding: 5px 0;
	border-radius: 30px;
	background: #005AAB;
	color: #fff;
	line-height: 1.4;
	text-align: center;
}
#business .syicky_block .container .wrap .pickup_content dl dt:last-child {margin-bottom: 0;}
#business .syicky_block .container .wrap .pickup_content dl dd {margin: 0 0 10px 120px;padding: 5px 0;color: #005AAB;}
#business .syicky_block .container .wrap .pickup_content dl dd:last-child {margin-bottom: 0;}
#business .syicky_block .container .wrap ul li {padding: 20px;border: 1px solid #005AAB;border-radius: 20px;}
#business .syicky_block .container .wrap ul li h4 {
	margin-bottom: 10px;
	color: #005AAB;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#business .syicky_block .container .wrap ul:nth-of-type(1) li {width: 49%;margin-bottom: 10px;}
#business .syicky_block .container .wrap ul:nth-of-type(1) li:nth-child(1) {width: 100%;}
#business .syicky_block .container .wrap ul:nth-of-type(2) {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px 20px;}
#business .syicky_block .container .wrap ul:nth-of-type(2) li {position: relative;}
#business .syicky_block .container .wrap ul:nth-of-type(2) li::before {content: '';display: block;padding-top: 50%;}
#business .syicky_block .container .wrap ul:nth-of-type(2) li p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	color: #005AAB;
	font-weight: bold;
	font-size: clamp(12px, calc(12px + 8 * ((100vw - 375px) / 1545)), 20px);
	line-height: 1.4;
	text-align: center;
}
#business .syicky_block .container .wrap ul li p span {
	display: block;
	font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);
	text-align: center;
}
#business .syicky_block .container #num03 figure.icon{height:60px;}
#business .syicky_block .container #num03 figure.icon img{height:100%;}
@media only screen and ( max-width : 1024px ) {
	#business .syicky_block .container .wrap ul:nth-of-type(2) {grid-template-columns: repeat(3, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#business .main_block ul li figure {width: 100%;margin-bottom: 20px;}
	#business .main_block ul li .wrap {width: 100%;}
	#business .syicky_block aside {display: none;}
	#business .syicky_block .container .wrap p.num {
		margin-bottom: 10px;
		color: #005AAB;
		font-weight: bold;
		font-size: clamp(22px, calc(22px + 6 * ((100vw - 375px) / 1545)), 28px);
	}
	#business .syicky_block .container .wrap ul:nth-of-type(2) li {padding: 0;}
}
@media only screen and ( max-width : 500px ) {
	#business .syicky_block aside {display: none;}
	#business .syicky_block .container .wrap .accordion-text.is-hide {height: 40px;}
	#business .syicky_block .container .wrap:nth-of-type(1) .accordion-text.is-hide {height: 60px;}
	#business .syicky_block .container .wrap .pickup_content dl dt {float: none;}
	#business .syicky_block .container .wrap .pickup_content dl dd {margin: 0 0 20px;padding: 0;}
	#business .syicky_block .container .wrap ul:nth-of-type(2) {gap: 10px;}
	#business .syicky_block .container .wrap ul li {padding: 20px 10px;}
	#business .syicky_block .container .wrap ul:nth-of-type(1) li {width: 100%;}
}
/*--------------------------------------------------

	Work Point │ 働くポイント

--------------------------------------------------*/
#work_point ul.list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
#work_point ul.list li.item {
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	border: 1px solid #545454;
	border-radius: 30px;
}
#work_point ul.list li.item figure {width: clamp(100px, calc(100px + 50 * ((100vw - 375px) / 1545)), 150px);margin: 0 auto 20px;}
#work_point ul.list li.item h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#work_point ul.list li.item .wrap p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#work_point ul.list li.item .wrap p:last-child {margin-bottom: 0;}
#work_point ul.list li.item ul li {position: relative;padding-left: 20px;color: #005AAB;}
#work_point ul.list li.item ul li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 10px;
	height: 100%;
	background: url(../img/front/work_point/Icon_check.svg) no-repeat center / 100%;
}
@media only screen and ( max-width : 1024px ) {
	#work_point ul.list {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#work_point ul.list {grid-template-columns: 1fr;}
}
/*--------------------------------------------------

	Ideal Candidate │ 求める人物像

--------------------------------------------------*/
#ideal ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
@media only screen and ( max-width : 767px ) {
	#ideal ul {grid-template-columns: repeat(2, 1fr);gap: 10px;}
}
/*--------------------------------------------------

	Requirement │ 募集要項

--------------------------------------------------*/
#requirement .inner {max-width: 1152px;}
#requirement table tr {display: block;margin-bottom: 10px;}
#requirement table tr:last-child {margin-bottom: 0;}
#requirement table tr th {
	width: clamp(200px, calc(200px + 100 * ((100vw - 375px) / 1545)), 300px);
	padding-top: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	background: #F8FAFF;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	letter-spacing: .2em;
	text-align: center;
}
#requirement table tr td {padding: 20px;padding-left: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#requirement table tr td .wrap {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#requirement table tr td .wrap:last-child {margin-bottom: 0;}
#requirement table tr td ul.checks li {position: relative;padding-left: 25px;}
#requirement table tr td ul.checks li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 14px;
	height: 100%;
	background: url(../img/front/requirement/Icon_check.svg) no-repeat center left / 100%;
}
#requirement table tr td .wrap p.square,
#requirement table tr td ul.square li {position: relative;padding-left: 20px;}
#requirement table tr td .wrap p.square::before,
#requirement table tr td ul.square li::before {content: '';position: absolute;top: .32em;left: 0;width: 15px;height: 15px;background: #222;}
@media only screen and ( max-width : 767px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(1, 1fr);}
	#requirement table tr {margin-bottom: 0;}
	#requirement table tr th {display: block;width: 100%;padding: 10px 0;}
	#requirement table tr td {display: block;padding: 15px 10px;}
	#requirement table tr:last-child td {padding-bottom: 0;}
}