@charset "UTF-8";

:root {
  /*----- Fonts -----*/
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Teko", "Oswald", "Arial Narrow", sans-serif;
  --font-hand: "TekitouPoem", "Klee One", "Yomogi", cursive;

  /* ----- Fluid size scale ----- */

  /* 160px @1440 → 80px @375 */
  --size-160: clamp(5rem, 3.2394rem + 7.5117vw, 10rem);

  /* 112px @1440 → 56px @375 */
  --size-112: clamp(3.5rem, 2.2676rem + 5.2582vw, 7rem);

  /* 64px @1440 → 42px @375 */
  --size-64: clamp(2.625rem, 2.1408rem + 2.0657vw, 4rem);

  /* 48px @1440 → 31px @375 */
  --size-48: clamp(1.9375rem, 1.5634rem + 1.5962vw, 3rem);

  /* 44px @1440 → 29px @375 */
  --size-44: clamp(1.8125rem, 1.4824rem + 1.4085vw, 2.75rem);

  /* 40px @1440 → 26px @375 */
  --size-40: clamp(1.625rem, 1.3169rem + 1.3146vw, 2.5rem);

  /* 24px @1440 → 19px @375 */
  --size-24: clamp(1.1875rem, 1.0775rem + 0.4695vw, 1.5rem);

  /* 20px @1440 → 16px @375 */
  --size-20: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);

  /* 18px @1440 → 16px @375 */
  --size-18: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);

  /* 16px @1440 → 14px @375 */
  --size-16: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);

  /* 14px @1440 → 13px @375 */
  --size-14: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);

  /* 13px @1440 → 12px @375 */
  --size-13: clamp(0.75rem, 0.728rem + 0.0939vw, 0.8125rem);

  /* 12px @1440 → 11px @375 */
  --size-12: clamp(0.6875rem, 0.6655rem + 0.0939vw, 0.75rem);

  /* 11px @1440 → 10px @375 */
  --size-11: clamp(0.625rem, 0.603rem + 0.0939vw, 0.6875rem);

  /* ----- Shared weight tokens ----- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ----- Shared letter-spacing tokens (Figma % → em) ----- */
  --tracking-xtight: 0.02em; /* 2% */
  --tracking-normal: 0.05em; /* 5% */
  --tracking-wide: 0.075em; /* 7.5% */
  --tracking-wider: 0.1em; /* 10% */

  /* ----- Layout ----- */
  --container-w: 1180px;
  --gutter: 6vw;
  --gutter-pc: 80px;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- JP / Display ----- */

/* JP/Display/XL */
.text-jp-display-xl {
  font-size: var(--size-64);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-normal);
}
/* JP/Display/L */
.text-jp-display-l {
  font-size: var(--size-48);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}

/* ----- JP / Heading ----- */

/* JP/Heading/H1 */
.text-jp-heading-h1 {
  font-size: var(--size-48);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}
/* JP/Heading/H2 */
.text-jp-heading-h2 {
  font-size: var(--size-44);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
}
/* JP/Heading/H2.5 */
.text-jp-heading-h2-5 {
  font-size: var(--size-40);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
}
/* JP/Heading/H3 */
.text-jp-heading-h3 {
  font-size: var(--size-24);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}
/* JP/Heading/H4 */
.text-jp-heading-h4 {
  font-size: var(--size-20);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}

/* ----- JP / Text ----- */

/* JP/Text/Large/Large */
.text-jp-text-large {
  font-size: var(--size-18);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}
/* JP/Text/Default/Default */
.text-jp-text-default {
  font-size: var(--size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}
/* JP/Text/Small/Small */
.text-jp-text-small {
  font-size: var(--size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}
/* JP/Text/XS/XS */
.text-jp-text-xs {
  font-size: var(--size-12);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}
/* JP/Text/XXS/XXS */
.text-jp-text-xxs {
  font-size: var(--size-11);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}

/* ----- EN / Display ----- */

/* EN/Display/XL */
.text-en-display-xl {
  font-family: var(--font-en);
  font-size: var(--size-160);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}
/* EN/Display/L */
.text-en-display-large {
  font-family: var(--font-en);
  font-size: var(--size-112);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
}

/* EN/Display/M */
.text-en-display-m {
  font-family: var(--font-en);
  font-size: var(--size-64);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-xtight);
}

/* ----- EN / Heading ----- */

/* EN/Heading/H1 */
.text-en-heading-h1 {
  font-family: var(--font-en);
  font-size: var(--size-48);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}
/* EN/Heading/H2 */
.text-en-heading-h2 {
  font-family: var(--font-en);
  font-size: var(--size-40);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
}
/* EN/Heading/H3 */
.text-en-heading-h3 {
  font-family: var(--font-en);
  font-size: var(--size-24);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}
/* EN/Heading/H4 */
.text-en-heading-h4 {
  font-family: var(--font-en);
  font-size: var(--size-20);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}

/* EN / Text */

/* EN/Text/Large/Large */
.text-en-text-large {
  font-family: var(--font-en);
  font-size: var(--size-18);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
}
/* EN/Text/Default/Default */
.text-en-text-default {
  font-family: var(--font-en);
  font-size: var(--size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
}
/* EN/Text/Small/Small */
.text-en-text-small {
  font-family: var(--font-en);
  font-size: var(--size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
}
/* EN/Text/XS/XS */
.text-en-text-xs {
  font-family: var(--font-en);
  font-size: var(--size-13);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
}
/* EN/Text/XXS/XXS */
.text-en-text-xxs {
  font-family: var(--font-en);
  font-size: var(--size-12);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
}

/* Weight modifiers — override the base class's default weight */
.weight-regular {
  font-weight: var(--font-weight-regular);
}
.weight-medium {
  font-weight: var(--font-weight-medium);
}
.weight-semibold {
  font-weight: var(--font-weight-semibold);
}
.weight-bold {
  font-weight: var(--font-weight-bold);
}

/* Letter-spacing modifiers — override the base class's default tracking */
/* 2% */
.tracking-xtight {
  letter-spacing: var(--tracking-xtight);
}
/* 5% */
.tracking-normal {
  letter-spacing: var(--tracking-normal);
}
/* 7.5% */
.tracking-wide {
  letter-spacing: var(--tracking-wide);
}
/* 10% */
.tracking-wider {
  letter-spacing: var(--tracking-wider);
}