/* NEXAのデザイン値はここに集める（色・文字・余白・幅）。ヘッダー・フッター・ファーストビューの値もここ。
   他のセクション固有の値は、各 sections/*.css の先頭「このセクション固有の値」に置く。 */
[data-template="nexa"] {
  /* 明るい面の色 */
  --color-light-background: #f2f7fb;
  --color-light-surface: #ffffff;
  --color-light-text: #0b1d33;
  --color-light-text-muted: #4a5b70;
  --color-light-line: #d9e4ee;
  --color-light-primary: #1597b5;
  /* 暗い面の色 */
  --color-dark-background: #071526;
  --color-dark-surface: #0c1f36;
  --color-dark-text: #eef6ff;
  --color-dark-text-muted: #b4c3d6;
  --color-dark-line: rgb(255 255 255 / 16%);
  --color-dark-primary: #45e6f0;
  /* いま使う色（面の明暗で切り替わる。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-accent: #45e6f0;
  --color-accent-hover: #8af2f7;
  --color-on-accent: #071526;
  --color-on-primary: #ffffff;
  --color-soft: #a8e6f0;
  --color-required: #e5484d;
  --color-shade: rgb(4 12 24 / 60%);
  --color-shade-strong: rgb(4 12 24 / 82%);
  --color-veil: rgb(255 255 255 / 82%);
  --color-glow: rgb(69 230 240 / 35%);
  --color-transparent: transparent;
  --font-body: Meiryo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* 題名・見出しの書体。本文の書体（--font-body）を変えても題名はつられない */
  --font-title: var(--font-body);
  /* 押すもの（ボタン・ナビ・リンク・ラベル）の書体 */
  --font-control: var(--font-body);
  --font-latin: "Segoe UI", "Helvetica Neue", Arial, var(--font-body);
  --font-size-heading: 2.5rem;
  --font-size-body: 1.125rem;
  --font-size-button: 1.125rem;
  --font-size-control: 1rem;
  /* よくある質問の答えの文（質問より少し小さく） */
  --font-size-faq-answer: 1.125rem;
  --font-size-card: 1.5rem;
  --font-size-lead: 1.25rem;
  --font-size-small: 0.875rem;
  --font-size-eyebrow: 0.875rem;
  --font-size-number: 2.25rem;
  --font-size-brand: 1.5rem;
  --font-size-hero-title: 3.75rem;
  --line-body: 1.9;
  --line-heading: 1.5;
  --line-tight: 1.2;
  --line-hero-title: 1.4;
  --weight-heading: 700;
  --weight-body: 400;
  /* 題名を太く見せる太さ（メイリオは 400 と 700 だけ） */
  --weight-title: 700;
  --track-heading: 0.04em;
  --track-eyebrow: 0.16em;
  --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: 999px;
  --radius-card: 6px;
  --columns-split: 1fr 1fr;
  /* 見出しを左、中身を右に置く段組み */
  --columns-heading-side: 380px 1fr;
  /* ヘッダー・フッター・ファーストビューの値（セクションCSSには書かない） */
  --space-header-y: 16px;
  --space-header-inline: 56px;
  --size-header-toggle: 48px;
  --size-header-toggle-bar: 24px;
  --size-logo: 36px;
  --space-drawer: 104px 20px 32px;
  --space-footer-y: 72px;
  --space-hero: 72px;
  --size-hero-height: 620px;
  --size-hero-copy: 780px;
  --size-hero-photo: 62%;
  --size-scroll-line: 40px;
  --motion-scroll-cue: 2.8s;
}

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