@charset "utf-8";

/* =========================================
* ページ全体の共通パーツ
* ======================================== */
html {
	scroll-padding-top: var(--header-height);
	/* 追従メニューの高さに応じて適切な値を設定 */
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	text-align: justify;
	font-weight: 400;
	line-height: 170%;
	letter-spacing: .32px;
	background-color: var(--bg-color);
	font-size: var(--txt16-14);
}


main {
	margin-top: var(--header-height);
	overflow: clip;
}

section {
	padding: var(--m56-40) 0px;
	display: flex;
	justify-content: center;
	align-items: center;

	&:nth-of-type(1) {
		padding: var(--m80-56) 0 var(--m56-40) 0;
	}

	&:last-child {
		padding-bottom: var(--m120-80);
	}
}



a {
	text-decoration: none;
	color: inherit;
}


img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.container {
	width: var(--content-width);
	display: block;
	margin: auto;
}

@media(max-width:768px) {

	.sp-none {
		display: none !important;
	}
}

@media(min-width:769px) {
	.pc-none {
		display: none !important;
	}
}

.txtC {
	text-align: center;
}

.txtR {
	text-align: right;
}

.txtL {
	text-align: left;
}

.txtJ {
	text-align: justify;
}


/* フレックス関連
* ---------------------------------- */
.normal-flex {
	display: flex;
}

.flexR {
	flex-direction: row-reverse;
}

.justC {
	justify-content: center;
}

.justS {
	justify-content: flex-start;
}

.justE {
	justify-content: flex-end;
}

.justB {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.justA {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.flexW {
	flex-wrap: wrap;
}

.alignS {
	align-items: start;
}

.alignC {
	align-items: center;
}

.alignB {
	align-items: flex-end;
}

@media (max-width: 768px) {
	.normal-flex {
		flex-direction: column;
	}
}



/* =========================================
* 共通パーツ
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
	--main-color: #283F66;
	--sub-color: #70B7FF;
	--bg-color: #E8EBFA;
	--gray-color: #B0B5C3;
	--txt-gray-color: #8F9197;
	--main-gd: linear-gradient(90deg, #0A3968 0%, #5299E0 100%);
	--sub-gd: linear-gradient(90deg, #216BB6 0%, #61ADFA 100%);
	--en-txt: "Lexend Exa", "Noto Sans JP", sans-serif;
	--en-txt02: "Michroma", sans-serif;
	--content-width: min(90vw, 1080px);
	--side-space: calc((100vw - var(--content-width)) / 2);
	--header-height: 80px;
	--kunoji: rotate(45deg) translateY(-50%);
	--hov-move: all .4s;
	--txt64-36: 64px;
	--txt44-32: 44px;
	--txt40-28: 40px;
	--txt36-24: 36px;
	--txt32-24: 32px;
	--txt28-20: 28px;
	--txt26-20: 26px;
	--txt24-20: 24px;
	--txt20-18: 20px;
	--txt18-16: 18px;
	--txt16-14: 16px;
	--txt14-12: 14px;
	--m120-80: 120px;
	--m96-76: 96px;
	--m80-64: 80px;
	--m80-56: 80px;
	--m64-48: 64px;
	--m56-40: 56px;
	--m40-32: 40px;
	--m32-24: 32px;
	--m32-16: 32px;
	--m24-16: 24px;
	--m16-12: 16px;
}


/* パンくず
* ---------------------------------- */

.bread-list {
	margin: 16px 0;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	flex-wrap: wrap;

	li {
		position: relative;
		margin-left: 32px;
		font-weight: 500;
		line-height: normal;

		a {
			text-decoration: underline;
		}

		&::before {
			position: absolute;
			content: "";
			width: 6px;
			height: 6px;
			border-top: solid 1px #000;
			border-right: solid 1px #000;
			top: 50%;
			left: -24px;
			transform: var(--kunoji);
		}

		&:first-child {
			margin-left: 0;

			&::before {
				display: none;
			}
		}

	}
}

/* テキストまわり
* ---------------------------------- */

/* --- 普通のリスト --- */
ul.normal-list {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.normal-list li {
	list-style-type: disc;
	list-style-position: inside;
}

/* --- ネイビーリスト --- */
ul.navy-list {
	li {
		position: relative;
		padding-left: .8em;

		&::before {
			content: "●";
			color: #386EA4;
			font-size: .4em;
			position: absolute;
			left: 0;
		}
	}
}

/* --- 注釈 --- */
ul.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

a.inline-link {
	color: var(--sub-color);
	text-decoration: underline;
	font-weight: 500;
}

.main-color-txt {
	color: var(--main-color);
}

.lead-txt {
	margin-bottom: var(--m120-80);
}

h2 {
	line-height: 170%;

	&.normal-midashi {
		font-size: var(--txt32-24);
		font-weight: 500;
		letter-spacing: 1.28px;
		position: relative;
		margin-bottom: var(--m64-48);

		&.en-midashi {
			font-family: var(--en-txt);
			font-weight: 400;
		}

		&::after {
			content: "";
			height: 2px;
			width: 120px;
			background-color: var(--main-color);
			position: absolute;
			left: 0;
			bottom: -24px;
		}
	}
}

.circle-midashi {
	font-size: var(--txt28-20);
	margin-bottom: var(--m32-16);
	font-weight: 500;
	position: relative;
	padding-left: var(--m24-16);

	&::before {
		content: "●";
		color: var(--main-color);
		font-size: 12px;
		position: absolute;
		top: 0;
		left: 0;
	}
}


.normal-btn {
	border: 1px solid var(--main-gd);
	display: grid;
	place-items: center;
	width: 248px;
	height: 48px;
	position: relative;
	border: solid 1px #fff;
	border-image: var(--main-gd) 1;
	transition: var(--hov-move);
	overflow: hidden;
	z-index: 1;


	p {
		font-family: var(--en-txt);
		transition: var(--hov-move);
		font-weight: 500;
		background: var(--main-gd);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	&::before {
		background: var(--main-gd);
		position: absolute;
		top: 0;
		left: -100%;
		content: "";
		width: 100%;
		height: 100%;
		transition: var(--hov-move);
		z-index: -1;
	}

	&:hover {
		p {
			background: #fff;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		&::before {
			left: 0;
		}
	}

	&.white-btn {
		border: 1px solid #fff;
		border-image: none;

		p {
			background: #fff;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		&::before {
			background: #fff;
		}

		&:hover {
			p {
				background: var(--main-gd);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.icon-kunoji {
			border-top: #fff 1px solid;
			border-right: #fff 1px solid;
		}

		&:hover {
			.icon-kunoji {
				border-top: var(--main-color) 1px solid;
				border-right: var(--main-color) 1px solid;
			}

		}
	}
}

a,
button {
	position: relative;

	.icon-kunoji {
		position: absolute;
		transform: var(--kunoji);
		width: 8px;
		height: 8px;
		border-top: var(--main-color) 1px solid;
		border-right: var(--main-color) 1px solid;
		right: var(--m16-12);
		top: 48%;
		transition: var(--hov-move);

		&.icon-kunoji-left {
			transform: translateY(-50%) rotate(-135deg);
			left: var(--m16-12);
		}
	}

	.icon-external {
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		width: 12px;
		height: 12px;
		right: var(--m16-12);
		top: 48%;
		transition: var(--hov-move);
		background-image: url(../imgs/icon_external.svg);
		background-size: cover;
		background-repeat: no-repeat;
	}

	&:hover {
		.icon-kunoji {
			border-top: #fff 1px solid;
			border-right: #fff 1px solid;
		}

		.icon-external {
			background-image: url(../imgs/icon_external_hov.svg);
		}

	}
}

button.normal-btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
}

/* 2階層目メインビジュアル
* ---------------------------------- */
.tier02 .midashi-wrap {
	aspect-ratio: 16 / 3;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;

	.container {
		height: 100%;
		display: flex;
		align-items: flex-end;
	}


	h1.mv-midashi {
		font-size: var(--txt40-28);
		margin-bottom: var(--m40-32);
		font-weight: 500;
	}

	/* --- 当社の特長 --- */
	#feature & {
		background-image: url(../imgs/feature/mv_img.jpg);
		background-position: center bottom 30%;
	}

	/* --- 事業紹介 --- */
	#business & {
		background-image: url(../imgs/business/mv_img.jpg);
	}

	/* --- 企業情報 --- */
	#company & {
		background-image: url(../imgs/company/mv_img.jpg);
	}

	/* --- 採用情報 --- */
	#recruit & {
		background-image: url(../imgs/recruit/mv_img.jpg);
		background-position-y: top 30%;
	}

	/* --- お知らせ --- */
	#news & {
		background-image: url(../imgs/news/mv_img.jpg);
	}

	/* --- お問い合わせ --- */
	#contact & {
		background-image: url(../imgs/contact/mv_img.jpg);
	}
}

/* 3階層目メインビジュアル
* ---------------------------------- */
.tier03,
.tier04 {
	.midashi-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m24-16);
		padding-top: var(--m64-48);

		h1 {
			color: var(--main-color);
			font-size: var(--txt36-24);
			font-weight: 500;
			line-height: 170%;
			letter-spacing: 1.44px;
		}

		.mv-img {
			aspect-ratio: 1080 / 193;
			width: 100%;
			display: block;
			object-fit: cover;
		}
	}
}

#crosstalk .mv-img {
	object-fit: cover;
	object-position: center -160px;
}

/* テーブル
* ---------------------------------- */
table.normal-table {
	font-size: var(--txt14-12);
	width: 100%;
	border-top: 1px solid var(--gray-color);

	thead {
		th {
			background-color: var(--gray-color);
			color: #000;
			font-weight: 400;
		}
	}

	tr {
		border-bottom: 1px var(--gray-color) solid;
	}

	th {
		color: var(--main-color);
	}

	th,
	td {
		padding: var(--m24-16);
		vertical-align: middle;
	}
}


/* =========================================
* ヘッダー
* ======================================== */
header {
	background-color: var(--main-color);
	height: var(--header-height);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	z-index: 10000;
	color: #fff;
	padding-left: min(2.2vw, 40px);
	justify-content: space-between;

	.header-contents {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 16px;

		.top-logo {
			display: flex;
			gap: 8px;
			align-items: center;

			img {
				display: block;
				width: min(8vw, 100px);
			}

			p {
				font-size: min(1.5vw, 20px);
				font-weight: 700;
			}
		}

		nav {
			display: flex;
			gap: min(2vw, 32px);
			align-items: center;

			.header-page-nav {
				display: flex;
				gap: min(2vw, 32px);

				.has-child {
					position: relative;
				}

				.dropdown-menu {
					display: none;
					position: absolute;
					background-color: var(--main-color);
					top: calc(var(--header-height) + 24px);
					left: 50%;
					padding: var(--m16-12) var(--m32-16);
					white-space: nowrap;
					align-items: center;
					transform: translateX(-50%);
					transition: var(--hov-move);
					opacity: .95;

					.dropdown-title {
						font-size: var(--txt18-16);
						padding: 1em 2em 1em 0;
						margin-right: 1em;
						font-weight: 700;
					}

					.chilid-link-list {
						border-left: 1px solid #fff;
						padding-left: 1em;

						.child-link {
							font-size: var(--txt14-12);
							padding: 1em 2em 1em 1em;
						}
					}

					.icon-kunoji {
						border-top: 1px solid #fff;
						border-right: 1px solid #fff;

						a:hover & {
							border-top: 1px solid var(--sub-color);
							border-right: 1px solid var(--sub-color);
						}
					}

					.icon-external {
						background-image: url(../imgs/icon_external_hov.svg);

						a:hover & {
							background-image: url(../imgs/icon_external.svg);
						}
					}

					.has-child.active & {
						display: flex;
					}
				}

				.header-link {
					display: grid;
					place-items: center;
					transition: var(--hov-move);
					cursor: pointer;
					padding: 2em 0;
					font-size: min(1.4vw, 16px);

					&:hover {
						background: var(--sub-gd);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}


				a {
					transition: var(--hov-move);

					&:hover {
						background: var(--sub-gd);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}

			.header-sns-nav {
				display: flex;
				gap: 16px;
				align-items: center;

				.header-sns-link {
					width: 24px;
					height: 24px;
					transition: var(--hov-move);
					display: block;

					&.fb-btn {
						background-image: url(../imgs/icon_fb.svg);
						background-size: contain;
						background-repeat: no-repeat;

						&:hover {
							background-image: url(../imgs/icon_fb_hov.svg);
						}
					}

					&.ig-btn {
						background-image: url(../imgs/icon_ig.svg);
						background-size: contain;
						background-repeat: no-repeat;

						&:hover {
							background-image: url(../imgs/icon_ig_hov.svg);
						}
					}
				}
			}


		}
	}

	.header-contact-btn {
		display: grid;
		place-items: center;
		background: var(--sub-gd);
		font-weight: 700;
		padding: 0 1em;
		font-size: min(1.4vw, 16px);
		white-space: nowrap;
		transition: var(--hov-move);

		&:hover {
			background: var(--main-gd);
		}
	}
}

/* =========================================
* トップページ
* ======================================== */
#top {
	background-color: var(--main-color);

	hgroup.top-midashi {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: var(--m32-16);
		white-space: nowrap;
		color: #fff;

		p {
			font-size: var(--txt20-18);
			font-weight: 500;
			line-height: 170%;
			letter-spacing: 0.8px;
		}

		h2 {
			font-size: var(--txt64-36);
			letter-spacing: 2.56px;
			font-weight: 400;
			font-family: var(--en-txt02);
			line-height: 100%;
		}
	}
}


/* メインビジュアル
* ---------------------------------- */
#top section:not(.top-service) {
	padding: var(--m80-56) 0;
}

.top-mv-wrap {
	width: 100%;
	aspect-ratio: 8 / 5;
	display: grid;
	place-items: center;

	.top-mv-midashi {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: var(--m24-16);
		color: #fff;
		padding: 0 var(--side-space) 100px var(--side-space);

		h1 {
			font-size: var(--txt44-32);
			line-height: 140%;
			font-weight: 600;
		}

		p {
			font-size: var(--txt20-18);
			letter-spacing: 0.4px;
			line-height: 150%;
			font-weight: 400;
		}
	}

	.vegas-content-scrollable {
		height: auto;
		width: auto;
	}
}

/* 地球の背景
* ---------------------------------- */

.earth-bg-area {
	margin-top: -150px;
	position: relative;

	section {
		position: relative;
		z-index: 2;
		color: #fff;
	}

	.top-earth-bg-movie-wrap {
		width: 180%;
		aspect-ratio: 160 / 57;
		--curve-top: 22%;
		--curve-peak: -3%;
		clip-path: shape(from 0% var(--curve-top), curve to 100% var(--curve-top) with 25% var(--curve-peak) / 75% var(--curve-peak), vline to 100%, hline to 0%, close);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		.top-video-overlay {
			position: relative;
			width: 100%;
			height: 100%;

			&::after {
				content: "";
				background-color: var(--main-color);
				opacity: .4;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				position: absolute;
			}

			video.top-earth-bg-movie {
				width: 100%;
				object-fit: contain;
			}
		}
	}

}

/* トップページのサービスセクション
* ---------------------------------- */

section.top-service {

	display: block;
	padding: 150px 0 80px 0;
	background: linear-gradient(to bottom, transparent 0%, transparent 300px, #242b41 500px, #242b41 100%);

	.top-midashi {
		margin-left: var(--side-space);
	}

	.top-service-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m32-16);


		.top-service-col {
			display: flex;
			align-items: flex-end;

			.top-service-img {
				width: 63%;
				height: 438px;
				object-fit: cover;
			}

			.top-service-txt {
				display: flex;
				flex-direction: column;
				gap: var(--m16-12);
				padding-bottom: var(--m40-32);
				width: 380px;

				h3 {
					font-size: min(3vw, 32px);
					font-weight: 500;
					letter-spacing: 1.28px;
					line-height: 170%;
				}
			}

			&:nth-child(odd) {
				.top-service-img {
					clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
				}

				.top-service-txt {
					margin-right: var(--side-space);
					margin-left: -32px;
				}
			}

			&:nth-child(even) {
				flex-direction: row-reverse;

				.top-service-img {
					clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
				}

				.top-service-txt {
					margin-left: var(--side-space);
					margin-right: -32px;
				}
			}
		}
	}
}

/* トップページの事例・実績セクション
* ---------------------------------- */
section.top-works {
	background-image: url(../imgs/top_works_bg.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	color: #fff;

	&::after {
		content: "";
		position: absolute;
		height: 100%;
		width: 65%;
		right: 0;
		top: 0;
		background-color: var(--main-color);
		clip-path: polygon(35% 0, 100% 0%, 100% 100%, 0% 100%);
	}

	.container {
		display: flex;
		justify-content: space-between;
		gap: var(--m16-12);
		position: relative;
		z-index: 1;
	}

	.top-works-wrap {
		display: flex;
		gap: min(4vw, 56px);
		width: 60%;
		max-width: 640px;

		.top-works-col {
			transition: var(--hov-move);
			display: flex;
			flex-direction: column;
			gap: 4px;
			width: 50%;

			.top-works-img {
				aspect-ratio: 73 / 44;
				position: relative;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					background-color: var(--main-color);
					opacity: .2;
					width: 100%;
					height: 100%;
					transition: var(--hov-move);
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.top-works-txt {
				font-size: var(--txt18-16);
				line-height: 170%;
				font-weight: 500;

				span {
					font-size: var(--txt14-12);
					font-weight: 400;
				}
			}

			.top-works-brn {
				display: flex;
				gap: 8px;
				align-items: center;
				font-size: var(--txt14-12);
				font-family: var(--en-txt);
				line-height: 140%;
				margin-left: auto;

				.icon-circle-arrow {
					background-image: url(../imgs/icon_circle_arrow.svg);
					background-size: contain;
					width: 28px;
					height: 28px;
					transition: var(--hov-move);
				}
			}

			&:hover {
				.top-works-img {

					&::before {
						opacity: 0;
					}
				}

				.top-works-brn {
					.icon-circle-arrow {
						background-image: url(../imgs/icon_circle_arrow_hov.svg);
					}
				}
			}
		}
	}
}

/* トップページの当社の特長セクション
* ---------------------------------- */
section.top-benefits {
	background: var(--main-gd);
	color: #fff;

	.container {
		display: flex;
		justify-content: space-between;
		gap: var(--m16-12);
	}

	.top-benefits-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m24-16);
		width: 60%;

		.top-benefits-list {
			list-style: none;
			counter-reset: item;
			font-size: var(--txt24-20);
			gap: var(--m24-16);
			display: flex;
			flex-direction: column;
			gap: var(--m24-16);
			padding-left: 40px;
			text-indent: -40px;

			li {
				counter-increment: item;

				&::before {
					content: counter(item, decimal-leading-zero);
					font-size: var(--txt18-16);
					font-family: var(--en-txt);
					vertical-align: middle;
					margin-right: var(--m16-12);
				}
			}
		}

		.normal-btn {
			margin-left: auto;
		}
	}
}

/* トップページのニュースセクション
* ---------------------------------- */
section.top-news {
	background-color: var(--main-color);
	padding: var(--m80-56) 0;
	color: #fff;

	.top-news-midashi-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.news-list-wrap {
		.news-list-col {
			a {
				border-bottom: #fff 1px solid;
				transition: var(--hov-move);

				time {
					color: #fff;
				}

				h2.article-title {
					color: #fff;
					transition: var(--hov-move);
				}

				.icon-kunoji {
					border-top: #fff 1px solid;
					border-right: #fff 1px solid;
				}

				&:hover {
					border-image: var(--sub-gd) 1;

					h2.article-title,
					time {
						background: var(--sub-gd);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.icon-kunoji {
						border-top: #216BB6 1px solid;
						border-right: #216BB6 1px solid;
					}
				}
			}

		}
	}
}

/* トップページの採用情報セクション
* ---------------------------------- */
.top-recruit {
	background-image: url(../imgs/top_recruit_bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	.top-recruit-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m16-12);
		color: #fff;
	}
}

/* トップページのお問い合わせセクション
* ---------------------------------- */
.top-contact {
	background: var(--sub-gd);
	color: #fff;

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}

	.normal-flex {
		display: flex;
		align-items: center;
		gap: 16px;
		justify-content: space-between;
		align-items: center;
		width: 62%;

		.white-btn {
			min-width: 248px;
		}
	}
}

@media (max-width: 980px) {
	.top-contact {

		.normal-flex {
			flex-wrap: wrap;
		}
	}
}

/* =========================================
* 当社の特長
* ======================================== */
.feature-list-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m80-56);

	.feature-list-col {
		gap: var(--m32-16);

		.normal-btn {
			margin-left: auto;
		}

		.feature-img {
			width: 49%;
			object-fit: cover;
			overflow: hidden;
		}

		.feature-txt {
			width: 49%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			hgroup {
				p {
					color: var(--gray-color);
					font-family: var(--en-txt02);
					letter-spacing: 1.04px;
					font-size: var(--txt26-20);
					margin-bottom: var(--m16-12);
					font-weight: 400;
				}

				h3 {
					letter-spacing: 0.96px;
					font-weight: 500;
					font-size: var(--txt24-20);
					line-height: 170%;

				}
			}

			&>p {
				min-height: 85px;
				line-height: 170%;
			}
		}
	}
}

/* =========================================
* 教育体制
* ======================================== */
.training-wrap {
	gap: var(--m64-48);

	.training-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--m16-12);

		.training-img {
			width: 100%;
			object-fit: cover;
			aspect-ratio: 153 / 92;
		}

		h3 {
			text-align: center;
			font-size: var(--txt24-20);
			font-weight: 500;
		}
	}
}

.training-lead-txt {
	font-size: var(--txt24-20);
	margin-bottom: var(--m32-24);
	text-align: center;
	line-height: 170%;
	font-weight: 500;
}

.training-figure-wrap {
	width: 100%;
	margin-bottom: var(--m56-40);

	img {
		width: 100%;
	}
}

.training-skill-wrap {
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	padding: var(--m24-16) 0;

	h3 {
		text-align: center;
		margin-bottom: var(--m16-12);
		font-weight: 500;
		font-size: var(--txt20-18);

		span {
			color: #000;
			font-size: var(--txt16-14);
		}
	}

	ul {
		columns: 3;
		margin: auto;
		width: fit-content;
		column-gap: 80px;

	}
}

/* =========================================
* 品質マネジメント
* ======================================== */
.quality-policy-wrap {
	font-size: var(--txt24-20);
	font-weight: 500;
	line-height: 170%;
	letter-spacing: 0.96px;

	.quality-list-wrap {
		padding-left: 2.1em;
		text-indent: -2.1em;
	}

	.normal-flex {
		justify-content: space-between;
		margin-top: var(--m40-32);
	}
}

.quality-col {
	display: flex;
	gap: var(--m24-16);
	align-items: center;
	padding: 56px;
	border-top: 1px solid var(--main-color);

	.quality-txt {
		h3 {
			margin-bottom: var(--m32-16);
			font-size: var(--txt24-20);
			font-weight: 500;
		}

		p,
		dl {
			min-height: 189px;
		}

		.jis-col {
			display: flex;
			gap: 8px;

			dt {
				min-width: 82px;
			}
		}
	}

	.quality-img {
		min-width: 50%;
		max-width: 462px;
		aspect-ratio: 77 / 52;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.jis-img {
		min-width: 50%;
		max-width: 462px;
		aspect-ratio: 77 / 52;
		display: flex;
		justify-content: space-between;
		gap: var(--m24-16);

		a {
			display: block;
			transition: var(--hov-move);

			&:hover {
				opacity: .9;
				filter: brightness(120%);
			}
		}
	}

	&:last-child {
		border-bottom: 1px solid var(--main-color);
	}
}

/* =========================================
* 事業紹介
* ======================================== */
.business-wrap {
	gap: var(--m80-56);

	.business-col {
		display: flex;
		flex-direction: column;
		gap: var(--m16-12);
		flex: 1;

		.business-img {
			aspect-ratio: 253 / 120;
			width: 100%;
			position: relative;
			overflow: hidden;
			transition: var(--hov-move);

			&::after,
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: var(--hov-move);
			}

			&::after {
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				transform: scale(1);
			}

			&::before {
				background-color: #000;
				opacity: .4;
				z-index: 1;
			}
		}

		h3 {
			letter-spacing: 0.96px;
			line-height: 170%;
			font-weight: 500;
			font-size: var(--txt24-20);
		}

		p.business-txt {
			min-height: 102px;
		}

		.normal-btn {
			margin-left: auto;
		}

		&:first-child .business-img::after {
			background-image: url(../imgs/business/business_img01.jpg);
		}

		&:nth-child(2) .business-img::after {
			background-image: url(../imgs/business/business_img02.jpg)
		}

		&:nth-child(3) .business-img::after {
			background-image: url(../imgs/business/business_img03.jpg)
		}
	}

	.business-col:has(.normal-btn:hover) {

		.business-img {

			&::after {
				transform: scale(1.1);
			}

			&::before {
				opacity: 0;
			}
		}
	}
}

/* =========================================
* 高度技術ソリューション
* ======================================== */
.soutions-list-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--m40-32);

	.solutions-list-col {
		display: flex;
		flex-direction: column;
		gap: 8px;

		.solutions-img {
			width: 100%;
			aspect-ratio: 111 / 80;
			object-fit: cover;
		}

		hgroup {
			.en-txt {
				font-family: var(--en-txt02);
				font-size: var(--txt26-20);
				color: var(--gray-color);
			}

			h3 {
				font-size: var(--txt28-20);
				font-weight: 500;
				line-height: 170%;
			}
		}
	}
}

.image-bg-wrap {
	padding: 56px 80px;
	color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	gap: var(--m40-32);
	background-size: cover;

	.txt-wrap {
		align-items: center;
		gap: var(--m24-16);

		h2 {
			font-size: min(2.6vw, 28px);
			font-weight: 500;
			white-space: nowrap;
		}

		p {
			font-weight: 400;
		}
	}

	#solutions & {
		background-image: url(../imgs/business/solutions/bg_wrap_img.jpg);
	}

	#contract & {
		background-image: url(../imgs/business/contract/bg_wrap_img.jpg);
		background-position-x: left 30%;
	}

	.white-btn-wrap {
		justify-content: center;
		align-items: center;
		gap: 80px;
		position: relative;
		z-index: 1;
	}
}

/* =========================================
* 受託開発
* ======================================== */
.contract-list-wrap {
	gap: var(--m56-40);

	.contract-list-col {
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex: 1;

		.contract-img {
			width: 100%;
			aspect-ratio: 32 / 15;
			position: relative;
			overflow: hidden;

			&::after,
			&::before {
				content: "";
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				transition: var(--hov-move);
			}

			&::before {
				background-color: #000;
				opacity: .2;
				z-index: 1;
			}
		}

		&:first-child {
			.contract-img::after {
				background-image: url(../imgs/business/contract/contract_img02.jpg);
			}
		}

		&:nth-child(2) {
			.contract-img::after {
				background-image: url(../imgs/business/contract/contract_img01.jpg);
				background-position: 0;
			}
		}

		hgroup {

			p {
				font-weight: 400;
			}

			h3 {
				font-size: var(--txt24-20);
				font-weight: 500;
				line-height: 170%;
			}
		}

		.normal-btn {
			margin-left: auto;
		}
	}

	.contract-list-col:has(.normal-btn:hover) {

		.contract-img {

			&::after {
				transform: scale(1.1);
			}

			&::before {
				opacity: 0;
			}
		}
	}
}

/* =========================================
* 事例・実績
* ======================================== */
.works-mv {
	background-color: var(--main-color);
	color: #fff;
	justify-content: space-between;
	height: 340px;
	margin-bottom: var(--m40-32);

	.works-mv-txt {
		display: flex;
		align-items: center;
		padding: var(--m40-32);

		hgroup {
			p {
				font-size: var(--txt18-16);
				border-left: 3px solid var(--sub-color);
				padding-left: var(--m16-12);
				margin-bottom: var(--m24-16);
			}

			h2 {
				line-height: 170%;
				font-size: var(--txt32-24);
				font-weight: 500;
			}
		}
	}

	.works-mv-img {
		width: 52%;
		object-fit: cover;
		height: 100%;
	}
}

.project-detail-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m24-16);

	.project-detail-col {
		.sideline-midashi {
			border-left: 3px solid var(--main-color);
			padding-left: var(--m16-12);
			font-size: var(--txt18-16);
			margin-bottom: 12px;
			font-weight: 500;
		}

		p {
			padding-left: 19px;
		}
	}

	.project-detail-img-wrap {
		justify-content: space-between;
		gap: var(--m40-32);
		align-items: flex-end;

		.person-img {
			max-width: 250px;
			max-height: 330px;
			margin: 0 auto;
		}

		.person-img img {
			width: 100%;
			height: 330px;
			object-fit: cover;
			object-position: center top;
		}
	}
}

.center-btn {
	margin: var(--m80-56) auto 0 auto;
}

/* =========================================
* 企業情報
* ======================================== */
.company-list-wrap {
	display: flex;
	flex-direction: column;

	.company-list-col {
		border-bottom: 1px solid var(--gray-color);
		padding: var(--m40-32) 0;
		align-items: center;
		justify-content: space-between;
		gap: var(--m32-16);

		h3 {
			text-align: left;
			width: 328px;
			font-weight: 500;
			font-size: var(--txt24-20);
			line-height: 170%;
			letter-spacing: 0.96px;
		}

		.company-img {
			aspect-ratio: 11 / 5;
			position: relative;
			overflow: hidden;
			transition: var(--hov-move);
			width: 40%;

			&::after,
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: var(--hov-move);
			}

			&::after {
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				transform: scale(1);
			}

			&::before {
				background-color: #000;
				opacity: .4;
				z-index: 1;
			}
		}

		&:first-child .company-img::after {
			background-image: url(../imgs/company/company_img01.jpg);
		}

		&:nth-child(2) .company-img::after {
			background-image: url(../imgs/company/company_img02.jpg)
		}

		&:nth-child(3) .company-img::after {
			background-image: url(../imgs/company/company_img03.jpg)
		}

		&:has(.normal-btn:hover) {
			border-bottom: 2px solid var(--main-color);

			.company-img {

				&::after {
					transform: scale(1.1);
				}

				&::before {
					opacity: 0;
				}
			}
		}
	}
}


/* =========================================
* 社長メッセージ・MVV
* ======================================== */
.message-title {
	font-size: var(--txt36-24);
	font-weight: 500;
	margin-bottom: var(--m80-56);
	line-height: 170%;
	/* 61.2px */
	letter-spacing: 1.44px;
	text-align: left;
}

.message-wrap {
	display: flex;
	gap: var(--m40-32);
	justify-content: space-between;
	align-items: stretch;
	padding-left: var(--m24-16);

	.message-txt {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--m40-32);

		.president-name {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-left: auto;
			text-align: right;

			dd {
				font-size: var(--txt28-20);
				font-weight: 500;
			}
		}
	}

	.president-img {
		max-width: 400px;
		width: 50%;
		display: block;
		margin: auto;
	}
}

.mvv-col {
	border-bottom: 1px solid var(--gray-color);
	display: flex;
	padding: var(--m40-32) 0 var(--m40-32) var(--m24-16);
	gap: var(--m32-16);

	dt {
		min-width: 224px;
		font-size: var(--txt18-16);
		font-weight: 500;

		.main-color-txt {
			font-size: var(--txt32-24);
			font-family: var(--en-txt02);
			margin-bottom: 8px;
			font-weight: 400;
		}
	}

	dd {
		font-size: var(--txt24-20);
		line-height: 170%;
		letter-spacing: 0.96px;

		p {
			font-weight: 600;
		}

		ol {
			counter-reset: list-num;
			list-style: none;
			padding-left: 0;
			display: flex;
			flex-direction: column;
			gap: var(--m24-16);
			line-height: 170%;

			li {
				counter-increment: list-num;
				font-size: var(--txt24-20);
				font-weight: 600;

				&::before {
					content: counter(list-num) ".";
					margin-right: 0.4em;
					font-family: var(--en-txt);
				}

				span {
					display: block;
					font-size: var(--txt16-14);
					margin-left: 2.3em;
					line-height: 170%;
					font-weight: 400;
				}
			}
		}
	}
}

/* =========================================
* 会社概要・組織図・アクセス・沿革
* ======================================== */

/* アンカーボタン
* ---------------------------------- */
.anchor-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--m24-16);

	.normal-btn {
		width: 100%;

		.icon-kunoji {
			transform: translateY(-50%) rotate(135deg);
		}
	}
}

/* 会社概要
* ---------------------------------- */
.about-company-img {
	margin: 0 auto var(--m56-40) auto;
	display: block;
}

.company-table {
	th {
		width: 200px;
	}
}

/* 組織図
* ---------------------------------- */
.organizational-img {
	img {
		width: 100%;
	}
}

/* アクセス
* ---------------------------------- */
.map-wrap {
	aspect-ratio: 159 / 85;
	margin: 0 auto var(--m56-40) auto;
	max-width: 795px;

	iframe {
		width: 100%;
		height: 100%;
	}
}

/* 沿革（年表）
* ---------------------------------- */
.history-list-wrap {
	font-size: var(--txt14-12);
	border-top: 1px solid var(--gray-color);

	.history-item {
		display: flex;
		border-bottom: 1px solid var(--gray-color);

		dt {
			display: flex;

			.year-txt,
			.month-txt {
				padding: var(--m24-16) var(--m16-12);
				color: var(--main-color);
				font-weight: 700;
				display: grid;
				place-items: center;
				min-width: 96px;
			}
		}

		dd {
			display: grid;
			place-items: center;
			padding: var(--m24-16) var(--m16-12);

			p,
			ul {
				text-align: justify;
				width: 100%;
			}
		}
	}
}

/* =========================================
* 人材派遣事業のマージン率
* ======================================== */
#margin {
	.margin-table {
		margin: var(--m56-40) 0 var(--m16-12) 0;

		th {
			width: 320px;
		}

		&+p {
			font-size: var(--txt14-12);
		}
	}

	.margin-carrier-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m32-16);
		padding-left: var(--m24-16);

		.carrier-table {
			table-layout: fixed;
			min-width: 678px;

			th,
			td {
				padding: var(--m16-12);
				border-left: 1px solid var(--gray-color);

				&.border-none {
					border-left: none;
				}
			}

			td {
				text-align: center;
			}


			thead {
				th {
					border-right: #fff solid 1px;
					text-align: center;

					&:last-child {
						border-right: none;
					}

					&:first-child {
						width: 37%;
					}
				}
			}
		}

		.margin-img {
			margin: auto;
		}
	}
}

/* =========================================
* 採用情報
* ======================================== */

/* 背景画像リンク
* ---------------------------------- */
.recruit-bg-btn-wrap {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.recruit-bg-btn {
	display: flex;
	justify-content: space-between;
	padding: var(--m40-32) 80px;
	align-items: center;
	position: relative;
	transition: var(--hov-move);
	overflow: hidden;

	p {
		color: #fff;
		font-size: 32px;
		font-weight: 500;
		position: relative;
		line-height: 170%;
		z-index: 2;
	}

	.icon-circle-arrow {
		display: block;
		width: var(--m64-48);
		height: var(--m64-48);
		background-image: url(../imgs/icon_circle_arrow.svg);
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		z-index: 2;
		transition: var(--hov-move);
	}

	&::after,
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		transition: var(--hov-move);
	}

	&::after {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		transform: scale(1);
	}

	&::before {
		background-color: var(--main-color);
		opacity: .6;
		z-index: 1;
	}

	&.crosstalk-btn::after {
		background-image: url(../imgs/recruit/recruit_btn_bg01.jpg);
	}

	&.number-btn::after {
		background-image: url(../imgs/recruit/recruit_btn_bg02.jpg);
	}

	&.recruitinfo-btn::after {
		background-image: url(../imgs/recruit/recruit_btn_bg03.jpg);
	}

	&:hover {
		.icon-circle-arrow {
			background-image: url(../imgs/icon_circle_arrow_hov.svg);
		}

		&::after {
			transform: scale(1.2);
		}

		&::before {
			opacity: .2;
		}
	}
}

/* 採用に関するよくある質問
* ---------------------------------- */
summary {
	list-style-type: none;
	cursor: pointer
}

.faq-wrap {
	.faq-col {
		border-bottom: 1px solid var(--main-color);

		.faq-icon {
			font-size: var(--txt24-20);
			font-weight: 400;
			color: var(--main-color);
			font-family: var(--en-txt);
		}

		.faq-q-wrap {
			padding: var(--m24-16) var(--m64-48) var(--m24-16) var(--m32-16);
			display: flex;
			gap: 40px;
			position: relative;
			align-items: center;


			.q-txt {
				background: var(--main-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 400
			}

			.faq-plus {
				position: absolute;
				transform: translateY(-50%);
				right: var(--m32-16);
				display: grid;
				place-items: center;
				top: 50%;

				span {
					width: 14px;
					height: 1px;
					background-color: var(--main-color);
					position: relative;

					&::before {
						content: "";
						position: absolute;
						transform: rotate(90deg);
						top: 0;
						left: 0;
						height: 1px;
						width: 100%;
						background-color: var(--main-color);
						transition: var(--hov-move);
					}
				}
			}
		}

		.faq-a-wrap {
			padding: 4px var(--m80-56) var(--m24-16) 96px;
			display: flex;
			gap: 40px;
			align-items: flex-start;

			.a-txt {
				font-weight: 400;
			}

			.faq-btn {
				font-size: var(--txt14-12);
				font-weight: 400;
				height: 32px;
				margin-top: 8px;
			}
		}

		&[open] {
			.faq-q-wrap {


				.faq-plus {

					span {
						&::before {
							transform: rotate(0deg);
							opacity: 0;
						}
					}
				}
			}
		}
	}
}

.entry-btn {
	margin: var(--m80-56) auto 0 auto;
	width: 278px;
}

/* スペシャルコンテンツ
* ---------------------------------- */
.sp-contents-wrap {
	gap: var(--m80-56);

	.sp-contents-col {
		flex: 1;

		.sp-contents-link {
			transition: var(--hov-move);
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: var(--m16-12);
			max-width: 700px;

			.yt-wrap {
				aspect-ratio: 25 / 12;
				width: 100%;
				background-size: cover;

				iframe {
					width: 100%;
					height: 100%;
				}

			}

			.sp-contents-img {
				aspect-ratio: 25 / 12;
				width: 100%;
				background-size: cover;
				position: relative;


				&:before {
					content: "";
					width: 100%;
					height: 100%;
					background-color: #000;
					opacity: .2;
					top: 0;
					left: 0;
					position: absolute;
					transition: var(--hov-move);
				}
			}

			h3 {
				position: relative;
				width: fit-content;
				font-size: var(--txt24-20);
				font-weight: 500;
				padding-right: 24px;
				border-bottom: 1px solid var(--bg-color);

				.icon-kunoji {
					position: absolute;
					transform: var(--kunoji);
					width: 8px;
					height: 8px;
					border-top: var(--main-color) 1px solid;
					border-right: var(--main-color) 1px solid;
					right: var(--m16-12);
					top: 48%;
				}

				.icon-kunoji,
				.icon-external {
					right: 8px;
				}
			}

			&:hover {

				.sp-contents-img {

					&:before {
						opacity: 0;
					}
				}

				h3 {
					border-bottom: 1px solid var(--main-color);

					.icon-external {
						background-image: url(../imgs/icon_external.svg);
					}
				}
			}
		}

		&:first-child {
			.sp-contents-img {
				background-image: url(../imgs/recruit/sp_contents_bg01.jpg);
			}
		}

		&:nth-child(2) {
			.sp-contents-img {
				background-image: url(../imgs/recruit/sp_contents_bg02.jpg);
			}
		}
	}
}

/* =========================================
* 座談会
* ======================================== */
.profile-wrap {
	gap: var(--m32-16);
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	.profile-col {
		display: flex;
		flex-direction: column;
		gap: var(--m16-12);

		.member-name {
			color: var(--main-color);
			font-size: var(--txt20-18);
		}
	}
}

.crosstalk-anchor-btn-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--m32-16) var(--m24-16);

	.crosstalk-anchor-btn {
		border: solid 1px #fff;
		border-image: var(--main-gd) 1;
		transition: var(--hov-move);
		display: grid;
		place-items: center;
		padding: var(--m16-12);
		position: relative;
		min-height: 135px;
		transition: var(--hov-move);

		p {
			text-align: center;
			color: #386EA4;
			font-weight: 700;
			line-height: 150%;
			transition: var(--hov-move);
		}

		&::after {
			content: "";
			position: absolute;
			transform: translateY(-50%) rotate(45deg);
			border-bottom: 1px solid var(--main-color);
			border-right: 1px solid var(--main-color);
			width: 6px;
			height: 6px;
			top: 50%;
			right: 8px;
			transition: var(--hov-move);
		}

		&:hover {
			background: var(--main-gd);

			p {
				color: #fff;
			}

			&::after {
				border-bottom: 1px solid #fff;
				border-right: 1px solid #fff;
			}
		}
	}
}

/* 座談会内容
* ---------------------------------- */
.crosstalk-midashi {
	background: var(--sub-gd);
	padding: var(--m24-16);
	padding-left: 0;
	display: flex;
	align-items: center;
	gap: var(--margin-8, 8px);
	color: #fff;
	margin-bottom: var(--m40-32);

	p {
		font-family: var(--en-txt);
		font-size: var(--txt24-20);
		line-height: 140%;
		font-weight: 400;
		clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
		background-color: var(--main-color);
		padding: .2em 1.5em .2em .5em;
		white-space: nowrap;
	}

	h2 {
		font-size: var(--txt28-20);
		font-weight: 500;
		line-height: 135%;
	}
}

.discussion-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m40-32);

	.talk-img-block {
		align-items: flex-start;
		display: flex;
		gap: var(--m40-32);

		.theme-img {
			aspect-ratio: 59 / 51;
			min-width: 44%;
			object-fit: cover;
		}

		#theme01 &,
		#theme03 & {
			flex-direction: row-reverse;
		}
	}

	.talk-block {
		display: flex;
		gap: var(--m32-16);

		.speaker-img {
			max-width: 80px;
			display: flex;
			flex-direction: column;
			align-items: center;

			img {
				min-width: var(--m80-56);
			}

			.speaker-name {
				font-size: var(--txt20-18);
				color: var(--main-color);
				font-weight: 500;
			}
		}
	}
}

.last-theme-img {
	display: block;
	margin: var(--m120-80) auto;
	aspect-ratio: 54 / 23;
	width: 100%;
	object-fit: cover;
}

/* =========================================
* 数字で見る東航エンジニアリング
* ======================================== */
.number-wrap {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--m32-16);
	margin-bottom: var(--m120-80);

	.number-col {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		background-color: #fff;
		padding: var(--m32-16) var(--m24-16);
		text-align: center;

		&.col-2 {
			grid-column: span 2;
		}

		&.col-3 {
			grid-column: span 3;
		}

		&.data-wide-col {
			.number-data-wrap {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: var(--m24-16);
			}
		}


		.number-card-title {
			font-size: var(--txt24-20);
			font-weight: 500;
			display: grid;
			place-items: center;
			min-height: 62px;

			span {
				font-size: 14px;
				font-weight: 400;
			}
		}

		.number-icon {
			width: 154px;
			height: 150px;
		}

		.data-txt {
			font-size: min(4vw, 64px);
			font-family: var(--en-txt02);
			font-weight: 400;
			line-height: 100%;
			letter-spacing: 2.56px;
			white-space: nowrap;

			.js-percent {
				font-size: min(2.8vw, 32px);
			}

			.data-small-txt {
				font-size: 26px;
			}

			.data-unit-txt {
				font-size: var(--txt24-20);
				font-weight: 500;
				letter-spacing: 0.96px;
				font-family: "Noto Sans JP", sans-serif;
			}
		}

		.number-data-wrap:has(.chart-inner) {
			display: flex;
			gap: min(0.5vw, 8px);
			justify-content: space-between;

			&.sales-wrap {
				align-items: flex-end;
			}

			.number-chart-txt-wrap {
				width: 17%;

				.number-icon {
					width: 90px;
					height: auto;
				}

				&.bottom-data-txt {
					margin-top: auto;
				}
			}


			.chart-inner {
				width: min(20vw, 262px);
				aspect-ratio: 1/1;
				margin: 0 auto;
				display: block;

				canvas {
					width: 100% !important;
					height: auto !important;
					aspect-ratio: 1/1 !important;
					margin: auto !important;
				}
			}
		}

	}
}

/* =========================================
* 募集要項
* ======================================== */
.recruit-table {
	th {
		width: 200px;
	}
}

.recruit-flow-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--m16-12);

	.recruit-flow-col {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: var(--m40-32);
			top: 0;
			background-color: var(--main-color);
			width: 1px;
			height: 100%;
		}

		&::after {
			content: "";
			position: absolute;
			left: 36px;
			bottom: 0;
			border-bottom: 1px solid var(--main-color);
			border-right: 1px solid var(--main-color);
			transform: rotate(45deg);
			width: 8px;
			height: 8px;
		}

		&:last-child {

			&::before,
			&::after {
				display: none;
			}
		}

		hgroup {
			display: flex;
			align-items: center;
			gap: var(--m16-12);
			position: relative;
			z-index: 1;

			.flow-circle {
				background-color: #fff;
				min-width: var(--m80-64);
				height: var(--m80-64);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				color: var(--main-color);

				span {
					font-size: var(--txt16-14);
					font-weight: 700;
					line-height: 120%;
				}

				p {
					font-size: var(--txt24-20);
				}
			}

			h3 {
				font-size: var(--txt28-20);
				font-weight: 500;
			}
		}

		.flow-txt {
			padding-bottom: var(--m56-40);
			margin-left: var(--m96-76);
		}
	}
}

.recruit-last-txt {
	font-size: var(--txt20-18);
	font-weight: 500;
	line-height: 170%;
	text-align: center;
}

/* =========================================
* お知らせ
* ======================================== */
.news-list-wrap {
	.news-list-col {
		a {
			gap: var(--m32-16);
			padding: var(--m32-16) var(--m24-16);
			padding-right: var(--m40-32);
			transition: var(--hov-move);
			border-bottom: var(--gray-color) 1px solid;

			time {
				color: var(--txt-gray-color);
				font-size: var(--txt14-12);
				font-weight: 400;
				letter-spacing: 0.28px;
				transition: var(--hov-move);
			}

			h2.article-title {
				font-weight: 400;
				font-size: var(--txt16-14);
				color: var(--main-color);
			}

			&:hover {
				border-bottom: 1px solid var(--main-color);

				time {
					color: var(--main-color);
				}

				.icon-kunoji {
					border-top: var(--main-color) 1px solid;
					border-right: var(--main-color) 1px solid;
				}
			}
		}

	}
}

.pagenation-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: var(--m80-56);

	li a {
		padding: .1em .3em;
		font-size: 16px;
		display: grid;
		place-items: center;
		font-weight: 700;
		color: var(--txt-gray-color);

		&.current {
			border-bottom: #000 1px solid;
			color: #000;
		}
	}

	.prev-btn,
	.next-btn {
		background: var(--main-gd);
		width: 28px;
		height: 28px;
		display: grid;
		place-items: center;
		border-radius: 100%;

		span {
			display: block;
			width: 6px;
			height: 6px;
			border-top: 1px solid #fff;
			border-right: 1px solid #fff;
		}
	}

	.prev-btn {
		margin-right: var(--m16-12);

		span {
			transform: rotate(-135deg);
		}
	}

	.next-btn {
		margin-left: var(--m16-12);

		span {
			transform: rotate(45deg);
		}
	}

	/* prevの次がcurrentなら非表示 */
	li:has(+ li .current) .prev-btn {
		display: none;
	}

	/* nextの前がcurrentなら非表示 */
	li:has(.current)+li .next-btn {
		display: none;
	}
}


/* =========================================
* 記事
* ======================================== */
#article {
	.article-title-wrap {
		flex-direction: column;
		gap: var(--m32-16);
		display: flex;

		time {
			font-size: var(--txt14-12);
			color: var(--txt-gray-color);
		}
	}
}

article.main-txt {

	/* display: flex;
	flex-direction: column;
	gap: var(--m40-32); */
	/* 代わりに子要素の間隔はmarginで管理 */
	p, h2, h3, h4, ul, ol, table, img, iframe, video {
		margin-bottom: var(--m40-32);
	}

	h2 {
		font-size: var(--txt24-20);
		font-weight: 700;
		color: var(--main-color);
		line-height: 150%;
	}

	h3 {
		line-height: 150%;
		font-size: var(--txt20-18);
		font-weight: 700;
		color: var(--main-color);
	}

	h4 {
		font-size: var(--txt18-16);
		font-weight: 700;
		line-height: 150%;
		color: var(--main-color);
	}

	ul,
	ol {
		padding-left: 1.5em;
		text-indent: -1.5em;
		list-style-position: inside;
		margin-bottom: var(--m16-8);
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}

	a {
		text-decoration: underline;
		color: var(--main-color);
	}

	p {
		margin-bottom: 1em;
		/* ← 追記 */
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	table {
		width: 100%;
		border-top: 1px solid var(--gray-color);

		thead {
			th {
				background-color: var(--gray-color);
				color: #000;
				font-weight: 400;
			}
		}

		tr {
			border-bottom: 1px var(--gray-color) solid;
		}

		th {
			color: var(--main-color);
		}

		th,
		td {
			padding: var(--m24-16);
			vertical-align: middle;
		}
	}


	iframe {
		max-width: 100%;
		margin: auto;
	}

	video {
		max-width: 100%;
		margin: auto;
	}

	.wp-block-gallery.has-nested-images {
		display: flex;
		gap: var(--m40-32);

		figure {
			flex: 1;
			margin: 0;
		}

		img {
			width: 100%;
			height: auto;
			display: block;
		}
	}

}


/* =========================================
* お問い合わせ
* ======================================== */
#contact {
	dl {
		margin-bottom: 80px;

	}

	sup {
		color: #f00;
		font-size: 10px;
	}
}

.caution-txt {
	color: #f00;
	font-size: var(--txt14-12);
}

.form-area {
	margin: var(--m56-40) auto;

	input,
	textarea {
		border-radius: 8px;
		border: 1px solid #B3B3B3;
		background: #fff;
		width: 100%;
		padding: 0.8em 1em;
	}

	input {
		height: 60px;
	}

}

.form-col {
	display: flex;
	align-items: center;
	margin-bottom: var(--m24-16);
	width: 100%;
	gap: var(--m16-12);

	dt {
		width: 20%;
		min-width: 216px;
		text-align: left;

	}

	dd {
		width: 80%;
		text-align: left;
		display: flex;
	}
}

.form-confirm .form-col dd {
	border-radius: 8px;
	background-color: #B3B3B3;
	padding: 0.8em 1em;
}

.label-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;

	label {
		cursor: pointer;
	}

}


.label-col {
	margin-right: 1em;
}


#contact button.corporate-btn p {
	margin: auto;
}

/* =========================================
* 確認画面
* ======================================== */
#contact .normal-table {
	th {
		width: 200px;
	}
}

.contact-btn-wrap {
	justify-content: center;
	align-items: center;
	gap: var(--m40-32);
	margin: var(--m96-76) auto 0 auto;
}

/* =========================================
* 個人情報保護方針
* ======================================== */
.policy-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m40-32);
	margin-top: var(--m120-80);

	.policy-col {
		background-color: #fff;
		padding: var(--m32-16);

		h2 {
			font-size: var(--txt18-16);
			font-weight: 500;
			margin-bottom: var(--m16-12);
		}
	}
}


/* =========================================
* フッター
* ======================================== */

footer {
	background-color: var(--main-color);
	padding: var(--m56-40) 0 var(--m40-32) 0;
	color: #fff;
	text-align: left;

	a {
		transition: var(--hov-move);

		&:hover {
			background: var(--sub-gd);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.footer-top {
		border-bottom: 1px solid #fff;
		padding-bottom: var(--m40-32);

		.container {
			display: flex;
			flex-direction: column;
			gap: 40px;

			.footer-logo-wrap {
				display: flex;
				gap: var(--m24-16);


				.footer-logo-link {
					width: 145px;
					display: block;

					img {
						width: 100%;
					}

				}

				.footer-logo-txt {
					p {
						font-family: var(--txt18-16);
						font-weight: 500;

						&.footer-address-txt {
							font-size: 12px;
							font-weight: 400;
						}
					}
				}
			}

			.footer-nav-wrap {
				display: flex;
				justify-content: space-between;
				gap: 8px;


				.footer-nav-col {

					.footer-nav-title {
						font-weight: 700;
						line-height: 150%;
						padding-bottom: 16px;
						display: block;
						font-size: min(1.6vw, 16px);
					}

					ul {
						a {
							font-size: min(1.5vw, 14px);
							font-weight: 400;
							padding: .2em 0;
							display: inline-block;
						}
					}

					a {
						.icon-external {
							background-image: url(../imgs/icon_external_hov.svg);
							right: -1.5em;
						}

						&:hover {
							.icon-external {
								background-image: url(../imgs/icon_external.svg);
								right: -1.5em;
							}
						}
					}
				}
			}

			.footer-bottom-link {
				ul {
					display: flex;
					gap: 32px;
					justify-content: flex-end;
					align-items: center;

					li {
						font-size: 12px;

						.normal-btn {
							width: 192px;
							height: 40px;

							p {
								font-size: 14px;
								font-weight: 400;
								font-family: "Noto Sans JP", sans-serif;
							}
						}
					}
				}
			}
		}
	}

	.footer-bottom {
		padding-top: var(--m24-16);

		.container {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			flex-wrap: wrap;
			gap: var(--m24-16);

			.certification-logo-wrap {
				display: flex;
				gap: var(--m16-12);
				align-items: center;
				font-size: 12px;
				line-height: 170%;

				img {
					width: 127px;
					display: block;
				}
			}

			p.copyright {
				font-size: 12px;
				color: var(--txt-gray-color);
			}
		}
	}
}

@media (max-width: 768px) {

	/* =========================================
* 共通パーツ
* ======================================== */


	/* 変数
* ---------------------------------- */
	:root {
		--header-height: 64px;
		--txt64-36: 36px;
		--txt44-32: 32px;
		--txt40-28: 28px;
		--txt36-24: 24px;
		--txt32-24: 24px;
		--txt28-20: 20px;
		--txt26-20: 20px;
		--txt24-20: 20px;
		--txt20-18: 18px;
		--txt18-16: 16px;
		--txt16-14: 14px;
		--txt14-12: 12px;
		--m120-80: 80px;
		--m96-76: 76px;
		--m80-64: 64px;
		--m80-56: 56px;
		--m64-48: 48px;
		--m56-40: 40px;
		--m40-32: 32px;
		--m32-24: 24px;
		--m32-16: 16px;
		--m24-16: 16px;
		--m16-12: 12px;
	}

	/* テキストまわり
* ---------------------------------- */

	h2.normal-midashi {

		&::after {
			bottom: -16px;
		}
	}

	/* 2階層目メインビジュアル
* ---------------------------------- */
	.midashi-wrap {
		aspect-ratio: auto;
		height: 240px;
	}

	/* 3階層目メインビジュアル
* ---------------------------------- */
	.tier03,
	.tier04 {
		.midashi-wrap {
			height: auto;

			.mv-img {
				aspect-ratio: none;
				min-height: 136px;
			}
		}
	}


	/* テーブル
* ---------------------------------- */
	table.normal-table {


		th,
		td {
			padding: 12px;
			display: block;
		}

		th {
			padding-bottom: 4px;
		}

		td {
			padding-top: 4px;
		}

	}

	/* =========================================
	* ヘッダー
	* ======================================== */
	header {
		height: var(--header-height);

		.header-contents {
			.top-logo {
				img {
					display: block;
					width: 100px;
				}
			}

			nav {
				flex-direction: column;
				gap: 24px;
				align-items: flex-start;
				position: fixed;
				width: 100%;
				top: var(--header-height);
				height: auto;
				font-size: 14px;
				transition: right 0.3s ease-in-out;
				right: -100%;
				padding-bottom: 24px;
				background-color: var(--main-color);
				border-top: 1px solid #fff;
				max-height: calc(100vh - var(--header-height));
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;


				&.active {
					right: 0;
				}

				.header-page-nav {
					display: block;
					width: 100%;

					&>li {
						border-bottom: 1px solid #fff;
					}

					.dropdown-menu {
						display: none;
						position: unset;
						transform: translate(0);
						padding: 0 32px 16px 56px;

						.dropdown-title {
							font-size: 12px;
							padding: 0;
							margin-right: 0;
							font-weight: 400;
							height: 40px;
							width: 100%;
							display: block;
						}

						.chilid-link-list {
							border-left: none;
							padding-left: 0;

							li {
								width: 100%;
							}

							.child-link {
								padding: 0;
								height: 40px;
								width: 100%;
								display: grid;
								place-items: center start;
							}
						}

						.has-child.active & {
							display: block;
						}
					}

					.header-link {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0;
						font-size: 14px;
						padding: 0 32px;
						height: 56px;

						.header-plus {
							width: 16px;
							height: 1px;
							background-color: #fff;
							position: relative;

							&::before {
								content: "";
								position: absolute;
								transform: rotate(90deg);
								top: 0;
								left: 0;
								height: 1px;
								width: 100%;
								background-color: #fff;
								transition: var(--hov-move);
							}

							.has-child.active &:before {
								transform: rotate(0deg);
								opacity: 0;
							}
						}
					}


				}

				a:not(.header-contact-btn, .header-sns-link) {
					transition: var(--hov-move);

					&:hover {
						background: var(--sub-gd);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				.header-sns-nav {
					gap: 24px;
					align-items: flex-start;
					padding: 0 32px;

					.header-sns-link {
						width: 32px;
						height: 32px;
					}
				}

				.header-option-link,
				.header-option-btn {
					padding: 0 32px;
					display: flex;
					align-items: center;
					gap: 24px;
					font-size: 12px;
					width: 100%;
				}

				.header-option-btn {
					gap: 16px;

					li {
						flex: 1;
					}

					.normal-btn {
						width: 100%;
						height: 40px;

						p {
							font-family: "Noto Sans JP", sans-serif;
						}
					}
				}

				.header-contact-btn-wrap {
					width: 100%;
					padding: 0 32px;

					.header-contact-btn {
						width: 100%;
						padding: 0 1em;
						font-weight: 500;
						font-size: 14px;
						height: 40px;
					}
				}
			}
		}

	}


	/* ハンバーガー
	* ---------------------------------- */

	.burger {
		display: none;
	}


	/* ハンバーガー
* ---------------------------------- */

	/* --- 3本線を囲ってる正方形を囲ってる正方形 --- */
	.burger {
		position: absolute;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--header-height);
		height: var(--header-height);
		right: 0;
		top: 0;
		z-index: 100001;
		background: var(--sub-gd);
	}

	/* --- 3本線を囲ってる正方形(widthが3本線の長さになる) --- */

	.burger-wrap {
		width: 25px;
		height: 25px;
		position: relative;
		margin: auto;
	}

	.burger {
		span {
			display: inline-block;
			transition: all 0.4s;
			height: 2px;
			width: 25px;
			background-color: #fff;
			position: absolute;

			&:nth-of-type(1) {
				top: 3px;
			}

			&:nth-of-type(2) {
				top: 11px;
			}

			&:nth-of-type(3) {
				bottom: 3px;
			}
		}

		&.active span {
			&:nth-of-type(1) {
				-webkit-transform: translateY(20px) rotate(315deg);
				transform: translateY(20px) rotate(315deg);
				top: -9px;
			}

			&:nth-of-type(2) {
				opacity: 0;
			}

			&:nth-of-type(3) {
				-webkit-transform: translateY(-20px) rotate(-315deg);
				transform: translateY(-20px) rotate(-315deg);
				bottom: -8px;
			}
		}
	}



	/* =========================================
* トップページ
* ======================================== */
	#top {
		.white-btn {
			margin: auto;
		}
	}


	/* メインビジュアル
* ---------------------------------- */

	.top-mv-wrap {
		height: 100vh;
		width: 100%;
		aspect-ratio: auto;
	}


	/* トップページのサービスセクション
* ---------------------------------- */

	section.top-service {
		padding: 80px 0;
		background: linear-gradient(to bottom, transparent 0%, transparent 100px, #242b41 300px, #242b41 100%);

		.top-service-wrap {
			.top-service-col {
				flex-direction: column;
				align-items: center;
				gap: 16px;

				.top-service-img {
					width: 100%;
					height: 200px;
				}

				.top-service-txt {
					width: var(--content-width);

					h3 {
						font-size: 24px;
					}
				}

				&:nth-child(odd) {
					.top-service-img {
						clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
					}

					.top-service-txt {
						margin-left: 0;
						margin-right: 0;
					}
				}

				&:nth-child(even) {
					flex-direction: column;

					.top-service-img {
						clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
					}

					.top-service-txt {
						margin-left: 0;
						margin-right: 0;
					}
				}

			}
		}
	}

	/* トップページの事例・実績セクション
* ---------------------------------- */
	section.top-works {
		background-size: contain;
		background-position: left 20% top -14%;
		background-size: 185%;

		&::after {
			width: 100%;
			clip-path: polygon(90% 0, 100% 0, 100% 100%, 0 100%, 0 70%);
		}

		.container {
			flex-direction: column;
		}

		.top-works-wrap {
			flex-direction: column;
			gap: 40px;
			width: 100%;
			max-width: none;

			.top-works-col {
				.top-works-img {
					aspect-ratio: 43 / 18;
				}

				width: inherit;
			}
		}
	}

	/* トップページの当社の特長セクション
* ---------------------------------- */
	section.top-benefits {
		background: var(--main-gd);
		color: #fff;

		.container {
			flex-direction: column;
		}

		.top-benefits-wrap {
			width: 100%;

			.top-benefits-list {
				padding-left: 35px;
				text-indent: -35px;
			}
		}
	}

	/* トップページのニュースセクション
* ---------------------------------- */
	section.top-news {

		.news-list-wrap {
			margin-bottom: 24px;

		}
	}


	/* トップページのお問い合わせセクション
* ---------------------------------- */
	.top-contact {

		.container {
			flex-direction: column;
			align-items: flex-start;
		}

		.normal-flex {
			width: 100%;
		}
	}

	/* =========================================
* 当社が選ばれる理由
* ======================================== */
	.feature-list-wrap {

		.feature-list-col {

			.normal-btn {
				margin: 0 auto;
			}

			.feature-img {
				width: 100%;
				height: 216px;
			}

			.feature-txt {
				width: 100%;
				gap: 8px;

				&>p {
					min-height: auto;
				}
			}
		}
	}

	/* =========================================
* 教育体制
* ======================================== */
	.training-wrap {
		gap: var(--m64-48);

		.training-col {

			.training-img {
				aspect-ratio: none;
				height: 184px;
			}
		}
	}


	.training-figure-wrap {
		overflow-x: scroll;

		img {
			min-width: 800px;
		}
	}

	.training-skill-wrap {

		ul {
			columns: 1;
			width: 250px;
		}
	}

	/* =========================================
* 品質マネジメント
* ======================================== */


	.quality-col {
		padding: 24px;
		flex-direction: column;
		align-items: flex-start;

		.quality-txt {

			p,
			dl {
				min-height: auto;
			}

			.jis-col {
				gap: 4px;

				dt {
					min-width: 72px;
				}
			}
		}

		.quality-img {
			min-width: 100%;
			max-width: none;
			aspect-ratio: 37 / 25;
		}

		.jis-img {
			min-width: 100%;
			max-width: none;
			aspect-ratio: auto;
			justify-content: center;
		}

	}


	/* =========================================
* 事業紹介
* ======================================== */
	.business-wrap {

		.business-col {

			.business-img {
				aspect-ratio: none;
				height: 240px;

			}


			p.business-txt {
				min-height: auto;
			}

			.normal-btn {
				margin: 0 auto;
			}

		}
	}


	/* =========================================
* 高度技術ソリューション
* ======================================== */
	.soutions-list-wrap {

		.solutions-list-col {

			.solutions-img {
				width: 100%;
				height: 240px;
				aspect-ratio: auto;
			}
		}
	}

	.image-bg-wrap {
		padding: 32px 24px;

		.txt-wrap {
			align-items: flex-start;
			gap: var(--m24-16);

			h2 {
				font-size: 18px;
			}

		}

		.white-btn-wrap {
			gap: 24px;
		}
	}


	/* =========================================
* 受託開発
* ======================================== */
	.contract-list-wrap {

		.contract-list-col {
			.contract-img {
				aspect-ratio: auto;
				height: 176px;
			}

			.normal-btn {
				margin: 0 auto;
			}
		}
	}

	/* =========================================
* 事例・実績
* ======================================== */
	.works-mv {
		justify-content: space-between;
		height: auto;

		.works-mv-txt {
			padding: 32px 16px;
		}

		.works-mv-img {
			width: 100%;
			max-height: 250px;
		}
	}

	.project-detail-wrap {

		.project-detail-col {
			p {
				padding-left: 15px;
			}
		}

	}

	/* =========================================
* 企業情報
* ======================================== */
	.company-list-wrap {
		display: flex;
		flex-direction: column;

		.company-list-col {
			gap: var(--m32-16);

			h3 {
				width: 100%;
			}

			.company-img {
				width: 100%;
			}

		}
	}

	/* =========================================
* 社長メッセージ・MVV
* ======================================== */

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

		.president-img {
			max-width: 240px;
		}
	}

	.mvv-col {
		flex-direction: column;
	}

	/* =========================================
* 会社概要・組織図・アクセス・沿革
* ======================================== */

	/* アンカーボタン
* ---------------------------------- */
	.anchor-wrap {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 会社概要
* ---------------------------------- */


	.company-table {
		th {
			width: 100%;
		}
	}

	/* 組織図
* ---------------------------------- */
	.organizational-img {
		overflow-x: scroll;

		img {
			min-width: 1080px;
		}
	}

	/* アクセス
* ---------------------------------- */
	.map-wrap {
		aspect-ratio: 43 / 23;
	}

	/* 沿革（年表）
* ---------------------------------- */
	.history-list-wrap {

		.history-item {
			flex-direction: column;

			dt {
				display: flex;

				.year-txt,
				.month-txt {
					padding: 8px 0;
					place-items: self-start;
					min-width: 72px;
				}

				.year-txt {
					padding-left: 12px;
				}
			}

			dd {
				padding: 0px 12px 8px 72px;
			}
		}
	}

	/* =========================================
* 人材派遣事業のマージン率
* ======================================== */
	#margin {
		.margin-table {

			th {
				width: 100%;
			}
		}

		.carrier-table-wrap {
			width: 100%;
			overflow-x: scroll;
		}

		.margin-carrier-wrap {
			table-layout: auto;

			.carrier-table {

				th,
				td {
					display: table-cell;
				}

				th {
					white-space: nowrap;
				}

				thead {
					th {

						&:first-child {
							width: 300px;
						}
					}
				}

			}

		}
	}


	/* =========================================
* 採用情報
* ======================================== */

	/* 背景画像リンク
* ---------------------------------- */
	.recruit-bg-btn-wrap {
		gap: 32px;
	}

	.recruit-bg-btn {
		padding: var(--m40-32) 24px;
		height: 120px;

		p {
			font-size: 20px;
		}
	}

	/* 採用に関するよくある質問
* ---------------------------------- */

	.faq-wrap {
		.faq-col {

			.faq-q-wrap {
				gap: 16px;
				align-items: flex-start;

				.q-txt {
					background: #000;
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.faq-a-wrap {
				padding: 0px var(--m80-56) var(--m24-16) 32px;
				gap: 16px;
			}
		}
	}

	/* スペシャルコンテンツ
* ---------------------------------- */
	.sp-contents-wrap {
		gap: var(--m80-56);

		.sp-contents-col {
			flex: 1;

			.sp-contents-link {
				transition: var(--hov-move);
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: var(--m16-12);

				.sp-contents-img {
					position: relative;
					display: grid;
					place-items: center;
					aspect-ratio: 25 / 12;
					width: 100%;
					background-size: cover;

					.icon-movie {
						position: relative;
						z-index: 1;
					}

					&:before {
						content: "";
						width: 100%;
						height: 100%;
						background-color: #000;
						opacity: .2;
						top: 0;
						left: 0;
						position: absolute;
						transition: var(--hov-move);
					}
				}

				h3 {
					position: relative;
					width: fit-content;
					font-size: var(--txt24-20);
					font-weight: 500;
					padding-right: 24px;
					border-bottom: 1px solid var(--bg-color);

					.icon-kunoji,
					.icon-external {
						right: 8px;
					}
				}

				&:hover {
					.sp-contents-img {

						&:before {
							opacity: 0;
						}
					}

					h3 {
						border-bottom: 1px solid var(--main-color);

						.icon-kunoji {
							border-top: 1px solid var(--main-color);
							border-right: 1px solid var(--main-color);
						}

						.icon-external {
							background-image: url(../imgs/icon_external.svg);
						}
					}
				}
			}

			&:first-child {
				.sp-contents-img {
					background-image: url(../imgs/recruit/sp_contents_bg01.jpg);
				}
			}

			&:nth-child(2) {
				.sp-contents-img {
					background-image: url(../imgs/recruit/sp_contents_bg02.jpg);
				}
			}
		}
	}

	/* =========================================
* 座談会
* ======================================== */
	/* SP用メディアクエリ内（既存の記述を置き換え） */
	#crosstalk .mv-img {
		object-position: center 0px;
	}

	.profile-wrap {
		grid-template-columns: repeat(2, 1fr);
	}

	.crosstalk-anchor-btn-wrap {

		.crosstalk-anchor-btn {
			min-height: auto;
			padding: 16px;
		}
	}

	/* 座談会内容
* ---------------------------------- */
	.crosstalk-midashi {
		flex-direction: column;
		align-items: flex-start;

		p {
			font-size: 16px;
			padding-left: 16px;
		}

		h2 {
			font-size: 18px;
			line-height: 150%;
			padding-left: 16px;
		}
	}

	.discussion-wrap {

		.talk-img-block {
			flex-direction: column;

			.theme-img {
				aspect-ratio: none;
				width: 100%;
				height: 240px;
			}

			#theme01 &,
			#theme03 & {
				flex-direction: column;
			}
		}

		.talk-block {
			flex-direction: column;

			.speaker-img {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8px;
			}
		}
	}

	.last-theme-img {
		margin: 56px auto;
		aspect-ratio: none;
		height: 240px;
	}

	/* =========================================
* 数字で見る東航エンジニアリング
* ======================================== */
	.number-wrap {
		grid-template-columns: repeat(1, 1fr);

		.number-col {
			width: 100%;

			&.col-2 {
				grid-column: auto;
			}

			&.col-3 {
				grid-column: auto;
			}

			.number-data-wrap {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0;
			}


			.number-card-title {
				min-height: auto;
				margin-bottom: 8px;

				span {
					font-size: 12px;
				}
			}

			.number-icon {
				width: 112px;
				height: auto;
			}

			.data-txt {
				font-size: 44px;

				.js-percent {
					font-size: 24px;
				}

				.data-small-txt {
					font-size: 20px;
				}

				.data-unit-txt {
					font-size: 20px;
				}
			}

			.number-data-wrap:has(.chart-inner) {

				.number-chart-txt-wrap {
					width: 19%;

					.number-icon {
						width: 64px;
					}

				}


				.chart-inner {
					width: 160px;
					height: 160px;
				}
			}

		}
	}

	/* =========================================
* 募集要項
* ======================================== */
	.recruit-table {
		th {
			width: 100%;
		}
	}

	.recruit-flow-wrap {

		.recruit-flow-col {

			&::after {
				left: 28px;
			}
		}
	}


	/* =========================================
* お知らせ
* ======================================== */
	.news-list-wrap {
		.news-list-col {
			a {
				gap: 8px;
			}

		}
	}



	/* =========================================
* 記事
* ======================================== */


	article.main-txt {

		table {


			th,
			td {
				padding: 12px;
				display: block;
			}

			th {
				padding-bottom: 4px;
			}

			td {
				padding-top: 4px;
			}

		}



		.wp-block-gallery.has-nested-images {
			flex-direction: column;
		}

	}

	/* =========================================
* お問い合わせ
* ======================================== */

	.form-col {
		flex-direction: column;

		dt {
			width: 100%;
			min-width: 100%;
		}

		dd {
			width: 100%;
		}

	}


	/* =========================================
* フッター
* ======================================== */

	footer {

		.footer-top {

			.container {

				.footer-logo-wrap {
					flex-direction: column;


					.footer-logo-link {
						width: 104px;
					}
				}
			}
		}

		.footer-bottom {

			.container {

				.certification-logo-wrap {
					font-size: 10px;

					img {
						width: 102px;
					}
				}

				p.copyright {
					font-size: 10px;
				}
			}
		}
	}
}