@charset "UTF-8";

/* =============================================
 *  numbers.css
 *  数字でわかるパナソニック HVAC & CC（/about/numbers/）専用
 *
 *  ・アクセント色（ネイビー）は PHD基調色（K値）に無い値。デザイン指定のため
 *    このページ内の変数 --p-numbers-accent に閉じ込めている（共通トークンには足さない）。
 *  ・ブレイクポイントは 767 / 768px。PCは 768px以上、SPは 767px以下。
 * ============================================= */

.p-numbers-list,
.p-numbers-panel {
    --p-numbers-accent: #475C85;
}

/* ---------------------------------------------
*   p-numbers-list
*   カード／パネルを縦に並べる
--------------------------------------------- */
.p-numbers-list {
    display: flex;
    flex-direction: column;
    gap: calc(20 / var(--root-fz) * 1rem);
}

/* ---------------------------------------------
*   p-numbers-panel
*   白地の面（64px余白）
--------------------------------------------- */
.p-numbers-panel {
    padding: calc(48 / var(--root-fz) * 1rem) calc(64 / var(--root-fz) * 1rem);
    background-color: var(--color-bg-white);
}
@media screen and (max-width: 767px) {
    .p-numbers-panel {
        padding: 32px 20px;
    }
}

/* ---------------------------------------------
*   p-numbers-card
*   数字カード（本文 ＋ 360×240 の画像）
--------------------------------------------- */
.p-numbers-card {
    --p-numbers-accent: #475C85;
    display: flex;
    align-items: center;
    gap: calc(48 / var(--root-fz) * 1rem);
    padding: calc(48 / var(--root-fz) * 1rem) calc(64 / var(--root-fz) * 1rem);
    background-color: var(--color-bg-white);
}
@media screen and (max-width: 767px) {
    .p-numbers-card {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 32px 20px;
    }
}
.p-numbers-card__body {
    flex: 1 1 0;
    min-width: 0;
}
.p-numbers-card__pic {
    flex: none;
    width: calc(360 / var(--root-fz) * 1rem);
    height: calc(240 / var(--root-fz) * 1rem);
}
@media screen and (max-width: 767px) {
    .p-numbers-card__pic {
        order: -1;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}
.p-numbers-card__pic img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
/* タブレット（767〜1023px）: 本文欄が狭くなり数字が折り返すため、余白・間隔・画像幅を詰める */
@media screen and (min-width: 767px) and (max-width: 1023px) {
    .p-numbers-card {
        gap: calc(24 / var(--root-fz) * 1rem);
        padding: calc(48 / var(--root-fz) * 1rem) calc(32 / var(--root-fz) * 1rem);
    }
    .p-numbers-card__pic {
        width: calc(280 / var(--root-fz) * 1rem);
        height: calc(187 / var(--root-fz) * 1rem);
    }
}

/*  数字行（見出しの下）
--------------------------------------------- */
.p-numbers-card__num {
    margin-top: calc(4 / var(--root-fz) * 1rem);
    color: var(--p-numbers-accent);
    font-weight: bold;
    line-height: 1.5;
}
.p-numbers-card__digit {
    font-size: calc(60 / var(--root-fz) * 1rem);
}
.p-numbers-card__digit--tight {
    letter-spacing: -0.04em;
}
.p-numbers-card__digit--env {
    font-size: calc(64 / var(--root-fz) * 1rem);
    line-height: 1.2;
}
.p-numbers-card__unit {
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: normal;
}
.p-numbers-card__unit--bold {
    font-weight: bold;
}
.p-numbers-card__unit--medium {
    font-weight: 500;
}
.p-numbers-card__line {
    display: block;
    font-size: calc(32 / var(--root-fz) * 1rem);
    font-weight: normal;
}
/* 見出し末尾の「※」（22px に対して 14.19px） */
.p-numbers-card__mark {
    font-size: 0.645em;
    line-height: 0;
    vertical-align: super;
}
/* 「※」や「の」だけが次の行に送られないよう、直前の語とまとめて折り返す */
.p-numbers-nowrap {
    white-space: nowrap;
}
/* 768px ちょうどで 0.19px 足りず「年間」だけの行ができるため、PCでは行全体をまとめる */
@media screen and (min-width: 767px) {
    .p-numbers-nowrap-pc {
        white-space: nowrap;
    }
}
@media screen and (max-width: 767px) {
    .p-numbers-card__digit,
    .p-numbers-card__digit--env {
        font-size: 44px;
    }
    .p-numbers-card__digit {
        line-height: 1;
    }
    .p-numbers-card__unit,
    .p-numbers-card__line {
        font-size: 24px;
    }
}

/*  補助行（22px太字）／注記／本文
--------------------------------------------- */
.p-numbers-card__sub {
    color: var(--p-numbers-accent);
    font-size: calc(22 / var(--root-fz) * 1rem);
    font-weight: bold;
    line-height: 1.5;
}
.p-numbers-card__sub-num {
    font-size: calc(32 / var(--root-fz) * 1rem);
}
.p-numbers-card__sub--lead {
    margin-top: calc(4 / var(--root-fz) * 1rem);
}
@media screen and (max-width: 767px) {
    .p-numbers-card__sub {
        font-size: 18px;
    }
    .p-numbers-card__sub-num {
        font-size: 26px;
    }
    .p-numbers-card__sub--lead {
        margin-top: 4px;
    }
}
.p-numbers-card__note {
    color: var(--p-numbers-accent);
}
.p-numbers-card__txt {
    margin-top: calc(16 / var(--root-fz) * 1rem);
}
/* 本文の後ろに置く注釈（本文と同じ黒文字） */
.p-numbers-card__annot {
    margin-top: calc(16 / var(--root-fz) * 1rem);
}
/* 本文の改行位置（Figma準拠）。SP・タブレットは自然な折り返し、1024px以上のみ改行する */
.p-numbers-br {
    display: none;
}
@media screen and (min-width: 1024px) {
    .p-numbers-br {
        display: inline;
    }
}
.p-numbers-card__note + .p-numbers-card__txt {
    margin-top: calc(16 / var(--root-fz) * 1rem);
}
@media screen and (max-width: 767px) {
    .p-numbers-card__txt,
    .p-numbers-card__note + .p-numbers-card__txt,
    .p-numbers-card__annot {
        margin-top: 16px;
    }
}
/* 補助行の直後に本文が来る場合（創業）は間隔なし（Figma準拠） */
.p-numbers-card__sub + .p-numbers-card__txt {
    margin-top: 0;
}

/*  ボタン
--------------------------------------------- */
.p-numbers-card__btn {
    display: flex;
    padding-top: calc(24 / var(--root-fz) * 1rem);
}
@media screen and (max-width: 767px) {
    .p-numbers-card__btn {
        padding-top: 24px;
    }
    /* .c-btn-1--297 の min-width: 297px を解除（320px幅で枠からはみ出すため） */
    .p-numbers-card__btn .c-btn-1 {
        width: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------
*   事業（構成図）
--------------------------------------------- */
/* SPは補助行が折り返して本文と詰まるため、カード本文（.p-numbers-card__txt）と同じ16pxを空ける */
@media screen and (max-width: 767px) {
    .p-numbers-business__txt {
        margin-top: 16px;
    }
}
.p-numbers-business__img {
    height: calc(565 / var(--root-fz) * 1rem);
}
.p-numbers-business__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
@media screen and (max-width: 767px) {
    .p-numbers-business__img {
        height: auto;
        margin-top: 24px;
    }
    .p-numbers-business__img img {
        height: auto;
    }
}

/* ---------------------------------------------
*   製品の歴史（年表）
*   848×608 を2倍で書き出した1枚画像。
*   PC … 848px で表示（それより狭い場合は枠内を横スクロール）
*   SP … 縮小すると文字が読めないため、原寸のまま横スクロール
--------------------------------------------- */
.p-numbers-history__lead {
    margin-top: calc(16 / var(--root-fz) * 1rem);
}
.p-numbers-timeline-wrap {
    margin-top: calc(48 / var(--root-fz) * 1rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
    .p-numbers-timeline-wrap {
        margin-top: 32px;
    }
}
.p-numbers-timeline {
    display: block;
    width: 848px;
    max-width: none;
    height: auto;
    margin-inline: auto;
}