/* =====================================================================
   legal.css — Tomolingual 法務ページ共通スタイル
   対象: /terms/ /privacy/ /cookie/ /tokushoho/ /ai-policy/ /ai-disclaimer/
   styles.css（トップページ用）とは独立。法務ページでは legal.css だけを読み込む。
     <link rel="stylesheet" href="/legal.css">   ※サブフォルダから読むので必ず絶対パス

   ページの骨組み（このとおりに書けば見た目がそろう）
     <body class="legal">
       <header class="legal-header">
         <div class="legal-header__inner">
           <a class="legal-brand" href="/">            ロゴ（img 2枚: シンボル + ワードマーク）
           <a class="legal-back" href="/">              「トップへ戻る」リンク
       <main class="legal-main" id="top">
         <p class="legal-kicker">                       見出し上の小さなラベル（例: LEGAL）
         <h1 class="legal-title">                       ページタイトル
         <p class="legal-lead">                         前文・リード文
         <p class="legal-meta">                         制定日・最終改定日など（小さめ・グレー）
         <nav class="legal-toc" aria-label="目次">      目次ボックス
           <p class="legal-toc__title">目次</p>
           <ol class="legal-toc__list">                 条へのリンク（li > a）
             <li class="legal-toc__chapter">            章見出し（章があるページのみ）。中に <ol> を入れ子にできる
         <section class="legal-chapter" id="ch-1">      章（利用規約のみ）
           <h2 class="legal-chapter__title">            章見出し
         <section class="legal-article" id="art-1">     条（章の中でも外でも可）
           <h2|h3 class="legal-article__title">         条見出し「第1条（目的）」。タグは h2/h3 どちらでも同じ見た目
           <p>                                          番号なしの本文
           <ol class="legal-paras">                     項（1, 2, 3 …）
             <li><span class="legal-num">1</span><div class="legal-body">本文…</div></li>
           <ol class="legal-items">                     号（(1), (2) …）。項の .legal-body の中に入れ子も可
             <li><span class="legal-num">(1)</span><div class="legal-body">本文…</div></li>
           <ul class="legal-bullets">                   黒丸の箇条書き
           <div class="legal-table-wrap"><table class="legal-table">  表（スマホでは横スクロール）
             th / td。項目名の列は <th scope="row">
           <div class="legal-box">                      注記・補足の囲み
           <dl class="legal-dl"> dt / dd                項目名と内容の一覧（運営者情報など）
           <p class="legal-source">                     出典などの小さな注記
         <p class="legal-totop"><a href="#top">         「ページの先頭へ」
       <footer class="legal-footer">
         <nav class="legal-footer__nav" aria-label="規約・ポリシー">  6ページへの相互リンク（a を並べる）
           現在ページの a には aria-current="page" を付ける（太字になる）
         <p class="legal-footer__copy">                運営会社・コピーライト
   ===================================================================== */

:root {
  --lg-bg: #fbf5e9;
  --lg-paper: #fffdf8;
  --lg-ink: #09233f;
  --lg-muted: #5c6c7b;
  --lg-line: rgba(9, 35, 63, .12);
  --lg-accent: #0b6f6d;
  --lg-accent-soft: rgba(53, 201, 199, .14);
  --lg-navy: #062b52;
  --lg-th: #f4efe3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-bg: #0d1722;
    --lg-paper: #132131;
    --lg-ink: #e6edf4;
    --lg-muted: #9db0c1;
    --lg-line: rgba(230, 237, 244, .14);
    --lg-accent: #6fe6ce;
    --lg-accent-soft: rgba(111, 230, 206, .12);
    --lg-navy: #e6edf4;
    --lg-th: #1a2a3c;
  }
}
:root[data-theme="dark"] {
  --lg-bg: #0d1722;
  --lg-paper: #132131;
  --lg-ink: #e6edf4;
  --lg-muted: #9db0c1;
  --lg-line: rgba(230, 237, 244, .14);
  --lg-accent: #6fe6ce;
  --lg-accent-soft: rgba(111, 230, 206, .12);
  --lg-navy: #e6edf4;
  --lg-th: #1a2a3c;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.legal {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt";
  overflow-wrap: anywhere;
  word-break: normal;
}
.legal a { color: var(--lg-accent); text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal :target { scroll-margin-top: 20px; }

/* ---- ヘッダー ---- */
.legal-header { border-bottom: 1px solid var(--lg-line); background: var(--lg-bg); }
.legal-header__inner {
  max-width: 820px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.legal-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lg-navy); }
.legal-brand img:first-child { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; }
.legal-brand .legal-brand__word { width: auto; height: 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-brand .legal-brand__word { filter: brightness(0) invert(.92); }
}
:root[data-theme="dark"] .legal-brand .legal-brand__word { filter: brightness(0) invert(.92); }
.legal-back {
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border: 1px solid var(--lg-line); border-radius: 999px; color: var(--lg-ink) !important;
}
.legal-back:hover { background: var(--lg-accent-soft); }

/* ---- 本文 ---- */
.legal-main { max-width: 820px; margin: 0 auto; padding: 40px 16px 72px; }
@media (min-width: 720px) { .legal-main { padding: 64px 24px 96px; } .legal-header__inner { padding: 16px 24px; } }
.legal-kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: .2em; font-weight: 800; color: var(--lg-accent); }
.legal-title { font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.4; letter-spacing: .01em; margin: 0 0 16px; }
.legal-lead { margin: 0 0 12px; }
.legal-meta { color: var(--lg-muted); font-size: .88rem; margin: 0 0 28px; }
.legal-main p { margin: 0 0 12px; }

/* ---- 目次 ---- */
.legal-toc {
  background: var(--lg-paper); border: 1px solid var(--lg-line); border-radius: 18px;
  padding: 18px 18px 14px; margin: 24px 0 40px; font-size: .92rem; line-height: 1.7;
}
.legal-toc__title { font-weight: 800; margin: 0 0 8px !important; letter-spacing: .08em; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc__list > li { margin: 4px 0; }
.legal-toc__chapter { margin-top: 10px !important; font-weight: 700; }
.legal-toc__chapter > ol { font-weight: 400; padding-left: 1em; border-left: 2px solid var(--lg-line); margin: 4px 0 6px 2px; }
.legal-toc__chapter > ol > li { padding-left: 8px; }
.legal-toc a { text-decoration: none; color: var(--lg-ink); display: inline-block; padding: 2px 0; }
.legal-toc a:hover { color: var(--lg-accent); text-decoration: underline; }
@media (min-width: 720px) { .legal-toc { padding: 22px 26px 18px; } }

/* ---- 章・条 ---- */
.legal-chapter { margin-top: 48px; }
.legal-chapter__title {
  font-size: 1.15rem; margin: 0 0 4px; padding: 10px 14px; border-radius: 12px;
  background: var(--lg-accent-soft); letter-spacing: .03em;
}
.legal-article { margin-top: 32px; }
.legal-chapter > .legal-article:first-of-type { margin-top: 20px; }
.legal-article__title {
  font-size: 1.04rem; line-height: 1.6; margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--lg-line); letter-spacing: .02em;
}

/* 項・号 */
.legal-paras, .legal-items { list-style: none; margin: 0 0 12px; padding: 0; }
.legal-paras > li, .legal-items > li { display: flex; gap: .6em; margin: 0 0 10px; }
.legal-items { margin: 8px 0 4px; }
.legal-items > li { margin-bottom: 6px; }
.legal-num { flex: 0 0 auto; min-width: 1.2em; font-weight: 700; color: var(--lg-muted); font-variant-numeric: tabular-nums; }
.legal-items .legal-num { min-width: 2.2em; font-weight: 600; }
.legal-body { flex: 1 1 auto; min-width: 0; }
.legal-body > p:last-child { margin-bottom: 0; }
.legal-bullets { margin: 8px 0 12px; padding-left: 1.3em; }
.legal-bullets li { margin: 0 0 6px; }

/* ---- 表 ---- */
.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 18px; border: 1px solid var(--lg-line); border-radius: 12px; background: var(--lg-paper); }
.legal-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .9rem; line-height: 1.7; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--lg-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: 0; }
.legal-table thead th { background: var(--lg-th); font-weight: 700; white-space: nowrap; }
.legal-table th[scope="row"] { background: var(--lg-th); font-weight: 700; width: 32%; }
.legal-table--kv { min-width: 0; }
@media (max-width: 560px) {
  .legal-table--kv, .legal-table--kv tbody, .legal-table--kv tr, .legal-table--kv th, .legal-table--kv td { display: block; width: 100% !important; }
  .legal-table--kv th[scope="row"] { border-bottom: 0; padding-bottom: 4px; }
  .legal-table--kv td { padding-top: 6px; }
}

/* ---- 囲み・一覧・注記 ---- */
.legal-box { background: var(--lg-paper); border: 1px solid var(--lg-line); border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.legal-box > :last-child { margin-bottom: 0; }
.legal-dl { margin: 12px 0; }
.legal-dl dt { font-weight: 700; margin-top: 10px; font-size: .93rem; }
.legal-dl dd { margin: 2px 0 0; }
.legal-source { font-size: .82rem; color: var(--lg-muted); }
.legal-totop { margin-top: 48px !important; font-size: .88rem; text-align: right; }

/* ---- フッター ---- */
.legal-footer { border-top: 1px solid var(--lg-line); padding: 28px 16px 44px; color: var(--lg-muted); font-size: .85rem; }
.legal-footer__nav { max-width: 820px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
.legal-footer__nav a { color: var(--lg-ink); text-decoration: none; }
.legal-footer__nav a:hover { text-decoration: underline; }
.legal-footer__nav a[aria-current="page"] { font-weight: 800; color: var(--lg-accent); }
.legal-footer__copy { text-align: center; margin: 0; }

@media print {
  .legal-header, .legal-footer, .legal-toc, .legal-totop { display: none; }
  body.legal { background: #fff; color: #000; }
}