/* ============================================================
 * home-creative.css ─ トップページ「均質打破」クリエイティブ層
 *
 * 役割：home.css の上に重ねて、KV以外の全セクションの「声量」を
 *       セクションごとに激変させる編集的レイヤー。
 *       設計事務所/美術館パンフレットの佇まい（コーナーブラケット・
 *       建築図面グリッド・明朝・静謐）を正典に、紙地とダークの
 *       コントラストでスクロールの楽章をつくる。
 *
 * 依存：tokens.css / base.css（.has-brackets / .has-blueprint-grid /
 *       .hairline / --color-decor-* / --bracket-* を利用）
 *
 * 方針：
 *   - 既存クラス名・PHPロジックは壊さない。値・装飾の上書きのみ。
 *   - すべて Vanilla CSS。scroll-driven は @supports で隔離し、
 *     未対応環境は reveal（IO）の最終状態にフォールバック。
 *   - prefers-reduced-motion で全モーション停止。
 *   - SP（〜767px）で縦積み・可読（WCAG AA）を死守。
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * 0. フィルムグレイン（トップ全体・外部リクエスト0）
 *    SVG feTurbulence を data-URI で。固定オーバーレイで紙に粒子感。
 * ════════════════════════════════════════════════════════════ */
.film-grain {
	position: fixed;
	inset: 0;
	z-index: 1;                 /* コンテンツ(z-base以下)の上、ヘッダー(z-header)の下 */
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* ダーク強調セクションの上では粒子を加算寄りに（沈まないよう） */
@media (max-width: 767px) {
	.film-grain {
		opacity: 0.38;          /* SPは画面が近く粒子が目立つため抑える */
	}
}

@media (prefers-reduced-motion: reduce) {
	.film-grain { opacity: 0.32; }
}


/* ════════════════════════════════════════════════════════════
 * 1. エディトリアル・インデックス（section-label の再解釈）
 *    機械的な「01 ─ Purpose」反復をやめ、巨大明朝の連番＋
 *    等幅英ラベル＋総数表記の「図録のノンブル」へ。
 * ════════════════════════════════════════════════════════════ */
.editorial-index {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	line-height: 1;
}

.editorial-index__num {
	font-family: var(--font-serif-jp);          /* 明朝の大連番 */
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	font-feature-settings: "tnum";
	line-height: 0.8;
}

.editorial-index__en {
	font-family: var(--font-mono);               /* 等幅ラベル */
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	align-self: flex-end;
	padding-bottom: 0.4em;
}

.editorial-index__total {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted);
	align-self: flex-end;
	padding-bottom: 0.4em;
}

/* ダーク強調セクション上 */
.editorial-index--invert .editorial-index__num { color: var(--color-brand-300); }
.editorial-index--invert .editorial-index__en  { color: var(--color-text-dark-secondary); }
.editorial-index--invert .editorial-index__total { color: var(--color-text-dark-muted); }

/* 中央寄せ（Final CTA 用） */
.editorial-index--center {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: var(--space-5);
}
.editorial-index--center .editorial-index__en {
	padding-bottom: 0;
	letter-spacing: var(--ls-widest);
}

@media (max-width: 767px) {
	.editorial-index { gap: var(--space-2); margin-bottom: var(--space-4); }
	.editorial-index__num { font-size: clamp(2.25rem, 12vw, 3rem); }
}


/* ════════════════════════════════════════════════════════════
 * 2. セクションの楽章リズム（声量を交互に変える）
 *    紙地セクションに、上端だけ建築図面グリッドが「組み上がる」
 *    薄い導入帯を持たせ、bg-mega-typo の代替とする。
 * ════════════════════════════════════════════════════════════ */
.section-movement {
	position: relative;
}

/* 紙地セクション上端の極薄ブループリント帯（bg-mega-typo 撤去の代替） */
.purpose-router.section-movement::before,
.bento.section-movement::before,
.strengths.section-movement::before,
.news-column.section-movement::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(180px, 32vh, 360px);
	background-image:
		linear-gradient(var(--color-decor-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-decor-grid) 1px, transparent 1px);
	background-size: var(--space-7) var(--space-7);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

/* purpose-router は既存の ::before（丸枠）を持つため上書きで打ち消す */
.purpose-router.section-movement::before {
	border: 0;
	border-radius: 0;
	inset: 0 0 auto 0;
}

/* グリッド帯（::before, z-index:0）の上にコンテンツを必ず重ねる。
   各セクションの直下コンテナを positioned + z-index:1 にして
   背景帯がテキストに被らないようにする。 */
.bento.section-movement > .container,
.strengths.section-movement > .container,
.news-column.section-movement > .container {
	position: relative;
	z-index: 1;
}


/* ════════════════════════════════════════════════════════════
 * 3. Section 01 ─ Purpose Router：編集的・非対称インデックス
 *    均等6カード＋丸枠ピル装飾 → 罫線主体・1枚だけ大きい
 *    「相談の目次」。コーナーブラケットで設計図感。
 * ════════════════════════════════════════════════════════════ */
.purpose-router.section-movement {
	background: var(--color-bg-primary);   /* radial グラデを紙地に戻す */
}

.purpose-router__header {
	border-bottom: 1px solid var(--color-decor-hairline);
	padding-bottom: var(--space-5);
}

.purpose-router__title {
	font-family: var(--font-serif-jp);     /* 明朝で品格 */
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: var(--fw-semibold);
	mix-blend-mode: multiply;              /* 紙にインクが沈む */
}

/* 非対称：1枚目（AX）を大きく、残りを編集グリッドへ */
@media (min-width: 1120px) {
	.purpose-router__grid {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: 1fr;
		gap: 0;                            /* 罫線で仕切るため gap を消す */
		border-top: 1px solid var(--color-decor-hairline);
		border-left: 1px solid var(--color-decor-hairline);
	}
	.purpose-router__grid > .purpose-card:nth-child(1) {
		grid-column: span 3;
		grid-row: span 2;                  /* AX を大きく */
	}
	.purpose-router__grid > .purpose-card:nth-child(2) { grid-column: span 3; }
	.purpose-router__grid > .purpose-card:nth-child(3) { grid-column: span 3; }
	.purpose-router__grid > .purpose-card:nth-child(4) { grid-column: span 2; }
	.purpose-router__grid > .purpose-card:nth-child(5) { grid-column: span 2; }
	.purpose-router__grid > .purpose-card:nth-child(6) { grid-column: span 2; }
	.purpose-router__grid > .purpose-card:nth-child(7) { grid-column: span 6; }  /* 研修：最下段フル幅 */
}

/* カードを罫線セルへ：丸枠・ピル・影・グラデを撤去し編集的に */
.purpose-router .purpose-card {
	background: transparent;
	border: 0;
	border-right: 1px solid var(--color-decor-hairline);
	border-bottom: 1px solid var(--color-decor-hairline);
	border-radius: 0;
	box-shadow: none;
	min-height: 168px;
	padding: var(--space-5);
	grid-template-areas:
		"kicker arrow"
		"title  title"
		"desc   desc";
	gap: var(--space-3);
	transition:
		background var(--duration-base) var(--ease-out-expo),
		color var(--duration-base) var(--ease-out-expo);
}

/* 旧装飾（左上の太線バー・右下の丸）を消す */
.purpose-router .purpose-card::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 0;
	background: var(--purpose-accent, var(--color-brand));
	opacity: 0;                            /* 通常は隠し、ホバーで現す */
	transform-origin: left;
	transform: scaleX(0);
	transition: transform var(--duration-slow) var(--ease-out-expo), opacity var(--duration-fast) linear;
}
.purpose-router .purpose-card::after {
	content: none;                         /* 右下の丸を撤去 */
}

.purpose-router .purpose-card:hover,
.purpose-router .purpose-card:focus-visible {
	background: var(--color-glass-brand);
	transform: none;
	box-shadow: none;
	border-color: var(--color-decor-hairline);
}
.purpose-router .purpose-card:hover::before,
.purpose-router .purpose-card:focus-visible::before {
	opacity: 1;
	transform: scaleX(1);
}

/* kicker は等幅ラベルに */
.purpose-router .purpose-card__kicker {
	font-family: var(--font-mono);
	margin-top: 0;
	align-self: start;
	color: var(--color-text-secondary);
}
.purpose-router .purpose-card:hover .purpose-card__kicker {
	color: var(--purpose-accent, var(--color-brand));
}

/* 1枚目（AX大）のタイトルは明朝で一段大きく */
.purpose-router .purpose-card__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
@media (min-width: 1120px) {
	.purpose-router__grid > .purpose-card:nth-child(1) .purpose-card__title {
		font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	}
	.purpose-router__grid > .purpose-card:nth-child(1) .purpose-card__desc {
		font-size: var(--fs-base);
		max-width: 34ch;
	}
}

/* 矢印は塗り丸 → 細い下線つき記号へ（編集的・控えめ） */
.purpose-router .purpose-card__arrow {
	width: auto;
	height: auto;
	background: transparent;
	color: var(--purpose-accent, var(--color-brand));
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-lg);
	align-self: start;
	justify-self: end;
}
.purpose-router .purpose-card:hover .purpose-card__arrow {
	transform: translateX(4px);
}

/* owned-service-lane（Revipo/AIコード健診バナー枠）は罫線で接続 */
.purpose-router .owned-service-lane {
	border-top: 1px solid var(--color-decor-hairline);
}
.purpose-router .owned-service-lane__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

@media (max-width: 767px) {
	.purpose-router .purpose-card {
		border-right: 0;
		min-height: 0;
		padding: var(--space-5) var(--space-2);
	}
	.purpose-router__grid {
		border-top: 1px solid var(--color-decor-hairline);
	}
}


/* ════════════════════════════════════════════════════════════
 * 4. Section 02 ─ Bento：罫線で組む設計図グリッド
 *    bg-mega-typo 撤去 → ヘッダーにコーナーブラケット。
 *    セルは塗り影を抑え、ホバーで罫線が引かれる反応に。
 * ════════════════════════════════════════════════════════════ */
.bento__header {
	position: relative;
	padding: var(--space-6) var(--space-5) var(--space-7);
	margin-inline: auto;
}
.bento__header::before,
.bento__header::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 0 solid var(--color-decor-bracket);
	pointer-events: none;
}
.bento__header::before {
	top: 0; left: 0;
	border-top-width: var(--bracket-thickness);
	border-left-width: var(--bracket-thickness);
}
.bento__header::after {
	bottom: var(--space-5); right: 0;
	border-bottom-width: var(--bracket-thickness);
	border-right-width: var(--bracket-thickness);
}

.bento__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	font-weight: var(--fw-semibold);
	mix-blend-mode: multiply;
}

/* セルの角を落とし、影を罫線へ寄せる */
.bento .bento-cell {
	border-radius: var(--radius-sm);
	box-shadow: none;
	border: 1px solid var(--color-decor-hairline);
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		background   var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo);
}
.bento .bento-cell:hover {
	transform: translateY(-3px);
	border-color: var(--color-brand);
	box-shadow: none;
}
.bento .bento-cell__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.bento .bento-cell__label {
	font-family: var(--font-mono);
}

/* ── 02 Bento：ダーク反転（楽章：紙→ダーク→紙のリズムを作る） ──
   case-study のダーク配色を bento の DOM にマッピング。home.css より後に読まれるため上書きが効く。 */
.bento--inverted {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}
.bento--inverted .bento__title {
	color: var(--color-text-dark-primary);
	mix-blend-mode: normal;   /* multiply のままだと明色文字がダーク面で黒く潰れる */
}
.bento--inverted .bento__lead {
	color: var(--color-text-dark-secondary);
}
.bento--inverted .bento__lead strong {
	color: var(--color-text-dark-primary);
}

/* セル面：case-study .case-card と同じダーク面 */
.bento--inverted .bento-cell {
	background: var(--color-bg-dark-surface);
	border-color: var(--color-border-dark-subtle);
}
.bento--inverted .bento-cell:hover {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
	box-shadow: none;   /* home.css の温ベージュ glow を打ち消す */
}
.bento--inverted .bento-cell--bridge {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
}
.bento--inverted .bento-cell::before {
	background: radial-gradient(circle at 100% 0%, var(--color-glass-dark-brand) 0%, transparent 50%);
}

/* セル内テキスト */
.bento--inverted .bento-cell__title,
.bento--inverted .bento-cell__cta {
	color: var(--color-text-dark-primary);
}
.bento--inverted .bento-cell__lead,
.bento--inverted .bento-cell__list li,
.bento--inverted .bento-cell__label-ja {
	color: var(--color-text-dark-secondary);
}
.bento--inverted .bento-cell:hover .bento-cell__title {
	color: var(--color-brand-300);
}

/* アクセント：ダークで沈む濃ティール／濃コッパーを明色トーンへ */
.bento--inverted .bento-cell__label,
.bento--inverted .bento-cell--ax .bento-cell__label {
	color: var(--color-brand-300);
}
.bento--inverted .bento-cell--event .bento-cell__label {
	color: var(--color-empathy-300);
}
.bento--inverted .bento-cell__list li::before {
	background: var(--color-brand-300);
}
.bento--inverted .bento-cell__cta::after {
	color: var(--color-brand-300);
}
.bento--inverted .bento-cell__cta:hover,
.bento--inverted .bento-cell__cta:hover::after {
	color: var(--color-brand-300);
}

/* synergy ドット（AX × EV × WB） */
.bento--inverted .bento-cell__synergy .dot--ax,
.bento--inverted .bento-cell__synergy .dot--web {
	color: var(--color-brand-300);
	border-color: var(--color-brand-300);
}
.bento--inverted .bento-cell__synergy .dot--event {
	color: var(--color-empathy-300);
	border-color: var(--color-empathy-300);
}

/* アイコンSVG（線画）：ダーク面で沈み/浮きすぎないよう控えめに（実機で最終調整） */
.bento--inverted .bento-cell__icon img {
	opacity: 0.22;
}

/* 上端グリッド帯：暗線→明ティール線へ（ダーク面で視認＋KV製図トーン） */
.bento--inverted.section-movement::before {
	background-image:
		linear-gradient(rgba(91, 174, 174, 0.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(91, 174, 174, 0.14) 1px, transparent 1px);
}

/* SP：home.css のSP用 明色CTA枠を打ち消してダーク枠に */
@media (max-width: 767px) {
	.bento--inverted .bento-cell__cta {
		border-color: var(--color-border-dark-default);
		background: var(--color-glass-dark-default);
	}
}


/* ════════════════════════════════════════════════════════════
 * 5. Section 03 ─ Strengths：囁く巨大明朝
 *    番号を大胆に（Strength 01 を大連番に）、罫線区切りで
 *    「設計事務所の三箇条」のような静かな大組みに。
 * ════════════════════════════════════════════════════════════ */
.strengths.section-movement {
	background: var(--color-bg-primary);   /* 02ダークの直後＝紙地#FAF9F7で境界コントラストを最大化（楽章） */
}

.strengths__header {
	border-bottom: 1px solid var(--color-decor-hairline);
	padding-bottom: var(--space-5);
}

.strengths__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: var(--fw-semibold);
	mix-blend-mode: multiply;
}

/* カードを罫線区切りの「条」に */
@media (min-width: 1024px) {
	.strengths .strengths__grid {
		gap: 0;
		border-top: 1px solid var(--color-decor-hairline);
	}
	.strengths .strength-card {
		padding: var(--space-8) var(--space-6);
		border-right: 1px solid var(--color-decor-hairline);
	}
	.strengths .strength-card:last-child {
		border-right: 0;
	}
}

.strengths .strength-card__number {
	position: static;
	font-family: var(--font-serif-jp);     /* 大連番（明朝） */
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	line-height: 0.9;
	opacity: 0.9;
	margin-bottom: var(--space-2);
}
/* "Strength 01" → 番号だけ大きく見せたいが、コピーは維持。
   英字部分が長いので等幅へ寄せ、数字の存在感を出す */
.strengths .strength-card__number {
	font-feature-settings: "tnum";
}

.strengths .strength-card__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
/* 旧：タイトル上の短い太線バーを撤去（番号が主役になったため） */
.strengths .strength-card__title::before {
	display: none;
}
.strengths .strength-card__title {
	padding-top: 0;
}


/* ════════════════════════════════════════════════════════════
 * 6. Section 04 ─ Case Study：黒塗りの誇り
 *    守秘の黒塗りバーを主役化。数字は全幅で1つずつ大きく。
 *    （ダーク強調は home.css の override 層が担うので、ここは
 *      レイアウトと黒塗り演出を足す）
 * ════════════════════════════════════════════════════════════ */
.case-study--redacted .case-study__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}
.case-study--redacted .case-study__title-line {
	display: block;
}

/* 本文中インラインの黒塗り（守秘の語をスミ塗りで隠す＝主役化） */
.redacted-inline {
	display: inline-block;
	position: relative;
	/* 守秘の語を「スミ塗りマーカー」で強調しつつ読める（透明にして隠さない）。
	   明色の帯＋暗文字でダーク背景上でも可読。文意（〜のため伏せる）が通る。 */
	color: var(--color-bg-dark-primary);
	background: var(--color-text-dark-primary);
	border-radius: 1px;
	padding-inline: 0.3em;
	font-weight: 700;
}

/* カード内クライアント行：Client ラベル＋黒塗りバー */
.case-card__client {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: calc(var(--space-2) * -1);
}
.case-card__client-label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-dark-secondary);   /* AA確保（10.4:1）。muted は小文字ラベルには弱い */
	flex: none;
}
.redacted-bar {
	position: relative;
	display: block;
	height: 1.15em;
	width: 9.5em;
	max-width: 100%;
	border-radius: 2px;
	background:
		repeating-linear-gradient(
			110deg,
			var(--color-text-dark-primary) 0 0.9em,
			rgba(244, 250, 249, 0.86) 0.9em 1.05em
		);
	overflow: hidden;
}
.redacted-bar--short { width: 6.5em; }
.redacted-bar--long  { width: 11em; }

/* 黒塗りが「引かれる」描画：カードが見えたら左から塗りつぶす */
.redacted-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-bg-dark-primary);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform 900ms var(--ease-out-expo);
}
.case-card.is-visible .redacted-bar::after {
	transform: scaleX(0);
}

/* 数字（KPI）を主役に：ダーク上でコッパー→ブランドのコントラスト維持 */
.case-study--redacted .case-card__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.case-study--redacted .case-card__metric-value {
	font-family: var(--font-mono);
}

/* 黒塗りの注記（守秘＝信頼）を section 末尾に静かに置く罫線 */
.case-study--redacted .case-study__header {
	border-bottom: 1px solid var(--color-border-dark-subtle);
	padding-bottom: var(--space-6);
}


/* ════════════════════════════════════════════════════════════
 * 7. Section 05 ─ AI Lab：マニフェスト昇格
 *    画面を覆う巨大明朝「AIに詳しい必要は ない。」を前面に。
 *    紙地の連続をダークの宣言で断ち切る。
 * ════════════════════════════════════════════════════════════ */
.ai-lab--manifesto {
	padding-block: var(--space-9) var(--space-9);
}

.ai-lab__manifesto {
	position: relative;
	margin-bottom: var(--space-9);
	padding-block: var(--space-6) var(--space-7);
}

.ai-lab__manifesto-rule {
	display: block;
	width: 100%;
	height: 2px;
	margin-bottom: var(--space-6);
	overflow: visible;
}
.ai-lab__manifesto-rule line {
	stroke: var(--color-brand-300);
	stroke-width: 2;
	opacity: 0.6;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1200ms var(--ease-out-expo);
}
.ai-lab__manifesto.is-visible .ai-lab__manifesto-rule line {
	stroke-dashoffset: 0;
}

.ai-lab__manifesto-lead {
	margin-bottom: var(--space-6);
}

.ai-lab__manifesto-copy {
	display: block;
}
.ai-lab__manifesto-line {
	display: block;
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark-primary);
	letter-spacing: var(--ls-tighter);
	line-height: 1.04;
	font-size: clamp(2.75rem, 12vw, 9rem);
	mix-blend-mode: screen;                 /* ダーク上で光が乗る */
}
.ai-lab__manifesto-line--lead {
	color: var(--color-text-dark-secondary);
	font-size: clamp(2.25rem, 9vw, 7rem);
}
.ai-lab__manifesto-line em {
	font-style: normal;
	color: var(--color-brand-300);
}
.ai-lab__manifesto-sub {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: clamp(0.95rem, 2.2vw, 1.35rem);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-dark-secondary);
}

.ai-lab--manifesto .ai-lab__title {
	font-family: var(--font-serif-jp);
}
.ai-lab--manifesto .ai-lab__sub {
	font-family: var(--font-sans-jp);
	font-weight: var(--fw-medium);
}

@media (max-width: 767px) {
	.ai-lab__manifesto { margin-bottom: var(--space-7); }
	.ai-lab__manifesto-line { line-height: 1.08; }
}


/* ════════════════════════════════════════════════════════════
 * 8. Section 06 ─ News & Column：軽い読み物
 *    bg-mega-typo 撤去。インデックスだけ置いて、一覧は軽く。
 * ════════════════════════════════════════════════════════════ */
.news-column__lead-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-decor-hairline);
}
.news-column__block-title-ja {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}
.news-column__block-title-en,
.news-column__block-title .news-column__block-title-en {
	font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════════════════
 * 9. Final CTA：締めの宣言（番号なし）
 * ════════════════════════════════════════════════════════════ */
.final-cta--closing .final-cta__title {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
	/* final-cta はダーク背景（--color-bg-dark-primary）のため multiply は禁止
	   （明色文字が乗算で黒く潰れて見えなくなる）。明色テキストのまま表示する。 */
}

/* PC：締めのCTAはセンター寄せ（締めの宣言として中央に据える。SPは左寄せのまま） */
@media (min-width: 768px) {
	.final-cta--closing .final-cta__inner {
		text-align: center;
	}
	.final-cta--closing .final-cta__title {
		text-align: center;  /* 共通CSSの左寄せを上書き（タイトルは中央） */
	}
	.final-cta--closing .final-cta__lead {
		text-align: left;  /* リード文は左寄せのまま（長文の読みやすさ優先） */
	}
	.final-cta--closing .final-cta__sub-link {
		text-align: center;
	}
	.final-cta--closing .final-cta__buttons {
		justify-content: center;
	}
}


/* ════════════════════════════════════════════════════════════
 * 10. CSS Scroll-driven Animations（緩急と驚き）
 *     対応ブラウザでは要素がビューに入るとき「組み上がる」。
 *     未対応は reveal（IO）の最終状態にフォールバック（@supports で隔離）。
 *     コンポジタ動作（transform/opacity）中心で性能を守る。
 * ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* 紙地セクションの導入グリッド帯が縦に伸びて「製図される」 */
		.purpose-router.section-movement::before,
		.bento.section-movement::before,
		.strengths.section-movement::before,
		.news-column.section-movement::before {
			animation: blueprint-draw linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		/* セクション見出しが組み上がる（下からせり上がり＋クリア） */
		.editorial-index {
			animation: index-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}

		/* マニフェストの巨大明朝：スクロールで横方向に微差移動（編集的視差） */
		.ai-lab__manifesto-line {
			animation: manifesto-settle linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}

		/* Bento ヘッダーのコーナーブラケットが寄ってくる */
		.bento__header {
			animation: bracket-tighten linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}

@keyframes blueprint-draw {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	60%  { opacity: 0.7; }
	to   { clip-path: inset(0 0 0 0); opacity: 0.7; }
}
@keyframes index-rise {
	from { transform: translateY(28px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
@keyframes manifesto-settle {
	from { transform: translateX(-3%); letter-spacing: 0.04em; opacity: 0.4; }
	to   { transform: translateX(0); letter-spacing: var(--ls-tighter); opacity: 1; }
}
@keyframes bracket-tighten {
	from { opacity: 0; }
	to   { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════
 * 11. prefers-reduced-motion：全モーション停止＋見栄えする静止
 * ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.purpose-router.section-movement::before,
	.bento.section-movement::before,
	.strengths.section-movement::before,
	.news-column.section-movement::before {
		clip-path: none !important;
		opacity: 0.55 !important;
		animation: none !important;
	}
	.editorial-index,
	.ai-lab__manifesto-line,
	.bento__header {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		letter-spacing: var(--ls-tighter);
	}
	.ai-lab__manifesto-rule line {
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
	.redacted-bar::after {
		transform: scaleX(0) !important;   /* 黒塗りは「引かれた後」の状態で静止 */
		transition: none !important;
	}
	.purpose-router .purpose-card:hover { transform: none !important; }
	.bento .bento-cell:hover { transform: none !important; }
}


/* ════════════════════════════════════════════════════════════
 * 12. グリッド帯を「KV製図トーン」に統一
 *     （セクション継ぎ目の横線＋結節点モチーフは「違和感」で撤去・2026-06-01）
 * ════════════════════════════════════════════════════════════ */
/* 紙セクションの上端グリッド帯を KV製図トーン（ティール低alpha）に統一。
   bento は .bento--inverted 側で明色ティールに別途上書き済み。 */
.purpose-router.section-movement::before,
.strengths.section-movement::before,
.news-column.section-movement::before {
	background-image:
		linear-gradient(rgba(6, 123, 123, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(6, 123, 123, 0.07) 1px, transparent 1px);
}