/* Color Variables */
:root {
  --genki-logo: #418993;
  --orange-primary: #DE765B;
  --green-base: #26AD6B;
  --orange-base: #EEA837;
  --orange-base-transparent: #EEA8371A;
  --text-color: #5D5759;
  --background-color: #FFF9F0;

  /* Typography Scale - Based on 16px * 8 / n formula */
  --font-size-h1: 42.667px;    /* 16px * 8 / 3 */
  --font-size-h2: 32px;        /* 16px * 8 / 4 */
  --font-size-h3: 18.286px;    /* 16px * 8 / 7 */
  --font-size-body: 16px;      /* 16px * 8 / 8 - Base size */
  --font-size-small: 12.8px;   /* 16px * 8 / 10 */
  
  /* Additional scale values */
  --font-size-xl: 128px;       /* 16px * 8 / 1 */
  --font-size-lg: 64px;        /* 16px * 8 / 2 */
  --font-size-md: 25.6px;      /* 16px * 8 / 5 */
  --font-size-sm: 21.333px;    /* 16px * 8 / 6 */
  --font-size-xs: 14.222px;    /* 16px * 8 / 9 */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --container-width: 1168px;
  --container-padding: 24px;
}

@media(max-width: 767px) {
  :root {
    /* Typography Scale - Based on 16px * 8 / n formula */
    --font-size-h1: 32px;    /* 16px * 8 / 4 */
    --font-size-h2: 25.6px;        /* 16px * 8 / 5 */
    --font-size-h3: 16px;    /* 16px * 8 / 8 */
    --font-size-body: 14.222px;      /* 16px * 8 / 9 - Base size */
    --font-size-small: 11.636px;   /* 16px * 8 / 11 */

    /* Additional scale values */
    --font-size-xl: 64px;       /* 16px * 8 / 2 */
    --font-size-lg: 42.667px;        /* 16px * 8 / 3 */
    --font-size-md: 21.333px;      /* 16px * 8 / 6 */
    --font-size-sm: 18.286px;    /* 16px * 8 / 7 */
    --font-size-xs: 12.8px;    /* 16px * 8 / 10 */
  }
}

/* リキッドレイアウト */
/* PC帯：1200 → 768 で連続縮小 */
@media (min-width: 768px) and (max-width: 1400px) {
  :root {
    --w-pc: clamp(768px, 100vw, 1400px);
    --scale: calc(var(--w-pc) / 1400px);
  }
}

/* SP帯：基本は等倍（通常のSPレイアウト用） */
@media (max-width: 767px) {
  :root {
    --scale: 1;
  }
}

/* 極小端末：375 → 320 でさらに縮小 */
@media (max-width: 375px) {
  :root {
    --w-sp: clamp(320px, 100vw, 375px);
    --scale: calc(var(--w-sp) / 375px);
  }
}