/* Customer Core 公開側（お客様向け）— スマホ前提の軽量CSS。
 * 店頭系（Retail Core front）の流儀: 外部フォント・外部ライブラリ禁止、system-ui。
 * 管理画面（/admin/）は Bill Core 系の app.css を使う。この CSS は公開側専用。 */

:root {
  --ink: #1f2430;
  --sub: #67707f;
  --line: #dfe3ea;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --brand: #2d6cdf;
  --brand-dark: #1f57bb;
  --danger: #c0392b;
  --ok: #1e7e34;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* ヘッダー・フッター */
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.brand { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.menu { display: flex; align-items: center; gap: 14px; }
.menu a { color: var(--sub); text-decoration: none; font-size: 13px; }
.menu a:hover { color: var(--ink); }
/* ★「◯◯に戻る」（2026-09-07）。来た道が分かる方にだけ出る。会員情報・ログアウトより先に置く */
.menu .back-to-service { color: var(--ink); font-weight: 600; white-space: nowrap; }
.inline { display: inline; margin: 0; }
.linklike { background: none; border: none; padding: 0; color: var(--sub); font-size: 13px; cursor: pointer; }
.linklike:hover { color: var(--ink); }
.site-footer { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--sub); font-size: 12px; }

main.wrap { padding-top: 24px; }

/* 見出し・カード */
h1 { font-size: 20px; margin: 8px 0 16px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 0 0 16px; }
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.help { color: var(--sub); font-size: 13px; }
/* ★2026-09-09: ログイン画面で受信許可をお願いするドメインを、写し取りやすく等幅で出す */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }

/* お知らせ帯 */
.notice { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.notice-error { background: #fdf0ef; border: 1px solid #eabcb6; color: var(--danger); }
.notice-info { background: #eef5ee; border: 1px solid #bcd9c0; color: var(--ok); }

/* ★JSが前提にしているCSS。絶対に消さないこと（全社の既知地雷）。
   label.field > span に display:block を当てているため、これが無いと
   hidden 属性を付けた要素が消えない（assets/postal.js＝LIB/postal.js の複製の動作前提）。 */
[hidden] { display: none !important; }

/* フォーム */
label.field { display: block; margin: 0 0 14px; }
label.field > span { display: block; font-size: 13px; color: var(--sub); margin-bottom: 4px; }
label.field .req { color: var(--danger); font-size: 11px; margin-left: 4px; }

/* 入力欄ごとの不備（2026-09-09）。★上に1本まとめる形だと、欄が多いときに
   「どこを直すのか」を探させることになる。その欄の下に、赤字で理由を出す。 */
label.field .field-err {
  display: block;
  margin-top: 4px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
}
label.field input[aria-invalid="true"],
label.field select[aria-invalid="true"] { border-color: var(--danger); }

/* 確認画面の一覧 */
.confirm-table { width: 100%; border-collapse: collapse; }
.confirm-table th,
.confirm-table td { padding: 10px 8px; border-bottom: 1px solid var(--line, #e5e5e5); text-align: left; vertical-align: top; }
.confirm-table th { width: 10em; font-weight: 600; color: var(--sub); white-space: nowrap; }
@media (max-width: 480px) {
  .confirm-table th, .confirm-table td { display: block; width: auto; border-bottom: 0; padding: 4px 0; }
  .confirm-table td { padding-bottom: 12px; border-bottom: 1px solid var(--line, #e5e5e5); }
}
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; padding: 11px 12px; font-size: 16px;   /* 16px未満だとiOSがズームする */
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.pin-input { letter-spacing: .35em; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums; }
label.check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: 14px; }
label.check input { margin-top: 4px; }

.btn {
  display: inline-block; width: 100%; padding: 13px 16px; font-size: 16px; font-weight: 600;
  border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: #fff;
  cursor: pointer; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-sub { background: #fff; color: var(--brand); }
.btn-sub:hover { background: #f0f4fc; color: var(--brand-dark); }
.btn-danger { background: #fff; color: var(--danger); border-color: #d9a49e; }
.btn-danger:hover { background: #fdf0ef; }
.btn-row { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* 購入履歴 */
.history { list-style: none; margin: 0; padding: 0; }
.history li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 10px; }
.history .row1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sub); }
.history .title { font-weight: 600; margin: 2px 0; }
.history .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.history .amount { font-variant-numeric: tabular-nums; }
.history a { font-size: 13px; }
.badge { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--line); color: var(--sub); }
.badge-cancelled, .badge-refunded { background: #fdf0ef; border-color: #eabcb6; color: var(--danger); }

.empty { text-align: center; color: var(--sub); padding: 32px 8px; }

/* 会員情報の表示 */
.kv { margin: 0; }
.kv div { display: flex; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.kv div:last-child { border-bottom: none; }
.kv dt { width: 7.5em; color: var(--sub); flex-shrink: 0; }
.kv dd { margin: 0; word-break: break-all; }

/* 未ログインの方への入口（トップ） */
.hero { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px 20px; margin: 0 0 16px; text-align: center; }
.hero h1 { font-size: 22px; margin: 0 0 12px; letter-spacing: .04em; }
.hero .lead { margin: 0 0 20px; font-size: 15px; }
.hero .btn-row { max-width: 320px; margin: 0 auto; }
.hero .help { margin: 12px 0 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ul.plain li:last-child { border-bottom: none; }

/* 郵便番号の候補ボタン（assets/postal.js＝LIB/postal.js が .btn.btn-sm.postal-pick-item を作る。
   公開側の .btn は塗りつぶしの主ボタンなので、候補は白地の副ボタンの見た目に寄せる） */
#postal_pick_list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
#postal_pick_list .postal-pick-item { background: #fff; color: var(--brand); font-weight: 500; padding: 10px 12px; text-align: left; margin: 0; }
#postal_pick_list .postal-pick-item:hover { background: #f0f4fc; color: var(--brand-dark); }

/* ── 規約・プライバシーポリシー（2026-09-09）──────────────────────
   ★長文をスマホで読む前提。行間を広め・見出しを控えめにする。
   ★.legal-doc の中は、発注者が書かれた HTML（プライバシーポリシー）と、
     terms.php が組み立てた HTML の両方が入る。どちらも同じ見た目になるように
     要素セレクタで当てる（クラスに依存しない）。 */
.legal-doc { line-height: 1.9; font-size: 14px; }
.legal-doc h2 { font-size: 16px; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.legal-doc h3 { font-size: 14px; margin: 18px 0 6px; }
.legal-doc section:first-of-type h2 { margin-top: 6px; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 12px; padding-left: 1.3em; }
.legal-doc li { margin: 3px 0; }
.legal-doc .lead { color: var(--sub); }
/* 表（外部送信の一覧）は横に長い。枠の中だけ横スクロールさせる（画面ごと横に伸ばさない） */
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 12px; }
.legal-doc th, .legal-doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.legal-doc th { background: #f6f6f8; }
.legal-doc dl.legal-dl { margin: 0 0 12px; }
.legal-doc dl.legal-dl dt { font-weight: 500; margin-top: 6px; }
.legal-doc dl.legal-dl dd { margin: 0 0 0 1em; }
.legal-doc .legal-tail { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--sub); }
.site-footer-links { font-size: 12px; }
.site-footer-links a { margin-right: 2px; }
/* 会員登録の同意（2026-09-09）。★チェックを外したまま送れることは残す
   （ブラウザ側で submit を止めない＝全社地雷「disabled にすると値が POST に載らない」） */
.consent-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; background: #fafafa; }
.consent-box label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.consent-box input[type="checkbox"] { width: auto; margin-top: 3px; }