:root {

  --pc-design-w: 1920;
  --sp-design-w: 450;

  --ux: clamp(calc(320px / var(--sp-design-w)), calc(100vw / var(--sp-design-w)), calc(1024px / var(--sp-design-w)));
  --uy: var(--ux);
  --u: var(--ux);

  --color-primary-dark: #e88aa1;
  --color-primary-light: #ffeaee;
  --color-primary-bg: #fff7f8;

  --color-cta: #ff2d55;
  --color-cta-alpha60: rgba(255, 45, 85, 0.6);

  --color-voice-bubble: #ff7992;

  --color-badge: #ffdb71;

  --color-num-badge: #555555;

  --color-text-black: #000000;

  --color-dot-inactive: #555555;

  --color-gray-4: #bdbdbd;

  --color-text: #333333;
  --color-text-soft: #555555;
  --color-text-inverse: #ffffff;

  --color-bg: #ffffff;

  --color-link: var(--color-primary-dark);

  --font-family-base:
    "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-family-heading: var(--font-family-base);

  --fs-xs: calc(12 * var(--u));
  --fs-base: calc(16 * var(--u));
  --fs-md: calc(18 * var(--u));
  --fs-2xl: calc(24 * var(--u));
  --fs-display: calc(48 * var(--u));

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.25;
  --lh-base: 1.6;

  --ls-wide: 0.05em;

  --max-width-pc: 1920px;

  --radius-pill: 9999px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  --z-header: 500;
}

@media (min-width: 1025px) {
  :root {
    --ux: min(calc(100vw / var(--pc-design-w)), 1px);
    --uy: var(--ux);
    --u: var(--ux);

    --fs-2xl: calc(32 * var(--u));
    --fs-display: calc(80 * var(--u));
  }
}