@charset "UTF-8";

/* ============================================================
   terms.css
   ------------------------------------------------------------
   【役割】
   規約（利用規約・会則）ページ専用のスタイル定義。
   長文テキストを「読みやすく・迷子にならず」閲覧できることを
   最優先に設計している。

   【設計方針】
   - 横幅を抑え、行間を広くして可読性を重視
   - 見出し（第◯条）ごとの区切りを明確にする
   - 目次（toc）からのジャンプ時に、固定ヘッダーで
     見出しが隠れないよう CSS だけで対策
   - 規約文言そのものには一切手を加えず、
     表示（見た目）だけを整える責務に限定

   【想定用途】
   - terms.php（利用規約）
   - privacy.php（プライバシーポリシー）
   - その他、長文の静的ドキュメントページ

   ※ このCSSは完成形。
      通常運用では今後触る必要はありません。
   ============================================================ */


/* ============================================================
   基本レイアウト（本文）
   ============================================================ */

/* 規約本文の最大幅と読みやすさを担保 */
.prose {
  max-width: 900px;
  margin: 24px auto;
  line-height: 1.9;
}

/* ページタイトル */
.prose h1 {
  margin: 12px 0;
}

/* 各条文の見出し（第◯条） */
.prose h2 {
  margin: 24px 0 8px;
  font-size: 18px;
}

/* 本文・箇条書きは少し落ち着いた色に */
.prose p,
.prose li {
  color: var(--muted);
}


/* ============================================================
   目次（Table of Contents）
   ============================================================ */

.toc {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

/* 目次リンクは縦並びでタップしやすく */
.toc a {
  display: block;
  padding: 6px 0;
}


/* ============================================================
   区切り線
   ============================================================ */

.sep {
  margin: 14px 0;
  height: 1px;
  background: var(--border);
}


/* ============================================================
   リスト表現（規約特有の入れ子構造）
   ============================================================ */

/* 数字リスト（①②③…） */
ul.num,
ol.num {
  list-style: decimal;
  padding-left: 20px;
}

/* アルファベットリスト（a b c …） */
ul.alpha,
ol.alpha {
  list-style: lower-alpha;
  padding-left: 20px;
}

/* ルート階層のリストだけ少し余白をつける */
.ol-root > li {
  margin-bottom: 6px;
}


/* ============================================================
   アンカーリンク対策（固定ヘッダー考慮）
   ============================================================ */

/*
  目次から #第◯条 にジャンプした際、
  fixed ヘッダーに見出しが隠れないようにするための指定。
  JavaScript 不要で解決できる、長文ページでは必須の工夫。
*/
.prose [id] {
  scroll-margin-top: 80px;
}


/* ============================================================
   更新日表示
   ============================================================ */

.updated {
  margin-top: 20px;
}