/* Color Variables */
:root {
  --genki-logo: #418993;
  --genki-primary: #D88E95;
  --genki-brown: #614A3F;
  --genki-blue: #418993;
  --genki-gold: #CEA070;
  --orange-primary: #DE765B;
  --green-base: #26AD6B;
  --orange-base: #EEA837;
  --text-color: #5D5759;
  --background-color: #F9F7F5;

  --brown-border: rgba(97, 74, 63, 0.3);


  --color-nursery: #708982;
  --color-development: #6490A5;
  --color-child: var(--genki-gold);
  --color-pickup: var(--genki-primary);
  --color-kids: var(--genki-primary);
  --color-baby: #EEA837;
  --color-white: #FFFFFF;

  /* 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-2: 96px;       /* 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;

  --border-radius-default: 10px;
  --border-radius-double: 20px;
}


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

/* 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);
  }
}



@media (max-width: 767px) {
  :root {
  }
}