:root {
    /* フォントファミリー */
    --font-family: "Roboto", Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    --eng-font: "Rubik", sans-serif;

    /* 基本フォントサイズスケール（レスポンシブ対応） */
    --font-100: clamp(0.875rem, 0.85rem + 0.25vw, 0.95rem); /* 14px: 小さめ本文・キャプション */
    --font-200: clamp(1rem, 0.95rem + 0.4vw, 1.1rem); /* 16px: 通常本文 */
    --font-300: clamp(1.09rem, 1.035rem + 0.243vw, 1.23rem);
    --font-350: clamp(1.295rem, 1.207rem + 0.391vw, 1.52rem);
    --font-400: clamp(1.38rem, 1.255rem + 0.557vw, 1.7rem);
    --font-450: clamp(1.685rem, 1.542rem + 0.635vw, 2.05rem);
    --font-500: clamp(1.865rem, 1.695rem + 0.757vw, 2.3rem);
    --font-600: clamp(2.225rem, 1.977rem + 1.104vw, 2.86rem);

    /* 小さめ用（PCで固定寄り、モバイルで底上げ） */
    --font-060: clamp(0.625rem, 0.575rem + 0.2vw, 0.6875rem);
    --font-070: clamp(0.6875rem, 0.625rem + 0.2vw, 0.75rem);
    --font-080: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
    --font-090: clamp(0.8125rem, 0.75rem + 0.22vw, 0.875rem);
    --font-095: clamp(0.875rem, 0.8rem + 0.25vw, 0.95rem);

    /* 基本フォントウェイトスケール */
    --fw-300: 300; /* light */
    --fw-400: 400; /* normal */
    --fw-500: 500; /* medium */
    --fw-600: 600; /* semi-bold / demi */
    --fw-700: 700; /* bold */
    --fw-800: 800;
    --fw-900: 900;

    /* 意味的エイリアス（コンポーネント側はこれを使う） */
    --font-xxs: var(--font-080);
    --font-xs: var(--font-090);
    --font-sm: var(--font-100);
    --font-base: var(--font-200);
    --font-lg: var(--font-300);
    --font-xl: var(--font-350);
    --font-xxl: var(--font-400);
    --font-ruby: var(--font-070);
    --font-title--m: var(--font-450);
    --font-title: var(--font-500);
    --font-title--lg: var(--font-600);
    --font-menu: var(--font-095);
    --font-footer: var(--font-090);
    --font-news: var(--font-095);
    --font-brand-title: var(--font-300);
    --font-brand-subtitle: var(--font-060);

    --fw-light: var(--fw-300);
    --fw-normal: var(--fw-400);
    --fw-medium: var(--fw-500);
    --fw-semibold: var(--fw-600);
    --fw-bold: var(--fw-700);
    --fw-exbold: var(--fw-800);
    --fw-black: var(--fw-900);

    --lh-200: 2; /* line-height */
    --lh-180: 1.8; /* line-height */
    --lh-170: 1.7; /* line-height */
    --lh-160: 1.6; /* line-height */
    --lh-150: 1.5; /* line-height */
    --lh-140: 1.4; /* line-height (annotations, captions) */
    --lh-120: 1.2; /* line-height */

    /* Site/container widths */
    --contents-max-width: 1200px;
    --contents-medium-width: 88%;
    --site-max-width: 1440px;
    --contents-sp-width: var(--contents-medium-width);
    --container: var(--contents-max-width);
    --container-padding: 1rem;
    --padding-inline: 0;
    --auto-inline-size: min(var(--contents-sp-width), var(--contents-max-width, 1200px));
    --full-inline-size: min(100%, var(--contents-max-width, 1200px));
    --wrapper-inline-size: 90%;

    /* Spacing scale (4 / 8 / 16 / 24 / 32 px equivalents in rem)
      Use --space-1 .. --space-5 for gaps/margins/paddings.
   */
    --space-1: clamp(0.22rem, 0.2rem + 0.25vw, 0.25rem); /* 3.5px → 4px */
    --space-2: clamp(0.44rem, 0.4rem + 0.5vw, 0.5rem); /* 7px → 8px */
    --space-3: clamp(0.88rem, 0.8rem + 1vw, 1rem); /* 14px → 16px */
    --space-4: clamp(1.31rem, 1.2rem + 1.5vw, 1.5rem); /* 21px → 24px */
    --space-5: clamp(1.75rem, 1.6rem + 2vw, 2rem); /* 28px → 32px */
    --space-6: clamp(2.19rem, 2rem + 2.5vw, 2.5rem); /* 35px → 40px */
    --space-7: clamp(2.63rem, 2.4rem + 3vw, 3rem); /* 42px → 48px */
    --space-8: clamp(3.5rem, 3.2rem + 4vw, 4rem); /* 56px → 64px */

    /* 意味的エイリアス（用途別） */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-5);
    --space-xxl: var(--space-6);
    --space-xxxl: var(--space-7);
    --space-section: var(--space-8);

    /* Gapトークン */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-3);
    --gap-lg: var(--space-4);
    --gap-xl: var(--space-5);
    --gap-xxl: var(--space-6);
    --gap-xxxl: var(--space-7);
    --gap-section: var(--space-8);

    /* Color tokens */
    --ink: #2a2a2a; /* primary text */
    --muted-ink: #666666; /* secondary / muted text */
    --pure-white: #ffffff;
    --off-white: #f6f6f6; /* FAQ section background */
    --pale-blue: #ebf1f9;
    --pale-green: #f2f8f1;
    --pale-yellow: #fbfae4;
    --pale-orange: #f8f0dd;
    --cool-white: #f7fafb;
    --light-blue: #e0e9f5;
    --light-gray: #dddddd; /* borders and dividers */
    --gray: #888888;
    --accent-navy: #18448b;
    --accent-blue: #1f75c6;
    --attention-red: #e53935;
    --soft-blue: #4975bb;
    --light-yellow: #fcf0c0;
    --gradation-yellow-blue: 270deg, #fff5b2 0%, #f0f7e0 50%, #d9f3fc 100%;

    /* 意味的エイリアス（コンポーネント側はこれを使う） */
    --text-primary: var(--ink);
    --text-secondary: var(--muted-ink);
    --text-gray: var(--gray);
    --text-navy: var(--accent-navy);
    --text-blue: var(--accent-blue);
    --text-soft-blue: var(--soft-blue);
    --text-link: var(--accent-blue);
    --text-white: var(--pure-white);
    --text-error-red: var(--attention-red);
    --bg-white: var(--pure-white);
    --bg-pale-blue: var(--pale-blue);
    --bg-pale-green: var(--pale-green);
    --bg-pale-yellow: var(--pale-yellow);
    --bg-pale-orange: var(--pale-orange);
    --bg-cool-white: var(--cool-white);
    --bg-off-white: var(--off-white);
    --bg-light-blue: var(--light-blue);
    --bg-light-gray: var(--light-gray);
    --bg-gray: var(--gray); /* borders and dividers */
    --bg-navy: var(--accent-navy);
    --bg-blue: var(--accent-blue);
    --bg-soft-blue: var(--soft-blue);
    --border-black: var(--ink);
    --border-white: var(--pure-white);
    --border-navy: var(--accent-navy);
    --border-pale-blue: var(--pale-blue);
    --border-soft-blue: var(--soft-blue);
    --border-gray: var(--light-gray); /* borders and dividers */
    --border-light-blue: var(--light-blue);
    --color-highlight: var(--light-yellow); /* マーカー背景 */

    /* Radii */
    --radius-sm: 0.25rem; /* small radius */
    --radius-md: 0.5rem; /* medium radius */
    --radius-lg: 1rem; /* large radius */
    --radius-xl: 2rem; /* extra large radius */
    --radius-xxl: 3rem; /* extra extra large radius */
    --radius-round: 9999px; /* fully rounded */

    --blank-base: 1rem;
    --blank-xs: 0.8rem;
    --arrow-base: 1.2rem;
    --arrow-small: 1.2rem;
    --arrow-xs: 0.8rem;

    /* Shadows (light tokens; use with comma separated values) */
    --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.04);
    --shadow-md: 0 6px 18px rgba(31, 41, 55, 0.08);
    --shadow-bnr: 0 2px 6px rgba(30, 30, 30, 0.08);

    /* Durations and easing */
    --dur-fast: 150ms;
    --dur-normal: 320ms;
    --ease-standard: cubic-bezier(0.2, 0.9, 0.3, 1);

    /* Layout */
    --container-max: 72rem; /* max width for main container (~1152px) */
    /* Breakpoints (used across the project for media queries) */
    --bp-sm: 767px; /* small / mobile upper bound */
    --bp-md: 900px; /* medium */
    --bp-lg: 1200px; /* large / desktop */

    /* Button paddings */
    --btn-padding-base: 0.4rem 0.4rem 0.4rem 2.5rem;
    --btn-padding-small: 0.3rem 0.3rem 0.3rem 2rem;
    --btn-padding-xs: 0.2rem 0.2rem 0.2rem 1.3rem;
    --btn-gap-base: 1.5rem;
    --btn-gap-small: 1.25rem;
    --btn-gap-xs: 0.8rem;
    --btn-line-base: 1.8;

    /* Work Schedule Circle Size */
    --works-schedule__time--circle-size: 3rem;
}

@media (max-width: 380px) {
    /* 超小型デバイス向け微調整 */
    :root {
        /*大きめのフォントサイズを小さく（clampでレスポンシブ対応） */
        --font-300: clamp(1.05rem, 0.999rem + 0.226vw, 1.18rem);
        --font-350: clamp(1.24rem, 1.154rem + 0.383vw, 1.46rem);
        --font-400: clamp(1.32rem, 1.203rem + 0.522vw, 1.62rem);
        --font-450: clamp(1.62rem, 1.491rem + 0.574vw, 1.95rem);
        --font-500: clamp(1.78rem, 1.616rem + 0.73vw, 2.2rem);
        --font-600: clamp(2.15rem, 1.915rem + 1.043vw, 2.75rem);
    }
}

@media (min-width: 960px) {
    :root {
        /* Button Layout */
        --arrow-base: 1.4rem;
        --arrow-small: 1.2rem;
        --arrow-xs: 0.8rem;
        --btn-padding-base: 0.4rem 0.4rem 0.4rem 2.8rem;
        --btn-padding-small: 0.3rem 0.3rem 0.3rem 2rem;
        --btn-padding-xs: 0.3rem 0.3rem 0.3rem 1.4rem;
        --btn-gap-base: 1.8rem;
        --btn-gap-small: 1rem;
        --btn-gap-xs: 1rem;

        /* Work Schedule Circle Size */
        --works-schedule__time--circle-size: 4rem;
    }
}
@media (min-width: 960px) and (max-width: 1024px) {
    /* タブレット端末向け微調整 */
    :root {
        /*大きめのフォントサイズを小さく（clampでレスポンシブ対応） */
        --font-300: clamp(1.125rem, 1.064rem + 0.27vw, 1.28rem);
        --font-350: clamp(1.35rem, 1.26rem + 0.4vw, 1.58rem);
        --font-400: clamp(1.44rem, 1.307rem + 0.591vw, 1.78rem);
        --font-450: clamp(1.75rem, 1.593rem + 0.696vw, 2.15rem);
        --font-500: clamp(1.95rem, 1.774rem + 0.783vw, 2.4rem);
        --font-600: clamp(2.3rem, 2.038rem + 1.165vw, 2.97rem);

        /* スペーシングを微調整 */
        --space-1: 0.22rem; /* 4px */
        --space-2: 0.44rem; /* 8px */
        --space-3: 0.88rem; /* 16px */
        --space-4: 1.31rem; /* 24px */
        --space-5: 1.75rem; /* 32px */
    }
}

@media (min-width: 1025px) {
    :root {
        /* PC時は固定値に確実に戻す */
        --space-1: 0.25rem; /* 4px */
        --space-2: 0.5rem; /* 8px */
        --space-3: 1rem; /* 16px */
        --space-4: 1.5rem; /* 24px */
        --space-5: 2rem; /* 32px */
    }
}