/* SHIFUKU Method — ブランドスタイル
   一次ソース: docs/デザイン仕様書.md（2026-07-31）
   値はそこからそのまま持ってきている。勝手に変えないこと。

   適用先: request.html（依頼フォーム）
   ※ 他の画面は従来の style.css のまま。1枚ずつ移していく。
      共有CSSを一度に差し替えると、検証していない画面まで変わるため。

   クラス名は既存のものをすべて維持している。
   request.html の JavaScript が文字列でHTMLを組み立てており
   （.opt / .stock / .cost-list など）、名前を変えると崩れる。 */

/* ============================================================
   1. 色（デザイン仕様書 第2章）
   ============================================================ */
:root{
  --leaf:  #EFEFEE;   /* 地色・紙 */
  --paper: #F8F8F7;   /* 面・カード */
  --ink:   #191713;   /* 文字・墨 */
  --rule:  #C8C0AE;   /* 罫（主） */
  --rule2: #DED7C6;   /* 罫（細） */
  --seal:  #9C3A28;   /* 朱。ラベル・罫・印のみ。面には使わない */
  --brass: #8C7A46;   /* 真鍮。数値と計測値のみ。文章には使わない */
  --mute:  #6E685C;   /* 補助文字 */
  /* チャクラの状態表示のみ。他の用途に広げない（2026-08-10 追加） */
  --low:   #8A6600;   /* 明るい黄。LOW */
  --vlow:  #7A2A1C;   /* くすんだ赤茶。VERY LOW */
}

/* ============================================================
   2. 書体（デザイン仕様書 第3章）
   ============================================================ */
:root{
  --mincho: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --mono:   "JetBrains Mono","SF Mono","Menlo","Consolas",monospace;
  --geo:    "Michroma","Helvetica Neue",Arial,sans-serif;
  --gothic: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--leaf);
  color:var(--ink);
  font-family:var(--mincho);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:560px;margin:0 auto;padding:36px 20px 72px;}

/* ============================================================
   3. ヘッダー（ロゴマーク＋ワードマーク）
   ============================================================ */
.brand{text-align:center;margin:0 0 30px;}

.brand .mark{display:block;margin:0 auto 12px;}

/* ワードマーク。モーラ組み（第4章）。
   字間 .073em ： 音間 .22em ＝ 1 : 3。この比率は厳守。
   絶対値は詰めてよい（仕様書 第4章）。Michromaは字幅が広く、
   規定の .14/.42 のままだと「SHI FU KU」が三語に分離して見えたため詰めた。 */
.wm{
  font-family:var(--geo);
  letter-spacing:.073em;
  line-height:1;
  font-size:1.15rem;
  color:var(--ink);
  display:inline-block;
}
.wm i{display:inline-block;width:.22em;}

/* 「Method」は本体の45%。モーラ組みにしない。
   全大文字にすると本体と同格に見えるため、頭文字だけ大文字にする。 */
.brand .method{
  display:block;
  margin-top:6px;
  font-family:var(--geo);
  font-size:.52rem;
  letter-spacing:.1em;
  color:var(--mute);
}

/* 宛名。装飾せず、静かに置く。 */
h1{
  font-family:var(--mincho);
  font-size:1.2rem;
  font-weight:500;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  letter-spacing:.04em;
}

/* ============================================================
   4. 面（カード）
   ============================================================ */
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:24px 22px;
}
.card + .card{margin-top:18px;}

/* 見出し。朱の短い罫を添える（朱は罫とラベルのみ）。 */
.section-title{
  font-family:var(--mincho);
  font-weight:600;
  font-size:1rem;
  margin:0 0 14px;
  padding-left:12px;
  border-left:2px solid var(--seal);
  letter-spacing:.04em;
}

.hr{height:1px;background:var(--rule2);margin:26px 0;border:0;}

/* ============================================================
   5. 選択肢
   ============================================================ */
label.opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--rule2);
  margin:9px 0;
  cursor:pointer;
  background:transparent;
  transition:border-color .15s,background .15s;
}
label.opt:hover{border-color:var(--rule);background:rgba(255,255,255,.5);}

label.opt input{
  width:17px;height:17px;flex:none;margin-top:.3em;
  accent-color:var(--ink);
}

/* 長い選択肢は折り返す（スマホ幅対策） */
label.opt > span{flex:1;min-width:0;overflow-wrap:anywhere;}

/* 法人が複数あるときの子選択肢 */
label.opt.sub-opt{margin-left:26px;border-style:dashed;}

/* 残回数ゼロ等で選べない項目。押せないことが見て分かるように */
label.opt.disabled{opacity:.45;cursor:default;}
label.opt.disabled:hover{border-color:var(--rule2);background:transparent;}

label.opt .left{display:block;}

/* 消費数の注記。選ぶ前に何回消費するか分かるようにする */
label.opt .cost{
  display:block;margin-top:3px;
  font-family:var(--gothic);font-size:.78rem;
  color:var(--mute);line-height:1.7;
}

/* 「残り N」。数値なので等幅＋真鍮 */
label.opt .stock{
  flex:none;margin-left:10px;align-self:flex-start;
  font-family:var(--mono);font-size:.78rem;
  color:var(--brass);white-space:nowrap;
}

/* ============================================================
   6. 入力欄
   ============================================================ */
label.field{
  display:block;font-family:var(--mincho);font-weight:600;
  margin:20px 0 7px;letter-spacing:.03em;
}
label.field .sub{
  display:block;font-weight:400;font-family:var(--gothic);
  color:var(--mute);font-size:.82rem;
}

/* 「必須」。朱はラベルに使ってよい（面には使わない） */
label.field .req{
  display:inline-block;margin-left:9px;padding:1px 8px;
  border:1px solid var(--seal);color:var(--seal);
  font-family:var(--gothic);font-size:.68rem;font-weight:500;
  vertical-align:middle;letter-spacing:.08em;
}

input[type=email],input[type=text],textarea,select{
  width:100%;padding:12px 14px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  font-family:var(--mincho);font-size:1rem;line-height:1.8;
  border-radius:0;
}
input:focus,textarea:focus,select:focus{
  outline:1px solid var(--ink);outline-offset:1px;border-color:var(--ink);
}
textarea{min-height:112px;resize:vertical;}

/* 入力欄ごとのエラー。全体メッセージとは別に、欄の直下に出す */
.field-error{
  color:var(--seal);font-family:var(--gothic);
  font-size:.82rem;margin:5px 0 0;
}

/* ============================================================
   7. 注記
   ============================================================ */
.hint{
  color:var(--mute);font-family:var(--gothic);
  font-size:.82rem;line-height:1.85;margin:7px 0 0;
}

/* 書き方のヒント。欄の下にまとめて置く */
.hint.tips{
  margin-top:18px;padding:13px 15px;
  background:rgba(200,192,174,.16);
  border-left:2px solid var(--rule);
}

/* 「文章を整える」ボタンの下に添える注記。ボタンが右寄せなので右端に合わせる */
.hint.right{text-align:right;}

/* 結果の届き方。送信ボタンとの間に余白を取る */
.hint.delivery{margin-top:22px;}

/* ============================================================
   8. 回数・消費数（数値は等幅＋真鍮）
   ============================================================ */
.counts{
  background:rgba(200,192,174,.16);
  border:1px solid var(--rule2);
  padding:15px 17px;margin:0 0 4px;
}
.counts .row{
  display:flex;justify-content:space-between;
  padding:4px 0;font-family:var(--gothic);font-size:.92rem;
}
.counts .row span:last-child{
  font-family:var(--mono);color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.counts .cap{
  color:var(--mute);font-family:var(--gothic);
  font-size:.78rem;margin-top:10px;
}

.cost-title{
  font-family:var(--mincho);font-weight:600;
  margin:0 0 9px;font-size:.95rem;
}
.cost-list{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;}
.cost-list dt{font-family:var(--gothic);font-size:.92rem;}
.cost-list dd{
  margin:0;font-family:var(--mono);color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.cost-list dd .note{
  font-family:var(--gothic);color:var(--mute);font-size:.8rem;
}

/* ============================================================
   9. ボタン
   ============================================================ */
button{
  width:100%;margin-top:24px;padding:15px;
  font-family:var(--mincho);font-size:1rem;font-weight:600;
  letter-spacing:.1em;
  color:var(--leaf);background:var(--ink);
  border:0;border-radius:0;cursor:pointer;
  transition:opacity .15s;
}
button:hover{opacity:.86;}
button:disabled{opacity:.4;cursor:default;}

/* 「文章を整える」など補助的なボタン。
   送信ボタン（全幅・墨・大）と区別するため、地色・枠線・小さめ・幅autoで右寄せ。
   ※ width を指定しないと button{width:100%} を継承して全幅になる。 */
button.secondary{
  display:block;width:auto;margin:11px 0 4px auto;
  padding:7px 15px;
  font-family:var(--gothic);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);background:transparent;
  border:1px solid var(--rule);
}
button.secondary:hover{opacity:1;border-color:var(--ink);}

/* ============================================================
   10. 状態表示
   ============================================================ */
.loading{
  text-align:center;color:var(--mute);
  /* ★欧文ラベル（Loading…）なので JetBrains Mono。デザイン仕様書 第3章。
     2026-08-22、「読み込んでいます…」を英語にしたのに合わせて --gothic から変えた。 */
  font-family:var(--mono);padding:48px 0;
}
.error{
  text-align:center;color:var(--seal);
  font-family:var(--gothic);font-size:.92rem;margin-top:18px;
}
/* 「保存しました」など、成功したことを短く伝える行（settings.html）。
   .error と同じ位置に出るため、高さを確保して行送りが跳ねないようにする。 */
.saved{
  text-align:center;color:var(--brass);
  font-family:var(--gothic);font-size:.92rem;
  margin-top:18px;min-height:1.4em;
}
.hidden{display:none;}

/* ============================================================
   11. フッター
   ============================================================ */
.site-footer{
  margin-top:44px;padding-top:18px;
  border-top:1px solid var(--rule);
  color:var(--mute);font-family:var(--gothic);
  font-size:.76rem;line-height:1.9;text-align:center;
  letter-spacing:.04em;
}
/* 狭い画面では「｜」で折り返して2行にする */
.site-footer .sep{display:inline;}
@media (max-width:360px){
  .site-footer .sep{display:block;height:0;overflow:hidden;}
}

/* ============================================================
   12. 月次フォーカス（focus.html）と完了表示
   ============================================================ */

/* 見出し下のリード文。本文より少し落として、宛名と設問の間を作る。 */
.lead{
  color:var(--mute);font-family:var(--gothic);
  font-size:.92rem;line-height:1.95;margin:0 0 22px;
}
/* 締切など、読み飛ばしてほしくない一文は墨色にする。 */
.focus-page .lead{color:var(--ink);}
/* ★同じ考え方（2026-09-02）。★どのページでも、読み飛ばしてほしくない
   案内は墨色にする。★大きさは lead のまま（.92rem）で、色だけ変える。 */
.lead.keep{color:var(--ink);}

/* ★★167-5（2026-09-08・Masaさん指示）… 設問どうしの 間隔を 広げる。
   ★★対象は `focus.html` と `register.html` の **2枚だけ**（`.form-page`）。
     ★他の 6枚は 触らない。★共通の `label.field` は そのまま（20px）。
   ★★★隣り合う 要素の 間だけを 空ける（`+`）。
     ★容器の 先頭には 効かないので、★カードの 1問目が 下へ 落ちない。
     ★`label.field:first-child` を 打ち消す 書き方では、
       ★法人欄（`#corpFields` の 1つ目）まで 詰まってしまう。
   ★法人欄は `div` に 包まれ、★隣接では 届かない。★容器の 中を 直に 指す。

   ★★★170-4（2026-09-08・Masaさん指示）… **38px → 52px** へ もう一段 広げた。
     ★設問と 設問の 境目を、★1行ぶん 以上 空ける（★本文の 行送りは 約 29px）。
     ★`select` と `input` も 足した … ★register.html の 選択肢・1行入力の
       ★直後に 来る 設問が、★38px の 時点では **20px のまま**だった。
   ★★★173-1（2026-09-08・Masaさん指示）… **52px → 78px** へ さらに 広げた。
     ★注記（`.hint`）の 下端から 次の 設問までが 空くので、
       ★★設問が **1つずつ 独立して 読める**（★20 → 38 → 52 → 78 の 4段階目）。
     ★カードの 内側の 余白（24px）より 大きい。★1問目だけ 20px なのは
       ★従来どおり（★隣接セレクタなので 容器の 先頭には 効かない）。 */
.form-page .hint + label.field,
.form-page textarea + label.field,
.form-page button.tidy + label.field,
.form-page .field-error + label.field,
.form-page select + label.field,
.form-page input + label.field,
.form-page #corpFields label.field,
.form-page #corpFields + label.field{margin-top:78px;}

/* 「文章を整える（任意）」。送信ボタン（全幅・墨・大）と区別する。
   button{width:100%} を継承しないよう width:auto を明示する。
   クラス名は .tidy のまま。focus.html の script が
   querySelectorAll(".tidy") で拾っているため変えてはいけない。 */
button.tidy{
  display:block;width:auto;margin:11px 0 4px auto;
  padding:7px 15px;
  font-family:var(--gothic);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);background:transparent;
  border:1px solid var(--rule);
}
button.tidy:hover{opacity:1;border-color:var(--ink);}

/* 送信後の「ご入力ありがとうございます」。 */
.done-title{
  font-family:var(--mincho);font-size:1.1rem;font-weight:600;
  letter-spacing:.06em;margin:0 0 12px;
}
.done-body{
  color:var(--mute);font-family:var(--gothic);
  font-size:.9rem;line-height:2;margin:0;
}

/* 免責。文面は docs/免責文.md が唯一の定義。ここで文言を変えない。
   フッターの上に、主張させず常時表示する。 */
.disclaimer{
  margin-top:38px;padding-top:16px;
  border-top:1px solid var(--rule);
  color:var(--mute);font-family:var(--gothic);
  font-size:.76rem;line-height:1.95;letter-spacing:.02em;
}
.disclaimer p{margin:0 0 6px;}
.disclaimer p:last-child{margin-bottom:0;}
/* 折り返した2行目を「※」の幅ぶん字下げして、項目の切れ目を保つ */
.disclaimer .cont{padding-left:1.1em;}

/* 要配慮個人情報の同意（2026-08-11）。**対面ではタブレットで操作する。**
   既定のチェックボックスは 13px しかなく、指では押しにくい。
   ラベル全体が押せる（input を label で包んでいる）うえで、
   チェックボックス自体も 22px に拡大して迷いを無くす。 */
.consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:26px 0 6px;padding:14px;
  border:1px solid var(--rule);background:var(--paper);
  cursor:pointer;line-height:1.7;
}
.consent input[type="checkbox"]{
  width:22px;height:22px;margin:0;flex:none;
  /* 1行目の文字の高さに合わせて、上端をそろえる */
  margin-top:.15em;cursor:pointer;
}