/**
 * RELATION IN NUMBERS（数字で見る）ページ
 * デザイン: デザインデータpng/4_Relation in numbers.png
 * ベースレイアウト。アイコン/イラスト・地図・写真・波形・アニメは後日実装。
 *
 * 配色: 橙 #F5A313 / 黄 #FDCE00 / 青緑 #10A9AC / 文字 #493B3B / クリーム #FFF8EA
 */

.p-numbers {
	overflow: clip; /* hidden だと sticky(intro-hold) が効かない */
}

/* =========================================================
 * 共通: セクション見出し（英字大 + 日本語小）
 * ========================================================= */
.p-numbers__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.p-numbers__heading-eng {
	/* DM Sans / SemiBold・Bold / 60px / 100% / uppercase */
	font-weight: 700;
	font-size: 60px;
	line-height: 100%;
	text-transform: uppercase;
	letter-spacing: 0;
}
.p-numbers__heading-jp {
	/* Noto Sans JP / Bold / 16px / 160% / letter-spacing 20% */
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0.2em;
}

/* セクション頭（見出し + リード文）: 左右2カラム */
.p-numbers__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 56px;
}
/* domain: マークアップ順（リード→見出し）のまま、リード左・見出し右（デザイン準拠） */
.p-numbers__head--reverse {
	flex-direction: row;
	align-items: flex-start;
}
.p-numbers__heading--right {
	text-align: right;
}
.p-numbers__head-lead {
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}

/* ヒーローは共通 l-page-hero（style.css）に移行 */

/* =========================================================
 * セクション1: NUMBERS
 * 背景は l-page-hero の固定カバー（blur FV写真 + 橙70%）が透ける
 * ========================================================= */
.p-numbers__numbers {
	background-color: transparent;
	color: #fff;
	padding: 0 0 180px; /* 下180=フラット60+波120。頭はintro-holdが1画面ぶん停止させる */
}
/* タイトル+statsカード（1インナー）: 表示された時点でスティッキーし1画面ぶん停止。
 * タイトルはヘッダー下(padding-top)に静止。コンテンツが縦に収まらない分は
 * ホールド解放後に通常スクロールで見える（クリップしない） */
.p-numbers__intro-hold {
	height: 200svh;
}
.p-numbers__intro-pin {
	position: sticky;
	top: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 140px 0 40px;
}
.p-numbers__intro-pin .p-numbers__numbers-inner {
	width: 100%;
}
/* タイトル帯(見出し+リード)は hero-reveal 共通の「下からふわっと」を無効化
 * （style.css の [data-hero-reveal] .w-1280 > * を上書き。文字スライドインのみ残す） */
html.js-page-hero [data-hero-reveal] .w-1280 > .p-numbers__head {
	opacity: 1;
	transform: none;
	transition: none;
}
/* インナーは 1140px（w-1280 の max-width を上書き / コンテンツ1140 + 左右padding40） */
.p-numbers__numbers-inner,
.p-numbers__domain-inner {
	max-width: 1220px;
}
.p-numbers__numbers .p-numbers__head {
	align-items: flex-start; /* リード文は見出しの上端側（デザイン準拠） */
}
.p-numbers__numbers .p-numbers__head-lead {
	color: #fff;
}

/* 6枚グリッド（3列 / 1140内で366カード相当） */
.p-numbers__stats {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 21px;
}
.p-numbers__stat {
	background: #fff;
	border-radius: 24px;
	padding: 32px 24px 36px;
	color: #493B3B;
	text-align: center;
}
.p-numbers__stat-badge {
	display: inline-block;
	background: #10A9AC;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.05em;
	border-radius: 999px;
	padding: 7px 36px;
	min-width: 250px;
}
.p-numbers__stat-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 22px 0 18px;
	min-height: 104px;
}
.p-numbers__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	flex-shrink: 0;
}
.p-numbers__stat-icon img,
.p-numbers__stat-icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	overflow: visible; /* パーツがviewBox外へ動く芝居(ひょこ等)で頭が切れないように */
}
.p-numbers__stat-nums {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.p-numbers__stat-num {
	font-weight: 700;
	font-size: 100px;
	line-height: 1;
	color: #F5A313; /* 数字はオレンジ（デザイン準拠） */
	white-space: nowrap;
}
.p-numbers__stat-unit {
	font-size: 28px;
	margin-left: 4px;
	color: #493B3B; /* 単位は文字色 */
}
.p-numbers__stat-desc {
	font-size: 15px;
	line-height: 1.9;
}
/* ---- 統計バー（説明文の下 / 覆い完了+カード表示後に伸長） ---- */
.p-numbers__stat-bars {
	margin-top: 18px;
	padding-top: 4px;
	text-align: left;
}
.p-numbers__stat-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px; /* 上に%ラベルが乗るぶん */
}
.p-numbers__stat-bar + .p-numbers__stat-bar {
	margin-top: 24px;
}
.p-numbers__stat-bar-label {
	font-weight: 700;
	font-size: 13px;
	color: #10A9AC;
	width: 2.5em;
	flex-shrink: 0;
}
.p-numbers__stat-bar--orange .p-numbers__stat-bar-label {
	color: #F5A313;
}
.p-numbers__stat-bar-track {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #E9E9E9;
	overflow: hidden;
}
.p-numbers__stat-bar-track i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	background: #10A9AC;
	transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-numbers__stat-bar--orange .p-numbers__stat-bar-track i {
	background: #F5A313;
}
.p-numbers__stat.is-bars-in .p-numbers__stat-bar-track i {
	width: calc(var(--rate, 0) * 1%);
}
/* %値: バーの右端の上に乗せる（ラベル付き=男女比は右横に） */
.p-numbers__stat-bar-value {
	position: absolute;
	right: 0;
	top: -20px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: #10A9AC;
	font-variant-numeric: tabular-nums;
}
.p-numbers__stat-bar-value small {
	font-size: 11px;
	margin-left: 1px;
}
.p-numbers__stat-bar--orange .p-numbers__stat-bar-value {
	color: #F5A313;
}
.p-numbers__stat-bar-label ~ .p-numbers__stat-bar-value {
	position: static;
	width: 3.2em;
	text-align: right;
	flex-shrink: 0;
}
/* 目盛り（0% / 50% / 100%） */
.p-numbers__stat-bar-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-weight: 700;
	font-size: 10px;
	color: #9C9C9C;
}
/* 男女比はラベル・値ぶん目盛りの左右をバー位置に合わせる */
.p-numbers__stat--gender .p-numbers__stat-bar-scale {
	padding-left: calc(2.5em + 10px);
	padding-right: calc(3.2em + 10px);
}

/* 取引社数: 「社以上」は改行して右寄せ（デザイン準拠） */
.p-numbers__stat:nth-child(4) .p-numbers__stat-num {
	font-size: 86px;
}
.p-numbers__stat:nth-child(4) .p-numbers__stat-unit {
	display: block;
	text-align: right;
	margin: 6px 0 0;
	font-size: 28px;
}
/* 男女比: アイコン(2人)は横長なので幅170px */
.p-numbers__stat--gender .p-numbers__stat-icon {
	width: 170px;
	height: 100px;
}
/* 男女比: 72%(青緑)/28%(橙) を縦積み */
.p-numbers__stat--gender .p-numbers__stat-nums {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.p-numbers__stat--gender .p-numbers__stat-num {
	font-size: 56px;
}
.p-numbers__stat--gender .p-numbers__stat-num:nth-child(1) { color: #10A9AC; }
.p-numbers__stat--gender .p-numbers__stat-num:nth-child(2) { color: #F5A313; }
.p-numbers__stat--gender .p-numbers__stat-unit {
	color: inherit; /* %も数字と同色 */
	font-size: 32px;
}

/* =========================================================
 * セクション2: BUSINESS DOMAIN（黄背景）
 * ========================================================= */
.p-numbers__domain {
	background-color: #FDCE00;
	color: #493B3B;
	/* 上60: numbers側(60+波120)と合わせて隙間240・波が中心
	 * 下180: area境目も同配分（フラット60+波120） */
	padding: 60px 0 180px;
	position: relative;
}
/* 黄背景の頭の波（footer CONTACT波と同形状/周期・横流れ7s） */
.p-numbers__area-wave,
.p-numbers__domain-wave {
	position: absolute;
	left: 0;
	top: 1px; /* サブピクセルの隙間予防で1px食い込ませる */
	width: 100%;
	height: 120px;
	transform: translateY(-100%);
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}
.p-numbers__area-wave svg,
.p-numbers__domain-wave svg {
	display: block;
	width: 200%; /* 2周期ぶん。-50% translate でシームレスループ */
	height: 100%;
	animation: contactWaveFlow 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.p-numbers__area-wave svg,
	.p-numbers__domain-wave svg { animation: none; }
}
.p-numbers__domain-lead {
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}
.p-numbers__domains {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.p-numbers__domain-card {
	background: #fff;
	border-radius: 20px;
	padding: 32px 32px 36px;
}
.p-numbers__domain-label {
	font-weight: 700;
	font-size: 20px;
	color: #10A9AC;
	position: relative;
	padding-left: 20px;
}
.p-numbers__domain-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #10A9AC;
}
.p-numbers__domain-figure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	min-height: 150px;
}
.p-numbers__domain-illust {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 110px;
	flex-shrink: 0;
}
.p-numbers__domain-illust img,
.p-numbers__domain-illust svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	overflow: visible;
}
/* 円形プログレス（SVGリング / inviewで0%→値まで描画） */
.p-numbers__domain-rate {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	flex-shrink: 0;
}
.p-numbers__domain-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* 12時の位置から時計回り */
}
.p-numbers__domain-ring-track,
.p-numbers__domain-ring-bar {
	fill: none;
	stroke-width: 10;
}
.p-numbers__domain-ring-track {
	stroke: #F5EFDD;
}
.p-numbers__domain-ring-bar {
	stroke: #F5A313;
	/* r=80 → 円周 2πr ≈ 502.65 */
	stroke-dasharray: 502.65;
	stroke-dashoffset: 502.65; /* 初期0% */
	transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.p-numbers__domain-rate.is-inview .p-numbers__domain-ring-bar {
	stroke-dashoffset: calc(502.65px * (1 - var(--rate, 0) / 100));
}
.p-numbers__domain-rate-num {
	position: relative;
	font-weight: 700;
	font-size: 44px;
	line-height: 1;
	color: #F5A313;
}
.p-numbers__domain-rate-unit {
	font-size: 24px;
	color: #493B3B;
	margin-left: 2px;
}
.p-numbers__domain-new {
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 150px;
	height: 150px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #F5A313;
	color: #F5A313;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	/* 文字色は波が覆う頃に切り替え（btn-main と同様） */
	transition: color 0.3s ease 0.3s;
}
/* 表示されると自動で波がゆっくり競り上がってオレンジが覆う（1回きり・以後そのまま）
 * 機構は btn-main の波hoverと同じ / 発火は js/numbers.js が .is-filled を付与 */
.p-numbers__domain-new::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -90%;
	right: -90%;
	bottom: -30%;
	height: 240%;
	background: #F5A313;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	translate: 0 120%;
	rotate: 8deg;
	transform-origin: 50% 50%;
	transition:
		translate 4s cubic-bezier(.45, .05, .25, 1),
		rotate    4.8s cubic-bezier(.5, -.2, .4, 1.3);
}
.p-numbers__domain-new.is-filled {
	color: #fff;
	transition-delay: 1.8s; /* 波(半速)が覆う頃に文字が白へ */
}
.p-numbers__domain-new.is-filled::before {
	translate: 0 0;
	rotate: -8deg;
}
.p-numbers__domain-new b {
	font-weight: 700;
	font-size: 40px;
}
.p-numbers__domain-new span {
	font-size: 20px;
	letter-spacing: 0.08em;
}

/* =========================================================
 * セクション3: SERVICE AREA（青緑背景）
 * ========================================================= */
.p-numbers__area {
	background-color: #10A9AC;
	color: #fff;
	padding: 60px 0 120px; /* 上60: domain側(60+波120)と合わせて隙間240・波が中心 */
	position: relative;
}
.p-numbers__area .p-numbers__head-lead {
	color: #fff;
}
.p-numbers__area .p-numbers__head {
	align-items: flex-start;
}
.p-numbers__area .p-numbers__head-lead {
	max-width: 430px;
}
.p-numbers__area-card {
	background: #fff;
	border-radius: 20px;
	color: #493B3B;
	padding: 40px;
}
/* 関東: 左マップカード + 右4枚の都県カード */
.p-numbers__area-kanto {
	display: grid;
	grid-template-columns: 1fr 424px;
	gap: 16px;
	align-items: stretch;
	margin-bottom: 16px;
}
.p-numbers__area-region {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	font-size: 32px;
	margin-bottom: 24px;
}
.p-numbers__area-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #10A9AC;
	flex-shrink: 0;
}
.p-numbers__area-pin img {
	width: 16px;
	height: 20px;
}
.p-numbers__area-map-illust {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px 16px;
}
.p-numbers__area-map-illust img {
	width: 100%;
	max-width: 560px;
	height: auto;
}
.p-numbers__area-stats {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* 都県カード: 左に黄帯 / アイコン / 都県名 / 数字 / 下にプログレスバー */
.p-numbers__area-stat {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	background: #fff;
	border-radius: 12px;
	border-left: 8px solid #FDCE00;
	color: #493B3B;
	padding: 20px 28px;
}
.p-numbers__area-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 111px; /* デザイン準拠(112×111)。jpg素材は余白込み */
	flex-shrink: 0;
}
.p-numbers__area-stat-icon img {
	max-width: 100%;
	max-height: 100%;
}
.p-numbers__area-stat-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.p-numbers__area-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.p-numbers__area-stat-name {
	font-weight: 700;
	font-size: 22px;
}
.p-numbers__area-stat-num {
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	color: #F5A313;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.p-numbers__area-stat-unit {
	font-size: 20px;
	color: #493B3B;
	margin-left: 2px;
}
/* プログレスバー: inviewで0→値%（先端に黄ドット / js/numbers.jsが is-inview 付与） */
.p-numbers__area-stat-bar {
	position: relative;
	display: block;
	height: 4px;
	border-radius: 999px;
	background: #E9E9E9;
}
.p-numbers__area-stat-bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 999px;
	background: #FDCE00;
	transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.p-numbers__area-stat-bar i::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #FDCE00;
}
.p-numbers__area-stat.is-inview .p-numbers__area-stat-bar i {
	width: calc(var(--rate, 0) * 1%);
}
/* 関西: テキスト左 + 右へフェードした写真が右端まで */
/* 関西カード: 左テキスト + 右に線画イラスト(618×232相当・切り抜きなし) */
.p-numbers__area-card--kansai {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 40px;
}
.p-numbers__area-kansai-body {
	flex-shrink: 0;
}
.p-numbers__area-kansai-text {
	font-size: 15px;
	line-height: 2;
}
.p-numbers__area-kansai-photo {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}
.p-numbers__area-kansai-photo img {
	width: 100%;
	max-width: 618px;
	height: auto;
}
/* エリア注記（関西カード枠下・右寄せ） */
.p-numbers__area-note {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 350;
	line-height: 30px;
	letter-spacing: 0.05em;
	text-align: right;
	color: #fff;
}
/* パネルの順次表示（マップ→都県1〜4 / 関西は単独発火） */
html.js-text-anim .p-numbers__area-card--map.is-anim-in { transition-delay: 0.05s; }
html.js-text-anim .p-numbers__area-stat.is-anim-in:nth-child(1) { transition-delay: 0.15s; }
html.js-text-anim .p-numbers__area-stat.is-anim-in:nth-child(2) { transition-delay: 0.25s; }
html.js-text-anim .p-numbers__area-stat.is-anim-in:nth-child(3) { transition-delay: 0.35s; }
html.js-text-anim .p-numbers__area-stat.is-anim-in:nth-child(4) { transition-delay: 0.45s; }

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 1080px) {
	.p-numbers__heading-eng { font-size: 44px; }
	.p-numbers__stats,
	.p-numbers__domains { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
	.p-numbers__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 40px;
	}
	/* SPは見出し→リード文の順に入れ替え */
	.p-numbers__head--reverse { flex-direction: column; }
	.p-numbers__head--reverse .p-numbers__domain-lead { order: 1; }
	.p-numbers__head--reverse .p-numbers__heading { order: 0; }
	.p-numbers__heading--right { text-align: left; }
	.p-numbers__heading-eng { font-size: 32px; }
	/* SERVICE AREA は SP で改行させず1行に */
	.p-numbers__area .p-numbers__heading-eng br { display: none; }

	/* 境目は フラット40 + 波120 + フラット40 = 200px で均等 */
	.p-numbers__numbers { padding: 0 0 160px; }
	/* SP: タイトルの初期表示位置を画面の6割付近まで下げる（ヘッダー直下だと
	 * スクロールの勢いで丸ごと素通りするため / レビュー指示）。
	 * ホールド長は js/numbers.js が pin実高 + 0.6画面ぶんで設定 */
	.p-numbers__intro-hold { height: auto; }
	.p-numbers__intro-pin {
		position: sticky;
		top: 0;
		min-height: 0;
		display: block;
		padding: 44svh 0 56px;
	}
	.p-numbers__domain { padding: 40px 0 160px; }
	.p-numbers__area { padding: 40px 0 80px; }

	.p-numbers__stats,
	.p-numbers__domains { grid-template-columns: 1fr; }

	.p-numbers__area-card { padding: 24px 20px; }
	.p-numbers__area-kanto { grid-template-columns: 1fr; }
	.p-numbers__area-region { font-size: 24px; margin-bottom: 16px; }
	.p-numbers__area-pin { width: 32px; height: 32px; }
	.p-numbers__area-stat { padding: 16px 20px; gap: 14px; }
	.p-numbers__area-stat-icon { width: 72px; height: 71px; }
	.p-numbers__area-stat-name { font-size: 18px; }
	.p-numbers__area-stat-num { font-size: 36px; }
	.p-numbers__area-stat-unit { font-size: 16px; }
	/* SPは縦積み: テキスト → イラスト(切り抜きなし) */
	.p-numbers__area-card--kansai { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 20px; }
	.p-numbers__area-kansai-photo { justify-content: center; }
	.p-numbers__area-note { font-size: 12px; line-height: 1.9; text-align: left; }
}

/* フッター共通CONTACTの上波色（このページの直前セクション背景に馴染ませる） */
:root {
	--contact-wave-color: #10A9AC;
}

/* =========================================================
 * numbers専用: FV覆いのベタ塗りオレンジ化
 * 他ページ=blur写真+橙70%カバー のところ、このページだけ
 * 競り上がる橙波が進捗で 70%→100% にベタ化し、覆い完了後の
 * 後続セクション背景（固定カバー）もベタ#F5A313で受ける
 * ========================================================= */
.p-numbers .l-page-hero__cover-img {
	display: none; /* このページはぼかし写真なし（完全ベタ橙） */
}
.p-numbers .l-page-hero__cover::before {
	background-color: #F5A313; /* 70% → 不透明ベタ */
}
.p-numbers .l-page-hero__cover::after {
	content: none; /* black10%のトーンも無し */
}
.p-numbers .l-page-hero__cover {
	/* 橙波が消え始める前（進捗0.85）にベタ橙を100%まで到達させる。
	 * 波とカバーは同色のため重なりは見えず、速いスクロールでも写真が露出しない。 */
	opacity: clamp(0, calc((var(--page-hero-progress) - 0.70) / 0.15), 1);
	transition: none;
}
.p-numbers .l-page-hero__wave--orange {
	/* 前半: 競り上がり進捗(0→0.85)で 0.7→1.0 にベタ化。
	 * 後半のフェードはカバー(不透明橙・0.95で完了)より後の 0.95→1.0 に遅延
	 * （先に薄くなるとカバー未完了の一瞬に素のFV写真の顔が透けるため） */
	opacity: calc(
		(0.7 + 0.3 * clamp(0, calc(var(--page-hero-progress) / 0.85), 1)) *
		clamp(0, calc(1 - (var(--page-hero-progress) - 0.95) / 0.05), 1)
	);
}

/* =========================================================
 * アイコンの「動いてる感」: パーツ別の芝居（インラインSVGのクラスに付与）
 *  stat-01 ハートふわふわ / 02 リボンゆらゆら / 03 若葉ゆらゆら(全体)
 *  stat-04 握手ぶんぶん(全体) / 05 男女交互ひょこ / 06 中央ひょこ
 *  domain-01 稲妻チカッ / 02 吊り荷スイング / 04 歯車回転 / 05 コンパスゆら / 06 010点滅+歯車
 *  ＋共通: カードhoverでぽよん
 * ========================================================= */
@keyframes numbersIconBoyon {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.18, 0.85); }
	60%  { transform: scale(0.92, 1.1); }
	80%  { transform: scale(1.05, 0.96); }
	100% { transform: scale(1); }
}
@keyframes numbersPartFloat {
	from { transform: translateY(1.5px); }
	to   { transform: translateY(-3.5px); }
}
@keyframes numbersPartSwing {
	from { transform: rotate(-8deg); }
	to   { transform: rotate(8deg); }
}
@keyframes numbersPartRock {
	from { transform: rotate(-4deg); }
	to   { transform: rotate(4deg); }
}
@keyframes numbersPartShake {
	0%, 100% { transform: translateY(0); }
	25%      { transform: translateY(-2.5px); }
	50%      { transform: translateY(1.5px); }
	75%      { transform: translateY(-1px); }
}
@keyframes numbersPartBob {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-4px); }
}
@keyframes numbersPartFlash {
	0%, 100% { opacity: 1; }
	12%      { opacity: 0.2; }
	24%      { opacity: 1; }
	36%      { opacity: 0.45; }
	48%      { opacity: 1; }
}
@keyframes numbersPartSpin {
	to { transform: rotate(360deg); }
}
/* 定規は透明化しない（不透明のままスライドで出入り / レビュー指示） */
@keyframes numbersRulerLoop {
	0%       { transform: translate(18px, 18px); }
	22%      { transform: translate(0, 0); }
	62%      { transform: translate(0, 0); }
	84%, 100% { transform: translate(18px, 18px); }
}
@keyframes numbersPartBlink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* パーツはSVG内の自身の中心基準で変形 */
.p-numbers [class^="ic-"],
.p-numbers [class*=" ic-"] {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

/* --- stat --- */
.p-numbers .ic-heart  { animation: numbersPartFloat 1.6s ease-in-out infinite alternate; }
.p-numbers .ic-ribbon { animation: numbersPartSwing 1.3s ease-in-out infinite alternate; transform-origin: 50% 12%; }
.p-numbers__stat:nth-child(3) .p-numbers__stat-icon svg { animation: numbersPartRock 1.8s ease-in-out infinite alternate; transform-origin: 50% 85%; }
.p-numbers__stat:nth-child(4) .p-numbers__stat-icon svg { animation: numbersPartShake 1.4s ease-in-out infinite; }
.p-numbers .ic-man    { animation: numbersPartBob 2.4s ease-in-out infinite; }
.p-numbers .ic-woman  { animation: numbersPartBob 2.4s ease-in-out infinite 1.2s; }
.p-numbers .ic-person { animation: numbersPartBob 2s ease-in-out infinite; }

/* --- domain --- */
/* 設備技術者(domain-01): ランプの光5本が時差で点滅 + 蛇口から水滴が垂れるループ */
@keyframes numbersDropFall {
	0%   { transform: translateY(-5px) scale(0.35); opacity: 0; }
	22%  { transform: translateY(-2px) scale(0.8);  opacity: 1; }
	42%  { transform: translateY(0)    scale(1);    opacity: 1; }
	78%  { transform: translateY(15px) scale(1);    opacity: 0; }
	100% { transform: translateY(15px) scale(1);    opacity: 0; }
}
.p-numbers .ic-drip { animation: numbersDropFall 2.2s ease-in infinite; transform-origin: 50% 0%; }
.p-numbers .ic-glow--1 { animation: numbersPartBlink 1.8s ease-in-out infinite; }
.p-numbers .ic-glow--2 { animation: numbersPartBlink 1.8s ease-in-out infinite 0.15s; }
.p-numbers .ic-glow--3 { animation: numbersPartBlink 1.8s ease-in-out infinite 0.3s; }
.p-numbers .ic-glow--4 { animation: numbersPartBlink 1.8s ease-in-out infinite 0.45s; }
.p-numbers .ic-glow--5 { animation: numbersPartBlink 1.8s ease-in-out infinite 0.6s; }
.p-numbers .ic-bolt    { animation: numbersPartFlash 3.2s ease-in-out infinite; }
/* クレーン(domain-02): 紐(グレー)+吊り荷(teal)が伸縮する動きはSVG内SMILの d モーフで実装
 * （svg01↔svg02の2状態を補間ループ。本体・アームは不動）。CSSアニメは不要。 */
.p-numbers .ic-gear-l  { animation: numbersPartSpin 9s linear infinite; }
.p-numbers .ic-gear-s  { animation: numbersPartSpin 6s linear infinite reverse; }
/* CAD: コンパスは静止（レビュー指示）。三角定規が斜め右下から入って型にハマり、
 * また斜め右下へ戻るループ */
.p-numbers .ic-ruler { animation: numbersRulerLoop 4.5s ease-in-out infinite; }
.p-numbers .ic-bit--1  { animation: numbersPartBlink 1.8s ease-in-out infinite; }
.p-numbers .ic-bit--2  { animation: numbersPartBlink 1.8s ease-in-out infinite 0.6s; }
.p-numbers .ic-bit--3  { animation: numbersPartBlink 1.8s ease-in-out infinite 1.2s; }
/* 橋(domain-03): 揺れなし。緑ケーブル(ic-cables)だけを上→下へ描画。グレーの橋脚・橋桁は動かさない。
 * clip-path のアニメはJS(numbers.js)で rAF 駆動（SVG<g>はCSS keyframesだと毎フレーム再クリップされないため）。 */
.p-numbers .ic-cables {
	clip-path: inset(0 0 100% 0); /* 初期は上端でクリップ（非表示） */
}
.p-numbers .ic-cables.is-drawn {
	clip-path: inset(0 0 0 0); /* JS未実行/フォールバック時は全表示 */
}

/* --- 共通: カードhoverでぽよん --- */
.p-numbers__stat:hover .p-numbers__stat-icon svg,
.p-numbers__domain-card:hover .p-numbers__domain-illust svg {
	animation: numbersIconBoyon 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.p-numbers__stat-icon svg,
	.p-numbers__domain-illust svg,
	.p-numbers [class^="ic-"],
	.p-numbers [class*=" ic-"] { animation: none !important; }
}

/* =========================================================
 * パネルの順次表示（stats / domains 共通: グループ発火 + 0.1s刻み）
 * statsは hero-reveal 配下のため nth 遅延(0.55s〜)を上書きする
 * ========================================================= */
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(1),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(1) { transition-delay: 0.05s; }
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(2),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(2) { transition-delay: 0.15s; }
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(3),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(3) { transition-delay: 0.25s; }
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(4),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(4) { transition-delay: 0.35s; }
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(5),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(5) { transition-delay: 0.45s; }
html.js-text-anim .p-numbers__stat.is-anim-in:nth-child(6),
html.js-text-anim .p-numbers__domain-card.is-anim-in:nth-child(6) { transition-delay: 0.55s; }
/* ulの塊フェード(hero-revealの自動stagger)は無効化: カード個別表示に一本化 */
html.js-page-hero [data-hero-reveal] .w-1280 > .p-numbers__stats:not([data-anim]) {
	opacity: 1;
	transform: none;
	transition: none;
}

/* カウントアップ中の桁ゆれ防止: 等幅数字（フォント対応時） */
.p-numbers__stat-num,
.p-numbers__domain-rate-num {
	font-variant-numeric: tabular-nums;
}


@media screen and (max-width:768px) {
	.p-numbers__head-lead {
    font-size: 14px;
}
}

/* 無限ループは js/wave-flow.js の rAF 駆動（WebKitのループ境界チラつき対策）。
 * JS有効時は CSS keyframes を停止（no-JS時はCSSフォールバック） */
html.js-wave-flow .p-numbers__area-wave svg,
html.js-wave-flow .p-numbers__domain-wave svg {
	animation: none !important;
}