/* ============================================================
 * 家系図先生 Pro — Document テーマ共通スタイル (公開ページの単一ソース)
 *
 * 司法書士事務所のような格調・公式書類感を和紙色 + 渋い朱 + 墨で表現。
 * public/*.html (landing / samples / guide / security / privacy / terms /
 * tokushoho) が共通で読み込む。 page 固有の見た目は各 HTML の inline <style>
 * に残す (ここには「全ページ共通の土台」 だけを置く)。
 *
 * D5 制約 (自ドメイン外 fetch 禁止) 完全準拠:
 * - Web font CDN 不使用、 system font stack で明朝 / 角ゴ / 等幅を確保
 * - 外部 URL / @import を一切書かない (consistency テストが機械検査)
 *
 * cascade 規約: 各ページは <head> でこのファイルを inline <style> より前に
 * 読み込む。 page 固有 inline が後勝ちで上書きできるよう、 ここに置くのは
 * 原則「単一クラス / 要素」 の低詳細度セレクタにとどめる (ヘッダー / フッターの
 * a:hover 等の要素子孫は共通部品として例外的に許容)。 page 固有のレイアウト
 * 上書き (.final-cta-row .btn-primary 等の複合セレクタ) は page 側 inline に残す。
 *
 * フォント: system font stack のみ。 self-host フォントを足す場合も外部 CDN は
 * 禁止 (D5)。 @font-face の src は同 origin 相対パス (/fonts/...) にすること。
 *
 * 役割で変わる値は CSS 変数で受ける (page 側が body で値だけ指定):
 * - --measure : 読み物の本文幅 (.container-narrow の max-width・既定 880px)
 * - --leading : 本文の行間 (body line-height・既定 1.7)
 * ============================================================ */

:root {
  --ink:      #1a1814;
  --ink-2:    #3a352e;
  --ink-3:    #6b6358;
  --paper:    #f5f1e8;
  --paper-2:  #ebe5d6;
  --paper-3:  #e0d9c6;
  --line:     #c7bfac;
  --line-2:   #a89e85;
  --accent:   #8a2a1f;
  --accent-2: #c9a14a;

  /* 明朝 (タイトル / 見出し / 本文) */
  --serif:
    'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho',
    'MS Mincho', 'ＭＳ 明朝', serif;

  /* 角ゴ (補足ラベル / フォーム / 副情報) */
  --sans:
    'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
    'Yu Gothic', 'YuGothic',
    メイリオ, Meiryo, sans-serif;

  /* 等幅 (モノクロラベル / コードらしい雰囲気) */
  --mono:
    ui-monospace, 'SF Mono', 'Menlo', 'Consolas',
    'Courier New', monospace;

  /* 役割で変わる値の既定 (page 側が body で上書きする) */
  --measure: 880px;
  --leading: 1.7;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Firefox 向けスクロールバー (WebKit は下記 ::-webkit-scrollbar) */
  scrollbar-color: var(--line) var(--paper);
  scrollbar-width: thin;
}
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: var(--leading, 1.7);
  font-feature-settings: 'palt' 1;
}

/* 背景の紙質感 — 2 層のぼかしと SVG ノイズで和紙らしさを出す */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(138, 42, 31, 0.025) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(26, 24, 20, 0.03) 0, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
body > * { position: relative; z-index: 2; }

a { color: inherit; }
::selection { background: var(--accent); color: var(--paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--paper); }

.container        { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--measure, 880px); margin: 0 auto; padding: 0 32px; }

/* ----- 共通: モノクロラベル (各セクションの上に添える小さい英字ラベル) ----- */
.label-mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-mono.is-spaced  { margin-bottom: 16px; }
.label-mono.is-spaced-lg { margin-bottom: 32px; }

/* ----- 共通: ボタン (司法書士印章のような角ばった矩形) -----
   主ボタンの渋い朱は .btn-accent / .btn-primary の二名を同義で持つ
   (ページごとに使う名前が違うため・命名統一は v-next)。
   枠線ボタンは .btn-ghost / .btn-secondary、 暗背景は .btn-ghost-on-dark /
   .btn-on-dark を同義で持つ。
   配置・寸法の土台は全別名に効かせる (samples は .btn を付けず .btn-primary
   等を単独で使うため・土台が別名に無いとプレーン文字化する)。 色だけ各変種で
   上書きする (後勝ち cascade)。 */
.btn,
.btn-accent,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-ghost-on-dark,
.btn-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  line-height: 1;
  border-radius: 0;
}

/* 既定 (墨) */
.btn { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--accent); border-color: var(--accent); }

/* 主ボタン (渋い朱) */
.btn-accent,
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn-accent:hover,
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

/* 枠線ボタン */
.btn-ghost,
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

/* 暗背景上の枠線ボタン */
.btn-ghost-on-dark,
.btn-on-dark {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper-3);
}
.btn-ghost-on-dark:hover,
.btn-on-dark:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ----- 共通: フェードイン (IntersectionObserver で順次表示・/js/fadein.js) -----
   動き規約 (CLAUDE.md): 280〜350ms + easeOutCubic で「ぬるっと着地」。 */
.fadein {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 320ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 320ms cubic-bezier(0.33, 1, 0.68, 1);
}
.fadein.visible { opacity: 1; transform: translateY(0); }
/* 動きを抑える設定の利用者には即時表示。 印刷時も必ず全要素を出す
   (IntersectionObserver で .visible 未付与のセクションが白紙印刷される事故を防ぐ) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fadein { opacity: 1; transform: none; transition: none; }
}
@media print {
  .fadein { opacity: 1 !important; transform: none !important; transition: none !important; }
  body::before, body::after { display: none; }
}

/* ============ HEADER ============ */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  background: var(--paper);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand-banner {
  height: 40px;
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--serif);
  font-size: 16px;
}
.site-nav a { text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--accent); }
.site-nav .btn { padding: 8px 18px; font-size: 15px; }

@media (max-width: 833px) {
  .brand-banner { height: 32px; }
  .site-nav { gap: 16px; font-size: 14px; }
  .site-nav-link { display: none; }
}

/* ============ FOOTER ============ */
.site-footer {
  padding: 48px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer-copy {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.site-footer-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-family: var(--serif);
  flex-wrap: wrap;
}
.site-footer-links a {
  color: var(--ink-3);
  text-decoration: none;
}
.site-footer-links a:hover { color: var(--accent); }
/* フッター下部の控えめな商標表記。 */
.site-footer-trademark {
  max-width: 1240px;
  margin: 22px auto 0;
  padding: 16px 32px 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-3);
}
