@charset "UTF-8";
/* ============================================================
   ソラヒカリ 共通スタイル
   見た目の正本: sites\sorahikari\design.md（この CSS はそこから写した）
   2026-09-16 作成 / 2026-09-16 C版（明るく・やさしく・視認性よく）に書き直した
        / 2026-09-19 ページの型ごとの束を切り出した（design.md 第6-11節）
        / 2026-09-19 C2版（見栄えの作り直し。design.md 移行メモ (8)）――
          フォーム専用の規則を css\form-main.css へ切り出し、目次（.toc）を束から受け取った
        / 2026-09-23 A-昼5「夜と光」（design.md 第A5節）―― 地は夜、長い文章は <main class="… paper">
   外部の読み込みは1つも無い（フォント・アイコン・CSS・画像）。@import も使わない

   **これは全ページが読む共通のファイル。**
   1つの型のページだけが使う規則は、ここに置かずに束のファイルへ置く ――
     css\hj-main.css   … <main class="hj-main">（/hojokin/ とその下）
     css\pg-main.css   … <main class="pg-main">（/kiyaku/ /kimari/ /partner/ /erabikata/）
     css\form-main.css … <main class="form-main">（form\*.php の3画面）
     css\intro.css     … トップページだけの束（オープニング＋1画面目＋一日の図）
     css\sub.css       … トップ以外の全ページ（下層ページだけが使う共通）
   どのページも CSS は最大2本（共通＋束）。読む順番は「共通 → 束」で、
   （2026-09-23 から下層ページは sub.css を足した3本。共通 → sub → 束）
   束の側から共通を上書きする（!important は使わない）。
   広い画面（768px 以上）の上書きも、束の部品は束のファイルが自分で持つ。
   どちらに置くかはクラス名を全ページに grep して決める（design.md 第6-11節）。
   トップが使わず2つ以上の束が使う規則は css\sub.css（トップは読まない。第A5-8節）
   ============================================================ */

/* ---- 1. カスタムプロパティ（design.md 第A5-3〜A5-5節） ---- */
/* 既定＝夜。紙は sub.css の .paper、.on-dark は夜に戻す */
:root, .on-dark {
  /* --- 面が差し替える色（第A5-3節②） --- */
  --c-bg:          #22508A;
  --c-sky:         transparent;   /* 交互の地。夜は交互にしない（区切りは余白） */
  --c-bg-soft:     #295A96;
  /* 暖色の面はやめた（名前は残す）。夜は transparent（節ごとに面を替えない） */
  --c-sun-tint:    transparent;
  --c-head:        #F4F7FB;
  --c-text:        #DDE7F1;
  --c-text-weak:   #C6D6E6;   /* 注・日付。これより薄い文字色を作らない */
  --c-main:        #DDEBF8;
  --c-main-deep:   #0A192B;
  --c-main-tint:   #2F62A0;
  --c-link:        #E2EEFA;
  --c-text-on-dark:#0A192B;
  --c-line:        rgba(207,224,242,.18);   /* 飾りの線だけ（情報を担わせない） */
  --c-line-strong: #A4B8CC;   /* 枠（入力欄・選べる箱・表）。⚠ 字の色に使わない。#22508A で 3.99:1（2026-10-15） */
  --c-cta-edge:    transparent;
  /* ロゴのななめの抜き（＝光）の色。ロゴが載っている「地の色」を入れる（design.md 5-2）。
     既定はヘッダーの地。ほかの地の上では、その場所で --logo-gap を上書きする。
     ここを間違えると、抜きが地とずれて「光」が「段差」に見える */
  --logo-gap:      #1F4B82;
}
:root {
  /* --- どの面でも同じ色（第A5-3節①） --- */
  --c-sky-0:       #1F4B82;
  --c-sky-1:       #285A94;
  --c-sky-2:       #5068A0;
  --c-dusk:        #62568C;   /* 残照の帯。字の色に使わない */
  --c-night-0:     #22508A;
  --c-night-3:     #1A416F;
  --c-ink:         #F4F7FB;
  --c-paper:       #FBF7EF;
  --c-moon:        #CFE0F2;

  /* 日ざし。小さな形としてだけ使う。面（帯）・文字・線には使わない（design.md 2-3）。
     A-昼5 ではロゴの菱形と日ざしの帯の点だけ */
  --c-sun:         #E3A11F;

  /* 相談のボタンの金（第A5-13節） */
  --c-cta:         #F0B429;
  --c-cta-hover:   #FFC857;
  --c-cta-press:   #D99E1A;
  --c-cta-ink:     #0A192B;   /* ボタンの字（9.49:1） */

  --c-disabled-bg:   #DCE6EC;
  --c-disabled-text: #456170;  /* 地の上で 5.18:1 */

  --c-alert:       #A3221B;
  --c-alert-bg:    #FDF3F2;

  /* 仮置きの印。サイトのどこにも無い色（うすい紫）にしてある（design.md 2-4 の注）。字は面に関係なく固定 */
  --c-kari-bg:     #EFE0FA;
  --c-kari-line:   #6B3FA0;
  --c-kari-ink:    #1B3A4B;

  /* 写真の上の字の膜（第A5-9節） */
  --c-scrim:       rgba(26,65,111,.76);

  /* ロゴの中の金の菱形（＝日ざし）の色。design.md 5-2 の表では4か所とも同じ値。変えない */
  --logo-accent:   var(--c-sun);
  /* サイト名の字の絵とマークの大きさ。ヘッダー 22/36px（768px 以上 26/40px）、フッター 20/32px（2026-10-14 本人） */
  --logo-text-h:   22px;
  --logo-mark:     36px;

  /* --- 字体 ---------------------------------------------- */
  --f-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
            "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
            "Noto Sans JP", Meiryo, sans-serif;
  /* 表題（キャッチ・h1・h2・番号）。無い端末はゴシックに落ちる */
  --f-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
              "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", serif;

  /* --- 大きさ（スマホ。第A5-4節） --- */
  --fs-h1:   28px;   /* トップの h1 は intro.css */
  --fs-h2:   26px;   /* 紙は 24px */
  --fs-h3:   18px;
  --fs-lead: 17px;
  --fs-body: 16px;
  --fs-note: 14px;   /* 13px にしない。第三者提供の同意文がこの大きさで出る */
  --fs-btn:  17px;

  /* h1 の行間。h2 h3 は下で literal に上書きしている */
  --lh-tight: 1.3;
  --lh-body:  1.9;
  --lh-note:  1.7;

  /* --- 余白（8の倍数） ----------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;

  /* 節の上下余白だけは専用の変数（design.md 第A5-5節）。--s-* の並びは崩さない。
     上と下を別に持つ（design.md 移行メモ 6-a）。紙の値は sub.css の .paper */
  --sec-pad-t: 96px;
  --sec-pad-b: 64px;
  --h2-b:      32px;   /* h2 の下 */

  --pad-side:   20px;
  --w-text:    620px;
  --w-page:   1160px;   /* 中身の幅 */
  /* 表だけは本文幅（620px）を超えてよい。最大 880px（design.md 第4節・8-13(4)）。
     文章の1行の長さの決めごとは 620px のまま。表の行は文章ではない */
  --w-tbl:     880px;

  /* --- 角（第A5-5節。6px と 0 の2つだけ） --- */
  --r-s:  6px;   /* ボタン・入力欄・選べる箱・札 */
  --r-m:  0;     /* 写真・箱・表 */
  --r-l:  0;

  /* --- 追従バーのぶんの余白 ------------------------------ */
  /* design.md 8-3 の 68px に揃えた。.sticky-cta には min-height でこの値を持たせ、
     中身（線1px＋余白4px＋ボタン52px＋余白4px）はこの中に収まる。
     （.sticky-cta を触ったらこの値も直す。合っていないと本文の最後に重なる） */
  --h-stickybar: 68px;

  /* --- 動き ---------------------------------------------- */
  --t-fast: 90ms;
  --t-mid: 180ms;
  --t-slow: 300ms;
}

/* ---- 2. 土台 ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;   /* 保険。原因は都度つぶす */
  overflow-x: clip;     /* 2026-10-29: hidden だと html と body が「中で送る箱」になり、ヘッダーの固定（sticky）が効かない。clip は箱にならない。clip を知らない古いブラウザは上の hidden のまま */
}
html { -webkit-text-size-adjust: 100%; background: var(--c-night-3); }

/* 夜の地は1枚のグラデーション（第A5-3節） */
body {
  margin: 0;
  background: linear-gradient(to bottom, var(--c-night-0), var(--c-night-3));
  color: var(--c-text);
  font-family: var(--f-base);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: .02em;
}

/* 追従バーのぶんだけ本文の下を空ける（重なり防止。design.md 8-3） */
body.has-stickybar {
  padding-bottom: calc(var(--h-stickybar) + env(safe-area-inset-bottom));
}

/* 見出し（第A5-4節）。h1・h2 は明朝 600、h3 はゴシック 700。
   見出しの字間は .04em（design.md 3-2・3-3。C2版で .01em から広げた）。
   ⚠ 折り返しが2行になったときに先に戻すのはここ（.04em → .02em）。
     大きさを下げるのは最後（design.md 移行メモ (8) の ⑥-2） */
h1, h2, h3 {
  color: var(--c-head);
  line-height: var(--lh-tight);
  letter-spacing: .04em;
  font-weight: 700;
  margin: 0 0 var(--s-4);
  word-break: auto-phrase; text-wrap: balance;
}
h1, h2 { font-family: var(--f-mincho); font-weight: 600; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.35; margin-bottom: var(--h2-b); font-feature-settings: "palt"; }
h3 { font-size: var(--fs-h3); line-height: 1.5; letter-spacing: .02em; margin-bottom: var(--s-2); }

/* C2版の「4px の藍の線」はやめた（線は 7-2 の手元の灯りの1種類） */
/* 誤りの箱（.err-list）の見出しの上書きは css\form-main.css が持つ
   （フォームの3画面にしか出ないため。design.md 第6-11節） */

/* 1つの節の中に h2 がいくつも並ぶページ（フォーム・プライバシー・運営者）で、
   前の箱と見出しがくっつかないように。節の先頭の h2 には付けない（.band の余白があるため） */
main h2:not(:first-child) { margin-top: var(--s-7); }
/* h3 の上も空ける（C2版で足した。字の段差を余白でも作る。design.md 第4節） */
main h3:not(:first-child) { margin-top: var(--s-6); }
/* ただし箱の中の h3 には上の余白を当てない（箱の内側の余白と二重になる）。
   下の余白は触らない。
   ⚠ 頭の main を落とさないこと。落とすと (0,1,1) になり、すぐ上の
     main h3:not(:first-child)（:not() の中の :first-child が1つ数えられて (0,1,2)）に
     負けて、この打ち消しが当たらない。2026-09-19 に実物で当たっていないのを見つけて直した */
main .card h3, main .flow h3, main .area-note h3, main .honest-box h3 { margin-top: 0; }

p { margin: 0 0 var(--s-5); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s-5); padding-left: 1.4em; }
li { margin-bottom: var(--s-2); }

strong { color: var(--c-head); font-weight: 700; }
a { color: var(--c-link); }
a:hover { color: var(--c-head); }

/* 押せる高さ 44px を、行の高さを崩さずに稼ぐ（design.md 12-2） ----------------
   文の中・行の中にある文字リンクは、1行ぶん（18〜25px）しか押せない。
   インライン要素の上下 padding は「押せる範囲」と「背景」だけを広げ、
   行ボックスの高さ（--lh-body / --lh-note）には効かない。
   だから本文の行間・節の余白を 1px も動かさずに 44px を作れる。これを使う。
   ・display:inline-block にすると行の高さが変わるので、文の中では使わない。
     箇条書きで独立して立っているリンクだけ inline-block にしてある
     （.footer-links a と .form-foot li a の2か所。下の該当箇所に書いてある）。
   ・下線は文字のベースラインに付くので、padding を足しても見た目は動かない。
   足す量は「44px − いまの1行の高さ」の半分。1行の高さは字の大きさで決まるので、
   字の大きさごとにまとめる（幅375px での実測値。括弧は 直す前 → 直した後）。
   広い画面（768px 以上）では字が 1px 大きくなるぶん、どれも 1〜2px 余裕が増える。 */

/* 床（どこにも規則が無いときの最低線。design.md 12-2「規則は共通に1本だけ置く」）------
   <main> の中の p / li / dd の中の、ボタンでない文字リンク。16px の字なので上下 +12px。
   ⚠ :where() を :is() や main p a:not(.btn) に書き換えないこと。
     :where() の中は詳細度を 1 も足さない（この1本は (0,0,0)）。だからサイトでいちばん弱い
     規則になり、下に並ぶ部品ごとの規則が、書いた順に関係なく全部勝つ ――
     .note a（上9・下18）／.note-box a（上下14）／.form-foot li a（inline-block ＋ 上下10）／
     .toc a（block ＋ 上下8px。2026-09-19 に 12px の inline から変えた。design.md 8-16）。:is() や器のクラスで書くと (0,1,3) になって、それらを踏み抜く。
     これは「床」で、上書きの役ではない。除外（:not(.note) など）を書かずに済むのが狙い。
   ⚠ 下に並ぶ部品ごとの規則は1本も消さない（消すと 14px の字の分が失われる）。
   box-decoration-break: clone は、2行以上に折り返したときに行ごとに上下の詰め物を付ける
   （付けないと、上は1行目・下は最後の行にしか付かず、行ごとに測ると両方 44px に届かない）。
   背景も枠も無い文字リンクなので、行ごとに複製される飾りは無く、見た目は変わらない。
   :where() が読めない古いブラウザでは、この1本だけが無視される（ほかの規則は無事）。
   <main> の外（ヘッダー・パンくず・フッター・追従バー）は部品ごとの規則が持つ。 */
:where(main p, main li, main dd) a:where(:not(.btn)) {
  padding-top: 12px; padding-bottom: 12px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* 14px の字（1行 18.00px）。上下 +14px（パンくずの分は sub.css へ） */
.site-footer dl dd a:not(.btn) { padding-top: 14px; padding-bottom: 14px; }  /* 18〜22 → 46.00 */

/* 16px の字（1行 20.67px）。上下 +12px（.check-list は sub.css、.form-main は form-main.css へ） */
.hojokin-link a:not(.btn),
.honest-box p a:not(.btn)      { padding-top: 12px; padding-bottom: 12px; }  /* 20.67〜24.67 → 44.67 */

/* 注釈の箱（.note-box）の中のリンク。14px の字（1行 18.00px）なので上下 +14px。
   箱の内側の余白が 16px あるので、当たり判定は箱からはみ出さない */
.note-box a:not(.btn)          { padding-top: 14px; padding-bottom: 14px; }  /* 18.00 → 46.00 */

/* 注釈の中のリンク: 上を 14px にすると、運営者ページで
   すぐ上の電話ボタンとの間が 5.33px になった。下は次の節まで 300px 以上ある */
.note a:not(.btn)              { padding-top: 9px; padding-bottom: 18px; }   /* 18.00 → 45.00 */

/* 長い英数字（メール・URL）で横にはみ出さない */
p, li, td, th, dd, dt, a, .breakable { overflow-wrap: anywhere; }

img, svg, table { max-width: 100%; }

/* フォーカスは全部これ1つ（3px の輪。色は面で替わる） */
:focus-visible {
  outline: 3px solid var(--c-main);
  outline-offset: 2px;
}

.wrap { max-width: calc(var(--w-page) + var(--pad-side) * 2); margin: 0 auto; padding: 0 var(--pad-side); }
.narrow { max-width: var(--w-text); margin-left: auto; margin-right: auto; }

.band { padding: var(--sec-pad-t) 0 var(--sec-pad-b); }
.band--sky  { background: var(--c-sky); }   /* 夜は transparent */
.band--sun  { background: var(--c-sun-tint); }

/* 締めの CTA の節だけ中央揃え（design.md 3-4） */
.band--closing { text-align: center; }
.band--closing h2 { display: inline-block; text-align: left; }
.band--closing .btn-stack { text-align: left; }

.lead { font-size: var(--fs-lead); }
.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-weak); }
.note-box {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--c-text);
}
.tnum { font-variant-numeric: tabular-nums; }
.mt-4 { margin-top: var(--s-4); }

/* 見出しの折り返し。スマホだけで折る（文字数ではなく、文の意味の切れ目で折る） */
.sp-only { display: inline; }

/* .visually-hidden と .js-only は form-main.css へ移した */

/* ---- 3. 仮置きの印（design.md 第10節。本番用に分けない） ---- */
/* 印は中の文字（二重中かっこの差し替え札）そのもの。
   ::before で札の名前をもう一度足すと、画面で二重に出て読めなくなるので足さない。
   この CSS に差し替え札そのものを書かない（棚卸しの grep が CSS まで数えてしまうため） */
.kari {
  background: var(--c-kari-bg);
  color: var(--c-kari-ink);
  border: 2px dotted var(--c-kari-line);
  border-radius: var(--r-s);
  padding: 0 4px;
  font-weight: 700;
  font-style: normal;
}
/* .kari--block は sub.css（トップは使わない） */

.kari-warn-bar {
  position: sticky; top: 0; z-index: 9000;
  background: var(--c-alert); color: #FFFFFF;
  font-size: 14px; font-weight: 700;
  padding: var(--s-2) var(--pad-side); text-align: center;
  line-height: var(--lh-note);
}

/* ---- 4. ヘッダー（全ページ夜。第A5-12節） ---- */
/* 日ざしの帯は sub.css（トップでは出さない） */
.site-header {
  background: var(--c-sky-0);
  color: var(--c-head);
  padding: var(--s-2) 0;
  /* C2版の下端 2px の藍は外した */
}
/* 2026-10-29 本人「スクロールしても固定するように」。パソコンの幅だけ上に固定する
   （スマホは下の追従バー .sticky-cta があるので、上も固定すると読む場所が狭くなる）。
   ページ内の飛び先が固定したヘッダーの下に隠れないよう、html に scroll-padding-top を足す */
@media (min-width: 768px) {
  .site-header { position: sticky; top: 0; z-index: 8000; box-shadow: 0 2px 10px rgba(10,25,43,.35); }
  html { scroll-padding-top: 112px; }   /* ヘッダーの高さ 103px（1366px で実測 2026-10-29）＋余白 */
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  /* 狭い画面では2段に折れる。そのときの段の間は --s-2（8px）で詰める。
     広い画面（768px 以上）は1段に収まるので --s-3 に戻す（design.md 8-1） */
  gap: var(--s-2); min-height: 60px; flex-wrap: wrap;
}
.site-name {
  margin: 0;
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--c-head);
}
/* 全ページともサイト名はリンクにしていない（2026-09-16）。
   ホームへの道はパンくずとフッターの2本に任せる。
   この1行は、リンクに戻したときに下線を出したくないための備え */
.site-name a { color: var(--c-head); text-decoration: none; }
.site-name .site-name-text { display: block; }

/* ロゴのアイコン（design.md 5-2。案1「切り取られた光」）。
   面は currentColor のベタ、ななめの抜きはまわりの地の色（--logo-gap）、
   日ざしは金の菱形（--logo-accent）。大きさは --logo-mark */
.logo-mark { flex: 0 0 auto; width: var(--logo-mark); height: var(--logo-mark); display: block; color: var(--c-main); }
/* サイト名の字（案7。2026-10-14 本人）。高さだけ決め、幅は絵の比のまま */
.logo-text { display: block; height: var(--logo-text-h); width: auto; }
/* 副題と受付時間は、狭い画面では出さない（design.md 8-1「入り切らないときの逃げ」の1つめ）。
   広い画面（768px 以上）では出す */
.site-sub {
  display: none; margin-top: 2px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  color: var(--c-text-weak);
}
.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.header-tel { text-align: right; }
.header-tel .tel-hours { display: none; font-size: var(--fs-note); color: var(--c-text-weak); }

/* ---- 5. ボタン（金＝相談／線＝それ以外） ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-s); border: 0;
  font-family: inherit; font-size: var(--fs-btn); font-weight: 700; line-height: 1.2;
  letter-spacing: .04em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) linear;
}
/* 金。縁は紙の上だけ（--c-cta-edge） */
.btn--cta {
  min-height: 56px;
  background: var(--c-cta); color: var(--c-cta-ink);
  border: 1px solid var(--c-cta-edge);
}
.btn--cta:hover { background: var(--c-cta-hover); color: var(--c-cta-ink); }
.btn--cta:active { background: var(--c-cta-press); transform: translateY(1px); }

/* 線。枠は --c-main */
.btn--sub {
  background: transparent; color: var(--c-head);
  border: 1px solid var(--c-main);
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
}
.btn--sub:hover { background: var(--c-main-tint); color: var(--c-head); }
.btn--sub:active { transform: translateY(1px); }

.btn--small { min-height: 44px; padding: var(--s-2) var(--s-3); font-size: 15px; }
.site-header .btn--cta { white-space: nowrap; }   /* 幅 320〜360px で「相談す／る」と折れないように */
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--c-disabled-bg); color: var(--c-disabled-text);
  border-color: var(--c-disabled-bg); cursor: not-allowed;
}

.btn-stack { display: grid; gap: var(--s-3); }
.btn-stack .btn { width: 100%; }

/* C2版の .on-dark のボタンの白枠は外した */

/* 受話器の形（インライン SVG を自分で描いたもの）の大きさ */
.btn .icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- 6. 1画面目は intro.css（C2版のヒーローは消した） ---- */

/* ---- 6-1. 名乗りの h1 の3段（.hero-h1-*）は、/partner/ の分を pg-main.css、トップの分を intro.css が持つ（2026-09-23） ---- */

/* ---- 6-2. 写真は intro.css（.photo 一式は消した） ---- */

/* ---- 6-3. 図（design.md 5-5）。px で固定しない（.fig-order は hj-main.css へ） ---- */
.fig-roofcheck {
  display: block;
  width: 100%; height: auto;
  margin: var(--s-6) 0 var(--s-5);
}

/* 図の下の「見るところ」（図と上から同じ順番で並べる。ふつうの箇条書き） */
.look-points { margin: 0 0 var(--s-6); }
.look-points li { margin-bottom: var(--s-3); }
.look-points strong { color: var(--c-head); }

/* ---- 7. .cards／.card は intro.css へ移した ---- */

/* ---- 7-2. 手元の灯り（第A5-3節）。左 2px の線だけ。夜は月白のにじみ、紙は紺 ----
   正直の箱（design.md 8-6）は、赤と銅（いまは金）を使わない。ボタンを入れない。入力欄と写真を入れない */
.honest-box, .note-box, .area-note {
  position: relative;
  padding: 0 0 0 var(--s-5);
}
.honest-box::before, .note-box::before, .area-note::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(to bottom, rgba(207,224,242,0), var(--c-moon) 18%, var(--c-moon) 82%, rgba(207,224,242,0));
}
.honest-box h2 {
  font-size: var(--fs-h3); line-height: 1.55; margin-bottom: var(--s-3);
}
.honest-box ul { padding-left: 1.2em; }
.honest-box .honest-date {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-weak);
}

/* ---- 7-3. 加盟店募集の箱（8-7）。地は --c-sky-1 ----
   ボタンは線のボタンだけ。押す色（金）をお客様向けと共有しない。写真も使わない */
.partner-box {
  background: var(--c-sky-1);
  color: var(--c-text);
  padding: var(--sec-pad-t) 0 var(--sec-pad-b);
  /* この箱にはいま logo-mark を置いていない。design.md 5-2 の表の3行目は将来のための備え
     （置く日の抜きは箱の地 --c-sky-1 と同じ値。2026-10-15 案B「澄んだ宵」で #285A94） */
  --logo-gap: #285A94;
}

/* ---- 9. よくいただくご質問 ---- */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
/* 隣り合う summary（押せるもの）の間を 8px 以上あける（design.md 12-2 後半）。
   summary の中の余白と開いたときの中身は動かさない */
.faq details + details { margin-top: var(--s-2); }
/* 開閉の見た目とふるまいは「よくいただくご質問」と畳んだ中身（.fold）で共有する。
   読む人が2種類の開閉を覚えなくてよい（design.md 8-12 の6・移行メモ 6-b） */
.faq summary,
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) calc(var(--s-5) + var(--s-2)) var(--s-4) 0;
  position: relative;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-head);
  min-height: 44px;
}
.faq summary::-webkit-details-marker,
.fold > summary::-webkit-details-marker { display: none; }
.faq summary::after,
.fold > summary::after {
  content: ""; position: absolute; right: var(--s-2); top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--c-main); border-bottom: 2px solid var(--c-main);
  transform: rotate(45deg);
  transition: transform var(--t-mid) ease;
}
.faq details[open] summary::after,
.fold[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq .faq-a { padding: 0 0 var(--s-4); }
.faq .faq-a p { margin-bottom: 0; }

/* ---- 10. ご紹介できる地域（トップは intro.css が組み替える） ---- */
.area-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
}
/* 枠は --c-line-strong で回す。--c-line（飾りの線）だと箱として読めない（design.md 2-6 の(3)） */
.area-list li {
  margin: 0;
  background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: var(--r-m);
  padding: var(--s-3); text-align: center; font-weight: 700; color: var(--c-head);
}

/* エリア外の知らせ（エラーではない。赤を使わない。design.md 8-9） */
.area-note { margin: var(--s-4) 0 var(--s-5); }
.area-note h3, .area-note p:first-child strong { color: var(--c-head); }
.area-note p:last-child { margin-bottom: 0; }

/* ---- 11. 画面下の追従バー（夜。影なし） ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  background: rgba(26,65,111,.94);
  border-top: 1px solid var(--c-line);
  padding: var(--s-1) var(--s-3);
  padding-bottom: calc(var(--s-1) + env(safe-area-inset-bottom));
  min-height: var(--h-stickybar);
  display: flex; align-items: center; gap: var(--s-2);
  transform: translateY(100%);
  transition: transform var(--t-mid) ease;
}
.sticky-cta.is-shown { transform: translateY(0); }
.nojs .sticky-cta { transform: translateY(0); }   /* JS が動かないときは最初から出す */
.sticky-cta .btn { min-height: 52px; padding: var(--s-2) var(--s-2); font-size: 16px; }
.sticky-cta .btn--sub { flex: 0 0 40%; }
.sticky-cta .btn--cta { flex: 1 1 60%; }

/* ---- 12. フッター（夜 --c-night-3） ---- */
.site-footer {
  background: var(--c-night-3);
  color: var(--c-text);
  border-top: 1px solid var(--c-line);
  padding: var(--sec-pad-b) 0 var(--s-6);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  /* ロゴのななめの抜きは「載っている地の色」を入れる（design.md 5-2） */
  --logo-gap: #1A416F;
  --logo-text-h: 20px;
  --logo-mark: 32px;
}
.site-footer h2 {
  color: var(--c-head); font-size: var(--fs-h3); margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.site-footer a { color: var(--c-link); }
.site-footer .logo-mark { color: var(--c-head); }
.site-footer dl { margin: 0 0 var(--s-5); }
.site-footer dt { font-weight: 700; margin-top: var(--s-3); color: var(--c-head); }
.site-footer dd { margin: 0; }
.footer-links { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.footer-links li { margin-bottom: var(--s-2); }
/* 押せる高さを 44px 以上にする（design.md 12-2）。8px の余白では 41.19px で 1px 足りなかった。
   幅も同じく 44px 以上（12-2 は 44×44px）。「ホーム」は3文字で 42.27px しかない。
   左右 2px の詰め物を同じだけ負のマージンで引き戻す（幅 42.27 → 46.27px。
   字の位置・下線の長さ・長いリンクの折り返し・高さ 45.19px は 1px も動かない。
   min-width だと下線が 44px まで伸びて字より長くなるので、そちらは採らなかった） */
.footer-links a {
  display: inline-block; padding: 11px 2px;   /* A-昼5 で注の行間が 1.7 になり 10px では 43.8px。11px で 45.8px */
  margin-left: -2px; margin-right: -2px;
}
.copyright { margin: 0; color: var(--c-text-weak); }

/* ---- 13. パンくず・目次は sub.css ---- */

/* ---- 14. 設問のかたまりとラジオの大きな箱（共通に残す分） ----
   トップの「まずは一問だけ」がこの3つを使っている（design.md 第6-11節の
   「取りこぼしやすい例」）。フォームにしか出ない規則は css\form-main.css へ移した。 */
.q {
  border: 0; margin: 0 0 var(--s-7); padding: 0;
}
[hidden] { display: none !important; }
.q legend {
  padding: 0; margin-bottom: var(--s-4);
  font-size: var(--fs-h3); font-weight: 700; color: var(--c-head); line-height: 1.55;
}
.q .q-help { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-4); }

.tag-must {
  display: inline-block; margin-left: var(--s-2);
  background: var(--c-alert-bg); color: var(--c-alert);
  border-radius: var(--r-s); padding: 0 var(--s-1);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px;
}

/* ラジオの大きな箱（角 6px。夜は地を塗らない） */
.radio-box {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);
  cursor: pointer;
  font-size: var(--fs-body); line-height: 1.5;
}
.radio-box input {
  position: absolute; left: var(--s-4); top: 50%;
  width: 1px; height: 1px; opacity: 0; margin: 0;
}
.radio-box .radio-mark {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-line-strong); background: transparent;
  position: relative;
}
.radio-box .radio-text { flex: 1 1 auto; }
.radio-box .radio-sub { display: block; font-size: var(--fs-note); color: var(--c-text-weak); }
/* 印は currentColor */
.radio-box .radio-check { flex: 0 0 auto; width: 20px; height: 20px; opacity: 0; color: var(--c-main); }

.radio-box:focus-within {
  outline: 3px solid var(--c-main); outline-offset: 2px;
}
.radio-box:has(input:checked), .radio-box.is-checked {
  border: 2px solid var(--c-main);
  background: var(--c-main-tint);
  padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}
.radio-box:has(input:checked) .radio-mark::after, .radio-box.is-checked .radio-mark::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-main);
}
.radio-box:has(input:checked) .radio-mark, .radio-box.is-checked .radio-mark { border-color: var(--c-main); }
.radio-box:has(input:checked) .radio-check, .radio-box.is-checked .radio-check { opacity: 1; }

/* ---- 15. 広い画面（768px 以上） ---- */
@media (min-width: 768px) {
  :root {
    --fs-h1:   34px;
    --fs-h2:   32px;
    --fs-h3:   19px;
    --fs-lead: 18px;
    --sec-pad-t: 128px;
    --sec-pad-b: 96px;
    --h2-b:      40px;
    --pad-side:  40px;
  }
  .btn { padding: 18px 36px; }
  .btn-stack { grid-auto-flow: column; justify-content: start; }
  .btn-stack .btn { width: auto; }
  .btn-stack .btn--cta { white-space: nowrap; }   /* 金の字を折らない */
  .band--closing .btn-stack { justify-content: center; }
  .area-list { grid-template-columns: repeat(4, 1fr); }

  .sp-only { display: none; }

  /* ヘッダーは1段に収まる。副題と受付時間をここで出す（design.md 8-1） */
  .site-header .wrap { gap: var(--s-3); }
  .site-header { --logo-text-h: 26px; --logo-mark: 40px; }
  .site-sub { display: block; }
  .header-tel .tel-hours { display: block; }

  .fig-roofcheck { max-width: 560px; }
}

/* ---- 15-2. 1100px 以上 ---- */
@media (min-width: 1100px) {
  :root {
    --fs-h1:   40px;
    --fs-h2:   40px;
    --fs-h3:   20px;
    --fs-body: 17px;
    --sec-pad-t: 176px;
    --sec-pad-b: 128px;
    --h2-b:      56px;
    --pad-side:  60px;
  }
}

/* ---- 16. 動きを減らす設定を尊重する ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}