/* ============================================================
   法定ページ（運営者情報 / プライバシーポリシー / 広告掲載について）
   ============================================================ */
:root{
  --sumi:#1a2130; --body:#3d4351; --muted:#6d737f;   /* ▼2026-09-16 #767c88→ 白地で4.19:1しかなくAA未満だった。4.76:1に */
  --line:#e3e0d8; --gold:#8f7228; --bg:#fbfaf7;
  /* ▼2026-09-16 追加：読みやすさ用 */
  --gold-soft:#f3ecd9;   /* 見出しの下地・囲み */
  --gold-dk:#7d6320;     /* 下地の上に乗る金。--gold だと3.87:1でAA未満 */
  --mark:#fbeec2;        /* ハイライト（地の色に合う暖色） */
  --alert:#a6343f;       /* リスク・禁止事項 */
  --alert-bg:#fbeded;
  --panel:#f7f5ef;
}
*{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:15px; line-height:1.95;
}

/* ★日本語の改行位置を文節で切る指定。
   ▼2026-09-17 修正：body 全体に掛けていたのをやめ、見出しだけに限定した。
   文節の途中で折らない指定なので、本文に掛けると入りきらない文節が
   まるごと次行に送られ、前の行が短いまま残ってガタガタになる。
   見出しでは「対象にな／る？」のような割れ方を防げるので、そちらだけ残す。
   未対応ブラウザ（Safari等）では無視されるだけ。 */
h1,h2,h3,dt,.callout__ttl{ word-break:auto-phrase; }

/* 見出し・短い行は行の長さをそろえる。本文は最終行に1文字だけ残らないようにする。
   どちらも未対応ブラウザでは無視されるだけで、レイアウトは崩れない。 */
h1,h2,h3,dt,.lead,.callout__ttl{ text-wrap:balance; }
p,li,dd{ text-wrap:pretty; }

/* ---------- ヘッダー・フッター ---------- */
.site-header,.site-footer{ background:#fff; border-bottom:1px solid var(--line); }
.site-footer{ border-bottom:none; border-top:1px solid var(--line); margin-top:48px; }
.wrap{ max-width:760px; margin:0 auto; padding:0 18px; }
.site-header .wrap{ padding-top:16px; padding-bottom:16px; }
.site-footer .wrap{ padding-top:22px; padding-bottom:28px; }
.site-header a{ color:var(--sumi); font-weight:800; text-decoration:none; font-size:16px; }

/* ---------- 本文まわり ---------- */
main{
  background:#fff; max-width:760px; margin:24px auto; padding:28px 18px 40px;
  border:1px solid var(--line); border-radius:10px;
}
h1{ font-size:23px; line-height:1.5; color:var(--sumi); margin:0 0 8px; }
h2{
  font-size:17px; line-height:1.6; color:var(--sumi);
  margin:34px 0 12px; padding:5px 0 5px 11px; border-left:4px solid var(--gold);
}
p,li{ font-size:14.5px; }
p{ margin:0 0 14px; }
p:last-child{ margin-bottom:0; }
a{ color:var(--gold); }
.lead{
  color:var(--muted); font-size:13px; line-height:1.85;
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line);
}

/* ---------- 箇条書き ---------- */
/* 既定の黒丸だと本文と同じ濃さで沈むので、金の丸ポチを自前で描く */
ul{ margin:0 0 14px; padding:0; list-style:none; }
ul:last-child{ margin-bottom:0; }
li{ position:relative; padding-left:17px; margin-bottom:9px; }
li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
li:last-child{ margin-bottom:0; }

/* ---------- 定義リスト（運営者情報）---------- */
/* 項目名と中身が地続きだと、スマホでどこが切れ目か分からない。
   項目名を小さなラベルにして、行で区切る。 */
dl{ margin:0; }
dt{
  display:inline-block; margin-top:20px; padding:2px 9px;
  background:var(--gold-soft); border-radius:4px;
  font-size:12px; font-weight:700; color:var(--gold-dk); letter-spacing:.02em;
}
dt:first-of-type{ margin-top:0; }
dd{ margin:7px 0 0; font-size:14.5px; }
dd + dt{ margin-top:20px; }

/* 社名など、途中で折れると読みにくい英字のかたまり */
.nb{ white-space:nowrap; }

/* ---------- 強調 ---------- */
/* 使い分け：
   .em   … その節でいちばん効く一文（ハイライト）
   .u    … 事実として押さえてほしい語句（下線）
   .ng   … 禁止・リスク・「できません」（赤）
   strong… 地の強調 */
strong{ font-weight:700; color:var(--sumi); }
.em{
  background:linear-gradient(transparent 58%, var(--mark) 58%);
  font-weight:700; color:var(--sumi);
}
.u{
  font-weight:700; color:var(--sumi);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:4px;
  text-decoration-skip-ink:auto;
}
.ng{ font-weight:700; color:var(--alert); }

/* ---------- 注意の囲み ---------- */
.callout{
  margin:14px 0 0; padding:14px 15px; border-radius:8px;
  background:var(--panel); border:1px solid var(--line);
}
.callout--alert{ background:var(--alert-bg); border-color:#f0d3d3; }
.callout__ttl{
  margin:0 0 6px; font-size:13px; font-weight:700; color:var(--sumi);
}
.callout--alert .callout__ttl{ color:var(--alert); }
.callout p{ margin:0; font-size:13.5px; line-height:1.85; }
.callout p + p{ margin-top:8px; }

/* ---------- フッター ---------- */
.site-footer nav{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.site-footer nav a{ font-size:13px; }
.copy{ font-size:12px; color:var(--muted); margin:0; }
.note{ font-size:12.5px; color:var(--muted); }

/* ---------- 画面が狭いとき ---------- */
@media (max-width:420px){
  main{ margin:16px auto; padding:24px 16px 32px; border-radius:8px; }
  h1{ font-size:21px; }
  h2{ font-size:16px; margin-top:30px; }
}