/*
 * corporate-top.css
 * 企業サイトのトップページ（フロントページ）専用レイアウト。is_front_page() && !
 * is_recruit_section() の場合に読み込む（functions.php）。
 * ルール: @layer は使わない。固有クラスは corp-top- 接頭辞。
 */
/*
 * スマホ横向き（高さが極端に低い状態）でのheroの高さ下限。
 * @media をセレクタ内にネストすると、対応が不安定な端末（AQUOS senseシリーズ等の標準ブラウザ）
 * でブロックごと無効化されたため、トップレベルの @media に書いている。
 */
@media (orientation: landscape) and (max-height: 600px) {
	.l-main--front .hero {
		height: auto;
		min-height: 400px;
		aspect-ratio: unset;
	}
}

.l-main--front {
	.hero {
		position: relative;
		z-index: 1;
		width: 100%;
		height: calc(100dvh - var(--header-height));
		max-height: 660px;
		aspect-ratio: 462 / 580;
		background-color: var(--color-corporate-heading);
		color: var(--color-white);
		overflow: hidden;
		display: grid;
		padding-block-start: 0;
		align-items: center;

		@media(768px > width) {
			max-height: 562px;
		}

		@media(768px < width) {
			align-items: end;
			padding-block-end: 162px;
			padding-block-end: calc(clamp(7.625rem, -7.413rem + 31.33vw, 20rem) / 1.65);
		}

		@media(1024px <=width) {
			min-height: 680px;
		}

		&::after {
			max-width: clamp(14.125rem, 7.86rem + 26.73vw, 31.25rem);
			max-height: clamp(9.375rem, -4.524rem + 28.96vw, 20.813rem);
		}

		&.entry-header {
			margin-block-end: 0;
		}

		.-text_hero {
			position: relative;
			z-index: 3;
			color: var(--color-white);
			width: fit-content;
			max-width: calc(100% - clamp(1rem, -17.532rem + 38.61vw, 16.25rem));
			margin-inline: max(0px, calc(100vw - 1755px)) auto;

			padding-inline-start: 1rem;

			@media (1024px < width) {
				margin-inline: max(5vw, calc(100vw - 1755px)) auto;
			}

			@media (1920px < width) {
				margin-inline: 7.5vw auto;
			}

			h1 {
				font-size: clamp(2.65rem, -0.673rem + 6.92vw, 6.25rem);
				line-height: 1.25;
				margin-block-end: clamp(0rem, -3.556rem + 7.41vw, 2rem);
				letter-spacing: 0.3125rem;
			}

			p {
				font-size: clamp(0.531rem, -0.342rem + 1.82vw, 20px);
				display: inline-flex;
				white-space: nowrap;
				width: 97%;
				align-items: center;
				gap: 10px;
				font-weight: 600;
				padding-inline-start: 0.5em;

				&::after {
					content: "";
					height: 1px;
					width: 100%;
					display: inline-block;
					background-color: var(--color-white);
				}
			}
		}

		.nameTxt {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			color: #002f61;
			font-size: clamp(4.75rem, -4.668rem + 19.62vw, 12.5rem);
			font-weight: 700;
			line-height: 0.8;
			text-box-trim: trim-end;
			text-box-edge: cap alphabetic;
		}

		/*
		 * 形はデスクトップと同じ実寸のまま、SPでははみ出た分を切るだけにする。clip-path の %
		 * だと図形が縮小されるため、mask-image の mask-size を固定px（SVGのviewBoxそのまま 1698x913）
		 * にしている。mask-position は全幅で 17% 固定。
		 * 中央から広がるアニメーションは clip-path で行う（mask-size は補間されず、scale
		 * は動画とマスクまで変形するため。@keyframes seki-movie-top-reveal 参照）。
		 */
		.movie-top {
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			width: 100%;
			--_max-withHero: 1630px;

			@media (1024px <=width) {
				--_max-withHero: 89.06vw;
			}

			@media (1920px < width) {
				--_max-withHero: 89.06vw;
			}


			max-width: var(--_max-withHero);
			height: calc(100% - (clamp(15.5rem, -7.413rem + 31.33vw, 20rem) / 5.25));
			overflow: hidden;

			/* 幅100%の6角形。右上を斜めにカット（とがらせない）。頂点は左上→時計回り。 */
			clip-path: polygon(22.49% 0, 90% 0, 100% 14%, 100% 31.65%, 89.06% 100%, 0 100%);

			/* tb（768px以下）は別形状。左上を斜めカットしたフル幅5角形（SVG 377x550 由来）。 */
			@media (768px >=width) {
				clip-path: polygon(26.23% 0, 100% 0, 100% 100%, 0 100%, 0 46.64%);
			}


			video {
				width: 100%;
				height: 100%;
				object-fit: cover;

				/* reveal（inset）は形状clip-pathと競合するため .movie-top からここへ移動 */
				@media(1024px < width) {
					clip-path: inset(0 0 0 100%);
				}
			}

			&::after {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(240deg, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.75) 100%);

				/* グラデーションも動画と一緒に開くよう同じ reveal を付与 */
				@media(1024px <=width) {
					clip-path: inset(0 0 0 100%);
				}
			}

			/*
			 * reveal は固定delayではなく、動画の初回フレーム描画（loadeddata、タイムアウト時はフォールバック）
			 * を JS（assets/js/hero-video-reveal.js）が検知してから発火させる。経過時間だと、
			 * 遅い環境で同じアニメーションを共有するグラデーションだけ先に全開になって見えるため。
			 */
			&.is-video-ready {
				@media(1024px <=width) {

					video,
					&::after {
						animation: seki-movie-top-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
					}
				}
			}
		}
	}

	.tophero-burner {
		position: absolute;
		z-index: 4;
		width: clamp(7.5rem, -0.095rem + 15.82vw, 220px);
		aspect-ratio: 1 / 1;
		bottom: clamp(2.5rem, -0.082rem + 5.38vw, 74px);
		right: clamp(20px, -5.889rem + 14.87vw, 114px);
		border-radius: 50%;
		color: var(--color-crosspile-blue-1);
		text-align: center;
		font-weight: 600;
		line-height: 1.3;
		font-size: clamp(0.5rem, -0.032rem + 1.11vw, 0.938rem);
		opacity: 0;
		scale: 0;
		transition: opacity .45s ease 0.2s, scale .45s cubic-bezier(0.49, 0.25, 0.3, 1.31) 0.2s;

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 95%;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			filter: blur(3.5px);
		}

		&::before {
			background-color: var(--color-crosspile-blue-1);
			top: -0.85em;
			left: -1.5em;
			z-index: -1;
		}

		&::after {
			background-color: #70C988;
			top: 1.5em;
			right: -1.125em;
			z-index: -1;
		}

		a {
			position: relative;
			text-decoration: none;
			display: grid;
			height: 100%;
			width: 100%;
			padding-block-start: clamp(15px, -1.1rem + 4.11vw, 40px);
			align-content: start;
			justify-content: center;
			border-radius: 50%;
			background-color: var(--color-white);
			background-image: url(../images/gorecruit-img.webp);
			background-repeat: no-repeat;
			background-size: 90%;
			background-position: left 0 bottom -0.625em;
			transition: 0.1s steps(2);

			svg {
				color: var(--color-text);
				margin-block-start: 5px;
				margin-inline: auto -10px;
				position: relative;
				width: clamp(1.25rem, 0.339rem + 1.9vw, 32px);
				height: auto;
			}

			&:hover {
				background-size: 92%;
				background-image: url(../images/gorecruit-img_hv2.webp);
				background-position: left 10% bottom -0.25em;
			}
		}

		.en-type {
			font-size: clamp(1.063rem, -0.077rem + 2.37vw, 2rem);
		}
	}

	.tophero-burner.is-in-view {
		opacity: 1;
		scale: 1;
	}

}


/*hero直下のお知らせ*/
.topTopics {
	position: relative;
	background-color: var(--color-corporate-heading);
	color: var(--color-white);
	padding-inline: clamp(0.625rem, -9.958rem + 22.05vw, 16.5rem) clamp(0.625rem, -8.489rem + 18.99vw, 8.125rem);
	display: grid;
	align-items: center;
	padding-block: 2rem 1.5rem;

	a {
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 0.75em;

		.category-news {
			width: 100%;
		}

		&:hover .topTopics__title-text {
			background-size: 100% 1px;
		}

		.c-underline-reveal {
			background-image: linear-gradient(var(--color-accent), var(--color-accent));
		}

		.c-arrow-circle.c-arrow-circle--white-current {
			--circle-size: 2.963rem;
			--arrow-width: 0.65rem;
		}
	}

	.cat {
		text-transform: uppercase;
	}

	time {
		width: fit-content;
		white-space: nowrap;
		display: block;
	}

	h3 {
		font-weight: normal;
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		gap: 1rem;
	}

}

@media (768px <=width) {
	.l-main--front {
		.hero {
			max-height: 970px;
		}

		.topTopics {
			h2 {
				padding-inline-end: 3em;
				border-right: 1px solid var(--color-accent);
				margin-inline-end: 3em;
				font-size: 1.5rem;
			}
		}

		.category-news {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			width: 100%;
		}
	}
}

@keyframes seki-movie-top-reveal {
	0% {
		clip-path: inset(0 0 0 100%);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}

/*
 * 「視差効果を減らす」設定ではアニメーションさせない（WCAG 2.3.3）。is-video-ready
 * の付与を待たず、reveal の初期状態（clip-path: inset(0 0 0 100%)）
 * を打ち消して最初から全開にする。
 */
@media (prefers-reduced-motion: reduce) {
	.movie-top {

		video,
		&::after {
			animation: none;
			clip-path: none;
		}
	}
}

/* 企業ページ */
.l-main--front .entry-content {
	background-color: #F6F2EE;
	color: var(--color-corporate-heading);

	p {
		font-weight: bold;
	}
}

.corporate-section-case {
	padding-block: clamp(3.75rem, 0.712rem + 6.33vw, 6.25rem) clamp(2.188rem, -2.749rem + 10.28vw, 6.25rem);
}

/* clamp(100px, calc(1580px - 144.531vw), 470px) */
/* technology */
.c-tec-inner {
	max-width: 1480px;
	margin-inline: auto;
	display: grid;
	gap: 3em 1em;
	margin-block: clamp(2.813rem, -3.415rem + 12.97vw, 7.938rem) 0;
	color: var(--color-corporate-heading);

	@media(1500px > width) {
		padding-inline: 1rem
	}
}

.c-tech-inner_r {
	display: grid;
	justify-content: center;
	gap: 2rem clamp(1.35rem, 0.56rem + 1.65vw, 2rem);
	position: relative;

	@media(1510px <=width) {
		justify-self: end;
	}

	figure,
	img {
		display: block;
		background-color: var(--color-white);
	}

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

	.arrowIcnw {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		@media(768px >=width) {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}
}

.c-tech-inner_l {
	max-width: 544px;
	justify-self: center;

	h3 {
		letter-spacing: 0.225rem;
		line-height: 1.667;
		margin-block-end: 1.4em;
	}

	p {
		max-width: 26.5em;
		font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
		font-weight: bold;
	}
}

@media(1024px <=width) {
	.c-tec-inner {
		grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
	}

	.c-tech-inner_r {
		grid-template-columns: repeat(2, auto);
	}
}

.c-marquee__card {
	width: clamp(18.75rem, -4.794rem + 49.05vw, 38.125rem);
	aspect-ratio: 1 / 0.666;
}

/* 説明ブロック */
.c-about-us-message {
	background-image: url(../images/c-top_bg_01.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: var(--color-white);
	padding-block: clamp(45px, -3.834rem + 13.92vw, 8.35rem) clamp(92px, calc(1580px - 144.531vw), 470px);
}

.c_about-inner {
	max-width: 1200px;
	margin-inline: auto;

	@media(1230px >=width) {
		margin-inline: 1rem;
	}

	>div {
		max-width: 610px;
		margin-inline: auto 0;
	}

	h3 {
		width: fit-content;
		font-size: clamp(1.5rem, 0.439rem + 2.83vw, 2.25rem);
		letter-spacing: 0.225rem;
		line-height: 1.666;
		margin-block: 0.75em clamp(2.438rem, 3.349rem + -1.9vw, 1.688rem);

		span {
			display: inline;
			padding-block: 6px;
			line-height: 1.8;
		}
	}

	.leadCopy {
		font-size: clamp(14px, 0.419rem + 0.95vw, 1.25rem);
	}

	div:has(>ul) {
		background-color: var(--color-ivory);
		color: var(--color-corporate-heading);
		display: grid;
		row-gap: clamp(23px, 0.754rem + 1.42vw, 2em);
		justify-content: center;
		align-content: center;
		align-items: center;
		justify-items: center;
		padding: 2.25rem clamp(1rem, -0.519rem + 3.16vw, 2.25rem);

		p {
			max-width: 30.5em;
		}
	}

	ul {
		margin: 0;
		padding-inline-start: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		font-size: 1.125rem;
		font-weight: bold;
		gap: 17px 15px;
	}

	li {
		border: 1px solid var(--color-corporate-heading);
		background-color: var(--color-white);
		text-align: center;
		min-width: 150px;
		line-height: 2.5;
		padding-inline: 1em;
	}

}

@media(540px > width) {
	.c_about-inner {
		h3 {
			display: block;
			text-align: justify;

			br {
				display: none;
			}

			span {
				display: inline;
				line-height: 1.8;
				padding-block-end: 9px;
			}
		}

		li {
			width: 100%;
		}

		/*li:nth-last-child(-n+2) {
			width: 100%;
		}*/
	}
}

/* 設備 */
.wp-container-core-group-is-layout-44b79922 {
	container-type: unset;
}

.c-equip {
	background-image: url(../images/c-top_bg_02.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: var(--color-white);
	text-align: center;
	position: relative;
	z-index: 1;
	padding-block-end: 52px;

	p {
		text-align: center;
	}

	h2::before {
		color: var(--color-white);
	}

	h3 {
		font-size: clamp(1.5rem, 0.589rem + 1.9vw, 2.25rem);
		margin-block: 3.75rem 1.75rem;
		letter-spacing: 0.225rem;
		line-height: 1.65;
	}

	.c-eq-grid {
		margin-inline: auto;
		max-width: clamp(21.25rem, -9.848rem + 132.68vw, 106.25rem);
		gap: 1.2rem 0.5em;
		justify-content: center;
		margin-block: clamp(2.7rem, 0.27rem + 5.06vw, 4.7rem) 3.5rem;

		@media(1800px >=width) {
			padding-inline: 1rem;
		}

		@media(1280px > width) {
			grid-template-columns: repeat(2, 350px);
			justify-items: center
		}

		@media(768px > width) {
			max-width: 400px;
			grid-template-columns: minmax(280px, 1fr);
		}

		figure {
			display: block;
			position: relative;
		}

		figcaption {
			position: absolute;
			top: 14px;
			display: block;
			font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
			width: clamp(14.375rem, 10.957rem + 7.12vw, 17.188rem);
			background-color: var(--color-crosspile-blue-1);
			clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
			padding-block: 4px;
			font-weight: 600;
		}

	}

	.c-button-area {
		width: fit-content;
		margin: auto;
	}

	&::before,
	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 40%;
		max-height: 460px;
		content: "";
	}

	&::before {
		background-color: var(--color-crosspile-blue-2);
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
		z-index: -1;

		@media(768px >=width) {
			clip-path: polygon(-138% 0%, 0% 100%, 100% 100%);
		}
	}

	&::after {
		z-index: -1;
		background-color: var(--color-crosspile-blue-1);
		clip-path: polygon(100% 0%, -30% 100%, 100% 100%);

		@media(768px >=width) {
			clip-path: polygon(156% 0%, -30% 100%, 100% 100%);
		}
	}

}

/* セキサーマルについて */
.c-about-seki {
	background-image: url(../images/svg/rhombus.svg), url(../images/svg/rhombus.svg);
	background-position: -10vw center, right -13vw bottom -40vh;
	background-repeat: no-repeat, no-repeat;
	background-size: 30vw, 33vw;
	padding-block-end: clamp(3.25rem, -2.295rem + 11.55vw, 7.813rem);

	a {
		text-decoration: none;
		display: block;
	}

	.headline_l {
		justify-content: unset;
		justify-items: unset;
		margin-block-end: 2.4rem;
	}

	h3.headline_l {
		width: 100%;
		font-size: 20px;
		margin-block-end: 0;
		position: relative;

		&::after {
			content: unset;
		}

		&::before {
			margin-block-end: 0.5rem;
			font-size: 36px;
		}

		.c-arrow-circle {
			--circle-size: 2rem;
			--arrow-width: clamp(4px, 0.39rem + 0.47vw, 8px);
			color: var(--color-corporate-heading);
			border-color: var(--color-corporate-heading);
			justify-self: end;
			position: absolute;
			bottom: 0;
		}
	}

	.c-about-seki-inner {
		max-width: 1440px;
		margin-inline: auto;
		display: grid;
		row-gap: 2em;

		@media(1470px >=width) {
			margin-inline: 1rem;
		}
	}

	.c-about-us-inner_l {
		max-width: 27em;
		justify-self: center;

		p {
			line-height: 1.95;
		}
	}

	@media(1024px > width) {
		.c-about-us-inner_l {
			max-width: 40rem;
			margin-inline: auto;
		}
	}

	@media(1024px <=width) {
		.c-about-seki-inner {
			column-gap: 2em;
		}

		.c-about-us-inner_l {
			min-width: 17.25em;
		}
	}

	.c-about-us-inner_r {
		width: fit-content;
		margin-inline: auto;
		display: grid;
		gap: 2.75em 1em;

		img {
			width: 100%;
			max-width: 100%;
			height: auto;
			margin-block-end: 1rem;
		}
	}

	a {
		transition: 0.3s linear;
		height: fit-content;
		transition: 0.3s ease-out;

		h3::before,
		h3 span {
			transition: 0.3s linear;
		}

		img {
			transition: 0.3s ease-out;
		}

		&:nth-child(1) {
			align-self: start;
		}

		&:hover {
			h3::before {
				color: var(--color-corporate-heading);
			}

			img {
				filter: blur(1.5px);
				opacity: 0.75;
			}

			.c-arrow-circle {
				border-color: var(--color-corporate-heading);
				background-color: var(--color-corporate-heading);
				color: var(--color-white);
			}
		}
	}
}

@media(1024px <=width) {
	.c-about-seki {

		.c-about-seki-inner {
			grid-template-columns: auto auto;
			justify-content: space-between;
		}

		.c-about-us-inner_l {
			justify-self: unset;
			align-self: center;
		}

		.c-about-us-inner_r {
			grid-template-columns: auto auto;
			column-gap: clamp(1rem, -2.556rem + 7.41vw, 3rem);
			max-width: 800px;

			a {
				margin-block-start: calc(100px * (sibling-index() - 1));
			}
		}
	}
}

/* 自社製品 */
.c-goods {
	color: var(--color-white);
	background-image: url(../images/c-top_bg_02.webp);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	padding-block-end: clamp(5.188rem, -1.989rem + 8.7vw, 5.625rem);

	h2::before {
		color: var(--color-white)
	}

	.headline_l {
		justify-content: unset;
		justify-items: unset;
	}
}

.c-goods-inner {
	max-width: 1400px;
	margin-inline: auto;
	display: grid;

	@media(1380px >=width) {
		margin-inline: 1rem;
	}
}

.c-goods-text-img {
	img {
		width: 100%;
		max-width: 588px;
		height: auto;
		object-fit: contain;
	}
}

.c-goods-inner_element {
	display: grid;
	gap: 4em;
	margin-block-start: 3.25em;

	.blue .c-button a {
		background-color: var(--color-crosspile-blue-1);
		border-color: var(--color-crosspile-blue-1);

		&:hover {
			border-color: var(--color-white);
			background-color: transparent;
			color: var(--color-white)
		}
	}

	>div:has(.c-button-area) {
		display: flex;
		align-items: center;
		gap: 1em;

		.wp-block-button.c-button a {
			width: 18em;
			justify-content: center
		}
	}
}

@media(600px >=width) {
	.c-goods-inner_element {

		>div:has(.c-button-area) {
			.wp-block-button.c-button a {
				width: 100%;
			}
		}
	}
}


@media(768px >=width) {
	.c-goods-inner {
		row-gap: 1.5em;

		.c-goods-text-img {
			max-width: 378px;
			margin-block: 10px;
		}

		.c-goods-item-img {
			max-width: 280px;
			margin-block-end: 0;
		}

		.c-goods-inner_element {
			margin-block-start: 2em;

			>div:has(.c-button-area) {
				.wp-block-button.c-button a {
					/*width: 100%;
					min-width: 230px;*/
					justify-content: center;
				}
			}
		}
	}
}

@media(1024px > width) {

	.c-goods-text-img,
	.c-goods-item-img {
		justify-self: center;
	}

	.c-goods-item-img {
		margin-block: 1rem 2rem;
	}

	.c-goods {
		h2 {
			width: 100%;
		}

		h2,
		.c-goods-inner_element {
			max-width: 40rem;
			margin-inline: auto;
		}
	}
}

@media(1024px <=width) {
	.c-goods {
		.headline_l {
			margin-block-end: 5.75rem;
		}
	}

	.c-goods-inner {
		margin-block: 1.5rem clamp(0rem, -3.646rem + 7.59vw, 3rem);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		align-items: center;
		align-content: center;
		justify-content: space-between;
		column-gap: 1rem;

		.c-goods-text-img {
			img {
				width: clamp(18.75rem, -30.271rem + 76.6vw, 588px);
				height: auto;
				object-fit: contain;
			}
		}

		.c-goods-item-img {
			grid-column: 1 / 2;
			grid-row: 1 / 4;

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

	.c-goods-inner_element {
		justify-self: start;

		p {
			line-height: 2;
			max-width: 31.5em;
		}
	}
}

.c-goods-inner_element {
	>div:has(.c-button-area) {
		flex-direction: column;
		justify-self: center;
		column-gap: 2.5em;

		@media(1080px<width) {
			flex-direction: unset;
		}
	}
}

/* 採用 */
.c-recruit {
	height: 100%;
	padding-block: 0;
}

.c-recruit-inner {
	position: relative;
	overflow-x: clip;
	overflow-y: hidden;
	z-index: 1;


	&::before {
		position: absolute;
		content: "";
		width: clamp(20.625rem, 10.774rem + 42.03vw, 47.55rem);
		height: auto;
		aspect-ratio: 1 / 1;
		display: block;
		top: calc(clamp(11.5rem, 7.018rem + 19.12vw, 23.75rem) * -1);
		left: calc(clamp(14.625rem, 11.287rem + 14.24vw, 23.75rem) * -1);
		background-image: linear-gradient(90deg, #4a90e2, #56ccf2);
		border-radius: 50%;
		display: block;
		z-index: 1;
	}

	&::after {
		position: absolute;
		content: "";
		width: 740px;
		height: auto;
		aspect-ratio: 1 / 1;
		display: block;
		bottom: -370px;
		right: -80px;
		background-image: linear-gradient(180deg, #4a90e2, #56ccf2);
		border-radius: 50%;
		display: block;
		z-index: 1;
	}

	h2 {
		padding-block-start: clamp(2.188rem, -3.508rem + 11.87vw, 6.875rem);
		position: relative;
		z-index: 2;
	}

	/*.headline_l::before {
		margin-block-end: 5px;
	}*/
	.headline_l::after {
		/*margin-block-start: 0.5rem;*/
		height: 2px;
	}

	.c-button-area {
		position: relative;
		z-index: 3;
		margin-block-end: 100px;

		.c-button {
			margin-inline: auto;
			width: fit-content;

			a {
				padding-inline: 3rem;
				font-size: 1.125rem;
				padding-block: 0.75rem;
			}
		}
	}

	h3 {
		font-size: clamp(24px, -0.323rem + 3.8vw, 48px);
		text-align: center;
		letter-spacing: 0.3rem;
		line-height: 1.75;
		letter-spacing: 0.1em;
	}

	.c-recruit-text {
		display: grid;
		gap: clamp(2.25em, 1.417rem + 2.67vw, 3.75em) 2em;
		margin-block: clamp(1.75em, 0.083rem + 5.33vw, 4.75em) 2em;
		position: relative;
		z-index: 3;

		p {
			font-size: clamp(1.125rem, 0.681rem + 0.93vw, 1.375rem);
			max-width: 26.5em;
			margin-inline: auto;
			line-height: 2.0125;
		}
	}

	@media(600px > width) {
		.c-recruit-text {
			padding-inline: 1rem;
		}
	}

	@media(768px <=width) {
		.c-recruit-text {
			p {
				text-align: center;
			}
		}
	}

	.c-recruit-image {
		margin-block: 0;
		display: grid;
		align-content: space-between;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		gap: 2em;
		justify-content: space-between;
		position: relative;
		z-index: 2;

		figure {
			display: block;
			margin: 0;
		}

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

	.c-rec-fig1 {
		max-width: clamp(9.438rem, -10.081rem + 40.66vw, 25.5rem);
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		align-self: center;
	}

	.c-rec-fig2 {
		max-width: clamp(9.625rem, -2.312rem + 22.78vw, 17.625rem);
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		justify-self: center;
		align-self: unset;
		padding-block-start: clamp(2.188rem, -3.508rem + 11.87vw, 6.875rem);
	}

	.c-rec-fig3 {
		max-width: clamp(11.875rem, -1.518rem + 42.86vw, 30.625rem);
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}

@media(1024px > width) {
	.c-recruit-inner {
		padding-block: clamp(2.188rem, -2.749rem + 10.28vw, 6.25rem) 250px;

		.c-recruit-image {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	}
}

@media(1024px <=width) {
	.c-recruit-inner {
		z-index: 1;
		overflow-y: hidden;

		.c-button-area {
			margin-block-start: 5rem;
		}
	}

	.c-recruit-inner .c-recruit-image {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		align-items: end;
		margin-block-end: 0;
	}

	.corporate-section-case.c-recruit {
		padding-block-end: 0;
	}
}

/*
 * 採用ブロックのスクロール連動視差（GSAP不使用・二層駆動）。参考: trail-inc.jp の MEMBERS
 * ブロック。
 * 動きの定義は下の transform の calc 式1箇所に集約し、進行度 --recruit-progress（0→1）
 * を誰が動かすかだけをブラウザで切り替える: 対応ブラウザは CSS スクロール駆動、Safari/iOS は
 * recruit-parallax.js が rAF でセットする。
 * 注意: .c-recruit-inner は overflow でスクロールコンテナ化しているため、タイムラインは外側の
 * .c-recruit に定義し、進行度を継承させる。
 */

@property --recruit-progress {
	syntax: "<number>";
	inherits: true;
	initial-value: 0.5;
}

/*
 * 動きの定義（唯一の場所・全ブラウザ共通）。
 * 進行度 0→1 を各要素の from→to に線形補間して translateY に当てる。
 * --parallax-delay（0〜1、既定0）は進行度の始点を後ろへずらすための遅延量。
 * clamp() で (progress - delay) / (1 - delay) を 0〜1 に丸め込み、
 * delay に達するまでは from のまま静止させ、以降を残り区間で線形補間する。
 */
.c-recruit-image figure,
.c-recruit-inner::before,
.c-recruit-inner::after {
	transform: translateY(calc(var(--parallax-from, 0px) + (var(--parallax-to, 0px) - var(--parallax-from, 0px)) * clamp(0, (var(--recruit-progress, 0.5) - var(--parallax-delay, 0)) / (1 - var(--parallax-delay, 0)), 1)));
}

.c-recruit-image figure {
	will-change: transform;
}

/* 写真3枚: それぞれ別の視差量（fig2が最速）。fig1は他より少し遅れて動き出す */
.c-rec-fig1 {
	--parallax-from: -100px;
	--parallax-to: 100px;
	--parallax-delay: 0.15;
}

.c-rec-fig2 {
	--parallax-from: 200px;
	--parallax-to: -200px;
}

.c-rec-fig3 {
	--parallax-from: 60px;
	/*--parallax-to: -160px;*/
		--parallax-to: -80px;
}

/* 背景の円: 写真より控えめに、上下逆方向へ小さくドリフト */
.c-recruit-inner::before {
	--parallax-from: -30px;
	--parallax-to: 30px;
}

.c-recruit-inner::after {
	--parallax-from: 40px;
	--parallax-to: -40px;
}

/*
 * 1024px未満は写真が通常フローで並び、transform は再レイアウトを起こさないため、
 * 大きく動かすと隣と重なる。視差量を控えめにする。
 */
@media (1024px > width) {
	.c-rec-fig1 {
		--parallax-from: -28px;
		--parallax-to: 28px;
	}

	.c-rec-fig2 {
		--parallax-from: 80px;
		--parallax-to: -80px;
	}

	.c-rec-fig3 {
		--parallax-from: 25px;
		--parallax-to: -15px;
	}
}

/* 動きを減らす設定では視差を出さない（進行度が中間でも確実に無効化） */
@media (prefers-reduced-motion: reduce) {

	.c-recruit-image figure,
	.c-recruit-inner::before,
	.c-recruit-inner::after {
		transform: none;
	}
}

/* 駆動その1（対応ブラウザ）: 進行度をCSSスクロール駆動で 0→1 にする。
   Safari 等の未対応ブラウザはこの @supports を素通りし、代わりにJSが進行度をセットする。 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.c-recruit {
			view-timeline: --recruit-view block;
			animation-name: seki-recruit-progress;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --recruit-view;
		}
	}
}

@keyframes seki-recruit-progress {
	from {
		--recruit-progress: 0;
	}

	to {
		--recruit-progress: 1;
	}
}

/* news */
.c-news {
	background-color: var(--color-white);
	padding-block-end: 2rem;
	font-weight: 700;

	.headline_l {
		justify-content: start;
		justify-items: start;
		margin-inline: 0 auto;
	}
}

.c-news-inner {
	display: grid;
	max-width: 1160px;
	margin-inline: auto;

	@media(1190px >=width) {
		margin-inline: 1rem;
	}
}

.c-news-innner-lists {
	width: 100%;
	max-width: 925px;

	h3 {
		font-size: 0.938rem;
	}

	a {
		text-decoration: none;
		display: block;
		width: 100%;
		padding-inline: 0.25em;
		color: var(--color-text);
		padding-block: 1.025rem;
		color: var(--color-corporate-heading);
	}

	h3 a {
		margin-inline-start: 0.5rem;
	}

	.en-type a {
		font-size: 0.85rem;
		letter-spacing: 1px;
		display: block;
		padding-inline: 1rem
	}

	li {
		background-color: var(--color-white);
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--color-corporate-heading);

		&:nth-child(1) {
			border-top: 1px solid var(--color-corporate-heading);
		}
	}

	li:hover {
		background-color: var(--color-corporate-heading);

		a {
			color: var(--color-ivory);
		}
	}
}

@media(1024px <=width) {
	.c-news-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2rem;
		justify-content: space-between;
		align-items: start
	}

	.c-news-innner-lists {
		justify-self: end;
	}

	.c-news {
		padding-block: clamp(2.188rem, -1.229rem + 7.12vw, 5rem);
	}
}

.c-top-news-link {
	margin-block-start: 22px;
}

.c-top-news-link a {
	font-weight: 700;
	justify-content: flex-end;
	display: flex;
	gap: 1rem;
	transition: 0.3s linear;

	&:hover {
		opacity: 0.8;
		color: var(--color-text);

		.c-arrow-circle {
			background-color: var(--color-corporate-heading);
			color: var(--color-white);
		}
	}
}

span:not(.c-arrow-circle):not(.c-site-header__cart-count):not(.c-underline-reveal) {
	display: block;
}

.c-arrow-circle--medium {
	--circle-size: 1.5rem;
	--arrow-width: 0.4rem;
}

@media(600px >=width) {
	.c-button-area .c-button {
		width: 80vw;

		a.wp-element-button {
			width: 100%;
			justify-content: center
		}
	}
}