@charset "utf-8";

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

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

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

main#top {
	margin-top: 0;
	padding-top: var(--header-height);
	background-color: var(--main-bg);
}

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

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


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


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

.container {
	width: 1080px;
	max-width: 92%;
	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;
}


/* フレックス関連
* ---------------------------------- */
.flex {
	display: -ms-flexbox;
	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) {
	.sp_flclear {
		display: block;
	}

	.sp_flex {
		display: flex;
	}
}



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

/* 変数
* ---------------------------------- */
:root {
	--main-color: #66C513;
	--sub-color: #4BC0D2;
	--gray-color: #2B4255;
	--main-bg: #F7FADD;
	--en-txt: "Poppins", sans-serif;
	--header-height: 80px;
	--kunoji: rotate(45deg) translateY(-50%);
	--hov-move: all .4s;
	--w50-100: 50%;
	--txt64-45: 64px;
	--txt56-36: 56px;
	--txt48-32: 48px;
	--txt32-24: 32px;
	--txt24-20: 24px;
	--txt20-18: 20px;
	--txt18-16: 18px;
	--txt16-14: 16px;
	--txt14-13: 14px;
	--m80-56: 80px;
	--m56-40: 56px;
	--m40-32: 40px;
	--m32-24: 32px;
	--m24-16: 24px;
	--m16-8: 16px;
}

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

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



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

.bread-list {
	display: flex;
	font-size: 12px;
	font-weight: 700;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

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

.bread-list li a {
	text-decoration: underline;
}

.bread-list li::before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 1px var(--gray-color);
	border-right: solid 1px var(--gray-color);
	top: 50%;
	left: -24px;
	transform: var(--kunoji);
}

.bread-list li:first-child {
	margin-left: 0;
}

.bread-list li:first-child::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.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

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

h1 {
	font-size: var(--txt20-18);
	color: var(--gray-color);
	font-weight: 700;
	text-align: left;

	&::before {
		content: attr(data-en);
		display: block;
		font-family: var(--en-txt);
		color: var(--sub-color);
		line-height: 130%;
		letter-spacing: 1.28px;
		font-weight: 700;
		font-size: var(--txt64-45);
		max-width: 500px;
	}
}

.tier03 h1 {
	padding: var(--m56-40) 0 var(--m32-24) 0;

	&::before {
		font-size: var(--txt56-36);
		max-width: none;
	}
}


h2 {
	font-size: var(--txt18-16);
	color: var(--gray-color);
	font-weight: 700;
	text-align: left;
	margin-bottom: var(--m32-24);

	&::before {
		content: attr(data-en);
		display: block;
		font-family: var(--en-txt);
		color: var(--main-color);
		line-height: 130%;
		letter-spacing: 2.4px;
		font-weight: 700;
		font-size: var(--txt48-32);
	}

	#top & {
		font-size: var(--txt20-18);

		&::before {
			color: var(--sub-color);
			font-size: var(--txt56-36);
		}
	}
}

h3 {
	text-align: center;
	font-weight: 700;
	line-height: 150%;
	margin-bottom: var(--m16-8);
	font-size: var(--txt24-20);
}

h4 {
	text-align: center;
	font-weight: 700;
	line-height: 150%;
	margin-bottom: var(--m16-8);
	font-size: var(--txt18-16);
}

/* 見出し
* ---------------------------------- */
.tier02 .mv-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.mv-illustration {
		width: min(30vw, 360px);
	}

}

/* リンクアイコン
* ---------------------------------- */
.icon-wrap {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	transition: var(--hov-move);
	background-repeat: no-repeat;
	background-size: contain;

	&.arrow-down-green {
		background-image: url(../imgs/icon_down_green.svg);

		a:hover & {
			background-image: url(../imgs/icon_down_gray.svg);
			transition: var(--hov-move);
		}
	}

	&.arrow-down-blue {
		background-image: url(../imgs/icon_down_blue.svg);

		a:hover & {
			background-image: url(../imgs/icon_down_gray.svg);
			transition: var(--hov-move);
		}
	}

	&.arrow-right-green {
		background-image: url(../imgs/icon_right_green.svg);

		a:hover & {
			background-image: url(../imgs/icon_right_gray.svg);
			transition: var(--hov-move);
		}
	}

	&.arrow-right-blue {
		background-image: url(../imgs/icon_right_blue.svg);

		a:hover & {
			background-image: url(../imgs/icon_right_gray.svg);
			transition: var(--hov-move);
		}
	}


	&.arrow-right-white {
		background-image: url(../imgs/icon_right_white.svg);
	}

	&.arrow-left-white {
		background-image: url(../imgs/icon_left_white.svg);
	}

	&.arrow-right-gray {
		background-image: url(../imgs/icon_right_gray.svg);
	}

	&.external-white {
		background-image: url(../imgs/icon_external_white.png);
	}

	&.external-green {
		background-image: url(../imgs/icon_external_green.png);

		a:hover & {
			background-image: url(../imgs/icon_external_gray.png);
			transition: var(--hov-move);
		}
	}


}


/* ボタン
* ---------------------------------- */

/* --- View Moreのボタン --- */
.viewmore-btn {
	font-family: var(--en-txt);
	font-size: var(--txt18-16);
	color: var(--main-color);
	font-weight: 700;
	display: flex;
	gap: var(--m16-8);
	align-items: center;
	letter-spacing: 0.9px;
	transition: var(--hov-move);
	width: 170px;
	min-width: 170px;

	.link-circle {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: var(--main-color);
		display: grid;
		place-items: center;
		transition: var(--hov-move);
	}

	&:hover {
		color: var(--gray-color);

		.link-circle {
			background-color: var(--gray-color);
			transition: var(--hov-move);
		}
	}
}

/* --- ベタのボタン --- */
.green-btn {
	background-color: var(--main-color);
}

.blue-btn {
	background-color: var(--sub-color);
}

.green-btn,
.blue-btn {
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .8em 1.3em;
	width: 90%;
	border-radius: var(--m16-8);
	transition: var(--hov-move);

	&:hover {
		background-color: var(--gray-color);
		transition: var(--hov-move);
	}

	&.medium-btn {
		max-width: 295px;
	}

	&.long-btn {
		max-width: 500px;
		width: 100%;
	}
}


/* --- ボーダーのボタン --- */
.green-line-btn {
	color: var(--main-color);
	border: 2px var(--main-color) solid;
}

.blue-line-btn {
	color: var(--sub-color);
	border: 2px var(--sub-color) solid;
}

.green-line-btn,
.blue-line-btn {
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .8em 1.3em;
	width: 90%;
	border-radius: var(--m16-8);
	transition: var(--hov-move);

	&:hover {
		border: solid 2px var(--gray-color);
		color: var(--gray-color);
		transition: var(--hov-move);
	}

	&.medium-btn {
		max-width: 295px;
	}

	&.long-btn {
		max-width: 500px;
	}
}


.center-btn-wrap {
	display: block;

	a {
		margin: var(--m56-40) auto 0 auto;
	}
}



/* アンカーリンク
* ---------------------------------- */
.anchor-wrap {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--m16-8);

	.anchor-btn {
		font-size: min(1.6vw, 16px);
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .8em 1.3em;
		border-radius: var(--m16-8);
		transition: var(--hov-move);
		color: var(--main-color);
		border: 2px var(--main-color) solid;

		&:hover {
			border: solid 2px var(--gray-color);
			color: var(--gray-color);
			transition: var(--hov-move);
		}
	}
}

/* =========================================
* ヘッダー
* ======================================== */
header.main-bg {
	background-color: transparent;
}

header {
	transition: var(--hov-move);
	background-color: #fff;
	height: var(--header-height);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	z-index: 10000;
	padding: 0 16px;

	.top-logo {
		width: 23%;
		max-width: 290px;
		display: grid;
		place-items: center;
	}

	.header-contents {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: min(1.3vw, 16px);

		nav.sp_none {
			display: flex;
			align-items: center;
			width: 75%;
			justify-content: flex-end;
			gap: 2%;
			max-width: 1000px;

			&>ul {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 60%;

				li {
					height: 100%;
					cursor: pointer;
					transition: var(--hov-move);
					font-weight: 500;

					p,
					a {
						height: 100%;
						padding: 0 .6em;
					}

					&.has-child {
						p {
							position: relative;

							&::after {
								content: "";
								position: absolute;
								width: 7px;
								height: 7px;
								border-right: var(--main-color) 2px solid;
								border-bottom: 2px solid var(--main-color);
								transform: translateY(-50%) rotate(45deg);
								top: 40%;
								right: -.5em;
								display: inline-block;
								transition: var(--hov-move);
							}
						}

						.child-list {
							display: none;
						}

						&.active {
							p {
								color: var(--main-color);

								&::after {
									transform: translateY(-50%) rotate(-135deg);
									top: 50%;
									transition: var(--hov-move);
								}
							}

							.child-list {
								display: block;
								position: absolute;
								top: 96px;
								border-radius: 16px;
								background: #FFF;
								box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
								padding: 16px 24px;

								li:nth-child(n+2) {
									margin-left: 1em;
								}

								li a {
									display: flex;
									padding: .5em 0;
									align-items: center;

									.icon-wrap {

										&.arrow-right-green {
											background-image: url(../imgs/icon_right_green.svg);

											a:hover & {
												background-image: url(../imgs/icon_right_green.svg);
												transition: var(--hov-move);
											}
										}
									}
								}
							}
						}
					}

					&:hover {

						&>a,
						&>p {
							color: var(--main-color);
							transition: var(--hov-move);
						}

					}
				}
			}

			.header-btn-wrap {
				display: flex;
				align-items: center;
				gap: 8px;

				.green-btn,
				.blue-btn {
					padding: .6em 1.3em;
					border-radius: 8px;
				}
			}
		}
	}
}


/* =========================================
* トップページ
* ======================================== */
#top section:nth-child(odd) {
	background-color: #fff;
}

/* メインビジュアル
* ---------------------------------- */
.top-mv-wrap {
	aspect-ratio: 64 / 31;
	width: 100%;
	position: relative;
	background-color: var(--main-bg);
	padding-top: var(--header-height);

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		vertical-align: bottom;
		object-position: bottom;
	}

	hgroup {
		position: absolute;
		transform: translateX(-50%);
		left: 50%;
		top: 12%;
		font-weight: 700;
		width: 92%;
		margin: auto;

		h1 {
			font-size: var(--txt48-32);
			margin-bottom: 16px;
			text-align: center;
			line-height: 140%;
		}

		p {
			font-size: var(--txt20-18);
			text-align: center;
		}
	}
}

/* 会社を知る
* ---------------------------------- */
.top-btn-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--m24-16);
	margin: var(--m24-16) 0 var(--m80-56) 0;

	.top-btn-col {
		display: block;
		min-height: 180px;
		border-radius: var(--m16-8);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		padding: var(--m32-24) var(--m24-16);
		position: relative;
		overflow: hidden;

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

		&:hover::after {
			opacity: 0;
			transition: var(--hov-move);
		}



		.link-circle {
			width: 48px;
			height: 48px;
			background-color: #fff;
			border-radius: 50%;
			display: grid;
			place-items: center;
			position: absolute;
			right: 10px;
			bottom: 10px;
			transition: var(--hov-move);
			z-index: 10;
		}

		&:hover .link-circle {
			background-color: var(--main-color);
			transition: var(--hov-move);

			.arrow-right-gray {
				background-image: url(../imgs/icon_right_white.svg);
			}
		}

		.top-btn-container {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;

			p {
				font-size: var(--txt20-18);
				font-weight: 700;
				color: #fff;
				text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

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


		&:first-child {
			background-image: url(../imgs/top_img_btn_bg01.webp);
		}

		&:nth-child(2) {
			background-image: url(../imgs/top_img_btn_bg02.webp);
		}

		&:nth-child(3) {
			background-image: url(../imgs/top_img_btn_bg03.webp);
		}

		&:last-child {
			background-image: url(../imgs/top_img_btn_bg04.webp);
		}
	}
}

/* --- 数字で見るポバール工業（トップページ） --- */
h3.top-data-title {
	font-size: var(--txt32-24);
	margin-bottom: var(--m24-16);
}

.top-data-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;

	.top-data-txt {
		width: 47%;
		text-align: left;

		h4 {
			font-size: var(--txt24-20);
			text-align: left;
		}

		p {
			margin-bottom: var(--m32-24);
		}
	}

	.top-data-img {
		width: 47%;
		max-width: 510px;
	}
}

/* 仕事を知る(トップページ)
* ---------------------------------- */
.top-job-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.top-job-img {
		max-width: 392px;
		width: 36%;
	}

	.top-job-contents {
		width: 59%;

		.top-job-link {
			display: flex;
			justify-content: space-between;
			margin-top: var(--m56-40);
			gap: 16px;

			.top-job-list {
				width: 70%;

				li {
					border-bottom: 1px solid var(--gray-color);
					transition: var(--hov-move);

					a {
						display: flex;
						align-items: center;
						padding: 8px var(--m16-8);

						h3 {
							margin-bottom: 0;
							display: flex;
							align-items: center;
							margin-right: 8px;
							transition: var(--hov-move);

							span {
								font-size: .7em;
								margin-right: .7em;
							}
						}

					}

					&:hover {
						border-bottom: 1px solid var(--sub-color);
						transition: var(--hov-move);

						h3 {
							color: var(--sub-color);
							transition: var(--hov-move);
						}

						.arrow-right-gray {
							background-image: url(../imgs/icon_right_blue.svg);
						}
					}
				}
			}
		}
	}
}

/* 働く環境を知る（トップページ）
* ---------------------------------- */
.top-workstyle-img {
	aspect-ratio: 27 / 8;
	border-radius: var(--m16-8);
	object-fit: cover;
	margin-bottom: var(--m32-24);
}

.top-workstyle-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--m40-32);

	.top-workstyle-col {
		h4 {
			text-align: left;
			margin-bottom: 8px;
		}

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

/* よくある質問（トップページ）
* ---------------------------------- */
.top-faq-wrap {
	display: flex;
	justify-content: center;
	gap: 5%;

	.top-faq-img {
		max-width: 400px;
		width: 37%;
	}

	.top-faq-txt {
		width: 480px;

		a {
			margin-bottom: var(--m16-8);
		}
	}
}

/* 募集要項・エントリー（トップページ）
* ---------------------------------- */
.top-entry-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;

	.top-entry-img {
		max-width: 400px;
		width: 37%;
	}

	.top-entry-txt {
		h3 {
			font-size: var(--txt20-18);
			text-align: left;
			margin-bottom: 8px;
			margin-top: var(--m16-8);
		}

		.top-entry-btn {
			display: flex;
			gap: 16px;
		}
	}
}

/* =========================================
* 会社を知る
* ======================================== */


/* トップメッセージ
* ---------------------------------- */
.president-img,
.company-img,
.person-img {
	border-radius: 16px;
	height: 320px;
	width: 100%;
	object-fit: cover;
	object-position: top;
	margin-bottom: var(--m32-24);
}

.company-img {
	object-position: 50% -50px;
}

.person-img {
	object-position: 50% -50px;
}

/* 事業内容
* ---------------------------------- */

/* --- ポバールの作るもの --- */
.products-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: var(--m80-56);
}

.products-col {
	background-color: var(--main-bg);
	border-radius: 16px;
	padding: var(--m24-16);
	text-align: center;

	h4 {
		margin-top: var(--m16-8);
	}
}

/* --- 製造現場の裏側で私たちの製品が動いています --- */
.company-figure {
	display: block;
	margin: 8px 0px var(--m80-56) 0px;
}

/* --- ポバールの3つの特徴 --- */
.features-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;

	.features-col {
		border-radius: var(--m16-8);
		background-color: var(--main-bg);
		overflow: clip;

		.features-txt {
			margin: var(--m24-16);
		}
	}
}


/* ミッション・ビジョン・バリュー
* ---------------------------------- */
.philosophy-col {
	border-bottom: 1px solid var(--gray-color);
	padding: var(--m24-16) 0;

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

	dt {
		text-align: center;
		padding-bottom: var(--m16-8);

		h3 {
			font-family: var(--en-txt);
			margin-bottom: var(--m16-8);
			font-size: var(--txt32-24);
		}

		p {
			font-size: var(--txt20-18);
			font-weight: 700;
		}
	}

	dd p {
		max-width: 800px;
		display: block;
		margin: auto;
	}

	dd ul {
		max-width: 400px;
		display: block;
		margin: auto;
	}
}

/* 求める人材
* ---------------------------------- */
.person-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--m16-8);
	margin-top: var(--m32-24);

	.person-col {
		background-color: var(--main-bg);
		padding: var(--m16-8) 1em;
		text-align: center;
		font-weight: 700;
		border-radius: 8px;
	}
}

/* 数字で見るポバール工業（詳しくはこちら）
* ---------------------------------- */
.company-data-wrap {
	padding: var(--m40-32) var(--m24-16);
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--main-color);

	.company-data-txt {
		text-align: center;
		width: 42%;

		.green-btn {
			max-width: 212px;
			margin: auto;
		}
	}

	.company-data-img {
		max-width: 572px;
		width: 56%;
	}
}

/* =========================================
* 数字で見るポバール工業
* ======================================== */
#data .container {
	text-align: center;

	h4 {
		margin-bottom: 0;
	}
}

.note-txt {
	font-size: var(--txt14-13);
	margin-top: var(--m16-8);
}

.data-icon {
	vertical-align: middle;
	display: inline-block;
	aspect-ratio: 1/1;
	object-fit: contain;
	width: min(8vw, 80px);
}

.data-main {
	margin: 0 auto var(--m40-32) auto;
	display: block;
	max-width: 92%;
}

.data-col {
	background-color: var(--main-bg);
	padding: var(--m24-16);
	text-align: center;
	border-radius: var(--m16-8);

	h3 {
		margin-bottom: 16px;
	}
}

.data-wrap {
	margin: var(--m24-16) 0 var(--m16-8) 0;
	display: block;

	.data-txt {
		font-weight: 700;
		font-size: min(5.5vw, 64px);
		color: var(--sub-color);
		display: inline-table;

		span.unit-txt {
			font-size: .4em;
		}
	}
}

/* 会社の規模・実績
* ---------------------------------- */
.history-data-wrap {
	margin-top: var(--m40-32);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--m24-16);
}

/* 社員データ
* ---------------------------------- */
.employee-data-wrap,
.benefits-data-wrap {
	margin-top: var(--m40-32);

	.top-wrap {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--m24-16);
		margin-bottom: var(--m24-16);
	}

	.bottom-wrap {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--m24-16);
	}
}

/* --- 円グラフに関するスタイル --- */
.chart-wrap {
	position: relative;
	max-width: 300px;
	margin: var(--m24-16) auto;

	.chart-l-icon,
	.chart-r-icon {
		position: absolute;
		bottom: 0;
		height: min(5vw, 60px);
	}

	.chart-l-icon {
		left: 0;
	}

	.chart-r-icon {
		right: 0;
	}
}

.donut-chart {
	position: relative;
	aspect-ratio: 1/1;
	width: 95%;
	height: 95%;
	border-radius: 50%;
	margin: auto;

	.gender-chart & {
		/* ↓ この行を変更します */
		background: conic-gradient(var(--main-bg) 0% 0.5%, var(--sub-color) 0.5% 27.5%,
				var(--main-bg) 27.5% 28.5%,
				var(--main-color) 28.5% 99.5%, var(--main-bg) 99.5% 100%);
	}

	.career-chart & {
		/* ↓ この行を変更します */
		background: conic-gradient(var(--main-bg) 0% 0.5%, var(--sub-color) 0.5% 72.5%,
				var(--main-bg) 72.5% 73.5%,
				var(--main-color) 73.5% 99.5%, var(--main-bg) 99.5% 100%);
	}

	.chart-txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		display: flex;

		#data & h4 {
			margin-bottom: var(--m16-8);
		}

		.data-txt {
			font-size: min(5vw, 64px);
		}

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

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: 90%;
		background-color: var(--main-bg);
		border-radius: 50%;
	}
}

/* --- 棒グラフに関するスタイル --- */
.bar-graph-wrap {
	height: 185px;
	display: grid;
	width: 100%;

	.data-txt {
		font-size: min(3vw, 32px);
		color: var(--gray-color);
		margin-bottom: 4px;
	}

	dl {
		display: flex;
		width: 100%;
		justify-content: space-around;


		div {
			display: flex;
			flex-direction: column-reverse;

			dt {
				font-weight: 700;
				font-size: min(1vw, 16px);
				line-height: normal;
				height: 1.5em;
				position: relative;
				padding: .5em 0;

				&::after {
					content: "";
					height: 1px;
					width: 120%;
					background-color: var(--gray-color);
					position: absolute;
					bottom: min(1.5vw, 23px);
					display: inline-block;
					left: 50%;
					transform: translateX(-50%);
				}

				/* --- 勤続年数の下線の長さ --- */
				.years-graph &::after {
					width: 140%;
				}

				/* --- 月平均残業時間の下線の長さ --- */
				.month-graph & {
					line-height: 1em;

					&::after {
						width: 190%;
					}
				}
			}

			dd {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: end;


				.bar {
					background-color: var(--sub-color);
					display: inline-block;
					width: 15px;

					/* --- 平均年齢の数値 --- */
					.bar-data-01 & {
						height: calc((13 / 40) * 100%);
					}

					.bar-data-02 & {
						height: calc((23 / 40) * 100%);
					}

					.bar-data-03 & {
						height: calc((26 / 40) * 100%);
					}

					.bar-data-04 & {
						height: calc((34 / 40) * 100%);
					}

					/* --- 勤続年数の数値 --- */
					.bar-data-05 & {
						height: calc((4 / 40) * 100%);
					}

					.bar-data-06 & {
						height: calc((23 / 60) * 100%);
					}

					.bar-data-07 & {
						height: calc((17 / 60) * 100%);
					}

					.bar-data-08 & {
						height: calc((8 / 60) * 100%);
					}

					.bar-data-09 & {
						height: calc((57 / 60) * 100%);
					}

					/* --- 月平均残業時間の数値 --- */
					.bar-data-10 & {
						height: calc((3.6 / 5.5) * 100%);
					}

					.bar-data-11 & {
						height: calc((3.0 / 5.5) * 100%);
					}

					.bar-data-12 & {
						height: calc((3.0 / 5.5) * 100%);
					}

					.bar-data-13 & {
						height: calc((2.9 / 5.5) * 100%);
					}

					.bar-data-14 & {
						height: calc((3.5 / 5.5) * 100%);
					}

					.bar-data-15 & {
						height: calc((4.4 / 5.5) * 100%);
					}

					.bar-data-16 & {
						height: calc((3.1 / 5.5) * 100%);
					}

					.bar-data-17 & {
						height: calc((4.2 / 5.5) * 100%);
					}

					.bar-data-18 & {
						height: calc((3.3 / 5.5) * 100%);
					}

					.bar-data-19 & {
						height: calc((1.8 / 5.5) * 100%);
					}

					.bar-data-20 & {
						height: calc((2.5 / 5.5) * 100%);
					}

					.bar-data-21 & {
						height: calc((2.5 / 5.5) * 100%);
					}
				}
			}

		}
	}

	/* --- 月平均残業時間のグラフの高さ --- */
	&.month-graph {
		height: 155px;

		.data-txt {
			font-size: 18px;
		}
	}
}

.data-wrap:has(.years-graph) {
	width: 60%;
}

.data-wrap:has(.month-graph) {
	width: 63%;
}

.overtime-col+.flex+div {
	width: 36%;

}

.graph-height {
	height: 160px;
	gap: 8px;
}

.data-list {
	background-color: #fff;
	padding: var(--m16-8) var(--m24-16);
	margin-top: 16px;

	p {
		font-weight: 700;
	}

	ul.normal-list {
		font-size: var(--txt14-13);
		text-align: justify;
		column-count: 2;
		width: fit-content;
		column-gap: 2.8em;
		margin: 8px auto 0 auto;
		line-height: 1.5em;
	}
}




/* 業界・製品の幅
* ---------------------------------- */
.products-data-wrap {
	margin-top: var(--m40-32);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: var(--m24-16);


	.flex {
		gap: 2%;
	}
}

/* =========================================
* 仕事を知る
* ======================================== */

/* ページ全体共通
* ---------------------------------- */
.job-wrap {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--m32-24);
	margin-bottom: var(--m32-24);

	.job-img {
		width: 39%;
		border-radius: var(--m16-8);
	}

	.job-txt {
		width: calc(100% - 32px - 39%);
		text-align: justify;

		h3 {
			text-align: left;
			border-bottom: 1px solid var(--gray-color);
			padding: 8px var(--m16-8);

			span {
				font-size: 0.7em;
				vertical-align: bottom;
			}
		}
	}
}

.career-path-wrap {
	background-color: var(--main-bg);

	.career-path-title {
		padding: var(--m24-16) var(--m32-24);
		position: relative;
	}

	h4 {
		margin-bottom: 0;
		text-align: left;
	}

	.career-path-detail {
		background-color: #fff;
		padding: var(--m40-32) var(--m32-24);
		border: solid 3px var(--main-bg);
		text-align: center;

		.career-path-col {
			text-align: justify;
			position: relative;
			margin-bottom: var(--m56-40);

			&::after {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-right: 25px solid transparent;
				border-left: 25px solid transparent;
				border-top: 17px solid #d9d9d9;
				border-bottom: 0;
				transform: translateX(-50%);
				left: 50%;
				bottom: -32px;
				position: absolute;
			}

			&:last-child {
				margin-bottom: 0;

				&::after {
					display: none;
				}
			}

			h4 {
				text-align: center;
				margin-bottom: var(--m16-8);
			}
		}
	}
}

/* =========================================
* 人を知る
* ======================================== */

/* 人物リスト（共通）
* ---------------------------------- */
.people-wrap {
	margin: var(--m40-32) auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	gap: 1.5%;

	.people-col {
		max-width: 240px;
		transition: var(--hov-move);

		.people-thumb {
			border-radius: var(--m16-8);
			object-fit: cover;
			aspect-ratio: 1/1;
		}

		hgroup {
			display: flex;
			align-items: center;
			gap: 8px;
			border-bottom: 1px solid var(--gray-color);
			padding: 8px;

			p {
				font-weight: 700;
				padding: 4px;
			}

			h3 {
				margin-bottom: 0;
				font-size: min(2.8vw, 24px);
			}
		}


		&:hover {
			opacity: .7;
			transition: var(--hov-move);
		}
	}


	.tier03 & {
		display: flex;
		justify-content: center;
		gap: 32px;

		.people-col {
			width: 30%;
		}
	}
}

.name-txt {
	font-size: var(--txt24-20);
	font-weight: 700;
	margin-top: 8px;

	span {
		font-size: var(--txt18-16);
	}
}

.year-txt,
.educational-bg {
	font-size: var(--FontSize-16, 16px);
	font-weight: 700;
}

.people-comment {
	margin-top: 8px;
}


/* =========================================
* 人を知る（詳細）
* ======================================== */
.people-main {
	aspect-ratio: 32 / 11;
	object-fit: cover;
	vertical-align: bottom;
}

section.people-details {
	padding-top: 0px;
	margin-top: -32px;
}

.people-info {
	text-align: center;

	h3 {
		background-color: var(--main-bg);
		border-radius: var(--m16-8);
		padding: var(--m16-8);
		width: 400px;
		margin: 0 auto var(--m32-24) auto;
	}
}

.interview-wrap .img-wrap {
	display: flex;
	justify-content: space-between;
	gap: var(--m40-32);
	align-items: flex-start;
	flex-direction: row-reverse;

	.people-img {
		border-radius: var(--m16-8);
		object-fit: cover;
		width: var(--w50-100);
	}

	&>div {
		width: var(--w50-100);
	}

	&>.interview-col {
		width: var(--w50-100);
	}
}

.interview-col {
	margin-bottom: var(--m40-32);

	.q-box,
	.a-box {
		padding: 0;
		margin-bottom: 16px;

		.faq-icon {
			color: var(--main-color);
		}

		p {
			padding-right: 0;
		}
	}
}

.a-box a {
	display: inline-block;
	border-bottom: 0.5px solid #2B4255;
}

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

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

		th {
			color: var(--sub-color);
			padding: var(--m24-16);
			text-align: right;
			width: 15%;
		}

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

		&:nth-child(odd) {
			background-color: var(--main-bg);
		}

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

.people-list-wrap {
	background-color: var(--main-bg);

	.people-wrap {
		margin-top: 0;
	}

	.green-btn p {
		margin: auto;
	}
}

/* 数字の先にある、ポバールの姿
* ---------------------------------- */
.to-recruit-btn {
	text-align: center;
	margin-top: var(--m40-32);

	a {
		margin: 8px auto var(--m32-24) auto;
	}
}

/* =========================================
* 働く環境を知る
* ======================================== */

/* アンカーリンクリンク（3カラム）
* ---------------------------------- */
#workstyle .anchor-wrap {
	grid-template-columns: repeat(3, 1fr);
}

/* 福利厚生
* ---------------------------------- */

.benefits-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--m24-16);
	margin: var(--m40-32) auto var(--m24-16) auto;

}

.workstyle-col {
	background-color: var(--main-bg);
	padding: var(--m32-24);
	border-radius: var(--m16-8);
	text-align: center;

	p {
		text-align: justify;
		min-height: 5em;
		margin-bottom: var(--m16-8);
	}

	ul.normal-list {
		text-align: justify;
	}

	&.single-col {
		max-width: 640px;
		margin: auto;
	}
}

/* 働き方
* ---------------------------------- */

.style-wrap {
	display: grid;
	margin: var(--m40-32) auto;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--m24-16);

	.workstyle-img-wrap img {
		position: relative;
		top: -8px;
	}
}

.white-fukidashi {
	background-color: #fff;
	border: 2px solid var(--main-bg);
	position: relative;
	z-index: 1;
	font-size: 14px;
	border-radius: 64px;
	display: grid;
	place-items: center;
	max-width: 340px;
	padding: var(--m16-8) var(--m40-32);

	p {
		min-height: auto;
		margin-bottom: 0;
		text-align: center;
	}

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		border-style: solid;
		border-width: 20px 15px 0 15px;
		border-color: #fff transparent transparent;
		translate: -50% 100%;
	}
}

.case-wrap {
	margin-top: var(--m40-32);

	hgroup {
		margin-top: var(--m24-16);
		font-weight: 700;
		display: inline-block;
		position: relative;

		h3 {
			font-size: var(--txt20-18);
		}

		&::before,
		&::after {
			content: "";
			width: 1px;
			height: 1.5em;
			background-color: var(--gray-color);
			position: absolute;
			bottom: 16px;
			transform: rotate(-35deg);
		}

		&::before {
			transform: rotate(-35deg);
			left: -1em;
		}

		&::after {
			transform: rotate(35deg);
			right: -1em;
		}
	}

	.case-col {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: var(--m24-16);

		.schedule-table {
			th {
				width: 155px;
				text-align: left;
			}

			td {
				padding-left: 0;
			}
		}

		.white-fukidashi {
			display: inline-block;
			padding: var(--m16-8) var(--m40-32);
		}

		.case-img {
			position: relative;
			height: 400px;

			.style-case-img {
				height: 276px;
				border-radius: var(--m16-8);
				object-fit: cover;
				width: 100%;
				position: relative;
				top: -64px;
			}

			.case-illust {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
	}
}

.workstyle-img {
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

/* キャリア形成支援
* ---------------------------------- */
.support-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--m24-16);
	margin-top: var(--txt24-20);

	.workstyle-col {
		border-radius: 8px;
		padding: 0;

		.senior-case-wrap {
			padding: var(--m32-24);

			h3 {
				font-size: var(--txt32-24);
				display: grid;
				place-items: center;
				min-height: 96px;
			}

			p {
				min-height: 107px;
			}

			.senior-wrap {
				background-color: #fff;
				border-radius: 8px;
				padding: var(--m16-8);

				p {
					min-height: 80px;
					font-size: var(--txt14-13);
				}
			}
		}


		.white-fukidashi {
			border-radius: 8px;
			width: 100%;
			max-width: 100%;
			font-weight: 700;
			padding: var(--m16-8) var(--m32-24);

			.episode-txt {
				font-family: var(--en-txt);
				margin-bottom: 8px;

				span {
					font-size: 1.5em;
					vertical-align: middle;
				}
			}

			.senior-comment {
				font-size: var(--txt20-18);
				line-height: 150%;
				min-height: 90px;
				display: grid;
				place-items: center;
			}
		}
	}

}


/* =========================================
* 募集要項・エントリー
* ======================================== */

/* 募集要項
* ---------------------------------- */

.entry-table {
	margin: var(--m40-32) 0;
	width: 100%;

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

	th {
		font-size: var(--txt18-16);
		width: 180px;
	}

	td {
		dt {
			span {
				color: #D4D4D4;
			}
		}

		dd {
			margin-bottom: .8em;

			&:last-child {
				margin-bottom: 0px;
			}

		}

	}
}

#new .entry-table {
	tr {
		border-top: var(--main-color) 1px solid;

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

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

#career .entry-table {
	tr {
		border-top: var(--sub-color) 1px solid;

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

	th {
		color: var(--sub-color)
	}
}



/* 選考フロー
* ---------------------------------- */

.flow-wrap {
	display: flex;
	justify-content: center;
	margin: var(--m40-32) 0;
	gap: var(--m40-32);

	.flow-col {
		background-color: var(--main-bg);
		aspect-ratio: 1/1;
		border-radius: 100%;
		text-align: center;
		display: grid;
		place-items: center;
		position: relative;
		width: 100%;
		max-width: 168px;

		&::before {
			content: url(../imgs/icon_right_gray.svg);
			width: 24px;
			height: 24px;
			position: absolute;
			right: -30px;
		}

		&:last-child::before {
			display: none;
		}

		h4 {
			font-size: min(1.8vw, 18px);
			margin-bottom: .1em;
		}

		p {
			font-size: min(1.5vw, 16px);
		}
	}
}

/* 新卒採用に関するよくある質問
* ---------------------------------- */
.faq-wrap {
	margin: var(--m40-32) 0;
}

#new details {
	border-top: var(--main-color) 1px solid;

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

#career details {
	border-top: var(--sub-color) 1px solid;

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

summary {
	list-style-type: none;
	cursor: pointer;
}

.q-box,
.a-box {
	display: flex;
	text-align: justify;

	.faq-icon {
		font-family: var(--en-txt);
		font-size: var(--txt32-24);
		font-weight: 700;
		padding-right: var(--m16-8);

		#new & {
			color: var(--main-color);
		}

		#career & {
			color: var(--sub-color);
		}
	}
}

.q-box {
	font-size: var(--txt18-16);
	font-weight: 700;
	padding: var(--m24-16);
	position: relative;
	align-items: center;

	p {
		padding-right: var(--m40-32);
	}
}

.a-box {
	padding: 0 var(--m24-16) var(--m24-16) var(--m24-16);
}


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

	span {
		display: inline-block;
		height: 2px;
		width: var(--m24-16);
		position: relative;

		#new & {
			background-color: var(--main-color);
		}

		#career &,
		#job & {
			background-color: var(--sub-color);
		}

		&::before {
			position: absolute;
			content: "";
			display: inline-block;
			height: var(--m24-16);
			width: 2px;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			transition: var(--hov-move);
		}

		#new &::before {
			background-color: var(--main-color);
		}

		#career &::before,
		#job &::before {
			background-color: var(--sub-color);
		}

		details[open] &::before {
			opacity: 0;
			transform: translateX(-50%) translateY(-50%) rotate(90deg);
			transition: var(--hov-move);
		}
	}
}

/* =========================================
* フッター
* ======================================== */
footer {
	border-top: #D9D9D9 1px solid;
	padding: var(--m56-40) 0;
	width: 100%;

	.footer-container {
		width: 92%;
		max-width: 1080px;
		display: flex;
		flex-direction: column;
		gap: var(--m40-32);
		margin: auto;

		.top-logo {
			width: 34%;
			max-width: 290px;
		}

		.footer-top-link {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.footer-btn-wrap {
				display: flex;
				width: 60%;
				gap: 16px;
			}
		}

		.footer-site-link {
			display: flex;
			justify-content: space-between;

			.footer-site-link-col {
				a {
					display: flex;
					align-items: center;
					padding: .3em 0;
					transition: var(--hov-move);

					&:hover {
						color: var(--main-color);
						transition: var(--hov-move);

						.icon-wrap {
							&.arrow-right-green {
								background-image: url(../imgs/icon_right_green.svg);

								a:hover & {
									background-image: url(../imgs/icon_right_green.svg);
									transition: var(--hov-move);
								}
							}
						}
					}
				}

				&>a {
					font-size: var(--txt20-18);
					font-weight: 700;
				}

				ul {
					li {
						font-size: var(--txt16-14);
						font-weight: 500;
						text-indent: 1em;

					}
				}
			}
		}

		.footer-bottom-link {
			display: flex;
			justify-content: space-between;
			font-size: var(--txt14-13);
			color: #767676;

			.corporate-link {
				ul {
					display: flex;
					gap: 32px;
				}
			}
		}
	}
}

@media (max-width: 768px) {

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

	/* 変数
* ---------------------------------- */
	:root {

		--header-height: 62px;
		--w50-100: 100%;
		--txt64-45: 45px;
		--txt56-36: 36px;
		--txt48-32: 32px;
		--txt32-24: 24px;
		--txt24-20: 20px;
		--txt20-18: 18px;
		--txt18-16: 16px;
		--txt16-14: 14px;
		--txt14-13: 13px;
		--m80-56: 56px;
		--m56-40: 40px;
		--m40-32: 32px;
		--m32-24: 24px;
		--m24-16: 16px;
		--m16-8: 8px;
	}


	/* 見出し
* ---------------------------------- */
	.tier02 .mv-wrap {
		display: block;
		padding-top: 40px;

		.mv-illustration {
			margin: -32px 0 0 auto;
			display: block;
			width: 192px;
		}
	}

	/* ボタン
	* ---------------------------------- */

	/* --- ベタのボタン --- */
	.green-btn,
	.blue-btn {
		padding: .8em 1em;
	}


	/* --- ボーダーのボタン --- */

	.green-line-btn,
	.blue-line-btn {
		padding: .8em 1em;
	}

	/* --- View Moreのボタン --- */
	.viewmore-btn {
		width: 142px;
		min-width: 142px;

		.link-circle {
			width: 40px;
			height: 40px;
		}
	}

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

		.anchor-btn {
			font-size: 14px;
			padding: .8em;
		}
	}


	/* =========================================
	* ヘッダー
	* ======================================== */

	header {

		.top-logo {
			width: 240px;
			max-width: none;
		}

		.header-contents {

			nav.pc_none {
				display: flex;
				flex-direction: column;
				gap: 24px;
				position: fixed;
				background-color: #fff;
				width: 100%;
				top: var(--header-height);
				transition: right 0.3s ease-in-out;
				right: -100%;
				padding: 32px 16px;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				height: calc(100vh - 62px);

				&.active {
					right: 0;
				}

				.site-link-wrap {
					display: flex;
					flex-direction: column;
					gap: 32px;

					.site-link-col {
						a {
							padding: .2em 0;
							font-size: 14px;
							font-weight: 500;
							display: flex;
							align-items: center;
							transition: var(--hov-move);

							&:hover {
								color: var(--main-color);
								transition: var(--hov-move);
							}

							.icon-wrap {
								&.arrow-right-green {
									background-image: url(../imgs/icon_right_green.svg);

									a:hover & {
										background-image: url(../imgs/icon_right_green.svg);
										transition: var(--hov-move);
									}
								}
							}
						}

						&>a {
							font-size: 18px;
							font-weight: 700;
						}

						ul {
							display: grid;
							grid-template-columns: repeat(auto-fit, minmax(min(100%, 50%), 1fr));

							li {
								text-indent: 1em;
							}
						}
					}
				}

				.header-btn-wrap {
					display: flex;
					flex-direction: column;
					gap: 16px;

					.green-btn,
					.blue-btn {
						font-size: 14px;
						padding: 1em;
						margin: auto;
					}
				}

				.corporate-link {
					text-align: center;
					color: #767676;
					font-size: 14px;
					font-weight: 500;

					ul {
						display: flex;
						flex-direction: column;
						gap: 16px;
					}
				}
			}
		}
	}


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

	.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-color: var(--sub-color);
		border-radius: 0 0 0 24px;

	}

	/* --- 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;
	}

	.burger span:nth-of-type(1) {
		top: 3px;
	}

	.burger span:nth-of-type(2) {
		top: 11px;
	}

	.burger span:nth-of-type(3) {
		bottom: 3px;
	}

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

	.burger.active span:nth-of-type(2) {
		opacity: 0;
	}

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

	/* =========================================
* トップページ
* ======================================== */
	/* メインビジュアル
* ---------------------------------- */
	.top-mv-wrap {
		aspect-ratio: 65 / 103;


		hgroup {
			top: 13%;

			h1 {
				font-size: max(7vw, 32px);
			}
		}
	}

	/* 会社を知る
* ---------------------------------- */
	.top-btn-wrap {
		grid-template-columns: repeat(1, 1fr);

		.top-btn-col {
			width: 100%;
			height: 128px;
			/* aspect-ratio: 43 / 16; */

			.top-btn-container {

				.link-circle {
					width: 40px;
					height: 40px;

				}
			}
		}
	}

	/* --- 数字で見るポバール工業（トップページ） --- */

	.top-data-wrap {
		display: block;

		.top-data-txt {
			width: 100%;
		}

		.top-data-img {
			width: 100%;
			margin: 0 auto 16px auto;
			display: block;
		}

		.viewmore-btn {
			margin: auto;
		}
	}

	/* 仕事を知る(トップページ)
* ---------------------------------- */
	.top-job-wrap {
		display: block;

		.top-job-img {
			width: 100%;
			margin: auto;
			display: block;
		}

		.top-job-contents {
			width: 100%;

			.top-job-link {
				margin-top: 24px;
			}
		}
	}

	/* 働く環境を知る（トップページ）
* ---------------------------------- */
	.top-workstyle-img {
		aspect-ratio: 86 / 55;
	}

	.top-workstyle-wrap {
		grid-template-columns: repeat(1, 1fr);
		gap: 24px;
	}

	/* よくある質問（トップページ）
* ---------------------------------- */
	.top-faq-wrap {
		display: block;

		.top-faq-img {
			width: 100%;
			margin: auto;
			display: block;
		}

		.top-faq-txt {
			width: 100%;

			a {
				margin: 0 auto 8px auto;
			}
		}
	}

	/* 募集要項・エントリー（トップページ）
* ---------------------------------- */
	.top-entry-wrap {
		display: block;

		.top-entry-img {
			width: 100%;
			margin: auto;
			display: block;
		}

		.top-entry-txt {
			h3 {
				font-size: var(--txt20-18);
				text-align: left;
				margin-bottom: 8px;
				margin-top: var(--m16-8);
			}

			.top-entry-btn {
				display: flex;
				gap: 16px;
			}
		}
	}


	/* =========================================
* 会社を知る
* ======================================== */


	/* トップメッセージ
* ---------------------------------- */
	.president-img,
	.company-img,
	.person-img {
		aspect-ratio: 43 / 30;
		height: auto;
		object-position: center;
	}


	/* 事業内容
* ---------------------------------- */

	/* --- ポバールの作るもの --- */
	.products-wrap {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	/* --- ポバールの3つの特徴 --- */
	.features-wrap {
		grid-template-columns: repeat(1, 1fr);
	}



	/* 求める人材
* ---------------------------------- */
	.person-wrap {
		grid-template-columns: repeat(1, 1fr);
	}

	/* 数字で見るポバール工業（詳しくはこちら）
* ---------------------------------- */
	.company-data-wrap {
		display: block;

		.company-data-txt {
			width: 100%;
			margin-bottom: 16px;
		}

		.company-data-img {
			width: 100%;
		}
	}


	/* =========================================
* 数字で見るポバール工業
* ======================================== */

	.data-icon {
		width: 80px;
		display: block;
		margin: 0 auto 16px auto;
	}

	.data-wrap {
		.data-txt {
			font-size: 64px;

		}
	}

	/* 会社の規模・実績
* ---------------------------------- */
	.history-data-wrap {
		grid-template-columns: repeat(1, 1fr);
	}

	/* 社員データ
* ---------------------------------- */
	.employee-data-wrap,
	.benefits-data-wrap {
		.top-wrap {
			grid-template-columns: repeat(1, 1fr);
		}

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

	/* --- 円グラフに関するスタイル --- */
	.chart-wrap {

		.chart-l-icon,
		.chart-r-icon {
			height: 60px;
		}
	}

	.donut-chart {
		width: 80%;
		height: 80%;

		.chart-txt {
			.data-txt {
				font-size: 54px;
			}
		}
	}

	/* --- 棒グラフに関するスタイル --- */
	.bar-graph-wrap {
		overflow: hidden;
		max-width: 500px;
		margin: auto;

		.data-txt {
			font-size: 24px;
		}

		dl {

			div {
				dt {
					font-size: 14px;
					height: 2.5em;

					&::after {
						width: 500%;
						bottom: 34px;
					}

					/* --- 勤続年数の下線の長さ --- */
					.years-graph &::after {
						width: 500%;
					}

					/* --- 月平均残業時間の下線の長さ --- */
					.month-graph & {

						&::after {
							width: 500%;
						}
					}
				}

				dd {
					.bar {
						width: 20px;

						.month-graph & {
							width: 15px;
						}
					}
				}

			}
		}

		/* --- 月平均残業時間のグラフの高さ --- */
		&.month-graph {
			.data-txt {
				font-size: 14px;
			}
		}
	}

	.data-wrap:has(.years-graph) {
		width: 100%;
	}

	.data-wrap:has(.month-graph) {
		width: 100%;
	}

	.overtime-col+.flex+div {
		width: 100%;

	}

	.graph-height {
		height: auto;
	}

	.data-list {

		ul.normal-list {
			column-count: 1;
		}
	}


	/* 業界・製品の幅
* ---------------------------------- */
	.products-data-wrap {
		grid-template-columns: repeat(1, 1fr);

		.data-col:nth-child(3) .data-txt {
			font-size: 36px;
		}
	}



	/* =========================================
* 仕事を知る
* ======================================== */

	/* ページ全体共通
* ---------------------------------- */
	.job-wrap {
		flex-direction: column;

		.job-img {
			width: 100%;
		}

		.job-txt {
			width: 100%;
		}
	}


	/* =========================================
* 人を知る
* ======================================== */

	/* 人物リスト
* ---------------------------------- */
	.people-wrap {
		display: block;
		width: 240px;

		.people-col {
			hgroup {
				gap: 4px;
				padding: 4px;

				h3 {
					font-size: 20px;
				}
			}

			.name-txt {
				margin-top: 4px;
			}

			.year-txt {
				margin-bottom: 4px;
			}
		}
	}

	.slick-prev,
	.slick-next {
		background-color: var(--gray-color) !important;
		width: 40px;
		height: 40px;
		border-radius: 80px;

		&::before {
			content: none !important;
		}
	}

	.slick-prev {
		left: -56px;
	}

	.slick-next {
		right: -56px;
	}

	#people .people-wrap {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		place-items: stretch center;
		gap: 24px 16px;
	}



	/* =========================================
* 人を知る（詳細）
* ======================================== */

	.people-main {
		aspect-ratio: 390 / 209;
	}

	section.people-details {
		margin-top: -24px;
	}

	.people-info h3 {
		width: 240px;
	}

	.interview-wrap .img-wrap {
		display: block;

		.people-img {
			margin-bottom: 32px;
		}

	}


	/* =========================================
* 働く環境を知る
* ======================================== */

	/* アンカーリンクリンク（3カラム）
* ---------------------------------- */
	#workstyle .anchor-wrap {
		grid-template-columns: repeat(1, 1fr);
	}

	/* 福利厚生
* ---------------------------------- */

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

	.workstyle-col p {
		min-height: auto;
	}

	/* 働き方
* ---------------------------------- */

	.style-wrap .workstyle-img-wrap img {
		position: relative;
		top: -24px;
	}

	.white-fukidashi {
		max-width: 216px;
	}

	.case-wrap {
		margin-top: var(--m40-32);

		hgroup {

			&::before,
			&::after {
				bottom: 10px;
			}
		}

		.case-col {

			.schedule-table {
				margin-bottom: 24px;

				th {
					width: 100%;
					display: block;
					padding: 16px 16px 0 16px;
				}

				td {
					display: block;
					padding: 0 16px 16px 16px;
				}
			}

			.white-fukidashi {
				max-width: 270px;
			}

			.case-img {
				height: 350px;

				.style-case-img {
					height: 258px;
					top: -40px;
				}
			}
		}
	}

	.workstyle-img {
		aspect-ratio: 39 / 20;
		object-fit: cover;
	}

	/* キャリア形成支援
* ---------------------------------- */
	.support-wrap {
		grid-template-columns: repeat(1, 1fr);

		.workstyle-col {

			.senior-case-wrap {

				h3 {
					min-height: auto;
				}

				p {
					min-height: auto;
				}

				.senior-wrap {
					display: flex;
					align-items: center;
					gap: 4%;

					hgroup {
						min-width: 112px;
					}
				}
			}


			.white-fukidashi .senior-comment {
				min-height: auto;
			}
		}

	}

	/* =========================================
* 募集要項・エントリー
* ======================================== */

	/* 募集要項
* ---------------------------------- */

	.entry-table {

		th,
		td {
			display: block;
			width: 100%;
		}

		th {
			padding: 16px 16px 4px 16px;
		}

		td {
			padding: 4px 16px 16px 16px;
		}

	}


	/* 選考フロー
* ---------------------------------- */

	.flow-wrap {
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--m40-32);

		.flow-col {
			aspect-ratio: inherit;
			border-radius: 84px;
			padding: 16px;
			max-width: none;

			&::before {
				content: url(../imgs/icon_down_gray.svg);
				right: auto;
				bottom: -30px;
			}

			h4 {
				font-size: 16px;
			}

			p {
				font-size: 14px;
			}
		}

	}

	.flow-col br {
		display: none;
	}


	/* =========================================
* フッター
* ======================================== */
	footer {

		.footer-container {

			.footer-top-link {
				order: 2;

				.footer-btn-wrap {
					flex-direction: column;
					width: 100%;
					margin: auto;

					.blue-btn,
					.green-btn {
						margin: auto;
					}
				}
			}

			.footer-site-link {
				flex-direction: column;
				gap: var(--m24-16);
				order: 1;

				.footer-site-link-col {
					a {
						display: flex;
						align-items: center;
						padding: .3em 0;
						transition: var(--hov-move);

						&:hover {
							color: var(--main-color);
							transition: var(--hov-move);

							.icon-wrap {
								&.arrow-right-green {
									background-image: url(../imgs/icon_right_green.svg);

									a:hover & {
										background-image: url(../imgs/icon_right_green.svg);
										transition: var(--hov-move);
									}
								}
							}
						}
					}

					&>a {
						font-size: var(--txt20-18);
						font-weight: 700;
					}

					ul {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(min(100%, 50%), 1fr));
					}
				}
			}

			.footer-bottom-link {
				flex-direction: column;
				gap: 24px;
				order: 3;
				text-align: center;

				.corporate-link {
					ul {
						flex-direction: column;
						gap: 16px;
					}
				}
			}
		}
	}
}