/* ==========================================================================
AEOS LP — V9（2026-09-25）：スマホで崩れない・各セクションの上の空きを詰める・フォームを最後に
出典：AEOS_LP_V9_Visual_Guide_EN_after_Sep20.pdf（U1〜U10。U10 の規則は V7/V8 の規則を置き換える形で
この 1 ファイルに畳み込んだ。上書き用の別ファイルは出さない）／2026-09-25 の裁定（下記）
V8 の出典：AEOS_LP_V8_Visual_Guide_EN_BeforeAfter_v6.pdf（T1〜T10）／2026-09-13 客先定例
／樫木の可読性レビュー 2026-09-15・16／2026-09-19 の裁定（曖昧点 1〜8）
■ V9 の構造変更（ガイド U1・U10 §6）
・デスクトップのレイアウト規則（HERO の絶対配置の絵、本文｜図の 2 カラム、課題の 35｜65 と 1 行見出し）は
すべて @media (min-width:1025px) の中に置く。1024px 以下は V7 の縦積み（本文 → 図）が基底になる。
V8 は「デスクトップの規則を基底に書き、1024px 以下で解除する」構造だったが、樫木の環境では
412px で 589px まで横スクロールした（ガイド U1 冒頭）ため、構造ごと入れ替える。
・HERO 直下のグラデーション帯（.dawn）は要素ごと削除（U2-1）。
・セクションの余白 40px／見出し下 20px（U2。タブレット・スマホ 36px）。
・#contact は末尾の帯（U3）。V7 が id で温白を塗っていたため、id 付きで帯色を再指定。
・旧「お知らせ」セクションの CSS（リスト・行・種別チップ）は削除（U4）。
・沿革は 7em の日付列・リンクのある行だけ下線とホバー（U5）。メンバーの略歴は年の列を持つ dl（U6）。
・1200px 以下でだけ見える「お問い合わせ」タブ（U1-3）。
■ 2026-09-25 の裁定（ガイドに無い、または U10 と食い違う点）
1. U10 の [data-theme="b"] セレクタ：V8 で data-theme 属性を外しているため一致しない。:root と素の
セレクタに読み替えた。
2. HERO の絵は 2026-09-19 の版のまま（aspect-ratio 1.3 の上限・object-position 50% 16%・px 指定の左フェード・
見出しのインク右端に合わせた左端）。U10 §6 の値（1.12・50% 38%・% 指定のフェード）は 9/16 版の写しで、
樫木自身が指摘した「本文と絵の間の約 196px の帯」を再発させる。概要ページの Kept「hero as built」を優先。
樫木が旧来の切り方を望む場合は §6 の HERO ブロックを U10 の値に戻す。
3. 課題の出典キャプションは 14px のまま（樫木の V8 T7-7「読む文字は 14px 以上」。U10 の 13px は同じ下書きの写し）。
4. .dawn の規則は display:none ではなく削除（要素が無い）。
5. .company-head--next の 40px は U10 どおり 1024px 以下（U2 の本文は「on phone」）。
6. .section-media--fig-left の order は 1025px 以上だけ（読み上げ順は不変）。
7. 1024px 以下の HERO の絵は V7 の 100vw＋translate ではなく width:100%（.hero の直下なので同じ全幅。
vw はスクロールバー幅を含むため、幅の狭いウィンドウで横あふれの原因になる）。V7 の上下のフェードは残す
（ガイド U1 の AFTER でも絵の上端が濃紺に溶けている）。
根拠：9/13 定例 — 滝内代表が B 案を選定（00:30:51「じゃあこれにしましょう。これで完成版を
お願いします」）。同席で決まった修正：署名行の削除（00:07:10）、見出しは本文カラム内に
収める（00:08:26〜00:12:25）、本文と図の高さを揃える（00:13:53「ガタガタなんすよね」）、
HERO が 1 画面に収まる（00:15:44）、枠・輪郭・罫をなくす（00:18:46〜00:27:14
「もっさりしている」「手作り感が強調されている」。参照：CyberAgent／味の素／楽天）。
■ V7 からの構造変更
・テーマ切り替え（A/B/C）を撤去。[data-theme="b"] のトークンを :root に統合し、
A・C のブロック、 の ?theme= スクリプト、html の属性を削除（T1）。
・面の階段（T7-3・樫木 9/16）：地＝温白 #F7F4EB → カード＝白 #FFFFFF → 入力欄と縞の行＝空色 #DDEEF5。
帯は空色より一段濃い #CFE3EE（温白との差 1.20:1 で帯の縁が読める）。罫は使わない。
・枠・輪郭・罫は全廃（T5）。分離は影とティントで取る：
--v8-shadow（カード・引用・フォーム・グラフ） 0 6px 14px rgba(23,65,90,.22)
--v8-shadow-fig（図版） 0 8px 18px rgba(23,65,90,.34)
ぼかしを短くして縁を縁として読ませる（樫木 9/16）。角丸は残す（滝内代表 00:24:13「角丸は別に角丸でもいい」）。
・HERO の高さは本文ブロック＋上下 56px。絵は本文の右で HERO 全高を埋め、右端まで裁ち落とし、
左側だけ一段の広いフェードで濃紺に溶かす（T2）。ボタンは下線つきのテキストリンク。
・見出しは 38px 上限・本文カラム幅（600px）内。課題だけ全幅 1 行（T3）。
・セクションのリズムは全セクション共通 64px／見出し下 24px（2026-09-19 裁定 #1：
V7 の ID 指定の余白規則は削除して置き換える。上書きではない）。
■ V7 で樫木の明示指示により入れていて、V8 のガイドが明示的に覆した規則（記録）
・2026-09-12 §3 data-theme 切り替え → T1（客先が B を選定）
・2026-09-12 §6「Contact / News / 会社概要 のリズムは触らない」→ T7-4（64px 共通）
・2026-09-12 §8／V7 T1 帯の上の図版は温白の額に載せる → T5（額・枠なし。B では元から額なし）
・V7 T1 薄空色の帯には罫を必ず与える／濃紺上のボタン輪郭は白 → T5（罫・輪郭なし。帯色を深めて分離）
・2026-09-12 §4 B 案の HERO 絵は上下左右の 4 辺フェード → T2（左辺のみ）
・V6 由来の HERO min-height ガード（calc(27vw + 22px)）→ T2（min-height:0。高さは本文が決める）
・.section-heading{max-width:34ch}＋明示
→ T3（600px・38px。課題は
を外して 1 行）
・★導出 1 の HERO リード副文字 #C8D8E2 → T7-10（白・18px）
■ 橙の二分割ルール（V5 から不変）
#E9854A は「面」専用（ボタンの面、HERO 主リンクの下線と矢印）。文字に使うと温白上 2.41:1 で不合格。
明色面の橙の文字は必ず #A94B25。橙の面に載せる文字は #243640（4.72:1）。
濃紺面の橙アクセントは #F6C9A6（★導出 4）。
==========================================================================
WCAG 実測値（sRGB 相対輝度による実計算。◎=AA 余裕 ○=AA 合格 △=大文字（3.0:1）のみ合格）
文字は本文サイズ基準 4.5:1、面と面の分離・輪郭は非文字 3.0:1 で判定。
--------------------------------------------------------------------------
▼ 明色面の文字
文字 / 背景 比率 必要 判定
インク #243640 / 温白 #F7F4EB 11.39:1 4.5 ◎
インク #243640 / 白 #FFFFFF 12.63:1 4.5 ◎
インク #243640 / 空色 #DDEEF5 10.51:1 4.5 ◎
インク #243640 / 帯 #CFE3EE 9.47:1 4.5 ◎
インク #243640 / 橙淡 #F6C9A6（必須バッジ・ニュース種別）8.24:1 4.5 ◎ ガイド値 8.2
深空色 #1F5468 / 白 8.31:1 4.5 ◎
深空色 #1F5468 / 温白 7.56:1 4.5 ◎
深空色 #1F5468 / 帯 #CFE3EE 6.28:1 4.5 ◎
副文字 #4A5A63 / 白 7.16:1 4.5 ◎
副文字 #4A5A63 / 温白 6.51:1 4.5 ◎
副文字 #4A5A63 / 帯 #CFE3EE（図のキャプション 14px）5.41:1 4.5 ◎
副文字 #4A5A63 / 空色 #DDEEF5（SVG 内） 6.01:1 4.5 ◎
濃橙 #A94B25 / 白（ニュース日付・H2） 5.64:1 4.5 ◎
濃橙 #A94B25 / 温白（H2） 5.13:1 4.5 ○
濃橙 #A94B25 / 空色 #DDEEF5（SVG 内） 4.74:1 4.5 ○
濃橙 #A94B25 / 帯 #CFE3EE（自立・WellDeck の H2） 4.27:1 3.0 △ ★要注意
→ 38px・900 の見出しなので WCAG の「大文字」基準（3.0:1）では合格。ただし V7 の判定は
本文基準 4.5 で統一しており、V7 の C 案では 3.94:1 の同系の組み合わせを H2 で不採用にした
（ガイド V7 T1）。帯を #EAF4F8 → #CFE3EE に深めた T7-3 の副作用。樫木の確認事項として報告済み。
インク #243640 / 橙面 #E9854A（ボタン文字） 4.72:1 4.5 ○
--------------------------------------------------------------------------
▼ 濃紺面（ナビ・HERO・フッター #17415A）
白 #FFFFFF / 濃紺 #17415A 10.82:1 4.5 ◎
見出し強調 #F6C9A6 / 濃紺 7.13:1 4.5 ◎ ガイド値 7.1
ナビタブ・フッター副文字 #C8D8E2 / 濃紺 ★導出 1 7.41:1 4.5 ◎
橙の下線・矢印 #E9854A / 濃紺（非文字） 4.08:1 3.0 ◎
ナビ CTA の面 #E9854A / 濃紺（面の分離） 4.08:1 3.0 ◎
フッター #17415A / 温白（面の分離） 9.84:1 3.0 ◎
--------------------------------------------------------------------------
▼ 面の分離（非文字 3.0:1 には届かない。縁は影が担う＝樫木 9/16 の設計判断）
白カード / 温白 1.10:1 — 影 --v8-shadow で縁を出す
白カード / 帯 #CFE3EE 1.32:1 — 同上（ガイド値 1.32）
空色の入力欄・縞 / 白カード 1.19:1 — 内側の影＋色差（ガイド値 1.19）
帯 #CFE3EE / 温白 1.20:1 — 面が広いので色差だけで読める（ガイド値 1.20）
グラフの地 #DDEEF5 / 温白 1.08:1 — 影 --v8-shadow で縁を出す
橙淡バッジ #F6C9A6 / 白カード 1.52:1 — 面で読ませる。文字は 8.24:1
送信ボタンの面 #E9854A / 白カード 2.65:1 — 面で読ませる。文字は 4.72:1
--------------------------------------------------------------------------
■ 不合格のため採用しなかった値（V7 から継続）
橙 #E9854A の文字使用 …………… 温白上 2.41:1 → 明色面の文字は必ず #A94B25
白 #FFFFFF / 空色 #DDEEF5 ……… 1.19:1 → 明色面の文字はインクへ
#A94B25 / 濃紺 #17415A ……… 1.92:1 → 濃紺上の橙は #F6C9A6
==========================================================================
★導出値（ガイドに値の指定が無く、こちらで導出した値。樫木の確定値ではない）
1. #C8D8E2 … 濃紺面（#17415A）のナビタブ・フッター副文字。7.41:1。
V7 で HERO リードにも使っていたが、T7-10 で白に置き換えた。
4. 濃紺面の橙アクセント（フッターのブランド「AEOS」）… #F6C9A6。#A94B25 は濃紺上 1.92:1。
（2・3・5〜8 は A・C 案専用だったため V8 で不要。番号は V7 の記録と照合できるよう残す。）
========================================================================== */
/* フォントはネットワーク依存。読み込めない環境（クライアント PC でのローカル閲覧など）
でも破綻しないよう、すべてのスタックに OS 標準の和文フォントを後置している。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Noto+Sans+JP:wght@300;400;500;700&family=Big+Shoulders+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
/* ---- 面（8/30 議事：空色トーン） ---- */
--sky:#DDEEF5; /* 空色 — 入力欄・縞の行・グラフの地 */
--warm:#F7F4EB; /* 温白 — 主背景（V5 から維持） */
--pale:#EAF4F8; /* 薄空色 — 沿革のホバー面（V7 では帯・カードの色） */
--deeper:#17415A; /* 濃紺 — ナビ・HERO・フッター */
--band:#CFE3EE; /* 帯 — 空色より一段濃い（T7-3。温白と 1.20:1） */
/* ---- アクセント（V5 の二分割ルールを維持） ---- */
--orange:#E9854A; /* 面専用 */
--orange-ink:#A94B25; /* 文字用（明色面のみ） */
--orange-light:#F6C9A6; /* 濃紺面の上の橙アクセント（★導出 4）／バッジ・種別チップの面（T5-4） */
/* ---- 文字 ---- */
--heading:#A94B25; /* H2 — 濃橙（V5 維持） */
--heading-2:#1F5468; /* h3・ラベル・ブランド名 — 深空色 */
--ink:#243640; /* 本文 */
--ink-2:#4A5A63; /* 副文字（V6 で導出） */
--on-deep:#FFFFFF; /* 濃紺面の主文字 */
--on-deep-2:#C8D8E2; /* 濃紺面の副文字（★導出 1） */
/* ---- 面と影（T5・T7-6：枠・罫はゼロ。縁は影が担う） ---- */
--card:#FFFFFF;
--card-2:#FFFFFF;
--v8-shadow:0 6px 14px rgba(23,65,90,.22); /* カード・フォーム・沿革・会社概要・グラフ（引用カードは V10 U2 で廃止） */
--v8-shadow-fig:0 8px 18px rgba(23,65,90,.34); /* 図版（イラスト） */
--font-display:'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
--font-body:'Noto Sans JP', 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
--font-num:'Big Shoulders Display', 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
--container:1280px;
--gutter:clamp(24px, 5vw, 80px);
--nav-h:72px; /* T10（76 → 72） */
/* HERO 本文の幅は見出し（8 字＋字間）に合わせる。T2 の 600px は上限として残す（1440 で 590px）。
根拠：2026-09-19 樫木指摘「本文の右端と絵の最初の可視ピクセルの間に約 196px の平らな青の帯」
（V7 でも指摘された問題の再発）。原因は 600px の列の右側の空きと、絵の幅が
aspect-ratio で HERO の高さから決まっていたこと。列を見出し幅に合わせ、絵は列の右隣から
ビューポート右端までを cover で埋める。 */
--hero-h1:clamp(40px, 5.2vw, 72px);
--hero-copy-w:min(600px, calc(8.2 * var(--hero-h1)));
--hero-pad:clamp(40px,6vh,56px); /* HERO の上下余白。高さは本文ブロック＋この 2 倍（T2-1） */
--r-card:24px;
--r-pill:999px;
/* ---- 本文と図の2カラム（T4：gap を詰める） ---- */
--media-gap:clamp(28px, 3vw, 44px);
/* ---- 既定の文字ロール（帯の中で上書きされる） ---- */
--text:var(--ink);
--text-2:var(--ink-2);
--hl:var(--heading-2);
/* ---- B 案のトークン（V7 の [data-theme="b"] から :root へ移動。T1） ---- */
--nav-surface:var(--deeper);
--nav-ink:var(--on-deep-2);
--nav-ink-strong:var(--on-deep);
--nav-brand:var(--on-deep);
--nav-brand-accent:var(--orange-light); /* .brand span 用。V8 の HTML には span が無い（T6）。復活用に保持 */
--hero-surface:var(--deeper);
--hero-headline:var(--on-deep); /* ガイド値 */
--hero-em:var(--orange-light); /* ガイド値 #F6C9A6（7.13:1） */
--hero-sub:var(--on-deep); /* T7-10：#C8D8E2 → 白 */
--hero-strong:var(--on-deep);
--band-surface:var(--band);
--band-text:var(--ink);
--band-text-2:var(--ink-2);
--band-heading:var(--heading); /* 帯上 4.27:1 ＝ 大文字基準のみ合格（冒頭の表 ★要注意） */
--band-hl:var(--heading-2);
/* V10 U2：引用カード専用だった 2 つのトークン（地の白・文字色）を削除。使う規則が無くなったため（2026-10-04 承認）。 */
--overscroll-top:var(--deeper);
}
*, *::before, *::after{ box-sizing:border-box; }
/* ページ上端のオーバースクロールでは HERO 上部と同じ色を見せる
（下端はフッターの box-shadow で処理している） */
html{ scroll-behavior:smooth; background:var(--overscroll-top); }
body{
margin:0;
color:var(--text);
background:var(--warm);
font-family:var(--font-body);
font-size:16px;
line-height:1.9;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; } /* 図版を絶対に歪ませない（自立の cover はクラスで上書き。引き伸ばしではなく切り抜き） */
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:900; letter-spacing:0.01em; }
p{ margin:0; }
::selection{ background:var(--orange); color:var(--ink); }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
/* グリッド/フレックスの子は既定で min-width:auto のため、中身（図版・長い語）
が列幅を押し広げ、狭い画面で横あふれを起こす。全レイアウトで明示的に 0 にする。 */
.hero-grid > *,
.members-grid > *,
.form-row > *,
.section-media > *,
.footer-top > *{ min-width:0; }
/* アイブロウは装飾ラベル（14px 最小の対象外。T7-7「eyebrow labels stay decorative」） */
.eyebrow{
font-family:var(--font-mono);
font-size:13px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--hl);
}
/* T2：HERO リードの句割り。句の途中で折り返さない（T9 の句割りどおり） */
.nb{ white-space:nowrap; }
/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }
/* ==========================================================================
Skip link / focus
========================================================================== */
.skip-link{
position:absolute; top:-100px; left:16px; z-index:1000;
background:var(--orange); color:var(--ink); padding:12px 20px;
border-radius:var(--r-pill); font-weight:700;
transition:top .2s ease;
}
.skip-link:focus{ top:16px; }
/* フォーカス時のみ出る輪郭。静止時（at rest）には一切の border / outline を出さない（T5）。 */
:focus-visible{ outline:2px solid var(--orange-ink); outline-offset:3px; border-radius:4px; }
/* 濃紺の面では濃橙の輪郭が 1.47:1 で見えないため、白に反転する。
対象＝ナビ／HERO／フッター。帯（#CFE3EE）の上は #A94B25 が 4.27:1 で非文字 3.0 を満たすのでそのまま。 */
.site-nav :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible{ outline-color:#FFFFFF; }
/* ==========================================================================
Nav — 罫なし（T5）
========================================================================== */
.site-nav{
position:sticky; top:0; z-index:500;
height:var(--nav-h);
display:flex; align-items:center;
background:var(--nav-surface);
border-bottom:0;
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.brand{
display:flex; align-items:baseline; gap:10px;
font-family:var(--font-num);
font-weight:800; font-size:22px; letter-spacing:0.04em;
color:var(--nav-brand); flex-shrink:0;
}
.brand span{ color:var(--nav-brand-accent); }
/* T6：タグラインは客先の正式表記が届くまで HTML から外している。 を戻せば一手で復活するよう規則は残す。 */
.brand small{
font-family:var(--font-mono); font-size:10px; color:var(--nav-ink);
letter-spacing:0.14em; font-weight:400;
}
.nav-tabs{ display:flex; gap:clamp(4px,1.3vw,20px); }
.nav-tabs a{
position:relative;
font-size:14px; font-weight:500; /* T7-7：13 → 14（読む文字の最小） */
color:var(--nav-ink);
padding:8px 2px;
white-space:nowrap;
transition:color .25s ease;
}
/* 現在地の下線は疑似要素の面（border ではない）。静止時は幅 0。 */
.nav-tabs a::after{
content:'';
position:absolute; left:0; right:100%; bottom:0;
height:2px; background:var(--orange); border-radius:2px;
transition:right .3s cubic-bezier(.4,0,.2,1);
}
.nav-tabs a:hover{ color:var(--nav-ink-strong); }
.nav-tabs a:hover::after{ right:0; }
.nav-tabs a.active{ color:var(--nav-ink-strong); }
.nav-tabs a.active::after{ right:0; }
/* 塗りのボタンはナビとフォームの2つだけ（T5：滝内代表「押して欲しいところだけ」）。輪郭なし。 */
.nav-cta{
display:inline-flex; align-items:center; gap:8px;
font-size:14px; font-weight:700; /* T7-7 */
padding:10px 18px;
border-radius:var(--r-pill);
background:var(--orange); color:var(--ink);
border:0;
white-space:nowrap; flex-shrink:0;
transition:background .25s ease, transform .25s ease;
}
.nav-cta:hover{ background:#FAD9BC; transform:translateY(-1px); }
/* V9 U1-3：「お問い合わせ」タブは CTA ボタンが隠れる 1200px 以下だけ（下の laptop ブロック）。 */
.nav-tab--mobile{ display:none; }
.nav-toggle{
display:none;
width:44px; height:44px;
border:0;
border-radius:50%;
background:transparent;
align-items:center; justify-content:center;
cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content:''; display:block; width:20px; height:2px; background:var(--nav-ink-strong);
position:relative; transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }
/* ==========================================================================
セクションの地色とリズム
========================================================================== */
/* ナビのタブを叩いたとき、セクションがスティッキーなナビの真下から始まるようにする（V6.2 から）。 */
section{ position:relative; scroll-margin-top:var(--nav-h); }
/* V9 U2：全セクション共通 40px（1024px 以下 36px）。見出し下 20px（課題 16px）。
根拠：ガイド U2「The gap above a heading should be about the gap below it」。U10 §3 は V7 の ID 規則
（#problem … {padding:clamp(48px,5vw,72px)}）に勝つために ID を並べているが、その規則は V8 で削除済み
（2026-09-19 裁定 #1）なので、ここではクラスだけで全セクションに効く。
V7 の樫木決定 2026-09-12 §6「Contact / News / 会社概要 のリズムは触らない」は T7-4 → U2 が覆す。 */
.section-pad{ padding:40px 0; }
.section-head{ margin-bottom:20px; }
/* V9 U2-1：HERO 直下のグラデーション帯（.dawn）は要素ごと削除。濃紺が温白に直接接する。 */
#problem, #society, #company{ background:var(--warm); }
/* V9 U3：お問い合わせは末尾の帯。V7 は #contact を id で温白に塗っていたため、U10 §1 どおり id 付きで帯色を
再指定する（上の温白の並びから #contact を外してもいるが、規則の詳細度で負けないよう両方行う）。 */
#contact.band{ background:var(--band-surface); }
/* T7-4：ラベルは見出しの直上（26px → 8px。樫木 9/16）。
T5：ラベル前の短い装飾罫（.line）は出さない。要素は復活用に HTML に残っている。 */
.section-eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.section-eyebrow-row .line{ display:none; }
/* T3：見出しは 38px 上限・本文カラム幅（600px）内。2カラムの中ではカラム幅にも制限される。
根拠：2026-09-13 客先定例 00:09:51〜00:12:25（WellDeck 見出しが図の上へ約5文字はみ出していた）。
改行は HTML の
で明示（自立・目指す社会・WellDeck）。 */
.section-heading{
font-size:clamp(28px,2.8vw,38px); line-height:1.35;
max-width:600px;
color:var(--heading);
}
.section-heading em{ font-style:normal; color:var(--hl); }
/* V10 U3：見出しの句割り。根拠：ガイド U3-2・2026-10-04 客先定例（スマホで見出しが語の途中で折れていた）。
見出しの中の .nb だけ inline-block にし、改行は句と句の間だけにする（HERO リードの .nb は従来どおり inline の nowrap）。
text-indent:0 はガイドからの逸脱（2026-10-04 承認）：text-indent は継承されるため、課題見出しの text-indent:-0.5em
（「 のぶら下げ）が各 inline-block の先頭にも効く。ガイドの規則のままだと 1440px で見出しの先頭が -36px（V9 は -18px）、
句同士が 0.5em 重なり、320px では 2・3 行目が 12px 左へはみ出した（実測）。0 にすると 1440px は V9 と同一。 */
.section-heading .nb{ display:inline-block; white-space:nowrap; text-indent:0; }
/* ==========================================================================
帯（#independence と #welldeck）— 罫なし。空色より一段濃い #CFE3EE（T7-3）
セクションの中だけ文字ロールを差し替える。
========================================================================== */
.band{
background:var(--band-surface);
border-top:0;
border-bottom:0;
--text:var(--band-text);
--text-2:var(--band-text-2);
--heading:var(--band-heading);
--hl:var(--band-hl);
/* V10 U2：帯の中で引用カードの地を白にしていた --card の差し替えを削除（引用カードの廃止で使い手が無い）。 */
color:var(--band-text);
}
/* ==========================================================================
HERO — 高さは本文ブロックが決める（T2）
根拠：2026-09-13 客先定例 00:05:38〜00:07:10（ナビと見出しの間の空き）、
00:15:44（「はみ出すのは良くない」「画像の縦幅も縮めて、ここら辺まで収まる方がいい」）。
========================================================================== */
.hero{
position:relative;
min-height:0; max-height:none; height:auto;
padding:var(--hero-pad) 0;
overflow:hidden;
/* HERO は単色。地の受け渡しは .dawn の1回だけ（V7 で確立）。 */
background:var(--hero-surface);
}
/* V5 の暗いビネットは撤去。要素は将来のフック用に残し、描画は持たせない。 */
.hero-sky{ position:absolute; inset:0; z-index:0; }
.hero > .container{ position:relative; z-index:1; height:auto; }
.hero-grid{
display:grid; grid-template-columns:minmax(0,1fr);
align-items:stretch; height:auto;
}
/* イラストは絶対配置で右へ裁ち落とすため、本文側は幅を切って重ならないようにする。 */
/* .hero-copy の幅制限（本文の右に絵を置くため）は 1025px 以上だけ（§6）。 */
.hero-headline{
font-size:var(--hero-h1);
line-height:1.28; letter-spacing:0.01em;
margin-bottom:28px;
max-width:none;
color:var(--hero-headline);
}
.hero-headline em{ font-style:normal; color:var(--hero-em); }
/* T7-10：リードは白・18px・行送り 2。句割りは .nb（HTML）。 */
.hero-sub{
font-size:18px;
color:var(--hero-sub); line-height:2;
max-width:48ch; margin-bottom:36px;
text-wrap:pretty;
}
.hero-sub strong{ color:var(--hero-strong); font-weight:700; }
/* 削除：.hero-company（署名行「株式会社AEOS」とその前の短い罫）— 2026-09-13 客先定例 00:07:10。HTML ごと削除。 */
/* ---- ボタン ------------------------------------------------------------- */
.hero-actions{ display:flex; gap:36px; align-items:center; flex-wrap:wrap; }
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:16px 30px;
border-radius:var(--r-pill);
font-size:15px; font-weight:700;
transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
border:1px solid transparent; cursor:pointer;
font-family:inherit;
}
/* 塗りの既定（ナビ・フォーム以外で再利用する場合の土台）。輪郭は持たない（T5-3）。 */
.btn-primary{ background:var(--orange); color:var(--ink); border-color:transparent; }
.btn-primary:hover{ transform:translateY(-2px); background:#F0955E; }
.btn-secondary{ border-color:transparent; color:var(--heading-2); background:var(--pale); }
.btn-secondary:hover{ color:var(--heading-2); transform:translateY(-2px); }
.btn-solid{ background:var(--orange); color:var(--ink); border-color:transparent; }
.btn-solid:hover{ transform:translateY(-2px); background:#F0955E; }
.btn svg{ width:16px; height:16px; }
/* T2-3／T5-3：HERO の2つのボタンは白い下線つきのテキストリンク。下線は文字のすぐ下（padding 6px 2px 5px）。
主リンク「サービスを見る」は下線と矢印が橙 #E9854A（濃紺上 4.08:1）、副リンク「構想を知る」は白。
根拠：2026-09-13 客先定例 00:18:46〜00:27:14（枠つきボタンは「もっさり」。塗りはナビとフォームだけ残す）。
この2本の下線が、ページ上で静止時に見える唯一の border（T5 の Done when「2 hits」）。 */
.hero .btn-primary, .hero .btn-secondary{
background:transparent; border:0; border-radius:0;
padding:6px 2px 5px;
border-bottom:2px solid currentColor;
box-shadow:none; color:#FFFFFF; transform:none;
}
.hero .btn-primary{ border-bottom-color:var(--orange); }
.hero .btn-primary svg{ color:var(--orange); }
.hero .btn-primary:hover, .hero .btn-secondary:hover{
background:transparent; transform:none; box-shadow:none;
border-bottom-color:var(--orange);
}
/* ---- HERO のイラスト（T2-4 ＋ 2026-09-19 樫木指摘の修正）：デスクトップの配置は下の §6 ---------------
枠・角丸・影・背景パネルは一切持たせない。HERO の面そのものの一部として扱う。
1024px 以下では通常フローに戻り、本文の下に全幅で流れる（§7）。 */
.hero-visual{ padding:0; z-index:0; pointer-events:none; }
.hero-visual picture{ display:block; }
.hero-illus{ border-radius:0; box-shadow:none; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
.reveal{ animation:none !important; transition:none !important; }
}
/* ==========================================================================
本文（pptx 原文）
========================================================================== */
.prose{ max-width:62ch; }
/* T7-2：行送り 2.05 → 1.75、段落間 1.1em → .9em。サイズは 17px のまま。 */
.prose p{
font-size:17px; line-height:1.75; color:var(--text);
margin-bottom:.9em;
text-wrap:pretty;
}
.prose p:last-child{ margin-bottom:0; }
.prose .prose-lead{
color:var(--hl); font-weight:700; font-size:18px;
}
/* V10 U2／削除：引用カードの規則一式（白いカード・帯の上の文字色・本文カラム内の余白・自立での大きさ。計 7 規則）。
根拠：2026-10-04 客先定例 00:16:21・ガイド U2-2。母の言葉は自立の第 3 段落の最後の文になり、カードは使わない。
ガイドは V7 由来の規則は残してよいとするが、全体の Done when（grep で該当語が出ないこと）と「使われない CSS を
残さない」に合わせて全部削除した（2026-10-04 承認）。復活が必要なら git の V9 版（コミット a4cdf3b）を参照。 */
/* ==========================================================================
本文と図を横に並べる（V7 T2 → V8 T4）
根拠：9/6 議事 00:24:34 樫木「文字で下行かないと画像が見れない」／00:27:22 滝内「文章も画像も
その1ページで見れるような感じにする方が見やすい」／9/13 定例 00:13:53「ガタガタなんすよね」
V8 の規則：本文と図は同じ線から始まる（上揃え）。図は引き伸ばさない。切り抜くのは樫木が
位置を決めた自立だけ。並びは 自立=右／目指す社会=右／WellDeck=左。1024px 未満では縦に積む。
DOM 順は「本文 → 図」で固定し、左右の入れ替えは order だけで行う＝読み上げ順は変わらない。
========================================================================== */
/* 基底（1024px 以下）：本文 → 図の縦積み。図は本文の 24px 下（U10 §7）。2 カラムは §6。 */
.section-media-body{ display:block; max-width:none; }
.section-media-body .prose{ max-width:none; }
.section-media .fig{ margin:24px 0 0; display:block; }
.section-media .fig picture{ display:block; }
.section-media .fig img{
display:block; width:100%; height:auto;
border-radius:16px; box-shadow:var(--v8-shadow-fig);
}
#society .prose p{ line-height:1.7; }
/* 課題（T7-1・樫木 9/16 案B）：見出しは「 で始まるため text-indent:-0.5em でぶら下げ、本文と左端を揃える（T7-5）。
全幅 1 行（white-space:nowrap）と 35｜65 の 2 カラムは 1025px 以上だけ（§6）。1024px 以下は折り返す（U1-1）。 */
#problem .section-head{ margin-bottom:16px; }
#problem .section-heading{ text-indent:-0.5em; }
.section-media--stack .prose p{ line-height:1.75; margin-bottom:.9em; }
/* グラフはイラストではなくカード扱い：角 18px・カードの影（T7-6） */
.section-media--stack .fig img{ border-radius:18px; box-shadow:var(--v8-shadow); }
/* ==========================================================================
図版 — 枠・額・パディングなし（T5-2）。角 16px と強めの短い影（T7-6）
========================================================================== */
.fig, .band .fig{
margin:0;
background:transparent;
border:0;
padding:0;
border-radius:0;
box-shadow:none;
}
.fig img{
width:100%; height:auto;
border-radius:16px;
box-shadow:var(--v8-shadow-fig);
display:block;
}
/* T7-11：キャプションは 14px・左揃え。出典（課題）も 14px（2026-09-19 裁定 #2：13px ではなく 14px の下限を優先）。 */
.fig figcaption{
font-size:14px; line-height:1.8; color:var(--text-2);
padding:12px 4px 0; text-align:left;
}
/* 帯の上のキャプション：#4A5A63 / #CFE3EE = 5.41:1 */
.band .fig figcaption{ color:var(--ink-2); }
/* ==========================================================================
問い合わせフォーム（表側の構造のみ。送信処理は未実装）— 中央揃え・枠なし（T5-4）
========================================================================== */
#contact .section-head{ max-width:840px; margin-left:auto; margin-right:auto; }
.contact-form{
max-width:840px;
margin:0 auto;
background:#FFFFFF;
border:0;
border-radius:var(--r-card);
padding:clamp(24px,3.4vw,44px);
box-shadow:var(--v8-shadow);
}
.form-row{
display:grid; grid-template-columns:1fr 1fr;
gap:clamp(16px,2vw,24px);
}
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:clamp(18px,2.2vw,24px); }
.form-row .form-field{ margin-bottom:0; }
.form-row{ margin-bottom:clamp(18px,2.2vw,24px); }
.form-field label{
font-size:14px; font-weight:700; color:var(--heading-2);
display:flex; align-items:center; gap:10px;
}
/* 「必須」バッジ：橙淡の面にインク文字（8.24:1）。輪郭なし。状態ラベルなので 14px 最小の対象外（2026-09-19 裁定 #3）。 */
.form-field .req{
font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.06em;
color:var(--ink);
background:var(--orange-light); border:0;
border-radius:var(--r-pill); padding:2px 9px;
}
/* 入力欄：白いカードの中で空色 #DDEEF5 が分離を担う（1.19:1）。枠なし・内側の薄い影。
フォーカス＝白の面＋3px の橙のリング。 */
.form-field input,
.form-field textarea{
font-family:inherit; font-size:16px; line-height:1.7;
color:var(--ink);
background:var(--sky);
border:0;
border-radius:12px;
padding:13px 16px;
width:100%;
box-shadow:inset 0 1px 2px rgba(23,65,90,.10);
transition:background .2s ease, box-shadow .2s ease;
}
.form-field textarea{ resize:vertical; min-height:150px; }
.form-field input:focus,
.form-field textarea:focus{
outline:none;
background:#FFFFFF;
box-shadow:0 0 0 3px rgba(169,75,37,.28);
}
.form-actions{
display:flex; align-items:center; gap:clamp(14px,2vw,22px);
flex-wrap:wrap; margin-top:clamp(8px,1.4vw,14px);
}
/* 送信機能の案内は利用者が読む文なので 14px（2026-09-19 裁定 #3） */
.form-note{ font-size:14px; color:var(--ink-2); }
/* V9 U4／削除：旧「お知らせ」セクションの規則一式（リスト・行・日付・種別チップ・題・本文）。
セクションごと沿革に統合。退避：リポジトリ直下の _retired/v9-removed.html（2026-10-04 に theme/ の外へ移動。CSS は git の V8 版）。 */
/* ==========================================================================
会社概要 — 3 つの同格ブロック 沿革 → メンバー → 会社概要（T8）
根拠：2026-09-06 客先定例 00:10〜00:12「上にヒストリーが来ます。メンバーが来ます。その下に会社（概要）」
V7 の .sub-head（小ラベル＋短い罫）は HTML ごと .section-head.company-head に置き換えたため規則を削除。
========================================================================== */
.company-head{ margin-bottom:20px; }
.company-head--next{ margin-top:48px; } /* 2・3 番目のブロック（U2-3。1024px 以下 40px） */
/* V9 U4：沿革（#history）と会社概要（#companyinfo）はタブの飛び先。スティッキーなナビの真下から始める。 */
.company-block{ scroll-margin-top:var(--nav-h); }
/* ---- メンバー（pptx2 Slide 9） ---- */
.members-grid{
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(18px,2.4vw,26px);
}
/* カードの枠と写真のリングを外す（T5：9/13 定例 00:20:41「写真なんかは別に押す必要ないから枠なしがいい」）。
白のカードに短い影。ホバーで浮かせない。角丸は残す。 */
.member-card{
border:0;
border-radius:var(--r-card);
background:#FFFFFF;
padding:clamp(24px,2.6vw,30px);
text-align:center;
box-shadow:var(--v8-shadow);
}
.member-card:hover{ transform:none; box-shadow:var(--v8-shadow); }
.member-photo{
width:128px; height:128px;
margin:0 auto 20px;
border-radius:50%;
overflow:hidden;
background:transparent;
box-shadow:none;
}
.member-photo img{
width:100%; height:100%;
object-fit:cover; /* 低解像度の写真でも破綻させない */
object-position:50% 22%; /* 顔の位置に合わせて上寄りにトリミング */
border-radius:50%;
}
.member-name{ font-size:18px; color:var(--heading-2); margin-bottom:4px; }
/* T7-7：役職 12 → 14、所属 12.5 → 14。T7-8：略歴は内容なので 15px・インク色。 */
.member-role{
font-family:var(--font-mono); font-size:14px; color:var(--orange-ink);
margin-bottom:6px; display:block;
}
.member-affil{ font-size:14px; line-height:1.7; color:var(--ink-2); margin-bottom:12px; }
.member-bio{ font-size:15px; color:var(--ink); line-height:1.85; text-align:left; } /* 行送りは U10 に指定が無く V7 の 1.85 のまま */
/* V9 U6：年ごとの行。dt（年）が自分の列を持つので、折り返した 2 行目は年の下ではなく文の下に揃う（ガイド U6-2）。 */
.member-timeline{
margin:10px 0 0; display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:6px 10px; text-align:left;
}
.member-timeline .tl-row{ display:contents; }
.member-timeline dt{
font-family:var(--font-mono); font-size:14px; font-weight:500;
color:var(--heading); white-space:nowrap; line-height:1.7;
}
.member-timeline dd{ margin:0; font-size:15px; line-height:1.7; color:var(--ink); }
/* ---- 沿革（pptx2 Slide 8） ---- */
/* 行はすべて同じ のまま。客先が後から自分で行を足せるようにするため
（9/6 議事 00:13:30 滝内「後から書き加えられるんですよね」）。実際の追加は WordPress フェーズで扱う。
T5-4：上下の罫を外し、白のカードの中で奇数行を空色 #DDEEF5 の面にして行を読ませる（角 12px）。 */
.history{
list-style:none; margin:0;
background:#FFFFFF; border-top:0;
border-radius:16px; padding:8px 10px;
box-shadow:var(--v8-shadow);
}
.history-row{ border-bottom:0; }
/* V9 U5：行の箱はリンクでも div でも同じ。日付は 7em の固定列（「2024年10月」が余裕で入る）で本文の左端が揃う。
リンクのある行だけ本文に細い下線、ホバーで薄空色。URL の無い行は反応しない。 */
.history-item{
display:grid; grid-template-columns:7em minmax(0,1fr); align-items:baseline;
gap:0 clamp(14px,3vw,40px);
padding:clamp(14px,1.8vw,20px) 16px;
border-radius:12px;
}
a.history-item{ transition:background .2s ease; }
a.history-item .history-text{
text-decoration:underline; text-decoration-color:rgba(31,84,104,.35); text-underline-offset:3px;
}
a.history-item:hover{ background:var(--pale); }
a.history-item:hover .history-text{ text-decoration-color:var(--heading-2); }
.history-row:nth-child(odd) .history-item{ background:var(--sky); }
.history-date{
font-family:var(--font-mono); font-size:14px; font-weight:500;
color:var(--heading); white-space:nowrap;
}
.history-text{ font-size:15.5px; line-height:1.8; color:var(--ink); }
/* ---- 会社概要（pptx2 Slide 10） ---- */
/* T5-4：枠と行間の罫を外し、白のカードの中で偶数行を空色の面にする（角 12px、dt 左・dd 右で一続きの帯）。 */
.companyinfo{
margin:0;
display:grid; grid-template-columns:auto 1fr;
gap:0;
background:#FFFFFF;
border:0;
border-radius:var(--r-card);
padding:clamp(20px,2.6vw,32px) clamp(10px,1.5vw,18px);
box-shadow:var(--v8-shadow);
}
.companyinfo dt{
font-size:14px; font-weight:700; color:var(--heading-2);
padding:14px clamp(20px,3.4vw,48px) 14px 16px; border-top:0;
border-radius:12px 0 0 12px;
}
.companyinfo dd{
margin:0; font-size:15px; line-height:1.85; color:var(--ink);
padding:14px 16px; border-top:0;
border-radius:0 12px 12px 0;
}
.companyinfo dt:nth-of-type(even), .companyinfo dd:nth-of-type(even){ background:var(--sky); }
/* ==========================================================================
FOOTER — 濃紺 #17415A（樫木決定 2026-09-12 §2。V8 でも不変）。罫なし（T5）。
========================================================================== */
.site-footer{
padding:clamp(48px,6vw,72px) 0 32px;
background:var(--deeper);
color:var(--on-deep);
/* ページ末尾でオーバースクロールしてもフッターの色が続くようにする */
box-shadow:0 50vh 0 50vh var(--deeper);
}
.footer-top{
display:flex; justify-content:space-between; align-items:flex-start;
flex-wrap:wrap; gap:32px;
padding-bottom:36px;
border-bottom:0;
margin-bottom:24px;
}
.footer-brand{ font-family:var(--font-num); font-weight:800; font-size:28px; color:var(--on-deep); }
/* 濃紺上では #A94B25 が 1.92:1 で成立しない。橙のアクセントは #F6C9A6（7.13:1）へ。★導出 4 */
.footer-brand span{ color:var(--orange-light); }
.footer-tagline{ color:var(--on-deep-2); font-size:14px; margin-top:10px; max-width:38ch; }
.footer-nav{ display:flex; gap:clamp(14px,2vw,26px); flex-wrap:wrap; max-width:560px; }
.footer-nav a{ font-size:14px; color:var(--on-deep-2); transition:color .2s ease; }
.footer-nav a:hover{ color:var(--orange-light); }
/* T7-7：12 → 14 */
.footer-bottom{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
font-family:var(--font-mono); font-size:14px; color:var(--on-deep-2);
}
/* ==========================================================================
§6 デスクトップのレイアウト — 1025px 以上だけ（V9 U1-1／U10 §6）
根拠：ガイド U1「Scope every desktop layout rule to @media (min-width:1025px)」。
1024px 以下は上の基底（V7 の縦積み）がそのまま効く。
========================================================================== */
@media (min-width:1025px){
/* ---- HERO：絵は本文の右で HERO の全高を埋め、右端まで裁ち落とす（T2 ＋ 2026-09-19 の修正）。
・T2 の picture{aspect-ratio:1.12} は HERO が短くなった V8 では絵を狭くし、本文との間に
約 130〜200px の平らな青の帯を残した（1278px 実測）。絵の幅を HERO の高さから導かず、
本文の右隣からビューポート右端までを cover で埋める。aspect-ratio は 1.3 の「上限」
として残す＝約 1680px 以上のワイド画面でだけ効き、上下の切れを 23% までに抑える。
・.hero-visual の左端＝見出しのインクの右端。「つなげる社会へ。」の「。」は右 0.6em が空白なので、
列の箱の右端から 0.6em 戻した位置に置く。マスクの先頭は透明なので文字の下には一切入らない。
・素材は 1254×1254。絵の箱は横長なので上下が合計 17〜19% 切れる。object-position の Y=16% で
上の切れを 2.7〜3.0% に抑えて全員の頭を守り、切れは下（周辺の人物の脚・椅子の脚）に寄せる。
・左だけ一段の広いフェード（px 指定：透明 0 → .22 @36px → .62 @110px → .9 @190px → 不透明 @260px）。
・2026-09-25 裁定 #2：U10 §6 の値（1.12／50% 38%／% 指定のフェード）は採らない。 */
.hero-copy{ max-width:var(--hero-copy-w); }
.hero-visual{
position:absolute;
top:0; right:0; bottom:0;
left:calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--hero-copy-w) - 0.6 * var(--hero-h1));
width:auto;
display:flex; justify-content:flex-end; align-items:stretch;
}
.hero-visual picture{
height:100%;
aspect-ratio:1.3; max-width:100%;
margin-left:auto;
}
.hero-illus{
width:100%; height:100%;
object-fit:cover;
object-position:50% 16%;
-webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 36px, rgba(0,0,0,.62) 110px, rgba(0,0,0,.9) 190px, #000 260px);
mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 36px, rgba(0,0,0,.62) 110px, rgba(0,0,0,.9) 190px, #000 260px);
-webkit-mask-composite:source-over;
mask-composite:add;
}
/* ---- 本文と図を横に並べる（V7 T2 → V8 T4）
根拠：9/6 議事 00:24:34 樫木「文字で下行かないと画像が見れない」／00:27:22 滝内「文章も画像も
その1ページで見れるような感じにする方が見やすい」／9/13 定例 00:13:53「ガタガタなんすよね」
本文と図は同じ線から始まる（上揃え）。図は引き伸ばさない。切り抜くのは樫木が位置を決めた自立だけ。
並びは 自立=右／目指す社会=右／WellDeck=左。DOM 順は「本文 → 図」で固定し、左右の入れ替えは order だけ。 */
.section-media{
display:grid;
grid-template-columns:minmax(0,46fr) minmax(0,54fr);
gap:var(--media-gap);
align-items:start;
min-height:0;
}
.section-media .fig{ margin:0; }
.section-media .fig img{ max-height:none; object-fit:initial; }
.section-media .fig figcaption{ position:static; }
/* WellDeck だけ図が左（T4）。2026-09-25 裁定 #6：この order も 1025px 以上だけ。 */
.section-media--fig-left .fig{ order:-1; }
/* 自立（T4-2）：図が本文ブロックの高さを埋める。切り抜きであって引き伸ばしではない。
1440px 実測目標：行 356px・図 657px 幅、横の約 7% が主に左で切れる（object-position 60% 50%）。 */
.section-media--cover{ align-items:stretch; }
.section-media--cover .fig{ display:flex; flex-direction:column; }
.section-media--cover .fig picture{ flex:1 1 0; min-height:0; display:flex; }
.section-media--cover .fig img{
flex:1 1 0; min-height:0;
height:100%; width:100%;
object-fit:cover; object-position:50% 50%;
}
#independence .section-media{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
#independence .fig img{ object-position:60% 50%; }
/* 課題（T7-1・樫木 9/16 案B）：全幅 1 行の見出しの下に、本文 35%｜グラフ 65%（約 700px）。両者は上揃え。 */
#problem .section-heading{
max-width:none; white-space:nowrap;
font-size:clamp(26px,2.5vw,36px);
}
.section-media--stack{
display:grid;
grid-template-columns:minmax(0,35fr) minmax(0,65fr);
gap:var(--media-gap);
align-items:start;
}
.section-media--stack .section-media-body{ margin:0; }
.section-media--stack .prose{ max-width:none; }
.section-media--stack .fig{ max-width:none; margin:0; display:block; }
}
/* ==========================================================================
Responsive — laptop
========================================================================== */
@media (max-width:1200px){
.nav-cta{ display:none; }
.nav-tab--mobile{ display:block; } /* V9 U1-3：CTA が隠れる幅ではメニューが「お問い合わせ」を持つ */
}
/* ==========================================================================
§7 Responsive — tablet（V9 U1-2／U2／U10 §7）
1024px 以下は基底の縦積み。ここは HERO の絵の流し方と余白の補正だけ。
上限は 1024.98px（2026-09-25 承認）：1024px と §6 の 1025px の間の小数幅（1024.5px など）が
どちらの規則にも入らない隙間を無くす。
========================================================================== */
@media (max-width:1024.98px){
/* HERO：見出し・リード・リンクの下に絵を全幅で流す（ガイド U1「hero text then picture」）。
V7 は絵を次のセクションの下へ負のマージンで引き込んでいたが、V9 は HERO の下余白を 0 にして
絵の下端＝HERO の下端にする（U10 §7）。
2026-09-25 裁定 #7：幅は 100vw＋translate ではなく 100%（.hero の直下なので同じ全幅。横あふれを起こさない）。
V10 U1／根拠：2026-10-04 客先定例 00:08:50 滝内代表（スマホで HERO の絵の上部にグラデーションが残っている）・ガイド U1。
V7 から引き継いでいた上下のフェード（mask-image：上 20%・下 24%）を削除。絵は上の濃紺・下の 課題 の温白と直線の縁で接する。
ガイドの上書き規則（max-width:1024px で mask を none）ではなく元の 2 行を削除した（ガイドが認める方法。上書きだと
この block の上限 1024.98px との間の小数幅にフェードが残る。2026-10-04 承認）。デスクトップの左のフェードは §6 のまま。 */
.hero{ padding-bottom:0; }
.hero-visual{
display:block; width:100%;
margin:24px 0 0;
}
.hero-illus{ width:100%; height:auto; }
/* 図は本文の 24px 下（ガイド V10 U6 §7＝V9 U10 §7「.section-media .fig{ margin-top:24px; }」）。
V10 U2 で見つけた V9 からの食い違い：基底の .section-media .fig{margin:24px 0 0} は、後ろにある
.fig, .band .fig{margin:0}（同じ詳細度 0,2,0）に負け、帯の 自立・WellDeck だけ図が本文に接していた（0px）。
引用カードが無くなり本文の最終行が図に接して見えるため、ガイドどおりこの block に置いて勝たせる
（ガイド U2 の 412px の AFTER の画像は本文と図の間が 24px。2026-10-04）。課題・目指す社会は従来から 24px で変化なし。 */
.section-media .fig{ margin-top:24px; }
.section-pad{ padding:36px 0; } /* U2-2：タブレット・スマホは 36px */
.company-head--next{ margin-top:40px; } /* U2-3 */
.members-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,18px); }
}
/* ==========================================================================
Responsive — ナビ（7 タブ）
ナビだけは他より早くハンバーガーへ切り替える（V7 実測：8 タブ＋ブランド名は 820px で横あふれ）。
T5：開いたメニューの罫も出さない。行の分離は行間で取る。
========================================================================== */
@media (max-width:900px){
.nav-tabs{
position:fixed; top:var(--nav-h); left:0; right:0;
background:var(--nav-surface);
border-bottom:0;
flex-direction:column; gap:0;
padding:8px 0;
transform:translateY(-12px);
opacity:0; visibility:hidden;
transition:opacity .25s ease, transform .25s ease, visibility .25s;
max-height:calc(100vh - var(--nav-h));
overflow-y:auto;
}
.nav-tabs.open{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-tabs a{ padding:15px var(--gutter); border-bottom:0; width:100%; font-size:15px; }
.nav-tabs a::after{ display:none; }
.nav-toggle{ display:flex; }
}
/* ==========================================================================
Responsive — mobile
========================================================================== */
@media (max-width:760px){
:root{ --nav-h:64px; --r-card:20px; }
body{ font-size:16px; }
/* V9 U1-2：見出し clamp(34px,9vw,40px)、リード 16px、2 本のリンクは 1 行に並べる（下線つきテキストなので
幅いっぱいに伸ばさない。2026-09-19 の「縦に積む」回避策は U10 §7 の 1 行が置き換える）。 */
/* V10 U3：下限を 34px → 28px（ガイド U3-2）。320px で 9vw＝28.8px、「つなげる社会へ。」8 字×28.8px＝230px が
本文幅 272px に収まり 2 行になる（34px では「へ。」が 3 行目に落ちた）。378px 以上は V9 と同じ値。 */
.hero-headline{ font-size:clamp(28px,9vw,40px); }
.hero-sub{ font-size:16px; line-height:1.9; margin-bottom:28px; }
.hero-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.hero .btn{ justify-content:flex-start; }
/* V10 U3：セクション見出しは 24px（ガイド U3-2。最長の句「足りない時代」が」8 字×24px＝192px）。全見出しに効く。
帯の上の橙の見出しは 4.27:1 で大きい文字の基準だけ合格し、24px（18pt）はその下限ちょうど。これより小さくしないこと。 */
.section-heading{ font-size:24px; }
/* 課題見出しの 1 行固定は §6（1025px 以上）だけになったので、ここでの解除は不要。 */
.form-row{ grid-template-columns:1fr; gap:0; margin-bottom:0; }
.form-row .form-field{ margin-bottom:clamp(18px,2.2vw,24px); }
.members-grid{ grid-template-columns:1fr; }
/* 会社概要は 1 列に積む。偶数行の空色は dt（上）と dd（下）で一続きの面にする（U10 §7）。 */
.companyinfo{ grid-template-columns:1fr; gap:0; }
.companyinfo dt{ padding-bottom:4px; border-radius:12px 12px 0 0; }
.companyinfo dd{ border-radius:0 0 12px 12px; }
/* 沿革：日付を本文の上に（V7 の規則を .history-item に付け替え。U10 §7） */
.history-item{ grid-template-columns:1fr; gap:2px 0; padding:12px 14px; }
.member-bio{ text-align:left; } /* U6-3：V7 は中央揃えだったが左のまま */
.footer-top{ flex-direction:column; }
}
/* HERO リードの句単位 nowrap：最長の句「医療情報6次化プラットフォームを軸に、」は 18px × 19 字 = 342px。
400px 以下（本文幅 352px 未満）では句の途中で折り返すことを許す。それ以上の幅では句割りが効く。 */
@media (max-width:400px){
.nb{ white-space:normal; } /* 見出しの .nb は .section-heading .nb（詳細度 0,2,0）が勝つので nowrap のまま（V10 U3） */
}