/* ===========================================================
   GeoSynap — 法務ページ（privacy / terms / security）共通スタイル
   ===========================================================
   业务意图：
     PRIVACY / TERMS / SECURITY の 3 ページは「読ませる文書」であって
     LP のような演出面ではない。トップページ（index.html）は
     seo-geo.css が dark 基調を上書きしているが、法務ページは
     seo-geo.css を読み込まず、本ファイルだけで **白背景 + 黒文字** に切り替える。

   実装方針（なぜトークン上書きだけで済むか）：
     styles.css の topbar / footer / .brk / .kbd 等の chrome は全て
     :root のセマンティックトークン（--bg / --ink / --paper / --line …）
     経由で色を引いている。従って本ファイルで :root を再定義すれば、
     マークアップも chrome の CSS も一切触らずに配色だけ反転できる。
     → 「他の部分の見た目はトップページと同じ」を最小差分で満たす。

   配色ルール（オーナー指示）：
     背景は白、文字は黒のみ。ブランドの teal はアクセントとしても使わず、
     teal 系トークンは全て黒〜グレーへ潰す（トークンを消すと styles.css の
     var() 参照が壊れるので、値だけ差し替えて名前は残す）。
   ============================================================ */

:root {
  /* --- 面（背景）: 全て白系 --- */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f4f4f4;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;

  /* --- 文字: 黒〜グレーの 4 段。ink-3 以下は 10-11px の mono ラベル用で、
         白背景での AA コントラスト（4.5:1）を満たす濃さに留める --- */
  --ink: #111111;
  --ink-2: #333333;
  --ink-3: #595959;
  --ink-4: #6b6b6b;
  --muted: #333333;
  --dim: #595959;

  /* --- 罫線 --- */
  --line: rgba(17, 17, 17, 0.18);
  --line-soft: rgba(17, 17, 17, 0.09);
  /* ブループリント方眼（styles.css の body background-image）は
     長文の可読性を下げるので法務ページでは無効化する */
  --grid: transparent;

  /* --- teal 系を黒へ潰す。styles.css / 共通 chrome からの参照を壊さない為、
         変数名は残して値だけ無彩色にする --- */
  --teal: #111111;
  --teal-2: #111111;
  --teal-3: #111111;
  --teal-text: #111111;
  --teal-light: rgba(17, 17, 17, 0.35);
  --teal-pale: rgba(17, 17, 17, 0.07);
  --teal-paler: rgba(17, 17, 17, 0.04);
  --teal-glow: rgba(17, 17, 17, 0.12);

  /* --- 暗色ブロック（footer の CTA ブロック等）--- */
  --dark: #111111;
  --dark-2: #1a1a1a;
  --dark-3: #222222;
  --dark-line: rgba(255, 255, 255, 0.2);
}

/* topbar は styles.css で rgba(245,246,248,.85) のライト指定。
   白背景ページでは純白に寄せて段差を消す。 */
.topbar {
  background: rgba(255, 255, 255, 0.9);
}
.topbar nav a:hover { background: var(--teal-paler); }

/* ============ 本文レイアウト ============
   1 カラム・読み物幅 780px。styles.css の .shell（1200px）は
   LP 用に広すぎるので法務ページ専用の幅を持つ。 */
.legal {
  padding: 72px 0 96px;
}
.legal-shell {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* パンくず（BreadcrumbList スキーマと同じ並び。§5.6 #5 の
   「schema と本文の一致」を満たす為、表示側も同じ 3 段にする） */
.legal-breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.legal-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.legal-breadcrumb a:hover { color: var(--ink); }

/* ページ見出し。欧文ラベル（PRIVACY POLICY 等）は
   トップページの「// SECTION」ラベルと同じ mono 表現で揃える */
.legal-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 14px;
}
.legal-title {
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.legal-lede {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
}
.legal-rule {
  height: 1px;
  background: var(--ink);
  margin: 36px 0 44px;
}

/* 条番号つき見出し。h2 は「１．…」のように原文の番号を本文に持たせる
   （番号を CSS counter で生成すると原文と差異が出た時に気付けない為、
     テキストとして HTML に書く） */
.legal-body h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin: 48px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 10px;
}
.legal-body p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.legal-body ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.legal-body li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
  margin-bottom: 8px;
}
/* 行頭記号は「―」ではなく小さな黒い四角。teal ドット（.kbd .dot）の無彩色版 */
.legal-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--ink);
}
.legal-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 補足注記（※ で始まる但し書き） */
.legal-note {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* 情報ブロック：窓口 / 制定改定日 など。
   トップページの .brk（四隅ブラケット）と同じ「囲み」の語彙を、
   黒 1px の実線ボックスとして再利用する */
.legal-box {
  border: 1px solid var(--ink);
  padding: 24px 26px;
  margin: 24px 0 28px;
}
.legal-box .legal-box-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.legal-box p { font-size: 14px; line-height: 1.9; margin-bottom: 0; }
.legal-box p + p { margin-top: 10px; }

/* 定義リスト風の「ラベル：値」行（名称 / 住所 / 代表者 …） */
.legal-dl {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 10px 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.legal-dl dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-top: 3px;
}
.legal-dl dd { margin: 0; }

/* 署名（制定日・社名・代表者）。原文 PDF / ページの右寄せ体裁を踏襲 */
.legal-sign {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  text-align: right;
  font-size: 14px;
  line-height: 2;
  color: var(--ink-2);
}

/* 出典表記：本文は運営会社（株式会社イー・ビジネス）の公開文書からの転載である事を明示する。
   §5.6 #5「schema / 本文 / 実体の不一致」を避ける為、原典リンクを必ず併記する */
.legal-source {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--ink-3);
}
.legal-source a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.legal-source a:hover { color: var(--ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .legal { padding: 48px 0 64px; }
  .legal-shell { padding-inline: 20px; }
  .legal-body h2 { font-size: 17px; margin-top: 40px; }
  /* ラベル列を潰して縦積みに（7em 固定だと折返しが破綻する為） */
  .legal-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-dl dt { padding-top: 10px; }
  .legal-box { padding: 20px 18px; }
  .legal-sign { text-align: left; }
}