/* 法令のページ（特商法・規約・プライバシー）。
 *
 * ■ ★★見た目は**サービスページと同じ決まり**に乗せる（2026-08-26）。
 *   ★以前はここが大見出し20px・中見出し15px・本文13px と独自の値を持っていて、
 *     特商法や規約を開くと**別のサイトに来たように見えていた**。
 *   ★∴ 大見出し・中見出し・本文・パンくず・底の道案内は
 *     **css/page.css の決まりをそのまま使う**（あちらのセレクタに
 *     .doc-t / .doc-h / .doc p を並べてある）。
 *   ★値を書き写して合わせない。書き写すと、片方を直した日にまた離れる。
 *
 * ■ ★ここに残すのは**法令のページにしか無いもの**だけ。
 *     .doc-tbl   事業者情報・販売条件の表（項目と中身を左で揃える）
 *     .doc-warn  未記入の警告
 *     .doc-ol    条文の箇条書き（第○条の中の番号付き）
 *     .doc-updated 最終改定日
 * ★★未記入の警告（.doc-warn）を目立たせる。空欄のまま公開すると
 *   法令違反であるうえ、決済代行の審査も通らない。気づけない形にしない。
 */

/* ---------------------------------------------------------------- 法令の文書 */
/* ★上の余白は持たない。ヘッダーとの間は .body の padding が受け持つ
 *   （2026-08-25。ここで持つと画面ごとに幅が変わる）。
 * ★字の大きさと行間は .page-p（css/page.css）が持つ。ここでは色だけ。 */
.doc { color: var(--t2); }
.doc b { color: var(--t1); }
/* ★添え書き。読まなくても損をしないもの（補足・断り）。 */
.doc-sub { max-width: var(--measure); font-size: 13px; color: var(--t3); }
/* ★条文の箇条書き。★1行の長さは本文と同じに抑える（--measure）。
 *   ★行間は本文より少し詰める。1つ1つが短いので、本文と同じだと間延びする。 */
.doc-ul, .doc-ol {
  max-width: var(--measure);
  margin: 0 0 16px; padding-left: 1.5em;
  font-size: 15px; line-height: 1.85;
}
.doc-ul li, .doc-ol li { margin-bottom: 10px; }
.doc-ul li::marker, .doc-ol li::marker { color: var(--t3); }
.doc-ul { list-style: disc; }
.doc-ol { list-style: decimal; }
/* ★入れ子の箇条書きは記号を変える。同じだと段が読めない。 */
.doc-ol .doc-ul, .doc-ul .doc-ul { margin-top: 9px; margin-bottom: 0; }
.doc-ol .doc-ul { list-style: circle; }

/* 事業者情報・販売条件の表。★項目と中身を**左で揃える**。
 *   文章に混ぜると、どれが法定の記載事項なのか読み取れない。
 * ★★横は本文と同じところで止める。880px いっぱいに広げると、
 *   項目名と中身が離れすぎて目で結べない（法定の記載事項なので読めることが要件）。 */
.doc-tbl {
  width: 100%; max-width: var(--measure);
  border-collapse: collapse;
  margin: 0 0 20px;
}
.doc-tbl th, .doc-tbl td {
  text-align: left; vertical-align: top;
  padding: 14px 0;
  border-top: 1px solid var(--edge);
  font-weight: 400;
  font-size: 14px; line-height: 1.8;
}
.doc-tbl tr:first-child th, .doc-tbl tr:first-child td { border-top: none; }
/* ★項目名は狭く固定。可変にすると、行ごとに中身の左端がずれて表に見えない。
 *   ★字間を開けて小さく。表の見出し（css/page.css の .page-tbl thead）と同じ流儀。 */
.doc-tbl th {
  width: 124px; padding-right: 16px;
  color: var(--t3); font-size: 11px; letter-spacing: .08em;
  /* ★中身の1行目と高さをそろえる。11px と 14px では行の高さが違うので、
   *   そのままだと項目名だけ少し上に浮く。 */
  line-height: 2.3;
}
.doc-tbl td { color: var(--t2); }
/* ★★狭い画面では縦に積む。★124px の項目名を残すと、中身に 180px しか
 *   残らず、住所や事業者名が1文字ずつ折り返す。
 *   ★display を変えるので、table のままだと崩れる。block にして積む。 */
@media (max-width: 479px) {
  .doc-tbl, .doc-tbl tbody, .doc-tbl tr, .doc-tbl th, .doc-tbl td { display: block; }
  .doc-tbl tr { padding: 14px 0; border-top: 1px solid var(--edge); }
  .doc-tbl tr:first-child { border-top: none; }
  .doc-tbl th, .doc-tbl td {
    width: auto; padding: 0; border-top: none; line-height: 1.8;
  }
  .doc-tbl th { margin-bottom: 4px; }
}
/* ★未記入。**赤で目立たせる**。空欄のまま公開すると法令違反になるので、
 *   「気づかないまま出す」が起きない形にしておく。 */
.doc-todo { color: var(--ng); font-weight: 700; }
/* ★★ここだけは囲う。**運用者に気づかせるための警告**で、読み物ではない。
 *   ページの飾りを落としたぶん、囲ってあるものが1つだけ残る＝確実に目に入る。 */
.doc-warn {
  max-width: var(--measure);
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--ng);
  border-radius: var(--radius);
  font-size: 13px; color: var(--t1); line-height: 1.75;
}
.doc-warn code {
  font-family: var(--font-num);
  font-size: 11px; color: var(--t2);
}
/* ★最終改定日。★読む物ではなく、新旧を判断するためだけに置いてある。
 *   ★線は引かない。すぐ下の .page-nav が線を持っているので、
 *     引くと**細い線が2本並ぶ**（1本目が何を切っているのか読めなくなる）。 */
.doc-updated {
  margin-top: 36px;
  font-size: 12px; color: var(--t3);
}

/* ---------------------------------------------------------------- セキュリティ */
/* ★リード文。★大見出しのすぐ下に置く要約。★1行を抑える（--measure）。 */
.doc-lead {
  max-width: var(--measure);
  margin: 12px 0 28px;
  font-size: 15px; line-height: 1.95; color: var(--t2);
}
.doc-lead b { color: var(--t1); }
.doc-p { max-width: var(--measure); margin: 0 0 16px; font-size: 15px; line-height: 1.95; color: var(--t2); }
.doc-p b { color: var(--t1); }

/* ★★最新の記録。★ここだけ枠で囲う（要約なので、まず目に入ってよい）。
 *   ★数字は data/security.json 由来（手書きではない）。 */
.doc-status {
  max-width: var(--measure);
  margin: 0 0 32px;
  padding: 20px 22px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--ink2);
}
.doc-status-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--edge);
}
.doc-status-row:first-child { padding-top: 0; }
.doc-status-k { flex: 0 0 96px; font-size: 12px; color: var(--t3); }
.doc-status-v { font-size: 16px; font-weight: 700; color: var(--t1); }
.doc-status-n { margin: 14px 0 0; font-size: 12px; line-height: 1.85; color: var(--t3); }
.doc-status-n b { color: var(--t2); }

/* ★守っている区分。★2列で並べる（狭い画面では1列）。 */
.doc-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}
@media (max-width: 640px) { .doc-areas { grid-template-columns: 1fr; } }
.doc-area {
  padding: 16px 18px;
  border: 1px solid var(--edge);
  border-radius: 10px;
}
.doc-area-t { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--t1); }
.doc-area-b { margin: 0; font-size: 13px; line-height: 1.85; color: var(--t2); }

/* ★但し書き。★小さくするが読めなくはしない。 */
.doc-note {
  max-width: var(--measure);
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--ink2);
  font-size: 12px; line-height: 1.9; color: var(--t3);
}