:root {
    --color-primary: #003399;
    --color-primary-dark: #002670;
    /*
     * 原本の淡い青。#003399 の不透明度70%を白地に置いた色（実測 #4c70b7）。
     * 帯・Messageの地・経営方針の地に使う。写真の上に重ねる場所は alpha 版を使うと
     * 写真が透けて原本と同じ見え方になる。
     */
    --color-primary-soft: #4c70b7;
    --color-primary-soft-alpha: rgba(0, 51, 153, 0.7);
    --color-accent: #00b5a5;
    /*
     * 白地に置く小さい文字用のアクセント色（NUMBERSの単位・前置き）。--color-accent と同じ色味で、
     * 白地とのコントラスト比4.5:1（小さい文字の基準）を満たす最も薄い濃さ。帯・枠線・大きい見出しは --color-accent
     */
    --color-accent-text: #008579;
    --color-accent-light: #89ceec;
    --color-chart-primary: #0d3d9e;
    --color-chart-secondary: #89ceec;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f7f9;
    --color-text: #1f2933;
    --color-text-light: #5a6672;
    --color-border: #e2e8ee;
    --color-white: #ffffff;

    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --font-heading: var(--font-base);
    /*
     * 見出し用。英字はGeorgiaのセリフ体、日本語は本文と同じゴシック体で出したいので、
     * 和字を持たない欧文フォントを先に並べてから和文ゴシックへ落としている。
     * 和文セリフ（Noto Serif JP等）を混ぜると「健康経営優良法人」のような日本語見出し
     * だけが明朝になり、ホーム画面と書体が違って見えてしまう。
     */
    /* 顧客希望のTimes New Romanを先頭に。未搭載環境（一部Linux等）はGeorgiaへ */
    --font-heading-en: "Times New Roman", Georgia, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

    /*
     * 特に大きいセクション見出し（NUMBERS・BUSINESS・COMPANY 等）。原本での英字見出し約61px＝
     * ページ幅の5.7%、日本語サブ見出しは2.24%。上限は1440px幅相当。
     */
    --font-size-title-xl: clamp(2rem, 5.7vw, 82px);
    --font-size-subtitle-xl: clamp(0.88rem, 2.24vw, 32px);

    --container-width: 1140px;
    --container-padding: 1.25rem;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    --radius-sm: 4px;
    --radius-md: 8px;

    --transition-base: 0.3s ease;
    /*
     * ヘッダーの高さ（PC）。Figma（幅1440px）の122pxを、ヘッダーの枠（1280px）に合わせて同じ比率で縮めた値。
     * 画面幅1280px以上で約108px、それより狭い画面では幅に比例して低くなる（900px幅で約76px）。
     * 縮め方は header.css の --hs と同じ（こちらはスクロールバーを含む vw なので、Windows 等で1〜2px程度の差が出る）。
     */
    --header-height: calc(122 * min(1280px, 100vw) / 1440);
    /*
     * 本文の枠の右端から、ヘッダーのお問い合わせボタンの右端までの距離（PC。header.css の寸法と同じ計算）。
     * ヘッダーのボタンの右端＝画面の右端から「1280px枠の外側の余白＋Figma の右余白36px×縮尺」、
     * 本文の右端＝画面の右端から「コンテナの外側の余白＋コンテナの左右余白」。1440px幅で64px。
     * 本文側のボタンをヘッダーのボタンの右端にそろえるときに、右への張り出し量として使う。
     * ヘッダーの枠（1280px）・縮尺（/1440）・右余白（36）を変えたら、--header-height・header.css の --hs と
     * あわせてここも直す。home-sections.css の --recruit-height も1440px幅でのこの値（64px）を含む。
     */
    --header-cta-overhang: calc(
        max(0px, (100vw - var(--container-width)) / 2) + var(--container-padding)
        - max(0px, (100vw - 1280px) / 2) - 36 * min(1280px, 100vw) / 1440
    );
}

/*
 * スマホ・タブレット（ハンバーガーメニューになる幅）では、PCの比率のままだと画面の縦を
 * 大きく占めるので低くする。ロゴとハンバーガーが収まる高さ。
 * ヒーローの位置・メニューの位置・アンカーの止まる位置はこの変数に連動する。
 */
@media (max-width: 899px) {
    :root {
        --header-height: 72px;
    }
}