@charset "UTF-8";

/* ============================================
  ■ Design Tokens
============================================ */

:root {
  /* Surface */
  --surface: #ffffff;
  --surface-variant: #eef6fb;
  --surface-variant-dark: #e0eff9;

  /* Text */
  --on-surface: #000000;
  --on-surface-variant: #596577;

  /* Brand */
  --primary: #00407c;
  --secondary: #0080cc;

  /* Accent */
  --highlight: #ff5c40;
  --tertiary: #2ab961;
  --quaternary: #5acafa;

  /* Container */
  --primary-container: #ceeffe;
  --secondary-container: #fff8bf;
  --tertiary-container: #ffe5c2;
  --quaternary-container: #dcf5e0;

  /* Border */
  --border: #c2e2ef;

  /* Other */
  --on-primary-highlight: #fff262;
  --underline:#5ACAFA;

  /* Layout */
  --container-width: 1100px;
  --content-width: 1080px;
  --container-padding: var(--scale-24);

  /* Radius */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;

  /* Shadow */
  --shadow-m:
    0 4px 16px rgb(0 0 0 / 0.08);

  /* Animation */
  --transition:
    0.3s ease;
}


/* ============================================
  ■ Fluid Scale
  SP値 → PC値へ自然に拡大
============================================ */

:root {
  --scale-2: min(calc(100vw / 375 * 2), 2px);

  --scale-4: min(calc(100vw / 375 * 3), 4px);

  --scale-8: min(calc(100vw / 375 * 6), 8px);

  --scale-12: min(calc(100vw / 375 * 10), 12px);

  --scale-14: min(calc(100vw / 375 * 13), 14px);

  --scale-16: min(calc(100vw / 375 * 13.5), 16px);

  --scale-18: min(calc(100vw / 375 * 14), 18px);

  --scale-20: min(calc(100vw / 375 * 16), 20px);

  --scale-24: min(calc(100vw / 375 * 18), 24px);

  --scale-28: min(calc(100vw / 375 * 20), 28px);

  --scale-32: min(calc(100vw / 375 * 22), 32px);

  --scale-36: min(calc(100vw / 375 * 26), 36px);

  --scale-40: min(calc(100vw / 375 * 28), 40px);

  --scale-48: min(calc(100vw / 375 * 30), 48px);

  --scale-56: min(calc(100vw / 375 * 32), 56px);

  --scale-64: min(calc(100vw / 375 * 48), 64px);

  --scale-80: min(calc(100vw / 375 * 56), 80px);

  --scale-120: min(calc(100vw / 375 * 72), 120px);

  --scale-160: min(calc(100vw / 375 * 80), 160px);

  --scale-200: min(calc(100vw / 375 * 96), 200px);

  --scale-240: min(calc(100vw / 375 * 180), 240px);

  --scale-320: min(calc(100vw / 375 * 200), 320px);

  --scale-400: min(calc(100vw / 375 * 220), 400px);

  /* Negative */

  --scale-mn4: max(calc(100vw / 375 * -3), -4px);

  --scale-mn20: max(calc(100vw / 375 * -16), -20px);
}