/* ========================================
   法的情報の3ページ（利用規約・プライバシーポリシー・特定商取引法に基づく表記）
   - 読みやすさを最優先にし、飾りは見出しまわりと台紙のふちだけにする
   - 本文は css/page.css の .prose-sheet と .prose、目次は .toc
   - .legal--terms / --privacy / --commerce で条番号などの差し色だけを変える
   ======================================== */

.legal {
  --legal-accent: var(--c-pink);
  --legal-accent-deep: var(--c-pink-deep);
  /* 固定ヘッダー（画面上 12px ＋ 高さ約 58px）に見出しが隠れないよう、ページ内リンクの着地点をずらす */
  --legal-anchor-offset: 96px;
}

.legal--privacy {
  --legal-accent: var(--c-mint);
  --legal-accent-deep: var(--c-mint-deep);
  --prose-accent: var(--c-mint-tint);
}

.legal--commerce {
  --legal-accent: var(--c-lavender);
  --legal-accent-deep: var(--c-lavender-deep);
}

/* ── 並び: スマホは 見出し → 目次 → 本文、PC は目次を左に固定 ──
   旧版と同じく目次が本文より先に書かれているので、見た目の位置は grid-area で決める */
.legal-layout {
  display: grid;
  grid-template-areas:
    "hero"
    "toc"
    "body";
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.legal-layout > .page-hero {
  grid-area: hero;
  width: 100%;
  padding-bottom: 8px;
}

.legal-aside {
  grid-area: toc;
  min-width: 0;
}

.legal-aside > * + * {
  margin-top: 16px;
}

.legal-layout > .legal-paper {
  grid-area: body;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* スマホでは台紙のふちと余白を少し詰め、本文の幅を確保する */
.legal-paper {
  border-width: 10px;
  padding: 10px;
}

.legal-paper .prose-sheet {
  padding: 28px 16px;
}

/* ── 目次 ── */
.legal-toc {
  padding: 20px;
  border-radius: 24px;
  background: var(--c-white);
  box-shadow: var(--shadow-soft);
}

.legal-toc-title {
  margin-bottom: 12px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
}

.legal-toc .toc a {
  line-height: 1.5;
}

/* プライバシーポリシーの「安全への取り組み」 */
.legal-aside-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: none;
  padding: 18px;
  font-size: 0.8125rem;
  line-height: 1.75;
}

.legal-aside-note > * + * {
  margin-top: 0;
}

.legal-aside-note-title {
  margin-bottom: 4px;
  font-weight: 700;
}

.legal-aside-note-icon,
.legal-memo-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--c-white);
  color: var(--legal-accent-deep);
}

/* ── 本文 ── */
.legal-intro > * + * {
  margin-top: 12px;
}

.legal-updated {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 9999px;
  background: var(--c-cream-deep);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-ink-soft);
}

.legal-updated-note {
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--c-ink-soft);
}

.legal-article {
  scroll-margin-top: var(--legal-anchor-offset);
}

.prose > .legal-article {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px dashed var(--c-line);
}

.legal-article > * + * {
  margin-top: 16px;
}

.legal-article-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 条の見出しは番号のチップが目印になるので、.prose の h2 の左線は外す */
.prose .legal-article-head h2 {
  margin-top: 0;
  padding: 0;
  border-left: 0;
  /* 文節で折り返す設定（word-break: auto-phrase）だと「（利用登録およびゲスト利用）」のような
     長い文節が1かたまりになり、横並びの中で縮めずに画面の外へはみ出す。必要なら文節の途中でも折り返す */
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 44px;
  height: 32px;
  margin-top: 1px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--legal-accent);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--legal-accent-deep);
}

.legal-article > ol > li + li {
  margin-top: 10px;
}

.legal-article ol > li::marker {
  font-weight: 700;
  color: var(--c-ink-soft);
}

.legal-article li > ul,
.legal-article li > ol {
  margin-top: 8px;
}

.legal-article li li + li {
  margin-top: 4px;
}

/* 窓口・サービス名などの囲み */
.legal-box {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--c-cream-deep);
}

.legal-box > * + * {
  margin-top: 10px;
}

.prose .legal-plain-list {
  list-style: none;
  padding-left: 0;
}

/* ── 特定商取引法に基づく表記の表 ── */
.prose .legal-table {
  font-size: 0.9375rem;
}

.legal-table td > * + * {
  margin-top: 8px;
}

.legal-table td li + li {
  margin-top: 4px;
}

.legal-fine {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}

/* スマホでは項目名を上、内容を下に積む */
@media (max-width: 639px) {
  .legal-table th,
  .legal-table td {
    display: block;
    width: auto;
  }

  .legal-table th {
    border-bottom: 0;
    border-radius: 10px;
  }

  .legal-table td {
    padding: 10px 4px 20px;
  }
}

/* 表の下の注記メモ */
.legal-memo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 880px;
  margin: 32px auto 0;
  font-size: 0.875rem;
  line-height: 1.85;
}

.legal-memo > * + * {
  margin-top: 0;
}

.legal-memo a {
  color: var(--c-berry-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .legal-paper {
    border-width: 14px;
    padding: 32px;
  }

  .legal-paper .prose-sheet {
    padding: 48px 56px;
  }
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas:
      "hero hero"
      "toc  body";
    column-gap: 32px;
    row-gap: 24px;
  }

  /* 長い規約を読み進めても目次に戻れるよう、左に固定する */
  .legal-aside {
    position: sticky;
    top: var(--legal-anchor-offset);
    align-self: start;
    max-height: calc(100vh - var(--legal-anchor-offset) - 16px);
    overflow-y: auto;
    /* overflow で目次カードの影が切れないよう、影のぶんだけ内側に余白を取る */
    margin: -8px -16px 0;
    padding: 8px 16px 32px;
  }

  .legal-aside .toc {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
  }

  .legal-aside .toc a {
    border-radius: 14px;
    padding: 8px 12px;
  }
}