:root {
  /* ---------- Color: Brand ---------- */
  --color-primary: #5BB647;
  --color-text: #535353;
  --color-text-inverse: #FFFFFF;
  --color-bg: #FFFFFF;

  /* ---------- Color: Surface ---------- */
  --color-bg-dark: #636770;
  --color-bg-card-dark: #535353;
  --color-bg-bottomnav: #454545;

  /* ---------- Color: Hero gradient ---------- */
  --color-hero-gradient-start: rgba(183, 193, 203, 0);
  --color-hero-gradient-end: #55748D;

  /* ---------- Color: Tags ---------- */
  --color-cat-new: #5BB647;
  --color-cat-mid: #476EDA;
  --color-cat-teacher: #FF7C5D;
  --color-cat-general: #7a7b88;
  --color-cat-area-chubu: #E39188;

  --color-tag-new: #89C97A;
  --color-tag-mid: #89C0FF;
  --color-tag-teacher: #A1A2E9;
  --color-tag-event: #DB95CC;
  --color-tag-news: #F6B956;

  /* ---------- Font Family ---------- */
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-zen: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ff-en: "Google Sans Flex", Arial, Roboto, sans-serif;

  /* ---------- Font Weight ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Font Size ---------- */
  --fs-hero-jp: 56px;
  --fs-hero-msg: 36px;
  --fs-hero-msg-sub: 22px;
  --fs-section-en-lg: 88px;
  --fs-section-en-md: 50px;
  --fs-section-jp: 32px;
  --fs-h1-header: 20px;
  --fs-header-entry: 22px;
  --fs-card-title: 26px;
  --fs-body-lg: 32px;
  --fs-body: 24px;
  --fs-body-sm: 22px;
  --fs-small: 20px;
  --fs-tag: 18px;
  --fs-stat-num: 96px;
  --fs-stat-label: 32px;
  --fs-recruit-title: 40px;
  --fs-more: 18px;

  /* ---------- Spacing ---------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: 120px;

  /* ---------- Layout (SP) ---------- */
  --header-height: 60px;
  --bottomnav-height: 60px;
  --content-max-width: 750px;
  --content-padding-x: 17.5px;

  /* ---------- Layout (PC) ---------- */
  --pc-content-width: 1000px;
  --pc-content-gutter: 30px;
  --pc-header-height: 100px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 50px;
  --radius-xxl: 100px;
  --radius-pill: 9999px;
  --radius-tag-pill: 18px;

  /* ---------- z-index ---------- */
  --z-bottomnav: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}