.c-numbers {
    padding: var(--space-lg) 0;
    background-color: var(--color-white);
    /* 全カード共通のアイコンの高さ。本文の下余白もこの値から算出する */
    --numbers-icon-height: 100px;
    /* アイコンの濃さ。原本どおり透かさずそのまま出す */
    --numbers-icon-opacity: 1;
}

/* 採用ページで採用メッセージの直後に来る NUMBERS は、上の余白を詰める */
.c-recruitment:not(.c-recruitment--table) + .c-numbers {
    padding-top: var(--space-md);
}

/* 採用ページでは NUMBERS の最下部と募集内容の隙間を詰める */
.c-numbers:has(+ .c-recruitment--table) {
    padding-bottom: var(--space-md);
}

.c-numbers__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* カード間の余白 */
    gap: var(--space-md);
}

.c-numbers-card {
    /* 枠線の太さ。業種／年間施工割合カードの列間（--numbers-combo-gap）もこの値から算出する */
    --numbers-card-border: 1px;
    --numbers-combo-gap: calc(var(--space-md) + var(--numbers-card-border) * 2);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    border: var(--numbers-card-border) solid var(--color-accent);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 1px 4px rgba(22, 50, 79, 0.06);
    /*
     * 同じ行のカードはグリッドで一番高いカードに合わせて伸びる。本文ブロックを
     * flex:1 で伸ばしておかないと、本文の下に何も無い余白ができてしまう。
     */
    display: flex;
    flex-direction: column;
}

.c-numbers-card--span2 {
    grid-column: span 2;
}

.c-numbers-card__label {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.6em var(--space-sm);
    margin: 0;
}

/*
 * 業種／年間施工割合のカードは、見出しを2枚に分け、下段の「福利厚生」「年間休日」と
 * X座標をそろえる。カードは2列分＋列間（--space-md）の幅で、左右に枠線がある。
 * 見出し・本文を「1fr 1fr」、間隔を「列間＋枠線2本分」にすると、各1frが「1列の幅−枠線2本分」になり、
 * 下段カードの枠線の内側（見出しの幅）と一致する。枠線の太さは --numbers-card-border から取るので、
 * 枠線を変えても位置はずれない（--numbers-combo-gap は .c-numbers-card で定義）。
 */
/* 見出し2枚の間（column-gap）も見出しと同じ色で埋め、1本の帯に見せる */
.c-numbers-card__label-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--numbers-combo-gap);
    background-color: var(--color-accent);
}

/*
 * カード見出しは、文字数にかかわらず「多様な年齢層」の6文字分の幅に均等割り付けする。
 * 全角6文字ぶんの幅を与えて両端揃えにすれば、2文字（設立）も4文字（福利厚生）も同じ幅に収まり、
 * 文字数ごとに字間を指定し分ける必要がない。
 * 親の letter-spacing は打ち消す（割り付けの余白と二重に効いて幅がずれるため）。
 */
.c-numbers-card__label-text {
    display: inline-block;
    width: 6em;
    letter-spacing: 0;
    text-align: justify;
    text-align-last: justify;
}

/* 業種カードのグラフ側の見出し。スマホで縦積みになったときだけ出す */
.c-numbers-card__label--sub {
    display: none;
}

.c-numbers-card__body {
    position: relative;
    padding: var(--space-md) var(--space-sm);
    overflow: hidden;
    min-height: 170px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 下端のアイコンと本文が重ならないよう、本文の下に場所を空ける */
    padding-bottom: calc(var(--numbers-icon-height) + var(--space-md));
}

/*
 * 「設立 2000」と「業種 9」の数値の高さを揃える。業種カード（span2）は本文が上端から始まるが、
 * 設立カードは同じ行で業種カードの高さに伸び、中央揃えだと数値が下がって見える。
 * この行の設立カード（span2カードの直前）だけ上揃えにする。
 */
.c-numbers-card:has(+ .c-numbers-card--span2) .c-numbers-card__body {
    justify-content: flex-start;
}

/*
 * 円グラフ列は見出し行の右列と同じ幅（＝年間休日の真上）に保ち、列間の空白は作らず、
 * その分をすべて業種の列に渡す。この計算は label-row・body--combo のどちらも左右の padding / border が
 * ゼロで、同じ幅（カードの内側いっぱい）であることが前提。片方にだけ付けると列の境目がずれる。
 */
.c-numbers-card__body--combo {
    display: grid;
    grid-template-columns: 1fr calc((100% - var(--numbers-combo-gap)) / 2);
    align-items: stretch;
    padding: 0;
    text-align: left;
}

.c-numbers-card__combo-col {
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
}

/*
 * 業種の一覧は列の下端（＝カード下端から --space-md 上）にそろえる（下の --business の指定）。
 * 円グラフの列は上から並べ、円グラフの位置を列の上端で決める（依頼主の指示）。下端寄せにすると、
 * 「公共・民間」の間隔を詰めた分だけ円グラフが下がるため。凡例の下端は業種の一覧の下端とはそろわない。
 */
.c-numbers-card__combo-col--chart {
    justify-content: flex-start;
}

/*
 * 業種側は、福利厚生カードなど他のカードの本文と位置を揃えるため左寄せにする。
 * ただし「9事業」の数値だけは、下の業種名一覧（凡例）の見た目の幅の中央にそろえる。
 * 凡例は左揃えのテキストのまま inline-block にして中央に寄せ、列自体は中央揃えにする。
 */
.c-numbers-card__combo-col--business {
    align-items: center;
    text-align: center;
}

/* margin-top:auto で列の下端へ寄せる。業種の列の方が背が高い幅でも「9事業」との間を少し空ける */
.c-numbers-card__combo-col--business .c-numbers-card__legend {
    display: inline-block;
    margin-top: auto;
    padding-top: var(--space-xs);
    text-align: left;
}

/*
 * 透過アイコンは全カード共通で下端に揃える。高さを固定しておくことで、
 * カードごとにアイコンの下端位置と本文との間隔が揃う。
 */
.c-numbers-card__icon-bg {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 80%;
    height: var(--numbers-icon-height);
    object-fit: contain;
    z-index: 0;
    opacity: var(--numbers-icon-opacity);
    pointer-events: none;
}

/* 元データの余白が広く小さく見える絵柄だけ、同じ下端のまま少し大きく出す */
.c-numbers-card__icon-bg--lg {
    height: calc(var(--numbers-icon-height) * 1.25);
}

/*
 * 福利厚生カード：アイコンを本文の背景として、カード内に収まる最大の大きさで
 * 半透明（50%）に敷く。本文の下にアイコン用の余白を取る必要がなくなる。
 */
.c-numbers-card--icon-cover .c-numbers-card__body {
    padding-bottom: var(--space-md);
    /*
     * 箇条書きの最長行「■ レクリエーション（年2回）」（約13.8字＝PC幅で約224px）が1行に収まる幅を確保する。
     * PC幅のカードは (862px − 間隔2rem×2) ÷ 3 ≒ 260px。余白1remでは本文幅が約216pxしかなく「（年2回）」が
     * 次の行に落ちていた。0.5remで約237px。箇条書きは中央寄せなので、余白を詰めても見た目の位置はほぼ変わらない。
     */
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}

.c-numbers-card__icon-bg--cover {
    inset: var(--space-xs);
    width: calc(100% - var(--space-xs) * 2);
    height: calc(100% - var(--space-xs) * 2);
    max-width: none;
    transform: none;
    object-fit: contain;
    /* カード全体に敷くアイコンは本文の背景なので薄く */
    opacity: 0.25;
}

.c-numbers-card__content {
    position: relative;
    z-index: 1;
    width: 100%;
    /* 箇条書きの文字の大きさをこの幅に合わせるため（cqi） */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*
 * カード内の文字は固定サイズではなく画面幅に追従させる（clamp の上限は従来の
 * 固定値と同じなので、デスクトップの見た目は変わらない）。固定のままだと
 * スマホの狭いカードで数値が枠からはみ出す。
 */
.c-numbers-card__value {
    font-size: clamp(1.25rem, 0.95rem + 1.9vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
}

.c-numbers-card__value--lg {
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.35rem);
}

.c-numbers-card__value--xl {
    font-size: clamp(1.7rem, 1.15rem + 2.8vw, 2.9rem);
}

/* 数値と単位はひとまとまり。「2000」と「年」の間で改行させない */
.c-numbers-card__value-inner {
    white-space: nowrap;
}

/* 数値の前に添える語（原本の「月給」「年」「月」） */
.c-numbers-card__prefix {
    font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
    color: var(--color-accent-text);
    margin-right: 0.3em;
}

.c-numbers-card__unit {
    font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
    color: var(--color-accent-text);
    margin-left: 0.25em;
}

.c-numbers-card__note {
    /* 補足（note）の文字の大きさは全カード共通（「幅広い年代が活躍中」を基準に決めた値）。 */
    font-size: clamp(0.864rem, 0.792rem + 0.36vw, 0.96rem);
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--space-xs);
    line-height: 1.7;
}

/* 数値の上に置く補足（原本の賃金の「未経験でも」） */
.c-numbers-card__note--before {
    margin-top: 0;
    margin-bottom: 0.2em;
}

/*
 * --bold は太字だけ。文字の大きさは通常の note と同じ（カード間で揃える）。
 * クラスはPHP側に残しており、今後見た目を変えるときのフックになる。
 */

.c-numbers-card__legend {
    --numbers-legend-size: clamp(0.7rem, 0.64rem + 0.3vw, 0.78rem);
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    font-size: var(--numbers-legend-size);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    text-align: left;
}

/*
 * 福利厚生の箇条書きは1項目を1行に保つ（折り返すと項目の区切りが分かりにくい）。
 * 最長行は約13.8字なので、本文幅の 1/14.7（6.8cqi。約6%の余裕）を上限に縮める。PC幅（本文約237px）では
 * 上限が約16.1pxで clamp の16.2pxとほぼ同じ。狭い画面（600〜800px前後）でだけ縮む。
 * cqi が使えないブラウザでは縮まないので、はみ出さないよう折り返しを止めるのも対応ブラウザだけにする。
 */
@supports (font-size: 1cqi) {
    .c-numbers-card__content .c-numbers-card__legend {
        font-size: min(var(--numbers-legend-size), 6.8cqi);
        white-space: nowrap;
    }
}

/*
 * 公共／民間の凡例。1440px幅で32px（依頼主の指示）。グラフの列（約171px）より幅が広いので、
 * 列からはみ出す分は円グラフの真下に中央そろえで左右へ広げる（カードの内側には収まる）。
 * 2行は行の高さを文字の大きさと同じにする。
 */
.c-numbers-card__legend--chart {
    display: flex;
    flex-direction: column;
    /* 「公共」と「民間」の間は、円グラフとの間より詰める（1440px幅で23px。依頼主の指示） */
    gap: calc(var(--chart-legend-size) * 23 / 32);
    width: max-content;
    margin: 0;
    font-size: var(--chart-legend-size);
    line-height: 1;
    text-align: left;
}

/*
 * 業種の一覧は行頭に「■」（原本）。1行に2項目並べるとき、それぞれに個別に
 * 付ける必要があるので li::before ではなく項目ごとの span に付ける。
 */
.c-numbers-card__legend--square .c-numbers-card__legend-item::before {
    content: "■ ";
}

/*
 * グラフを上、項目名を下に置く縦配置。列の中では上下中央に置き、公共／民間の凡例を
 * 左の業種名リストと上下中央にそろえる（chart-col は business-col と同じ高さに stretch されるため）。
 */
.c-numbers-card__chart-row {
    --chart-legend-size: clamp(1.1rem, 0.9rem + 0.92vw, 32px);
    /* 円グラフと凡例の間。1.325倍＝1440px幅で約42px（依頼主の指示で決めた位置） */
    --chart-legend-gap: calc(var(--chart-legend-size) * 1.325);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--chart-legend-gap);
}

/* 凡例のマーク。原本は大きめの四角 */
.c-numbers-card__dot {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.5em;
    vertical-align: -0.08em;
}

/* 支給素材のグラフ画像（円部分だけを正方形にクロップ済み）をそのまま表示する */
/* 円グラフの大きさと位置 */
.c-numbers-card__chart {
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: 16px;
}

@media (min-width: 600px) {
    .c-numbers__list {
        grid-template-columns: repeat(3, 1fr);
        /*
         * 3段ともカードの高さをそろえる（依頼主の指示：「賃金」の段の高さに合わせる）。
         * 1fr の行は一番高い段に合わせて全段が同じ高さになる。1440px幅では1段目（約420px）が最も高く、
         * 「賃金」の段（約418px）とは2pxの差。
         */
        grid-auto-rows: 1fr;
        /*
         * カード1枚を約76px（＝2.0cm）細くして、枠を縦長に見せる。
         * 列幅はコンテナ幅で決まるので、リスト全体に上限を設けて中央に置く。
         *   カード273px × 3 ＋ 余白1rem × 2 ≒ 862px
         * 高さは中身（業種の一覧・福利厚生の箇条書き）で決まり、縦に詰めてもほとんど効かないため、
         * 横だけを詰めて縦横比 0.94 → 0.73 にしている。上限なので、狭い画面ではコンテナ幅いっぱいに広がる。
         */
        max-width: 862px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * PC（3列）で、高さをそろえたことで縦に余裕ができる2段目のカード（多様な年齢層・福利厚生・年間休日。
 * site-data.php で center_pc を付けたもの）は、文章とイラストをひとまとまりにしてカードの上下中央に置く（依頼主の指示）。
 * 通常はイラストを本文の下端に絶対配置しているので、流れの中（文章の下）に戻す。
 * 福利厚生のように全面に敷くイラスト（--cover）は背景なので、文章だけが中央に来る。
 */
@media (min-width: 600px) {
    .c-numbers-card--center-pc .c-numbers-card__body {
        padding-bottom: var(--space-md);
    }

    .c-numbers-card--center-pc .c-numbers-card__icon-bg:not(.c-numbers-card__icon-bg--cover) {
        position: static;
        order: 1;
        transform: none;
        margin-top: var(--space-sm);
    }
}

@media (max-width: 599px) {
    /* カード幅が狭いぶんアイコンも小さくし、カードが間延びしないようにする */
    .c-numbers {
        --numbers-icon-height: 64px;
    }

    /*
     * 狭い画面ではカード内の左右余白を詰めて、数値が入る幅を確保する。
     * 上の余白もPCの半分にして、カード全体を低くする（依頼主の指示）。
     */
    .c-numbers-card__body {
        min-height: 140px;
        padding-top: var(--space-sm);
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    .c-numbers-card--span2 {
        grid-column: span 2;
    }

    /* スマホでは業種→年間施工割合の縦積み（PCの2列グリッドは使わない） */
    .c-numbers-card__body--combo {
        display: flex;
        flex-direction: column;
        /* 上の「余白を詰める」指定がこのカードにも掛かるので打ち消す（見出し帯を端まで出すため。上の余白は各列が持つ） */
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* 業種の列の上の余白も、他のカードと同じく半分にする */
    .c-numbers-card__combo-col--business {
        padding-top: var(--space-sm);
    }

    .c-numbers-card__combo-col--chart {
        border-top: 1px solid var(--color-border);
    }

    /*
     * 並び順どおりだと「設立」の次が横幅いっぱいの業種カードなので、設立の右が
     * 空いたまま次の行に回る。dense で後ろの1列カード（多様な年齢層）を詰めて埋める。
     */
    .c-numbers__list {
        grid-auto-flow: dense;
        /* 2枚並びのカードを広げるため、横の間隔だけ詰める（依頼主の指示。上下の間隔は --space-md のまま） */
        column-gap: 20px;
        /*
         * 2枚並びの段の高さを、いちばん高い「年間休日・賃金」の段（375〜599px幅で約289px、実測）にそろえる。
         * 中身の少ない「賞与・残業」の段だけ低く見えていたため（依頼主の指示）。最小値なので、
         * 中身の多い段（業種・福利厚生、320px幅の年間休日・賃金）はそのまま中身の高さになる。
         */
        grid-auto-rows: minmax(289px, auto);
    }

    .c-numbers-card--wide-sp {
        grid-column: span 2;
    }

    /* 見出しが「多様な年齢／層」と割れないよう、字間と左右余白を詰める */
    .c-numbers-card__label {
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    /*
     * 業種カードは本体が「業種」→「年間施工割合」の縦積みになるので、見出しも分ける。
     * 上の見出し帯は「業種」だけにし、グラフの上に「年間施工割合」の見出しを出す。
     */
    .c-numbers-card__label-row {
        display: block;
    }

    .c-numbers-card__label-row > .c-numbers-card__label:last-child {
        display: none;
    }

    .c-numbers-card__combo-col--chart {
        padding-top: 0;
    }

    .c-numbers-card__label--sub {
        display: block;
        margin: 0 calc(var(--space-sm) * -1) var(--space-sm);
        text-align: center;
    }

    /* 補足文はカードの幅に合わせて小さくし、「会社カレンダーによ／る」と1文字だけ落ちないようにする */
    .c-numbers-card__note {
        font-size: 0.72rem;
        text-wrap: balance;
        word-break: auto-phrase;
    }

    /*
     * スマホのカード（390px幅で幅148px・文字の入る幅約125px）に対して文字が大きく、
     * 「週休2日／制」のように割れていたので、枠に合わせて一回り小さくする（依頼主の指示）。
     * 数値は「週休2日制」（5文字）が1行に収まる大きさ。狭い端末では画面幅に合わせてさらに縮む。
     */
    .c-numbers-card__value {
        font-size: clamp(0.95rem, 5.9vw, 1.1rem);
    }

    .c-numbers-card__value--lg {
        font-size: clamp(1.05rem, 6.6vw, 1.25rem);
    }

    .c-numbers-card__value--xl {
        font-size: clamp(1.2rem, 7.8vw, 1.45rem);
    }

    /* 単位と前置きの語（「月給」「年」等）は同じ大きさ */
    .c-numbers-card__unit,
    .c-numbers-card__prefix {
        font-size: 0.68rem;
    }

    /*
     * 福利厚生（横幅いっぱいのカード）も2枚並びの段と同じ高さ（約289px）に収める（依頼主の指示）。
     * 箇条書き8行の行間を少し詰める。業種カードは「業種」と「年間施工割合」を縦に積むので、そのままの高さ。
     */
    .c-numbers-card--icon-cover .c-numbers-card__legend {
        line-height: 1.36;
    }

    /* 円グラフと「公共・民間」も、カードの幅に合わせて小さくする */
    .c-numbers-card__chart-row {
        --chart-legend-size: 0.88rem;
    }

    .c-numbers-card__chart {
        width: 96px;
        height: 96px;
    }
}