/* ============================================================
theme/ampl-modern.css — White Corporate / Editorial テイスト
AMPL Modern（白モード）。NOT A HOTEL Company Deck に着想。白背景＋黒の極太ゴシック＋
ライトグレー角丸パネル＋ヘッダーバー（ロゴ｜SECTION）。
会社紹介・採用・IR・ホワイトペーパー向けの“シンプルかつ洗練”系。
ペア: theme/ampl-noir.css（ダーク写真型）。1つの型システムの白い服。
Reference: NOT A HOTEL Company Deck / NOT A HOTELを知る / Software Deck
（speakerdeck.com/notahotel）
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
--color-chrome: #e9e9ea;
--color-bg: #ffffff;
--color-fg: #131313;
--color-muted: #5f5f60;
--color-faint: #9a9a9c;
--color-accent: #131313;
--color-blue: #0B7DA3; /* ブランド色ではない＝実務ユーティリティのみ（矢印など“向き”の最小用途）。署名差し色は持たない方針。確定の差し色＝ティール #0B7DA3 を点で抑制的に（2026-06-23確定 / AMPL-HOUSE-STYLE.md） */
--color-line: rgba(0,0,0,.14);
--color-hair: rgba(0,0,0,.08);
--color-num: rgba(0,0,0,.32);
--color-panel: #f1f1f3; /* ライトグレー角丸パネル */
--color-panel2: #f7f7f8;
--font-sans: "Noto Sans JP", "Inter", system-ui, sans-serif;
--font-display: "Noto Sans JP", "Inter", system-ui, sans-serif;
--font-mono: "Inter", "SF Mono", ui-monospace, monospace;
--text-xs: 1.0rem; --text-sm: 1.17rem; --text-base: 1.4rem; /* v3(2026-07-02): 12 / 14 / 17pt。本文17pt=h2比1.86:1で階層回復 */
--text-meta: 0.82rem; /* chrome層(ヘッダバー・頁番号・クレジット)=読ませない飾り。14pt下限の対象外 */
--text-lg: 2.17rem; --text-xl: 2.4rem; --text-2xl: 2.6rem; /* 26 / 29 / 31pt */
--text-3xl: 3.0rem; --text-4xl: 3.4rem; /* 36 / 41pt (本家の抑制) */
--weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900;
--sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem;
--sp-lg: 2.4rem; --sp-xl: 64px;
--radius: 16px;
--radius-sm: 9px;
--border: 1px solid var(--color-line);
}
body { font-family: var(--font-sans); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.slide { background: var(--color-bg); color: var(--color-fg); }
/* ============================================================
タイポグラフィ（極太ゴシック）
============================================================ */
.slide h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-4xl); line-height: 1.06; letter-spacing: .01em; }
.slide h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: .01em; }
.slide h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); line-height: 1.35; }
.slide p { font-size: var(--text-base); line-height: 1.8; color: var(--color-muted); font-weight: 500; }
.label { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); letter-spacing: .26em; text-transform: uppercase; color: var(--color-faint); }
.label-jp { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: .04em; }
/* ============================================================
ヘッダーバー（ロゴマーク｜縦罫｜SECTION名） — 全コンテンツ共通
使い方: …
SECTION
.mark にロゴ ![]()
を入れてもよい。content側は .has-headbar で上余白を確保。
============================================================ */
.headbar { position: absolute; top: 30px; left: var(--sp-xl); display: flex; align-items: center; gap: 16px; z-index: 7; }
.headbar .mark { font-family: var(--font-mono); font-weight: 900; letter-spacing: .28em; font-size: .82rem; color: var(--color-fg); }
.headbar img.mark { height: 22px; width: auto; letter-spacing: 0; }
.headbar .sep { width: 1px; height: 20px; background: var(--color-line); }
.headbar .sec { font-family: var(--font-mono); font-weight: 800; letter-spacing: .12em; font-size: .82rem; text-transform: uppercase; color: var(--color-fg); }
/* ヘッダーバー／フッターのクリアランス分を上下“対称”に確保し、
中身は上下中央寄せ（.slide-content の justify-content:center）でフレームする。
→ ヘッダー・フッターは固定、コンテンツは天地センターで余白が均等になる。
内容が増えてはみ出す場合は「詰める」のではなくスライドを分割する。 */
.has-headbar { padding-top: 92px; padding-bottom: 92px; }
/* 写真スライドのヘッダーバーは白文字 */
.photo .headbar .mark, .photo .headbar .sec { color: #fff; }
.photo .headbar .sep { background: rgba(255,255,255,.5); }
/* ブランドマーク（左上・ヘッダーバー無しの簡易版）／フッター／ページ番号 */
.brand-mark { position: absolute; top: 34px; left: var(--sp-xl); z-index: 6; font-family: var(--font-mono); font-weight: 800; font-size: .9rem; letter-spacing: .42em; color: var(--color-fg); text-transform: uppercase; }
.slide .foot { position: absolute; bottom: 22px; left: var(--sp-xl); z-index: 6; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--color-faint); }
.slide-counter { display: none; }
.slide-page-num { color: var(--color-num); font-weight: 700; }
/* ============================================================
タイトル各種
============================================================ */
/* 写真フルブリードのタイトル（ダーク型と共通の作法） */
.slide-title { align-items: center; justify-content: center; text-align: center; gap: var(--sp-sm); }
.slide-title.photo { color: #fff; }
/* 表紙の声量は3段: h1=特大4xl ／ sub=本文サイズの脇役 ／ label=chrome帯。
subやlabelをh1に近づけない（40:14:9 の写像を表紙にも適用） */
.slide-title h1 { font-size: var(--text-4xl); }
.slide-title .sub { font-size: var(--text-base); color: inherit; opacity: .82; font-weight: 500; }
.slide-title .label { font-size: 1.0rem; }
.slide-title .date { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; opacity: .7; margin-top: var(--sp-sm); }
/* 純白・ロゴ中央のタイトル（公式Company Deck表紙／裏表紙） */
.slide-logo-title { align-items: center; justify-content: center; text-align: center; gap: var(--sp-md); }
.slide-logo-title .logo { font-family: var(--font-mono); font-weight: 900; letter-spacing: .42em; font-size: 2.4rem; }
.slide-logo-title .logo img { height: 88px; width: auto; }
.slide-logo-title .name { font-family: var(--font-display); font-weight: 700; letter-spacing: .22em; font-size: 1.4rem; }
.slide-logo-title .meta { font-family: var(--font-display); font-weight: 900; font-size: .95rem; margin-top: var(--sp-lg); line-height: 1.7; }
/* ============================================================
章扉・目次・会社概要
============================================================ */
/* 章扉（中央・純白） */
.slide-section { align-items: center; justify-content: center; text-align: center; gap: var(--sp-md); background: var(--color-bg); }
.slide-section .label { margin-bottom: calc(var(--sp-xs) * -.5); }
.slide-section h2 { font-size: var(--text-3xl); font-weight: 900; line-height: 1.3; max-width: 1000px; }
/* 章扉（左寄せ・大見出し＋英字サブ） */
.slide-chapter { align-items: flex-start; justify-content: center; gap: var(--sp-md); }
.slide-chapter h2 { font-size: var(--text-3xl); font-weight: 900; line-height: 1.18; }
.slide-chapter .en { font-family: var(--font-mono); font-weight: 800; letter-spacing: .12em; font-size: 1.05rem; color: var(--color-fg); }
/* 目次（番号＋日本語見出し＋英字サブ＋ページ） */
.agenda { display: flex; flex-direction: column; gap: var(--sp-lg); max-width: 1040px; margin: 0 auto; width: 100%; }
.agenda-item { display: flex; gap: var(--sp-lg); align-items: baseline; }
.agenda-item .no { font-family: var(--font-display); font-weight: 900; font-size: 2rem; min-width: 54px; }
.agenda-item .body2 { flex: 1; }
.agenda-item .ttl { font-family: var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1.2; }
.agenda-item .en { display: block; font-family: var(--font-mono); font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--color-faint); margin-top: .35rem; }
.agenda-item .pg { font-family: var(--font-mono); color: var(--color-faint); align-self: center; }
/* 会社概要（ロゴ｜縦罫｜定義リスト） */
.factsheet { display: flex; align-items: stretch; gap: var(--sp-xl); width: 100%; }
.factsheet .logo-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-sm); min-width: 280px; }
.factsheet .logo-col .logo { font-family: var(--font-mono); font-weight: 900; letter-spacing: .4em; font-size: 2rem; }
.factsheet .logo-col .name { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; }
.factsheet .rule { width: 1px; background: var(--color-line); }
.factsheet dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-md) var(--sp-lg); align-content: center; }
.factsheet dt { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.factsheet dd { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.factsheet dd small { display: block; font-size: .7em; font-weight: 700; color: var(--color-muted); }
/* ============================================================
ランディング / エンド
============================================================ */
.slide-landing { align-items: flex-start; justify-content: center; gap: var(--sp-md); }
.slide-landing h2 { font-size: var(--text-3xl); font-weight: 900; line-height: 1.28; max-width: 1100px; }
.slide-end { align-items: center; justify-content: center; text-align: center; gap: var(--sp-md); }
.slide-logo-end { align-items: center; justify-content: center; }
.slide-logo-end .logo { font-family: var(--font-mono); font-weight: 900; letter-spacing: .42em; font-size: 2.2rem; }
.slide-logo-end .logo img { height: 80px; }
.slide-logo-end .name { font-family: var(--font-display); font-weight: 700; letter-spacing: .22em; margin-top: var(--sp-md); }
/* ============================================================
コンテンツ基本
============================================================ */
/* コンテンツは天地センター（上寄せ禁止）。ヘッダー/フッターは absolute で固定済み。 */
.slide-content { gap: var(--sp-lg); justify-content: center; }
.slide-content .body { display: flex; flex-direction: column; gap: var(--sp-md); width: 100%; }
/* 見出しの直下は呼吸させる（見出しとコンテンツの詰めすぎ禁止） */
.slide-content .body > h2 { margin-bottom: 1.2rem; }
/* 見出し＋中央寄せリード（コンセプト導入） */
.lead { text-align: center; display: flex; flex-direction: column; gap: var(--sp-md); align-items: center; }
.lead h2 { font-size: var(--text-2xl); }
.lead p { max-width: 900px; }
/* ============================================================
円ノード図（A—B—C を線でつなぐ）
============================================================ */
.nodes { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: var(--sp-md); }
.node { width: 168px; height: 168px; border: 1.5px solid var(--color-fg); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; text-align: center; }
.node .en { font-family: var(--font-mono); font-weight: 700; font-size: .58rem; letter-spacing: .16em; color: var(--color-faint); text-transform: uppercase; }
.node .jp { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: var(--color-fg); }
.node-link { width: 46px; height: 1.5px; background: var(--color-fg); flex-shrink: 0; }
/* ============================================================
ヴェン図（3円の重なり：自宅／別荘／ホテル → 中心）
============================================================ */
.venn { position: relative; width: 360px; height: 320px; flex-shrink: 0; }
.venn .c { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(40,40,42,.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 22px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.venn .c1 { top: 0; left: 80px; }
.venn .c2 { bottom: 0; left: 0; align-items: flex-end; padding: 0 0 30px; }
.venn .c3 { bottom: 0; right: 0; align-items: flex-end; padding: 0 0 30px; }
.venn .core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 2; }
.venn .core .mk { font-family: var(--font-mono); font-weight: 900; letter-spacing: .2em; font-size: .8rem; }
.venn .core .lb { font-family: var(--font-display); font-weight: 900; font-size: .85rem; }
/* ============================================================
3/4カラム — col（写真/2×2/アイコン＋ラベル＋本文）
============================================================ */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.col { display: flex; flex-direction: column; gap: var(--sp-sm); }
.col > .col-media { margin-bottom: var(--sp-xs); }
.col .label { color: var(--color-faint); }
.col h3 { font-size: var(--text-lg); }
.col p { font-size: var(--text-sm); line-height: 1.8; }
.col-media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-panel); }
.col-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.media-grid .cell { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--color-panel); }
.media-grid .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-grid .cell .cap { position: absolute; left: 8px; bottom: 6px; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; color: #fff; text-transform: uppercase; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* ライトカード（ライトグレー角丸の中に 画像/デバイス/アイコン＋見出し＋本文） */
.lcard { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.lcard.center { align-items: center; text-align: center; }
.lcard .shot { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.lcard .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcard .device { display: flex; align-items: flex-end; justify-content: center; min-height: 180px; }
.lcard .device img { max-width: 78%; max-height: 200px; }
.lcard .icon { font-size: 2.8rem; line-height: 1; }
.lcard .label { color: var(--color-fg); }
.lcard h3 { font-size: var(--text-lg); }
.lcard p { font-size: var(--text-sm); line-height: 1.8; }
/* 大ラベルカード（巨大な英字＋日本語サブ：ONE TEAM / GRADE） */
.biglabel { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-xl) var(--sp-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-xs); text-align: center; min-height: 280px; }
.biglabel .en { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; line-height: 1; letter-spacing: -.01em; }
.biglabel .jp { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
/* ============================================================
ラベル行（左=極太ラベル＋EN／右=本文・ライトパネル）
VALUES「超ワクワク Be inspired」型
============================================================ */
.rows-panel { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-md) var(--sp-lg); display: flex; flex-direction: column; }
.row-item { display: grid; grid-template-columns: 290px 1fr; gap: var(--sp-lg); padding: var(--sp-md) 0; align-items: center; }
.row-item + .row-item { border-top: 1px solid var(--color-hair); }
.row-item .k { display: flex; flex-direction: column; gap: .2rem; }
.row-item .k .jp { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); }
.row-item .k .en { font-family: var(--font-mono); font-weight: 700; color: var(--color-faint); letter-spacing: .08em; }
.row-item .v { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.85; }
/* 仕様2カラム（パネル＋アイコン円＋囲みタグ＋見出し＋本文） */
.spec-col { display: flex; flex-direction: column; gap: var(--sp-sm); }
.spec-col .panel { min-height: 200px; margin-bottom: var(--sp-xs); }
.tag { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-fg); border: 1.5px solid var(--color-fg); border-radius: var(--radius-sm); padding: .2rem .7rem; }
.spec-col h3 { font-size: var(--text-xl); margin-top: var(--sp-xs); }
.note { font-size: var(--text-xs); color: var(--color-faint); line-height: 1.6; }
/* グレー角丸パネル＋アイコン円 */
.panel { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-lg) var(--sp-md); display: flex; align-items: center; justify-content: center; }
.icon-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-lg); width: 100%; }
.icon-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); text-align: center; }
.icon-item .disc { width: 78px; height: 78px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.icon-item .disc.dark { background: var(--color-fg); color: #fff; }
.icon-item .cap { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-fg); }
.icon-item .num { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--color-fg); }
.icon-item .num small { font-size: .5em; font-weight: 700; }
/* ライトパネルのファクトリスト（働く場所：… 型） */
.fact-panel { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-lg) var(--sp-xl); }
.fact-panel dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-lg) var(--sp-lg); align-items: baseline; }
.fact-panel dt { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.fact-panel dd { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.fact-panel dd small { font-size: .6em; font-weight: 700; color: var(--color-muted); }
/* ============================================================
メンバー／経営陣グリッド
============================================================ */
.members { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg) var(--sp-md); width: 100%; }
.member { display: flex; flex-direction: column; gap: .45rem; }
.member .head { display: flex; gap: .6rem; align-items: center; }
.member .ph { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--color-panel); flex-shrink: 0; }
.member .ph img { width: 100%; height: 100%; object-fit: cover; }
.member .role { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--color-faint); text-transform: uppercase; }
.member .name { font-family: var(--font-display); font-weight: 900; font-size: .92rem; }
.member .en { font-family: var(--font-mono); font-size: .54rem; color: var(--color-faint); }
.member .bio { font-size: .6rem; line-height: 1.65; color: var(--color-muted); }
/* ============================================================
ドーナツ図（職種構成など。conic-gradient + 中央スタット）
============================================================ */
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: var(--sp-xl); margin-top: var(--sp-sm); }
.donut { width: 300px; height: 300px; border-radius: 50%; position: relative; flex-shrink: 0;
background: conic-gradient(
#1a1a1a 0 17.7%, #3a3a3a 17.7% 34.4%, #565656 34.4% 47%,
#6f6f6f 47% 59.6%, #888 59.6% 69.7%, #9f9f9f 69.7% 76.3%,
#b4b4b4 76.3% 81.4%, #c6c6c6 81.4% 86.5%, #d4d4d4 86.5% 90%,
#dfdfdf 90% 93.5%, #e7e7e7 93.5% 96%, #efefef 96% 98.5%, #f5f5f5 98.5% 100%); }
.donut::after { content: ''; position: absolute; inset: 27%; background: #fff; border-radius: 50%; }
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.donut .center .n { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; }
.donut .center .n small { font-size: .42em; }
.donut .center .sub { font-size: .62rem; color: var(--color-muted); margin-top: .2rem; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem var(--sp-lg); }
.legend .li { display: flex; align-items: baseline; gap: .5rem; font-size: .72rem; }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; align-self: center; }
.legend .li b { font-family: var(--font-display); font-weight: 900; }
/* ============================================================
データ表
============================================================ */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td { border: 1px solid var(--color-line); padding: var(--sp-md); text-align: center; font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
.dtable thead th { background: var(--color-panel); }
.dtable td.rowhead { background: var(--color-panel); }
.dtable .big { font-size: 1.9rem; }
.dtable .big small { font-size: .55em; }
/* ============================================================
階段バーチャート（グレード別年収など。漸増）
============================================================ */
.stairs { display: flex; align-items: flex-end; gap: var(--sp-md); height: 360px; position: relative; padding-left: 96px; margin-top: var(--sp-md); }
.stairs .axis { position: absolute; left: 0; top: 0; bottom: 0; width: 88px; }
.stairs .axis .t { position: absolute; right: 8px; font-family: var(--font-display); font-weight: 700; font-size: .72rem; transform: translateY(50%); }
.stairs .grid { position: absolute; left: 88px; right: 0; top: 0; bottom: 0; }
.stairs .grid i { position: absolute; left: 0; right: 0; height: 1px; background: var(--color-hair); }
.stairs .bar { flex: 1; background: var(--color-fg); display: flex; align-items: flex-start; justify-content: center; padding-top: .5rem; color: #fff; font-family: var(--font-display); font-weight: 900; border-radius: 3px 3px 0 0; position: relative; z-index: 1; }
.stairs .bar.top { background: linear-gradient(180deg, #fff 0%, #131313 55%); color: #131313; }
/* ============================================================
数式KPI（A ＋ B ＋ C ＝ 結果・ライトパネル）
============================================================ */
.formula { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-lg) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-md); }
.formula > .ttl { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); }
.formula .row { display: flex; align-items: center; justify-content: center; gap: var(--sp-lg); }
.formula .term { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.formula .term .cap { font-size: var(--text-sm); color: var(--color-muted); }
.formula .term .v { font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1; }
.formula .term .v small { font-size: .42em; }
.formula .op { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: var(--color-faint); }
.formula .result { text-align: center; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); text-decoration: underline; text-underline-offset: 6px; }
/* ============================================================
タイムライン（事業ロードマップ）
============================================================ */
.timeline { position: relative; margin-top: var(--sp-lg); padding-top: 44px; }
.timeline::before { content: ''; position: absolute; top: 36px; left: 0; right: 0; height: 1.5px; background: var(--color-fg); }
.timeline.arrow::after { content: '▶'; position: absolute; top: 28px; right: -2px; color: var(--color-fg); font-size: .9rem; }
.tl-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-md); }
.tl-year { position: absolute; top: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; letter-spacing: .06em; }
.tl-year::after { content: ''; position: absolute; left: 0; top: 30px; width: 13px; height: 13px; border: 1.5px solid var(--color-fg); border-radius: 50%; background: #fff; }
.tl-item { display: flex; flex-direction: column; gap: .5rem; }
.tl-item .name { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: .04em; }
.tl-item .loc { font-size: var(--text-sm); color: var(--color-faint); margin-top: -.3rem; }
.tl-item .shot { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-panel); }
.tl-item .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-item .types { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--color-muted); line-height: 1.7; text-transform: uppercase; }
.tl-more { align-self: center; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; white-space: nowrap; }
/* ============================================================
写真：ブリーザー / スプリット / 縦ストリップ / 写真カード / クロージング格子
============================================================ */
.photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.photo .cap { position: absolute; left: var(--sp-xl); bottom: 22px; z-index: 2; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; color: #fff; text-transform: uppercase; line-height: 1.4; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.photo > .body, .photo > h1, .photo > h2, .photo > .label, .photo > .sub, .photo > .date, .photo > .mark { position: relative; z-index: 2; }
.photo.center::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.74) 100%); }
.photo.dim::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.12) 100%); }
.photo.dim-b::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.45) 100%); }
.photo.dim .body, .photo.dim h2, .photo.dim .label, .photo.dim-b h2, .photo.dim-b .label { color: #fff; }
.photo.dim .body p { color: rgba(255,255,255,.85); }
.slide-photo { padding: 0; }
/* スプリット（N分割の全面写真） */
.split { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.split .pane { position: relative; background-size: cover; background-position: center; }
.split .pane .cap { position: absolute; left: 20px; bottom: 18px; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .08em; color: #fff; text-transform: uppercase; line-height: 1.4; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
/* 縦ストリップ・ギャラリー（下部に4-5枚） */
.strips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: 100%; }
.strips.fill { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; gap: 0; }
.strips .strip { background-size: cover; background-position: center; border-radius: var(--radius-sm); aspect-ratio: 3/4; position: relative; }
.strips.fill .strip { border-radius: 0; aspect-ratio: auto; }
.strips .strip .cap { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-mono); font-size: .5rem; color: #fff; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* 写真カード（キャプション下載せ：物件一覧） */
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.pcard { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden; background-size: cover; background-position: center; }
.pcard .cap { position: absolute; left: 14px; bottom: 14px; right: 14px; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: .92rem; line-height: 1.3; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
/* クロージング：写真格子＋暗幕＋中央白コピー */
.photo-grid { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.photo-grid .cell { background-size: cover; background-position: center; }
.slide-end.grid-end::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.46); }
.slide-end.grid-end > h2, .slide-end.grid-end > p, .slide-end.grid-end > .mark { position: relative; z-index: 2; color: #fff; }
.slide-end.grid-end h2 { color: #fff; font-size: var(--text-2xl); }
/* 地図背景＋パネル（旅費補助など） */
.slide-map { background-size: cover; background-position: center; background-color: var(--color-panel2); }
.map-panel { background: rgba(56,56,58,.62); border-radius: var(--radius); padding: var(--sp-lg) var(--sp-xl); color: #fff; }
.map-panel .ttl { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); margin-bottom: var(--sp-md); }
.map-panel .grid { display: grid; grid-template-columns: repeat(3, auto); gap: var(--sp-md) var(--sp-xl); font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); }
/* 採用クロージング（チーム写真＋QRカード） */
.careers-photo { width: 100%; flex: 1; border-radius: var(--radius-sm); overflow: hidden; min-height: 0; }
.careers-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-card { position: absolute; right: var(--sp-xl); bottom: 40px; z-index: 5; background: rgba(241,241,243,.92); border-radius: var(--radius-sm); padding: var(--sp-sm) var(--sp-md); display: flex; flex-direction: column; gap: .5rem; }
.qr-card .t { font-family: var(--font-display); font-weight: 900; font-size: .82rem; line-height: 1.4; }
.qr-card .qr { width: 78px; height: 78px; background:
repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 16px 16px; align-self: center; }
.qr-card .url { font-family: var(--font-mono); font-size: .56rem; color: var(--color-muted); }
/* ============================================================
ユーティリティ
============================================================ */
.accent { color: var(--color-accent); }
.blue { color: var(--color-blue); }
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.mono { font-family: var(--font-mono); }
.bold { font-weight: var(--weight-black); }
.center-text { text-align: center; }
.divider { width: 100%; height: 1px; background: var(--color-line); }
.list { display: flex; flex-direction: column; gap: var(--sp-xs); list-style: none; }
.list li { display: flex; align-items: baseline; gap: var(--sp-sm); font-size: var(--text-base); color: var(--color-fg); line-height: 1.7; }
.list li::before { content: ''; display: inline-block; flex-shrink: 0; width: 14px; height: 1.5px; background: var(--color-fg); margin-top: .8em; }
.num-list { counter-reset: n; display: flex; flex-direction: column; gap: var(--sp-sm); list-style: none; }
.num-list li { counter-increment: n; display: flex; gap: var(--sp-md); align-items: baseline; font-size: var(--text-lg); color: var(--color-fg); }
.num-list li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-mono); font-weight: 700; color: var(--color-faint); font-size: var(--text-sm); }
.img-box { border-radius: var(--radius-sm); overflow: hidden; }
.img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }