:root {
  /* Container */
  --container-max: 1120px;
  --container-narrow: 720px;
  --container-padding-sp: 20px;
  --container-padding-tb: 32px;
  --container-padding-pc: 40px;

  /* Section spacing */
  --section-gap-sp: 64px;
  --section-gap-tb: 88px;
  --section-gap-pc: 104px;

  /* Colors (tone-spec 2026-08-17) */
  --color-brand: #282850;
  --color-primary: #00c9b1;
  --color-primary-dark: #00a090;
  --color-primary-soft: #b6f0e6;
  --color-accent: #2eb8e0;
  --color-accent-soft: #bfeaf7;
  --color-bg: #cff3ec;
  --color-surface: #ffffff;
  --color-text: #0f1a2e;
  --color-muted: #3a4a63;
  --color-border: #8ecbc4;
  --color-hero-overlay: #00000080;
  --color-table-label: #7dd9cd;
  --color-table-label-line: #5cb8ae;

  /* LINE */
  --color-line: #06c755;
  --color-line-dark: #05b34c;
  --color-line-soft: #e8f9ef;

  /* Radius / shadow */
  --radius-btn: 12px;
  --radius-card: 16px;
  --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);

  /* Typography */
  --font-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --lh-body: 1.9;

  /* Seam (≈3°) */
  --seam-angle: 3deg;
  --seam-h: calc(100vw * 0.0524);

  /* Header */
  --header-h: 56px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 76px;
    --seam-h: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
    --seam-h: 75px;
  }
}