:root {
  /* Colors */
  --color-bg: #fff9ea;
  --color-bg-white: #ffffff;
  --color-text: #393332;
  --color-text-muted: #6b6565;
  --color-text-note: #927c7c;
  --color-accent: #e35b4e;
  --color-band: #ff9389;
  --color-heading-line: #96c771;
  --color-nav-drawer-bg: #e0efd4;
  --color-contact-border: #96c771;
  --color-placeholder: #949494;

  /* Typography */
  --font-family: "Zen Maru Gothic", sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --letter-spacing-vertical-title: 0.2em;
  --letter-spacing-heading: 1.2px;
  --letter-spacing-heading-sm: 1.1px;
  --letter-spacing-body-18: 0.9px;
  --letter-spacing-body-15: 0.75px;
  --letter-spacing-body-14: 0.7px;
  --line-height-vertical-title: 1.2;
  --line-height-heading: 1.8;
  --line-height-body-18: 2;

  /* Layout */
  --page-max-width: 1440px;
  --section-padding-x: 246px;
  --section-padding-y: 80px;
  --content-width: 956px;
  --services-content-width: 1012px;
  --services-strawberry-size: 159px;
  /* Services 中間幅（901〜1300px）— 1440px 基準を vw で縮小 */
  --services-md-stage-gap: clamp(20px, 2.2vw, 32px);
  --services-md-stage-max: clamp(320px, 72vw, 1012px);
  --services-md-body-max: clamp(240px, 48vw, 720px);
  --services-md-cards-gap: clamp(16px, 2vw, 24px);
  --services-md-card-basis: clamp(160px, 18vw, 260px);
  --services-md-card-max: clamp(180px, 20vw, 260px);
  --services-md-card-padding: clamp(16px, 2vw, 24px);
  --services-md-card-title: clamp(18px, 1.6vw, 22px);
  --services-md-strawberry: clamp(88px, 11vw, 159px);

  /* Services SP（Figma 51:627） */
  --services-sp-card-max-width: 300px;
  /* 見出し24 + gap20 + カード300 + 左右 padding 36 */
  --services-sp-stage-max-width: 380px;
  --services-sp-strawberry-width: 70px;
  --services-sp-strawberry-top: 15px;
  --services-sp-strawberry-right: 18px;
  --services-sp-card-title-size: 20px;
  --services-sp-cream-depth: 64px;
  /* SP：ピンク開始（cream + inset）— 大きいほど帯は下がり、見出しにかかりにくい */
  --services-sp-band-inset: 168px;
  /* PC ピンク帯（Figma 108:1402 — top 192.06px / h 336px @1440） */
  --services-band-pc-top: calc(min(100vw, var(--page-max-width)) * 192.06 / 1440);
  --services-band-pc-height: calc(min(100vw, var(--page-max-width)) * 336 / 1440);
  --services-wave-aspect: 1440 / 96;

  /* Shop コンテンツ（Figma 86:1124 @1440） */
  --shop-content-max-width: calc(min(100vw, var(--page-max-width)) * 892 / 1440);
  --shop-content-gap: calc(min(100vw, var(--page-max-width)) * 40 / 1440);
  --shop-banner-width: calc(min(100vw, var(--page-max-width)) * 500 / 1440);
  --shop-text-width: calc(min(100vw, var(--page-max-width)) * 352 / 1440);
  --shop-text-desc-width: calc(min(100vw, var(--page-max-width)) * 336 / 1440);

  /* Hero SP（Figma 51:812 / SP_0518 13:3） */
  --hero-body-padding-block: 96px;
  --hero-sp-body-padding-block: 96px;
  --hero-sp-logo-width: 260px;
  /* Figma 51:767 は 139px・nowrap。実フォント用に余裕を持たせる */
  --hero-sp-copy-max-width: 168px;
  --hero-sp-wave-h: 27px;
  --hero-sp-wave-ratio: 402 / 26.7832;
  /* ヒーロー SP フルーツ — 位置は %（hero__decorations 基準・換算 390×321） */
  --hero-sp-persimmon-right: -15.14%;
  --hero-sp-persimmon-top: -0.32%;
  --hero-sp-persimmon-max-width: 151.375px;
  --hero-sp-peach-cut-right: 25.44%;
  --hero-sp-peach-cut-bottom: -21.96%;
  --hero-sp-peach-cut-aspect: 40 / 41;
  --hero-sp-strawberry-cbr-right: 12.94%;
  --hero-sp-strawberry-cbr-bottom: 12.14%;
  --hero-sp-strawberry-cbr-aspect: 10 / 9;
  --hero-sp-grape-heart-right: 23.77%;
  --hero-sp-grape-heart-top: 9.99%;
  --hero-sp-muscat-blur-cb-right: 58.79%;
  --hero-sp-muscat-blur-cb-bottom: 5.91%;
  --hero-sp-peach-blur-left: -18%;
  --hero-sp-peach-blur-bottom: 22.08%;
  --hero-sp-strawberry-cut-left: 36.41%;
  --hero-sp-strawberry-cut-top: -13.48%;
  /* About SP（Figma 86:1230） */
  --about-sp-radius: 10px;
  --about-sp-padding-top: 90px;
  --about-sp-padding-bottom: 48px;
  --about-sp-padding-inline-start: 16px;
  --about-sp-padding-inline-end: 20px;
  --about-sp-inner-gap: 20px;
  /* タブレット（501〜1024px）— 縦見出しと本文の間 */
  --section-sp-tablet-inner-gap: 12px;
  /* SP 本文列幅（Figma 390 枠 — 16+20+12+見出し16 = 326） */
  --section-sp-body-width: 326px;
  --about-sp-heading-slot: 24px;
  /* 上段 01+02（Figma 86:1239） */
  --about-sp-landscape-main-w: 78.51%;
  --about-sp-landscape-main-ratio: 400 / 300;
  --about-sp-landscape-accent-w: 35.32%;
  --about-sp-landscape-accent-ratio: 240 / 222;
  --about-sp-landscape-accent-left: 64.68%;
  --about-sp-landscape-accent-top: 112.2px;
  /* 下段 03+04（Figma 86:1246） */
  --about-sp-portrait-gap: 12px;
  --about-sp-portrait-accent-w: 121px;
  --about-sp-portrait-accent-h: 151px;
  --about-sp-portrait-accent-ratio: 121 / 151;
  --about-sp-portrait-main-ratio: 299 / 372;
  /* About SP タブレット（901〜1024px）— ブロック中央・画像上限 */
  --about-sp-figure-max-md: clamp(320px, 38vw, 440px);
  --about-sp-portrait-row-max-md: clamp(320px, 38vw, 440px);
  /* About SP 中間（501〜900px）— 画像が大きくなりすぎない上限 */
  --about-sp-landscape-figure-max: clamp(290px, 36vw + 140px, 400px);
  --about-sp-portrait-row-max: clamp(290px, 36vw + 140px, 432px);
  /* About 中間幅（901〜1300px）— 画面幅に応じて縮小（上限は PC より小さめ） */
  --about-md-landscape-max: clamp(180px, 22vw, 300px);
  --about-md-portrait-row-max: clamp(200px, 26vw, 280px);
  --about-md-portrait-accent: clamp(64px, 8.5vw, 121px);
  --about-md-portrait-main-max: clamp(120px, 15vw, 180px);
  --about-md-portrait-main-width: clamp(120px, 15vw, 260px);
  --about-md-portrait-accent-gap: clamp(48px, 7vw, 160px);

  /* Members 写真（Figma PC / SP 共通・未設定時はマスク形状で灰色） */
  --members-apple-photo-width: 179.023px;
  --members-apple-photo-height: 210.517px;
  --members-photo-masked-size: 226.5px;
  --members-photo-grape-width: 186.202px;
  --members-photo-grape-height: 230.625px;
  --members-photo-strawberry-width: 163.249px;
  --members-photo-strawberry-height: 230.625px;
  --members-photo-rotate: 12deg;

  /* Members 中間幅（901〜1300px）— 見出しとカードを近づける */
  --members-md-inner-gap: clamp(12px, 1.5vw, 20px);

  /* Members SP（Figma 86:1277 / 63:853） */
  --members-sp-card-max-width: 300px;

  /* Shop SP（Figma 64:854） */
  --shop-sp-title-size: 20px;

  /* Footer PC（Figma 11:570） */
  --footer-pc-padding-block: 56px;
  --footer-pc-padding-inline: 246px;
  --footer-pc-main-gap: 56px;
  --footer-pc-menu-gap: 24px;
  --footer-pc-nav-gap: 24px;

  /* Footer SP（Figma 86:1323 / 65:906） */
  --footer-sp-padding-block: 40px;
  --footer-sp-padding-inline: 16px;
  --footer-sp-main-gap: 32px;
  --footer-sp-menu-gap: 16px;
  --footer-sp-nav-gap: 16px;
  --footer-sp-menu-padding-block: 32px;
  --footer-sp-divider-width: 16px;
  --footer-sp-divider-height: 2px;
  --footer-gap-copyright: 16px;
  --footer-sp-cherry-width: 60px;
  --footer-sp-cherry-right: 24px;
  --footer-sp-cherry-top: -16px;

  /* Radius */
  --radius-card: 20px;
  --radius-image: 16px;
  --radius-pill: 999px;
}