/* ══════════════════════════════════════════════
   特定商取引法に基づく表記・プライバシーポリシー・利用規約（2026-08-24 新設）

   なぜ必要か
   ----------
   日本でネット上で代金を受け取る以上、特定商取引法に基づく表記の掲示は
   義務。330円でも対象になる。Stripe の審査でもここを見られる。

   中身を直すときは legal.html の CONTENT だけを触ればよい。
   **事業者名・所在地・電話番号は法律上の必須項目。空にしないこと。**
   メールアドレスと価格は /api/payment/config から読むので、
   Render の設定を変えればこのページも一緒に変わる（二重管理にしない）。
   ══════════════════════════════════════════════ */
:root {
  --gold: #c9a84c; --gold-light: #f0d080; --dark: #0d0a0b; --panel: #1c1714;
  --card: #241e1a; --text: #f5ede0; --muted: #9a8878;
  --border: rgba(201,168,76,0.25);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Serif JP', 'Hiragino Mincho Pro', 'Yu Mincho', serif;
  background: var(--dark); color: var(--text);
  line-height: 1.9; font-size: 14px;
  padding: 0 0 60px;
  -webkit-text-size-adjust: 100%;
}

/* ─── ヘッダー（アプリと同じ見た目にそろえる） ─── */
.lg-head {
  position: sticky; top: 0; z-index: 10;
  background: rgba(13,10,11,0.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lg-mon {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.lg-back {
  color: var(--gold-light); text-decoration: none; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
}
.lg-langs { display: flex; gap: 4px; margin-left: auto; }
.lg-lang {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); font-family: inherit; font-size: 11px;
  padding: 5px 8px; border-radius: 5px; cursor: pointer; min-width: 34px;
}
.lg-lang.on { background: rgba(201,168,76,0.16); color: var(--gold-light); border-color: var(--gold); }

/* ─── 本文 ─── */
.lg-wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 0; }
.lg-title { font-size: 20px; color: var(--gold); letter-spacing: 1px; margin-bottom: 6px; }
.lg-sub { font-size: 11px; color: var(--muted); margin-bottom: 22px; }

.lg-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.lg-nav a {
  font-size: 12px; color: var(--gold-light); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 11px;
}

.lg-sec { margin-bottom: 40px; scroll-margin-top: 70px; }
.lg-sec h2 {
  font-size: 16px; color: var(--gold); letter-spacing: 1px;
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.lg-sec h3 { font-size: 13px; color: var(--gold-light); margin: 18px 0 6px; }
.lg-sec p { margin-bottom: 10px; }
.lg-sec ul { margin: 0 0 12px 1.2em; }
.lg-sec li { margin-bottom: 5px; }
.lg-sec strong { color: var(--gold-light); }

/* 特商法の表。**横に長い項目名があるので、狭い画面では縦に積む** */
.lg-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.lg-table th, .lg-table td {
  border: 1px solid var(--border); padding: 9px 11px;
  text-align: left; vertical-align: top; font-size: 13px;
}
.lg-table th { background: var(--card); color: var(--gold-light); white-space: nowrap; width: 34%; font-weight: 700; }
@media (max-width: 560px) {
  .lg-table th, .lg-table td { display: block; width: auto; border-bottom: none; }
  .lg-table td { border-top: none; margin-bottom: 8px; }
  .lg-table tr { display: block; margin-bottom: 4px; }
}

.lg-note {
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: 6px;
  padding: 12px 14px; font-size: 13px; margin-bottom: 14px;
}
.lg-foot { text-align: center; color: var(--muted); font-size: 11px; margin-top: 34px; }