/* 白樹のデザイン値はここに集める（色・文字・余白・幅）。ヘッダー・フッター・ファーストビューの値もここ。
   他のセクション固有の値は、各 sections/*.css の先頭「このセクション固有の値」に置く。 */
[data-template="shiraki"] {
  /* 明るい面の色 */
  --color-light-background: #ffffff;
  --color-light-surface: #ffffff;
  --color-light-text: #1c2533;
  --color-light-text-muted: #2f3845;
  --color-light-line: #d9dde3;
  --color-light-primary: #9b6a3a;
  /* 暗い面の色（紺） */
  --color-dark-background: #14284a;
  --color-dark-surface: #1b3359;
  --color-dark-text: #ffffff;
  --color-dark-text-muted: #d3dae5;
  --color-dark-line: rgb(255 255 255 / 40%);
  --color-dark-primary: #c9a678;
  /* いま使う色（面の明暗で切り替わる。common.css の data-tone） */
  --color-background: var(--color-light-background);
  --color-surface: var(--color-light-surface);
  --color-text: var(--color-light-text);
  --color-text-muted: var(--color-light-text-muted);
  --color-line: var(--color-light-line);
  --color-primary: var(--color-light-primary);
  /* 灰色の面（一つおきのセクションの背景） */
  --color-wash: #f2f4f7;
  /* 紺のボタン・見出しの帯 */
  --color-accent: #14284a;
  --color-accent-hover: #24406d;
  --color-on-accent: #ffffff;
  --color-on-primary: #ffffff;
  --color-required: #9b6a3a;
  --color-line-green: #06c755;
  --color-shade: rgb(10 20 38 / 55%);
  --color-shade-strong: rgb(10 20 38 / 80%);
  --color-transparent: transparent;
  --font-heading: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  /* 本文の書体（ゴシック。Google Fonts の Noto Sans JP を index.html で読み込む。読めないときはメイリオ） */
  --font-body: "Noto Sans JP", Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 題名・見出しの書体（明朝） */
  --font-title: var(--font-heading);
  /* 押すもの（ボタン・ナビ・リンク・ラベル）の書体（ゴシック） */
  --font-control: var(--font-body);
  --font-latin: "Times New Roman", Georgia, var(--font-heading);
  --font-size-heading: 2.75rem;
  --font-size-body: 1.25rem;
  --font-size-button: 1.125rem;
  --font-size-control: 1rem;
  /* よくある質問の答えの文（質問より少し小さく） */
  --font-size-faq-answer: 1.25rem;
  --font-size-card: 1.625rem;
  --font-size-lead: 1.375rem;
  --font-size-small: 1rem;
  --font-size-eyebrow: 0.875rem;
  --font-size-number: 2.5rem;
  --font-size-brand: 1.5rem;
  --font-size-hero-title: 3.75rem;
  --line-body: 1.9;
  --line-heading: 1.6;
  --line-tight: 1.2;
  --line-hero-title: 1.5;
  /* 押すものの太さ */
  --weight-heading: 700;
  --weight-body: 400;
  /* 題名を太く見せる太さ（明朝は 600） */
  --weight-title: 600;
  --track-heading: 0.08em;
  --track-eyebrow: 0.2em;
  --track-brand: 0.12em;
  --motion-duration: 0.25s;
  --motion-easing: ease;
  --motion-arrow: 4px;
  --space-section: 100px;
  --space-offset: 16px;
  --space-inline: 80px;
  --space-stack: 24px;
  --space-small: 12px;
  --space-tiny: 6px;
  --space-grid: 80px;
  --space-card-gap: 48px;
  --space-heading: 56px;
  --space-list: 24px;
  --space-card: 32px;
  --space-button-padding: 32px;
  --space-focus: 0.25rem;
  --size-content: 1248px;
  --size-button-height: 56px;
  --size-button-width: 240px;
  --size-small-button: 200px;
  --size-line: 1px;
  --size-focus-line: 2px;
  --size-rule: 40px;
  --size-icon: 28px;
  --size-icon-large: 40px;
  --size-page-top: 44px;
  --space-page-top-x: 16px;
  --space-skip-link: -8rem;
  --radius-button: 0;
  --radius-card: 2px;
  --columns-split: 1fr 1fr;
  /* ヘッダー・フッター・ファーストビューの値（セクションCSSには書かない） */
  --space-header-y: 12px;
  --space-header-inline: 56px;
  --size-header-toggle: 48px;
  --size-header-toggle-bar: 24px;
  --size-logo: 44px;
  --space-nav-y: 14px;
  --space-drawer: 104px 20px 32px;
  --space-footer-y: 56px;
  --space-hero: 64px;
  --size-hero-height: 600px;
  --size-hero-copy: 760px;
}

/* ページ内リンクで見出しがヘッダーに隠れないための余白（スマホのみ使用） */
html:has(body[data-template="shiraki"]) {
  --size-scroll-offset: 96px;
}