/* =============================================================================
   LENKER スキン層（2026-09-06）

   参照 https://nautilus-capital.jp/ の実装を採寸して作った共通層。
   **色はトークン層（site_tokens.py 生成）が正本**で、ここは形と組みだけを持つ。
   両区画（/gyosei/ と /consulting/）が最後に読み込む。個別CSSより後に置くこと。

   採寸で分かった「暗くて締まって見える」の正体は、原色を濃くすることではなく
   次の3つだった。
     ① 地が純白ではない（#F8F8F5 のわずかに温かいオフホワイト）
     ② 本文が黒ではなく黒緑（#12211D）
     ③ 罫が色ではなく不透明度（ink の12%）で、ほとんど見えない細さ
   加えて、和文の行送りが 1.95〜2.05 と広く、小ラベルは等幅・大文字・字間.18em。
   ============================================================================= */

:root {
  /* --- 参照サイトの語彙。値はトークン層から引く --- */
  --paper:    #F4F4E6;
  --paper-2:  #E5E5C3;
  --sage:     #E9F0EA;
  --forest:   var(--navy-soft);
  --forest-2: #24463C;
  --line:     color-mix(in srgb, var(--navy) 12%, transparent);
  --line-d:   color-mix(in srgb, #ffffff 16%, transparent);

  --jp:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --en:   "Geist", "Zen Kaku Gothic New", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 既存CSSが参照している名前を上書きして、地と罫を作り替える */
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --color-bg: var(--paper);
  --color-surface: var(--paper-2);
  --color-rule: var(--line);
  --font-display: var(--jp);
  --font-body: var(--jp);
  --weight-display: 700;
  --leading-body: 1.75;
  --leading-heading: 1.6;
}

html, body {
  background: var(--paper);
  color: var(--navy);
  font-family: var(--jp);
  font-size: 17.5px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 見出し：明朝をやめ、ゴシックの太みと字間で格を出す ------------------- */
h1, h2, h3, h4,
.section-title, .page-title, .article-title, .toc-title, .card-no,
.compare-table thead th, .display, .h2, .h3 {
  font-family: var(--jp);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
}
h1, .display { font-weight: 900; letter-spacing: .01em; }

/* 級数は参照に合わせて抑える（見出しを大きくせず、余白と行送りで効かせる） */
.section-title { font-size: clamp(26px, 2.8vw, 36px); }
.page-title    { font-size: clamp(28px, 3vw, 36px); }
.hero-copy     { font-size: clamp(36px, 5vw, 57px); line-height: 1.6; }
.article-title { font-size: clamp(28px, 3vw, 36px); }
p, li, dd, td  { font-size: clamp(15px, 1.35vw, 17px); }

/* --- 小ラベル：等幅・大文字・字間広め。地の上では AA を満たす濃い金を使う ---
   参照は地の上でも原色の金を使っているが、それだと 2:1 前後で AA を割る。
   ここは実測を優先して --gold-text（地に対して 4.5:1 以上）に置き換えている。 */
.section-en, .eyebrow, .article-date, .mono, .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}
.section-en, .eyebrow { color: var(--gold-text); }

/* 参照はセクション見出しの下に棒を引かない。金の下線をやめて余白で切る */
.section-title::after { display: none !important; }
.section-title, .page-title { text-align: left; }

/* --- 罫：色をやめて不透明度で引く ---------------------------------------- */
hr, .card, .biz, .case-item, .article-card, .company-table td, .company-table th,
.compare-table td, .compare-table th, .deflist dt, .deflist dd, .faq, .field {
  border-color: var(--line);
}
.card, .article-card, .biz, .case-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: none;
}
.card::before, .article-card::before { display: none !important; }

/* --- ボタン：ピル形 ------------------------------------------------------- */
.btn, .btn-cta, .btn-ghost, .btn-light, .btn-primary, .btn-outline, .btn-sm, .btn-lg {
  border-radius: 9999px;
  font-family: var(--jp);
  font-weight: 700;
  letter-spacing: .06em;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-cta, .btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn-cta:hover, .btn-primary:hover { background: var(--forest); border-color: var(--forest); }
.btn-ghost, .btn-outline { background: transparent; border: 1px solid var(--line); color: var(--navy); }

/* --- 濃色面 --------------------------------------------------------------
   **ヒーローの写真を背景色で塗り潰さない。** 両区画とも hero.jpg を敷いて
   .hero-veil で締める作りなので、触るのはスクリムのほうにする。
   旧スクリムは rgba(22,35,63)（旧紺）と rgba(26,26,26) をべた書きしていた。
   新しい ink #12211D = rgba(18,33,29) に置き換え、参照サイトの暗さへ寄せて
   全体に濃くしている。4段構成（上を締める→窓→本文帯→下端で最濃）は
   失敗と対策_HP §28-2 のとおり維持する。 */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero-veil {
  background:
    linear-gradient(to bottom, rgba(18,33,29,.62) 0%, rgba(18,33,29,.24) 24%,
                               rgba(18,33,29,.84) 52%, rgba(18,33,29,.97) 100%),
    linear-gradient(to right,  rgba(18,33,29,.86) 0%, rgba(18,33,29,.34) 54%,
                               rgba(18,33,29,0) 100%);
}
.hero-lead, .section-en.on-dark { color: var(--gold-on-dark); }
.site-footer { border-top: 1px solid var(--line); }

/* 淡い緑の面。参照の .band に相当する区切り */
.section-alt { background: var(--sage); }

/* --- 意味の色：地がオフホワイトになったので NG の枠は段9へ ---------------- */
.risk-col.is-ng { border-color: var(--red-9); }

/* --- ロゴのプレースホルダ ------------------------------------------------- */
.logo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 168px; height: 40px; padding: 0 .9rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: transparent;
  color: var(--navy);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.hero .logo-ph, .site-footer .logo-ph { border-color: var(--line-d); color: #fff; }

/* =============================================================================
   構造（2026-09-03 追加。参照サイトの実測値）

     .w      max-width:1440px / padding:0 32px      ← 器は広い
     .sec    padding:130px 0（狭い画面は 84px 0）    ← 節の余白は大きい
     .lab    mono・大文字・10.5px・字間.2em・ink-3   ← 見出しの上の小ラベル
     .srows  gap:96px                                ← 行どうしの間隔
     .nl     border-top:1px var(--line) の行リスト

   器を 1080/1280 → 1440 へ広げるので、**本文の行長は別に抑える**。
   参照も器は1440だが、読み物の塊は 760〜1000px に収めている。
   ============================================================================= */

:root {
  --max: 1440px;
  --width-page: 1440px;
  --measure: 760px;      /* 本文の行長。器の幅とは別に持つ */
}

.container, .page {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 32px;
}

/* 節の余白。参照の .sec と同じ。罫では区切らず余白で切る */
.section, section.section { padding-block: 132px; }
.section + .section { border-top: 0; }
.page-head { padding: 148px 0 0; }

/* 見出しの組み：中央揃えをやめ、左の「小ラベル → 見出し」にする */
.section-en, .section-title, .section-desc, .page-title, .section-head {
  text-align: left;
  margin-inline: 0;
}
.section-en, .eyebrow {
  color: var(--muted, var(--color-ink-muted));
  display: inline-flex; align-items: center; gap: 12px;
  letter-spacing: .2em;
}
.section-title { margin-top: 14px; }
.section-desc  { margin-top: 22px; max-width: var(--measure); }

/* 読み物の行長を抑える */
.article-body, .article-body p, .article-body li,
.section-desc, .lede, .hero-sub, .toc, .article-note {
  max-width: var(--measure);
}
.article-body { margin-inline: 0; }

/* 行リスト：罫は不透明度、ホバーで字下げが動く（参照 .nl / .jobs） */
.case-list, .column-cards, .cards, .cards-3 { gap: 28px; }
.link-rows { border-top: 1px solid var(--line); }
.link-rows > * { border-bottom: 1px solid var(--line); padding: 26px 6px; transition: background .3s, padding-left .3s; }
.link-rows > *:hover { background: var(--paper-2); padding-left: 16px; }

@media (max-width: 900px) {
  .section, section.section { padding-block: 84px; }
  .page-head { padding-top: 104px; }
  .container, .page { padding-inline: 20px; }
}

/* 濃色のヒーローの上のボタン。地の色（--navy）で塗ると写真に溶ける。
   参照サイトは白の塗り＋白枠のピルなので、それに合わせる（2026-09-03 レンダリングで発覚）。 */
.hero .btn-cta, .page-hero .btn-cta,
.hero .btn-primary, .page-hero .btn-primary {
  background: #fff; color: var(--navy); border-color: #fff;
}
.hero .btn-cta:hover, .hero .btn-primary:hover { background: var(--paper-2); border-color: var(--paper-2); }
.hero .btn-light, .hero .btn-ghost, .hero .btn-outline,
.page-hero .btn-light, .page-hero .btn-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
}
.hero .btn-light:hover, .hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* =============================================================================
   金の使い方を参照に合わせる（2026-09-03 レンダリングで発覚）

   参照サイトは金を「極小のラベル・点・濃色面の上の文字」にしか使わない。
   こちらは面として大きく使っている箇所が残っており、そこだけ浮いていた。
     ・比較表の自社列ヘッダ（金ベタ）      → forest の面へ
     ・CTA帯のボタン（金ベタ）             → 白の塗りへ（濃色面の上なので）
     ・カードの上罫 3px 金                  → 罫なし（面と余白で切る）
     ・バッジ・料金タグの金ベタ＋白文字     → 白地 2.0:1 で AA も割っていた
   ============================================================================= */

.compare-table thead th.col-us { background: var(--forest); color: #fff; }
.compare-table td.col-us       { background: var(--sage); }

.cta-band .btn-cta, .contact .btn-cta, .contact .btn-primary {
  background: #fff; color: var(--navy); border-color: #fff;
}
.cta-band .btn-cta:hover, .contact .btn-cta:hover { background: var(--paper-2); border-color: var(--paper-2); }

.card { border-top-width: 1px; border-top-color: var(--line); background: var(--paper); }
.card:hover { box-shadow: none; transform: none; }
.card, .biz, .article-card, .case-item, .article-card-thumb, .biz-thumb { overflow: hidden; }
.card-no { color: var(--gold-text); font-family: var(--mono); font-size: 1.1rem; letter-spacing: .1em; }

.badge-open, .fee-card .fee-type { background: var(--gold-text); color: #fff; }
.page-title::after { display: none !important; }

/* =============================================================================
   2026-09-03 レンダリング指摘の修正（2件）
   ============================================================================= */

/* ① コラム一覧の本文が器の端まで伸びる。
   器を1440pxへ広げたぶん、`.post-item` の右カラム（1fr）が約1,080pxになり、
   1行が長すぎて読めない。**行長は器と別に持つ**という §8 の方針をここにも当てる。 */
.post-body, .post-title, .post-excerpt { max-width: var(--measure); }
.post-item { align-items: start; }

/* ② お問い合わせのラベルが地に埋もれる。
   `.contact-form label` などは `color:#fff` を直接持っており、濃色帯（.contact）の
   中にある前提で書かれていた。単独ページではフォームが地の上に出るため、白い文字が
   白い地に乗って読めない。**これは元サイト akiba-grants.com でも同じ状態**
   （2026-09-03 に本番を実測して確認）。既定を地の上の色にし、濃色帯の中だけ白へ戻す。 */
.contact-form label,
.contact-tel, .contact-tel a,
.contact-consent, .contact-consent a { color: var(--navy); }
.contact-tel a { border-bottom-color: color-mix(in srgb, var(--navy) 45%, transparent); }
.contact-note { color: var(--gold-text); }

.contact .contact-form label,
.contact .contact-tel, .contact .contact-tel a,
.contact .contact-consent, .contact .contact-consent a { color: #fff; }
.contact .contact-tel a { border-bottom-color: rgba(255,255,255,.5); }
.contact .contact-note { color: var(--gold-on-dark); }

/* パンくずは等幅・大文字にしない。**和文を uppercase + 字間.18em の 10.5px にすると
   読めなくなる**（2026-09-03 レンダリングで発覚）。英字ラベル用の型を和文に当てない。 */
.breadcrumb {
  font-family: var(--jp);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted, var(--color-ink-muted));
}
.breadcrumb a { color: inherit; }

/* =============================================================================
   2026-09-05 追補：実測で残っていた不備を潰す
   ============================================================================= */

/* --- 下層ページのヒーロー：写真の上の文字が AA を割っていた ------------------
   contrast_check の実測（/consulting/hojokin/・/consulting/100oku-sengen/）：
     .lede（白82%）      最悪 3.3:1
     .eyebrow（金10.5px） 最悪 3.8:1
   原因はスクリムの中間停止点が .56 と薄く、そこだけ写真が明るく出ること。
   色も旧 rgba(26,26,26) のままだったので、新しい ink #12211D へ寄せて濃くする。
   写真は潰さず、スクリムのほうを締める（失敗と対策_HP §28-2 の方針）。 */
.pagehero {
  background:
    linear-gradient(150deg, rgba(18,33,29,.90) 0%, rgba(18,33,29,.80) 50%,
                            rgba(18,33,29,.92) 100%),
    var(--pagehero-img) center / cover no-repeat;
}
/* 白82%をやめる。半透明は「トークンで決めた色」では担保できない（§28-3）。 */
.pagehero .lede { color: #fff; }

/* --- 主体表記の定型ブロック --------------------------------------------------
   コラム作成プレイブック §11.1 の改変禁止ブロック。5ページで使われているのに
   CSS の定義がどこにも無く、素の <p> で描かれていた（2026-09-05 実測）。
   免責の前半（準拠時点・出典）と読み分けられるよう、罫で切って少し落とす。 */
.article-note .subject-block {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--muted, var(--color-ink-muted));
}

/* --- 比較表：狭いセルで auto-phrase が「1字だけの先頭行」を作る（§3）--------
   `&nbsp;` では止まらない（空白ではなく文節の境界で折られている）。
   `word-break: normal` も試したが、別のセルで新しい孤立行を作ったので撤回した。

   原因はセル幅に対して本文が約10px 溢れることそのもの。@768px で col-us の
   内寸は 204.8px（240px − 左右 1.1rem）に対し「○ 可（行政書士の独占業務）」が
   約214px ある。**級数を1段下げると収まり、折り返し自体が起きなくなる。**
   14px は本文の下限（13px）より上なので可読性は保てる。 */
.compare-table th, .compare-table td { font-size: var(--text-14); }

/* =============================================================================
   2026-09-06｜D/E/F（fable5 の3方向）の検討から取り込んだ4点

   6案の造形は既存を上回らなかった。取ったのは「値の決め方」の側だけ。
   ここは skin 層＝全ページが最後に読むので、区画ごとのCSSより後に効く。
   ============================================================================= */

/* ── ① 読み続ける本文の行長を、導入文と別に持つ ──────────────────────
   --measure 760px は本文 17px で **約44字**。2〜3行で終わる導入文には適するが、
   2,000〜6,000字の記事本文には長い。D/E/F の6案が独立に 36字／38字／40字へ
   着地し、藤紫側の3案も 36〜42em だった。**6案とも現状より短い側**。
   トップの導入文・コラム一覧の抜粋は 760px のまま動かさない。 */
:root { --measure-read: 680px; }

/* **コンテナは狭めない。** 2026-09-06 に `.article-body` と `.read-width` ごと
   660px にしたところ、中の表・図・記事一覧まで縮んで孤立行が8件出た
   （page_metrics 実測。変更前0件）。狭めてよいのは「行を追って読み続ける
   要素」だけで、照合する表・図・カード一覧は器の幅を使わせる。 */
.article-body > p, .article-body > ul, .article-body > ol,
.article-body > dl, .article-body > blockquote,
.article-body section > p, .article-body section > ul, .article-body section > ol,
.prose > p, .prose > ul, .prose > ol, .prose > blockquote,
.prose section > p, .prose section > ul, .prose section > ol {
  max-width: var(--measure-read);
}
/* 表・図・一覧・目次は対象外（上で器を狭めていないので、指定も要らない） */

/* ── ② 数字の組みを体系として持つ ────────────────────────────────
   tabular-nums はこれまで10箇所へ個別に書かれていた（気づいた人が足した状態で、
   規約になっていない）。E案の切り方を採る ──「**表・料金・日付・数値ラベルは
   桁を縦に揃える。文章中の数字には掛けない**」。補助率・上限額・回次・年度が
   主題のサイトなので、揃うかどうかは読み取り速度に直結する。 */
table, .num, .amount, .price-row .amount, .stat, .stat-num, .news-date,
.article-date, .sched-table td.date, .case-facts .v, time,
.compare-table td, .compare-table th, .company-table td, .company-table th {
  font-variant-numeric: tabular-nums lining-nums;
}
/* 文章中は等幅にしない（字面が不揃いに見えるため） */
.article-body p, .article-body li, .prose > p, .prose > li, .lede, .section-desc {
  font-variant-numeric: normal;
}

/* ── ③ focus を状態専用の色にする ────────────────────────────────
   これまで :focus-visible は --color-accent（金 #D8A147）だった。金は
   見出し下の罫・カード上辺・CTA面・注記の左罫にも使っているので、
   **金が光っているとき、それがフォーカスなのか装飾なのか判別できない**。
   --color-focus はこの用途にだけ使う（装飾に流用しない）。
   非文字3:1 の実測：地 3.60／淡面 3.32／sage 3.30／forest 3.52／navy 4.35。 */
:root { --color-focus: #A7792B; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 個別に金を指定していた箇所を、状態色へ寄せる（詳細度が高いので名指しで上書き） */
.case-tabs button:focus-visible,
.case-item > summary:focus-visible,
.slider-dots .dot:focus-visible,
.nav-item a:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
.contact-form input:focus, .contact-form textarea:focus,
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--color-focus); outline-offset: 1px;
}
/* 金の面の上だけは真鍮が沈む（金 on 金 1.66）。ここは濃色で縁取る */
.btn-cta:focus-visible, .contact-form .req:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}

/* ── ④ 表を「用途」で2種類に分ける ──────────────────────────────
   実測すると、いま様式が **区画で偶然分かれている**：
     行政書士側 `.article-body th,td` … 全罫線＋th に面      ＝ 照合の表
     株式会社側 `.prose th,td`        … 横罫のみ・th は薄い ＝ 読み物の表
   用途で分けるべきものが、置き場所で分かれている状態。両区画で同じクラスが
   同じ見た目になるよう、ここに1組だけ定義する。**既定の見た目は変えない**
   （どちらを既定にするかは本人判断が要るため。適用は指示を待つ）。 */

/* 照合の表：縦罫あり・全罫線・行 hover。制度比較・料金表・診断結果に使う */
.table--data { width: 100%; border-collapse: collapse; }
.table--data th, .table--data td {
  border: 1px solid var(--line); padding: .6rem .8rem;
  text-align: left; vertical-align: top;
}
.table--data thead th { background: var(--paper-2); color: var(--navy); font-weight: 700; }
.table--data td.num, .table--data th.num { text-align: right; white-space: nowrap; }
.table--data tbody tr:hover { background: var(--sage); }

/* 読み物の表：天地に強罫・横罫のみ・縦罫なし。本文の流れの中で読ませる表に使う */
.table--prose { width: 100%; border-collapse: collapse; }
.table--prose th, .table--prose td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem .9rem .7rem 0; text-align: left; vertical-align: top;
}
.table--prose thead th { border-bottom: 2px solid var(--navy); font-weight: 700; color: var(--navy); }
.table--prose tbody tr:last-child > * { border-bottom: 0; }
.table--prose td.num, .table--prose th.num { text-align: right; white-space: nowrap; }

/* ── ④-2 既定を「照合の表」に統一する（2026-09-06 本人決定）────────────
   区画で偶然分かれていた様式を、用途の側へ寄せる。扱う表の大半が制度比較・
   料金・要件の一覧＝**桁と行を追って照合する表**なので、全罫線を既定にする。
   株式会社側（.prose）の横罫のみだった表に縦罫が付く。
   本文の流れの中で読ませたい表だけ `.table--prose` を付けて外す。 */
.article-body table, .prose table, .table--data {
  width: 100%; border-collapse: collapse;
}
.article-body th, .article-body td,
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: .6rem .8rem;
  text-align: left; vertical-align: top;
}
.article-body thead th, .prose thead th,
.article-body th[scope="col"], .prose th[scope="col"] {
  background: var(--paper-2); color: var(--navy); font-weight: 700;
}
.article-body tbody tr:hover, .prose tbody tr:hover { background: var(--sage); }
.article-body td.num, .article-body th.num,
.prose td.num, .prose th.num { text-align: right; white-space: nowrap; }

/* 例外を明示したときだけ横罫へ戻す */
.article-body table.table--prose th, .article-body table.table--prose td,
.prose table.table--prose th, .prose table.table--prose td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem .9rem .7rem 0;
}
.article-body table.table--prose thead th,
.prose table.table--prose thead th { background: none; border-bottom: 2px solid var(--navy); }
.article-body table.table--prose tbody tr:hover,
.prose table.table--prose tbody tr:hover { background: none; }

/* =============================================================================
   2026-09-06｜トップ調整パネルで確定した全ページ共通値

   既存ページの情報構造と本文は変えず、色・書体・級数・行長・節間・
   フッター・カード画像を共通スキンから揃える。
   ============================================================================= */
:root {
  --ui-body-size: 17.5px;
  --ui-body-lh: 1.75;
  --ui-h-size: 36px;
  --ui-hero-size: 57px;
  --ui-footer-size: 15.5px;
  --ui-block-gap: 120px;
  --ui-thumb-h: 180px;
  --ui-sec: 132px;
  --ui-hero-pad: 124px;
  --fig-h: 330px;
  /* Business 写真幅: 39.5%（試作のフィボナッチ段組み用） */
  --biz-text-tail: 5.890fr;
  --biz-photo: 7.110fr;
  /* Services 写真幅: 39.7%（試作のフィボナッチ段組み用） */
  --service-photo-tail: 2.146fr;
  --service-text: 10.854fr;
  --fig-tone: saturate(.68) brightness(.86) contrast(1.06);
  --fig-veil: color-mix(in srgb, var(--navy) 16%, transparent);
}

/* 本文と見出しは同じ和文書体。役割は級数と太さで分ける。 */
html, body { font-family: var(--font-body); font-size: var(--ui-body-size); line-height: var(--ui-body-lh); }
p, li, dd, td { font-size: 1rem; }
h1, h2, h3, h4,
.section-title, .page-title, .article-title, .toc-title,
.display, .h2, .h3 { font-family: var(--font-display); }
.section-title, .h2 { font-size: clamp(26px, 2.8vw, var(--ui-h-size)); }
.hero .display, .hero-copy { font-size: clamp(36px, 5vw, var(--ui-hero-size)); }
.pagehero .display { font-size: clamp(28px, 3vw, var(--ui-h-size)) !important; }
.hero-in { padding-block: var(--ui-hero-pad); }

/* 節間はデスクトップだけ確定値へ。狭幅は既存の84pxを維持する。 */
.section, section.section { padding-block: var(--ui-sec); }

/* 区画ごとの元CSSより後に読み、両区画のフッターを同じ級数にする。 */
.site-footer, .site-footer p, .site-footer li, .site-footer a,
.site-footer span, .footer-inner { font-size: var(--ui-footer-size); }

/* 一覧カードの画像高を180pxに統一。横幅は各ページの列数に追随する。 */
.article-card img, .article-card-thumb,
.case-item .case-thumb, .case-list:not(.cols-2) .case-item .case-thumb {
  width: 100%; height: var(--ui-thumb-h); object-fit: cover;
}

/* 写真付き説明行は、パネルで確定した「画像と文字の間」を共通化する。 */
.biz:has(> .body) { column-gap: var(--ui-block-gap); }
.biz:has(> .body) > img { height: var(--fig-h); aspect-ratio: auto; object-fit: cover; }

/* 明るくした濃色面では従来の --red-4 が4.5:1をわずかに割る。 */
.form-status.err { color: var(--red-3); }

@media (max-width: 900px) {
  .section, section.section { padding-block: 84px; }
}
@media (max-width: 760px) {
  .hero-in { padding-block: calc(var(--ui-hero-pad) * .5); }
  .biz:has(> .body) > img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .case-item .case-thumb, .case-list:not(.cols-2) .case-item .case-thumb { height: 150px; }
}

/* ===== 型の段（2026-09-04）。名前は px、値は rem。
   正本は _migrate_lenker.py の TYPE_SCALE。font-size をここへ寄せる。
   **株式会社区画の実数と同じ段に乗っている**（.875 / 1 / 1.0625 / 1.125 /
   1.25 / 1.375 / 1.625rem）。 ===== */
:root {
  --text-12: 0.75rem;   /* 12px */
  --text-13: 0.8125rem;   /* 13px */
  --text-14: 0.875rem;   /* 14px */
  --text-15: 0.9375rem;   /* 15px */
  --text-16: 1.0rem;   /* 16px */
  --text-17: 1.0625rem;   /* 17px */
  --text-18: 1.125rem;   /* 18px */
  --text-20: 1.25rem;   /* 20px */
  --text-22: 1.375rem;   /* 22px */
  --text-26: 1.625rem;   /* 26px */
  --text-29: 1.8125rem;   /* 29px */
}