/* ==========================================================================
   ふぁんぐ デザインの決まり（値は Production_デザイン仕様/11_design-spec.md と同じ）
   ========================================================================== */
:root {
  /* 色 */
  --fg-base: #FFF6F1;
  --fg-white: #FFFFFF;
  --fg-pink: #F48FB1;
  --fg-pink-deep: #C2306B;
  --fg-pink-deeper: #A0255A;
  --fg-pink-tint: #FDE4EC;
  --fg-berry: #CC2F3C;
  --fg-leaf: #5FA463;
  --fg-text: #4A2C29;
  --fg-muted: #7D5A55;
  --fg-line: #F2CCD8;
  --fg-ink: #3B2523;

  /* 文字 */
  --fg-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --fg-font-latin: "Fredoka", "Zen Maru Gothic", sans-serif;
  --fg-fs-h1: 28px;
  --fg-fs-h2: 24px;
  --fg-fs-h3: 19px;
  --fg-fs-body: 16px;
  --fg-fs-small: 14px;
  --fg-fs-en: 15px;
  --fg-fs-num: 44px;
  --fg-lh: 1.9;

  /* 余白 */
  --fg-s1: 4px;
  --fg-s2: 8px;
  --fg-s3: 16px;
  --fg-s4: 24px;
  --fg-s5: 40px;
  --fg-s6: 64px;
  --fg-s7: 96px;
  --fg-gutter: 16px;
  --fg-max: 1120px;

  /* 角丸・影 */
  --fg-r-card: 20px;
  --fg-r-photo: 16px;
  --fg-r-q: 8px;
  --fg-r-pill: 999px;
  --fg-shadow: 0 6px 20px rgba(194, 48, 107, 0.10);
  --fg-shadow-hover: 0 10px 28px rgba(194, 48, 107, 0.18);

  /* 飾り：水玉 */
  --fg-dots: radial-gradient(circle, rgba(244, 143, 177, 0.28) 3px, transparent 3.5px) 0 0 / 22px 22px;
}

@media (min-width: 1024px) {
  :root {
    --fg-fs-h1: 40px;
    --fg-fs-h2: 32px;
    --fg-fs-h3: 21px;
    --fg-fs-body: 17px;
    --fg-fs-num: 56px;
    --fg-gutter: 32px;
  }
}