@charset "UTF-8";
/* ==========================================================================
   MAIFYラボ 公式HP（案件 I-2026-01-005）
   実装の正：DESIGN.md v1.0（B案 大型タイポ・余白 ＋ C案 図解主導／白ベース厳守）
   ※v0.x の方針（明朝見出し・言い切り見出し・ラベル付き言明）は破棄済み。
   構成：
     00. @font-face（セルフホスト・技術部の納品待ちのためコメントアウト）
     01. トークン（色 / 型スケール / 間隔）
     02. リセット
     03. ベース（body・見出し・リンク・フォーカス）
     04. レイアウト（コンテナ・セクション帯）
     05. コンポーネント：CTAボタン＋法務注記
     06. ヘッダー
     07. ファーストビュー（＋ §7-1 ページロード）
     08. 3ステップ図（署名要素・§6-1）
     09. お受けできること（3カード）
     10. 料金の目安（4プランカード・§6-3）
     11. ご相談の進め方（4ステップ・番号を使う唯一の場所）
     12. 3つの姿勢
     13. 代表について／運営者情報
     14. クロージングCTA
     15. SNS
     16. フッター
     17. スクロールリビール（§7-2）＋ 保険（§7-4）
     18. 印刷
   ========================================================================== */


/* ==========================================================================
   00. @font-face — 本テーマでは assets/fonts/fonts.css に分離済み
   （BIZ UDPゴシック 400/700・unicode-range サブセット242本・OFL 1.1・セルフホスト）
   functions.php の maify_enqueue_assets() が本ファイルより先に読み込む。
   ⚠ 外部CDN（Google Fonts 等）へのリクエストは禁止。同一オリジンのみ。
   ⚠ M PLUS 2（ディスプレイ 800）は未セルフホスト。DESIGN.md §4-2 の
     「未設置でもフォールバックで成立する」に従い、游ゴシックUI／ヒラギノに落とす。
   ========================================================================== */


/* ==========================================================================
   01. トークン（§3-1 / §4-3 / §5-1）
   ========================================================================== */
/* ⚠ 値の正は theme.json（settings.color.palette / typography / spacing / custom）。
   ここは「theme.json のプリセット変数を、短い設計名にエイリアスするだけ」の層である。
   数値をここに直接書き足さないこと。書き足すと二重管理になり必ずズレる。

   var(--wp--preset--…, ＜literal＞) の第2引数は保険：
   グローバルスタイル（theme.json 由来のインラインCSS）が
   キャッシュ系プラグイン等で欠落しても、色が全部消える事故を防ぐ。 */
:root {
  /* --- 面：白が支配色。濃色を面で使わない --- */
  --paper:        var(--wp--preset--color--paper,        #FFFFFF);
  --paper-warm:   var(--wp--preset--color--paper-warm,   #FFF7ED);
  --paper-sunken: var(--wp--preset--color--paper-sunken, #FAFAF9);

  /* --- 文字（実測コントラストを併記） --- */
  --ink:          var(--wp--preset--color--ink,          #2F3A42);  /* 白 11.64 / クリーム 10.96 / 淡橙 9.78 */
  --ink-soft:     var(--wp--preset--color--ink-soft,     #5E6D77);  /* 白  5.34 / クリーム  5.03 ／※淡橙 4.49 のため淡橙上では使わない */
  /* 🔴 --ink-soft を使ってよいのは「添え物」だけ（CEO決裁 2026-08-13・DESIGN §3-2）。
        添え物＝注記・キャプション・項目ラベル・パンくず・フッター・番号や記号・フォームのUI補助。
        見出しの下の説明文・カードの説明文など「読ませたい文」は --ink を使う。
        ⚠ クラス名（__sub / __desc / caption）ではなく中身の役割で判断すること。
        階層は色の濃淡ではなく、文字サイズと太さでつける（フッターと同じ原則）。 */
  --ink-accent:   var(--wp--preset--color--ink-accent,   #B45309);  /* 白  5.02 / クリーム  4.73 */
  --ink-on-brand: var(--wp--preset--color--ink-on-brand, #232C32);  /* オレンジ面の上 5.48 */
  /* ⚠ brand.md のパレット外。CEO指示（2026-08-10）により「ここが肝」専用に追加した赤。
     使うのはこの1箇所だけ。他へ広げないこと（オレンジ family の統一が崩れるため）。
     コントラスト：白 5.74 / クリーム#FFF7ED 5.40 ＝ いずれもWCAG AA（4.5）合格 */
  --ink-key:      var(--wp--preset--color--ink-key,      #C81E1E);

  /* --- 点（グラフィック専用。文字色には使わない） --- */
  --brand:        var(--wp--preset--color--brand,        #F58220);
  --brand-quiet:  var(--wp--preset--color--brand-quiet,  #FDE8D2);

  /* 🔴 フッター最下部の色帯だけに使う濃いオレンジ（CEO決裁・2026-08-12／案B テラコッタ）。
     ⚠ brand.md 未登録の新色。規定への追記は秘書部・広報部が別途行う。
     ⚠ 使うのは .site-footer__legal の1箇所だけ。他へ広げないこと。
     コントラスト（リサーチ部の実測・deliverables/footer-reference-research.md）：
       白 #FFFFFF        … 5.41:1  ○ AA（本文4.5・大文字3.0）
       クリーム #FFF7ED  … 4.73:1  ○ AA
       ブランド #F58220  … 1.94:1  ✕ 置いてはいけない
       半透明の白（70%＝3.26 / 80%＝3.81）… ✕ 不合格。
       → **文字の階層は「色を薄くする」ではなく「サイズと太さ」でつける。**
     参考にした「ひなたの力」の実測色 #F7BC00 は白文字1.73:1で不合格のため採用しなかった
     （参考にしたのは暖色で締める印象とリンクを絞る潔さであって、色そのものではない）。
     パレット（theme.json）には入れない。ブロックエディタの色見本に出して
     他の場所で使われるのを防ぐため。 */
  --brand-deep:   #A5541B;

  /* 🔴 フッター最下部の色帯の3値（DESIGN.md §5-7 v1.17・2026-08-12）
     背景・文字・下線は必ずセットで切り替える。理由は §16-2 の注記を参照。
     🔴 2026-08-13 CEO最終決裁：**#F58220（ロゴ色そのもの） ＋ 純黒文字＝8.10:1**。
     全候補48通りを実物で比較したうえでの選択。**8.10:1 は候補中の最高値。**
     ⚠ **この背景に白文字は絶対に使わない**（2.59:1・基準の半分強）。brand.md の禁止事項でもある。
     ⚠ 文字は **リンク・著作権表示とも「通常の太さ（400）」**（CEO選択。⑤全部通常）。
       太さは基準に影響しない（16px/14pxは「大きな文字」に該当せず緩和が使えない）。
     （旧経緯）#A5541B＋白5.41 → #E2761B＋黒6.84 → #BF5800＋白4.55 → 本決裁。
     CEO要望「白文字にしたい。かつロゴのオレンジに近づけたい。#A5541B は茶色に見える」への解。
     ⚠ **茶色に見える原因は暗さではなく彩度の低さ**だった（#A5541B は彩度72%＝灰色が28%混入）。
       #BF5800 は**色相28°＝ロゴ #F58220 と同一・彩度100%**で、明度はほぼ同じまま灰色を抜いた色。
     🔴 **白文字で 4.5:1 を満たす範囲では、これが「最もロゴに近いオレンジ」の上限**（全探索で確認）。
       ロゴ #F58220 そのものは白文字2.59:1で不可。**白文字を使う限り、背景をこれ以上明るくできない。**
     🔴 **余裕は 4.55 − 4.5 ＝ 0.05 しかない。**背景をこれより1段でも明るくすると即座に不合格。
     ⚠ 経緯：#A5541B（白文字5.41）→ #E2761B＋黒文字（6.84）→ 本色。文字色と背景は必ずセットで変える。 */
  --band-bg:        var(--wp--custom--band-bg,        #F58220);
  --band-ink:       var(--wp--custom--band-ink,       #000000);
  --band-underline: var(--wp--custom--band-underline, rgba(0, 0, 0, .6));

  /* --- 線 --- */
  --rule:         var(--wp--preset--color--rule,         #E3E7EA);
  --rule-strong:  var(--wp--preset--color--rule-strong,  #C9D1D6);

  --focus:        var(--ink-accent);

  /* --- 書体（§4-2・3ロール） --- */
  --ff-display: var(--wp--preset--font-family--display, 'M PLUS 2', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', system-ui, sans-serif);
  --ff-body:    var(--wp--preset--font-family--body,    'BIZ UDPGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif);
  --ff-mono:    var(--wp--preset--font-family--mono,    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);

  /* --- 型スケール（モバイル値。768px 以上で上書き） ---
     ⚠ 型スケールだけは 768px を境に2値を取るため、theme.json のプリセット
       （1値しか持てない）に丸ごとは移せない。
       分担：**モバイル値＝このファイル／デスクトップ値＝theme.json**（下の @media で参照）。
       theme.json 側の fontSizes はデスクトップ値であり、ブロックエディタの
       サイズ選択肢としても使われる。 */
  /* 2026-08-12（DESIGN v1.12・修正6の付随）：DESIGN §4-3 のモバイル値は 2.375rem(38px) だが
     ここだけ 2.75rem(44px) と食い違っていた。本変数は現在どこからも参照されておらず
     （ヒーローは .hero__title の clamp(2.375rem, 7.6vw, 5rem) が直接効いている）、
     値を直しても表示は1pxも変わらない。将来 var(--fs-hero) を使った人が
     設計書と違う44pxを踏む罠だったため、設計値に合わせる。表示影響なし。 */
  --fs-hero:  2.375rem;   /* 38px（clamp の下限と一致） */
  --fs-h1:    2.25rem;    /* 36px（下層ページ用） */
  --fs-h2:    1.625rem;   /* 26px（DESIGN v1.4で28pxから一段下げ） */
  --fs-h3:    1.25rem;    /* 20px */
  --fs-lead:  1.1875rem;  /* 19px */
  --fs-body:  1.125rem;   /* 18px */
  --fs-small: 1rem;       /* 16px：注記もこれを下回らない */
  --fs-label: 0.8125rem;  /* 13px */

  /* --- 間隔（8pxグリッド）。値の正は theme.json の spacingSizes --- */
  --sp-1:  var(--wp--preset--spacing--1,  4px);
  --sp-2:  var(--wp--preset--spacing--2,  8px);
  --sp-3:  var(--wp--preset--spacing--3,  16px);
  --sp-4:  var(--wp--preset--spacing--4,  24px);
  --sp-5:  var(--wp--preset--spacing--5,  32px);
  --sp-6:  var(--wp--preset--spacing--6,  48px);
  --sp-7:  var(--wp--preset--spacing--7,  64px);
  --sp-8:  var(--wp--preset--spacing--8,  80px);
  --sp-9:  var(--wp--preset--spacing--9,  120px);
  --sp-10: var(--wp--preset--spacing--10, 160px);

  /* --- レイアウト ------------------------------------------------------
     この節には「幅」に関する変数が2つある。役割がまったく違うので混ぜないこと。

       --container-wide … 枠（.container）の幅。ページの外側の器。
       --measure-text   … 本文の段落の読み幅。器の中で文章が折り返す幅。

     v1.15 で2つを分離したが、v1.18（CEO決裁）で読み幅も 100% に戻したため、
     現在は実質1つに戻っている。**変数の分離（仕組み）だけは残してある**——
     将来値を変える場合も theme.json の1値で済むようにするため。
     --------------------------------------------------------------------- */
  --container: var(--wp--custom--container, 720px);

  /* 🔴 本文の段落の読み幅（DESIGN.md §4-5 v1.18・2026-08-12 CEO決裁）
     ===== 値：100% ＝ 読み幅の上限を設けない。本文も枠に完全追従する =====

     ▼ これは v1.9 のCEO決裁（読み幅100%）への回帰である。
       CEOは 2026-08-12 に「枠100%」→「block-max解除」→「本文100%」と
       3度にわたり「全要素を画面幅に追従させる」判断を確認している。
       1行の文字数が推奨帯（全角35〜45字）を超える点は説明済みのうえでの決裁。
       🔴 読み幅の上限（760px固定・clamp() 等）を再提案しないこと。

     ▼ 経緯（すべて theme.json の settings.custom.measure-text の1値で往復した）
          "100%"                       … 現行（v1.18・CEO決裁）
          "clamp(760px, 58vw, 940px)"  … v1.17（撤廃）
          "760px"                      … v1.15〜v1.16（撤廃）

     🔴 仮に将来値を戻す場合も em で書いてはいけない。
        v1.9 で 34em を使ったところ、em は「その要素の文字サイズ」を基準にするため
        注記(16px)544px／本文(19px)646px／リード(22px)748px と要素ごとに幅が変わり、
        右端が階段状にガタガタになった。CEOの指摘で取り下げた経緯がある。

     ⚠ 左端を決めているのは --container-wide と .container の padding だけ。
        見出しの左端32pxは、この値を何にしても動かない（実測で確認済み）。 */
  --measure-text: var(--wp--custom--measure-text, 100%);
  --measure: var(--measure-text);
  /* .container 直下の子の幅。--measure と同じ扱い */
  --measure-block: var(--measure-text);

  /* 🔴 サイト全体の外枠の幅（DESIGN.md §4-5 v1.15・2026-08-12）
     ===== 幅を変えたいときに触るのは「theme.json の custom.container-wide」1箇所だけ =====

     現在の値は **100%** ＝ 上限を設けない。左右のパディングを除いて
     ウィンドウ幅にそのまま追従する（CEO提案・2026-08-12）。

     ▼ 戻し方（1値だけ）
        theme.json の settings.custom.container-wide を書き換える。
          "100%"    … 固定しない（現行）
          "1440px"  … v1.14 の上限あり版に戻す
          "1280px"  … など任意の値も可
        CSSもテンプレートも触る必要はない。全8ページに一度で反映される。

     このファイルの 1440px は theme.json が読めなかったときのフォールバック。
     ⚠ フォールバックをあえて 100% にしていない。theme.json の読み込みが失敗した
       ときに全面ぶち抜きになるより、上限ありで表示が崩れないほうが安全なため。

     （theme.json の layout.contentSize / wideSize も同値にそろえてあるが、
       本サイトの本文は全ページ wp:html ＋ 自作 .container で組んであるため、
       WordPress のレイアウト幅は**ブロックエディタの編集画面にしか効かない**。
       フロントの実効値は custom.container-wide だけである。）

     経緯：v1.5（2026-08-10）で 1080px 固定にしたのは「見出しの左端が 205px と 385px を
     往復する」問題を消すためであり、**1080 という数字そのものに根拠はなかった**。
     v1.14 で上限を 1440px へ、v1.15 で上限そのものを外した。
     ⚠ どの値にしても見出しの左端は1本にそろう。左端が動かないのは
       「枠の幅が常に同じ変数で決まる」からであって、「枠が狭い」からではない。
       壊れるのは .container ごとに別の幅を与えたときだけ。 */
  --container-wide: var(--wp--custom--container-wide, 1440px);

  /* 🔴 囲みブロックの上限幅（DESIGN.md §4-5 v1.16・2026-08-12）
     ===== 「枠」は100%のまま。広がってはいけないのは “囲みの中身” だけ =====

     枠を100%にしたことで、カード・比較表・図といった「囲み」まで青天井に伸びた。
     実測（2560px）：3カードが1枚811px・サイクル図の5項目が1枚985px・
     比較表が2481px。カードは見出し1行＋短文しか入っていないため、
     横長の帯になって「同じ形の箱が3つ並んで比較を促す」という機能が消える。

     そこで **枠（--container-wide）とは別に、囲みだけに上限を置く**。

     値の根拠（カードの中身から逆算した実測値）：
       ・.card の中身は h3（22px）1行＋本文（16px）。1枚 442px のとき
         本文は1行24〜25字・3行前後で、箱の縦横比は約2.2:1（＝「箱」に見える）。
         1枚 811px では1行47字・2行になり縦横比 4.8:1（＝「帯」に見える）。
         推奨の読み幅（16pxで30〜40字＝480〜640px）＋左右パディング48px を考えると
         1枚の上限は 440〜690px。ここでは下側（442px）を採る。
         3枚＋間隔24px×2 ＝ 442×3 + 48 ＝ **1374px**。
       ・比較表 .cmp は自然幅1014px。1376px なら潰れず、間延びもしない。
       ・サイクル図の5項目（2列）は 1枚676px。
     以上をまとめて **1376px**（＝上限1440px時代の枠の内寸 1440−32×2）に置いた。
     この値なら、CEOが 1440px 版で実際に見て承認した囲みの見え方がそのまま再現される。

     🔴 余りの扱い：**すべて左に寄せる**（margin-inline: 0）。
        間隔（gap）を広げて散らす案は採らない。1枚が箱に見えても、間隔だけ開くと
        「並び」ではなく「バラバラに置かれた箱」になるため。
        左に寄せることで、囲みの左端も見出し・本文と同じ 32px にそろう（§4-5「左端が背骨」）。
        すべての囲みが同じ上限を共有するので、右端も1本にそろう。

     ▼ 変え方：theme.json の settings.custom.block-max を1値だけ書き換える。
        "none" にすれば上限なし（v1.15 の状態）に戻る。 */
  --block-max: var(--wp--custom--block-max, 1376px);

  /* 🔴 セクション上下余白（CEO決裁・2026-08-12／DESIGN.md §5-1 v1.13）
     旧：モバイル80px／デスクトップ120px（＝セクション間 160／240px）
     新：モバイル64px／デスクトップ 80px（＝セクション間 128／160px）
     理由：全8ページで「セクション間が空きすぎてバランスが悪い」とCEO指摘。
     基準：本文の行送り（DT 19px×1.9＝36.1px／MB 18px×1.9＝34.2px）で数え、
           セクション間＝DT 4.4行分・MB 3.7行分に置いた。
           旧値はDT 6.6行分で、1画面（900px）の1/4以上が余白だった。
     ⚠ この1変数が全8ページのセクション間を決める。ページ個別に上書きしないこと。 */
  --section-y: var(--sp-7);
  --radius: var(--wp--custom--radius, 8px);

  /* --- 影：カードのみ極薄（§5-4） --- */
  --shadow-card: var(--wp--custom--shadow-card, 0 1px 2px rgba(47, 58, 66, .05), 0 8px 24px rgba(47, 58, 66, .05));

  --ease: var(--wp--custom--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* デスクトップの型スケール。値の正は theme.json の fontSizes。
   🔴 CSS変数名の `h-1` は打ち間違いではない。
      WordPress は theme.json の slug をケバブケース化するとき、英字と数字の境目に
      ハイフンを差し込む（slug `h1` → 変数 `--wp--preset--font-size--h-1`）。
      slug 側も `h-1` に合わせて宣言してあるので、両者は一致している。
      slug を `h1` に戻すと変数名だけ `h-1` になり、**フォールバック値に落ちて静かに壊れる**
      （2026-08-11 に実際に踏み、staging の実測で検知した）。 */
@media (min-width: 768px) {
  :root {
    /* 🔴 v1.26（2026-08-13 CEO決裁・型スケール再設計）：デスクトップの h1・h2 を一段下げた。
       旧 h1 56px（本文19px比 2.95倍）／h2 36px（同 1.89倍）
       新 h1 40px（同 2.11倍）／h2 30px（同 1.58倍）
       階段：40 ÷ 30 ＝ 1.33／30 ÷ 22 ＝ 1.36／22 ÷ 19 ＝ 1.16
       　　（旧は 1.56／1.64／1.16 で、上ほど段差が大きく h3 だけ本文に張り付いていた）
       ⚠ h3(22px) は下げられない。本文19px × 1.15（見出しに見える下限）＝21.85px のため。
         つまり「全体を等比で下げる」ことは原理的に不可能で、下げられるのは h1・h2 だけである。
       ⚠ モバイル値（h1 36px／h2 26px／h3 20px）は変更していない（CEO指示）。
       ▼ 戻し方：theme.json の fontSizes の h-1・h-2 の2値だけを 3.5rem・2.25rem に戻す。 */
    --fs-hero:  var(--wp--preset--font-size--hero,  5rem);      /* 80px（ヒーロー画像化により現在未使用） */
    --fs-h1:    var(--wp--preset--font-size--h-1,   2.5rem);    /* 40px（v1.26で56pxから） */
    --fs-h2:    var(--wp--preset--font-size--h-2,   1.875rem);  /* 30px（v1.26で36pxから） */
    --fs-h3:    var(--wp--preset--font-size--h-3,   1.375rem);  /* 22px（本文19px比1.16倍＝下限。下げない） */
    --fs-lead:  var(--wp--preset--font-size--lead,  1.375rem);  /* 22px */
    --fs-body:  var(--wp--preset--font-size--body,  1.1875rem); /* 19px */
    --fs-label: var(--wp--preset--font-size--label, 0.875rem);  /* 14px */
    --section-y: var(--sp-8);   /* デスクトップ 120→80px（CEO決裁 2026-08-12） */
  }
}


/* ==========================================================================
   02. リセット
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote, table {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }


/* ==========================================================================
   03. ベース
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 0;   /* 詰めない（UD書体の均等な字送りを保つ） */
  /* anywhere は min-content 幅の計算まで変えるため、flex/grid 内で
     「まだ余裕があるのに改行される」症状を起こす。break-word はその副作用がない */
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

h1, h2 {
  font-family: var(--ff-display);
  font-weight: 800;                  /* 極端なウェイト差が大型タイポの本体 */
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.4;
  letter-spacing: -0.025em;
}
h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
}

p + p { margin-top: 1.2em; }

/* --------------------------------------------------------------------------
   1文＝1行（DESIGN.md v1.29・2026-08-13 CEO指摘「一行がすごい長いと読みにくい」）

   ■ なにをしているか
     本文が2文以上ある段落は `<p class="p-sent">` になっていて、その中で
     1文ずつ `<span class="s">` に包まれている。文の最後に CSS で改行文字を
     1つ足すことで、文の切れ目（。）で必ず行が変わる＝「1文＝1行」になる。
     画面幅に収まらない文は、これまでどおり自然に折り返す（強制はしない）。

   ■ なぜ <br> でも <p> の分割でもないのか
     ・<br>      … 改行が常に入る。スマホでは1行19字しか入らないため、
                    2〜3行に折り返したうえに強制改行が重なり、断片が散らばる。
                    しかも CSS で止められない（HTMLに埋まっているため）。
     ・<p>の分割 … 段落間の余白（1.2em）が文と文の間に入り、ひとつづきの話が
                    分断されて見える。読み上げでも段落が細切れになる。
     ・span＋CSS … 見た目は1文1行。**CSSなので必要な場面だけで効かせられる。**

   ■ 🔴 なぜ `display: block` ではなく `::after` の改行文字なのか
     当初は span を block にしていたが、**実測でアクセシビリティの劣化を確認した。**
     <p> の中身が block になると、Chromium は <p> 自身を
     「uninteresting」として読み上げツリーから外し、**paragraph（段落）の役割が
     消える**（CDP の Accessibility.getPartialAXTree で
     `role=paragraph` → `role=none / ignored=true` を確認）。
     文章は読めるが「ここからここまでが1つの段落」という手がかりが失われ、
     段落単位の移動ができなくなる。
     ⚠ これは container-type とは無関係で、**素の display:block でも同じ**。
     `::after { content:"\A"; white-space:pre }` なら span は inline のままなので、
     <p> は paragraph の役割を保ったまま、見た目だけ1文1行にできる（実測確認済み）。
     生成した改行文字は空白扱いで、読み上げに余計な語を足さない。

   ■ 🔴 @container を使う理由（media query ではない理由）
     「1行が長すぎる」は画面幅ではなく **その段落の幅** で決まる。
       ・スマホ375px          … 1行19字   → 分けると断片になる
       ・PCの3カードの中(393px) … 1行20字   → 同上
       ・PC全幅1440px         … 1行73字   → 分けると読みやすくなる
     画面幅で切ると、PCでも幅の狭いカードの中まで巻き添えになる。
     コンテナクエリなら「その段落に45字以上入るときだけ」の1本で両方に効く。

     `45em` は **その段落自身の文字サイズ基準**で評価される（実測確認済み）。
     全角1文字＝1em なので、45em ＝ ちょうど45字。日本語の推奨は35〜45字で、
     その上限を超えたときだけ1文1行に切り替わる。
     ⚠ コンテナクエリ非対応の古いブラウザでは span は inline のまま＝
       これまでとまったく同じ表示になる。壊れない。

   ■ 行間は変えない（実測して「変えないほうがよい」と判断した）
     この方式は改行を1つ足すだけで、行間そのものは1行も増やさない。
     ページが伸びるぶん（1920pxで+8%）は、文の終わりが行の途中で終わる
     「行の余り」だけが原因である。
     試しに 1.9 → 1.75 に詰めて実測したが、縮んだのは全長の **1〜2%** にすぎず、
     その代わりに16pxの法務注記まで詰まってしまう。割に合わない。
     🔴 行間は要素ごとの現行値（本文1.9／リード1.85／注記1.8）を維持する。

   ■ 🔴 ここに `.p-sent { … }` を書いても効かない（自分自身は問い合わせられない）
     コンテナクエリは「祖先のコンテナ」にしか問い合わせできない。
     `.p-sent` 自身がコンテナなので、@container の中で `.p-sent` を指定しても
     **黙って無視される**（line-height と text-wrap をここに書いて不発だった）。
     効くのは子孫（`.s`）に対する指定だけ。
     なお `text-wrap: pretty` は、1文1行にしたあと折り返しが残る文が
     全ページで5文しかなく、孤立行も0件だったため入れていない（実測）。
   -------------------------------------------------------------------------- */
/* ⚠ 700px 未満では container-type そのものを付けない。
   `container-type` は封じ込め（contain: layout style）を伴うため、その段落だけ
   描画レイヤーが分かれ、文字の輪郭のアンチエイリアスがわずかに変わる。
   実測では 414px のページ全体で差分0.037%・最大差78（行の位置・大きさの差は0件）と、
   目視ではまず分からない量だが、**スマホは1文字も変えない**という前提を守るため落とす。
   1行45字に届く最小の段落幅は 45em×16px＝720px なので、700px 未満では
   コンテナクエリが成立する余地がそもそもない。付けても無駄でしかない。 */
@media (min-width: 700px) {
  .p-sent { container-type: inline-size; }
}

/* 🔴 唯一の除外。`container-type: inline-size` は「中身の幅を無視して自分の幅を決める」
   封じ込めなので、**親が中身の幅で大きさを決めている場合**だけ副作用が出る。
   .cycle__desc は親 .cycle__item が display:flex で、この段落の幅が列幅を決めていた。
   封じ込めを掛けると中身の幅が0と見なされ、実測で 402px → 44px まで潰れた
   （375 / 1440 / 1920px の3幅で確認。全8ページ中、影響が出たのはここだけ）。
   この段落は幅400px＝1行20字で、そもそも1文1行にする対象ではない。
   ⚠ 今後、flex/grid の中で「中身の幅で列が決まる」段落を追加するときは、
     同じように container-type を外すこと。 */
.cycle__desc.p-sent { container-type: normal; }

@container (min-width: 45em) {
  /* 最後の文以外の末尾に、改行文字を1つだけ足す。
     white-space: pre がないと改行文字はただの空白として潰れるので、必ず対で書く。 */
  .p-sent > .s:not(:last-child)::after {
    content: "\A";
    white-space: pre;
  }
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
  letter-spacing: 0;
}
.note {
  font-size: var(--fs-small);        /* 16px を下回らせない（法務注記のため） */
  line-height: 1.8;
  color: var(--ink-soft);
}
.tbd {                               /* 未確定値の表示 */
  font-family: var(--ff-mono);
  font-size: 0.9em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 中身がリンク1本だけの段落・表セル（連絡先・誘導リンクなど）は、文中リンクではなく
   単独の操作対象。当たり判定を40pxにし、負のマージンで相殺して行送りは変えない。
   ⚠ 以前は `p > a:only-child` で指定していたが、**:only-child はテキストノードを数えない**ため、
     「詳しくは<a>プライバシーポリシー</a>をご覧ください」のような**文中のリンクにも当たっていた**。
     inline-flex になったリンクは行の途中で折り返せず、手前で不自然に改行していた（2026-08-10 CEO指摘）。
     判定はCSSでは書けないので、HTML側で `.link-solo` を付けた5箇所だけに限定する。 */
/* 表のセル内の箇条書き（会社概要の事業内容など）。
   「／」で区切ると1行に詰まって読みにくいため、項目ごとに改行する（CEO指摘・2026-08-10） */
.cell-list li {
  position: relative;
  padding-left: 1.1em;
}
.cell-list li + li { margin-top: var(--sp-2); }
.cell-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 2px;
  background: var(--brand);
}

.link-solo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-block: -10px;
}

/* リンク：文字色は --ink のまま、下線だけオレンジ（§3-3-4） */
a {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
a:visited { color: inherit; }
a:hover { text-decoration-color: var(--ink-accent); }

:focus-visible {
  outline: 3px solid var(--focus);   /* 白 5.02:1 / クリーム 4.73:1 */
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-3); top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: 2px solid var(--ink-accent);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   04. レイアウト
   ========================================================================== */
/* 外枠の幅は「常に」--container-wide。
   左揃えのデザインでは左端が背骨であり、セクションごとに枠幅を変えると
   見出しの開始位置が動いてしまう（実測で 205px と 385px を往復していた）。
   そこで「枠の幅」と「読み幅」を分離する：
     .container               … 枠は広い。ただし直下の子を読み幅に収める（文章主体）
     .container--wide         … 枠も中身も広い（カード・比較表・図）
   これで見出しの左端はページ内・ページ間を通じて1本にそろう。 */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--sp-5); }
}
.container--wide { max-width: var(--container-wide); }

/* --wide が付いていない＝文章主体。直下の子だけを読み幅（--measure-text）に収める。
   ⚠ ここが「枠は画面いっぱい・文章は40字で折り返す」を成立させている唯一の仕組み。
     max-width を掛けるだけなので left は動かない＝見出しの左端は1本のまま。
   ⚠ カード（.cards3）・比較表（.cmp）・図（.cycle / .flow3）は
     .container--wide 側に置いてあるため、この規則の対象外＝枠いっぱいに広がる。 */
.container:not(.container--wide) > * {
  max-width: var(--measure-block);
}

.measure { max-width: var(--measure); }

.section { padding-block: var(--section-y); }
/* 背景リズム：白 → クリーム → 白 …（§5-3・クリームを連続させない） */
.section--warm { background: var(--paper-warm); }

/* セクション見出しは短い名詞句（§4-4）。左にオレンジの縦罫（§3-3-2） */
.section__head { margin-bottom: var(--sp-6); }
.section__head h2 {
  position: relative;
  padding-left: var(--sp-4);
}
.section__head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0.16em; bottom: 0.16em;
  width: 4px;
  background: var(--brand);
  border-radius: 2px;
}
.section__sub {                      /* 見出しの下の1行の説明文（§4-4） */
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  max-width: var(--measure);
  color: var(--ink);                 /* 白地 11.64 / クリーム 10.96 */
  font-size: var(--fs-small);
}


/* ==========================================================================
   05. コンポーネント：CTAボタン＋法務注記（§6-2）
   枠線は --ink-accent（白地 5.02:1・非テキスト3:1を満たす）。
   ホバー面はオレンジ、その上の文字は必ず --ink-on-brand。白抜きは全面禁止。
   ========================================================================== */
.btn-cta {
  display: inline-block;
  max-width: 100%;
  padding: 20px 32px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink-accent);
  border-radius: var(--radius);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--brand);
  color: var(--ink-on-brand);        /* 5.48:1 */
  /* 🔴 浮き上がりの影（CEO指示 2026-08-26「あと少しだけ浮き出すように」）
     移動量だけを増やすと、板が滑ったように見えて安っぽくなる。
     浮いて見えるのは【影が落ちるから】なので、移動と影を必ず一緒に動かす。
     影の色は黒ではなく本文色 --ink(#2F3A42) の薄がけ。
     真っ黒の影は、クリーム地（--paper-warm）の上で灰色く濁って見える。
     ⚠ 濃さは 0.18 まで。これ以上は「浮く」ではなく「影が付いている」に見える。 */
  box-shadow: 0 4px 10px rgba(47, 58, 66, 0.18);
}

/* 🔴 移動は「ホバーできる環境」だけに限る。
   指で操作する端末では :hover が【触れたあと居座る】ことがあり、
   押した覚えのないボタンが浮いたままになる。
   ⚠ 影（上）は環境を問わず出してよい。位置が動かないので居座っても害がない。 */
@media (hover: hover) {
  .btn-cta:hover { transform: translateY(-3px); }
}

/* キーボードで選んだときも同じだけ浮かせる。
   ⚠ hover の媒体クエリの外に置くこと。指で操作する端末に
     キーボードを繋いでいる人が、浮き上がりだけ得られなくなる。 */
.btn-cta:focus-visible { transform: translateY(-3px); }

.btn-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(47, 58, 66, 0.18);   /* 押し込んだら影も浅くする */
}

/* --------------------------------------------------------------------------
   .btn-cta--pulse ： 目を引かせるCTA（CEO指示 2026-08-26）
   「目線がすぐ行くように」＝ 塗り ＋ 控えめな脈動 ＋ ときどき通る光。

   🔴 ここが【唯一の定義】である。ヘッダーも本文中も同じこの1か所を見ている。
      使っている場所（2026-08-26 時点で6か所）：
        patterns/header.php       … ヘッダー右上「30分無料相談」
        patterns/front-page.php   … ヒーロー／クロージング（2か所）
        patterns/page-about.php   … クロージング
        patterns/page-profile.php … クロージング
        patterns/page-service.php … クロージング
      ⚠ 増やすときはクラスを付けるだけにすること。
        ここを写して別名で増やすと、次に直す人がどちらかを直し忘れる。

   🔴 色（.company/guidelines/brand.md）
     面は --brand(#F58220)、文字は --ink-on-brand(#232C32)。実測 5.48:1（合格）。
     ⚠ 【白抜きオレンジは禁止】。#F58220 に白文字は 2.59:1 で不合格であり、
       brand.md が名指しで禁じている。白文字にしたくなったら面を
       --brand-deep(#A5541B) に変える（白 5.41:1）。⚠ 片方だけ変えない。

   🔴 枠線は --ink-accent(#B45309) のまま【変えない】（2026-08-26 修正）
     ボタンの輪郭は、周りの地色に対して 3:1 が要る（WCAG 1.4.11 非テキストの明暗）。
     枠をオレンジにすると 白地 2.59:1／クリーム地 2.45:1 でどちらも不足する。
     --ink-accent なら 白地 5.02:1／クリーム地 4.73:1 で通る。
     ⚠ 「オレンジの面にオレンジの枠」のほうが一体感は出るが、
       輪郭が見えないボタンは、輪郭を頼りにしている人にはボタンだと分からない。

   🔴 動かすもの（CEO決裁 2026-08-26・方針変更）
     ゆっくりした【拡大・縮小】と、ときどき通る光の2つ。
     ⚠ 以前あった「面が明るくなる脈動」は廃止した。トークン --brand-lift と
       keyframes maifyCtaPulse も一緒に消してある。復活させないこと。

     🔴 拡大は transform: scale で行う（width/height や padding を動かさない）。
        scale は描画だけの変形なので、周りの要素の位置計算をやり直させない。
        ＝ヘッダーの高さも、本文の行送りも、1pxも動かない。
     ⚠ filter: brightness は使わない。要素【全体】に効くので面と一緒に
       【文字も明るくなり】、面と文字が同じ向きに動いてコントラストが下がる。

   🔴 倍率（2026-08-26 作り直し・CEO指摘「大きくなったり小さくなったりしない」）
     ▼ 前の値 1.035 が見えなかった理由（切り分け済み・推測ではない）
       staging の実測で scale は正しく 1 → 1.035 まで効いていた（CSSは正常）。
       ただし幅146pxのボタンで +5.1px、片側わずか +2.6px。それを 3.2秒かけて
       ゆっくり動かすため、輪郭の動く速さが 1秒あたり約1.6px しかなく、
       人間が「動いた」と気づく速さに届いていなかった。＝【小さすぎた】が真因。

     ▼ 新しい値は【ヘッダーと本文で変える】。理由：
       目に見えるのは「％」ではなく【はみ出す px】である。
         ヘッダーCTA  幅146px … 1.12 で 片側 +8.8px
         本文中CTA    幅358px … 1.12 なら 片側 +21px（大きすぎて落ち着かない）
       同じ％だと、大きいボタンほど大げさに暴れる。そこで
         ヘッダー = 1.12 ／ 本文中 = 1.06（片側 +10.7px）
       とし、動く px の量を両方とも 9〜11px 前後にそろえた。
       ⚠ 定義は【この1か所のまま】である。倍率だけを変数 --cta-pulse-scale で
         差し替えている。keyframes やアニメーションを写して増やさないこと。

     🔴 隣にぶつからない根拠（staging 実測 2026-08-26）
       ヘッダーCTA 146×48px。左のナビとの隙間は16px、
       ヘッダー下端との隙間は11px。中心から膨らむので片側に効く分は半分。
         横：72.8px × 0.12 = +8.8px（隙間16pxのうち 7.2px 残る）
         縦：24px  × 0.12 = +2.9px（隙間11pxのうち 8.1px 残る）
       接触する限界は 1.21（前任者実測）。1.12 はその手前で止めてある。
       ⚠ 1.21 を超えるとナビの文字に触れる。上げたくなったら必ず実測し直すこと。

   🔴 速さ（うるさくしない／光過敏性発作を避ける）
     2.4秒で1周（約0.42Hz）。閾値とされる3Hzの7分の1以下。
     ⚠ 参考にした記事は 2秒でずっと動かし続けるが、常時見えるヘッダーでは
       休みなく動くものは視界の端でちらついて疲れる。そこで
       【前半1.2秒で ふくらむ→もどる、後半1.2秒は静止】という休符を入れた。
       動く区間を短くしたぶん輪郭の動く速さは 1秒あたり約15px となり、
       前の 1.6px/秒 の約9倍。止まっている時間があるので、動き出しも目立つ。
   -------------------------------------------------------------------------- */
.btn-cta--pulse {
  position: relative;
  isolation: isolate;        /* きらーんを「面の上・文字の下」に敷くための土台 */
  overflow: hidden;          /* 光の帯を角丸の内側で切る */
  background: var(--brand);
  color: var(--ink-on-brand);
  transform-origin: center;  /* 中心から均等にふくらむ。端を基準にすると片側だけ寄る */
  --cta-pulse-scale: 1.06;   /* 本文中CTA（幅が広いので控えめ）。上の解説を読んでから変えること */
  animation: maifyCtaBreathe 2.4s ease-in-out infinite;
}

/* ヘッダーCTAだけ倍率を上げる。
   幅が本文中CTAの4割ほどしかなく、同じ％では動く px が足りず気づけないため。
   ⚠ 1.21 でナビの文字に触れる（実測）。ここを超えないこと。 */
.btn-cta--pulse.site-header__cta { --cta-pulse-scale: 1.12; }

/* きらーん：斜めの光の帯が、左から右へ短く通り過ぎる。
   ⚠ z-index:-1 と親の isolation:isolate の組み合わせで、
     帯は【面より上・文字より下】に入る。文字の上を白が通らないので、
     光っている最中もコントラストは下がらない（むしろ面が明るくなり上がる）。 */
.btn-cta--pulse::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 40%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-180%) skewX(-22deg);
  animation: maifyCtaShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* 1周（2.4秒）のうち、前半だけ動いて後半は休む。
     0%  ふつうの大きさ
     25% いちばん大きい（0.6秒かけてふくらむ）
     50% ふつうの大きさに戻る（0.6秒かけて縮む）
     50〜100% 静止（1.2秒の休符）
   ⚠ 倍率は --cta-pulse-scale で場所ごとに差し替える（上の .btn-cta--pulse 参照）。
     keyframes は【この1つだけ】。場所ごとに複製しないこと。
   ⚠ alternate は使わない（1周のなかに往路・復路・休符を全部書いてあるため）。 */
@keyframes maifyCtaBreathe {
  0%        { transform: scale(1); }
  25%       { transform: scale(var(--cta-pulse-scale)); }
  50%, 100% { transform: scale(1); }
}

@keyframes maifyCtaShine {
  0%        { transform: translateX(-180%) skewX(-22deg); }
  14%, 100% { transform: translateX(340%)  skewX(-22deg); }
}

/* 触れているとき・キーボードで選んでいるときは、動きを止める。
   🔴 操作している人の邪魔をしないため。フォーカスリングが伸び縮みすると
      「いまどこを選んでいるか」が読み取りにくくなる。

   🔴 ここを止めることには、もう1つ大事な役割がある（2026-08-26）。
      拡大縮小（animation の transform: scale）と
      浮き上がり（.btn-cta:hover の transform: translateY）は、
      【同じ transform という1つの引き出し】を奪い合う。
      CSSではアニメーションのほうが必ず勝つため、animation を止めないと
      「ホバーしても浮かない」ことになる。
      ⚠ animation: none を消さないこと。消すと浮き上がりが黙って効かなくなる。

   ⚠ box-shadow はここで【指定しない】。指定すると浮き上がりの影を打ち消す。 */
.btn-cta--pulse:hover,
.btn-cta--pulse:focus-visible { animation: none; }
.btn-cta--pulse:hover::after,
.btn-cta--pulse:focus-visible::after { animation: none; opacity: 0; }

/* ボタン下の法務指定注記（削除禁止・16px を下回らない） */
.cta-notice {
  margin-top: var(--sp-4);
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-soft);
}
.cta-notice p + p { margin-top: var(--sp-3); }
.cta-notice strong { color: var(--ink); }


/* ==========================================================================
   06. ヘッダー（§6-5・白・sticky・高さ不変）
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 68px;
  padding-block: var(--sp-2);
}
/* ロゴ（2026-08-10：テキストからロゴ画像へ差し替え／2026-08-12：ロゴパック最新版へ差し替え）
   画像は2倍解像度（408×96）を width/height で縮小表示する。縦横比は 4.25（旧ロゴは 3.00）。
   ⚠ 高さを変えると幅が 4.25倍で効いてくる。モバイルのヘッダーは幅の余裕がほぼ無い（下記）。
   【デスクトップ 48px】旧ロゴと同じ表示高さ。ヘッダーの見た目の高さは変わらない。
     幅は 144px → 204px になるが、最も狭いデスクトップ＝768px でも余白は約41px残る（実測）。
   【モバイル 24px】375px（実効360px・スクロールバー15px）でのヘッダーの内訳は
     余白16+16／要素間gap 16×2／CTA 145.58px／ハンバーガー44px。ロゴに使えるのは約106.4pxが上限。
     24px × 4.25 = 102px に収めることで、ハンバーガーの flex-shrink（42.42px＝44px未満）が解消する。
   ⚠ 新ロゴは「MAIFYラボ」の文字が画像高さの47.9%を占める（旧ロゴは27.1%）。
     そのため表示高さを 36px→24px に下げても、文字の実寸は 9.75px→11.5px と旧より大きい。
   🔴 2026-10-05（オーナー採用・v0.65.2）：横幅を狭めてもロゴを小さくしない。どの幅でも 48px。
      上の「モバイル 24px」はそれまでの話。いまは幅 443px 未満の画面だけ、バナーと横に並べるために
      入る最大の大きさまで縮める（下のバナーの注記の 680px 未満のブロック）。 */
.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* タップ領域 */
  text-decoration: none;
  flex: 0 0 auto;
}
.site-logo img {
  display: block;
  width: auto;
  height: 48px;              /* どの幅でも 48px（2026-10-05 v0.65.2。それまでモバイルは 24px） */
}
/* マイベストプロ宮崎のバナー（2026-10-04 オーナー指示・v0.65.0）。
   🔴 オーナー指示（2026-10-04〜05）。この4つは必ず守る：
      1. どの幅でも消さない
      2. どの幅でもオリジナルサイズ 232×58 のまま（拡大も縮小もしない）
      3. 縦横比（232:58＝4:1）は絶対に変えない
      4. MAIFYラボのロゴとバナーは絶対に改行させない（どの幅でも横に並べる）
   仕組み：ロゴとバナーを .site-header__brand（折り返さない flex）で1つにまとめてある。
     バナーの width・height は先方配布 Sサイズの実寸（232×58）。片方だけ変えない。max-width を掛けない。
     ⚠ v0.65.1 から画像ファイルは Lサイズ（3000×750・同じ 4:1）。表示は 232×58 のまま。
       下の width・height を消すと 3000px 幅で出てヘッダーが壊れる。

   【幅ごとの並び】
     1160px 以上 … 1段：ロゴ・バナー｜横並びのナビ｜CTA
     680〜1159px … 1段：ロゴ・バナー｜ハンバーガー｜CTA（768px 未満は間隔を 8px に詰める）
     680px 未満  … 2段：上＝ロゴ・バナー／下＝ハンバーガー・CTA（右寄せ）
   【境目の根拠（実測値からの計算。変えるときは計算し直すこと）】
     1160px：横並びのナビが成立する最小幅は、バナー無しで 878.5px（下のCTAの注記）。
       バナー 232px＋gap 16px を足すと約1127px。スクロールバー（最大約17px）を足して 1144px。
       余裕を見て 1160px。これより狭い幅で横並びにするとナビの文字が語の途中で折り返す。
       ⚠ この値は【3か所】同じにすること：下の @media (min-width: 1160px)／
          @media (max-width: 1159.98px)／assets/js/main.js の matchMedia。
     680px：ロゴを小さくしない（48px＝幅171px。2026-10-05 v0.65.2）ので、間隔を 8px に詰めても
       171＋8＋232＋8＋ハンバーガー44＋8＋CTA146＝617px、左右の余白 32px とスクロールバー約17px を
       足して約666px。余裕を見て 680px（それまでは ロゴ 24px で 580px だった）。
     768px 以上は左右の余白が 64px になるが、間隔 16px のままでも 641＋64＋17＝722px で入る。
   【680px 以上】ヘッダーの上下の余白を 8px → 5px にして、ヘッダーの高さを変えない
     （5 + バナー58 + 5 = 68px＝min-height と同じ）。
   【680px 未満】2段になるのでヘッダーは高くなる。
     ロゴとバナーの間は 8px。ロゴ 171＋8＋バナー 232＋左右の余白 32＝443px 以上の画面ならロゴは 48px のまま。
     それより狭い画面ではバナーは縮めず、
     【ロゴのほうを縦横比を保ったまま、入る最大の大きさにする】（下の min() の式。
     414px で約40px・375px で約29px・360px で約25px・320px で約13px）。 */
.site-header__brand {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.site-header__mbp {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__mbp img {
  display: block;
  width: 232px;
  height: 58px;
  max-width: none;
}
@media (min-width: 680px) {
  .site-header__inner { padding-block: 5px; }
}
/* 768px 未満：間隔を 16px → 8px に詰める（2026-10-05 オーナー指示「ハンバーガーと30分無料相談を
   改行させない」）。ロゴを小さくしない版（v0.65.2）では、詰めれば 680px まで1段に入る。 */
@media (max-width: 767.98px) {
  .site-header__inner { gap: var(--sp-2); }
  .site-header__brand { gap: var(--sp-2); }
}
/* 680px 未満：1段には入らないので2段にする。 */
@media (max-width: 679.98px) {
  .site-header__inner { flex-wrap: wrap; row-gap: 6px; }
  .site-header__brand { flex: 0 0 100%; }
  /* 272px ＝ 左右の余白 32 ＋ バナー 232 ＋ ロゴとの間 8。3.5625 はロゴの縦横比 */
  .site-logo img { height: min(48px, calc((100vw - 272px) / 3.5625)); }
}
/* --- ナビゲーション -------------------------------------------------------
   900px以上：横並び。
   900px未満：ハンバーガーで開閉するパネル（2026-08-10 CEO指示で新設）。

   🔴 2026-08-14：この境目だけ 768px → 900px へ広げた（CEO指示でメニューを1つ追加したため）。
      項目が3つ（サービス／代表プロフィール／会社概要）のときは 768px でも横並びが成立していたが、
      「お問い合わせ」を足して4つになると横並びに必要な幅が 314px → 442px に増える。
      実測：860px までは収まるが、820px 以下では入りきらず、
      **項目の文字が「サー／ビス」「会社概／要」のように語の途中で改行される。**
      横に詰めても入らない幅なので（768pxでナビに使える幅は355px）、
      入らなくなった時点でハンバーガーに切り替えるのが正しい。
      余裕を見て 900px を境目にしている。

   🔴 2026-10-05：この境目を 900px → 1160px へ広げた（オーナー指示・v0.65.0）。
      ロゴの右隣にマイベストプロ宮崎のバナー（232px）を置いたため。計算は上のバナーの注記。
      この下の注記に残る「900px」「899px」は当時の値。いまの境目は 1160px と読み替えること。

   🔴 ここを触るときの注意：768px はこのファイル全体で型スケール・各セクションの
      レイアウトにも使われている共通の境目である。**ナビの境目だけを動かすこと。**
      一括置換すると関係のない箇所まで変わる。
      あわせて assets/js/main.js の matchMedia も同じ値にすること（開閉状態のリセット用）。

   ⚠ 以前は狭い幅で .site-nav を display:none にしてリンクを隠していたが、
     「幅を狭めるとメニューが消える」ため廃止した。リンクは必ず到達できること。
   ⚠ JSが動かない環境（.no-js）ではボタンを隠し、ナビをそのまま並べる。
     開閉をJSに依存させたまま隠すと、JS失敗時にリンクが永久に出てこないため。 */
.site-nav a {
  font-size: 1rem;
  text-decoration: none;
}

@media (min-width: 1160px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav ul { display: flex; gap: var(--sp-5); }

  /* 🔴 CTAの左だけ余白を足す（CEO指摘 2026-08-26・v0.61.0）
     ヘッダーの隙間はもともと2種類あった：
       メニュー項目どうし … 32px（.site-nav ul の gap＝--sp-5）
       「お問い合わせ」とCTAの間 … 16px（.site-header__inner の gap＝--sp-3）
     もともとCTAの左だけ半分の詰まり方で、さらに拡大（scale 1.12）で
     片側 8.7px 食い込むため、いちばん大きい瞬間には 7.3px まで詰まっていた。

     ここで 24px（--sp-4）を足して 16 + 24 = 40px にする。
       通常時 40px ／ 拡大しきった瞬間 40 - 8.7 = 約31px
     ＝【動きの山でメニュー項目どうしの32pxと同じに見える】ように逆算した値である。
     通常時が32pxより少し広いのは、動くものの隣は詰まって見えやすいためで、
     実物でも間延びして見えないことを確認している。

     ⚠ margin-left であること（gap を変えない）。
       .site-header__inner の gap を変えると【ロゴとナビの間も一緒に広がる】。
       .site-nav ul の gap を変えるとメニュー項目どうしの間隔が変わる。
       広げてよいのはCTAの左だけなので、CTA自身の margin で足す。
     ⚠ 900px 未満（ハンバーガー）には効かせない。狭い幅ではロゴに使える幅が
       約106pxしか無く、ここで24px奪うとロゴが縮むか折り返す。
     ⚠ ヘッダーが横に溢れることはない。ナビは margin-left:auto で右寄せのため、
       足した24pxは【ロゴとナビの間の余った空間】から取られる（実測：横並びが
       成立する最小幅は 878.5px。切り替えの 900px より狭いので破綻しない）。 */
  .site-header__cta { margin-left: var(--sp-4); }
  .site-nav a {
    padding-block: var(--sp-2);
    border-bottom: 2px solid transparent;
  }
  .site-nav a:hover { border-bottom-color: var(--brand); }

  /* 現在地の目印（2026-08-14 CEO決裁・v0.35.0）
     ハンバーガーのパネル（899.98px以下）の見せ方と同じ考え方に揃えてある：
       「文字色を --ink-accent に変える」＋「--brand family の帯を1本引く」。
     パネルは帯を左に inset で置いているが、横並びでは項目が横に並ぶため、
     同じ帯を下辺（border-bottom）に置き換えている。位置だけが違い、意味は同じ。

     🔴 色だけに頼らないこと（WCAG 1.4.1）：
        現在地は「文字色」と「下線の有無」の2つで区別できる。色が判別できなくても
        下線という形で分かる。

     🔴 幅を変えないこと：
        border-bottom は上の .site-nav a で全項目に 2px solid transparent として
        既に確保済み。ここでは色を入れるだけなので、項目の幅も高さも1pxも変わらない。
        **font-weight は変えない。**太字にすると文字幅が増え、4項目＋ロゴ＋CTAが
        並ぶ 900px で折り返しの原因になる（DESIGN §6-5 ヘッダー高さ不変）。

     ⚠ 帯の色は --brand(#F58220) ではなく --ink-accent(#B45309) を使う。
        #F58220 は白地で 2.59:1 しかなく、WCAG 1.4.11（非テキスト 3:1）を満たさない。
        #B45309 なら 5.02:1。文字色と同じ色になるため見た目のまとまりも良い。
        （パネル側の帯は既存のまま触らない＝899px以下の見え方は変更なし） */
  .site-nav a[aria-current="page"] {
    color: var(--ink-accent);                 /* 白背景 5.02:1 */
    border-bottom-color: var(--ink-accent);   /* 白背景 5.02:1（非テキスト3:1を満たす） */
  }
  /* 現在地にホバーしても目印が消えたように見えないよう、色を保つ */
  .site-nav a[aria-current="page"]:hover { border-bottom-color: var(--ink-accent); }
}

@media (max-width: 1159.98px) {
  /* ハンバーガーボタン：44×44のタップ領域を確保する */
  /* 🔴 上の @media (min-width: 900px) と必ず対で維持すること（境目がずれると二重表示・消失が起きる）。 */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* 3本線。開いているときは×へ変える */
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 150ms var(--ease), top 150ms var(--ease), background-color 150ms var(--ease);
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { content: ""; position: absolute; top: -6px; }
  .nav-toggle__bars::after  { content: ""; position: absolute; top:  6px; }
  .is-nav-open .nav-toggle__bars { background: transparent; }
  .is-nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .is-nav-open .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

  /* パネル：ヘッダーの真下に全幅で開く。.site-header が sticky＝配置の基準になる */
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(47, 58, 66, .08);
    padding: var(--sp-2) 0 var(--sp-3);
  }
  .site-nav ul { display: block; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;                       /* タップ領域 */
    padding-inline: var(--sp-3);
    font-weight: 700;
  }
  .site-nav a[aria-current="page"] {
    color: var(--ink-accent);               /* 白背景 5.02:1 */
    box-shadow: inset 3px 0 0 var(--brand); /* 現在地の目印 */
  }

  /* JSあり：既定は閉じ、is-nav-open のときだけ開く */
  .js .site-nav { display: none; }
  .js .is-nav-open .site-nav { display: block; }

  /* JSなし：ボタンは機能しないので隠し、リンクは折り返して常時表示する */
  .no-js .nav-toggle { display: none; }
  .no-js .site-header__inner { flex-wrap: wrap; }
  .no-js .site-nav {
    position: static;
    width: 100%;
    box-shadow: none;
    border-bottom: 0;
    padding: 0 0 var(--sp-2);
  }
  .no-js .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .no-js .site-nav li + li { border-top: 0; }
  .no-js .site-nav a { min-height: 44px; padding-inline: 0; }
}
.site-header__cta {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 1rem;

  /* 🔴 消えるときは「畳む」（2026-08-27・CEO実機指摘 第3版）
     ここまでの経緯：
       v0.61.0 まで … display:none で消していた → 場所ごと消えるので
                       PCでナビが右へ 185.7px【ガクッと跳ぶ】（実測）
       v0.62.0     … visibility:hidden にした   → 跳ねなくなったが
                       CTAの幅ぶんの【空白が残る】（PC・スマホとも）
     どちらも片方しか満たせない。理由は単純で、幅146pxの物が消えたら
     **何かがその分動くか、空白が残るかのどちらかしか起こらない**ためである。
     そこで【瞬間的に消す】のをやめ、**幅と余白を0へ滑らかに畳む**。
     ナビ（スマホではハンバーガー）は 0.22秒かけて右へ滑り、空白は残らない。

     ⚠ max-width の上限 10rem(160px) は、実寸145.7pxに対する余裕込みの値。
       ラベルを長くするとここで【文字が切れる】。ラベルを変えたら必ず見直すこと。
     ⚠ visibility だけ 0.22秒遅らせている（下の [hidden] 参照）。
       畳んでいる最中は見えていてほしいが、畳み終わったら
       キーボード・読み上げの対象から外したいため。
     ⚠ transition の並び順と、[hidden] の transition-delay の並び順は
       【必ず同じ数・同じ順】にすること。ずれると別のプロパティが遅れて壊れる。 */
  overflow: hidden;
  white-space: nowrap;
  max-width: 10rem;
  transition-property:
    background-color, color, transform, box-shadow,
    max-width, margin-left, padding-inline, border-inline-width, opacity, visibility;
  transition-duration:
    150ms, 150ms, 150ms, 150ms,
    220ms, 220ms, 220ms, 220ms, 140ms, 0s;
  transition-timing-function: ease-out;
  transition-delay:
    0s, 0s, 0s, 0s,
    0s, 0s, 0s, 0s, 0s, 0s;
}
/* 同一画面にCTAを2つ同時に見せない（§6-2）。JSがページ内CTAの可視を検知して付与

   🔴 幅・左右の余白・枠線をすべて 0 にして【場所を残さない】。
     さらに margin-left を -16px にして、直前の gap（--sp-3 = 16px）も打ち消す。
     これをしないと、幅0でも【隙間1つ分＝16pxの空白】が残る。
     デスクトップでは上の +24px（--sp-4）指定をこの行が上書きする
     （`.site-header__cta[hidden]` のほうが詳細度が高い）。

   ⚠ display:inline-block を書き直しているのは、ブラウザ標準の [hidden] が
     display:none を当ててくるためである。片方だけ消さないこと。
   🔴 visibility:hidden は【畳み終わってから】効かせる（transition-delay 220ms）。
     幅0で残しただけの実装は、見えないのに Tab キーで止まれてしまう。
     visibility:hidden なら、キーボードのフォーカスも読み上げも対象外になる。 */
.site-header__cta[hidden] {
  display: inline-block;
  visibility: hidden;
  max-width: 0;
  margin-left: calc(-1 * var(--sp-3));
  padding-inline: 0;
  border-inline-width: 0;
  opacity: 0;
  transition-delay:
    0s, 0s, 0s, 0s,
    0s, 0s, 0s, 0s, 0s, 220ms;
}



/* ==========================================================================
   07. ファーストビュー（§5-2）
   要素は3つだけ：大見出し・補足1文・CTA（＋小さく写真）。上下160pxの余白。
   ========================================================================== */
/* 🔴 ヒーロー上下（CEO決裁・2026-08-12）
   旧：上下とも160px固定（--sp-10）。ヒーロー下160＋次セクション上120＝280px空いていた。
   新：MB 80/64px・DT 120/80px。下を --section-y と同じ値にそろえたので、
       ヒーロー〜第1セクションの境目は他のセクション境と同じ（MB 128／DT 160px）になる。
   上を下より大きく残すのは、ページの書き出しの「間」を確保するため（§5-1）。 */
/* 🔴 v1.27（2026-08-13 CEO指摘「トップの画像とヘッダーの間に大きなスペース」）
   上余白を モバイル80px→16px／デスクトップ120px→24px に。下層ページの .page-head と同値にそろえた。
   ⚠ v1.25でヒーローを画像に置き換えた時点で、**画像自身が内側に余白を持っている**ため
     ページ側の上余白と二重になっていた。テキスト時代の「書き出しの間」を確保する設計が、
     画像化で不要になったのに残っていたのが原因。
   ⚠ 下側（次のセクションとの境）は変更しない。セクション間のリズムを崩さないため。 */
.hero { padding-block: var(--sp-3) var(--sp-7); }
@media (min-width: 768px) {
  .hero { padding-block: var(--sp-4) var(--sp-8); }
}

/* アイブロウ（v1.18 新設・CEO決裁 2026-08-12）
   「宮崎のAI・IT導入 伴走支援」＝役務の説明はこの1行が担う。
   色は #B45309（--ink-accent・白地でコントラスト4.5:1以上を実測済み）。
   16px＝決裁指定の14〜18pxの中央値。360px幅でも折り返さないことを実測すること。 */
/* 🔴 v1.24（2026-08-13 CEO指摘「肩書なのでもう少し強調したい」）
   1. 16px → 20px。20px かつ font-weight:700 は WCAG の「大きなテキスト」（14pt太字＝18.66px以上）
      に該当し、必要コントラストが 4.5:1 → 3.0:1 に緩む。これにより明るいオレンジが使える。
      ⚠ **font-weight を 700 未満に下げると小文字扱いに戻り 4.5:1 が必要になる。色とセットで固定。**
   2. 色 #B45309（5.02:1）→ **#E2761B（3.07:1）**（CEO指定・2026-08-13）。ロゴのオレンジに最も近い。
      🔴 **必要3.0:1に対して余裕0.07しかない。**次のいずれかを行うと即座に基準割れする：
        ・font-weight を700未満にする ・font-size を19px以下にする ・背景を白以外にする
      **20px／700／白背景の3点は、この色とセットで固定すること。**変更する場合は色も見直す。
   3. 直前に #F58220 の帯を置く。**文字ではなく装飾なのでブランドオレンジをそのまま使える。**
      brand.md「ロゴのオレンジは面を塗る色ではない／文字には #B45309」に抵触しない使い方。 */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.25rem;              /* 20px（旧16px） */
  font-weight: 700;
  color: #E2761B;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 4px;
  border-radius: 2px;
  background: #F58220;             /* ロゴのブランドオレンジ。装飾のため文字色の制約を受けない */
}

/* §4-4 改訂（v1.18）：大見出しは「AIを入れる前に」1行・句読点なし（CEO決裁）。
   下限38px → 上限96px を clamp で連続的につなぐ。

   🔴 上限は 6rem（96px）＝CEO決裁 2026-08-12（課題#32解消）。
      96px はここ以外のどこにも書かない（1値で 5rem＝80px へ戻せる状態を維持）。
   ⚠ 下限 2.375rem（38px）はCEO決裁値（§4-3）・変更禁止。375px幅では 7.6vw＝28.5px < 38px で
      下限が効くため、モバイルの実効値は38pxのまま変わらない。
   ⚠ 新ヒーローは1行構成（8文字）。96pxでも360〜2560pxの全幅で折り返し・はみ出しが
      ないことを実測すること。 */
.hero__title {
  font-size: clamp(2.375rem, 7.6vw, 5rem);   /* 上限 96px→80px（2026-08-13 CEO指摘）。
     96pxは本文19px比5.05倍で、96→19の間に中間段がなく見出しだけが浮いていた。
     2行時代の80pxは「2行ぶんの塊」で重みがあったが、v1.18で1行になり塊の量が半減。
     量の不足を字の大きさで埋めようとしたのが誤り。補足文を24pxへ上げて中間段を作る。 */
  line-height: 1.18;
  /* ↓ 下限38pxは375px幅を基準にした値。360px以下では1行目(9文字=326.6px)が
        内寸328pxに対し余裕1.4pxしかなく描画誤差で4行目に折れるため、
        375px未満に限りわずかに縮める。375px以上は指定どおり38pxを維持する。 */
  letter-spacing: -0.045em;
  font-feature-settings: "palt" 1;   /* 大サイズのみ詰めを許可（§4-3） */
  margin-bottom: var(--sp-5);
}
/* 🔴 v1.23（2026-08-13 CEO指摘）：1行目「AIを入れる前に」は"問い"を作る言葉で、
   「なになに？」までは効くが、その答えが24pxの28文字にあり一瞬では受け取れなかった。
   答え（2行目）を問いと同じ大きさに引き上げ、視線が止まる前に理解が完了するようにする。
   ⚠ 2行目は9文字以内（360pxで1行に収まる上限）。 */
.hero__line { display: block; }
.hero__line--answer { color: #E2761B; }   /* 肩書と同色に統一（v1.24）。80pxは大きなテキストで3.0:1基準 */
@media (max-width: 374px) {
  .hero__title { font-size: clamp(2rem, 9.4vw, 2.375rem); }
}
/* .hero__seg（折返し位置の固定）は v1.18 で削除。
   大見出しが「AIを入れる前に」1行になり、分割の必要がなくなったため。 */

/* 🔴 v1.25（2026-08-13 CEO決裁）：ヒーローを画像1枚に置き換え。
   h1 が画像の入れ物になるため、見出しの余白・行間の指定は効かせない。 */
.hero__figure {
  margin: 0 0 var(--sp-6);
  line-height: 0;                 /* 画像の下に出る余分な隙間を消す */
}
.hero__img {
  display: block;
  width: 100%;
  height: auto;                   /* 縦横比を保つ。width/height属性と一致させレイアウトのずれを防ぐ */
  max-width: 2172px;              /* 画像の書き出し上限。これ以上に引き伸ばさない（伸ばすと輪郭がぼける）
                                     ⚠ 2026-08-14 の差し替えで元画像が横1921pxになったため、
                                       hero-2172 は1921→2172の拡大書き出しである。
                                       1921pxを超える画面ではわずかに甘くなる（実用上は問題ない範囲）。
                                       次に画像を作るときは横2172px以上で用意するのが望ましい。 */
}
.hero__body { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
  }
}
.hero__lead {
  /* 🔴 v1.22（2026-08-13 CEO指摘）：サイズ指定が無く本文19pxのままだった。
     この一文はCEO自身の言葉で書かれた中身そのもので、本文と同格なのは設計漏れ。
     大見出し80px → 補足24px → 本文19px の3段にして落差を埋める（80/24＝3.3倍）。 */
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);   /* 19px → 24px */
  line-height: 1.7;
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}
.hero__cta { margin-bottom: 0; }

/* 顔写真は小さく添える。白帯の上に置く（写真の背景が寒色のため） */
/* .hero__figure / .hero__photo / .hero__figcaption は
   顔写真を「代表について」へ移設したため削除（2026-08-10） */

/* --- §7-1 ページロード（CSSのみ・総尺920ms以内） --- */
@keyframes riseIn   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseInSm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }

.js .hero .anim {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: var(--ease);
}
.js .hero .anim--l1     { animation-name: riseIn;   animation-duration: 600ms; animation-delay: 0ms; }
.js .hero .anim--l2     { animation-name: riseIn;   animation-duration: 600ms; animation-delay: 90ms; }
.js .hero .anim--l3     { animation-name: riseIn;   animation-duration: 600ms; animation-delay: 165ms; }
/* ⚠ 2026-08-13：--l3 を定義せずにHTML側へ付与し、2行目が「場所は取るが透明のまま」になる
   不具合を出した。この仕組みは初期 opacity:0 → アニメーションで表示のため、
   animation-name が無い要素は永久に透明。**anim-- クラスを追加したら必ずここに定義を足すこと。** */
.js .hero .anim--lead   { animation-name: fadeIn;   animation-duration: 450ms; animation-delay: 300ms; }
.js .hero .anim--cta    { animation-name: riseInSm; animation-duration: 450ms; animation-delay: 420ms; }


/* ==========================================================================
   08. 3ステップ図（署名要素・§6-1・§2-1）
   モバイルは縦3段。横スクロールにしない。
   ========================================================================== */
/* margin-inline は 0。auto にすると、文章主体の .container 内で読み幅まで絞られたとき
   図だけが中央寄せになり、見出しの左端から離れてしまう（/profile/ で 205px→385px にずれていた）
   v1.16：上限を --container-wide（＝100%）から --block-max（1376px）へ。
   3枚のステップが1枚800px超の帯にならないようにする。余りは右に出す（左寄せ） */
.flow3 { max-width: var(--block-max); margin-inline: 0; }
.flow3__track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .flow3__track { flex-direction: row; align-items: center; gap: var(--sp-4); }
}

.step {
  flex: 1 1 0;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.step__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.step h3 { margin-bottom: var(--sp-2); }
.step__desc {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);                 /* 読ませたい説明文。階層はサイズでつける（§3-2） */
}

/* 「業務を整理する」＝ここが要。オレンジで強調し、やや大きく見せる */
.step--key {
  background: var(--brand-quiet);
  border: 2px solid var(--brand);
  padding: var(--sp-5) var(--sp-4);
}
/* 下地が淡橙(#FDE8D2)のとき --ink-soft は 4.49:1 で不足するため --ink に上げる */
.step--key .step__label,
.step--key .step__desc { color: var(--ink); }   /* 9.78:1 */

/* 矢印：文字として描くため色は --ink-accent（#F58220 を文字色に使わない §3-2） */
.flow3__arrow {
  align-self: center;
  color: var(--ink-accent);
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}
.flow3__arrow--h { display: none; }
@media (min-width: 768px) {
  .flow3__arrow--v { display: none; }
  .flow3__arrow--h { display: block; }
}

.flow3__caption {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink);
}


/* ==========================================================================
   08-5. 課題提起セクション（§6-8）
   決裁者の日常語で現状を描写する。解決策・サービス名は書かない。
   ========================================================================== */
.problems__lead {
  max-width: var(--measure);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink);               /* 白背景 11.64:1。読ませたい導入文 */
}
.problems { max-width: var(--measure); }
.problems li {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  color: var(--ink);               /* 白背景 11.64:1 */
}
.problems li:last-child { border-bottom: 0; }  /* 最終項目の下には引かない */
/* 各項目の頭に短いオレンジのダッシュ */
.problems li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--sp-4) + 0.9em);
  width: 12px; height: 2px;
  background: var(--brand);
}
/* 締めはリストから明確に切り離す */
.problems__close {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  font-size: var(--fs-body);
  color: var(--ink);
}


/* ==========================================================================
   09. お受けできること（3カード）
   ========================================================================== */
/* v1.16：上限 1376px・左寄せ。2560px で1枚811px（縦横比4.8:1の帯）になっていたのを
   1枚442px（同2.2:1の箱）で止める。根拠は先頭の --block-max のコメント参照 */
.cards3 { display: grid; gap: var(--sp-4); max-width: var(--block-max); margin-inline: 0; }
@media (min-width: 768px) {
  .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* 左右は --sp-4。.plan / .step と同じ内寄せ量にそろえる
     （囲みの中の文字が、囲みごとに違う位置から始まらないようにするため）。
     上下は --sp-5 のまま残し、縦の息は保つ */
  padding: var(--sp-5) var(--sp-4);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-small); line-height: 1.8; }
.cards3__after { margin-top: var(--sp-5); max-width: var(--measure); }


/* ==========================================================================
   10. 料金の目安（4プランカード・§6-3）
   金額は幅表記を維持し、確定額にしない。
   ========================================================================== */
/* 4枚の高さを揃える：グリッド行内でカードを引き伸ばし、カード内部を flex column にして
   最下段の「実装（構築）」を margin-top:auto で下端に固定する（§6-3・v1.4）。
   これにより「向いている方」の行数が違っても4枚の高さと底辺が揃う。 */
/* ⚠ 現在このクラスを使うマークアップは無い（4プランは /service/ の比較表 .cmp に統合済み）。
   将来また使うときのために、他の囲みと同じ上限・左寄せを先に入れておく（v1.16） */
.plans { display: grid; gap: var(--sp-4); align-items: stretch; max-width: var(--block-max); margin-inline: 0; }
@media (min-width: 600px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ⚠ この 1080px は「ビューポート幅」の分岐であり、外枠の上限（--container-wide）とは無関係。
   v1.13 までは両者がたまたま同じ 1080 だったが、v1.14 で外枠が 1440px になって別物になった。
   4枚を横に並べたときの1枚の幅は、ビューポート1080pxで236px（従来と同じ）。
   ここを --container-wide に追随させてはいけない（1440pxまで2列のままになる）。 */
@media (min-width: 1080px) {
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
}
.plan__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--sp-2);
}
.plan__tagline {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);                  /* プラン名直下の説明文。11.64:1 */
  margin-bottom: var(--sp-3);
}
.plan__price {
  font-family: var(--ff-mono);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-accent);           /* 白地 5.02:1 */
  letter-spacing: -0.01em;
}
.plan__price-label {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-soft);
}
/* 「向いている方」「実装（構築）」はカード下部に寄せ、高さの違うカードでも底が揃う */
.plan__for {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.75;
}
.plan__for dt, .plan__impl dt {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1);
}
.plan__impl {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.75;
}
.plans__after { margin-top: var(--sp-5); max-width: var(--measure); }
.plans__after p + p { margin-top: var(--sp-2); }


/* ==========================================================================
   11. ご相談の進め方（4ステップ）— 番号を使う唯一の場所（§6-4）
   ========================================================================== */
.steps { max-width: var(--measure); }
.steps__item {
  position: relative;
  padding-left: 60px;
  padding-bottom: var(--sp-6);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 8px;
  width: 2px;
  background: var(--rule);
}
.steps__num {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--brand-quiet);
  color: var(--ink);                  /* 9.78:1 */
  border-radius: 50%;
  font-family: var(--ff-mono);
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.steps__item h3 { margin-bottom: var(--sp-2); padding-top: 6px; }
/* 費用の境界を視覚化する（§6-4）。
   01「この段階でご相談の費用はいただきません」と 02「ここから有料のご契約となります」は
   同じ費用の話をする一組。⚠ まったく同じ見た目にし、どちらも同じ重みで読ませる。
   一方を弱めて他方を目立たせない（有料の明示は誠実性の要／無料の明示は安心の要）。 */
.steps__free,
.steps__paid {
  display: block;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);   /* 装飾のためコントラスト基準の対象外（§3-2） */
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);                     /* 白地 11.64:1 */
}
.steps__after { margin-top: var(--sp-6); max-width: var(--measure); }


/* ==========================================================================
   12. 3つの姿勢（§6-5）
   ⚠ 番号は付けない（3つに順序の意味はない。番号は「ご相談の進め方」だけ）
   ========================================================================== */
.stance { display: grid; gap: var(--sp-6); }
.stance__item { max-width: var(--measure); }
.stance__item h3 { margin-bottom: var(--sp-3); }
/* h3の頭に小さなオレンジの四角マーカー */
.stance__item h3::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 10px;
  background: var(--brand);
  border-radius: 2px;
  vertical-align: 0.08em;
}


/* ==========================================================================
   13. 代表について／運営者情報
   ========================================================================== */
/* 「代表について」：顔写真＋名乗り。ヒーローから移設した（DESIGN v1.8）
   モバイルは縦、768px以上は写真を左に置いて文章を右に流す */
.profile { max-width: var(--measure); }
.profile__figure { margin-bottom: var(--sp-4); }
.profile__photo {
  width: 112px; height: auto;
  border-radius: var(--radius);
  background: var(--paper-sunken);
}
@media (min-width: 768px) {
  .profile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-5); max-width: none; }
  .profile__figure { grid-row: 1 / span 3; margin-bottom: 0; }
  .profile__photo { width: 160px; }
  .profile > :not(.profile__figure) { max-width: var(--measure); }
}
.profile__name {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--ink);                  /* 名乗り。読ませたい 11.64:1 */
  margin-bottom: var(--sp-3);
}
/* 単独で置かれる誘導リンク。文中リンクではないのでタップ領域44pxを確保する */
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-3);      /* min-height の分だけ上マージンを詰め、見た目の間隔は据え置く */
  font-weight: 700;
}

.facts {
  margin-top: var(--sp-7);
  max-width: 640px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.facts th, .facts td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th {
  width: 8em;
  font-weight: 700;
  background: var(--paper-sunken);
  white-space: nowrap;
}
@media (max-width: 479px) {
  .facts th, .facts td { display: block; width: auto; }
  .facts th { border-bottom: 0; padding-bottom: var(--sp-1); }
  .facts td { padding-top: 0; }
}
.facts__after { margin-top: var(--sp-4); }


/* ==========================================================================
   14. クロージングCTA
   ========================================================================== */
.closing { max-width: var(--measure); }
.closing__lead { margin-top: var(--sp-4); }
.closing__promise {
  margin-top: var(--sp-5);
  /* 左右は --sp-4。.card / .plan / .step と同じ内寄せ量にそろえる */
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.closing__promise h3 { margin-bottom: var(--sp-3); }
.closing__promise li { position: relative; padding-left: var(--sp-4); font-size: var(--fs-body); }
.closing__promise li + li { margin-top: var(--sp-2); }
.closing__promise li::before {
  content: "";
  position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 2px;
  background: var(--brand);
}
.closing__flow { margin-top: var(--sp-6); }
/* 🔴 2026-08-12（DESIGN v1.12・修正4）
   /consultation/ は h1 の直下が h3 で見出しレベルが1段飛んでいたため h2 へ上げた。
   ただし「お申し込みからの流れ」はページの主題ではなく手順の見出しであり、
   セクション見出し（36px・M PLUS 2 800・オレンジ縦罫）の強度は不要かつ過大。
   そこで **レベルだけ上げ、見た目は h3 のまま**にする。
   ⚠ .section__head h2 ではないため、オレンジ縦罫（::before）は付かない。
   ⚠ トップページ側は h2「30分の無料相談」配下の h3 で飛びが無いので h3 のまま残す。
     よって h2・h3 の両方に同じ余白を当てておく（どちらでも同じ見た目になる）。 */
.closing__flow h2 {
  font-family: var(--ff-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}
.closing__flow :is(h2, h3) { margin-bottom: var(--sp-3); }
.closing__flow ol { counter-reset: cf; }
.closing__flow li { counter-increment: cf; position: relative; padding-left: 2.4em; }
.closing__flow li + li { margin-top: var(--sp-2); }
.closing__flow li::before {
  content: counter(cf, decimal-leading-zero) ".";
  position: absolute; left: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--ink-soft);
}
.closing__cta { margin-top: var(--sp-6); }
.closing__mail { margin-top: var(--sp-6); }


/* ==========================================================================
   15. SNS（copy-common.md 3.）
   リンクは遷移先であり、ページ読み込み時の外部リクエストは発生しない。
   ⚠「いずれも外部サイトが別タブで開きます。」は削除禁止。
   ========================================================================== */
.sns { max-width: var(--measure); }
.sns__list { margin-top: var(--sp-4); }
.sns__list li + li { margin-top: var(--sp-3); }
.sns__list a {
  display: inline-block;
  position: relative;
  padding-left: var(--sp-4);
  font-weight: 700;
}
.sns__list a::before {
  content: "";
  position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 2px;
  background: var(--brand);
}
.sns__note { margin-top: var(--sp-4); }


/* ==========================================================================
   16. フッター
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
/* 🔴 v1.16（2026-08-12）：フッターを「白の段」と「色帯」の2段に分けた。
   パディングは .site-footer ではなく __main 側に持たせる。
   ここを .site-footer に戻すと、色帯の下に白い余白が残って帯が浮く。 */
.site-footer__main {
  /* 🔴 上パディング（CEO決裁・2026-08-12）
     CEO指摘4：「各ページ最後のセクション → フッター『MAIFYラボ』の間が異常に空いている」。
     ⚠ ここも --section-y では動かない。最終セクションの下パディングとフッターの上パディングの
       合計で決まるため、セクション間だけ詰めてもこの1箇所は取り残される。
     旧：上64px（最終セクション下120＋64＝184px、本文末〜「MAIFYラボ」で209px）
     新：MB 上32px（64+32＝96px）／DT 上48px（80+48＝128px）
     DTの128pxは page-head の下（128px）と同値。ページの開きと閉じを同じ間で揃えた。
     下パディング（--sp-6）は据え置き。ブラウザ最下端との余白まで詰めると窮屈になるため。 */
  padding-block: var(--sp-5) var(--sp-6);
}
@media (min-width: 768px) {
  .site-footer__main { padding-block: var(--sp-6); }
}
.site-footer__name {
  font-family: var(--ff-display);
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.site-footer__meta { font-size: var(--fs-small); line-height: 1.9; color: var(--ink-soft); }
/* 法務部指定・削除禁止（個人情報保護法32条1項） */
.site-footer__address-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink);
}
/* 🔴 サイト内リンク（v1.16・CEO決裁 2026-08-12）
   旧：2列グリッド＋見出しラベル2本（「サイト内」「方針・規約」）。
       ラベル2行ぶんと2列の段組みでフッターが縦に伸び、
       ページ末尾でさらに縦スクロールを生んでいた。
   新：見出しラベルを廃止し、リンク6本を1行に横並びにする。
   ⚠ .site-footer__navtitle は使う場所が無くなったので規則ごと削除した。
     復活させるとまた縦に伸びる。 */
.site-footer__nav {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.site-footer__nav ul {
  display: flex;
  flex-direction: column;      /* モバイルは縦積み（CEO指示） */
}
@media (min-width: 768px) {
  .site-footer__nav ul {
    flex-direction: row;
    flex-wrap: wrap;           /* 幅が足りないときだけ2行目に折り返す */
    align-items: center;
    column-gap: var(--sp-5);   /* 32px。区切り線は引かず、余白だけで区切る */
  }
}
.site-footer__nav li + li { margin-top: 0; }
/* 🔴 当たり判定は 44px 以上（モバイルのタップ領域・WCAG 2.5.8）。
   デスクトップでも同じ高さで揃えておくと、横並びの行の高さが1本にそろう。 */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
}
/* モバイルは文字を少し大きく・行を離して押しやすくする（ソニーの実測に倣う）。
   ⚠ ここを縮めると 375px でリンクどうしが近づき、隣を誤って押す */
@media (max-width: 767px) {
  .site-footer__nav a { min-height: 48px; }
}

/* ==========================================================================
   16-2. フッター最下部の色帯（CEO決裁・2026-08-12）
   規約2本と著作権表示だけを置く。帯は画面いっぱい・中身は左端32px。
   🔴 帯の上では #F58220 も半透明の白も使わない（--brand-deep のコメント参照）。
   ========================================================================== */
/* 🔴 帯の色は3つのトークンで一括して決める（DESIGN.md §5-7 v1.17・2026-08-12）
   ===== 背景・文字・下線の3値をそろえて切り替える。個別に上書きしないこと =====

   Y案（現行・既定）  背景 #A5541B ＋ 白文字      … 5.41:1 ✅
   X案（CEO提案）     背景 #ED8000 ＋ 純黒文字    … 7.69:1 ✅（白文字は 2.73:1 ❌ で不可）

   ⚠ 背景だけを差し替えてはいけない。#ED8000 の上では
     ・白文字 2.73:1 ❌  ・チャコール#2F3A42 4.26:1 ❌  ・白のフォーカスリング ほぼ不可視
     となり、文字・下線・リングを同時に黒側へ倒さないと不合格になる。

   ▼ 切り替え方：theme.json の settings.custom の3値だけを書き換える。
       Y案 "band-bg":"#A5541B" / "band-ink":"#FFFFFF" / "band-underline":"rgba(255, 255, 255, .6)"
       X案 "band-bg":"#ED8000" / "band-ink":"#000000" / "band-underline":"rgba(0, 0, 0, .6)"
     CSSもテンプレートも触る必要はない。 */
/* 🔴 帯の高さ（v0.11.0・CEO指摘 2026-08-12「高さをとりすぎではないか」）
   旧：padding-block 24px ＝ デスクトップ 92px／375px 約177px
   新：padding-block  8px ＝ デスクトップ 60px（参考にしたソニーと同じ60px級）
   ⚠ タップ領域は a の min-height: 44px で確保している。帯（見た目）を薄くしても
     リンクの当たり判定は 44px を下回らない（8+44+8＝60px が下限）。
   ⚠ モバイルはリンク2本を縦積み→横並びに変更（下記）で1段減らして圧縮 */
.site-footer__legal {
  background: var(--band-bg);             /* #F58220 ロゴ色 — 純黒文字 8.10:1（2026-08-13 CEO最終決裁） */
  color: var(--band-ink);                 /* 純黒。透かさない（半透明にすると基準割れ） */
  padding-block: var(--sp-2);             /* 8px。上下16＋リンク44で帯は60pxに収まる */
}
.site-footer__legal .container {
  display: flex;
  flex-direction: column;                 /* モバイルは「リンク行」＋「©」の2段 */
  gap: var(--sp-2);
}
@media (min-width: 768px) {
  .site-footer__legal .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;       /* 規約は左端、著作権表示は右端（ソニー型） */
    gap: var(--sp-5);
  }
}
/* リンク2本はモバイルでも横並び（v0.11.0）。
   実測：プライバシーポリシー＋免責事項・各種方針は 375px（内寸343px）に収まる。
   万一収まらない環境のために wrap を保険で残す（つぶれて読めなくなるよりは折る） */
.site-footer__legal-nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--sp-3);
}
@media (min-width: 768px) {
  .site-footer__legal-nav ul { column-gap: var(--sp-5); }
}
.site-footer__legal-nav li + li { margin-top: 0; }
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                       /* タップ領域 */
  /* 🔴 2026-08-13 CEO指摘で 16px → 15px。同じ16pxでも比較用HTML（BIZ UDPGothic未読込で
     ヒラギノ描画）より実サイトのほうが大きく見えた。BIZ UDPGothicは字面が大きいため。
     ⚠ --fs-small（16px）の「注記はこれを下回らない」は法務注記（.cta-notice）に対する規定で、
        フッターのリンクは対象外。 */
  font-size: 0.9375rem;                   /* 15px */
  font-weight: 400;                       /* 🔴 CEO決裁（2026-08-13・⑤全部通常）。著作権表示も400。
                                             階層は色の濃淡ではなくサイズでつける（色を薄くすると基準割れ） */
  color: var(--band-ink);
  text-decoration-color: var(--band-underline);     /* 下線だけは薄くしてよい（文字ではない） */
  /* 🔴 2026-08-13 CEO指摘：サイト共通の a は 2px だが、帯の中では太く見える。1px に。 */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}
.site-footer__legal a:hover { text-decoration-color: var(--band-ink); }
/* 🔴 既定のフォーカスリング（--focus ＝ #B45309）は帯の上でほぼ見えない。
   帯の中だけ本文と同じ色（--band-ink）に差し替える。
   Y案なら白/#A5541B ＝ 5.41:1、X案なら黒/#ED8000 ＝ 7.69:1。 */
.site-footer__legal a:focus-visible {
  outline: 3px solid var(--band-ink);
  outline-offset: 2px;
}
/* 🔴 著作権表示は「純白のまま・小さく・細く」。
   半透明の白（70%＝3.26:1／80%＝3.81:1）はコントラスト不合格のため使わない。 */
.site-footer__copyright {
  /* 🔴 2026-08-13 CEO指摘：等幅フォントだと「© 2026 MAIFYラボ」の © と数字の後ろに
     余分な空きが出る（全文字が同じ幅になるため）。本文と同じフォントに戻す。 */
  font-family: inherit;
  font-size: var(--fs-label);             /* 14px（リンク16pxより小さい） */
  font-weight: 400;                       /* リンクと同じ400（2026-08-13 CEO決裁・全部通常） */
  color: var(--band-ink);
  white-space: nowrap;
}


/* ==========================================================================
   17. スクロールリビール（§7-2）＋ 必須の保険（§7-4）
   対象は3ステップ図と料金カードだけ。他のセクションには付けない。
   ========================================================================== */
/* 保険0：main.js が404・キャッシュ破損・スクリプトブロッカーで読めない場合でも、
   3秒後にCSSだけで必ず表示させる（DESIGN.md §7-4「要素が消えたまま残らない」）。
   main.js が動けば .is-in が付き、遅延が 0ms に上書きされて即座に組み上がる。 */
.js .reveal > * {
  opacity: 0;
  transform: translateY(12px);
  animation: riseInSm 450ms var(--ease) 3s both;
}
.js .reveal.is-in > * { animation-delay: 0ms; }
.js .reveal.is-in > *:nth-child(1) { animation-delay: 0ms; }
.js .reveal.is-in > *:nth-child(2) { animation-delay: 80ms; }
.js .reveal.is-in > *:nth-child(3) { animation-delay: 160ms; }
.js .reveal.is-in > *:nth-child(4) { animation-delay: 240ms; }
.js .reveal.is-in > *:nth-child(5) { animation-delay: 320ms; }
.js .reveal.is-in > *:nth-child(6) { animation-delay: 400ms; }
.js .reveal.is-in > *:nth-child(7) { animation-delay: 480ms; }

/* 保険1：JSが動かない環境（.no-js のまま）では opacity:0 を一切適用しない
   → .js 接頭辞により自動的に無効。念のため明示的に打ち消す */
.no-js .hero .anim,
.no-js .reveal > * { opacity: 1 !important; transform: none !important; animation: none !important; }

/* 保険2：動きを減らす設定。見出しが消えたままにならないことを最優先する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero .anim,
  .js .hero .anim,
  .reveal > *,
  .js .reveal > *,
  .js .reveal.is-in > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* 🔴 浮き上がりの【移動】はさせない。影だけで「押せる」ことを伝える。
     ⚠ box-shadow は消さないこと。動きを消したうえで手がかりまで消すと、
       ホバーしても何も起きないボタンになる。 */
  .btn-cta:hover, .btn-cta:focus-visible { transform: none !important; }

  /* 目を引かせるCTA（2026-08-26）。
     🔴 上の一括指定（iteration-count:1）だけでは【1回は動いてしまう】。
        動きに敏感な方には、その1回も見せない。完全に止めて、塗りだけを残す。
     ⚠ 色と塗りは残すこと。動きを消しても「目立つボタン」であることは変わらない。
     ⚠ box-shadow を none にするのは【静止時の脈の光】を消すためであり、
       上のホバー時の影は :hover 側の指定が後から上書きするので残る。 */
  /* 🔴 拡大縮小もきらーんも完全に止める。塗りと文字色だけを残す。
     ⚠ transform も打ち消すこと。止めた瞬間の大きさで固まらないようにする。 */
  .btn-cta--pulse { animation: none !important; transform: none !important; }
  .btn-cta--pulse::after { content: none !important; }

  /* 🔴 ヘッダーCTAの「畳む」動き（v0.63.0）も止める。
     transition を切ると、幅も余白も visibility も【その場で切り替わる】。
     ナビは一瞬で移動するが、動きに敏感な方にはそのほうが安全である。
     ⚠ transition-delay も一緒に初期化されるため、visibility の 0.22秒待ちも消える。
       ＝畳み終わりを待たずに即座にフォーカス対象から外れる。これが正しい。 */
  .site-header__cta { transition: none !important; }
}


/* ==========================================================================
   18. 印刷（§6-6：稟議書への添付を前提）
   ========================================================================== */
@media print {
  .site-header, .skip-link, .btn-cta { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; line-height: 1.7; }
  .section, .section--warm { background: #fff !important; padding-block: 12pt; }
  .card, .plan, .step, .closing__promise, .steps__free, .steps__paid, .steps__num, .step--key {
    background: #fff !important; box-shadow: none !important;
  }
  .hero { padding-block: 12pt; }
  a { text-decoration: underline; }
  a[href^="/"]::after { content: " (https://maifylab.jp" attr(href) ")"; font-size: 9pt; }
  .facts { page-break-inside: avoid; }
}


/* ==========================================================================
   19. ページ別（下層ページ）
   ⚠ トークン・共通コンポーネント（.btn-cta / .card / .facts / .steps / .section 等）は
      再定義しない。ここには下層ページ固有の要素だけを置く。
     19-1. 共通：ページ見出し
     19-2. /service/
   ========================================================================== */

/* --- 19-1. 共通：ページ見出し ------------------------------------------- */
/* 🔴 ページ見出し領域の上下（CEO決裁・2026-08-12）
   CEO指摘4：「パンくず下のページタイトル（h1）→ 次のセクションの間が異常に空いている」。
   ⚠ ここは --section-y では動かない。page-head 自身の padding-bottom が効いているため、
     セクション間だけ詰めてもこの1箇所は取り残される。だから個別に下げる。
   旧：MB 80/64px・DT 120/80px（→ 次のセクションまで MB 144／DT 200px）
   新：MB 64/48px・DT  80/48px（→ 次のセクションまで MB 112／DT 128px）
   下をセクション間（MB128／DT160）より意図的に小さくしているのは、
   h1＋リードと第1セクションが「導入とその続き」の関係にあり、
   対等なセクションどうしの境目より近いほうが正しく読めるため。 */
/* 🔴 v1.27（2026-08-13 CEO指摘「パンくずとヘッダーの間の空白が広すぎ、なくていい」）
   上余白を モバイル64px→16px／デスクトップ80px→24px に。
   ⚠ 原因は**2つの余白の重なり**だった：.page-head の上パディング（80px）に
     .breadcrumb 自身の padding-top（24px）が加算され、実質104pxになっていた。
     下の .breadcrumb の padding-top も 0 にしてある。**片方だけ直すと再発する。**
   ⚠ 下側（見出しと本文の間）の48pxは変更しない。詰めると見出しが本文に張り付く。 */
.page-head { padding-block: var(--sp-3) var(--sp-6); }
@media (min-width: 768px) {
  .page-head { padding-block: var(--sp-4) var(--sp-6); }
}
.page-head h1 {
  font-size: var(--fs-h1);            /* モバイル36px／デスクトップ40px（v1.26で56pxから） */
  line-height: 1.25;
  letter-spacing: -0.035em;
  position: relative;
  padding-left: var(--sp-4);
}
.page-head h1::before {               /* 見出し左のオレンジ縦罫（§3-3-2） */
  content: "";
  position: absolute;
  left: 0; top: 0.16em; bottom: 0.16em;
  width: 4px;
  background: var(--brand);
  border-radius: 2px;
}
.page-head__lead {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink);
}
.page-head__lead p + p { margin-top: 1.2em; }

/* パンくず */
.breadcrumb {
  padding-top: 0;                    /* v1.27：page-head 側の上余白と二重になっていた */
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "／"; margin-right: var(--sp-2); color: var(--rule-strong); }
/* パンくずのリンクは単独のナビゲーション。当たり判定を44pxに広げる。
   負のマージンで相殺し、見た目の行の高さは変えない */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
}

/* 本文ブロック（条文・説明文の基本形） */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.2em; }
.prose h3 { margin-top: var(--sp-6); }
.prose dt { font-weight: 700; margin-top: var(--sp-4); }
.prose dd { margin-top: var(--sp-1); }
.prose ul li,
.prose ol li { position: relative; padding-left: var(--sp-4); }
.prose ul li + li,
.prose ol li + li { margin-top: var(--sp-2); }
/* 項目がリンクだけの箇条書き（法務ページの目次など）は当たり判定を確保する。
   文章の途中に置かれたリンクは対象外（そちらは行の高さのままでよい） */
.prose li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-block: -10px;
}
.prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.9em;
  width: 10px; height: 2px;
  background: var(--brand);
}
.prose ol { counter-reset: pl; }
.prose ol > li { counter-increment: pl; padding-left: 2.2em; }
.prose ol > li::before {
  content: counter(pl) ".";
  position: absolute; left: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--ink-soft);
}

/* --- 19-2. /service/ ---------------------------------------------------- */
/* 比較表：ページ全体ではなく、この容器の中だけを横スクロールさせる */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* v1.16：上限 1376px・左寄せ。table には width:100% が効いているため、
     枠を100%にした結果 2560px では表が2481px まで伸びて1セルが間延びしていた。
     ⚠ 表の自然幅は実測1014px。1376px は自然幅より広いので、
       セルの折返しが増える・列が潰れるといった副作用は起きない。 */
  max-width: var(--block-max);
  margin-inline: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  /* スクロール影：右端に影が出ている＝まだ右に続く、の視覚的合図。
     local の白グラデが中身と一緒に動き、端に着くと scroll の影を隠す。
     OSのオーバーレイ・スクロールバー（自動で消える設定）でも切れ目に気づける */
  background-color: var(--paper);
  background-image:
    linear-gradient(to right,  var(--paper) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,   var(--paper) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0    50%, rgba(47, 58, 66, .22), rgba(47, 58, 66, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(47, 58, 66, .22), rgba(47, 58, 66, 0));
  background-position: left center, right center, left center, right center;
  background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  /* スクロールバーを常時表示（自動で消える設定の環境でも見える） */
  scrollbar-width: auto;
  scrollbar-color: var(--rule-strong) var(--paper-sunken);
}
.table-scroll::-webkit-scrollbar { height: 12px; }
.table-scroll::-webkit-scrollbar-track {
  background: var(--paper-sunken);
  border-top: 1px solid var(--rule);
}
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 6px;
}
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* 表の上に置くスクロール案内 */
.table-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-soft);
}
.table-hint::after {
  content: "→";
  color: var(--ink-accent);
}
/* 表が収まりきる幅では案内を出さない。
   ⚠ この境界値は .cmp の実測幅に依存する。**表の文言を変えたら測り直すこと。**
   2026-08-10：行見出しを「月の対応時間（上限の目安）」に変更したことで
   表の実測幅が 890px → 1014px に広がり、旧値980pxでは 980〜1000px の範囲で
   「あふれているのに案内が出ない」状態になっていた。実測して 1020px に更新。
   （1000pxではあふれ／1020pxで収まる、を実測で確認） */
@media (min-width: 1020px) {
  .table-hint { display: none; }
}
.cmp { min-width: 720px; }            /* 4プラン＋項目名が潰れない最小幅 */
.cmp th, .cmp td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-size: var(--fs-small);
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp th:last-child, .cmp td:last-child { border-right: 0; }
.cmp thead th {
  background: var(--paper-sunken);
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
}
.cmp tbody th {
  background: var(--paper-sunken);
  font-weight: 700;
  white-space: nowrap;
  width: 11em;
}
.cmp .cmp__price {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--ink-accent);           /* 白地 5.02:1 */
  white-space: nowrap;
}
.cmp .cmp__hours {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--ink);
}
.table-note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); }

/* プラン詳細 */
.plan-detail + .plan-detail { margin-top: var(--sp-7); }
.plan-detail__head {
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--brand);
}
/* 🔴 v1.26（2026-08-13）：プラン名は **h3要素** なのに --fs-h2 で描いていた。
   親のセクション見出し h2「各プランの詳細」と1pxも違わず、
   「親と同格で潰れている」状態だった（36px ＝ 36px）。
   --fs-h3 に下げ、セクションh2(30px) → プラン名(22px) の階段を作る。
   ⚠ 目立たなくなるわけではない。プラン名には
     ①ディスプレイ書体（M PLUS 2・800）②直下のオレンジ2px罫（.plan-detail__head）
     という、他のh3には無い2つの目印がすでに付いている。大きさで主張する必要がない。 */
.plan-detail__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.plan-detail__price {
  margin-top: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-accent);
}
.plan-detail__body { margin-top: var(--sp-4); max-width: var(--measure); }
.plan-detail__body dl { margin-top: var(--sp-3); }
.plan-detail__body dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}
.plan-detail__body dd { font-size: var(--fs-body); line-height: 1.9; }

/* よくあるご質問 */
.faq { max-width: var(--measure); }
.faq__item { padding-block: var(--sp-5); border-bottom: 1px solid var(--rule); }
.faq__item:first-child { padding-top: 0; }
.faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq__q {
  position: relative;
  padding-left: 1.8em;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
}
.faq__q::before {
  content: "Q.";
  position: absolute; left: 0;
  font-family: var(--ff-mono);
  color: var(--ink-accent);           /* 白地 5.02:1 ／ クリーム地 4.73:1 */
}
.faq__a {
  position: relative;
  margin-top: var(--sp-2);
  padding-left: 1.8em;
  font-size: var(--fs-body);
}
.faq__a::before {
  content: "A.";
  position: absolute; left: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: var(--ink-soft);
}

/* --- 19-3. /profile/ ---------------------------------------------------- */
/* 顔写真はトップと同じファイルを流用。プロフィールページでは大きめに置く */
.profile-hero { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 768px) {
  .profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
  }
}
.profile-hero__photo {
  width: 200px; height: auto;
  border-radius: var(--radius);
  background: var(--paper-sunken);
}
@media (min-width: 768px) {
  .profile-hero__photo { width: 280px; }
}
.profile-hero__role { font-size: var(--fs-small); }   /* 肩書き・読み仮名は本文色（--ink）のまま */
.profile-hero__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.025em;
  margin-block: var(--sp-2);
}
.profile-hero__name ruby rt { font-size: 0.45em; font-weight: 400; }
.profile-hero__tagline {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--brand);
}

/* 3ステップ図の縮小版（署名要素のモチーフ再利用・DESIGN.md §2-1） */
.flow3--mini { margin-top: var(--sp-5); }
.flow3--mini .step { padding: var(--sp-3); }
.flow3--mini .step--key { padding: var(--sp-4) var(--sp-3); }
.flow3--mini .step h3 { font-size: var(--fs-body); }
.flow3--mini .step__desc { font-size: var(--fs-small); }
.flow3--mini .flow3__arrow { font-size: 1.125rem; }
.flow3--mini .flow3__caption { font-size: var(--fs-small); }   /* 色は本体（.flow3__caption）の --ink を継ぐ */

/* 「やらないこと」の線引きリスト */
.dont { max-width: var(--measure); }
.dont li { position: relative; padding-left: var(--sp-5); }
.dont li + li { margin-top: var(--sp-4); }
.dont li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 14px; height: 14px;
  border: 2px solid var(--ink-soft);   /* 否定文にオレンジ（推奨の色）を使わない */
  border-radius: 3px;
}

/* --- 19-4. /about/ ------------------------------------------------------ */
/* 稟議書への添付を前提に、印刷時はA4 1枚に収める（DESIGN.md §6-7・品質の床#11）。
   印刷では「事業者情報・所在地の注記・事業内容・対応エリア」だけを残し、
   営業的な節（対象別のご案内・秘密保持・CTA）と操作用の要素を落とす。
   ⚠ 本ブロックは .page-about（/about/ の body）限定。他ページの印刷に影響させない。
   ⚠ フッターに要素を追加したら、必ず /about/ の印刷（A4 1枚）を再確認すること。 */
@media print {

  /* /about/ の印刷をA4 1枚に収めるため、SNSブロックを非表示にする。
     アイコンと注記は必ずセットで隠すこと（注記だけを隠すのは不可）。
     根拠：注記「いずれも外部サイトが別タブで開きます。」はリンクの挙動を説明するもので、
     紙にはリンクが存在しないため説明対象が消える。住所請求の一文は法定開示のため残す。 */
  .site-footer__sns,
  .site-footer__sns-note { display: none !important; }
  .page-about .no-print { display: none !important; }
  .page-about .site-footer__nav,
  .page-about .breadcrumb,
  .page-about .skip-link { display: none !important; }

  /* SNSアイコンと注記は必ずセットで隠す。
     注記「いずれも外部サイトが別タブで開きます。」はリンクの挙動の説明であり、
     紙では説明対象そのものが存在しないため。アイコンだけ残して注記を隠すことは禁止。
     ※フッターの住所請求の一文は個情法32条1項に基づく法定の開示のため、印刷時も必ず残す。 */
  .page-about .site-footer__sns,
  .page-about .site-footer__sns-note { display: none !important; }

  .page-about .page-head { padding-block: 0 6pt; }
  .page-about .page-head h1 { font-size: 16pt; padding-left: 0; }
  .page-about .page-head h1::before { display: none; }
  .page-about .page-head__lead { font-size: 9pt; margin-top: 4pt; }

  .page-about .section { padding-block: 6pt !important; }
  .page-about .section__head { margin-bottom: 4pt; }
  .page-about .section__head h2 { font-size: 11pt; padding-left: 0; }
  .page-about .section__head h2::before { display: none; }
  .page-about .section__sub { padding-left: 0; font-size: 8.5pt; margin-top: 2pt; }

  .page-about .facts--about { margin-top: 0; page-break-inside: avoid; }
  .page-about .facts--about th,
  .page-about .facts--about td { padding: 3pt 5pt; font-size: 9pt; line-height: 1.45; }
  .page-about .facts--about th { width: 7em; }

  .page-about .prose { font-size: 9pt; line-height: 1.55; max-width: none; }
  .page-about .prose > * + * { margin-top: 4pt; }
  .page-about .prose ul li + li { margin-top: 2pt; }

  .page-about .site-footer { padding-block: 6pt 0; border-top: 1px solid #000; }
  .page-about .site-footer__name,
  .page-about .site-footer__meta,
  .page-about .site-footer__address-note,
  .page-about .site-footer__copyright {
    font-size: 8pt; line-height: 1.5; margin-top: 2pt; padding-top: 0; border-top: 0;
  }
}


/* --- 19-5. /privacy/ ・ /legal/（法務部原稿ページ） --------------------- */
/* 条文は読みやすさ優先：本文18px・行間1.9・max-width 34em（.prose を踏襲） */
/* 🔴 v1.26（2026-08-13）：条文見出し（h2）が --fs-h3 で、直下の h3 と完全に同サイズだった
   （DT 22px ＝ 22px／MB 20px ＝ 20px）。見出しの階層が視覚的に消えていた。
   h3 は本文19px比1.16倍で**これ以上下げられない**ため、直せる方向は上しかない。
   → 全ページ共通の --fs-h2（DT 30px／MB 26px）に合わせ、/legal/ ・/privacy/ にも
     「ページ見出し → 条文見出し → 項見出し」の3段を作る。
   ⚠ ここだけモバイルも 20px → 26px に上がる。「スマホは現状維持」の唯一の例外。
     大小の好みではなく、親子が同サイズという構造上の欠陥の是正のため。 */
.legal-doc h2 {
  margin-top: var(--sp-7);
  font-size: var(--fs-h2);
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--brand);
}
.legal-doc > h2:first-child { margin-top: 0; }
.legal-doc h3 { margin-top: var(--sp-6); }
.legal-doc code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--paper-sunken);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
/* 原稿の見出しが長いページでは h1 を1段下げる（法務部原稿を一字一句維持するため）
   🔴 v1.26（2026-08-13）：この特例を **モバイルだけ**に限定した。
   もともとの理由は「33文字の見出しが 56px だと行数が暴れる」ことだった。
   v1.26 でデスクトップの h1 が 40px になり、その理由が消えたため、
   デスクトップでは他の7ページと同じ --fs-h1（40px）に戻す。
   ⚠ モバイル（36px）では33文字が4行に折れるため、26px の特例をそのまま残す。 */
@media (max-width: 767.98px) {
  .page-head--legal h1 { font-size: var(--fs-h2); line-height: 1.4; letter-spacing: -0.025em; }
}

/* --- 19-5b. /contact/（CEO指摘・2026-08-12） ---------------------------- */
/* 🔴 実測でわかったこと（staging・1280px）— 記録として残す。
     /contact/ の見出しサイズも項目間の余白も、他ページと「同じ数値」だった。
       h1 56px・h2 36px ……… /about/ /profile/ と完全一致
       h1の次まで200px／セクション間240px／本文末〜フッター144px
       ……… /about/ とも /privacy/ とも1pxまで一致
     つまり「他ページに合わせる」ための差分は存在しなかった。
     /contact/ だけ空きすぎに見えた原因は次の2つで、どちらも数値の不一致ではない。
       (1) 中身の密度。30分無料相談を /consultation/ へ移した結果、
           4セクションの中身が 245／335／338／266px しかないのに余白は他ページと同じ240px。
           1セクションの42〜48%が余白になっていた（/about/ には中身917px・余白21%の
           セクションがありリズムを作るため、同じ240pxでも目立たない）。
           → §5-1 の新スケール（全ページ共通）で解消。
       (2) 背景リズムの崩れ。§5-3「白 → クリーム → 白／クリームを連続させない」に反し、
           /contact/ だけ 白・白・クリーム・白 になっていて、白どうしの境目が2箇所あった。
           地の色が変わらない余白は「区切り」ではなく「ただの空白」に見える。
           → patterns/page-contact.php で 白・クリーム・白・クリーム に修正。
     🔴 h1・h2 の font-size は変えていない。/contact/ だけ小さくすると、CEOご指摘の
        「他ページと文字サイズを合わせる」に正面から反するため。
        密度と背景リズムを直せば、同じ36pxが正しい大きさに見える。
     🔴 /contact/ 固有の余白指定は置かない。1ページだけ違う数値を持たせると
        「直した所だけ不揃い」という別の破綻になる。 */

/* --- 19-6. 余白ユーティリティ（インラインstyleを置き換える） ------------- */
.mt-3 { margin-top: var(--sp-3); }
.mt-6 { margin-top: var(--sp-6); }

/* --- 19-7. アンカーの着地点（sticky ヘッダー68px の裏に隠さない） ------- */
#main, #disclaimer, #antisocial, #security, #pp-1 { scroll-margin-top: 84px; }

/* --- 19-8. フッターのSNSアイコンリンク ---------------------------------- */
/* インラインSVGのみ。外部ドメインへのリクエストは発生させない。
   ⚠ 各社マークは商標。自社アカウントへのリンクとしてのみ使用し、形状は改変しない
      （単色化のみ）。公式ボタン風の見せ方はしない。 */
.site-footer__sns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.site-footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* タップ領域 44×44px 以上を確保 */
  height: 44px;
  color: var(--ink-soft);      /* 白背景 5.34:1 */
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.site-footer__sns a:hover { color: var(--ink-accent); background: var(--paper-sunken); }
.site-footer__sns a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-footer__sns svg { width: 24px; height: 24px; display: block; }
/* 法務部指定・削除禁止。16px を下回らせない */
.site-footer__sns-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-soft);
}


/* ==========================================================================
   20. 改行品質（日本語の読みやすさ）
   ========================================================================== */
/* はみ出しの危険がある要素にだけ anywhere を限定して戻す */
a[href^="mailto:"],
a[href^="http"],
code,
.plan__price,
.cmp__price,
td, th {
  overflow-wrap: anywhere;
}
/* 見出しは行長を均等に、本文は泣き別れ・孤立行を抑制（未対応ブラウザでは無視される） */
h1, h2, h3, .plan__name, .plan-detail__name, .profile-hero__name { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
/* ヒーロー見出しは span で改行位置を固定済み。h1 に効いた balance が
   その指定と競合して行数を変えないよう、初期値に戻す（nowrap にはしない） */
.hero__title, .hero__line { text-wrap: wrap; }  /* .hero__seg は v1.18 で削除 */


/* ==========================================================================
   21. 業務改善のサイクル図（/service/ のみ・reference/improvement-cycle-design.md）
   ⚠ 2番目「整理する」の強調は3点セット：面クリーム／枠オレンジ2px／1.15倍
   ⚠ #F58220 を文字色に使わない。文字にオレンジを使うときは --ink-accent
   ========================================================================== */
.cycle__intro {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink);
}
/* 🔴 v1.21（2026-08-13 CEO決裁）：上限を --block-max（＝none・全幅）から 1000px へ。
   円環を中央寄せにした結果、円環は枠全体（1920px時1888px）の中心＝944px に、
   カード（.cycle__list・上限1000px・左寄せ）の中心は 500px に置かれ、
   同じ図なのに中心が2つある状態になっていた（CEO指摘「バランスが悪い」）。
   .cycle をリストと同じ 1000px に揃えることで、円環の中心とカード群の中心が一致する。
   ⚠ .cycle__list の 1000px を変えるとこの一致が崩れる。両者は必ず同じ値にすること。 */
.cycle { max-width: 1000px; margin-inline: 0; }

/* --- 円環のアニメーション（CEO指示・2026-08-10） -------------------------
   点線と矢印を、矢印の向き（時計回り）へ流す。
   ⚠ 図の内容（座標・ラベル・番号・色・強調ノード）は一切変更しないこと。
   動かすのは transform と opacity と stroke-dashoffset だけ。
   いずれもコンポジタで処理され、レイアウトの再計算を起こさない。
   prefers-reduced-motion: reduce の環境では §（下部の共通指定）で自動的に停止する */

/* 点線：破線6+空白8＝周期14。1周期ぶんずらして繋ぎ目を見せない。
   SVGの <circle> はパスが時計回りに進むため、オフセットを負にすると
   破線も時計回り＝矢印と同じ向きに流れる */
.cycle__path {
  animation: cycle-dash-flow 1.6s linear infinite;
}
@keyframes cycle-dash-flow {
  to { stroke-dashoffset: -14; }
}

/* 矢印：中心(400,360)まわりを回り続ける。区間は「中点 −14°」→「中点 +14°」。
   ±14° の根拠（3頂点 × 5矢印 × 5ノードを0.1°刻みで総当たりして決定）：
     ノードは既定 r=66、ハイライト中は 1.15倍で r=75.9 まで太る。
     ±14°のとき矢印の頂点とノード中心の最小距離は 80.7 で、**拡大時でも 4.8 の余裕**が残る。
     ±15°で余裕0.7、±16°以上は拡大したノードに潜り込む。
   5本を同位相で走らせるのが要点：ある矢印が次のノードに届いて区間の先頭へ戻る瞬間、
   隣の矢印がそのノードの直後に現れる。結果、**1本が円をくぐって出てきたように見え、
   後戻りせずに回り続ける**。 */
.cycle__arrow {
  transform-box: view-box;
  transform-origin: 400px 360px;
  animation: cycle-arrow-orbit 2.5s linear infinite;
}
@keyframes cycle-arrow-orbit {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

/* ノードのハイライト巡回（CEO指示・2026-08-10 改訂）：01「見る」から順に、1秒ごと・5秒で一周。
   既定はすべて同じ見た目（黒い面＋白文字・r=66）。ハイライト中だけ
   クリーム地＋オレンジ線＋濃い文字になり、ひと回り大きくなる。
   ⚠ 5ノードは既定が同一になったので、色をキーフレームで直接指定してよい
     （旧実装では02だけ見た目が違ったため drop-shadow しか使えなかった）。
   コントラスト：既定 白文字/#2F3A42 = 11.6:1、ハイライト #2F3A42/#FFF7ED = 10.9:1。いずれもAAA。 */
.cycle__node {
  transform-box: view-box;                 /* transform-origin は各ノードにインラインで指定 */
  animation: cycle-node-pop 5s linear infinite;
  animation-delay: calc(var(--n, 0) * 1s);
}
.cycle__node circle {
  animation: cycle-node-face 5s linear infinite;
  animation-delay: calc(var(--n, 0) * 1s);
}
/* 文字はアニメーションさせない。既定もハイライトも同じ #2F3A42
   （中央の「業務改善のサイクル」と同色）なので、動かす必要がない */

/* 大きさ：既定 r66 → ハイライト時は旧02と同じ r76 相当（76/66 ≒ 1.15） */
@keyframes cycle-node-pop {
  0%   { transform: scale(1); }
  4%   { transform: scale(1.15); }
  16%  { transform: scale(1.15); }
  24%  { transform: scale(1); }
  100% { transform: scale(1); }
}
/* 面と縁だけを切り替える。既定＝白地に黒縁／ハイライト＝クリーム地にオレンジ縁 */
@keyframes cycle-node-face {
  0%   { fill: #FFFFFF; stroke: #2F3A42; }
  4%   { fill: #FFF7ED; stroke: #F58220; }
  16%  { fill: #FFF7ED; stroke: #F58220; }
  24%  { fill: #FFFFFF; stroke: #2F3A42; }
  100% { fill: #FFFFFF; stroke: #2F3A42; }
}

/* ⚠ 共通の prefers-reduced-motion 指定（duration:0.01ms + iteration-count:1）だけでは、
   要素が「最終キーフレームの状態」で止まってしまう。この図の場合、
   矢印が20pxずれた位置に薄いまま固定される。ここで明示的に初期状態へ戻す */
@media (prefers-reduced-motion: reduce) {
  .cycle__path,
  .cycle__arrow,
  .cycle__node,
  .cycle__node circle { animation: none !important; }
  .cycle__path  { stroke-dashoffset: 0 !important; }
  .cycle__arrow { opacity: 1 !important; transform: none !important; }
  .cycle__node  { transform: none !important; }
  /* 色はHTML側の属性（白地・黒縁・黒文字）に戻る。ハイライトは出ないが、
     手順は下の .cycle__list（番号付きリスト）で読めるため情報は欠けない */
}

/* 円環：🔴 v1.19（2026-08-12 CEO決裁）：全幅（360〜2560px）で必ず表示する。
   旧実装は「デスクトップのみ表示・モバイルは display:none で縦一列リストに委ねる」
   （reference/improvement-cycle-design.md C-1 の判断）だったが、
   CEOより「核の図解なので絶対に非表示にしない」との決裁が出たため、
   非表示の分岐（既定 display:none ＋ min-width:768px で表示）を撤廃した。

   同決裁にあわせて上限も 680px → 453px（2/3）へ縮小。
   ⚠ SVGの中身（viewBox「88 36 624 602」・座標・ラベル・色・アニメーション）は
     一切変更していない。枠の上限だけを変えた比例縮小である。

   図中文字の実効サイズ（viewBox幅624・比例縮小の机上値）：
     453px時 … 番号 14.5px／ノード名 17.4px／中央タイトル 21.8px
     375px（内寸343px）時 … 番号 11.0px／ノード名 13.2px／タイトル 16.5px
     360px（内寸328px）時 … 番号 10.5px（サイト内最小）／ノード名 12.6px／タイトル 15.8px
   最小 10.5px は判読可能の下限目安 8px を上回るため比例縮小のまま採用（CEO報告済み）。
   手順の本文は下の .cycle__list でも読めるため、図の文字は「形の理解」の補助でよい。

   配置：🔴 v1.20（2026-08-12 CEO決裁）＝コンテナ内で中央寄せ（margin-inline: auto）。
   ⚠ 経緯を消さないこと（課題#33）：この図はかつて中央寄せだった。
     v1.15 で枠を100%化した際「中央寄せのため枠が広がるほど右へ逃げ、
     見出しの左端から 2560px 時に約900px 離れる」ことが実測で分かり、
     v1.16 で左揃え（margin: 0）に変更した（§5-4「左端が背骨」の維持が理由）。
     今回は v1.19 の縮小（680→453px）後の実際の見た目をCEOが確認したうえで
     「中央寄せ」を選択した＝左揃えの根拠を知ったうえでの上書き決裁である。
   ⚠ 下の .cycle__list（5項目リスト）は左寄せ（margin-inline: 0）のまま変えない。 */
.cycle__ring {
  display: block;
  width: 100%;
  max-width: 453px;   /* 680px × 2/3 ≒ 453px（2026-08-12 CEO決裁） */
  height: auto;
  margin: 0 auto var(--sp-7);  /* 中央寄せ（2026-08-12 CEO決裁・v1.20） */
}

/* 図の下の5項目リスト。
   🔴 v1.16：上限 1000px・左寄せ。
     枠100%では1枚985px（2560px時）まで伸び、「01 見る」＋1文しか入っていない箱が
     画面の4割を占めていた。中身は番号＋見出し（22px）＋説明1文（16px・25〜35字）で、
     1枚 488px あれば説明は1〜2行に収まる（実測）。488×2 + 間隔24 ＝ **1000px** を上限にした。
   ⚠ 5項目を2列に置くと最後の1枠が必ず空く。これは項目数由来で幅では解決しない。
     ただし1枚を488pxに戻せば空きも同じ幅まで縮み、目立たなくなる（985px → 488px）。
     3列にすると円環の5ノードとの対応（2列×2＋1）が崩れるため列数は変えない。
   ⚠ 上限を円環の幅（v1.18まで680px・v1.19から453px）まで詰めない：
     680pxですら2列で1枚328pxとなり説明文が3〜4行に折れてかえって縦に伸びる（実測）。
     v1.19で円環は453pxに縮んだが、このリストの上限1000pxは変えない（CEO指示・リスト不変）。 */
.cycle__list { display: grid; gap: var(--sp-3); max-width: 1000px; margin-inline: 0; }
@media (min-width: 768px) {
  .cycle__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
.cycle__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* 02 のみ強調（3ステップ図の「業務を整理する」と同じ扱い） */
.cycle__item--key {
  background: var(--paper-warm);
  border: 2px solid var(--brand);
}
.cycle__num {
  flex: 0 0 auto;
  font-family: var(--ff-mono);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.cycle__item--key .cycle__num { color: var(--ink-accent); }  /* クリーム地 4.73:1 */
.cycle__label { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
/* 「※ここが要」：見出しと同じ行に、ひと回り小さい赤で添える。
   nowrap にしてこの4文字だけが途中で折り返さないようにする。
   クリーム地で 5.40:1 ＝ AA合格 */
/* 🔴 v1.28（2026-08-13 CEO指示）：トップ3ステップ図の「ここが要」を赤の太字に。
   /service/ のサイクル図の「※ここが要」（.cycle__key）と同じ色・同じ役割にそろえる。
   ⚠ 赤 --ink-key は「ここが要」専用。**他へ広げないこと**（多用すると強調が効かなくなる）。
   ⚠ 親（.step__label）は --ink-soft（グレー）なので、色の指定は必須。 */
.step__key {
  font-weight: 700;
  color: var(--ink-key);        /* #C81E1E・白地5.74:1 */
}

.cycle__key {
  margin-left: 0.7em;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-key);
}
.cycle__desc { font-size: var(--fs-small); line-height: 1.8; color: var(--ink); }
/* v1.21：各段階の説明文は読ませたい本文のため --ink に統一（淡橙の上でも 9.78:1 で合格） */

/* モバイル：進行方向の矢印と「01へ戻る」ループ（既存3ステップ図と同じ作法） */
.cycle__item + .cycle__item { position: relative; margin-top: var(--sp-5); }
.cycle__item + .cycle__item::before {
  content: "▼";
  position: absolute;
  top: calc(var(--sp-5) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.125rem;
  line-height: var(--sp-5);
  color: var(--ink-accent);
}
/* 🔴 v1.26（2026-08-13 CEO指摘）：旧 .cycle__back を廃止し .cycle__loop に置き換え。
   旧：点線の水平線 ＋ 中央に「↑ 01 へ戻る」。
   CEO指摘「初見の人が見て何かわからない」。原因は3つ：
     ① 点線の水平線が「区切り線」に見え、リストの終わりの装飾と誤読される
     ② 記号が「↑」で、他の項目間の「▼」と別の記号になっていた
     ③ 等幅書体のため「01」と日本語の字間が不揃いで、1つの文に見えなかった
   新：他の項目間とまったく同じ「▼ ＋ 説明」の形にそろえる。線は引かない。
   ⚠ 文言は「01 へ戻る」→「01 に戻って、くり返します」。
     「▼」は他の箇所で “次はこれ” の意味で使っている。サイクルでは 05 の次が 01 なので
     ▼ 自体は正しいが、「戻る」という語と向きが食い違って読めた。
     「戻って、くり返します」まで書けば、▼（次はこれ）と文の意味が一致する。
   ⚠ 書体は等幅をやめ本文書体（--ff-body）に統一。番号だけは円環・項目の「01」と
     そろえるため .cycle__loop-num で等幅を残す。 */
.cycle__loop {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-accent);          /* 白地 5.02:1 */
}
/* ▼ は項目間の矢印（.cycle__item + .cycle__item::before）と同じ見え方・同じ占有量にする。
   あちらは 32px（--sp-5）の隙間に line-height:32px で中央配置しているため、
   ここでも line-height に --sp-5 を与えて縦のリズムを合わせる。 */
.cycle__loop::before {
  content: "▼";
  display: block;
  font-size: 1.125rem;
  line-height: var(--sp-5);
  color: var(--ink-accent);
}
.cycle__loop-num { font-family: var(--ff-mono); }
@media (min-width: 768px) {
  .cycle__item + .cycle__item { margin-top: 0; }
  .cycle__item + .cycle__item::before { content: none; }
  .cycle__loop { display: none; }   /* 円環が輪の閉じを表現するため不要 */
}

.cycle__caption {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink);
}


/* ==========================================================================
   22. お申し込みフォーム（Snow Monkey Forms・案件 I-2026-01-006 タスク25）
   仕様の正：deliverables/contact-form-spec.md

   ⚠ プラグイン既定の見た目のまま置かないこと。既定はグレー基調の細い枠で、
     本サイト（白ベース＋オレンジのアクセント＋18px本文）と明らかに別物に見える。
   ⚠ ここでもトークンを再定義しない。色・間隔・角丸はすべて既存の変数を使う。

   守る数値（brief.md §5 の継承制約）：
     ・タップ領域 44px 以上 … 入力欄の min-height と送信ボタンの padding で担保
     ・文字 16px 以上       … 16px 未満だと iOS が入力時に自動ズームする（実害がある）
     ・コントラスト 4.5:1   … 文字は --ink（白地11.64）、補助文は --ink-soft（白地5.34）
   ========================================================================== */

.maify-form { max-width: var(--measure-block); }

.maify-form__title {
  font-size: var(--fs-h2);
  line-height: 1.5;
  font-weight: 700;
}
.maify-form__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink);
}

/* --- JavaScript が無効なときの案内（2026-08-14）----------------------------
   <noscript> の中にあるため、JavaScript が有効な環境では描画されない。
   ⚠ 目立たせすぎない。通常の訪問者には決して見えないものであり、
     ここで独自の色や枠を作ると、サイト全体の見た目の規則が1か所だけ崩れる。 */
.maify-noscript {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink);
}

/* --- ハニーポット（§3-2 L1）------------------------------------------------
   人間には見えず、読み上げソフトにも渡さない欄。botだけが埋める。
   🔴 display:none にしないこと。単純に none だと「見えない欄は無視する」種類の
      botに読み飛ばされ、罠として機能しなくなる。画面外へ送るほうが効く。 */
.maify-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- フォーム本体 ---------------------------------------------------------- */
.snow-monkey-form { margin-top: var(--sp-5); }

/* 1項目＝1ブロック。ラベルを上、入力欄を下に積む（横並びにしない）。
   横並びはモバイルで必ず崩れ、ラベルと欄の対応も目で追いにくくなる。 */
.snow-monkey-form .smf-item {
  display: block;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.snow-monkey-form .smf-item:last-of-type { border-bottom: 1px solid var(--rule); }

.snow-monkey-form .smf-item__col--label { margin-bottom: var(--sp-2); }
.snow-monkey-form .smf-item__label__text {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
/* ラベル全体をクリック領域にする。ラベルを押しても欄にカーソルが入る */
.snow-monkey-form .smf-item__label label { cursor: pointer; }

.snow-monkey-form .smf-item__description,
.snow-monkey-form .smf-control-description {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);   /* 16px。注記もこれを下回らない */
  line-height: 1.8;
  color: var(--ink-soft);       /* 白地 5.34:1 */
}

/* --- 入力欄 ---------------------------------------------------------------- */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-textarea-control__control,
.snow-monkey-form .smf-select-control__control {
  width: 100%;
  min-height: 48px;             /* 44px 以上（タップ領域） */
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-small);   /* 16px 未満にしない（iOSの自動ズーム対策） */
  line-height: 1.6;
}
.snow-monkey-form .smf-textarea-control__control { min-height: 12rem; resize: vertical; }

.snow-monkey-form .smf-text-control__control::placeholder,
.snow-monkey-form .smf-textarea-control__control::placeholder { color: var(--ink-soft); }

.snow-monkey-form .smf-text-control__control:focus-visible,
.snow-monkey-form .smf-textarea-control__control:focus-visible,
.snow-monkey-form .smf-select-control__control:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* セレクトは既定の三角がOSごとにばらつくため、プラグインの矢印を使って
   自前で描く。矢印の分だけ右に余白を取る。

   🔴 2026-08-13 修正（CEO指摘「選択してください の前に ∟ のような文字が入っている」）
   ── 原因（staging と同一のHTML・CSSを実ブラウザで実測して確定）──
   プラグインの `dist/css/app.css` には **同じセレクタの宣言が2つ**ある。
       (1) .smf-form .smf-select-control__toggle { display:none }        ← 先に出てくる
       (2) .smf-form .smf-select-control__toggle {
             position:absolute; top:0; right:0; bottom:0; left:0;
             display:block; pointer-events:none; z-index:1 }             ← 後に出てくる
   詳細度は同じで (2) が後勝ちするため、**プラグインの矢印は隠れていない。**
   (2) の実体は「枠全体に重ねる透明レイヤー」で、矢印そのものは
   `.smf-form .smf-select-control__toggle:before`（6px・currentcolor・rotate45）が描く。

   旧テーマCSSは toggle 自体を10pxの矢印として `top:50%; right:16px` で置いていたが、
   プラグインの `left:0` / `bottom:0` は打ち消していなかった。
   絶対配置で left・right・width が同時に指定された場合（over-constrained）は
   LTR では **right が無視される**ため、矢印は右端ではなく**左端**に出ていた（＝オレンジの ∨）。
   さらにプラグインの `:before` も生き残り、10pxに縮んだ親を基準に位置がずれて
   左上に小さく描かれていた（＝CEOが見た ∟）。**記号が2つ見えていたのはこのため。**

   ── 方針 ──
   プラグイン本体（CSS・PHP）は更新で消えるため触らない。
   プラグインの構造（toggle＝重なりレイヤー／矢印＝:before）に**テーマ側を合わせる**。
   toggle は inset:0 のレイヤーのまま使い、矢印は :before を上書きして1つだけ描く。 */
.snow-monkey-form .smf-select-control { position: relative; display: block; }
.snow-monkey-form .smf-select-control__control { appearance: none; padding-right: 44px; }

/* toggle は「枠に重なる透明レイヤー」。ここには矢印を描かない。
   旧実装の名残（border・transform・margin）を明示的に打ち消す。 */
.snow-monkey-form .smf-select-control__toggle {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  transform: none;
  pointer-events: none;   /* クリックは下の <select> に通す */
}

/* 矢印はこの1本だけ。枠の右端・上下中央に置く。
   詳細度はプラグインの `.smf-form …__toggle:before` と同じ (0,2,1) だが、
   テーマCSSはプラグインCSSより後に読み込まれるため後勝ちする。 */
.snow-monkey-form .smf-select-control__toggle::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 18px;
  left: auto;
  bottom: auto;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border: 0;
  border-right: 2px solid var(--ink-accent);
  border-bottom: 2px solid var(--ink-accent);
  transform: rotate(45deg);
}

/* プラグインはフォーカス時に矢印を青（#3a87fd）へ変える。
   ブランド外の色なので、同じ詳細度 (0,3,2) の後勝ちで打ち消す。 */
.snow-monkey-form .smf-select-control__control:focus + .smf-select-control__toggle::before {
  border-right-color: var(--ink-accent);
  border-bottom-color: var(--ink-accent);
}

/* --- チェックボックス（プライバシーポリシーへの同意）------------------------ */
/* 実際のDOM（プラグインが出力する形）：
     .smf-label > label > .smf-checkbox-control > [input] + .smf-checkbox-control__label
   ⚠ 並べる役は .smf-checkbox-control（inputとラベル文字を包む span）。
     __label は文字だけの span なので、ここに flex を書いても効かない。 */
.snow-monkey-form .smf-checkbox-control {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;             /* タップ領域 */
  padding-block: 10px;
  cursor: pointer;
}
.snow-monkey-form .smf-checkbox-control__label {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}
.snow-monkey-form .smf-checkbox-control__control {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--ink-accent);
}
/* ラベル全体（文字を含む）が押せることを明示する */
.snow-monkey-form .smf-label label { display: block; cursor: pointer; }
.snow-monkey-form .smf-control-fieldset { border: 0; padding: 0; margin: 0; }
.snow-monkey-form .smf-control-legend {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

/* --- ラジオボタン（録音・録画への同意）------------------------------------- */
/* DOMの形はチェックボックスと同じ（クラス名だけ radio-button になる）。
     .smf-label > label > .smf-radio-button-control > [input] + __label
   ⚠ 同意・不同意は「どちらかを必ず選ぶ」設問なので、既定で選択しておかないこと。
     初期値を入れると、読まずに送った人の意思表示として扱うことになる。 */
.snow-monkey-form .smf-radio-buttons-control__control {
  display: grid;
  gap: var(--sp-2);
}
.snow-monkey-form .smf-radio-button-control {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;             /* タップ領域 */
  padding-block: 10px;
  cursor: pointer;
}
.snow-monkey-form .smf-radio-button-control__label {
  font-size: var(--fs-small);   /* 16px を下回らせない */
  line-height: 1.7;
  color: var(--ink);
}
.snow-monkey-form .smf-radio-button-control__control {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--ink-accent);
}

/* --- フォーム内の法務注記 --------------------------------------------------
   🔴 法務部の確定文面（2026-08-13）を置く場所。
      ・同意チェックボックスの直前 … 利用目的の説明
      ・送信ボタンの直前         … 無料相談である旨（--strong）
      ・録音・録画の設問の直前   … 録音・録画の案内
   ⚠ 16px（--fs-small）を下回らせないこと。読ませる前提の文である。
   ⚠ 項目（.smf-item）ではないため上下の罫線は付かない。注記と入力欄を
     見分けやすくするための意図的な差である。 */
.snow-monkey-form .maify-form__notice {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-soft);
}
.snow-monkey-form .maify-form__notice + .maify-form__notice { margin-top: var(--sp-3); }
.snow-monkey-form .maify-form__notice strong { color: var(--ink); }
/* 送信ボタン直前の注記。ここだけ本文色にし、縦罫で視線を止める。
   ⚠ 地色（背景）で強調しないこと。この注記は白の節（/consultation/）にも
     クリームの節にも出るため、背景で差を付けると片方で消える。 */
.snow-monkey-form .maify-form__notice--strong {
  margin-top: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--ink-accent);
  color: var(--ink);
}

/* --- 条件付きの注意書き（出張費）-------------------------------------------
   「ご住所（エリア）＝宮崎県外」×「ご希望の相談方法＝対面希望」のときだけ、
   相談方法の設問の直下に出す。出し入れは assets/js/form-conditional.js が行う。

   🔴 赤は既存の --ink-key（#C81E1E・白地 5.74:1）だけを使う。新しい色を作らない。
   ⚠ 色だけで伝えないこと。「⚠」の記号と枠線を必ず併用する（WCAG 1.4.1）。
      色が判別できない環境でも「※〜」の文と枠で、ふつうの注記と区別できる。
   ⚠ 入れ物（.maify-travelfee）は読み上げ用に常に置いてあり、中身が空のときは
     :empty で消える。要素ごと後から足すと読み上げソフトが変化に気づかない。 */
.maify-travelfee:empty { display: none; }
.maify-travelfee { margin-top: var(--sp-3); }
.maify-travelfee__note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: #FEF2F2;                      /* エラー表示と同じ淡い赤の地 */
  border: 2px solid var(--ink-key);
  border-radius: var(--radius);
  font-size: var(--fs-small);               /* 16px を下回らせない */
  line-height: 1.8;
  color: var(--ink-key);
}
/* ⚠ .maify-form__notice strong は本文色に落としているが、ここは赤のまま太字にする。
      この1文はコントラストと太さの両方で目立たせる必要がある。 */
.maify-travelfee__note strong {
  color: var(--ink-key);
  font-weight: 700;
}
.maify-travelfee__mark { flex: 0 0 auto; }

/* --- エラー表示 ------------------------------------------------------------
   ⚠ 色だけで誤りを示さない。「⚠」と文言を必ず添える（色覚に依存させない）。 */
.snow-monkey-form .smf-error-messages {
  margin-top: var(--sp-2);
  padding: 10px 14px;
  background: #FEF2F2;
  border-left: 4px solid var(--ink-key);   /* 白地 5.74:1 */
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-key);
}
.snow-monkey-form .smf-error-messages::before { content: "⚠ "; }
.snow-monkey-form [data-invalid="1"],
.snow-monkey-form [data-invalid="true"] { border-color: var(--ink-key) !important; }

.snow-monkey-form .smf-system-error-content,
.snow-monkey-form .smf-system-error-content-ready {
  margin-top: var(--sp-4);
  padding: 14px 16px;
  background: #FEF2F2;
  border-left: 4px solid var(--ink-key);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-key);
}

/* --- 進行状況（入力→確認→完了）-------------------------------------------- */
.snow-monkey-form .smf-progress-tracker {
  display: flex;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.snow-monkey-form .smf-progress-tracker__item { display: flex; align-items: center; gap: 6px; }
.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] { color: var(--ink); font-weight: 700; }
/* ⚠ 2026-08-13 実測で発見：まだ通っていない段（「確認画面」「完了画面」）の文字は
   プラグイン既定の `--_light-color-gray`＝#CCCCCC で、白地とのコントラストが **1.61:1**
   （WCAG AA 4.5:1 に大きく不足）。親の color を継承させる想定だったが、
   プラグインが `__item__text` に直接 color を当てているため継承されない。
   ここで --ink-soft（白地 5.34:1）に上書きする。 */
.snow-monkey-form .smf-progress-tracker__item__text { color: var(--ink-soft); }
.snow-monkey-form .smf-progress-tracker__item__number {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  /* ⚠ プラグイン既定は「白文字＋グレー背景」。当サイトは fallback.css を読まないため
     背景の変数が未定義になり、放置すると白文字が白地に沈んで数字が消える。
     背景と文字色を必ずここで与え直すこと。 */
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
}
/* 項目をつなぐ横線も、既定は未定義変数の背景色で消える */
.snow-monkey-form .smf-progress-tracker__item::before,
.snow-monkey-form .smf-progress-tracker__item::after { background-color: var(--rule); }
.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  background: var(--ink-accent);
  border-color: var(--ink-accent);
  color: var(--paper);          /* #B45309 の上の白 5.02:1 */
  font-weight: 700;
}
.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text { color: var(--ink); }

/* --- ボタン ----------------------------------------------------------------
   送信ボタンは .btn-cta と同じ骨格にそろえる（サイト内で押すものの見え方を1つに）。 */
.snow-monkey-form .smf-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
/* 🔴 セレクタを `.smf-action .` から始めること。
   プラグイン側が `.smf-action .smf-button-control__control` （詳細度0,2,0）で
   背景・枠線を指定しているため、クラス1つ（0,1,0）では負ける。
   ⚠ さらにプラグインの指定は fallback.css のカスタムプロパティに依存しており、
     当サイトは fallback.css を読み込まない。詳細度で勝てないと
     「変数が未定義 → 背景も枠線も無い、文字だけのボタン」になる（実際に踏んだ）。 */
.snow-monkey-form .smf-action .smf-button-control__control {
  display: inline-block;
  min-height: 56px;
  padding: 16px 32px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink-accent);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.snow-monkey-form .smf-action .smf-button-control__control:hover,
.snow-monkey-form .smf-action .smf-button-control__control:focus-visible {
  background: var(--brand);
  background-image: none;
  color: var(--ink-on-brand);   /* オレンジ面の上 5.48:1 */
}
/* 「戻る」は主要な行動ではないので、枠線を弱めて主従をつける。
   ⚠ 判別は data-action。プラグインは全ボタンに同じクラスを付けるため、
     クラス名では区別できない（Meta::the_meta_button が data-action だけを変える）。 */
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"] {
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"]:hover,
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"]:focus-visible {
  background: var(--paper-sunken);
  color: var(--ink);
}

.snow-monkey-form .smf-sending { opacity: .6; }

/* --- 送信中の見え方（2026-08-14 開発部・二重送信対策） ----------------------
   押した瞬間にボタンは disabled になる（プラグインの動作）。
   しかし既定の見た目のままだと「押せたのかどうか」が分からない。
   🔴 文字の色は薄くしない。opacity で全体を薄くするとコントラストが基準を割る。
      変えるのは背景と枠線とカーソルだけにして、文字は --ink のまま保つ
      （--ink は白 11.64 / 淡いグレー地でも十分な余裕がある）。 */
.snow-monkey-form .smf-action .smf-button-control__control[disabled] {
  background: var(--paper-sunken);
  border-color: var(--rule-strong);
  color: var(--ink);
  cursor: progress;
}
.snow-monkey-form .smf-action .smf-button-control__control[disabled]:hover {
  background: var(--paper-sunken);
  color: var(--ink);
}

/* 送信中・完了・失敗を文字で伝える領域。
   🔴 見た目のためだけの要素ではない。role="status" が付いており、
      読み上げソフトはここに入った文字を読み上げる。装飾目的で display:none にしないこと。 */
.maify-form__status {
  margin-top: var(--sp-3);
  padding: 12px 16px;
  background: var(--paper-warm);
  border-left: 4px solid var(--ink-accent);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink);            /* クリーム地 10.96:1 */
}
.maify-form__status[hidden] { display: none; }

/* --- 完了画面 --------------------------------------------------------------- */
.snow-monkey-form .smf-complete-content {
  padding: var(--sp-5);
  background: var(--paper-warm);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);            /* クリーム地 10.96:1 */
}
.snow-monkey-form .smf-complete-content p + p { margin-top: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .smf-button-control__control { transition: none; }
}


/* --- ヒーロー直下の補足（2026-08-15 CEO決裁） -----------------------------
   ボタンの直下に置く「押しても大丈夫」という材料。
   リード（.hero__lead）が押す理由、こちらが不安の解消。役割が違うので両方要る。
   ⚠ 本文より小さくするが 15px を下回らせない（読ませる意図があるため）。 */
.hero__note{
  margin: var(--sp-2) 0 0;
  font-size: .9375rem;      /* 15px */
  line-height: 1.8;
  color: var(--ink-soft);
}
@media (min-width: 768px){
  .hero__note{ font-size: 1rem; }
}


/* --- スマホのヒーロー：画像とリードの間を詰める（2026-08-15 CEO指摘） -------
   実機（iPhone・Safari）で、画像の直後のリード文が画面の下端で切れていた。
   原因は .hero__figure の下マージン 48px（--sp-6）と、リード下 48px。
   画像を切るのではなく【余白を詰める】ことで、リードとボタンを上へ引き上げる。
   🔴 画像・alt・文面は一切変更していない。PC（768px以上）も従来のまま。
   ⚠ 画像とリードは「主張 → 呼びかけ」の一組。近づけるほうが意味的にも正しい。 */
@media (max-width: 767.98px) {
  /* 🔴 2026-08-15 CEO指示（2回目）：画像の上下をさらに詰めた。
     あわせて画像そのものに焼き込まれていた余白（上40px・下31px）を
     トリミング済み。CSSと画像の両方で詰めている。 */
  .hero        { padding-block: var(--sp-2) var(--sp-6); }  /* 上 16px → 8px ／ 下 64px → 48px */
  .hero__figure { margin-bottom: var(--sp-2); }   /* 48px → 8px */
  .hero__lead   { margin-bottom: var(--sp-4); }   /* 48px → 24px */
  .hero__body   { gap: var(--sp-4); }             /* 48px → 24px */
}