:root {
  --sn-color-brand-950: #3f0814;
  --sn-color-brand-900: #570d1d;
  --sn-color-brand-800: #681126;
  --sn-color-brand-700: #7a1730;
  --sn-color-brand-600: #92203b;
  --sn-color-brand-500: #ad2d4d;
  --sn-color-accent: #b77a2a;
  --sn-color-ink: #182033;
  --sn-color-ink-soft: #475467;
  --sn-color-muted: #667085;
  --sn-color-surface: #ffffff;
  --sn-color-surface-soft: #fbf8f6;
  --sn-color-surface-warm: #f5eeea;
  --sn-color-border: #e6d9d4;
  --sn-color-border-strong: #d6c3bb;
  --sn-color-success: #176b46;
  --sn-color-danger: #b42318;
  --sn-color-focus: #d59b42;
  --sn-shadow-sm: 0 10px 28px rgba(63, 8, 20, .07);
  --sn-shadow-md: 0 24px 60px rgba(63, 8, 20, .12);
  --sn-radius-sm: 10px;
  --sn-radius-md: 16px;
  --sn-radius-lg: 24px;
  --sn-radius-pill: 999px;
  --sn-shell: min(1200px, calc(100% - 40px));
  --sn-narrow: 780px;
  --sn-header-height: 78px;
  --sn-section-space: clamp(68px, 8vw, 108px);
  --sn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

@media (max-width: 680px) {
  :root {
    --sn-shell: min(100% - 28px, 1200px);
    --sn-header-height: 68px;
    --sn-section-space: 60px;
  }
}