/* =============================================
   terms.html / privacy.html 専用スタイル
   （styles.css の変数・基本スタイルを使用）
   法務ドキュメントの可読性を優先したクリーンなレイアウト
============================================= */

/* ---------- ページヒーロー ---------- */
.legal-page-hero{
  position:relative;
  padding:80px 0 56px;
  background-color:#fff;
  background-image:radial-gradient(circle at 1px 1px, rgba(16,17,20,.14) 1px, transparent 0);
  background-size:28px 28px;
  overflow:hidden;
}
.legal-page-hero::before{
  content:""; position:absolute;
  top:-100px; left:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(91,92,246,.20), transparent 60%);
  pointer-events:none; z-index:0;
}
.legal-page-hero::after{
  content:""; position:absolute;
  bottom:-120px; right:-120px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(96,165,250,.24), transparent 60%);
  pointer-events:none; z-index:0;
}
.legal-page-hero .container{ position:relative; z-index:2; text-align:center;}
.legal-page-hero .eyebrow{
  display:inline-block;
  font-size:12px; letter-spacing:.32em; font-weight:800;
  color:var(--primary);
  margin-bottom:16px;
}
.legal-page-hero h1{
  font-size:40px; font-weight:800;
  color:var(--ink);
  letter-spacing:.03em;
  line-height:1.4;
}
.legal-page-hero h1 .grad{
  background:var(--gradient-ai);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- ドキュメント本体 ---------- */
.legal-section{
  padding:72px 0 120px;
  background:#fff;
}
.legal-doc{
  max-width:880px;
  margin:0 auto;
}

/* 冒頭メタ（制定日・改定日・社名） */
.legal-meta{
  margin-bottom:44px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.legal-meta p{
  font-size:13px;
  color:var(--muted);
  line-height:1.95;
  letter-spacing:.04em;
}
.legal-meta .legal-company{
  margin-top:6px;
  font-size:14px;
  font-weight:700;
  color:var(--ink-3);
}

/* 強調ボックス（個人情報取扱事業者など） */
.legal-callout{
  margin:0 0 40px;
  padding:28px 32px;
  background:var(--bg-lavender);
  border:1px solid var(--line);
  border-radius:14px;
}
.legal-callout h2{
  font-size:15px; font-weight:800;
  color:var(--primary);
  letter-spacing:.04em;
  margin-bottom:14px;
}
.legal-callout p{
  font-size:14px; color:var(--ink-3);
  line-height:1.95;
}
.legal-callout dl{
  margin-top:14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 20px;
}
.legal-callout dt{
  font-size:13px; font-weight:700;
  color:var(--muted);
}
.legal-callout dd{
  font-size:14px; color:var(--ink-3);
  line-height:1.8;
}

/* 条文ブロック */
.legal-article{ margin-top:46px; }
.legal-article:first-of-type{ margin-top:0; }
.legal-article > h2{
  position:relative;
  font-size:20px; font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.5;
  padding-bottom:14px;
  margin-bottom:22px;
  border-bottom:2px solid var(--line);
}
.legal-article > h2::after{
  content:""; position:absolute;
  left:0; bottom:-2px;
  width:48px; height:2px;
  background:var(--gradient-ai);
}
.legal-article p{
  font-size:15px;
  color:var(--ink-3);
  line-height:2;
  letter-spacing:.02em;
  margin-bottom:14px;
}
.legal-article p:last-child{ margin-bottom:0; }
.legal-article a{
  color:var(--primary);
  text-decoration:underline;
  word-break:break-all;
}

/* サブ見出し（10-1 等） */
.legal-subarticle{ margin-top:26px; }
.legal-subarticle:first-of-type{ margin-top:18px; }
.legal-subarticle h3{
  font-size:16px; font-weight:700;
  color:var(--ink-2);
  letter-spacing:.02em;
  margin-bottom:12px;
}

/* リスト（各号・箇条書き） */
.legal-list{
  list-style:none;
  margin:10px 0 16px;
  padding:0;
}
.legal-list > li{
  position:relative;
  padding-left:20px;
  margin-bottom:11px;
  font-size:15px;
  color:var(--ink-3);
  line-height:1.95;
  letter-spacing:.02em;
}
.legal-list > li:last-child{ margin-bottom:0; }
.legal-list > li::before{
  content:"";
  position:absolute;
  left:2px; top:13px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary);
}
/* ネストリスト（取得情報のカテゴリ内訳など） */
.legal-list ul{
  list-style:none;
  margin:10px 0 2px;
  padding:0;
}
.legal-list ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
}
.legal-list ul li::before{
  content:"";
  position:absolute;
  left:3px; top:11px;
  width:6px; height:1.5px;
  border-radius:2px;
  background:var(--muted-2);
}
/* 親項目（カテゴリ見出し）に下層がぶら下がる場合 */
.legal-list > li.has-children{ font-weight:700; color:var(--ink-2); }
.legal-list > li.has-children ul li{ font-weight:400; }

/* 定義リスト（第2条） */
.legal-deflist{
  list-style:none;
  margin:10px 0 0;
  padding:0;
}
.legal-deflist li{
  margin-bottom:13px;
  font-size:15px;
  color:var(--ink-3);
  line-height:1.95;
  letter-spacing:.02em;
}
.legal-deflist li:last-child{ margin-bottom:0; }
.legal-term{
  color:var(--primary);
  font-weight:700;
}

/* 連絡先ブロック（末尾） */
.legal-contact{
  margin-top:52px;
  padding:30px 34px;
  background:var(--bg-soft);
  border-radius:16px;
  border:1px solid var(--line);
}
.legal-contact h3{
  font-size:16px; font-weight:800;
  color:var(--ink);
  margin-bottom:14px;
}
.legal-contact p{
  font-size:14px;
  color:var(--ink-3);
  line-height:1.95;
  letter-spacing:.02em;
}
.legal-contact p + p{ margin-top:2px; }
.legal-contact a{
  color:var(--primary);
  text-decoration:underline;
}

/* 末尾「以上」 */
.legal-closing{
  margin-top:40px;
  text-align:right;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.1em;
}

/* 末尾の制定日・改定日・制定者（社名）ブロック */
.legal-sign{
  margin-top:18px;
  padding-top:22px;
  border-top:1px solid var(--line);
  text-align:right;
  font-size:14px;
  color:var(--muted);
  line-height:1.95;
  letter-spacing:.04em;
}
.legal-sign .legal-sign-company{
  margin-top:8px;
  font-size:15px;
  font-weight:700;
  color:var(--ink-3);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .legal-page-hero{ padding:56px 0 40px;}
  .legal-page-hero h1{ font-size:27px;}
  .legal-section{ padding:48px 0 80px;}
  .legal-meta{ margin-bottom:34px;}
  .legal-callout{ padding:22px 20px; margin-bottom:32px;}
  .legal-callout dl{ grid-template-columns:1fr; gap:2px 0;}
  .legal-callout dt{ margin-top:8px;}
  .legal-article{ margin-top:38px;}
  .legal-article > h2{ font-size:18px;}
  .legal-article p,
  .legal-list > li,
  .legal-deflist li{ font-size:14.5px;}
  .legal-contact{ padding:24px 22px;}
}