@charset "utf-8";

:root {
  --df-color-bg: #fff8e8;
  --df-color-surface: #ffffff;
  --df-color-text: #1f2933;
  --df-color-muted: #52606d;
  --df-color-line: #cbd7df;
  --df-color-primary: #202020;
  --df-color-primary-hover: #090909;
  --df-color-accent: #ffd84d;
  --df-color-accent-hover: #ffc928;
  --df-color-coral: #f05a47;
  --df-color-on-primary: #ffffff;
  --df-color-eyebrow: #8a6a37;
  --df-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --df-font-serif: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --df-font-size-body: 16px;
  --df-line-height-body: 1.8;
  --df-content-max: 1160px;
  --df-gutter: clamp(20px, 5vw, 64px);
  --df-section-space: clamp(72px, 9vw, 120px);
  --df-card-grid-gap: clamp(16px, 2.5vw, 32px);
  --df-radius: 24px;
  --df-radius-panel: 40px;
  --df-shadow-card: 0 14px 32px rgb(0 0 0 / 10%);
  --df-transition-duration: 200ms;
  --df-transition-easing: ease-out;
}