/* My プライス 法務ページ共通スタイル。
   ブランドトークン（色・フォント・color-scheme: light）は /tokens.css が単一正本。
   各ページで tokens.css をこのファイルより先に読み込むこと（ここでは再定義しない）。
   ただし長文の可読性を最優先し、装飾は LP より控えめにする。noindex 前提・ライト固定。 */

:root {
  /* draft-banner（ポップな黄系）。法務ページ固有のため tokens.css には置かない */
  --draft-bg: #FFF6DC;
  --draft-bg2: #FFEFC2;
  --draft-border: #F2D98A;
  --draft-ink: #8A6A12;

  /* 長文の可読幅・控えめな角丸。LP の --maxw(1080px)/--r(22px) とは
     意図的に別値のため、同名の再定義はせず別名トークンで持つ */
  --legal-maxw: 760px;
  --legal-r: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  /* 可読性優先：本文の行間は広めに */
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* LP の水玉の名残（ごく控えめ・本文の邪魔をしない密度） */
  background-image:
    radial-gradient(rgba(255, 207, 77, .10) 2px, transparent 2px),
    radial-gradient(rgba(143, 224, 168, .09) 2px, transparent 2px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  background-attachment: fixed;
}

a {
  color: var(--win-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--win); }

/* ===== 上部ナビ（LP と同じ雰囲気のワードマーク＋トップ戻り） ===== */
.legal-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 249, 239, .88);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 2px dotted var(--border);
}
.legal-nav .inner {
  max-width: var(--legal-maxw); margin: 0 auto; padding: 0 22px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.legal-nav .brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 900; font-size: 19px;
  text-decoration: none; color: var(--ink); letter-spacing: .01em;
}
/* index のヘッダーと同じロゴマーク（ナビ高 64px に合わせて少し小さめ） */
.legal-nav .brand img { width: 36px; height: 36px; display: block; }
.legal-nav .brand .accent { color: var(--win); }
.legal-nav a.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--win-deep); text-decoration: none;
  background: #fff; border: 2px solid var(--mint); border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 3px 0 rgba(143, 224, 168, .4);
  transition: transform .1s ease, box-shadow .1s ease;
}
.legal-nav a.back:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(143, 224, 168, .4); }
.legal-nav a.back:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(143, 224, 168, .4); }

/* ===== 本文コンテナ（読み物として広く・ゆったり） ===== */
main {
  max-width: var(--legal-maxw);
  margin: 0 auto;
  padding: 44px 22px 96px;
}

/* ===== draft-banner（ポップな黄系の注意帯） ===== */
.draft-banner {
  background: linear-gradient(var(--draft-bg), var(--draft-bg2));
  border: 2.5px solid var(--draft-border);
  color: var(--draft-ink);
  border-radius: var(--legal-r);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 32px;
  box-shadow: 0 4px 0 rgba(242, 217, 138, .5);
}
/* バナー内の【要記入】はバナー色になじませる（赤茶を出しすぎない） */
.draft-banner .todo { color: var(--draft-ink); }

/* ===== 見出し（丸ゴシック・cream の中で締まる） ===== */
h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(25px, 4.4vw, 34px);
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: .01em;
}
/* h1 直下に win 緑の太いアンダーバー（チャンキーな段差の名残・控えめ） */
h1::after {
  content: "";
  display: block;
  width: 64px; height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--win);
}

.meta {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 32px;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 22px);
  line-height: 1.5;
  margin: 46px 0 12px;
  padding-top: 28px;
  /* セクション区切りは点線（LP の dotted を踏襲） */
  border-top: 2px dotted var(--border);
}
/* 最初の h2 は上の区切り線を出さない（draft/meta 直後でうるさくしない） */
.meta + h2 { border-top: 0; padding-top: 0; margin-top: 8px; }

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.55;
  margin: 28px 0 8px;
  color: var(--ink);
}
/* h3 の頭に小さな win のドット（読み物の中の小見出しを示す・控えめ） */
h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mint);
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ===== 本文テキスト（詰め込みすぎない・行間広め） ===== */
p, li {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.95;
}
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--ink); }

ul, ol {
  padding-left: 1.4em;
  margin: 12px 0 18px;
}
li { margin: 8px 0; padding-left: .2em; }
/* リストマーカーを win 緑にして読み物の手がかりに（マーカーのみ着色） */
li::marker { color: var(--win); }

/* ===== 表（見やすさ最優先・角丸＋点線で軽く） ===== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 24px;
  font-size: 14.5px;
  line-height: 1.8;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--legal-r);
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(44, 42, 36, .05);
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1.5px dashed var(--border);
  vertical-align: top;
}
/* 横方向の区切り（最初の列以外の左に点線） */
td + td, th + th, th + td {
  border-left: 1.5px dashed var(--border);
}
tr:last-child th,
tr:last-child td { border-bottom: 0; }
th {
  font-family: var(--display);
  font-weight: 700;
  background: var(--win-bg);
  color: var(--win-deep);
  white-space: nowrap;
}
/* 縦見出し型（行頭の th＝項目名）も読みやすく */
td { color: var(--ink); background: transparent; }
/* colspan の注記セルは控えめに */
td[colspan] { color: var(--ink-dim); }

/* ===== 【要記入】等の未確定マーカー ===== */
.todo {
  color: #B85C00;
  font-weight: 700;
  background: rgba(255, 207, 77, .22);
  padding: 1px 6px;
  border-radius: 6px;
  /* 長い未確定文言（数百字の【要記入】）でも折り返して横はみ出ししないように。 */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ===== フッタ（点線区切り＋やわらかいリンク） ===== */
footer {
  border-top: 2px dotted var(--border);
  margin-top: 56px;
  padding-top: 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
footer a {
  color: var(--ink-dim);
  margin-right: 18px;
  text-decoration: none;
  font-weight: 700;
}
footer a:hover { color: var(--win); }

/* ===== モバイル ===== */
@media (max-width: 520px) {
  .legal-nav .inner { padding: 0 16px; height: 58px; }
  .legal-nav .brand { font-size: 17px; }
  .legal-nav .brand img { width: 32px; height: 32px; }
  .legal-nav a.back { font-size: 12.5px; padding: 7px 13px; }
  main { padding: 32px 16px 72px; }
  h2 { margin-top: 38px; }
  /* 表は横スクロールを許容して潰れを防ぐ（可読性優先） */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .legal-nav a.back { transition: none; }
}