/* ============================================================
 * pages/about.css ─ 会社概要ページ（editorial 全面刷新 2026-05-31）
 *
 * 方針：トップ（home-creative.css）と地続きの編集的世界観へ統一。
 *  - 機械的 section-label / bg-mega-typo / section-glow-line / section-decor を撤去
 *  - editorial-index（巨大明朝ノンブル＋等幅ラベル＋総数）に置換
 *  - 罫線（hairline）・コーナーブラケット（has-brackets）・建築グリッド主体
 *  - 見出し＝明朝（--font-serif-jp）、ラベル/数値＝等幅（--font-mono）、本文＝ゴシック
 *  - フィルムグレイン（トップと同じ data-URI ノイズ）
 *  - WCAG AA：本文 4.5:1 / 大文字 3:1 を満たす配色のみ使用
 *
 * 依存：tokens.css / base.css（.has-brackets / .hairline / .has-blueprint-grid /
 *       --color-decor-* / --bracket-* を利用）／ components/final-cta.css
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * 0. フィルムグレイン（home-creative.css と同一・このページに自己完結）
 * ════════════════════════════════════════════════════════════ */
.film-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	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.36; } }
@media (prefers-reduced-motion: reduce) { .film-grain { opacity: 0.30; } }


/* ════════════════════════════════════════════════════════════
 * 1. editorial-index（home-creative.css と同一・自己完結）
 * ════════════════════════════════════════════════════════════ */
.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-secondary);  /* AA：紙地上 7.43:1（小文字でも可読） */
	align-self: flex-end;
	padding-bottom: 0.4em;
}
/* ダーク強調セクション上（AA：brand-300=#5BAEAE on #0A1414 ≈ 5.6:1） */
.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-secondary); }
/* 中央寄せ（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);
	color: var(--color-brand-300);  /* ダーク Final CTA 上で可読 */
}
@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. section-movement：紙地セクション上端の極薄ブループリント帯
 * ════════════════════════════════════════════════════════════ */
.section-movement { position: relative; }

.about-manifesto.section-movement::before,
.about-info.section-movement::before,
.about-business.section-movement::before,
.about-access.section-movement::before,
.about-vision.section-movement::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(160px, 28vh, 320px);
	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.45), transparent);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}
/* コンテンツを帯の上へ */
.section-movement > .container { position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════
 * 3. Hero（KV：構造は維持、トーンを製図・線画へ）
 * ════════════════════════════════════════════════════════════ */
.about-hero {
	position: relative;
	min-height: auto;
	display: flex;
	align-items: flex-start;
	padding-top: var(--page-hero-top-offset);
	padding-bottom: var(--space-9);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}
@media (min-width: 1024px) {
	.about-hero {
		min-height: 78vh;
		align-items: center;
	}
}

/* 右側の線画ダイアグラム */
/* .about-hero__visual のPCレイアウトは tonmana-inheritance.css に単一集約（重複解消・2026-06-01） */
.about-hero__diagram { width: 100%; height: auto; display: block; }

@keyframes about-hero-visual-in {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 0.96; transform: scale(1); }
}
@keyframes about-hero-visual-in-sp {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 0.96; transform: scale(1); }
}

/* ハブ・ノード・リンクのストローク描画演出 */
.about-hero__hub {
	stroke-dasharray: 470;
	stroke-dashoffset: 470;
	animation: about-hero-draw 1600ms var(--ease-out-expo) 0.8s forwards;
}
.about-hero__links line {
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	animation: about-hero-draw 1200ms var(--ease-out-expo) forwards;
}
.about-hero__links line:nth-child(1) { animation-delay: 1.1s; }
.about-hero__links line:nth-child(2) { animation-delay: 1.25s; }
.about-hero__links line:nth-child(3) { animation-delay: 1.4s; }
.about-hero__links line:nth-child(4) { animation-delay: 1.55s; }
@keyframes about-hero-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 1023px) {
	.about-hero {
		flex-direction: column;
		align-items: stretch;
		padding-bottom: var(--space-7);
	}
	.about-hero__inner { order: 1; }
}

.about-hero__inner { position: relative; z-index: 1; }
.about-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 620px;
}
@media (min-width: 1024px) {
	.about-hero__content { max-width: 600px; margin-right: auto; }
}
@media (max-width: 1023px) {
	.about-hero__content { max-width: none; }
}

.about-hero__overline {
	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-brand);
	margin: 0;
	opacity: 0;
	animation: about-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.2s forwards;
}
.about-hero__title {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-display-md);
	line-height: 1.18;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
	font-feature-settings: "palt";
	margin: 0;
	mix-blend-mode: multiply;
	opacity: 0;
	animation: about-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.5s forwards;
}
.about-hero__title-line { display: inline-block; }
@media (min-width: 768px) { .about-hero__title-line { white-space: nowrap; } }

.about-hero__lead {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 56ch;
	margin: 0;
	opacity: 0;
	animation: about-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.8s forwards;
}
.about-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
	opacity: 0;
	animation: about-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.05s forwards;
}
@media (min-width: 640px) { .about-hero__cta { gap: var(--space-4); } }

@keyframes about-hero-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════
 * 4. 共通：セクション余白
 * ════════════════════════════════════════════════════════════ */
.about-manifesto,
.about-message,
.about-info,
.about-business,
.about-clients,
.about-access,
.about-vision {
	position: relative;
	padding-block: var(--space-9);
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 1024px) {
	.about-manifesto,
	.about-message,
	.about-info,
	.about-business,
	.about-clients,
	.about-access,
	.about-vision {
		padding-block: var(--space-10);
	}
}

/* 共通の見出し罫線ヘッダー */
.about-manifesto__header,
.about-info__header,
.about-business__header,
.about-access__header,
.about-vision__header {
	border-bottom: 1px solid var(--color-decor-hairline);
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-7);
}

.about-manifesto__title,
.about-message__title,
.about-info__title,
.about-business__title,
.about-clients__title,
.about-access__title,
.about-vision__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(1.875rem, 4.5vw, 3rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin: 0;
	mix-blend-mode: multiply;
}


/* ════════════════════════════════════════════════════════════
 * 5. 01 Why Us
 * ════════════════════════════════════════════════════════════ */
.about-manifesto__inner { max-width: 1100px; }

.about-manifesto__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 760px;
}
.about-manifesto__body p {
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}
.about-manifesto__body strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }

/* プルクオート型（塗り・枠・border-left太線なし。大きな引用符＋細い縦線） */
.about-manifesto__pullquote {
	position: relative;
	margin: var(--space-8) 0 0;
	padding-left: var(--space-6);
}
.about-manifesto__pullquote::before {
	content: "“";
	position: absolute;
	top: -0.3em;
	left: -0.05em;
	font-family: var(--font-serif-latin);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-brand);
	opacity: 0.4;
}
.about-manifesto__pullquote-text {
	font-family: var(--font-serif-jp);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-text-primary);
	margin: 0;
}
.about-manifesto__pullquote-text em { font-style: normal; color: var(--color-brand); }
.about-manifesto__pullquote-cite {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
}

/* ────────────────────────────────────────────────
 * 01 Why Us：ダーク反転（紙↔ダークの楽章を上層で1回つくる・2026-06-02）
 *   既存 works-summary--dark / case-study と同じダーク配色を踏襲。
 *   KV(紙)→01(ダーク)→02(紙)… と声量に振れ幅を出す。
 * ──────────────────────────────────────────────── */
.about-manifesto--dark {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}
/* 上端ブループリント帯：ダーク地では暗線が沈むため明ティール線へ（3クラスで確実に上書き） */
.about-manifesto.about-manifesto--dark.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);
}
.about-manifesto--dark .about-manifesto__header {
	border-bottom-color: var(--color-border-dark-subtle);
}
/* 見出しは multiply のままだとダークで消える → normal に戻す */
.about-manifesto--dark .about-manifesto__title {
	color: var(--color-text-dark-primary);
	mix-blend-mode: normal;
}
.about-manifesto--dark .about-manifesto__body p {
	color: var(--color-text-dark-secondary);
}
.about-manifesto--dark .about-manifesto__body strong {
	color: var(--color-text-dark-primary);
}
.about-manifesto--dark .about-manifesto__pullquote-text {
	color: var(--color-text-dark-primary);
}
.about-manifesto--dark .about-manifesto__pullquote-text em {
	color: var(--color-brand-300);
}
.about-manifesto--dark .about-manifesto__pullquote::before {
	color: var(--color-brand-300);
}
/* editorial 採番（about.css には未定義のため反転版をここで定義） */
.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-secondary); }


/* ════════════════════════════════════════════════════════════
 * 6. 02 代表メッセージ
 * ════════════════════════════════════════════════════════════ */
.about-message__header { margin-bottom: var(--space-7); }
.about-message__title-line { display: inline-block; }
@media (min-width: 768px) { .about-message__title-line { white-space: nowrap; } }

.about-message__grid {
	display: grid;
	gap: var(--space-7);
}
@media (min-width: 1024px) {
	.about-message__grid {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: var(--space-9);
		align-items: start;
	}
}

.about-message__visual {
	position: relative;
	padding: var(--space-3);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
}
.about-message__visual img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(0.12) contrast(1.02);
}
.about-message__visual-cap {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
}
@media (max-width: 1023px) {
	.about-message__visual { max-width: 360px; margin-inline: auto; }
}

.about-message__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.about-message__body p {
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}
.about-message__body strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }
.about-message__signature {
	margin-top: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-decor-hairline);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}
.about-message__signature-name {
	display: inline-block;
	margin-top: var(--space-1);
	font-family: var(--font-serif-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
}


/* ════════════════════════════════════════════════════════════
 * 7. 03 会社情報（罫線テーブル）
 * ════════════════════════════════════════════════════════════ */
.about-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-decor-hairline);
	border-left: 1px solid var(--color-decor-hairline);
}
@media (min-width: 640px)  { .about-info__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-info__grid { grid-template-columns: repeat(3, 1fr); } }

.about-info__cell {
	padding: var(--space-5);
	border-right: 1px solid var(--color-decor-hairline);
	border-bottom: 1px solid var(--color-decor-hairline);
	background: transparent;
	transition: background var(--duration-base) var(--ease-out-expo);
}
.about-info__cell:hover { background: var(--color-glass-brand); }
@media (min-width: 1024px) {
	.about-info__cell--wide { grid-column: span 1; }
}

.about-info__term {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-family: var(--font-sans-jp);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-3);
}
.about-info__term-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-brand);
}
.about-info__desc { display: flex; flex-direction: column; gap: var(--space-1); }
.about-info__desc-main {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
}
.about-info__desc-main a {
	color: var(--color-brand);
	border-bottom: 1px solid var(--color-border-brand);
}
.about-info__desc-main a:hover { color: var(--color-brand-700); }
.about-info__desc-sub {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-normal);
}


/* ════════════════════════════════════════════════════════════
 * 8. 04 事業内容（罫線で組む3本柱）
 * ════════════════════════════════════════════════════════════ */
.about-business__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 68ch;
}
.about-business__lead strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }

.about-business__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-decor-hairline);
}
@media (min-width: 768px) {
	.about-business__grid {
		grid-template-columns: repeat(3, 1fr);
		border-left: 1px solid var(--color-decor-hairline);
	}
}

.about-business__card {
	position: relative;
	padding: var(--space-7) var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-decor-hairline);
	background: transparent;
	transition: background var(--duration-base) var(--ease-out-expo);
}
@media (min-width: 768px) {
	.about-business__card { border-right: 1px solid var(--color-decor-hairline); }
}
.about-business__card:hover { background: var(--color-glass-brand); }

.about-business__card-num {
	display: block;
	font-family: var(--font-serif-jp);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: var(--fw-semibold);
	line-height: 0.9;
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	font-feature-settings: "tnum";
	margin-bottom: var(--space-4);
}
.about-business__card-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-1);
}
.about-business__card-title-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);
}
.about-business__card-title-ja {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
}
.about-business__card-sub {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);  /* AA：fs-xs のため muted(3.49) ではなく secondary(7.43) */
	margin-bottom: var(--space-4);
}
.about-business__card-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
.about-business__card-list li {
	position: relative;
	padding-left: var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}
.about-business__card-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 1px;
	background: var(--color-brand);
}
.about-business__card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
}
.about-business__card-link::after {
	content: "→";
	transition: transform var(--duration-fast) var(--ease-spring);
}
.about-business__card-link:hover { color: var(--color-brand-700); }
.about-business__card-link:hover::after { transform: translateX(4px); }


/* ════════════════════════════════════════════════════════════
 * 9. 05 お取引先（ダーク強調＝声量を上げる）
 * ════════════════════════════════════════════════════════════ */
.about-clients--dark {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}
.about-clients--dark .about-clients__header {
	border-bottom: 1px solid var(--color-border-dark-subtle);
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-7);
}
.about-clients--dark .about-clients__title {
	color: var(--color-text-dark-primary);
	mix-blend-mode: normal;
}
.about-clients__title-line { display: inline-block; }
@media (min-width: 768px) { .about-clients__title-line { white-space: nowrap; } }
.about-clients--dark .about-clients__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-loose);
	max-width: 68ch;
}
.about-clients--dark .about-clients__lead strong { color: var(--color-text-dark-primary); font-weight: var(--fw-bold); }

.about-clients__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--color-border-dark-subtle);
	border-left: 1px solid var(--color-border-dark-subtle);
}
@media (min-width: 640px)  { .about-clients__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-clients__grid { grid-template-columns: repeat(4, 1fr); } }

.about-clients__category {
	padding: var(--space-6) var(--space-5);
	border-right: 1px solid var(--color-border-dark-subtle);
	border-bottom: 1px solid var(--color-border-dark-subtle);
}
.about-clients__category-label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
	margin-bottom: var(--space-3);
}
.about-clients__category-title {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-text-dark-primary);
	margin-bottom: var(--space-4);
	line-height: var(--lh-snug);
}
.about-clients__category-dl dt {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-dark-secondary);  /* AA：fs-xs のため dark-secondary(10.43) */
	margin-bottom: var(--space-1);
}
.about-clients__category-dl dd {
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-relaxed);
}
.about-clients__note {
	margin-top: var(--space-6);
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-relaxed);
}
.about-clients__note a {
	color: var(--color-brand-300);
	border-bottom: 1px solid rgba(91, 174, 174, 0.35);
}
.about-clients__note a:hover { color: var(--color-brand-300); border-bottom-color: var(--color-brand-300); }
/* ダークセクションではブループリント帯を出さない（section-movement::before 対象外） */


/* ════════════════════════════════════════════════════════════
 * 10. 06 アクセス
 * ════════════════════════════════════════════════════════════ */
.about-access__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}
@media (min-width: 1024px) {
	.about-access__grid {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}
}
.about-access__list { display: flex; flex-direction: column; }
.about-access__row {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-decor-hairline);
}
.about-access__row:first-child { border-top: 1px solid var(--color-decor-hairline); }
.about-access__row dt {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
	padding-top: 0.2em;
}
.about-access__row dd {
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
}
.about-access__map-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
}
.about-access__map-link span { transition: transform var(--duration-fast) var(--ease-spring); }
.about-access__map-link:hover { color: var(--color-brand-700); }
.about-access__map-link:hover span { transform: translateX(4px); }

.about-access__map {
	position: relative;
	padding: var(--space-2);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
}
.about-access__map iframe {
	width: 100%;
	height: 300px;
	border: 0;
	display: block;
	/* 地図のフルカラーが浮くため、ほぼモノクロに寄せて設計事務所調へ馴染ませる（2026-06-02） */
	filter: grayscale(0.95) contrast(1.02) brightness(1.03);
	transition: filter 0.45s var(--ease-out-expo);
}
/* ホバー可能環境のみ：操作時は実際の色に戻して見やすく */
@media (hover: hover) {
	.about-access__map:hover iframe { filter: grayscale(0) contrast(1) brightness(1); }
}
@media (min-width: 1024px) { .about-access__map iframe { height: 360px; } }


/* ════════════════════════════════════════════════════════════
 * 11. 07 今後の展望
 * ════════════════════════════════════════════════════════════ */
.about-vision__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	align-items: center;
}
@media (min-width: 1024px) {
	.about-vision__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--space-8);
	}
}
.about-vision__body { display: flex; flex-direction: column; gap: var(--space-5); }
.about-vision__body p {
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}
.about-vision__visual {
	padding: clamp(var(--space-3), 2vw, var(--space-4));
	border: 1px solid var(--color-border-subtle);
	background: rgba(255, 255, 255, 0.64);
}
.about-vision__diagram { width: 100%; height: auto; display: block; }
/* 階段ラインはスクロールでビューに入ると描画。未対応環境では最初から描画済みで静止。 */
.about-vision__stairs path {
	stroke-dasharray: 600;
	stroke-dashoffset: 0;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.about-vision__stairs path {
			animation: about-vision-draw linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 30%;
		}
	}
}
@keyframes about-vision-draw {
	from { stroke-dashoffset: 600; }
	to   { stroke-dashoffset: 0; }
}


/* ════════════════════════════════════════════════════════════
 * 12. Final CTA（editorial-index--center の補強。本体は components/final-cta.css）
 * ════════════════════════════════════════════════════════════ */
.about-final-cta .final-cta__title {
	font-family: var(--font-serif-jp);
}


/* ════════════════════════════════════════════════════════════
 * 13. scroll-driven（@supports 隔離）＋ reduced-motion 停止
 * ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.about-manifesto.section-movement::before,
		.about-info.section-movement::before,
		.about-business.section-movement::before,
		.about-access.section-movement::before,
		.about-vision.section-movement::before {
			animation: about-blueprint-draw linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
		.about-manifesto__header .editorial-index,
		.about-info__header .editorial-index,
		.about-business__header .editorial-index,
		.about-access__header .editorial-index,
		.about-vision__header .editorial-index {
			animation: about-index-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}
@keyframes about-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 about-index-rise {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.about-hero__overline,
	.about-hero__title,
	.about-hero__lead,
	.about-hero__cta {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.about-hero__hub,
	.about-hero__links line,
	.about-vision__stairs path {
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
	.about-manifesto.section-movement::before,
	.about-info.section-movement::before,
	.about-business.section-movement::before,
	.about-access.section-movement::before,
	.about-vision.section-movement::before {
		clip-path: none !important;
		opacity: 0.55 !important;
		animation: none !important;
	}
	.editorial-index { animation: none !important; transform: none !important; opacity: 1 !important; }
}