/* SUIのデザイン値はここに集める（色・文字・余白・幅）。ヘッダー・フッター・ファーストビューの値もここ。
   他のセクション固有の値は、各 sections/*.css の先頭「このセクション固有の値」に置く。 */
[data-template="sui"] {
  --color-background: #f8f5ef;
  --color-surface: #fffdf8;
  --color-warm: #f3e9dd;
  --color-paper: #f6f0e7;
  --color-text: #4b3a2c;
  --color-text-muted: #74665a;
  --color-primary: #85693f;
  --color-soft: #d8c3a0;
  --color-on-primary: #fffdf8;
  --color-line: #e4d9c8;
  --color-shade: rgb(40 30 18 / 36%);
  --color-shade-strong: rgb(30 25 18 / 65%);
  --color-shade-bottom: rgb(30 25 18 / 52%);
  --color-wordmark: #e6dac3;
  --color-paper-deep: #eee4d7;
  --color-transparent: transparent;
  --font-heading: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* 題名・見出しの書体（明朝）。本文の書体（--font-body）を変えても題名はつられない */
  --font-title: var(--font-heading);
  /* 押すもの（ボタン・ナビ・リンク・ラベル）の書体（明朝）。本文の書体（--font-body）を変えても押すものはつられない */
  --font-control: var(--font-heading);
  --font-latin: Georgia, "Times New Roman", serif;
  --font-size-heading: 2.5rem;
  --font-size-lead: 1.25rem;
  /* お悩みの説明文（「どこから相談すれば…」）だけの大きさ */
  --font-size-note-lead: 0.9375rem;
  /* FAQの答えの文だけの大きさ */
  --font-size-faq-answer: 1.125rem;
  --font-size-body: 1.125rem;
  --font-size-button: 1.125rem;
  --font-size-control: 1rem;
  --font-size-card: 1.5rem;
  --font-size-small: 0.875rem;
  --font-size-eyebrow: 0.875rem;
  --font-size-number: 5.25rem;
  --font-size-wordmark: 12rem;
  --font-size-brand: 1.75rem;
  --font-size-brand-small: 1.25rem;
  --font-size-hero-title: 3.75rem;
  --font-size-quote: 2rem;
  --font-size-quote-mark: 7rem;
  --line-body: 2;
  --motion-duration: 0.25s;
  --motion-easing: ease;
  --motion-arrow: 4px;
  --color-primary-hover: #665130;
  --line-heading: 1.6;
  --line-tight: 1;
  --line-hero-title: 1.45;
  --weight-heading: 400;
  --weight-body: 400;
  /* 題名を太く見せる太さ（明朝は 600。本文の太さとは別） */
  --weight-title: 600;
  --track-heading: 0.08em;
  --track-eyebrow: 0.27em;
  --track-brand: 0.3em;
  --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-button-padding: 40px;
  --space-focus: 0.25rem;
  --size-content: 1248px;
  --size-button-height: 45px;
  --size-button-width: 250px;
  --size-small-button: 180px;
  --size-line: 1px;
  --size-focus-line: 2px;
  --size-decoration: 224px;
  --size-page-top: 44px;
  --space-page-top-x: 16px;
  --space-skip-link: -8rem;
  --radius-button: 160px;
  --radius-arch: 50% 50% 0 0;
  --radius-photo: 192px;
  /* 大きな「SUI」の文字の薄さ（石の写真とは別の値） */
  --opacity-wordmark: 0.7;
  --columns-split: 0.78fr 1.22fr;
  /* ヘッダー・フッター・ファーストビューの値（セクションCSSには書かない） */
  --space-header-y: 24px;
  --space-header-inline: 56px;
  --size-header-toggle: 48px;
  --size-header-toggle-bar: 24px;
  --space-drawer: 104px 20px 32px;
  --space-footer-y: 32px;
  --space-hero: 56px;
  --size-hero-height: 836px;
  --size-hero-copy: 576px;
  --size-hero-shade: 136px;
  --size-scroll-line: 56px;
  --motion-scroll-cue: 2.8s;
}

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