@charset "UTF-8";
/* ============================================================
   ソラヒカリ 問い合わせフォームの束（css\form-main.css）
   - 読むのは <main class="form-main"> を持つページだけ。
     いまは form\index.php / confirm.php / thanks.php の3画面
     （<head> は form\lib.php が1か所で出している）。
     トップページは読まない。**1画面目の重さの枠を食わないため**
     （design.md 第6-3節の上限 135KB は index.html ＋ CSS ＋ JS で数える。
      style.css に入れるとトップページの枠を食ってしまう）。
   - 読む順番は「共通 → 束」。<head> で ../css/style.css を先に、これを後に置く。
     @import は使わない（2本が直列になる）。!important も使わない。design.md 第6-11節。
   - 広い画面（768px 以上）の上書きは、このファイルが自分で持つ（下の 5.）。
     共通の「広い画面」の節に、この束の部品を書かない。
   - **共通に残してあるもの（ここへ移さない）**: .q / legend / .tag-must /
     .radio-box 一式（トップの「まずは一問だけ」が使う）／.check-list（5ページ）／
     .fold（/hojokin/ とフォーム）／.note-box（7ページ）／文の中の文字リンクの「床」。
     .zip-help は .fold の上書きなので、.fold が共通・.zip-help がここ（読む順番で効く）。
   2026-09-19（design.md 移行メモ (8) の ①）
   ============================================================ */

/* ---- 1. フォームのページの器（design.md 第14節の頭） ---- */
/* A-昼5（第A5-12節）: 枠（ヘッダー・日ざしの帯・フッター）は夜、<main class="form-main paper"> は紙。
   フォームは読みやすさが最優先。夜にしない。
   .form-page の地は body の夜のグラデーションのまま（ここで塗らない） */
.form-main { padding: var(--s-6) 0 var(--s-7); }
/* フォームの3画面は三本線を置かない（2026-10-29 本人「付けない」。form\lib.php）。
   style.css 4-2 の「ボタンは2段目」「広い画面は3列」は三本線のための形なので、ここでは三本線の前の
   「ロゴ｜メール」の1段に戻す（狭い画面で 104px → 76px。pages.md の 2026-10-29 の節） */
.form-page .site-header .wrap { display: flex; }
.form-page .site-header .header-actions { order: 0; flex: 0 1 auto; }

/* 2026-09-23 に css\style.css から移した4つ（フォームの3画面だけが使う。design.md 第6-11節・第A5-8節）―― */
/* 読み上げだけに出す字 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
/* JS が動いているときだけ見せるもの／動いていないときだけ見せるもの */
.js-only { display: none; }
html:not(.js) .js-only { display: none !important; }  /* あとに書いた指定に負けないように */
.js .js-only { display: block; }
.nojs-only { display: block; }
.js .nojs-only { display: none; }
/* 段送りの切り替え（うっすら重ねるだけ。design.md 第9節の3つのうちの1つ） */
@keyframes q-appear { from { opacity: 0; } to { opacity: 1; } }
.q.is-appearing { animation: q-appear var(--t-mid) ease; }
/* 本文の中の文字リンク。16px の字（1行 20.67px）。上下 +12px（共通の「押せる高さ」の段から移した） */
.form-main p a:not(.btn) { padding-top: 12px; padding-bottom: 12px; }  /* 20.67〜24.67 → 44.67 */
/* エリア外の知らせの出し分け（共通から移した。form\index.php だけが使う） */
/* 設問のところの知らせだけは、JS が動くとき「この4つ以外」を選んだときに出す。
   JS が動かないときは最初から出しっぱなしにする（見えないほうが困るから）。
   設問の外（トップの地域の節・確認・完了）の知らせは、いつでも出す */
.js [data-area-group] .area-note { display: none; }
.js [data-area-group].is-other .area-note { display: block; }
/* 選べる箱は紙の上では白い地（入力欄と同じ。第A5-12-2）。夜のトップは地を塗らない（共通） */
.form-main .radio-box { background: #FFFFFF; }

/* ---- 2. 進み具合と「任意」の札 ---- */
/* 進み具合（design.md 8-10） */
.steps { list-style: none; display: flex; margin: 0 0 var(--s-6); padding: 0; }
.js .steps.js-only { display: flex; }   /* .js .js-only の display:block に負けないように */
.steps li {
  flex: 1 1 0; margin: 0; text-align: center; position: relative;
  font-size: var(--fs-note); color: var(--c-text-weak);
}
.steps li + li::before {
  content: ""; position: absolute; left: 0; right: 50%; top: 16px;
  border-top: 2px solid var(--c-line-strong); z-index: 0;
}
.steps .step-mark {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0 auto var(--s-2);
  border-radius: 50%; background: #FFFFFF;
  border: 2px solid var(--c-line-strong);
  color: var(--c-text-weak); font-weight: 700; font-size: 15px; line-height: 1;
}
/* A-昼5（第A5-12-2）: 済み＝ベタ --c-main・白字／いま＝枠 2px --c-main・字 700／まだ＝枠 --c-line-strong。
   C2版の「いま」のまわりの 3px の輪（box-shadow）は外した（影を使わない） */
.steps li.is-done .step-mark { background: var(--c-main); border-color: var(--c-main); color: #FFFFFF; }
.steps li.is-current .step-mark {
  border-color: var(--c-main); color: var(--c-head);
}
.steps li.is-current { color: var(--c-head); font-weight: 700; }
.steps .step-mark svg { width: 16px; height: 16px; }

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

/* ---- 3. 打つ欄・同意・誤りの表示 ---- */
/* 打つ欄 */
.field { margin-bottom: var(--s-5); }
.field > label { display: block; font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--s-2); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-s);      /* 入力欄の角は 6px（第A5-5節） */
  background: #FFFFFF; color: var(--c-text);   /* 入力欄は白の上（第A5-12-2） */
  font-family: inherit;
  font-size: 16px;            /* 16px を割らない（iPhone の勝手な拡大を防ぐ） */
  line-height: 1.5;
}
.field textarea { min-height: calc(1.5em * 3 + var(--s-3) * 2); resize: vertical; }
.field input:focus, .field textarea:focus { border: 2px solid var(--c-main); padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px); }
.field .field-help { margin: var(--s-2) 0 0; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-weak); }

/* お渡し先の囲み（design.md 8-8）。
   同意のチェックのすぐ上に置く。送信の前に、誰に・何を・何のために渡すかが見えること。
   地は --c-bg-soft（入力欄と同じ面に置けるのは白か --c-bg-soft だけ） */
.agree-info {
  background: var(--c-bg-soft);
  border: 2px solid var(--c-main);
  border-radius: var(--r-m);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
}
.agree-info .agree-info-title {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.55; color: var(--c-head);
}
.agree-info dl { margin: 0; }
.agree-info dl > div { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.agree-info dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.agree-info dt {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-note); font-weight: 700; color: var(--c-head);
}
.agree-info dd { margin: 0; font-size: var(--fs-note); line-height: var(--lh-note); }

/* 同意 */
.agree-box {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: 64px; padding: var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-s);
  background: #FFFFFF;
}
.agree-box input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--c-main); }
/* 同意のラベルは押す本体（四角 24px は 12-2 の例外②で、押す面積はここが担う）。
   広い画面では1行になり 27.19px しか無かった。上下 9px の詰め物を同じだけ負のマージンで
   引き戻す（flex の item。枠が 9px 上へ出て、詰め物で字は元の位置に戻る）。高さの寄与は
   変わらず、箱の高さ・字の位置・四角との縦の位置は動かない。9px < 箱の内側の余白 16px。
   高さ 27.19 → 45.19（1280px）／ 51.19 → 69.19（375・400px）／ #agree3rd 54.38 → 72.38 */
.agree-box label {
  font-size: var(--fs-body); line-height: 1.6;
  padding-top: 9px; padding-bottom: 9px;
  margin-top: -9px; margin-bottom: -9px;
}

/* 入力欄のすぐ下の2行（design.md 8-8） */
.safety {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-weak);
}
.safety li { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-1); }
.safety svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }

/* 誤りの表示（色だけに頼らない。design.md 8-9） */
.err-list {
  background: var(--c-alert-bg);
  border: 2px solid var(--c-alert);
  border-radius: var(--r-m);
  padding: var(--s-4);
  margin: 0 0 var(--s-6);
}
/* 誤りの箱の見出しには 4px の藍の線を付けない（この箱の印は赤い枠のほうで担っている）。
   共通の main h1, main h2 の上書き。2026-09-19 に共通からここへ移した */
.err-list h2 { border-left: 0; padding-left: 0; }
.err-list h2 { color: var(--c-alert); font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.err-list ul { margin: 0; padding-left: 1.4em; }
.err-list li { color: var(--c-alert); font-weight: 700; }

.err-msg {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-2) 0 0;
  background: var(--c-alert-bg); border-radius: var(--r-s);
  padding: var(--s-2) var(--s-3);
  color: var(--c-alert); font-size: 14px; font-weight: 700; line-height: 1.5;
}
.err-msg svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.is-error input[type="text"],
.is-error input[type="tel"],
.is-error input[type="email"],
.is-error textarea,
.is-error .agree-box,
.is-error .radio-box {
  border: 2px solid var(--c-alert);
}

/* ---- 4. 「戻る／次へ」の並び・下の案内・罠の欄 ---- */
.form-nav { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.form-foot { border-top: 1px solid var(--c-line); margin-top: var(--s-7); padding-top: var(--s-4); font-size: var(--fs-note); color: var(--c-text-weak); }
.form-foot ul { list-style: none; margin: 0; padding: 0; }
.form-foot li { margin-bottom: var(--s-2); }
/* 文字リンクのままだと押せる高さが 1行ぶんしか無い。44px 以上にする（design.md 12-2） */
.form-foot li a { display: inline-block; padding: 11px 0; }   /* A-昼5 で注の行間が 1.7 になったので 10 → 11px（45.8px） */

/* 罠の欄（人には見せない。読み上げにも出さない） */
.trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 画面外だが、入力欄の字は16px を割らない（design.md 3-2 の決めを例外なしにする）。
   ブラウザの既定の 13.33px が残っていた */
.trap input { font-size: 16px; }

/* ---- 14-2. 「戻る」と「次へ」の並べ方（design.md 8-8。2026-09-19 に足した）-------
   左＝戻る（副）／右＝次へ（主）。戻るを左に置くのは端末の「戻る」と向きをそろえるため。
   幅の割りは 左40% : 右60%、あいだ 12px（--s-3）。追従バーと同じ割り（新しい比を作らない）。
   40fr / 60fr にしてあるので、あいだの 12px を引いた残りが正しく 40:60 に割れる。
   幅400px の検算: 中身 360px − 12 = 348px → 戻る 139.2px ／ 次へ 208.8px
   幅375px の検算: 中身 335px − 12 = 323px → 戻る 129.2px ／ 次へ 193.8px
   どちらも幅 44px 以上、あいだ 12px は「隣との間は 8px 以上」を満たす。
   高さは .btn の min-height 52px のまま（.btn--small の 44px には下げない）。
   送信の段（1つだけのボタン）は素の .form-nav なので、この割りは掛からない */
.form-nav--pair { grid-auto-flow: row; grid-template-columns: 40fr 60fr; }
.form-nav--pair .btn { width: 100%; }

/* ---- 14-3. 郵便番号が分からないときの助け（design.md 8-20。2026-09-19 に足した）---
   畳んだ中身（.fold）の形をそのまま借りる ―― summary の形も開閉の印も共有する
   （読む人が2種類の開閉を覚えなくてよい。design.md 8-12 の決め6）。
   ただし**地も枠も付けない** ―― 入力欄の並びに箱が1つ割り込むと入力の流れが切れる。
   だから .fold の上下の細線を消し、上の余白も欄のすぐ下に付くまで詰める。
   赤・銅・金は使わない（エラーではない）。ボタンにしない理由は design.md 8-20 に3つ */
.zip-help { margin-top: var(--s-2); border-top: 0; border-bottom: 0; }
.zip-help > summary { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.zip-help > .fold-body { padding-top: 0; padding-bottom: var(--s-2); }
.zip-help > .fold-body ul { margin-bottom: 0; }

/* ---- 14-4. ご紹介の見通しを伝える枠（design.md 8-21。2026-09-19 に足した）--------
   郵便番号の欄のすぐ下。第8-6節（正直に伝える箱）を流用し、新しい部品を作らない。
   薄日ざしは「ソラヒカリが自分について語る面」。制度の話でもお客様の間違いでもない。
   赤は使わない（入力が間違っていると読まれる）／銅も使わない（ボタンに見える）。
   図も印も付けない。影も動きも無い。**JS で後から出さない。最初から HTML に出す** */
.lead-status {
  width: 100%;
  /* A-昼5（第A5-3・A5-12-2）: 暖色の面をやめ、地は --c-sun-tint（紙では --c-bg-soft と同じ）。
     四方の枠と左 4px の藍を、手元の灯り（左 2px の --c-main のベタ）に替えた */
  background: var(--c-sun-tint);
  border-left: 2px solid var(--c-main);
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0 0;
}
.lead-status p { margin: 0; }
/* 1行目＝本文と同じ大きさの太字（C2版は #1B3A4B × #FDF3DA ＝ 10.84:1。A-昼5 は紙の変数で見出しの色） */
.lead-status .lead-status-main { font-size: var(--fs-body); font-weight: 700; color: var(--c-head); line-height: 1.5; }
/* 2行目＝1段下げる（--c-text-weak）。これより薄い色は作らない */
.lead-status .lead-status-sub { font-size: var(--fs-note); font-weight: 500; color: var(--c-text-weak); line-height: var(--lh-note); margin-top: var(--s-1); }

/* ---- 5. 広い画面（768px 以上）。この束の上書きはこの束が持つ ----
   共通の「広い画面」の節から、この4行をそのまま移した（design.md 第6-11節）。
   ここを置き忘れると、スマホでは直ったのに広い画面で崩れる */
@media (min-width: 768px) {
  .form-nav { grid-auto-flow: column; justify-content: start; }
  /* 戻る／次へは、広い画面では中身に合わせた幅にする（design.md 8-8 の PC の行）。
     40:60 の割りを外さないと、広い画面でもボタンが全幅に伸びてしまう */
  .form-nav--pair { grid-template-columns: none; }
  .form-nav--pair .btn { width: auto; }
}