:root {
  /* Colors */
  --color-white: #fff;
  --color-black: #000;
  --color-text: #333;
  --color-text-muted: #555;
  --color-text-light: #8a8a8a;
  --color-gray-800: #1a202c;

  --color-green: #07b53b;
  --color-green-accent: #34b157;

  --color-red: #e04950;

  /* Typography */
  --font-family: "Noto Sans JP", sans-serif;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-md: 1.125rem;  /* 18px */
  --font-size-xl: 2rem;      /* 32px */

  /* Layout
   * Figma 1920px frame → コンテンツ幅 1280px（左右 320px はビューポート余白）
   * Figma 1024px frame → コンテンツ幅 768px（左右 128px はビューポート余白）
   */
  --container-max: 1280px;
  --container-max-tablet: 768px;
  --gutter-sp: 24px;

  /* Breakpoints (for reference in media queries) */
  --bp-tablet: 769px;
  --bp-desktop: 1025px;

  /* Header（Figma 45880:769 より。小数は四捨五入） */
  --header-height-sp: 60px;
  --header-height-tablet: 81px;   /* 81.067 → 81 */
  --header-height-desktop: 152px;

  /* Logo（Figma実寸。SP 45890:2983 / Tablet 45890:2609 / PC 45880:769） */
  --header-logo-height-sp: 60px;
  --header-logo-width-sp: 140px;
  --header-logo-trim-sp: 8px;
  --header-logo-height-tablet: 77px;
  --header-logo-width-tablet: 114px;
  --header-logo-height-desktop: 82px;
  --header-logo-width-desktop: 213px;

  /* Nav */
  --header-nav-font-size: 18px;
  --header-nav-gap: 40px;
  --header-nav-padding-end: 13px;   /* 13.333 → 13 */

  /* Header buttons — border 幅共通（box-sizing: border-box） */
  --header-btn-border-sp: 2px;
  --header-btn-border-tablet: 3px;
  --header-btn-border-desktop: 4px;
  --header-btn-font-sp: 11px;
  --header-btn-font-tablet: 16px;
  --header-btn-font-desktop: 21px;    /* 21.333 → 21 */
  --header-btn-padding-y-sp: 6px;     /* 5.859 → 6 */
  --header-btn-padding-x-sp: 11px;    /* 11.185 → 11 */
  --header-btn-padding-y-tablet: 10px;
  --header-btn-padding-x-tablet: 20px;
  --header-btn-padding-y-desktop: 15px; /* 14.667 → 15 */
  --header-btn-padding-x-desktop: 28px;
  --header-btn-radius-green: 100px;
  --header-btn-radius-red: 83px;      /* Figma 営業時間タイプ側 */
  --header-btn-gap-sp: 8px;
  --header-btn-gap-desktop: 13px;     /* 13.333 → 13（ボタン間） */

  /* Section / CTA（PC基準値） */
  --section-padding-desktop: 64px;
  --section-gap-desktop: 64px;
  --section-title-size-desktop: 48px;
  --cta-block-padding-desktop: 64px;
  --cta-btn-padding-y-desktop: 43px;
  --cta-btn-padding-x-desktop: 64px;
  --cta-btn-font-desktop: 32px;
  --cta-btn-max-width-desktop: 720px;
  --footer-padding-top-desktop: 133px;

  /* Hero */
  --hero-visual-max-pc: 1341px;
  --hero-pc-min-width: 1025px; /* タブレット: 1024px以下のクロップ基準（1025px時のPCサイズ） */
  --hero-scene-width-crop: var(--hero-pc-min-width);
  --hero-scene-height-crop: calc(var(--hero-pc-min-width) * 711 / 1509);
  --hero-phone-height-sp-min: 364px;
  --hero-phone-height-sp-max: 425px;
  --hero-sp-scene-trim-block: 32px; /* SP: 端末画像の上下トリム（16px × 2） */
  --hero-bg-height-sp-min: 280px;
  --hero-bg-height-sp-max: 482px;
  --hero-sp-fluid-min-vw: 390px;
  --hero-sp-fluid-max-vw: 768px;
  --hero-sp-fluid-range: calc(var(--hero-sp-fluid-max-vw) - var(--hero-sp-fluid-min-vw)); /* 378px */
  --hero-shadow: 0 4px 25px rgba(35, 157, 107, 0.25);

  /* Radius */
  --radius-pill: 100px;
  --radius-cta: 267px; /* 266.667 → 267 */

  /* Shadow */
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.08);

  /* Z-index */
  --z-header: 100;
}

@media (min-width: 1025px) {
  :root {
    --header-height-desktop: min(100px, calc(100vw * 100 / 1280));
    --header-logo-height-desktop: min(82px, calc(100vw * 82 / 1280));
    --header-logo-width-desktop: min(180px, calc(100vw * 180 / 1280));
    --header-nav-font-size: min(18px, calc(100vw * 18 / 1280));
    --header-nav-gap: min(40px, calc(100vw * 40 / 1280));
    --header-nav-padding-end: min(13px, calc(100vw * 13 / 1280));
    --header-btn-border-desktop: max(2px, min(4px, calc(100vw * 4 / 1280)));
    --header-btn-font-desktop: min(21px, calc(100vw * 21 / 1280));
    --header-btn-padding-y-desktop: min(12px, calc(100vw * 12 / 1280));
    --header-btn-padding-x-desktop: min(24px, calc(100vw * 24 / 1280));
    --header-btn-radius-green: min(100px, calc(100vw * 100 / 1280));
    --header-btn-radius-red: min(83px, calc(100vw * 83 / 1280));
    --header-btn-gap-desktop: min(13px, calc(100vw * 13 / 1280));

    --section-padding-desktop: min(64px, calc(100vw * 64 / 1280));
    --section-gap-desktop: min(64px, calc(100vw * 64 / 1280));
    --section-title-size-desktop: min(48px, calc(100vw * 48 / 1280));
    --cta-block-padding-desktop: min(64px, calc(100vw * 64 / 1280));
    --cta-btn-padding-y-desktop: min(43px, calc(100vw * 43 / 1280));
    --cta-btn-padding-x-desktop: min(64px, calc(100vw * 64 / 1280));
    --cta-btn-font-desktop: min(32px, calc(100vw * 32 / 1280));
    --cta-btn-max-width-desktop: min(720px, calc(100vw * 720 / 1280));
    --radius-cta: min(267px, calc(100vw * 267 / 1280));
    --footer-padding-top-desktop: min(133px, calc(100vw * 133 / 1280));

    --hero-title-size: min(48px, calc(100vw * 48 / 1280));
    --hero-title-leading: min(71px, calc(100vw * 71 / 1280));
    --hero-lead-size: min(18px, calc(100vw * 18 / 1280));
    --hero-lead-leading: min(28px, calc(100vw * 28 / 1280));
    --hero-text-gap: min(32px, calc(100vw * 32 / 1280));
    --hero-content-gap: min(32px, calc(100vw * 32 / 1280));
    --hero-shadow: 0 min(4px, calc(100vw * 4 / 1280)) min(25px, calc(100vw * 25 / 1280)) rgba(35, 157, 107, 0.25);
  }
}