@charset "utf-8";

:root {
  --df-color-bg: #ffffff;
  --df-color-surface: #f3f7f8;
  --df-color-text: #263238;
  --df-color-muted: #5d6a70;
  --df-color-line: #cbd8da;
  --df-color-primary: #174f57;
  --df-color-primary-hover: #103d43;
  --df-color-accent: #c35400;
  --df-color-accent-hover: #963e00;
  --df-color-on-primary: #ffffff;
  --df-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --df-font-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --df-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --df-font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --df-font-size-body: 20px;
  --df-line-height-body: 1.8;
  --df-content-max: 1200px;
  --df-panel-max: 1280px;
  --df-gutter: 24px;
  --df-section-space: 72px;
  --df-card-grid-gap: clamp(16px, 2vw, 32px);
  --df-radius: 18px;
  --df-radius-panel: 28px;
  --df-shadow-card: 0 8px 20px rgb(10 61 67 / 12%), 0 2px 5px rgb(10 61 67 / 7%);
  --df-shadow-panel: 0 16px 36px rgb(10 61 67 / 16%), 0 4px 10px rgb(10 61 67 / 8%);
  --df-shadow-float: 0 24px 48px rgb(10 61 67 / 20%), 0 8px 18px rgb(10 61 67 / 10%);
  --df-shadow-btn-rest: 0 7px 0 #7f3500, 0 12px 20px rgb(195 84 0 / 20%);
  --df-shadow-btn-hover: 0 5px 0 #7f3500, 0 8px 14px rgb(195 84 0 / 18%);
  --df-shadow-btn-active: 0 1px 0 #7f3500, 0 3px 7px rgb(195 84 0 / 16%);
  --df-shadow-btn-glow-rest: 8px 8px 0 #f7c79e, 0 13px 25px rgb(0 0 0 / 25%);
  --df-shadow-btn-glow-hover: 5px 5px 0 #f7c79e, 0 8px 18px rgb(0 0 0 / 25%);
  --df-shadow-hero-band: 0 20px 0 rgb(255 255 255 / 16%), 0 40px 0 rgb(255 255 255 / 10%);
  --df-shadow-soft-inset: inset 0 1px 0 rgb(255 255 255 / 12%);
  --df-shadow-emphasis: 0 8px 22px rgb(0 0 0 / 19%);
  --df-transition-duration: 180ms;
}

@media (min-width: 768px) {
  :root {
    --df-gutter: 40px;
    --df-section-space: 96px;
  }
}