@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* =========================================================
 * Floating banner  (PC: 右下 / SP: 下部中央)
 * ========================================================= */
.l-floating {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 518px;                  /* PC の最大幅 (345px の 1.5倍) */
	max-width: calc(100vw - 40px);
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	transform: translateX(48px);
	pointer-events: none;
	/* 右からふわっと: opacity + 右→左 translate を 0.7s でゆっくり */
	transition: opacity 0.7s ease, visibility 0s linear 0.7s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.l-floating.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: opacity 0.7s ease, visibility 0s linear 0s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* フッターに到達したら (PC / SP 共通) フローティングをふわっと消す。
 * is-visible より後に定義し、同詳細度で上書きする。 */
.l-floating.is-visible.is-footer-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(48px);
	transition: opacity 0.7s ease, visibility 0s linear 0.7s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.l-floating__banner {
	display: block;
	line-height: 0;
	transition: transform 0.3s ease;
	/* ドロップシャドウ (X0 Y0 blur30 #2B2525 15%)。角丸PNGに沿うよう filter で。 */
	filter: drop-shadow(0 0 30px rgba(43, 37, 37, 0.15));
}

.l-floating__banner:hover {
	transform: translateY(-2px);
}

.l-floating__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* SP: 下部・左右 20px の余白 (幅 = 100vw - 40px) */
@media screen and (max-width: 768px) {
	.l-floating {
		left: 20px;
		right: 20px;
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/* 下層ページでは追従フローティングバナーを表示しない（TOP専用）。
 * is-visible が JS で付いても display:none が勝つ。 */
.is-subpage .l-floating {
	display: none;
}

/* =========================================================
 * Responsive utility classes
 * ========================================================= */
.sp-only { display: none; }
@media screen and (max-width: 768px) {
	.sp-only { display: inline; }
	.pc-only { display: none !important; }
}

/* =========================================================
 * 中間リロード時の anim skip (スクロールロックは廃止)
 * ========================================================= */
/* リロード時 (scrollY > 0) → FV アニメを全部スキップして最終状態を表示 */
.no-hero-anim .l-header {
	opacity: 1;
	transform: none;
	animation: none;
}
.no-hero-anim .js-hero-title__path {
	fill: currentColor;
	animation: none;
}
.no-hero-anim .page-front__hero-lead {
	opacity: 1;
	transform: translate(0, -50%);
}
.no-hero-anim .page-front__hero-desc {
	opacity: 1;
	margin-bottom: 72px;
	animation: none;
}
.no-hero-anim .page-front__hero__wave {
	height: var(--wave-max-h);
	opacity: 1;
	transform: none;
	animation: none;
}

/* =========================================================
 * Base typography
 * ========================================================= */
body {
	font-family: "Noto Sans JP", sans-serif;
	color: #493B3B;
	background-color: #FFF8EA;
}

/* リロード時(scrollY>0)に、通り過ぎたセクションの演出を一瞬で最終状態に確定させるための
 * 一時クラス。これが付いている間だけ transition/animation を 0s にして即適用する。 */
html.is-anim-skip *,
html.is-anim-skip *::before,
html.is-anim-skip *::after {
	transition-duration: 0s !important;
	animation-duration: 0s !important;
	transition-delay: 0s !important;
	animation-delay: 0s !important;
}

.eng {
	font-family: "DM Sans", sans-serif;
}

/* =========================================================
 * Utilities
 * ========================================================= */
.w-1280 {
	width: 100%;
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* =========================================================
 * 共通ページヘッド（下層タイトル帯: NEWS / CONTACT など）
 * template-parts/page-head.php
 * ========================================================= */
.l-page-head {
	border-bottom: 1.5px solid #F5A313;      /* 共通ヘッドの下線（全幅） */
}
.l-page-head__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 165px 40px 64px;               /* 上165 / 下64（英字の上・日本語の下 = コンテンツインナー） */
	display: flex;
	flex-direction: column;
	align-items: flex-start;                 /* 左寄せ縦組み */
	gap: 8px;                                 /* 英字↔日本語 8px */
}
/* パンくず（TOP — ページ名） */
.l-page-head__breadcrumb {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
}
.l-page-head__breadcrumb a {
	color: #B9AFA5; /* TOPは薄く */
	text-decoration: none;
	transition: color 0.3s ease;
}
.l-page-head__breadcrumb a:hover {
	color: #493B3B;
}
.l-page-head__breadcrumb-sep {
	width: 14px;
	height: 2px;
	background: #493B3B;
	flex-shrink: 0;
}
.l-page-head__breadcrumb-current {
	color: #493B3B;
}
/* タイトル: 日本語は既定で左揃え（右揃えにしたいページは各ページCSSで上書き） */
.l-page-head__title {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
}
.l-page-head__title .l-page-head__jp {
	align-self: flex-start;
}
.l-page-head__eng {
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-size: 80px;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #F5A313;
}
.l-page-head__jp {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0.2em;                    /* 20% */
}

@media screen and (max-width: 768px) {
	.l-page-head__inner {
		padding: 145px 20px 40px;             /* SP: 上145 / 下40 */
		gap: 4px;                             /* SP: 要素間 4px */
	}
	.l-page-head__breadcrumb {
		font-size: 12px;
		margin-bottom: 24px;
	}
	.l-page-head__title { gap: 4px; }
	.l-page-head__eng {
		font-size: 48px;                      /* SP */
	}
	.l-page-head__jp {
		font-size: 14px;                      /* SP */
	}
}

/* =========================================================
 * 共通ページヒーロー（l-page-hero: 100vh FV + 3色波 + 覆い演出）
 * template-parts/page-hero.php / js/page-hero.js
 * 進捗: --page-hero-progress (JSが更新)
 *   0→0.85 橙の波が競り上がる / 0→0.5,0.6 青緑・黄がおさまる
 *   0.85→1 波が消え、固定カバー(blur+橙70%)へシームレスに引き継ぎ
 * ========================================================= */
:root {
	--page-hero-progress: 0;

	/* TOPページの登場アニメのテンポ（1か所で調整できるよう変数化）。
	 * **個々のアニメーション速度は元のまま**（文字送り 0.05s刻み / 0.6s、フェード 0.7s）。
	 * 変えたのは“開始タイミング”だけ。旧は文字送りの完了(≒1.75s)を待って
	 * 見出し1.85s→本文2.05s→カード2.2s… と順番待ちしていたのを、
	 * 文字送りの途中から重ねて走らせるようにした。 */
	--fa-char-step: 0.05s;   /* 1文字あたりの遅れ（元の値） */
	--fa-char-dur: 0.6s;     /* 1文字のスライド時間（元の値） */
	--fa-d1: 0.30s;          /* 見出し（文字送りに被せる） */
	--fa-d2: 0.45s;          /* 本文・リード */
	--fa-d3: 0.60s;          /* ボタン・画像など */
}

.l-page-hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	overflow: visible;
}

/* FV写真: 背景固定（次セクションの背景として残り続ける） */
.l-page-hero__bg {
	position: fixed;
	inset: 0;
	z-index: -3;
}
.l-page-hero__bg-img,
.l-page-hero__bg picture {
	display: block;
	width: 100%;
	height: 100%;
}
.l-page-hero__bg-img {
	object-fit: cover;
}
/* カスタムフィールド由来のFVメディア（画像/動画共通）。
 * cover の基準は top center: 縦長画面でPC素材を流用しても上部の被写体が残る */
.l-page-hero__bg-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* PC=動画・SP=画像 など種別混在時のみ2要素をCSSで出し分け */
@media screen and (max-width: 768px) {
	.l-page-hero__media--pc { display: none; }
}
@media screen and (min-width: 769px) {
	.l-page-hero__media--sp { display: none; }
}

/* 覆い切り後の固定カバー: ぼかしFV写真 + 橙70% tint + black10%
 * z-index 負値でコンテンツの背後に敷き、透過セクションの背景になる。
 * backdrop-filter は iOS の fixed で不安定 → 写真の複製を filter:blur でぼかす。 */
.l-page-hero__cover {
	position: fixed;
	inset: 0;
	z-index: -2;
	overflow: hidden; /* scaleで広げたぼかし写真をクリップ */
	isolation: isolate;
	pointer-events: none;
	opacity: clamp(0, calc((var(--page-hero-progress) - 0.85) / 0.1), 1);
	/* 慣性スクロールの微振動によるチラつき防止（TOPと同様の平滑化） */
	transition: opacity 0.3s ease;
}
/* ぼかしたFV写真（最背面）
 * ※覆い完了後は不透明オレンジを継続する仕様になったため非表示。
 *   透過に戻したい場合は display と ::before の alpha を調整 */
.l-page-hero__cover-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	filter: blur(25px);
	transform: scale(1.1); /* blurで生じる透明な縁を隠す */
}
.l-page-hero__cover-img img,
.l-page-hero__cover-img video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.l-page-hero__cover-img .l-page-hero__bg-media {
	object-position: top center;
}
/* 不透明オレンジ（波が引いた後も100%を継続し、FV写真が透けないように） */
.l-page-hero__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #F5A313;
}

/* タイトル（FV左下・波の上）
 * PC: 幅100%・左80px・下120px。文字は 1440px 幅比率でスケール
 *（英字 80/1440 = 5.556vw / 日本語 16/1440 = 1.111vw） */
.l-page-hero__inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 120px;
	padding-left: 80px;
	z-index: 901; /* 波レイヤー(900)より前面・ヘッダー(9999)より背面 */
	color: #fff;
	/* 橙の競り上がりに合わせてタイトルはフェードアウト（TOPのFVと同様） */
	opacity: calc(1 - clamp(0, calc(var(--page-hero-progress) / 0.5), 1));
}
.l-page-hero__title {
	font-weight: 600;
	font-size: calc(100vw * 80 / 1440);
	line-height: 100%;
	text-transform: uppercase;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.l-page-hero__sub {
	margin-top: 20px;
	font-weight: 700;
	font-size: calc(100vw * 16 / 1440);
	line-height: 160%;
	letter-spacing: 0.2em;
}

/* =========================================================
 * 共通テキストアニメ指示システム（js/text-anim.js）
 * 要素に data-anim="番号" を付けるだけ（複数はスペース区切り）
 *   1 = パチパチ   … hoverで文字ポップ + パーティクル
 *   2 = 横からｽｽｽ … inviewで1文字ずつスライドイン
 *   3 = 下からフワ … inviewで要素ごとフェードアップ
 * ========================================================= */
.anim-char {
	display: inline-block;
	white-space: pre;
	vertical-align: top;
}
.anim-char__text {
	display: inline-block;
}

/* --- 1: パチパチ（ポップ） --- */
.anim-char.is-pop {
	animation: animCharPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* SPの自動ポップは1.5倍ゆっくり（js/text-anim.js の autoPop が付与） */
.anim-char.is-pop--slow {
	animation-duration: 0.68s;
}
@keyframes animCharPop {
	0%   { transform: translateY(0) scale(1); }
	35%  { transform: translateY(-14%) scale(1.12) rotate(-3deg); }
	100% { transform: translateY(0) scale(1); }
}
/* パーティクル層（画面全体・操作は妨げない） */
.c-anim-burst {
	position: fixed;
	inset: 0;
	z-index: 9998; /* ヘッダー(9999)の直下 */
	pointer-events: none;
	overflow: hidden;
}
.c-anim-burst b {
	position: absolute;
	border-radius: 50%;
	will-change: transform, opacity;
}

/* --- 2: 横からｽｽｽ（page-front__about__title と同じ動き） --- */
html.js-text-anim [data-anim~="2"] .anim-char {
	overflow: hidden;
}
html.js-text-anim [data-anim~="2"].is-anim-done .anim-char {
	overflow: visible; /* 表示後は 1 のポップがクリップされないよう解放 */
}
html.js-text-anim [data-anim~="2"] .anim-char__text {
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
html.js-text-anim [data-anim~="2"].is-anim-in .anim-char__text {
	transform: translateX(0);
}

/* --- 4: 白ワイプ（画像リビール）---
 * 発火前: 中身は非表示（カーテンだけ可視）
 * 0〜0.55s: 白い塗りが左→右に伸びて全面を覆う
 * 0.55s: 覆い切った瞬間に中身を表示
 * 0.55〜1.1s: 塗りの左端が右へ引いて消え、中身が現れる */
html.js-text-anim [data-anim~="4"] {
	position: relative;
	visibility: hidden;
}
html.js-text-anim [data-anim~="4"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	visibility: visible;
	z-index: 2;
	pointer-events: none;
}
html.js-text-anim [data-anim~="4"].is-anim-in {
	animation: animWipeContent 0s linear 0.55s both;
}
html.js-text-anim [data-anim~="4"].is-anim-in::after {
	animation: animWipeCurtain 1.1s both;
}
@keyframes animWipeContent {
	from { visibility: hidden; }
	to   { visibility: visible; }
}
@keyframes animWipeCurtain {
	0% {
		transform: scaleX(0);
		transform-origin: left;
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}
	50% {
		transform: scaleX(1);
		transform-origin: left;
	}
	50.001% {
		transform: scaleX(1);
		transform-origin: right; /* 覆い切りの瞬間に基点を右へ切替（見た目は不変） */
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}

/* --- 3: 下からフワ --- */
html.js-text-anim [data-anim~="3"] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js-text-anim [data-anim~="3"].is-anim-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.anim-char.is-pop { animation: none; }
	html.js-text-anim [data-anim~="4"] {
		visibility: visible;
	}
	html.js-text-anim [data-anim~="4"]::after {
		display: none;
	}
	html.js-text-anim [data-anim~="2"] .anim-char__text {
		transform: none;
		transition: none;
	}
	html.js-text-anim [data-anim~="3"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- 波レイヤー（fixed・画面下） ---- */
.l-page-hero__waves {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900; /* ヘッダー(9999)より下・コンテンツより上 */
	pointer-events: none;
}
/* 波の構造: TOPの page-front__hero__wave と同一
 * wave div = 水位(ベタ塗り・rest 0) / caps = 波形(40.7vh) / svg = 400%幅サイン波 */
.l-page-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0; /* 水位: rest は 0（cap のみ表示）= TOPと同じ */
	background: var(--wave-color);
	--wave-edge-h: 40.7vh; /* TOPと同一の波形(cap)高さ */
}
.l-page-hero__wave-caps {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: var(--wave-edge-h);
	margin-bottom: -2px; /* body との継ぎ目を消す（TOPと同じ overlap） */
	overflow: hidden;
}
.l-page-hero__wave-svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 400%; /* viewBox 4000 / 周期 2000 → translateX(-50%) でシームレス（TOPと同一） */
	height: 100%;
	display: block;
	will-change: transform;
}
.l-page-hero__wave-svg path {
	fill: var(--wave-color);
}
/* 流速・向き: TOPと同一（back L 7.4s / mid R 5.65s / front L 4.35s） */
.l-page-hero__wave--orange .l-page-hero__wave-svg { animation: pageHeroFlowL 7.4s linear infinite; }
.l-page-hero__wave--yellow .l-page-hero__wave-svg { animation: pageHeroFlowR 5.65s linear infinite; }
.l-page-hero__wave--teal   .l-page-hero__wave-svg { animation: pageHeroFlowL 4.35s linear infinite; }
/* TOPの waveFlowL/R と同じ理由で -12.5%〜-62.5% に位相シフト(見た目不変・継ぎ目対策) */
@keyframes pageHeroFlowL {
	from { transform: translateX(-12.5%); }
	to   { transform: translateX(-62.5%); }
}
@keyframes pageHeroFlowR {
	from { transform: translateX(-62.5%); }
	to   { transform: translateX(-12.5%); }
}
@media (prefers-reduced-motion: reduce) {
	.l-page-hero__wave-svg { animation: none !important; }
}

/* 波の登場アニメ: TOP の waveRise と同じ「下からふわっと出現」
 * (opacity 0 + translateY(40px) → 定位置。to 省略で現在の算出値へ補間)
 * fill: backwards … 終了後はアニメの影響を外し、スクロール連動の
 * opacity/transform calc にシームレスに引き継ぐ */
@keyframes pageHeroRise {
	from { opacity: 0; transform: translateY(40px); }
}
/* 途中リロード時(scrollY>0)は JS が no-page-hero-rise を付与してスキップ */
html.no-page-hero-rise .l-page-hero__wave {
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.l-page-hero__wave { animation: none !important; }
}

/* 橙（最背面・濃度70%）: スクロールで水位が競り上がり全画面を覆う（TOPのback相当）
 * 競り上がりは height ではなく translateY（heightだと毎フレームレイアウトが走り
 * SPでガタつくため）。高さ110vh固定で、進捗0では丸ごと画面下へ逃がす */
.l-page-hero__wave--orange {
	--wave-color: #F5A313;
	z-index: 1;
	/* フェードアウトはカバー(不透明橙・0.95で完了)より後の 0.95→1.0 に遅延。
	 * 先に薄くなるとカバー未完了の一瞬に素のFV写真(顔)が透けるため */
	opacity: calc(0.7 * clamp(0, calc(1 - (var(--page-hero-progress) - 0.95) / 0.05), 1));
	height: 110vh;
	transform: translateY(calc(110vh * (1 - clamp(0, calc(var(--page-hero-progress) / 0.85), 1))));
	will-change: transform;
	animation: pageHeroRiseOrange 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards;
	/* カバー(.l-page-hero__cover)のopacityと同じ平滑化を入れて受け渡しを同期。
	 * これが無いと速いスクロール時に波が即消え・カバーが0.3s遅れで追従し、
	 * 両方薄い瞬間ができて素のFV写真がチラッと見える */
	transition: opacity 0.3s ease;
}
/* orange用の登場アニメ: ベースtransformが translateY(110vh) になったため、
 * そこからさらに+40px下 → 定位置 の補間で従来と同じ「下からふわっと」を再現 */
@keyframes pageHeroRiseOrange {
	from { opacity: 0; transform: translateY(calc(110vh + 40px)); }
}
/* 橙波はヒーロー内absoluteのため、覆い切り後さらにスクロールするとヒーローごと
 * 画面上へ抜けて下側が開く。下に1画面ぶんの延長スラブを付け、カバー(不透明橙)への
 * 受け渡しが終わるまでビューポート下部が素のFV写真に戻らないようにする */
.l-page-hero__wave--orange::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: var(--wave-color);
}

/* 黄（中間・濃度70%）: 進捗0→0.6 で縮んでおさまり消える（TOPのmid相当） */
.l-page-hero__wave--yellow {
	--wave-color: #FDCE00;
	z-index: 2;
	transform-origin: bottom;
	transform: scaleY(calc(1 - clamp(0, calc(var(--page-hero-progress) / 0.6), 1)));
	opacity: calc(0.7 * clamp(0, calc(1 - var(--page-hero-progress) / 0.6), 1));
	animation: pageHeroRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards;
}

/* 青緑（最前面・100%）: 進捗0→0.5 で縮んでおさまり消える（TOPのfront相当） */
.l-page-hero__wave--teal {
	--wave-color: #10A9AC;
	z-index: 3;
	transform-origin: bottom;
	transform: scaleY(calc(1 - clamp(0, calc(var(--page-hero-progress) / 0.5), 1)));
	opacity: clamp(0, calc(1 - var(--page-hero-progress) / 0.5), 1);
	animation: pageHeroRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards;
}

/* ---- 覆い完了後に最初のセクションを表示（data-hero-reveal 付与）
 * TOP の about エリアと同様: 覆い完了後、中身(インナー直下の要素)が
 * 中央で順に下からふわっと表示（stagger）。 ---- */
html.js-page-hero [data-hero-reveal] {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] {
	opacity: 1;
}
/* インナー(w-1280)直下の要素を順次ふわっと（最大8要素まで stagger）
 * data-anim 付き要素は共通テキストアニメ側に委ねるため除外 */
html.js-page-hero [data-hero-reveal] .w-1280 > *:not([data-anim]) {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:not([data-anim]) {
	opacity: 1;
	transform: translateY(0);
}
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(1):not([data-anim]) { transition-delay: 0.55s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(2):not([data-anim]) { transition-delay: 0.75s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(3):not([data-anim]) { transition-delay: 0.75s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(4):not([data-anim]) { transition-delay: 1.15s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(5):not([data-anim]) { transition-delay: 1.35s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(6):not([data-anim]) { transition-delay: 1.55s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(7):not([data-anim]) { transition-delay: 1.75s; }
html.js-page-hero body.is-page-hero-covered [data-hero-reveal] .w-1280 > *:nth-child(8):not([data-anim]) { transition-delay: 1.95s; }

/* hero-reveal 配下の 3(下からフワ) は覆い完了に同期させる:
 * 覆い完了前は is-anim-in が付いていてもホールドし、covered で stagger 発火 */
html.js-page-hero body:not(.is-page-hero-covered) [data-hero-reveal] [data-anim~="3"] {
	opacity: 0 !important;
	transform: translateY(28px) !important;
}
html.js-page-hero [data-hero-reveal] [data-anim~="3"]:nth-child(1) { transition-delay: 0.55s; }
html.js-page-hero [data-hero-reveal] [data-anim~="3"]:nth-child(2) { transition-delay: 0.75s; }
html.js-page-hero [data-hero-reveal] [data-anim~="3"]:nth-child(3) { transition-delay: 0.95s; }
html.js-page-hero [data-hero-reveal] [data-anim~="3"]:nth-child(4) { transition-delay: 1.15s; }

@media (prefers-reduced-motion: reduce) {
	html.js-page-hero [data-hero-reveal],
	html.js-page-hero [data-hero-reveal] .w-1280 > *:not([data-anim]),
	html.js-page-hero body:not(.is-page-hero-covered) [data-hero-reveal] [data-anim~="3"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media screen and (max-width: 768px) {
	.l-page-hero {
		min-height: 480px;
	}
	.l-page-hero__inner {
		bottom: 40px;
		padding-left: 20px;
	}
	.l-page-hero__title {
		font-size: 44px;
	}
	.l-page-hero__sub {
		font-size: 14px;
	}
	/* SP: 波形(cap)高さは TOP の SP と同一 */
	.l-page-hero__wave {
		--wave-edge-h: clamp(198px, 55vw, 286px);
	}
}

/* =========================================================
 * Header
 * ========================================================= */
/* PC: ヘッダー自体を浮いたバーに。top 10px / 左右 20px (= 100vw - 40px) / 角丸 8px。 */
.l-header {
	position: fixed;
	top: 10px;
	left: 20px;
	right: 20px;
	z-index: 9999;
	border-radius: 8px;
	opacity: 0;
	transform: translateY(-100%);
	/* hero-desc 完了 (--hero-desc-delay + --hero-desc-dur) +0.25s 後に降りてくる */
	animation: headerIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--hero-desc-delay) + var(--hero-desc-dur) + 0.25s) forwards;
}

/* すりガラス背景。バー全面に敷く (inset:0)。
 * backdrop-filter は fixed 子孫の包含ブロックを作り SP メニュー
 * (.l-header__nav__wrap : fixed/inset:0) を壊すため、nav の祖先にならない
 * 疑似要素に持たせている。 */
.l-header::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 248, 234, 0.4); /* #FFF8EA 40% */
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	z-index: -1;
	pointer-events: none;
}

/* SP (ハンバーガー): 全幅メニューが .l-header を包含ブロックにするため、
 * ヘッダーを全幅 (top:0/left:0/width:100%) に戻して overlay が画面全体を覆えるようにする。 */
@media screen and (max-width: 1080px) {
	.l-header {
		top: 0;
		left: 0;
		right: auto;
		width: 100%;
		border-radius: 0;
	}
}

/* SP版のカバー実装は is-about-active 系ルールの後（下方）にまとめて置く
 * （ソース順で確実に勝たせるため）。→ 「SP: about cover」ブロックを参照 */

/* SP: ヘッダーのすりガラス風背景 (translucent + blur) を無くす。 */
@media screen and (max-width: 768px) {
	.l-header::before {
		display: none;
	}
}

@keyframes headerIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* headerIn 完了後は transform を外す (JS が animationend で付与)。
 * transform が残ると ::before の backdrop-filter(すりガラス)が
 * 効かない (transform 付き祖先が backdrop を隔離するため)。位置は同じなので見た目不変。 */
.l-header.is-settled {
	animation: none;
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.l-header {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* 下層ページ: ヒーロー連動の登場アニメ（headerIn は hero-desc 完了後 ≈4.1s に発火）を
 * 使わず、ヘッダーを最初から表示する。ヒーローの無い下層で数秒間ヘッダーが出ない問題を回避。 */
.is-subpage .l-header {
	opacity: 1;
	transform: none;
	animation: none;
}

.l-header__inner {
	display: flex;
	justify-content: space-between;
	padding: 24px 40px;
}

/* PC: ヘッダーが左右 20px inset されるぶん inner padding を調整。 */
@media screen and (min-width: 1081px) {
	.l-header__inner {
		padding: 18px 20px;
	}
}

.l-header__nav__wrap {
	display: flex;
	align-items: center;
	gap: 0; /* 間隔は各要素の margin で個別指定 (gnavi↔SNS 32 / SNS↔buttons 24) */
}

/* SNS ボタン (NEWS と お問い合わせ の間) */
.l-header__sns {
	display: flex;
	align-items: center;
	gap: 6px;            /* ボタン同士 */
	margin-left: 32px;   /* gnavi との間 */
	margin-right: 24px;  /* 問い合わせボタンとの間 */
}

.l-header__sns-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #493B3B;
	transition: transform 0.3s ease;
}

.l-header__sns-link:hover {
	transform: translateY(-2px);
}

.l-header__sns-link img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.l-header__menu {
	display: flex;
	align-items: center;
	gap: 40px;
}

.l-header__menu-link {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #493B3B;
	transition: color 0.25s ease;
	font-weight: 600;
	font-size: 18px;
}

.l-header__menu-link:hover {
	color: #F5A313;
}

/* PC: 日本語サブテキストは非表示 (ハンバーガー時のみ表示) */
.l-header__menu-jp {
	display: none;
}

/* SP (ハンバーガー) 限定ボタン。PC では非表示
 * .btn-main の display:flex に勝つため複合セレクタで specificity 上げる */
.l-header__btn--recruit-sp.btn-main {
	display: none;
}

/* 矢印を右上に向ける (btn-main--external) */
.btn-main--external::after {
	transform: rotate(-45deg);
}
.btn-main--external:hover::after {
	transform: rotate(-45deg) translateX(4px);
}

/* PC: 背景 svg は SP 専用なので非表示 */
.l-header__nav__bg {
	display: none;
}

/* ---- Accordion (ABOUT US 等) ---- */
.l-header__menu-item--has-children {
	position: relative;
}

.l-header__menu-icon {
	width: 12px;
	height: 12px;
	/* インライン svg。stroke は currentColor → リンク色を継承 (hover でオレンジ) */
	color: inherit;
	transition: transform 0.3s ease;
}

/* hover回転はホバー可能端末のみ。タッチ端末はタップ後もhoverが残り
 * (sticky hover) アイコンが×のまま戻らなくなるため除外。SPは is-accordion-open で制御。 */
@media (hover: hover) {
	.l-header__menu-item--has-children:hover .l-header__menu-icon {
		transform: rotate(45deg);
	}
}

.l-header__submenu {
	position: absolute;
	/* 背景ブラーのバー(.l-header)の 8px 下に出す。
	 * メニュー項目下端〜バー下端 ≒ 37px + 8px ≒ 45px。 */
	top: calc(100% + 45px);
	left: 0;
	min-width: 200px;
	padding: 20px 24px;
	background: #fff;                       /* 白い角丸カード */
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(73, 59, 59, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease;
}

/* 余白(45px)を埋める透明ブリッジ → バーをまたいでも hover が途切れない */
.l-header__submenu::before {
	content: "";
	position: absolute;
	top: -45px;
	left: 0;
	width: 100%;
	height: 45px;
}

.l-header__menu-item--has-children:hover .l-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.l-header__submenu-item + .l-header__submenu-item {
	margin-top: 14px;
}

.l-header__submenu-link {
	color: #493B3B;
	font-size: 16px;
	font-weight: 600;
	display: block;
	width: max-content;
	transition: color 0.25s ease;
}

.l-header__submenu-link:hover {
	color: #F5A313;
}

.l-header__buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	line-height: 1.6;
}

/* フローティング画像ボタンは PC では非表示 (ハンバーガーメニュー内のみ) */
.l-header__floating-banner {
	display: none;
}

/* ---- 共通ボタン (.btn-main) : 波うち hover -----
 * 色は --btn-base / --btn-wave で切り替え、動きとレイアウトは共通
 */
.btn-main {
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	padding: 10px 24px 10px 32px;
	border-radius: 9999px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--btn-base);
	line-height: 1.6;
	font-weight: 600;
	/* 文字色は波が文字を覆う頃に切り替わるよう少し遅延 */
	transition: color 0.3s ease 0.3s;
}

.btn-main::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -90%;
	right: -90%;
	/* rotate:-8deg で右下が持ち上がっても基色が出ないよう、フラット下端を十分下げる
	 * （幅の広いボタンでも右下端まで確実に覆う） */
	bottom: -80%;
	height: 280%;
	background: var(--btn-wave);
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	translate: 0 120%;
	rotate: 8deg;
	transform-origin: 50% 50%;
	transition:
		translate 0.9s cubic-bezier(.45, .05, .25, 1),
		rotate    1.1s cubic-bezier(.5, -.2, .4, 1.3);
}

.btn-main:hover::before {
	translate: 0 0;
	rotate: -8deg;
}

.btn-main::after {
	content: "→";
	display: inline-block;
	transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}

.btn-main:hover::after {
	transform: translateX(4px);
}

/* ---- color variants ---- */
.btn-orange {
	--btn-base: #F5A313;
	--btn-wave: #ED8900;
	color: #fff;
}

.btn-green {
	--btn-base: #10A9AC;
	--btn-wave: #008184;
	color: #fff;
}


.btn-gray {
	--btn-base: #FFFFFF;
	--btn-wave: #493B3B; /* hover の波(::before)を濃色に */
	color: #493B3B;
}

/* hover 時は波が濃色で覆うので文字を白に */
.btn-gray:hover {
	color: #fff;
}

/* news セクション内のグレーボタンは hover 波をオレンジに (文字白は上の hover で共通) */
.page-front__news__inner.w-1280 .btn-gray {
	--btn-wave: #F5A313;
}

.btn-dark {
	--btn-base: #493B3B;
	--btn-wave: #2B2525;
	color: #fff;
}

.page-front__about__btn {
	font-size: 16px;
	line-height: 1.6;
	margin-top: 40px;
}

/* =========================================================
 * Front: Hero
 * ========================================================= */

/* ---- timing tokens ---- */
:root {
	/* 各段階 +0.25s の余白を挟んで連鎖
	 * 0.25 [draw 1.0s] 1.25 [fill 0.5s] 1.75 +0.25 → 2.0 [lead 0.8s] 2.8 +0.25 → 3.05 [desc 0.8s] 3.85
	 */
	--hero-draw-delay: 0.25s;
	--hero-draw-dur:   1s;     /* 1文字ごとパス分割なので同時描画で自然 */
	--hero-fill-delay: 1.25s;
	--hero-fill-dur:   0.5s;
	--hero-lead-delay: 2s;
	--hero-lead-dur:   0.8s;
	--hero-desc-delay: 3.05s;
	--hero-desc-dur:   0.8s;

	/* FV スライダー (Ken Burns)
	 * interval = 1枚の表示時間 (この間 scale 1 → 1.025)
	 * fade     = クロスフェード時間 (この間 1.025 → 1.05 へ拡大しながら消える)
	 * ※ JS 側の autoplaySpeed / speed と合わせること */
	--hero-slide-interval: 3.5s;
	--hero-slide-fade:     1.2s;
	/* ズームは「表示+フェード」より長く取り、表示中に止まらないようにする
	 * (linear 7s で to:1.05 → 表示終わり 3.5s 時点で約 1.025) */
	--hero-slide-zoom-dur: 7s;
}

/* ---- layout ---- */
.page-front__hero {
	position: relative;
	height: 100vh;
}

/* =========================================================
 * Hero waves (画面下にべったり積み重なる色付き波)
 * ========================================================= */
/* 波 wrapper を 2 分割。
 * 各 wave は独立した position:fixed。z-index でレイヤリング:
 * back (5) → service/about (10) → mid (11) → front (12)
 */
.page-front__hero__wave {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--wave-max-h);     /* = 水位(body)。スクロールで成長して画面を覆う (rest=0) */
	background: var(--wave-color); /* 水の本体(ベタ塗り) */
	/* PC: 波形(cap)は FV の高さ(37vh ≒ hero-title 中間)で一定。
	 * 以前は --hero-fade-progress でスクロール圧縮していたが、about から戻る際に
	 * 「カバーが引いて小さい波が見えた後に高い波へ伸び直す(塗りつぶし復元)」現象が出るため一定にした。
	 * (about 中はカバー本体が覆うので cap 高さは見えない。SP は下の override で固定値) */
	--wave-edge-h: 40.7vh; /* 波形(cap)の高さ (37vh の 1.1倍) */
	pointer-events: none;
	transition: opacity 0.45s ease;
	/* hero-desc のタイミングで下からふわっと出現 */
	animation: waveRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hero-desc-delay) both;
}

/* 波形(cap)。body の上端に乗せる。 */
.page-front__hero__wave__caps {
	position: absolute;
	bottom: 100%;                  /* body の真上 */
	left: 0;
	width: 100%;
	height: var(--wave-edge-h);
	margin-bottom: -2px;           /* body との継ぎ目を消す (overlap) */
	overflow: hidden;              /* 200%幅svgの横はみ出しをクリップ */
}

/* 周期波形を 200%幅で持ち、translateX でシームレスにループ流動 (GPU 合成で滑らか)。
 * 各層 違う速度/向きで流すと重なりが変化 → デザインが流れる波打ち。 */
.page-front__hero__wave__svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 400%;                   /* viewBox 4000 / period 2000 → translateX(-50%)=1周期でシームレス */
	height: 100%;
	display: block;
	will-change: transform;
}

.page-front__hero__wave__svg path {
	fill: var(--wave-color);
}

/* 波の横流れ速度。基準(1×)は back=29.6s / mid=22.6s / front=17.4s を 4倍速で固定。 */
.page-front__hero__wave--back  .page-front__hero__wave__svg { animation: waveFlowL 7.4s linear infinite; } /* 29.6 / 4 */
.page-front__hero__wave--mid   .page-front__hero__wave__svg { animation: waveFlowR 5.65s linear infinite; } /* 22.6 / 4 */
.page-front__hero__wave--front .page-front__hero__wave__svg { animation: waveFlowL 4.35s linear infinite; } /* 17.4 / 4 */

/* ループの巻き戻り点で svg のラスター端が画面端に一致すると
 * 端のアンチエイリアス差が1フレームのチラつき(プツッ)として見える。
 * 区間を -12.5%〜-62.5% に位相シフト(移動量・速度は同じ=見た目不変)して
 * 端が常に画面外に留まるようにし、巻き戻りをパターン内部同士にする。 */
@keyframes waveFlowL { from { transform: translateX(-12.5%); }  to { transform: translateX(-62.5%); } }
@keyframes waveFlowR { from { transform: translateX(-62.5%); }  to { transform: translateX(-12.5%); } }

@media (prefers-reduced-motion: reduce) {
	.page-front__hero__wave__svg { animation: none; }
}

.page-front__hero__wave--back {
	--wave-color: #F5A313;
	--wave-max-h: 0px;     /* 水位は cover 時のみ成長。rest は cap(波形)のみ表示 */
	--wave-sway-dur: 8s;
	--wave-sway-amp: -10px;
	z-index: 5;
}

/* about セクション 50vh の padding 範囲をスクロールする間に
 * back wave が高さ300px → 100vh、blur 0 → 25px、色 #F5A313 → rgba(.6) と
 * プログレス連動で連続補間。完了後 1s 遅れで about__inner が fade in。
 */
:root {
	--about-cover-progress: 0;
	--service-cover-progress: 0;
	--challenge-cover-progress: 0;
	--hero-fade-progress: 0;
	/* about の波が覆い切る進捗。SP は短尺レンジ(0.45)、PC は長尺レンジ(0.16)。
	 * PC は about を 200vh ホールドするためレンジが長く、覆いは早い進捗で完了させる。 */
	--about-cover-end: 0.45;
}

@media screen and (min-width: 1081px) {
	:root { --about-cover-end: 0.30; }   /* PC: 0.16 → 0.30 で波の上がりをゆっくり (ぬるっと) */
}

/* スクロールでの覆い演出
 * 0      → 0.5  : 波 (back) が height 300px → 100vh まで“ベタ塗り”で上昇
 * 0.5    → 1.0  : 波 SVG が opacity 1→0 で消え、cover (orange60% + black10% + blur25px) が 0→1 でフェードイン
 * is-about-covered (progress=1 到達) から +1s 後に about__inner が fade in
 */
body.is-about-active .page-front__hero__wave--back {
	animation: none;
	/* 水位の競り上がりは height ではなく translateY で表現（heightだと毎フレーム
	 * レイアウトが走りSPでガタつくため / 本体は単色ベタ塗りなので見た目は等価）。
	 * 高さは最終値(110vh)で固定し、進捗0で (110vh - rest) ぶん画面外へ逃がす */
	height: 110vh;
	transform: translateY(calc((110vh - var(--wave-max-h)) * (1 - clamp(0, calc(var(--about-cover-progress) / var(--about-cover-end)), 1))));
	will-change: transform;
	/* 覆い切り後 (cover-end → +0.1) で fade out。cover の fade in と同期 */
	opacity: clamp(0, calc(1 - (var(--about-cover-progress) - var(--about-cover-end)) / 0.1), 1);
}

/* --- service の wave --mid を about と同じ要領で展開 ---
 * service 自身が #FDCE00 で塗られているので、section が viewport top に到達する
 * 瞬間 (progress=1) まで波を不透明に保ち、最後の 0.95→1.0 だけで snap する
 * → 波と section bg の境界が見えない
 */
body.is-service-active .page-front__hero__wave--mid {
	animation: none;
	/* 進捗 0→0.85 で水位フル。height ではなく translateY で競り上げ（SPのガタつき対策） */
	height: 110vh;
	transform: translateY(calc((110vh - var(--wave-max-h)) * (1 - clamp(0, calc(var(--service-cover-progress) / 0.85), 1))));
	will-change: transform;
	opacity: clamp(0, calc(1 - (var(--service-cover-progress) - 0.9) / 0.1), 1);
}

/* --- challenge の wave --front は service と完全に同じ進捗カーブ --- */
body.is-challenge-active .page-front__hero__wave--front {
	animation: none;
	height: 110vh;
	transform: translateY(calc((110vh - var(--wave-max-h)) * (1 - clamp(0, calc(var(--challenge-cover-progress) / 0.85), 1))));
	will-change: transform;
	opacity: clamp(0, calc(1 - (var(--challenge-cover-progress) - 0.9) / 0.1), 1);
}

/* challenge セクションは波が画面を覆い終わるまで opacity 0、risen で 1 へ */
.page-front__challenge {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-challenge-risen .page-front__challenge {
	opacity: 1;
}

/* challenge を抜けたら波は完全に非表示 (背景に色が透けないように)
 * opacity のみ操作し、wave 側の transition で滑らかに 0↔1 する
 */
body.is-challenge-covered .page-front__hero__wave--back,
body.is-challenge-covered .page-front__hero__wave--mid,
body.is-challenge-covered .page-front__hero__wave--front {
	opacity: 0 !important;
}

/* 全画面オーバーレイ
 * - opacity を progress 0.45 で 0→1 に snap (ほぼ瞬時) → backdrop-filter が即フル強度
 * - tint (orange + black overlay) は bg-color の alpha だけ progress 連動
 * → blur が後から徐々に効くのではなく「波が消えると同時にフル blur」が見える
 */
.page-front__about__cover {
	position: fixed;
	inset: 0;
	z-index: 6;
	background-color: rgba(245, 163, 19, 0);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	opacity: 0;
	pointer-events: none;
	/* スクロール連動で毎フレーム変わる opacity / tint を平滑化。
	 * 慣性スクロールの微振動でブラー濃度がチラつく(濃くなったり薄くなったり)のを防ぐ。 */
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.page-front__about__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background-color 0.3s ease;
}

body.is-about-active .page-front__about__cover {
	/* 覆い切り(cover-end)で opacity を 0→1 に snap (実質瞬間) */
	opacity: clamp(0, calc((var(--about-cover-progress) - var(--about-cover-end)) * 100), 1);
	/* cover-end → +0.1 でオレンジ tint を fade in (alpha だけ) */
	background-color: rgba(245, 163, 19, calc(0.6 * clamp(0, calc((var(--about-cover-progress) - var(--about-cover-end)) / 0.1), 1)));
}

body.is-about-active .page-front__about__cover::before {
	background-color: rgba(0, 0, 0, calc(0.1 * clamp(0, calc((var(--about-cover-progress) - var(--about-cover-end)) / 0.1), 1)));
}

/* service の wave が立ち上がるタイミング (service progress 0.45→0.95) で
 * cover を semi-transparent orange → solid #FDCE00 に色変え。
 * is-service-tinting は service progress > 0 のみ適用 → 戻り時に外れて
 * about の orange/blur 状態に正しく戻る
 */
body.is-service-tinting .page-front__about__cover {
	background-color: rgba(
		calc(245 +  8 * clamp(0, calc((var(--service-cover-progress) - 0.45) / 0.5), 1)),
		calc(163 + 43 * clamp(0, calc((var(--service-cover-progress) - 0.45) / 0.5), 1)),
		calc(19  - 19 * clamp(0, calc((var(--service-cover-progress) - 0.45) / 0.5), 1)),
		calc(0.6 + 0.4 * clamp(0, calc((var(--service-cover-progress) - 0.45) / 0.5), 1))
	);
}

/* 同タイミングで黒10% overlay を fade out */
body.is-service-tinting .page-front__about__cover::before {
	background-color: rgba(0, 0, 0, calc(0.1 * (1 - clamp(0, calc((var(--service-cover-progress) - 0.45) / 0.5), 1))));
}

/* challenge の wave が立ち上がるタイミング (challenge progress 0.45→0.95) で
 * cover を solid #FDCE00 → solid #10A9AC (teal) に色変え。
 * is-challenge-tinting は challenge progress > 0 のみ → 戻ると外れる
 */
body.is-challenge-tinting .page-front__about__cover {
	background-color: rgba(
		calc(253 - 237 * clamp(0, calc((var(--challenge-cover-progress) - 0.45) / 0.5), 1)),
		calc(206 -  37 * clamp(0, calc((var(--challenge-cover-progress) - 0.45) / 0.5), 1)),
		calc(0   + 172 * clamp(0, calc((var(--challenge-cover-progress) - 0.45) / 0.5), 1)),
		1
	);
}

/* ==== SP: about cover ====
 * iOSで backdrop-filter が不安定なため、ぼかしたFV写真そのものを背景に敷く。
 * z-index 13 = 波(z11/12)より前面・about コンテンツ(z15)より背面 → 波が覆い切った後に
 * このブラー背景へ引き継ぎ、コンテンツはその上に出る。
 * opacity は is-about-active の progress 連動（波が覆い切る progress≈end=0.45 でsnap表示）
 * にして、波の競り上がり中は出さない（＝先行してカバーが波を邪魔しない）。
 * このブロックは is-about-active/is-*-tinting より後方に置き、ソース順で確実に勝たせる。 */
/* ==== SP: about cover / 背景動画ブラー ====
 * iOS で backdrop-filter が不安定なため、背景のぼかしは「背景動画(.hero__movie)そのものに
 * filter:blur をかけて流す」ことで表現する（静的画像は置かない）。カバーはオレンジtintのみ担当。
 * 状態は progress の閾値（SPでは上限が 0.40〜0.47 で揺れて不安定）に頼らず、
 * JSが付与する is-about-risen（波が覆った頃）でスナップし、CSS transition で滑らかに切替。
 * カバーは z6 のまま（波の下・後続セクション z10 の下）＝後続コンテンツをブラーに沈めない。 */
@media screen and (max-width: 768px) {
	.page-front__about__cover {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	/* ↓ すべて「about を見ている間だけ」に限定する。service/challenge に入ったら
	 *   （is-service-active / is-challenge-active が付いたら）元の状態へ戻し、
	 *   back波(オレンジ)が下層の動画を覆う持続背景として復活する。
	 *   これをしないと service↔challenge の隙間で背景動画が露出する。 */
	/* 波が覆った後(is-about-risen)にオレンジtintを点灯。ブラーは動画側で表現するので画像は無し */
	body.is-about-risen:not(.is-service-active):not(.is-challenge-active) .page-front__about__cover {
		opacity: 1;
		background-color: rgba(245, 163, 19, 0.5);
	}
	body.is-about-risen:not(.is-service-active):not(.is-challenge-active) .page-front__about__cover::before {
		background-color: rgba(0, 0, 0, 0.1);
	}
	/* 背景動画: FV では sharp、about に入る(is-about-risen)と blur。transition で滑らかに */
	.page-front__hero__movie-video {
		transition: filter 0.45s ease, transform 0.45s ease;
	}
	body.is-about-risen:not(.is-service-active):not(.is-challenge-active) .page-front__hero__movie-video {
		filter: blur(18px);
		transform: scale(1.08); /* blur の透明な縁を画面外へ */
	}
	/* 波(back)を覆い切り後にフェードさせ、下からブラー動画+tintが現れる（about閲覧中のみ） */
	.page-front__hero__wave--back {
		transition: opacity 0.45s ease;
	}
	body.is-about-risen:not(.is-service-active):not(.is-challenge-active) .page-front__hero__wave--back {
		opacity: 0;
	}
}

/* About
 * 100vh の padding 範囲をスクロールしきった時点で進捗1。
 * min-height は padding 込みの最低値だけ確保し、コンテンツは自然な高さで伸びる
 */
.page-front__about {
	position: relative;
	/* mid 波(z11)・front 波(z12)より前面にして中身が波に沈まないように */
	z-index: 15;
	min-height: 100vh;
	padding-top: 100vh;
}

/* スクロールスナップは中途半端な位置から頭へ引き戻すため不使用。
 * 「下スクロールで頭を通過した瞬間だけ一回止める」のは JS で実装 (引き戻し無し)。 */

/* 旧 wrapper フェード(.is-about-risen で ttl/body 全体を opacity 0→1)は per-要素アニメと干渉するので無効化。
 * 代わりに body.is-about-content-in でタイトル各文字 + heading/text/btn を順次アニメする (下記)。 */
.page-front__about__inner__ttl,
.page-front__about__body {
	opacity: 1;
}

/* about: 画面内に入ったタイミングで eng→jp の各文字を左からスライドイン、
 * 続いて heading → text → btn を下からふわっと表示。
 * JS が is-about-content-in を body に付与する。 */
.page-front__about__title .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__about__title .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-about-content-in .page-front__about__title .char-text {
	transform: translateX(0);
}

.page-front__about__heading,
.page-front__about__text,
.page-front__about__btn {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.3s ease 0.3s; /* 波が覆う頃に文字を白へ（btn-mainと同じ遅延を維持） */
}
body.is-about-content-in .page-front__about__heading {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d1);
}
body.is-about-content-in .page-front__about__text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2);
}
body.is-about-content-in .page-front__about__btn {
	opacity: 1;
	transform: translateY(0);
	/* opacity, transform のみ入場ディレイ。color はhover用の0.3sを維持
	 * （単一値だと color まで1.9s遅れ、hover時に濃色波の上で文字が読めなくなる） */
	transition-delay: var(--fa-d3), var(--fa-d3), 0.3s;
}

/* service: タイトル(eng→jp 1文字ずつ slide-in) → heading → text を順次表示。
 * JS が is-service-content-in を body に付与する (service が画面内に入ったタイミング)。 */
.page-front__service__title .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__service__title .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-service-content-in .page-front__service__title .char-text {
	transform: translateX(0);
}

.page-front__service__heading,
.page-front__service__text {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-service-content-in .page-front__service__heading {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d1);
}
body.is-service-content-in .page-front__service__text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2);
}

/* challenge: タイトル(OUR→CHALLENGE→jp 1文字ずつ slide-in) → lead を順次表示。
 * JS が is-challenge-content-in を body に付与する (teal が覆い切ったタイミング)。 */
.page-front__challenge__title .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
/* スライドイン完了後（JSが付与）はポップがクリップされないよう解放（共通） */
.page-front__challenge__title.is-title-pop-ready .char,
.page-front__news__title.is-title-pop-ready .char,
.page-front__service__title.is-title-pop-ready .char {
	overflow: visible;
}
.page-front__challenge__title .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-challenge-content-in .page-front__challenge__title .char-text {
	transform: translateX(0);
}

.page-front__challenge__lead {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-challenge-content-in .page-front__challenge__lead {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2);
}

/* service の PM ブロック: 英字 1文字ずつ slide-in → title → desc 順次。
 * JS が各ブロックの pm-ttl を IntersectionObserver で監視し、そのブロック自身に
 * is-pm-content-in を付与する (PM / IT 複数ブロックを独立に発火させるため body ではなくブロック単位)。
 * その後 list-item は JS の setTimeout stagger で順次 is-visible に。 */
.page-front__service__pm-eng-wrap .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__service__pm-eng-wrap .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
.page-front__service__pm.is-pm-content-in .page-front__service__pm-eng-wrap .char-text {
	transform: translateX(0);
}

.page-front__service__pm-title,
.page-front__service__pm-desc {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.page-front__service__pm.is-pm-content-in .page-front__service__pm-title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d1);
}
.page-front__service__pm.is-pm-content-in .page-front__service__pm-desc {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2);
}

/* service の CD ブロック: 英字 1文字ずつ slide-in → title → desc → img を順次。
 * JS が cd-ttl の IntersectionObserver で is-cd-content-in を付与する。 */
.page-front__service__cd-eng-wrap .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__service__cd-eng-wrap .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-cd-content-in .page-front__service__cd-eng-wrap .char-text {
	transform: translateX(0);
}

.page-front__service__cd-title,
.page-front__service__cd-desc,
.page-front__service__cd-img {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-cd-content-in .page-front__service__cd-title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d1);
}
body.is-cd-content-in .page-front__service__cd-desc {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2);
}
body.is-cd-content-in .page-front__service__cd-img {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d3);
}

.page-front__about__inner.w-1280 {
	display: flex;
	justify-content: center;
	color: #fff;
	padding-top: 180px;
	padding-bottom: 180px;
	gap: 120px;
}

.page-front__about__title {
	position: relative;
}

.page-front__about__title .eng {
	font-size: 80px;
	font-weight: 600;
	text-align: right;
	display: block;
	width: max-content;
}

.page-front__about__title .jp {
	position: absolute;
	bottom: 24px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

.page-front__about__body {
	margin-top: 0;
}

.page-front__about__heading {
	font-size: 32px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	font-weight: 700;
	margin-bottom: 24px;
}

.page-front__about__text {
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.2em;
}

/* PC: about の中身をスクロール連動で
 *   中央固定フェードイン → ホールド → フェードアウト (sticky ではない)。
 * 波は --about-cover-end (PC=0.16) で覆い切るので、その後に中身を表示。
 *   0.20→0.26 : fade in / 0.26→0.90 : hold(≒200vh) / 0.90→1.0 : fade out
 * about のスクロール尺は JS rangeFactor 3.2 と min-height 340vh で確保し、
 * hold を約2画面分(200vh)にしている。
 * 子(ttl/body)は親で表示制御するので常時不透明にし、SP の is-about-risen 演出は無効化。 */
@media screen and (min-width: 1081px) {
	/* about の中身表示にスクロール尺を確保 (JS rangeFactor 1.6 と一致 = 可視ほぼ1画面) */
	.page-front__about {
		min-height: 190vh;
	}

	.page-front__about__inner.w-1280 {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		z-index: 11;          /* orange cover (z6) より前面 */
		opacity: 0;
		pointer-events: none; /* 既定は無効 (消えている間は後続セクションを邪魔しない) */
		/* スクロール進度連動ではなく、表示域に入った瞬間に 0.5s でふわっと in/out */
		transition: opacity 0.5s ease;
	}

	/* 中身が見えている間 (JS が is-about-touchable を付与) は表示 + 操作可能。
	 * クラスの ON/OFF を 0.5s かけてフェード (最初と最後でふわっと)。 */
	body.is-about-touchable .page-front__about__inner.w-1280 {
		opacity: 1;
		pointer-events: auto;
	}

	.page-front__about__inner__ttl,
	.page-front__about__body {
		opacity: 1;
	}
}


.page-front__hero__wave--mid {
	--wave-color: #FDCE00;
	--wave-max-h: 0px;
	--wave-sway-dur: 7s;
	--wave-sway-amp: -8px;
	z-index: 11;
}

.page-front__hero__wave--front {
	--wave-color: #10A9AC;
	--wave-max-h: 0px;
	--wave-sway-dur: 6s;
	--wave-sway-amp: -6px;
	z-index: 12;
}

/* about 表示中は黄色(mid)・緑(front)の波を約2/3 に低くし、中身を邪魔しないようにする
 * (FV では is-about-active が付いていないので 37vh のまま) */
body.is-about-active .page-front__hero__wave--mid,
body.is-about-active .page-front__hero__wave--front {
	--wave-edge-h: 27.5vh; /* 25vh の 1.1倍 (40.7vh の約2/3) */
}

/* Service
 * margin-top: 100vh で section の手前に余白 (mid wave rise 区間)。
 */
.page-front__service {
	position: relative;
	z-index: 10;
	background: #FDCE00;
	margin-top: 30vh; /* 助走 (波が競り上がって覆う区間)。PC上部の空白を圧縮 */
	/* 波が覆い切った時点でタイトルが画面の上から約6割 (下から4割) の位置に来るよう
	 * padding-top を確保する */
	padding-top: 40vh;
	padding-bottom: 0;
	/* challenge と同様、波が覆い切る (is-service-risen) まで矩形を隠す
	 * → 黄色のセクション四角が波より先に見えるのを防ぐ */
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-service-risen .page-front__service {
	opacity: 1;
}

/* Challenge
 * margin-top: 50vh で section の手前に余白 (front wave rise 区間)
 */
.page-front__challenge {
	position: relative;
	z-index: 10;
	margin-top: 15vh;   /* 50vh → 15vh : service 直後に challenge を寄せる (PC) */
	padding-top: 120px;
	padding-bottom: 120px;
	background: #10A9AC;
	color: #fff;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 装飾 SVG (challenge-before.svg) を擬似要素で重ねる */
.page-front__challenge::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/top/challenge-before.svg") no-repeat left 20% bottom / auto 100%;
	pointer-events: none;
	z-index: 0;
}

.page-front__challenge__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 80px;
}

.page-front__challenge__right {
	position: relative;
}

/* カードスタック上のインデックスカウンタ。rotate で 90deg 回転 */
.page-front__challenge__counter {
	position: absolute;
	top: -12px;
	left: -32px;
	z-index: 6; /* カードスタック(最大z5)より前面に出して隠れないように */
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	color: #fff;
	text-orientation: upright;
	transform: rotate(90deg);
	transform-origin: left;
}

.page-front__challenge__left {
	width: 52.89%; /* 677 / 1280 */
}

.page-front__challenge__title {
	position: relative;
}

.page-front__challenge__title-eng {
	display: flex;
	flex-direction: column;
	width: max-content;
	gap: 10px;
	font-size: 80px;
	font-weight: 600;
	line-height: 1;
}

.page-front__challenge__title-eng-line:nth-child(2) {
	margin-left: 78px;
}

.page-front__challenge__title-jp {
	position: absolute;
	top: 40px;
	left: 195px;
}

.page-front__challenge__lead {
	margin-top: 24px;
	margin-left: 72px;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

/* カードスタック スライダー
 * grid 1セルに全カードを重ねる → 親の高さが自動で一番大きいカードに揃う。
 * data-stack="0" が前面、増えるほど後ろ + 右にずれて 5deg ずつ回転
 */
.page-front__challenge__list {
	display: grid;
	width: 410px;
}

.page-front__challenge__list-img {
	width: 100%;
}

.page-front__challenge__list-item {
	grid-column: 1;
	grid-row: 1;
	width: 410px;
	padding: 16px 16px 80px;
	transform-origin: center bottom;
	transition: transform 0.7s cubic-bezier(.45, .05, .25, 1);
}

.page-front__challenge__list-item[data-stack="0"] { transform: translate(0,    0)   rotate(0deg);   z-index: 4; opacity: 1; }
.page-front__challenge__list-item[data-stack="1"] { transform: translate(14px, 6px)  rotate(5deg);   z-index: 3; opacity: 1; }
.page-front__challenge__list-item[data-stack="2"] { transform: translate(28px, 12px) rotate(10deg);  z-index: 2; opacity: 1; }

/* stack >= 3 は非表示。3枚目 (stack=2) になるまで隠れている */
.page-front__challenge__list-item[data-stack="3"],
.page-front__challenge__list-item[data-stack="4"],
.page-front__challenge__list-item[data-stack="5"],
.page-front__challenge__list-item[data-stack="6"],
.page-front__challenge__list-item[data-stack="7"],
.page-front__challenge__list-item[data-stack="8"],
.page-front__challenge__list-item[data-stack="9"] {
	transform: translate(42px, 18px) rotate(15deg);
	z-index: 0;
	opacity: 0;
	pointer-events: none;
}

/* 切り替わる瞬間 active カードは左へスライド + fade out */
.page-front__challenge__list-item.is-card-exiting {
	transform: translate(-120px, 12px) rotate(-6deg);
	opacity: 0;
	z-index: 5; /* 退出中は最前面で見せる */
	transition:
		transform 0.7s cubic-bezier(.45, .05, .25, 1),
		opacity   0.6s ease;
}

.page-front__challenge__list-eng {
	position: absolute;
	right: 0;
	bottom: -10px;
	font-size: 60px;
	line-height: 1;
	letter-spacing: 0;
	opacity: 0.5;
	font-weight: 600;
}

.page-front__challenge__list-item:nth-child(1) { background: #008184; }
.page-front__challenge__list-item:nth-child(2) { background: #E8BF0E; }
.page-front__challenge__list-item:nth-child(3) { background: #EB8801; }
.page-front__challenge__list-item:nth-child(4) { background: #E8BF0E; }

/* ============================================================
 * Challenge: スクロール連動カードめくり (PC のみ / JS が body にクラス付与)。
 * section を縦に伸ばし、inner を fixed で画面中央に固定 → スクロールで 1 枚ずつ捲る。
 * SCROLL_DRIVEN_ENABLED=false / SP では下記クラスが付かず従来レイアウト。
 * ============================================================ */
body.is-challenge-scrolldriven .page-front__challenge {
	display: block;
	min-height: 0;
	height: 340vh;          /* 4枚 × 0.6画面 + 1画面 (pin尺 = 240vh) */
	padding-top: 0;
	padding-bottom: 0;
}
body.is-challenge-scrolldriven .page-front__challenge__inner {
	height: 100vh;
	left: 0;
	right: 0;
	margin: 0 auto;
}
body.is-challenge-scrolldriven.is-challenge-pin-top    .page-front__challenge__inner { position: absolute; top: 0; }
body.is-challenge-scrolldriven.is-challenge-pinned     .page-front__challenge__inner { position: fixed;    top: 0; }
body.is-challenge-scrolldriven.is-challenge-pin-bottom .page-front__challenge__inner { position: absolute; bottom: 0; }

/* 装飾SVG(::before)が 340vh に引き伸ばされないよう viewport 高に固定 */
body.is-challenge-scrolldriven .page-front__challenge::before {
	height: 100vh;
	top: auto;
	bottom: 0;
}
body.is-challenge-scrolldriven.is-challenge-pinned .page-front__challenge::before {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
}

/* スクロール連動時のカード配置 (data-pos)。
 * out=左へ退出(通過済み) / 0,1,2=可視スタック / back=右奥(これから)。
 * → 下スクロールで「左へペラっと退出」、上スクロールで「左から復帰」 (前後対称)。 */
body.is-challenge-scrolldriven .page-front__challenge__list-item {
	transition:
		transform 0.7s cubic-bezier(.45, .05, .25, 1),
		opacity   0.6s ease;
}
body.is-challenge-scrolldriven .page-front__challenge__list-item[data-pos="0"]    { transform: translate(0,    0)   rotate(0deg);   z-index: 4; opacity: 1; pointer-events: auto; }
body.is-challenge-scrolldriven .page-front__challenge__list-item[data-pos="1"]    { transform: translate(14px, 6px)  rotate(5deg);   z-index: 3; opacity: 1; pointer-events: none; }
body.is-challenge-scrolldriven .page-front__challenge__list-item[data-pos="2"]    { transform: translate(28px, 12px) rotate(10deg);  z-index: 2; opacity: 1; pointer-events: none; }
body.is-challenge-scrolldriven .page-front__challenge__list-item[data-pos="back"] { transform: translate(42px, 18px) rotate(15deg);  z-index: 0; opacity: 0; pointer-events: none; }
body.is-challenge-scrolldriven .page-front__challenge__list-item[data-pos="out"]  { transform: translate(-120px, 12px) rotate(-6deg); z-index: 5; opacity: 0; pointer-events: none; }

/* Contact : 波のレイヤー調整 */
.page-front__contact {
	position: relative;
	z-index: 10;
	padding-top: 140px;
	padding-bottom: 120px;
	color: #fff;
	overflow: hidden;
	margin-top: -20px;
}

/* contact 自体に orange ベースを敷き、波 SVG は上下端の境目だけ担当 */
.page-front__contact {
	background-color: #F5A313;
}

.page-front__contact__wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 120px;
	display: block;
	z-index: 0;
	pointer-events: none;
}

.page-front__contact__wave--top {
	top: -1px; /* サブピクセルの隙間予防で1px被せ */
	animation: contactWaveFlow 7s linear infinite; /* 14s の2倍速 */
}

.page-front__contact__wave--bottom {
	bottom: -1px; /* サブピクセルの隙間予防で1px被せ */
	animation: contactWaveFlow 9s linear infinite reverse; /* 18s の2倍速 */
}

@keyframes contactWaveFlow {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* SP: SVG 幅を 400% にして可視範囲を 1/2 に → 100vw 内 ≒ 1 山 */
@media screen and (max-width: 768px) {
	.page-front__contact__wave {
		width: 400%;
	}
}

@media screen and (max-width: 1280px) {
	.page-front__contact {
		padding-top: 100px;
	}
}

.page-front__contact__inner {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	gap: 140px;
}

.page-front__contact__title {
	display: flex;
	flex-direction: column;
	width: max-content;
	flex-shrink: 0;
}

.page-front__contact__title-eng {
	font-size: 60px;
	font-weight: 600;
	line-height: 1;
}

.page-front__contact__title-jp {
	display: block;
	position: relative;
	right: -10px;
	margin-top: 0;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-align: right;
}

.page-front__contact__body {
	flex: 1;
	margin-top: 32px;
}

.page-front__contact__lead {
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.page-front__contact__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 40px;
	font-size: 14px;
}

/* contact: タイトル(CONTACT→お問い合わせ 1文字ずつ slide-in) → lead → ボタン順次。
 * JS が is-contact-content-in を body に付与する (タイトルが画面に入ったタイミング)。 */
.page-front__contact__title .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__contact__title .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-contact-content-in .page-front__contact__title .char-text {
	transform: translateX(0);
}

.page-front__contact__lead {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-contact-content-in .page-front__contact__lead {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d1);
}

.page-front__contact__btn {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.3s ease 0.3s;
}
body.is-contact-content-in .page-front__contact__btn:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--fa-d2), var(--fa-d2), 0.3s; /* color はhover用0.3sを維持 */
}
body.is-contact-content-in .page-front__contact__btn:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.60s, 0.60s, 0.3s; /* color はhover用0.3sを維持 */
}
body.is-contact-content-in .page-front__contact__btn:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.75s, 0.75s, 0.3s; /* color はhover用0.3sを維持 */
}

/* 文字数の多いボタン(IT協業・建設人材)は PC で2段目に折り返す (flex-wrap 用の改行要素) */
.page-front__contact__buttons__break {
	flex-basis: 100%;
	height: 0;
}
/* 改行で生じる余分な row-gap(24px×2) を相殺し、上段と24px間隔に揃える
 * (break 以降 = 2段目の全ボタンに適用) */
.page-front__contact__buttons__break ~ .page-front__contact__btn {
	margin-top: -24px;
}
/* 2段目(break 以降)のボタンの順次表示。個数が増えても順序が崩れないよう
 * 一括で表示状態にし、ディレイだけ nth-child で連番にする */
body.is-contact-content-in .page-front__contact__buttons__break ~ .page-front__contact__btn {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.90s, 0.90s, 0.3s;
}
body.is-contact-content-in .page-front__contact__buttons__break ~ .page-front__contact__btn:nth-child(5) {
	transition-delay: 0.75s, 0.75s, 0.3s;
}

/* =========================================================
 * SNS / インタビュー誘導セクション
 * PC : 左に1枚ビジュアル + 右にテキスト
 * SP : ビジュアルを隠し、下部にティッカー(140px画像/gap20px/永続横スクロール)
 * ========================================================= */
.page-front__sns {
	position: relative;
	z-index: 7;
}

/* ---- SNS イントロ演出 (増分1: 黒ステージ + ロゴ + step01→02→03 左→右色塗り) ----
 * JS が .page-front__sns__intro に is-active を付与すると再生。 */
/* 全画面ピン: 高さのある wrap の中で intro を sticky 固定 → 演出中ずっと全画面表示 */
.page-front__sns__intro-wrap {
	position: relative;
	height: 200vh; /* ピン尺。長くするほど固定される時間が伸びる */
}

.page-front__sns__intro {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #2B2525;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
}

.page-front__sns__intro-logo {
	position: relative;
	z-index: 1;
	width: min(60vw, 753px);
}

/* 増分2: F5A313 の低い波が左下→右上へ上がって徐々に覆う。
 * 左が高く右が低い浅いカーブ (SVG path)。要素を画面下外から上げ、右へドリフト。
 * 上げ切ると曲線が画面上端より上に抜け、全面オレンジになる。 */
.page-front__sns__intro-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 130%;
	height: 200vh;
	z-index: 2;
	transform: translate(-20%, 175vh); /* 開始: 左下の画面外 */
	will-change: transform;
}

.page-front__sns__intro-wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.page-front__sns__intro.is-active .page-front__sns__intro-wave {
	animation: snsWaveRise 1s cubic-bezier(0.33, 0, 0.2, 1) 2.4s forwards;
}

@keyframes snsWaveRise {
	to { transform: translate(0, 0); } /* 上げ切って全面オレンジ */
}

/* 増分3: 波の上に薄い EB6A00(20%) ロゴ 5行。中央(2)が拡大しながら出現 → 上下が続く。 */
.page-front__sns__intro-rows {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7vh;
	pointer-events: none;
	overflow: hidden;
}

.page-front__sns__intro-row {
	flex: 0 0 auto;
	opacity: 0;
}

/* PC は中央5行(0〜4)のみ使用。6行目以降は SP の敷き詰め用なので PC では非表示。 */
.page-front__sns__intro-row:nth-child(n+6) {
	display: none;
}

.page-front__sns__intro-row-svg {
	display: block;
	height: 13vh;   /* ≒ 120/800。アスペクト比で横長になり左右に少しはみ出す */
	width: auto;
	max-width: none;
}

/* 各行が中心位置からどれだけ離れて配置されるか (=分裂の開始オフセット)。
 * 1スロット = 行高さ13vh + gap7vh = 20vh。 */
.page-front__sns__intro-row--0 { --split: 40vh; }
.page-front__sns__intro-row--1 { --split: 20vh; }
.page-front__sns__intro-row--3 { --split: -20vh; }
.page-front__sns__intro-row--4 { --split: -40vh; }

/* 中央(2)が拡大しながら出現 (波が覆い切った後) */
.page-front__sns__intro.is-active .page-front__sns__intro-row--2 {
	animation: snsRowZoom 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 3.5s forwards;
}
/* 中央から内側(1,3) → 外側(0,4) の順に分裂して各段へ広がる */
.page-front__sns__intro.is-active .page-front__sns__intro-row--1,
.page-front__sns__intro.is-active .page-front__sns__intro-row--3 {
	animation: snsRowSplit 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 4.2s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__intro-row--0,
.page-front__sns__intro.is-active .page-front__sns__intro-row--4 {
	animation: snsRowSplit 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 4.35s forwards;
}

@keyframes snsRowZoom {
	from { opacity: 0; transform: scale(0.3); }
	to   { opacity: 0.2; transform: scale(1); }
}
/* 中央の文字(原寸)から複製されたように、サイズ一定のまま中心→自段へスライドして分裂 */
@keyframes snsRowSplit {
	from { opacity: 0; transform: translateY(var(--split)); }
	to   { opacity: 0.2; transform: translateY(0); }
}

/* SP: 敷き詰めた薄い行を中央から scaleY で展開 (波が覆った後) */
@keyframes snsRowsGrowSp {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* 増分4: アニメ完了後、メインコンテンツをオレンジ＋薄文字の上(最前面)に中央配置でふわっと表示 */
.page-front__sns__intro .page-front__sns__inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.page-front__sns__intro.is-active .page-front__sns__inner {
	pointer-events: auto;
}

/* inner の子要素を順次表示: visual → title(下から) → text(下から) → link(順次) */
.page-front__sns__visual,
.page-front__sns__title,
.page-front__sns__text,
.page-front__sns__link {
	opacity: 0;
}
.page-front__sns__title,
.page-front__sns__text,
.page-front__sns__link {
	transform: translateY(24px);
}

.page-front__sns__intro.is-active .page-front__sns__visual {
	animation: snsItemFade 0.6s ease 4.2s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__title {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 4.3s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__text {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 4.5s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__link:nth-child(1) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 4.7s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__link:nth-child(2) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 4.85s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__link:nth-child(3) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.0s forwards;
}

@keyframes snsItemFade {
	to { opacity: 1; }
}
@keyframes snsItemUp {
	to { opacity: 1; transform: translateY(0); }
}

/* PC: 行の分裂(~4.95s)が終わってから content を出す (SPは上の base のまま少し早め) */
@media screen and (min-width: 769px) {
	.page-front__sns__intro.is-active .page-front__sns__visual {
		animation: snsItemFade 0.6s ease 5.0s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__title {
		animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.1s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__text {
		animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.3s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__link:nth-child(1) {
		animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.5s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__link:nth-child(2) {
		animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.65s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__link:nth-child(3) {
		animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 5.8s forwards;
	}
}

.page-front__sns__intro-logo-svg {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
}

/* SP用ロゴ(2行)は PC では非表示 (SPで切替) */
.page-front__sns__intro-logo-svg--sp {
	display: none;
}

/* SP用ロゴの色塗りキーフレーム (svg01 座標: RELATION/MAKES/FUTURE の各語幅) */
@keyframes snsFillSp01 { to { width: 180px; } }
@keyframes snsFillSp02 { to { width: 130px; } }
@keyframes snsFillSp03 { to { width: 140px; } }

.page-front__sns__intro.is-active .page-front__sns__intro-logo-svg {
	opacity: 1;
	transition: opacity 0.53s ease;
}

/* 色塗り: clip rect の width を 0 → 各語幅へ。is-active で step01→02→03 と順次。 */
.page-front__sns__fill-rect {
	width: 0;
}
/* step01→03 で徐々に加速。後ろの語ほど dur を短く(速く)し、step01 は ease-in で
 * ゆっくり入る → 全体として「だんだん速く流れる」スイープになる。 */
.page-front__sns__intro.is-active .page-front__sns__fill-rect--step01 {
	animation: snsFillStep01 0.8s ease-in 0.4s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__fill-rect--step02 {
	animation: snsFillStep02 0.25s linear 1.23s forwards;
}
.page-front__sns__intro.is-active .page-front__sns__fill-rect--step03 {
	animation: snsFillStep03 0.21s linear 1.5s forwards;
}
@keyframes snsFillStep01 { to { width: 285px; } }
@keyframes snsFillStep02 { to { width: 205px; } }
@keyframes snsFillStep03 { to { width: 225px; } }

.page-front__sns__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	padding-left: 80px;
	padding-right: 80px;
}

@media screen and (max-width: 1240px) {
	.page-front__sns__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* PC: sns-img を左カラムに全高で配置 (画像は cover で縦いっぱい) */
.page-front__sns__visual {
	flex: 0 0 44%;
	height: 100%;
	overflow: hidden;
	padding-left: 80px;
	padding-right: 80px;
	background: #fff8eb66;
	display: flex;
	gap: 20px;              /* 横並びの列同士の隙間 */
}

/* 各列: 縦ティッカー。同じ画像を2枚縦に並べたトラックを translateY でループ。 */
.page-front__sns__visual-col {
	flex: 1;
	height: 100%;
	overflow: hidden;
}
.page-front__sns__visual-track {
	display: flex;
	flex-direction: column;
}
.page-front__sns__visual-track img {
	display: block;
	width: 100%;
	height: auto;
}
/* 左: 下→上 / 右: 上→下。2枚なので -50% (1枚分) でシームレスループ。 */
.page-front__sns__visual-col--up .page-front__sns__visual-track {
	animation: snsVisualUp 24s linear infinite;
}
.page-front__sns__visual-col--down .page-front__sns__visual-track {
	animation: snsVisualDown 24s linear infinite;
}
@keyframes snsVisualUp {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@keyframes snsVisualDown {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

.page-front__sns__body {
	flex: 1;
}

.page-front__sns__title {
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.2em;
	line-height: 1.6;
	margin-bottom: 16px;
}

.page-front__sns__text {
	letter-spacing: 0.2em;
	color: #fff;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 40px;
}

.page-front__sns__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* SNS / インタビュー 共通ボタン: 白・角丸・最大280px・padding統一。
 * hover で btn-main と同じ「波が競り上がる」演出 (濃色の波が下から覆い、文字を白に)。 */
.page-front__sns__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px; /* アイコン→テキストの間隔 */
	width: 100%;
	max-width: 280px;
	padding: 10px 16px 10px 32px;
	background: #fff;
	border-radius: 999px;
	font-size: 14px;
	color: #2B2525;
	min-height: 42px;
	overflow: hidden;
	isolation: isolate;
	/* 文字色は波が覆う頃に切り替わるよう少し遅延 (btn-main と同様) */
	transition: color 0.3s ease 0.3s;
}

.page-front__sns__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -90%;
	right: -90%;
	/* 上下に広めの余白を取り、rotate しても角まで覆い切れるように */
	top: -60%;
	bottom: -60%;
	background: #493B3B;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	translate: 0 130%;
	rotate: 8deg;
	transform-origin: 50% 50%;
	transition:
		translate 0.9s cubic-bezier(.45, .05, .25, 1),
		rotate 1.1s cubic-bezier(.5, -.2, .4, 1.3);
}

.page-front__sns__link:hover::before {
	translate: 0 0;
	rotate: -8deg;
}

.page-front__sns__link:hover {
	color: #fff;
}

.page-front__sns__link-icon {
	width: 24px;
	height: 24px;
}

/* ボタン右の矢印 (arrows-sns.svg)。12px四方・右から16px。 */
.page-front__sns__link-arrow {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	object-fit: contain;
	transition: filter 0.3s ease 0.2s; /* 波が覆う頃に合わせて少し遅延 */
}

/* ホバー時: 濃色の波が覆うので矢印(画像)を白に */
.page-front__sns__link:hover .page-front__sns__link-arrow {
	filter: brightness(0) invert(1);
}

/* ティッカーは既定(PC)では非表示。SP のみ表示。 */
.page-front__sns__ticker {
	display: none;
}

@media screen and (max-width: 768px) {
	.page-front__sns__inner {
		display: block;
	}
	/* SP: 中身が100vh超になるため stickyオーバーレイをやめ通常フローに。
	 * 波を intro 全体に広げ、コンテンツをオレンジの上に普通にスクロールさせる。 */
	.page-front__sns__intro-wrap {
		height: auto;
	}
	.page-front__sns__intro {
		position: relative;
		display: block;
		height: auto;
		min-height: 100vh;
		padding: 0;
	}
	.page-front__sns__intro-logo {
		position: absolute;
		top: 50vh;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80vw;
		z-index: 1;
	}
	.page-front__sns__intro-wave {
		height: calc(100% + 100vh);
		width: 130%;
		transform: translateY(100%);
	}

	/* SP: 薄い行を上端から敷き詰め (32px / gap10px)。中央寄せだと上の行が見切れるので
	 * top基準に変更し、上の行が切れないようにする。中心から増える演出は scaleY(0→1)。 */
	.page-front__sns__intro-rows {
		top: 0;
		bottom: auto;
		height: auto;
		justify-content: flex-start;
		gap: 10px;
		transform: scaleY(0);
		transform-origin: center center; /* 中心から上下に広がる (PCの中心分裂と統一) */
	}
	.page-front__sns__intro-rows .page-front__sns__intro-row {
		display: block;   /* nth-child(n+6)非表示を上書きして全行表示 */
		opacity: 0.2;
		transform: none;
	}
	.page-front__sns__intro.is-active .page-front__sns__intro-row {
		animation: none;  /* PC用の各行分裂は無効化 */
	}
	.page-front__sns__intro.is-active .page-front__sns__intro-rows {
		animation: snsRowsGrowSp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 3.4s forwards;
	}
	.page-front__sns__intro-row-svg {
		height: 32px;
	}

	/* SP: ロゴを2行版(svg01)に切替。色塗りは PC と同じ step01→02→03 のタイミング。 */
	.page-front__sns__intro-logo-svg--pc {
		display: none;
	}
	.page-front__sns__intro-logo-svg--sp {
		display: block;
	}
	.page-front__sns__intro.is-active .page-front__sns__fill-rect--sp-step01 {
		animation: snsFillSp01 0.8s ease-in 0.4s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__fill-rect--sp-step02 {
		animation: snsFillSp02 0.25s linear 1.23s forwards;
	}
	.page-front__sns__intro.is-active .page-front__sns__fill-rect--sp-step03 {
		animation: snsFillSp03 0.21s linear 1.5s forwards;
	}
	/* SP: 中身はオレンジの上にオーバーレイ。縦中央寄せだと背が高い時に上が切れるので
	 * 上寄せ(top:80px)にして上が切れないようにする。 */
	/* SP: 中身は通常フローでオレンジの上に (上部に配置)。intro は中身の高さまで伸び、
	 * absoluteをやめたので高さ100vh超でも見切れない。reveal は PC と同じく発火させる。 */
	.page-front__sns__intro .page-front__sns__inner {
		position: relative;
		z-index: 4;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		height: auto;
		margin-top: 80px; /* ヘッダー回避。中身は画面内に収まり reveal が見える */
		padding: 0 0 80px;
	}

	/* SP: 1枚ビジュアルは隠してティッカーに切替 */
	.page-front__sns__visual {
		display: none;
	}
	.page-front__sns__ticker {
		display: block;
		overflow: hidden;
		margin-top: 64px;            /* SNSボタン(links)とスライダーの要素間余白 */
		/* 祖先(intro 40px + inner 20px)の左右paddingに依存せず画面端〜端の全幅に */
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: 0;
		padding-top: 24px;
		padding-bottom: 24px;
		background: #fff8ea66;       /* PC同様 FFF8EA 40% */
		/* 最初は非表示。SNSボタンの順次出現の後に下から表示 */
		opacity: 0;
		transform: translateY(24px);
	}
	.page-front__sns__intro.is-active .page-front__sns__ticker {
		animation: snsItemUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 5.5s forwards;
	}

	.page-front__sns__title {
		font-size: 28px;
		text-align: center;
	}
	.page-front__sns__text {
		font-size: 14px;
		text-align: center;
	}
	.page-front__sns__links {
		align-items: center;
	}
	/* 横スクロール: 2セット出力 → translateX(-50%) で1セット分ぴったりループ。
	 * gap ではなく item の margin-right で間隔を作り継ぎ目をシームレスに。 */
	.page-front__sns__ticker-track {
		display: flex;
		width: max-content;
		animation: snsTickerFlow 20s linear infinite;
	}
	.page-front__sns__ticker-item {
		flex: 0 0 auto;
		margin-right: 20px;
	}
	.page-front__sns__ticker-link {
		display: block;
	}
	.page-front__sns__ticker-item img {
		display: block;
		width: 140px;
		height: auto;
	}
	@keyframes snsTickerFlow {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
}

/* News */
.page-front__news {
	position: relative;
	z-index: 10;
	padding-top: 160px;
	padding-bottom: 180px;
	background: #2B2525;
	color: #fff;
}

.page-front__news__inner.w-1280 {
	display: flex;
	justify-content: space-between;
}

.page-front__news__title-eng {
	display: block;
	position: relative;
	font-size: 60px;
	line-height: 1;
	font-weight: 600;
}

.page-front__news__title-jp {
	display: block;
	position: relative;
	right: -20px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-align: right;
}

.page-front__news__list-wrap {
	width: 80%;
	max-width: 860px;
}

.page-front__news__list {
	max-width: 860px;
}

.page-front__news__btn-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 40px;
}

.page-front__news__list-link {
	display: flex;
	align-items: center;
	padding: 24px 20px;
	background: transparent;
	color: inherit;
	border-bottom: 1px solid #fff;
	transition: background 0.3s ease;
}

.page-front__news__list-item:first-child .page-front__news__list-link {
	border-top: 1px solid #fff;
}

/* news: タイトル(NEWS→ニュース 1文字ずつ slide-in) → list-item順次 → VIEW MORE。
 * JS が is-news-content-in を body に付与する (タイトルが画面に入ったタイミング)。 */
.page-front__news__title .char {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.page-front__news__title .char-text {
	display: inline-block;
	transform: translateX(-101%);
	transition: transform var(--fa-char-dur) cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(var(--fa-char-step) * var(--char-index));
}
body.is-news-content-in .page-front__news__title .char-text {
	transform: translateX(0);
}

.page-front__news__list-item {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-news-content-in .page-front__news__list-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: var(--fa-d1); }
body.is-news-content-in .page-front__news__list-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
body.is-news-content-in .page-front__news__list-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.60s; }
body.is-news-content-in .page-front__news__list-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.95s; }

.page-front__news__btn-wrap {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.is-news-content-in .page-front__news__btn-wrap {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.90s;
}

.page-front__news__list-link:hover {
	background: #10A9AC;
}

.page-front__news__list-img {
	flex-shrink: 0;
	width: 160px;
	aspect-ratio: 160 / 105;
	object-fit: cover;
}

/* 画像が無い時のロゴ placeholder。アスペクト比は img と同じ */
.page-front__news__list-noimg {
	flex-shrink: 0;
	width: 160px;
	aspect-ratio: 160 / 105;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.page-front__news__list-noimg-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.page-front__news__list-text {
	flex: 1;
	margin-left: 32px;
	margin-right: 56px;
}

.page-front__news__list-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	transition: background 0.3s ease;
}

.page-front__news__list-arrow-icon {
	width: 18px;
	height: auto;
	transition: filter 0.3s ease;
}

.page-front__news__list-link:hover .page-front__news__list-arrow {
	background: #008184;
}

.page-front__news__list-link:hover .page-front__news__list-arrow-icon {
	/* 黒の SVG を白にする */
	filter: brightness(0) invert(1);
}

.page-front__news__list-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
}

.page-front__news__list-date {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.page-front__news__list-category {
	display: block;
	width: max-content;
	padding: 4px 16px;
	background: #fff;
	color: #493B3B;
	border-radius: 9999px;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.page-front__news__list-heading {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

.page-front__challenge__list-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	line-height: 1.6;
}

.page-front__challenge__list-heading {
	font-size: 24px;
	font-weight: 700;
}

.page-front__challenge__list-desc {
	font-size: 16px;
}

/* 波 rise 完了後 (.is-service-risen) に内部コンテンツがふわっと表示 */
.page-front__service__inner {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.is-service-risen .page-front__service__inner {
	opacity: 1;
	transform: translateY(0);
}

.page-front__service__title {
	position: relative;
	margin-left: auto;
	margin-right: 0;
	width: max-content;
	margin-bottom: 64px;
}

.page-front__service__title .eng {
	font-size: 80px;
	font-weight: 600;
	text-align: right;
	display: block;
	width: max-content;
}

.page-front__service__title .jp {
	position: relative;
	bottom: 0;
	right: 0;
	width: 100%;
	display: block;
	text-align: right;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

.page-front__service__inner__content__flex {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 56px;
}

.page-front__service__heading {
	width: 300px;
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	font-weight: 700;
}

.page-front__service__text {
	width: calc(100% - 146px - 290px);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	font-weight: 700;
}

.page-front__service__pm {
	background: #fff;
	padding: 40px 40px 80px;
	margin-bottom: 40px;
}

.page-front__service__pm-wrap {
	max-width: 1065px;
	margin-left: auto;
	margin-right: auto;
}

.page-front__service__pm-eng-wrap {
	font-size: 72px;
	line-height: 1.1;
	letter-spacing: 0;
	color: #EBEBEB;
	font-weight: 600;
	position: relative;
}

/* ---- service 英字SVG (FVタイトル風: EBEBEB で線描画 → 中を塗り) ----
 * 指定の幅を基準にし、max-width:100% で親が縮んだら比率維持で縮小。height:auto で比率維持。 */
.page-front__service__eng-svg {
	display: block;
	height: auto;
	max-width: 100%;
}
.page-front__service__eng-svg--01 { width: 509px; } /* PROJECT MANAGEMENT SUPPORT 509x212 */
.page-front__service__eng-svg--02 { width: 560px; } /* CONSTRUCTION DRAWINGS 560x135 */
.page-front__service__eng-svg--03 { width: 395px; } /* IT SOLUTIONS SUPPORT 395x210 */

.js-service-eng path {
	fill: transparent;
	stroke: #EBEBEB;
	stroke-width: 2;
	stroke-linejoin: round;
	paint-order: stroke fill;
	/* stroke-dasharray / -dashoffset は JS が getTotalLength() で設定 */
}

/* PM / IT ブロックが画面内に入ったら 線描画(1s) → 塗り(0.5s) */
.page-front__service__pm.is-pm-content-in .js-service-eng path,
body.is-cd-content-in .page-front__service__cd .js-service-eng path {
	animation:
		serviceEngDraw 1s ease-out forwards,
		serviceEngFill 0.5s ease-out 1s forwards;
}
@keyframes serviceEngDraw { to { stroke-dashoffset: 0; } }
@keyframes serviceEngFill { to { fill: #EBEBEB; } }

/* SP: 高さ基準で縮小 (svg01/03=高さ135px / svg02=高さ90px 相当の幅)。max-width:100%で更に縮む。 */
@media screen and (max-width: 768px) {
	.page-front__service__eng-svg--01 { width: 323px; }
	.page-front__service__eng-svg--02 { width: 378px; }
	.page-front__service__eng-svg--03 { width: 253px; }
}

.page-front__service__pm-ttl {
	position: relative;
	margin-bottom: 40px;
}

.page-front__service__pm-text {
	width: 50%; /* 1280に対する640px */
	margin-left: auto;
	margin-right: 0;
	position: absolute;
	bottom: 20px;
	right: 0;
}

/* IT ブロックのみ: テキストを最下に寄せ、ttl 下に余白を確保 (PM はそのまま) */
.page-front__service__pm--it .page-front__service__pm-ttl {
	padding-bottom: 44px;
}
.page-front__service__pm--it .page-front__service__pm-text {
	bottom: 0;
}

.page-front__service__pm-title {
	position: relative;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	margin-bottom: 16px;
	font-weight: 700;
}

.page-front__service__pm-title::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F5A313;
}

.page-front__service__pm-desc {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	margin-bottom: 0;
	font-weight: 500;
}

.page-front__service__pm-list {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.page-front__service__pm-list-item {
	position: relative;
	width: calc((100% - 22px - 22px) / 3);
	overflow: hidden;
	/* li 本体を順次フェードアップで表示 (波ではなく li そのものを順番表示) */
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.page-front__service__pm-list-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 奇数: orange / 偶数: teal */
.page-front__service__pm-list-item:nth-child(odd) {
	--pm-item-color: #F5A313;
}
.page-front__service__pm-list-item:nth-child(even) {
	--pm-item-color: #10A9AC;
}

/* wave 本体 + 内部 SVG flow
 * height ではなく transform: scaleY を使ってレイアウト再計算ゼロ → 60fps 滑らか
 */
.page-front__service__pm-list-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 56px;
	pointer-events: none;
	z-index: 1;
	transform: scaleY(0);
	transform-origin: bottom;
	will-change: transform;
}

.page-front__service__pm-list-wave-svg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 400%;
	height: 100%;
	display: block;
	will-change: transform;
}

.page-front__service__pm-list-wave-svg path {
	fill: var(--pm-item-color);
}

/* 1個目から順に 0.2s ずつ遅らせて発火 */
.page-front__service__pm-list-item.is-visible .page-front__service__pm-list-wave {
	animation:
		pmWaveRise 0.8s cubic-bezier(0.45, 0.05, 0.25, 1) forwards,
		pmWaveUndulate 3.5s ease-in-out 0.8s infinite;
}

.page-front__service__pm-list-item.is-visible .page-front__service__pm-list-text {
	animation: pmTextIn 0.5s ease 0.5s forwards;
}

/* SVG flow: 周期と位相を 1〜6 でバラけさせる (in-view ずらしは JS 側) */
.page-front__service__pm-list-item:nth-child(1) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow  7s linear infinite; animation-delay: -1.0s; }
.page-front__service__pm-list-item:nth-child(2) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow  9s linear infinite; animation-delay: -3.5s; }
.page-front__service__pm-list-item:nth-child(3) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow  6s linear infinite; animation-delay: -2.0s; }
.page-front__service__pm-list-item:nth-child(4) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow 10s linear infinite; animation-delay: -5.0s; }
.page-front__service__pm-list-item:nth-child(5) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow  8s linear infinite; animation-delay: -1.5s; }
.page-front__service__pm-list-item:nth-child(6) .page-front__service__pm-list-wave-svg { animation: pmWaveFlow 11s linear infinite; animation-delay: -4.5s; }

@keyframes pmWaveRise {
	to { transform: scaleY(1); }
}


@keyframes pmWaveUndulate {
	0%   { transform: scaleY(1); }
	50%  { transform: scaleY(0.82); } /* 56→46px 相当 */
	100% { transform: scaleY(1); }
}

@keyframes pmWaveFlow {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.page-front__service__pm-list-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: 0.25s;
}

.page-front__service__pm-list-item:hover .page-front__service__pm-list-img {
	scale: 1.05;
	transition: 0.25s;
}

.page-front__service__pm-list-text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 14px 24px 12px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-align: right;
	color: #fff;
	opacity: 0;
	z-index: 2;
}

@keyframes pmTextIn {
	to { opacity: 1; }
}

/* ---- Construction Drawings (CD) section : pm と同じ装飾を別セレクタで ---- */
.page-front__service__cd {
	background: #fff;
	padding: 40px 40px 80px;
	margin-bottom: 40px;
}

/* CDセクション後の中央寄せボタン */
.page-front__service__btn-wrap {
	display: flex;
	justify-content: center;
}

.page-front__service__cd-wrap {
	max-width: 1065px;
	margin-left: auto;
	margin-right: auto;
}

.page-front__service__cd-ttl {
	position: relative;
	margin-bottom: 40px;
}

.page-front__service__cd-eng-wrap {
	font-size: 72px;
	line-height: 1.1;
	letter-spacing: 0;
	color: #EBEBEB;
	font-weight: 600;
	position: relative;
}

.page-front__service__cd-text {
	width: 50%;
	margin-left: auto;
	margin-right: 0;
	position: absolute;
	bottom: 20px;
	right: 0;
}

.page-front__service__cd-title {
	position: relative;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	margin-bottom: 16px;
	font-weight: 700;
}

.page-front__service__cd-title::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #F5A313;
}

.page-front__service__cd-desc {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	margin-bottom: 0;
	font-weight: 500;
}

.page-front__service__cd-img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

@keyframes waveRise {
	/* hero-desc のタイミングで下からふわっと出現 (高さは別管理なので opacity+translateY) */
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes waveUndulate {
	0%   { height: var(--wave-max-h); }
	50%  { height: calc(var(--wave-max-h) - 16px); }
	100% { height: var(--wave-max-h); }
}

@media (prefers-reduced-motion: reduce) {
	.page-front__hero__wave {
		height: var(--wave-max-h);
		animation: none;
	}
	.page-front__hero__wave__svg {
		animation: none;
	}
}

.page-front__hero-inner {
	position: absolute;
	bottom: 40px;
	width: 100%;
	z-index: 30;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-left: 40px;
	padding-right: 40px;
	/* hero を抜ける時に opacity 1 → 0 で fade out (scrollY 0 → 100vh) */
	opacity: calc(1 - var(--hero-fade-progress));
}

.page-front__hero-desc {
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.2em;
	margin-bottom: 72px;
}

.page-front__hero__images {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100svh;
	overflow: hidden;
}

/* FV 動画 (slider 差し替え)。画面全体に cover / center center で配置。 */
.page-front__hero__movie {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100svh;
	overflow: hidden;
}

.page-front__hero__movie-video {
	width: 100vw;
	height: 100svh;
	object-fit: cover;
	/* 縦長画面で左右が切れる際、被写体のある上部を基準に残す */
	object-position: top center;
	display: block;
}

/* slick 初期化前は先頭スライドだけ表示（縦積み FOUC 防止） */
.js-hero-slider:not(.slick-initialized) .page-front__hero__slide + .page-front__hero__slide {
	display: none;
}

.page-front__hero__images .slick-list,
.page-front__hero__images .slick-track {
	width: 100%;
	height: 100%;
}

.page-front__hero__slide {
	width: 100vw;
	height: 100svh;
}

.page-front__hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.page-front__hero__images img,
.page-front__hero__slide img {
	width: 100vw;
	height: 100svh;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ---- FV スライダー Ken Burns（フェード + 中心拡大） ----
 * 表示中 (--hero-slide-interval) : scale 1 → 1.025 を中心軸でゆっくり拡大
 * 退出フェード中 (--hero-slide-fade) : 1.025 → 1.05 へ拡大しながらふわっと消える
 * is-playing は FV の文字/SVG アニメ完了後に JS が付与する */
.page-front__hero__slide img {
	transform: scale(1);
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
}

/* JS が表示中(と退出中)のスライドに is-kb を付与し Ken Burns を実行。
 * slick の beforeChange でイベント駆動で再スタートするので、
 * autoplay の時計と CSS animation の時計がズレず、ガタつかない。
 * 退出スライドは is-kb を保持したまま → 拡大しながらふわっとフェードアウト。 */
.page-front__hero__slide.is-kb img {
	animation: heroKenBurns var(--hero-slide-zoom-dur) linear forwards;
}

@keyframes heroKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}

/* reduced-motion: ズーム無効・静止表示 */
@media (prefers-reduced-motion: reduce) {
	.page-front__hero__slide.is-kb img {
		animation: none;
		transform: none;
	}
}

.page-front__hero-left {
	position: relative;
}

.page-front__hero-title {
	width: 59.03vw; /* 850 / 1440 */
}

.page-front__hero-title .js-hero-title {
	width: 100%;
	height: auto;
}

.page-front__hero-lead {
	position: absolute;
	top: 50%;
	transform: translate(-30px, -50%);
	width: 31.25vw; /* 450 / 1440 */
	opacity: 0;
	will-change: opacity, transform;
}

/* ---- SVG title ---- */
.js-hero-title {
	display: block;
	color: #fff;
	overflow: visible;
}

/* FV タイトル / リード: PC/SP 出し分け (SVG は新 PC/SP 版) */
.js-hero-title--sp,
.page-front__hero-lead-img--sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.js-hero-title--pc,
	.page-front__hero-lead-img--pc {
		display: none;
	}
	.js-hero-title--sp {
		display: block;
	}
	.page-front__hero-lead-img--sp {
		display: block;
	}
}

.js-hero-title__path {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linejoin: round;
	paint-order: stroke fill;
	/* stroke-dasharray / -dashoffset は JS が getTotalLength() で設定 */
}

/* =========================================================
 * Hero animation
 *   1) SVG 線描画         0.0s → 1.0s
 *   2) SVG 塗り           1.0s → 1.5s
 *   3) サブコピー左フェード 1.5s → 2.3s
 * ========================================================= */
.is-animating .js-hero-title__path {
	animation:
		heroDraw      var(--hero-draw-dur) ease-out var(--hero-draw-delay) forwards,
		heroFill      var(--hero-fill-dur) ease-out var(--hero-fill-delay) forwards;
	/* heroStrokeOut は廃止: 塗り後に stroke を一気に消すとガタつくため、stroke (currentColor) は残す */
}

.is-animating .page-front__hero-lead {
	animation: heroLeadIn var(--hero-lead-dur) cubic-bezier(0.22, 0.61, 0.36, 1) var(--hero-lead-delay) forwards;
}

.is-animating .page-front__hero-lead img {
	width: 100%;
	object-fit: contain;
}

/* リードはインラインSVG化（img→svg）。幅は従来のimgと同じ挙動に
 * 注意: display は指定しない（--pc/--sp の出し分けルールに勝ってしまうため） */
.page-front__hero-lead svg {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	overflow: visible; /* ポップ時に文字が見切れないように */
}
svg.page-front__hero-lead-img--pc {
	display: block;
}
@media screen and (max-width: 768px) {
	svg.page-front__hero-lead-img--pc {
		display: none;
	}
	svg.page-front__hero-lead-img--sp {
		display: block;
	}
}

@keyframes heroDraw      { to { stroke-dashoffset: 0; } }
@keyframes heroFill      { to { fill: currentColor; } }

@keyframes heroLeadIn {
	to {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.js-hero-title__path {
		fill: currentColor;
	}
	.page-front__hero-lead {
		opacity: 1;
		transform: translate(0, -50%);
	}
	.is-animating .js-hero-title__path,
	.is-animating .page-front__hero-lead {
		animation: none;
	}
}

/* =========================================================
 * FV 文字インタラクション (?fvanimationnew)
 *   JS が html.fv-anim-new を付与した時だけ有効。
 *   各文字を hover で動かす + パーティクルを弾けさせる。
 *   (パラメータ無し = この層は生成されないので影響なし)
 * ========================================================= */
.fv-anim-new .js-hero-title__path,
.fv-anim-new .js-hero-lead__path {
	transform-box: fill-box;     /* transform を文字自身の中心基準にする */
	transform-origin: center;
	cursor: pointer;
	will-change: transform;
}

.fv-burst {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	overflow: hidden;
}

.fv-burst b {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.fv-burst { display: none; }
}

/* セクション見出し(about/service)の文字インタラクション用。
 * JS が 1 文字ずつ span 化し、hover でパーティクルを飛ばす。
 * transform を効かせるため inline-block にする (改行・字詰めは維持)。 */
.page-front__about__heading .heading-char,
.page-front__service__heading .heading-char {
	display: inline-block;
	will-change: transform;
}






@media screen and (max-width: 1280px) {
	.w-1280 {
		padding-left: 24px;
		padding-right: 24px;
	}
}footer#footer {
	position: relative;
	z-index: 10;
}

.l-footer__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media screen and (max-width: 768px) {
	.l-footer__inner {
		max-width: 440px;
		margin-left: auto;
		margin-right: auto;
	}
}




footer#footer {
    background: #fff8ea;
    padding-top: 24px;
    padding-bottom: 72px;
}
.l-footer__top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 80px;
}

ul.l-footer__menu {
    display: flex;
    gap: 80px;
}

/* RECRUITMENT / NEWS を縦並びでグループ化 */
.l-footer__menu-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.l-footer__menu-item > a{
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 2px;
	display: block;
	width: max-content;
	font-weight: 600;
}

a.l-footer__logo-link {
    width: 140px;
	display: block;
}

a.l-footer__logo-link img {
    width: 120px;
    display: block;
    height: auto;
}

.l-footer__submenu-link{
	font-size: 14px;
	line-height: 1.8;
	display: block;
	width: max-content;
	letter-spacing: .2em;
}

/* footer nav 内 a のホバーで #F5A313 へ */
nav.l-footer__nav a {
	transition: color 0.3s ease;
}
nav.l-footer__nav a:hover {
	color: #F5A313;
}



.l-footer__btns {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 342px;
    flex-shrink: 0;      /* l-footer__top 内で縮まないように */
    margin-left: auto;   /* 右寄せ */
}

.l-footer__btns .l-footer__btn {
    width: 100%;
    justify-content: space-between;
}

/* お問い合わせの下に置くフローティング画像リンク */
.l-footer__floating-banner {
    display: block;
    line-height: 0;
    transition: transform 0.3s ease;
    /* ドロップシャドウ (X0 Y0 blur30 #2B2525 15%)。角丸PNGに沿うよう filter で。 */
    filter: drop-shadow(0 0 30px rgba(43, 37, 37, 0.15));
}

.l-footer__floating-banner:hover {
    transform: translateY(-2px);
}

.l-footer__floating-banner img {
    display: block;
    width: 100%;
    height: auto;
}


.l-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul.l-footer__legal {
    display: flex;
    font-size: 12px;
    gap: 20px;
}

/* legal: PC は nav 内 (メニュー下) に表示、SP は bottom のまま。
 * nav 内コピーは既定(SP)で隠し、PC でのみ表示。bottom 側は PC で隠す。 */
.l-footer__nav .l-footer__legal {
    display: none;
}

@media screen and (min-width: 1081px) {
    .l-footer__nav .l-footer__legal {
        display: flex;
        margin-top: 32px;
        color: #787878;
        font-weight: 700;
    }

    .l-footer__bottom .l-footer__legal {
        display: none;
    }
}


p.l-footer__copy {
    position: relative;
    z-index: 10;
    background: #000;
    color: #fff;
    display: block;
}

p.l-footer__copy {
    position: relative;
    z-index: 10;
    background: #000;
    color: #fff;
    display: block;
    font-size: 10px;
    line-height: 1.6;
    text-align: right;
    padding: 12px 20px;
}
/* =========================================================
 * Hamburger menu (≤1080px)
 * ========================================================= */
.l-header__hamburger {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	z-index: 10001;
	position: relative;
}

.l-header__hamburger-bar {
	display: block;
	width: 16px;
	height: 2px; /* 1.5px→2px: iOSの極細ライン端部アーティファクト(点)対策 */
	background: #493B3B;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* open で × に: 1本目と3本目を交差、中央は完全に潰す（opacity:0だけだと
 * iOS Safari で中央バーの端が点として残ることがあるため scaleX(0) 併用） */
.l-header__hamburger.is-open .l-header__hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.l-header__hamburger.is-open .l-header__hamburger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.l-header__hamburger.is-open .l-header__hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 1080px) {
	.l-header__hamburger {
		display: flex;
	}

	/* ハンバーガー展開エリア: 全画面 + clip-path circle で拡張
	 * iPhone Safari の URL バーで切れないよう dvh 使用 */
	.l-header__nav__wrap {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		display: block;
		padding: 0;
		gap: 0;
		background: transparent;
		pointer-events: none;
		clip-path: circle(0% at calc(100% - 45px) 38px); /* ハンバーガー直下 */
		-webkit-clip-path: circle(0% at calc(100% - 45px) 38px);
		transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1),
		            -webkit-clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
		z-index: 9000;
	}

	/* SP のみシェイプ背後にうっすら黒オーバーレイ */
	.l-header__nav__overlay {
		position: absolute;
		inset: 0;
		background: transparent;
		pointer-events: none;
	}
	@media screen and (max-width: 768px) {
		.l-header__nav__overlay {
			background: rgba(0, 0, 0, 0.3);
		}
	}

	.l-header__nav__wrap.is-open {
		clip-path: circle(150% at calc(100% - 45px) 38px);
		-webkit-clip-path: circle(150% at calc(100% - 45px) 38px);
		pointer-events: auto;
	}

	/* nav 背景: 黄 + 橙のブロブを重ねる */
	.l-header__nav__bg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.l-header__nav__shape {
		position: absolute;
		top: -60vh;  /* 画面上部からはみ出させる (上側は画面外) */
		left: 50%;
		width: 135vw;
		height: 150vh;
		transform: translateX(-50%);
		display: block;
		overflow: visible;
	}

	.l-header__nav__shape--orange {
		/* 黄より少し下・右にずらしてアクセント */
		top: -55vh;
		left: 54%;
	}

	/* path morph: 下端のカーブ制御点だけ揺らす */
	.l-header__nav__shape--yellow .l-header__nav__shape-path {
		animation: navYellowBottomWave 8s ease-in-out infinite;
	}
	.l-header__nav__shape--orange .l-header__nav__shape-path {
		animation: navOrangeBottomWave 9s ease-in-out -4s infinite;
	}

	@keyframes navYellowBottomWave {
		0%, 100% { d: path("M675.429 649.922C590.5 795.956 442.533 839.592 276.844 804.538C111.061 769.463 18.0769 605.181 2.08982 437.055C-13.3279 274.916 56.8034 113.56 204.508 43.8296C363.352 -31.1592 559.387 -12.375 675.429 119.177C787.928 246.712 760.869 503.009 675.429 649.922Z"); }
		50%      { d: path("M685 665C605 815 440 855 280 820C115 785 28 615 12 445C-5 275 60 115 205 45C365 -30 560 -15 680 120C790 250 765 510 685 665Z"); }
	}
	@keyframes navOrangeBottomWave {
		0%, 100% { d: path("M676.469 166.078C591.54 20.0438 443.573 -23.5921 277.884 11.4626C112.101 46.537 19.1169 210.819 3.12981 378.945C-12.2879 541.084 26.8435 732.44 174.548 802.171C333.392 877.159 560.427 828.375 676.469 696.823C788.968 569.288 761.909 312.991 676.469 166.078Z"); }
		50%      { d: path("M676 166C592 20 443 -24 278 12C112 47 20 211 4 379C-12 545 30 745 180 815C335 885 560 830 678 695C790 570 762 313 676 166Z"); }
	}

	/* nav-wrap を縦フレックスに: コンテンツを上から順に積み上げ、buttons は nav のすぐ下 */
	.l-header__nav__wrap {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 100px 40px 0;
	}

	.l-header__nav,
	.l-header__buttons {
		position: relative;
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.l-header__nav__wrap.is-open .l-header__nav,
	.l-header__nav__wrap.is-open .l-header__buttons {
		opacity: 1;
		transition-delay: 0.4s;
	}

	.l-header__buttons {
		margin-top: 32px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		align-items: center;
	}

	/* お問い合わせ: 中央寄せ + width:100% (max 420px) */
	.l-header__buttons .l-header__btn {
		width: 100%;
		max-width: 420px;
	}

	/* フローティングで使っている画像ボタンを その下に配置 */
	.l-header__floating-banner {
		display: block;
		width: 100%;
		max-width: 420px;
	}
	.l-header__floating-banner img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* SP(ハンバーガー)では SNS の水平 margin を無効化し、上にだけ余白 */
	.l-header__sns {
		margin: 28px 0 0;
	}

	/* メニュー: 縦並び + 英字の下に日本語 */
	.l-header__menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 28px;
		color: #493B3B;
	}

	.l-header__menu-link {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		color: #493B3B;
		font-weight: 700;
	}

	/* SP では hover の色変化を無効化 (タップで一瞬オレンジになるのを防ぐ) */
	.l-header__menu-link:hover {
		color: #493B3B;
	}

	.l-header__menu-eng {
		font-size: 28px;
		line-height: 1;
		letter-spacing: 0.05em;
	}

	.l-header__menu-jp {
		display: block;
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.1em;
		font-weight: 600;
	}

	/* has-children 項目: タイトル横にアイコン、jp は次行 */
	.l-header__menu-item--has-children .l-header__menu-link {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 2px;
	}
	.l-header__menu-item--has-children .l-header__menu-eng {
		flex: 0 0 auto;
	}
	.l-header__menu-item--has-children .l-header__menu-jp {
		flex: 0 0 100%;
		order: 99;  /* 改行して次の段に */
	}
	.l-header__menu-icon {
		display: block;
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		transition: transform 0.3s ease;
	}
	.l-header__menu-item--has-children.is-accordion-open .l-header__menu-icon {
		transform: rotate(45deg);
	}

	/* submenu をアコーディオン化 */
	.l-header__submenu {
		position: static;
		background: transparent;
		box-shadow: none;
		transform: none;
		min-width: 0;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		padding: 0 0 0 0;
		transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0s linear 0.4s;
	}

	.l-header__menu-item--has-children.is-accordion-open .l-header__submenu {
		max-height: 320px;
		opacity: 1;
		visibility: visible;
		padding: 8px 0 0 0;
		transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0s linear 0s;
	}

	.l-header__submenu-item + .l-header__submenu-item {
		margin-top: 4px;
	}

	.l-header__submenu-link {
		color: #493B3B;
		font-size: 13px;
		display: block;
		padding: 6px 0;
	}
}

/* SP: ハンバーガーを開いたら SNS をヘッダーバー右上 (ハンバーガーの左 16px) に
 * PC と同じサイズで配置。閉じている間は隠す。SP のみドロップシャドウを追加。 */
@media screen and (max-width: 768px) {
	.l-header__sns {
		position: fixed;
		top: 18px;        /* ハンバーガー(中心 y=38) と上下中央を合わせる */
		right: 82px;      /* ハンバーガー左端(右から66px) の更に 16px 左 */
		margin: 0;
		gap: 6px;         /* PC と同じ */
		z-index: 9500;    /* overlay / シェイプより前面 */
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}

	.l-header__nav__wrap.is-open .l-header__sns {
		opacity: 1;
		pointer-events: auto;
		transition-delay: 0.4s;  /* nav / buttons と同じタイミングで出す */
	}

	/* SP のみ SNS ボタンにドロップシャドウ (X0 Y0 blur30 spread0 #000 15%) */
	.l-header__sns-link {
		box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
	}

	/* SP: ハンバーガー内アコーディオン(submenu)の文字色を #493B3B 70% に */
	.l-header__submenu-link {
		color: rgba(73, 59, 59, 0.7);
	}

	/* SP: メニュー / ボタンの幅を 284px に絞って中央寄せ */
	.l-header__menu {
		max-width: 284px;
		margin: auto;
	}

	.l-header__buttons .l-header__btn {
		max-width: 284px;
	}
}

@media screen and (max-width: 1080px) {
	.page-front__hero-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.l-footer__bottom {
		flex-wrap: wrap;
		gap: 32px;
	}

	.l-footer__top {
		flex-direction: column;
		gap: 40px;
	}

	.is-animating .page-front__hero-lead {
		width: 35%;
	}

	.page-front__hero-desc {
		margin-bottom: 0;
	}

	.page-front__hero-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}
}

@media screen and (max-width: 1080px) {
	.page-front__about__inner.w-1280 {
		flex-direction: column;
		gap: 0;
		padding-top: 80px;
		padding-bottom: 120px;
	}

	.page-front__about__body {
		margin-top: 72px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__service__inner__content__flex {
		flex-direction: column;
		gap: 16px;
		margin-bottom: 24px;
	}

	.page-front__service__heading,
	.page-front__service__text {
		width: 100%;
	}

	.page-front__service__heading {
		font-size: 16px;
	}

	.page-front__service__pm {
		padding: 30px;
		margin-bottom: 24px;
	}
}

@media screen and (max-width: 1080px) {
	.page-front__service__pm-list-item {
		width: calc((100% - 22px) / 2);
	}
	.page-front__service__pm-list-text {
		font-size: 14px;
	}
}

/* 1カラム化を 768px → 600px に遅らせる (768だと早すぎ) */
@media screen and (max-width: 600px) {
	.page-front__service__pm-list-item {
		width: 100%;
	}
}

@media screen and (max-width: 1080px) {
	.page-front__challenge__inner {
		flex-direction: column;
	}

	.page-front__challenge__left {
		width: 100%;
	}

	/* 中間幅: 100vh 固定をやめ、中身の自然な高さに (切れ防止)。
	 * 上端中央寄せだと 100vh に収まらない時に上下が切れるので flex-start に。 */
	.page-front__challenge {
		min-height: 0;
		align-items: flex-start;
	}

	/* PC用スクロール連動ピン(is-challenge-scrolldriven)がリサイズで残っても、
	 * 中間幅では高さ100vh固定・fixed/absolute ピンを無効化して通常フローに戻す。 */
	body.is-challenge-scrolldriven .page-front__challenge {
		min-height: 0;
	}
	body.is-challenge-scrolldriven .page-front__challenge__inner {
		position: static;
		height: auto;
		top: auto;
		bottom: auto;
	}
	body.is-challenge-scrolldriven .page-front__challenge::before {
		position: absolute;
		height: 100%;
	}
}

@media screen and (max-width: 768px) {
	/* SP: left(タイトル+リード)が出てから right(カウンター+カード)を出す。
	 * left の lead は is-challenge-content-in から 1.7s。right はその後に。 */
	.page-front__challenge__right {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 0.7s ease,
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	body.is-challenge-content-in .page-front__challenge__right {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 2.4s;
	}

	/* SP: スクロール連動ピンを有効化（1080px以下のリセットを上書き）。
	 * padding でヘッダー/下端の余白を確保 */
	body.is-challenge-scrolldriven.is-challenge-pinned .page-front__challenge__inner {
		position: fixed;
		top: 0;
		padding-top: 120px;
	}
	body.is-challenge-scrolldriven.is-challenge-pin-bottom .page-front__challenge__inner {
		position: absolute;
		bottom: 0;
		padding-bottom: 120px;
	}

	.page-front__challenge__title-eng,
	.page-front__service__title .eng,
	.page-front__about__title .eng {
		font-size: 48px;
	}

	.page-front__about__title .jp,
	.page-front__service__title .jp,
	.page-front__challenge__title-jp,
	.page-front__news__title-jp,
	.page-front__contact__title-jp {
		font-size: 14px;
	}
.page-front__contact__title-jp{
	text-align: center;
	left: 0;
}
	.page-front__service__title {
		margin-bottom: 24px;
	}
	.page-front__contact__inner {
    justify-content: center;
    align-items: center;
    text-align: center;
}
}

@media screen and (max-width: 768px) {
	.page-front__hero-title {
		width: 100%;
		max-width: 380px;
	}

	.page-front__hero-lead {
		width: 40%;
		max-width: 150px;
	}

	.page-front__hero-lead img {
		width: 100%;
		object-fit: contain;
	}
}

@media screen and (max-width: 768px) {
	.page-front__hero-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		padding-left: 24px;
		padding-right: 24px;
		bottom: 120px;   /* SP: 位置を上げる (base 40px → 120px) */
	}

	.page-front__hero-desc {
		margin-bottom: 0;
		font-size: 14px;
	}

	.page-front__hero-desc br {
		display: none;
	}
}

@media screen and (max-width: 1080px) {
	.page-front__about__heading {
		font-size: 28px;
	}

	.page-front__about__text {
		font-size: 14px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__about__heading {
		font-size: 18px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__challenge__lead {
		margin-top: 13px;
		margin-left: 30px;
		font-size: 14px;
	}

	.page-front__challenge__lead br {
		display: none;
	}

	.page-front__challenge__inner {
		gap: 42px;
	}

	.page-front__challenge::before {
		background: url("../images/top/challenge-before.svg") no-repeat center top 20% / 80% auto;
		width: 100%;
		height: 100vh;
	}

	.page-front__challenge__title-eng-line:nth-child(2) {
		margin-left: 30px;
	}

	.page-front__challenge__title-jp {
		top: 25px;
		left: 115px;
	}

	.page-front__challenge__list {
		width: 410px;          /* 441〜768px は固定幅で中央寄せ */
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.page-front__challenge__list-item {
		width: 100%;
		padding: 16px 16px 110px;
	}

	.page-front__challenge__counter {
		top: -8px;
		left: 0;
		font-size: 16px;
	}

	.page-front__challenge__list-eng {
		bottom: -6px;
	}

	.page-front__challenge__list-text {
		padding: 16px 16px 0;
	}

	.page-front__challenge__list-heading {
		font-size: 20px;
	}

	.page-front__challenge__list-desc {
		font-size: 14px;
	}

	/* SP: 表示は2枚 (stack 0,1) のみ。stack 1 は少し上にずらす */
	.page-front__challenge__list-item[data-stack="1"] {
		transform: translate(10px, -10px) rotate(4deg);
	}
	.page-front__challenge__list-item[data-stack="2"] {
		transform: translate(10px, -10px) rotate(4deg);
		opacity: 0;
		pointer-events: none;
	}
}

/* ≤440px: 固定幅410pxが入らなくなるので 90% に */
@media screen and (max-width: 440px) {
	.page-front__challenge__list {
		width: 90%;
	}
}

@media screen and (max-width: 768px) {
	.page-front__service__cd-eng-wrap,
	.page-front__service__pm-eng-wrap {
		font-size: calc(100vw * 34 / 390); /* 390px幅で34px、画面幅に比例 */
	}

	.page-front__service__pm-text {
		position: relative;
		width: 100%;
		bottom: 0;
		margin-top: -20px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__news__inner.w-1280 {
		flex-direction: column;
	}

	h2.page-front__news__title {
		margin-bottom: 48px;
		width: max-content;
	}

	.page-front__news__title-eng {
		font-size: 50px;
	}

	.page-front__news__btn-wrap {
		justify-content: center;
		margin-top: 32px;
	}

	.page-front__news__list-wrap {
		width: 100%;
	}

	.page-front__news__list {
		max-width: 100%;
		width: 100%;
	}

	.page-front__news__list-link {
		padding: 16px 16px 16px 8px;
	}

	.page-front__news__list-img {
		width: 110px;
	}

	.page-front__news__list-noimg {
		width: 110px;
		padding: 0 12px;
	}

	.page-front__news__list-text {
		margin-right: 0;
		margin-left: 12px;
	}

	.page-front__news__list-category {
		padding: 2px 8px;
		font-size: 12px;
	}

	.page-front__news__list-meta {
		gap: 10px;
		margin-bottom: 8px;
	}

	.page-front__news__list-heading {
		font-size: 14px;
	}

	.page-front__news__list-arrow {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.page-front__service__cd-eng-wrap,
	.page-front__service__pm-eng-wrap {
		left: -22px;
		top: -20px;
	}

	.page-front__service__cd-text {
		position: relative;
		width: 100%;
		bottom: 0;
		margin-top: -20px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__contact {
		padding-top: 100px;
	}

	.page-front__contact__inner {
		flex-direction: column;
		gap: 0;
	}

	.page-front__contact__title-eng {
		font-size: 50px;
	}

	.page-front__contact__lead {
		font-size: 16px;
	}

.page-front__contact__buttons {
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    justify-content: center;
    align-items: center;
}

	/* SP は1カラム表示なので改行要素と PC 用のオフセットは無効化 */
	.page-front__contact__buttons__break {
		display: none;
	}
	.page-front__contact__buttons__break ~ .page-front__contact__btn {
		margin-top: 0; /* PC用のrow-gap相殺(-24px)を打ち消し（重なり防止） */
	}

	.page-front__contact__btn--it {
		margin-top: 0;
	}

.page-front__contact__buttons a {
    padding: 10px 32px;
    font-size: 14px;
    width: 250px;
    justify-content: space-between;
}

	.page-front__contact__body {
		margin-top: 24px;
	}

	.page-front__news {
		padding-top: 80px;
		padding-bottom: 120px;
	}
	.l-footer__menu-item > a {
    width: 100%;
    text-align: center;
}
.l-footer__submenu-link {
    font-size: 14px;
    width: 100%;
    text-align: center;
}
}

@media screen and (max-width: 768px) {
	.l-footer__top {
		flex-direction: column;
		margin-bottom: 40px;
		gap: 40px;
	}

	ul.l-footer__menu {
		gap: 16px;
		flex-direction: column;
	}

	.l-footer__btns {
		flex-direction: column;
		gap: 16px;
		width: 100%;
		margin-left: 0;
	}

	.l-footer__btns .l-footer__btn {
		font-size: 14px;
		line-height: 1.6;
		display: block;
		letter-spacing: .1em;
	}

	.l-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	ul.l-footer__legal {
		gap: 8px;
		flex-direction: column;
		line-height: 1.6;
		width: 100%;
	}
	ul.l-footer__legal a{
		width: 100%;
		display: block;
		text-align: center;
	}
	ul.l-footer__legal li{
		width: 100%;
	}

	.page-front__hero-desc {
		margin-bottom: 0;
	}

.l-footer__btns .l-footer__btn {
    font-size: 14px;
    padding: 10px 20px;
    width: 230px;
	margin-left: auto;
	margin-right: auto;
    display: flex;
}

}

@media screen and (max-width: 768px) {
	.l-header__inner {
		padding: 9px 24px 9px 14px;
		align-items: center;
	}
}

@media screen and (max-width: 768px) {
	.page-front__about {
		padding-top: 50vh;
	}

	/* SP: about 直後の余白を詰める。
	 * margin-top(助走) と padding-top(中身の中央寄せ) を縮め、
	 * 黄色が覆い切った後すぐ service コンテンツが出るようにする。 */
	.page-front__service {
		margin-top: 30vh;
		padding-top: 10vh;
	}

	/* SP: service 直後の余白も同様に詰める。
	 * challenge は flex 中央寄せ + min-height:100vh なので、
	 * 上寄せ + 控えめな padding にして緑が覆い切った後すぐ中身を出す。 */
	.page-front__challenge {
		margin-top: 30vh;
		min-height: 0;
		align-items: flex-start;
		padding-top: 10vh;
	}
}

@media screen and (max-width: 768px) {
	/* SP: 波(cap)を高くしてデザイン(Mask group.svg, 縦長)の比率に寄せる。
	 * 構造・動き(body+cap, 半山が translateX で流れる)は PC と共通。
	 * (--wave-max-h は PC と同じ 0 のまま = 波は画面下端に固定) */
	.page-front__hero__wave {
		--wave-edge-h: clamp(198px, 55vw, 286px); /* 1.1倍 */
	}

	/* SP: about 表示中は黄色(mid)・緑(front)を約2/3 に低く (PCの25vh上書きを打ち消し SP値の2/3に) */
	body.is-about-active .page-front__hero__wave--mid,
	body.is-about-active .page-front__hero__wave--front {
		--wave-edge-h: clamp(132px, 36vw, 190px); /* 1.1倍 */
	}

	/* SP: 競り上がり最大高さを 140vh → 115vh に縮小 */
	body.is-about-active .page-front__hero__wave--back {
		height: calc(var(--wave-max-h) + (115vh - var(--wave-max-h)) * clamp(0, calc(var(--about-cover-progress) / var(--about-cover-end)), 1));
	}
	body.is-service-active .page-front__hero__wave--mid {
		height: calc(var(--wave-max-h) + (115vh - var(--wave-max-h)) * clamp(0, calc(var(--service-cover-progress) / 0.85), 1));
	}
	body.is-challenge-active .page-front__hero__wave--front {
		height: calc(var(--wave-max-h) + (115vh - var(--wave-max-h)) * clamp(0, calc(var(--challenge-cover-progress) / 0.85), 1));
	}
}

@media screen and (max-width: 768px) {
	.page-front__about__title .jp {
		bottom: 7px;
	}

	.page-front__about__btn {
		margin-top: 32px;
	}
}

@media screen and (max-width: 768px) {
	.page-front__service__pm-title {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.page-front__service__pm-title::before {
		top: 10px;
	}

	.page-front__service__pm-desc {
		font-size: 14px;
	}

	.page-front__service__cd-title {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.page-front__service__cd-title::before {
		top: 10px;
	}

	.page-front__service__cd-desc {
		font-size: 14px;
	}

	.page-front__service__cd {
		padding: 30px;
		margin-bottom: 32px;
	}

	.page-front__service__text {
		font-size: 14px;
	}

	/* SP: undulate(scaleY無限ループ)のみ止める。rise + flow(波の横流れ)は維持。 */
	.page-front__service__pm-list-item.is-visible .page-front__service__pm-list-wave {
		animation: pmWaveRise 0.8s cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
	}
}

/* フッター共通CONTACTの上波: ページ別に直前セクションの背景色へ馴染ませる。
 * 各ページのCSS(スラッグ自動読込)が :root { --contact-wave-color } を上書きする。 */
.page-front__contact__wave--top path {
	fill: var(--contact-wave-color, #2B2525);
}

/* 無限ループ系(波の横流れ/マーキー/縦ループ)は js/wave-flow.js の rAF 駆動に統一
 * （WebKitのループ境界チラつき対策）。
 * JSが動く環境では CSS keyframes を停止（no-JS時はCSSアニメがフォールバック） */
html.js-wave-flow .page-front__hero__wave__svg,
html.js-wave-flow .l-page-hero__wave-svg,
html.js-wave-flow .page-front__contact__wave--top,
html.js-wave-flow .page-front__contact__wave--bottom,
html.js-wave-flow .page-front__service__pm-list-wave-svg,
html.js-wave-flow .page-front__sns__visual-track,
html.js-wave-flow .page-front__sns__ticker-track {
	animation: none !important;
}