@charset 'utf-8';

/* =============================================================
   single-business.php（事業領域 / 各ソリューション）
   design : PC 1440px / SP 375px
     PC : 1440px 以下でも文字は縮小しない（--u = 1px）
     SP : 375px 基準で拡縮
   数値は Figma REST API の実測値（Business_01_Machine /
   SP_Business_01_Machine）に合わせている。
   FV・パンくず・INDEX バーは共通パーツ c-fv（common.css）を使う。
   ============================================================= */

.p-bizz picture {
    display: block;
}

.p-bizz {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
    font-family: var(--font-noto);
    line-height: 1;
}

/* =============================================================
   FV
   c-fv の器に、番号つきタイトル（左）とリード（右）を載せる。
   暗幕の高さは COMPANY が 540px、事業領域は 575px。
   ============================================================= */
.p-bizz__fv .c-fv__img {
    height: calc(575 * var(--u));
}

.p-bizz__fv .c-fv__img::after {
    background-color: var(--color-dark-gray);
    opacity: 0.85;
}

/* INDEX バーは 74px（COMPANY は 2 段で 109px） */
.p-bizz__fv .c-fv__index {
    padding: calc(25 * var(--u)) 0;
}

.p-bizz__fv .c-fv__indexList {
    column-gap: calc(28 * var(--u));
}

/* 行の高さ 24px（COMPANY は 1 なのでここだけ上書き）。
   バーの高さ = 25 + 24 + 25 = 74px になる */
.p-bizz__fv .c-fv__indexLabel {
    line-height: calc(23 / 14);
}

.p-bizz__fv .c-fv__indexLink {
    column-gap: calc(11 * var(--u));
    line-height: calc(24 / 14);
}

.p-bizz__fv .c-fv__body {
    top: calc(212 * var(--u));
    display: flex;
    align-items: flex-start;
}

/* --- 歯車の線画（写真の右側） --- */
.p-bizz__fv-gear {
    position: absolute;
    top: calc(135 * var(--u));
    right: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 20 * var(--u)));
    z-index: 1;
    width: calc(406 * var(--u));
    aspect-ratio: 1 / 1;
    background: url(../img/bizz/bizz_gear_trans.webp) no-repeat center / contain;
    opacity: 0.5;
    pointer-events: none;
}

/* --- 左：番号 ＋ 英字タイトル --- */
.p-bizz__fv-ttlBox {
    width: 59.25%;   /* 711 / 1200 */
}

.p-bizz__fv-num {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-weight: 600;
    letter-spacing: 0.125em;   /* 3px */
    line-height: calc(30 / 24);
}

.p-bizz__fv-ttl {
    margin-top: calc(7 * var(--u));
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(85 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0353em;   /* 3px */
    line-height: calc(95 / 85);
    text-transform: uppercase;
}

/* --- 右：リード ＋ 説明 --- */
/* リードは 1 行に収める前提。説明文の折り返し幅（371px）より
   少しだけ広く取っておく */
.p-bizz__fv-leadBox {
    /* リードは 1 行に収める前提。4 ページ中いちばん長い 04（424px）が
       収まる幅を確保する。説明文の折り返しは max-width 側で決める */
    width: 36.5%;
    margin-top: calc(55 * var(--u));
}

.p-bizz__fv-lead {
    color: #fff;
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.042em;   /* 1px */
    line-height: calc(42 / 24);
}

.p-bizz__fv-text {
    max-width: calc(385 * var(--u));
    margin-top: calc(15 * var(--u));
    color: #fff;
    font-size: calc(16 * var(--u));
    /* PC だけ細め（SP は 400 のまま。下の max-width: 768px を参照） */
    font-weight: 300;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* PC：写真の高さ（575px）は固定だが、右のリード＋説明文が長いと（英語版や 769px 付近の狭い画面）
   INDEX バーにかぶってしまう。SP と同じく写真と本文を同じマスに重ね、
   本文が収まらないときだけ写真を下に伸ばす（本文と INDEX バーの間は最低 40px あける）。
   収まるページは今までどおり 575px のまま。文字の位置も変わらない */
@media screen and (min-width: 769px) {
    .p-bizz__fv {
        display: grid;
        grid-template-columns: 100%;
    }

    .p-bizz__fv .c-fv__img {
        grid-area: 1 / 1;
        height: auto;
        min-height: calc(575 * var(--u));
    }

    /* 写真そのものの縦横比でマスが伸びないよう、写真は枠いっぱいに敷くだけにする */
    .p-bizz__fv .c-fv__img picture {
        position: absolute;
        inset: 0;
    }

    /* 写真は INDEX バー（74px）の裏まで敷く（common.css の 649px と同じ考え方） */
    .p-bizz__fv .c-fv__img img {
        height: calc(100% + 74 * var(--u));
    }

    .p-bizz__fv .c-fv__index {
        grid-area: 2 / 1;
    }

    .p-bizz__fv .c-fv__body {
        grid-area: 1 / 1;
        position: relative;
        top: auto;
        padding-top: calc(212 * var(--u));
        padding-bottom: calc(40 * var(--u));
    }
}

/* =============================================================
   NEWS
   FV 直下の 1 行（高さ 47px）。最新のお知らせを 1 件だけ出す。
   ============================================================= */
.p-bizz__news {
    background-color: #fff;
}

.p-bizz__news-link {
    display: flex;
    align-items: center;
    column-gap: calc(14 * var(--u));
    padding: calc(7.5 * var(--u)) 0;
}

/* タイトルが長いと縮められて NEWS と日付が 2 段になるので、ここは縮ませない */
.p-bizz__news-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.p-bizz__news-label {
    flex-shrink: 0;
    margin-right: calc(36 * var(--u));
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: calc(23 / 14);
}

@media screen and (min-width: 769px) {

    /* NEWS の日付を、上の INDEX の最初の項目（「マシンソリューションとは？」など）と
       同じ位置から始める。「INDEX」「NEWS」の見出しを同じ幅に固定し、
       そのあとの間隔も INDEX と同じ 48px にする。幅を固定しているので、
       書体の描画に差があっても 2 つの開始位置はずれない */
    .p-bizz__fv .c-fv__indexLabel,
    .p-bizz__news-label {
        width: calc(56 * var(--u));
    }

    .p-bizz__news-label {
        margin-right: calc(48 * var(--u));
    }
}

.p-bizz__news-date {
    flex-shrink: 0;
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0625em;
    line-height: 2;
}

.p-bizz__news-ttl {
    min-width: 0;
    overflow: hidden;
    color: var(--color-dark-gray);
    /* 16px・太字だと FV 直下で目立ちすぎるので、14px・中太にする（2026-09-24 指示。日英共通） */
    font-size: calc(14 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: 2;
    text-decoration: underline;
    /* 下線は文字の太さに合わせて自動で太くなるので、細めに固定する（PC・SP 共通） */
    text-decoration-thickness: calc(1 * var(--u));
    text-underline-offset: calc(5 * var(--u));
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ホバーは文字が青くなるだけ。リンク共通の半透明（common.css の a:hover）は付けない */
.p-bizz__news-link:hover {
    opacity: 1;
}

.p-bizz__news-ttl {
    transition: color 0.3s;
}

.p-bizz__news-link:hover .p-bizz__news-ttl {
    color: var(--color-hamabo-blue);
}

@media (prefers-reduced-motion: reduce) {
    .p-bizz__news-ttl {
        transition: none;
    }
}

/* PC は 1 行に並ぶので、NEWS・日付・タイトルの文字の下端（ベースライン）をそろえる。
   上下中央そろえのままだと、書体の違い（日付は Montserrat、和文タイトルは Noto Sans JP）で
   タイトルだけ 1px ほど下がって見える。行の高さ（47px）は変わらない */
@media screen and (min-width: 769px) {
    .p-bizz__news-link,
    .p-bizz__news-head {
        align-items: baseline;
    }
}

/* =============================================================
   セクション共通
   ============================================================= */
/* INDEX のページ内リンクで飛んだとき、固定ヘッダーに隠れないようにする */
.p-bizz__intro,
.p-bizz__flow,
.p-bizz__items,
.p-bizz__block {
    scroll-margin-top: var(--l-header-h);
}

/* 縦組みの飾り文字を置くための基準。中身より奥に敷く */
.p-bizz__body {
    position: relative;
}

.p-bizz__side {
    position: absolute;
    top: calc(9 * var(--u));
    left: calc(-17 * var(--u));
    z-index: 0;
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(85 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0353em;
    line-height: calc(95 / 85);
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    pointer-events: none;
    user-select: none;
}

.p-bizz__intro,
.p-bizz__blocks {
    position: relative;
    z-index: 1;
}

/* 見出し直後のリード（青・太字）と本文。ページ内で何度も出てくる */
/* リード（青・大）はリッチテキスト。中身の <p> は行送りに任せて余白を持たせない */
.p-bizz__copy > :first-child {
    margin-top: 0;
}

.p-bizz__copy > :last-child {
    margin-bottom: 0;
}

.p-bizz__copy p {
    margin: 0;
}

.p-bizz__copy {
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.042em;   /* 1px */
    line-height: calc(42 / 24);
}

.p-bizz__text {
    max-width: calc(520 * var(--u));
    margin-top: calc(21 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* 帯写真（全幅）。次のセクションとの間隔はここで確保する
   （業務フローが無いページでも同じ間隔になるように） */
.p-bizz__belt {
    margin-bottom: calc(130 * var(--u));
}

.p-bizz__belt img {
    aspect-ratio: 1440 / 536;
    object-fit: cover;
}

/* =============================================================
   WHAT WE DO（○○・ソリューションとは？）
   ============================================================= */
.p-bizz__intro {
    padding-top: calc(72 * var(--u));
}

.p-bizz__intro-inner {
    display: flex;
    align-items: flex-start;
    column-gap: 7.5%;   /* 90 / 1200 */
}

.p-bizz__intro-img {
    flex-shrink: 0;
    width: 42.667%;   /* 512 / 1200 */
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__intro-img img {
    aspect-ratio: 512 / 406;
    object-fit: cover;
}

.p-bizz__intro-body {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* 白い歯車の透かし（本文の背面） */
.p-bizz__intro-gear {
    position: absolute;
    top: calc(-4 * var(--u));
    left: calc(199 * var(--u));
    z-index: -1;
    width: calc(406 * var(--u));
    aspect-ratio: 1 / 1;
    background: url(../img/bizz/bizz_gear_white.webp) no-repeat center / contain;
    /* スクロールに連動させず、ゆっくり回り続ける */
    animation: c-gear-spin 30s linear infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .p-bizz__intro-gear {
        animation: none;
    }
}

.p-bizz__intro-copy {
    margin-top: calc(46 * var(--u));
    font-size: calc(36 * var(--u));
    letter-spacing: 0.028em;   /* 1px */
    line-height: calc(66 / 36);
}

.p-bizz__intro-text {
    max-width: calc(485 * var(--u));
    margin-top: calc(32 * var(--u));
}

/* 本文の下の注記（03 CARBON の「※稼働状況による」） */
.p-bizz__intro-note {
    margin-top: calc(20 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(12 * var(--u));
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
}

/* =============================================================
   番号つきブロック（01 主な業務内容 …）
   ============================================================= */
.p-bizz__blocks {
    padding-top: calc(84 * var(--u));
    padding-bottom: calc(130 * var(--u));
}

.p-bizz__block + .p-bizz__block {
    margin-top: calc(110 * var(--u));
}

/* 高さ 63px。番号の下だけ罫線を青くする */
.p-bizz__block-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    column-gap: calc(50 * var(--u));
    padding-bottom: calc(11 * var(--u));
    border-bottom: 1px solid var(--color-light-silver);
}

.p-bizz__block-head::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: calc(64 * var(--u));
    height: 2px;
    background-color: var(--color-hamabo-blue);
}

.p-bizz__block-num {
    flex-shrink: 0;
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(48 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0417em;   /* 2px */
    line-height: calc(52 / 48);
}

.p-bizz__block-label {
    margin-top: calc(13 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0625em;
    line-height: calc(26 / 16);
}

/* 見出しの左端はそろえたまま、中身だけ 64px 下げる */
.p-bizz__block-body {
    margin-top: calc(56 * var(--u));
    padding-left: calc(64 * var(--u));
}

/* --- 4 カード（260 ＋ すき間 30） --- */
.p-bizz__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(30 * var(--u));
    row-gap: calc(48 * var(--u));
    margin-top: calc(41 * var(--u));
}

.p-bizz__card-img {
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__card-img img {
    aspect-ratio: 260 / 177;
    object-fit: cover;
}

.p-bizz__card-step {
    display: block;
    margin-bottom: calc(10 * var(--u));
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0625em;
    line-height: 1;
}

.p-bizz__card-ttl {
    margin-top: calc(24 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0625em;
    line-height: calc(26 / 16);
}

.p-bizz__card-text {
    margin-top: calc(10 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;
    line-height: calc(24 / 14);
}

/* --- テキスト ＋ 写真 --- */
.p-bizz__media {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: calc(-3 * var(--u));
}

.p-bizz__media-body {
    flex-shrink: 0;
    width: 45.86%;   /* 520 / 1134 */
}

.p-bizz__media-body .p-bizz__text {
    max-width: none;
}

/* SMART の 01（主な業務内容）と営業品目の本文は、デザインどおりそれぞれ 2 行・4 行に収まる幅（562px）にする */
@media screen and (min-width: 1081px) {
    .p-bizz--smart-solution .p-bizz__block:first-child > .p-bizz__block-body > .p-bizz__text,
    .p-bizz--smart-solution .p-bizz__items-lead > .p-bizz__text {
        max-width: calc(562 * var(--u));
    }

    /* CARBON の 01 の本文も、デザインどおり 2 行に収まる幅（690px）にする */
    .p-bizz--carbon-solution .p-bizz__block:first-child > .p-bizz__block-body > .p-bizz__text {
        max-width: calc(690 * var(--u));
    }

    /* ENERGY の 01 は「つくり、」で改行して 2 行。2 行目（約 730px）が折り返さない幅（デザインの 955px）にする */
    .p-bizz--energy-solution .p-bizz__block:first-child > .p-bizz__block-body > .p-bizz__text {
        max-width: calc(955 * var(--u));
    }
}

.p-bizz__media-img {
    flex-shrink: 0;
    width: 47.44%;   /* 538 / 1134 */
    margin-top: calc(8 * var(--u));
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__media-img img {
    aspect-ratio: 538 / 366;
    object-fit: cover;
}

/* --- パートナー紹介（02 SMART など）---
   写真（左）＋ 本文（右）、ボタンは本文の下。
   3 つを直接の子にしておくと、SP でボタンだけ全幅に回せる。 */
/* 列は minmax(0, 1fr)。ただの 1fr だと中身（226px のボタン）より狭くなれず、
   画面を縮めたときに右のカードが画面の外へはみ出す */
.p-bizz__partners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(86 * var(--u));
    row-gap: calc(48 * var(--u));
    margin-top: calc(41 * var(--u));
}

.p-bizz__partner {
    display: grid;
    grid-template-columns: 49.62% minmax(0, 1fr);   /* 260 / 524 */
    column-gap: 6.49%;                   /*  34 / 524 */
}

.p-bizz__partner-img {
    grid-column: 1;
    grid-row: 1 / 3;
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__partner-img img {
    aspect-ratio: 260 / 200;
    object-fit: cover;
}

.p-bizz__partner-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.p-bizz__partner-ttl {
    color: var(--color-hamabo-blue);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0625em;
    line-height: calc(26 / 16);
}

.p-bizz__partner-text {
    margin-top: calc(10 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;
    line-height: calc(24 / 14);
}

/* 226 x 40 の外部リンクボタン */
.p-bizz__partner-btn {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    width: 100%;   /* 本文の幅が 226px より狭いときは、ボタンも一緒に縮める */
    max-width: calc(226 * var(--u));
    height: calc(40 * var(--u));
    margin-top: calc(24 * var(--u));
    padding-inline: calc(18 * var(--u));
    border-radius: calc(10 * var(--u));
    font-family: var(--font-mon);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;   /* ラベルは Liberaware のように入れても、デザインどおり大文字で出す */
}

.p-bizz__partner-btn .c-btn__ext {
    width: calc(14 * var(--u));
}

/* --- 注記（ブロックの右下に小さく） --- */
.p-bizz__block-note {
    margin-top: calc(29 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(12 * var(--u));
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
}

/* --- 補足ブロック（本文の左 ＋ 写真を右に横並び）--- */
.p-bizz__sub {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: calc(87 * var(--u));
}

.p-bizz__sub-body {
    flex-shrink: 0;
    width: 34.8%;   /* 395 / 1134 */
}

.p-bizz__sub-body .p-bizz__text {
    max-width: none;
}

/* 右端には寄せず、デザインどおり 114px 内側で止める（Figma: x=645〜1206、本文の右端は 1320） */
.p-bizz__sub-imgs {
    flex-shrink: 0;
    display: flex;
    column-gap: 4.1%;    /* 23 / 561（% はこの箱自身の幅に対してかかる） */
    width: 49.5%;        /* 561 / 1134 */
    margin-right: 10.04%;   /* 114 / 1136 */
}

.p-bizz__sub-img {
    flex: 1;
    min-width: 0;
}

.p-bizz__sub-img img {
    aspect-ratio: 171 / 242;
    object-fit: cover;
}

/* --- 写真を 2 枚ずらして重ねる（SMART の 3D 画像処理など）---
   枠は 230 x 177。1 枚目を左上、2 枚目を右下に置く。 */
.p-bizz__card-img--pair,
.p-bizz__flow-img--pair {
    position: relative;
    overflow: visible;
    border-radius: 0;
}

.p-bizz__card-img--pair::before,
.p-bizz__flow-img--pair::before {
    content: '';
    display: block;
    padding-top: 76.96%;   /* 177 / 230 */
}

.p-bizz__pair-back,
.p-bizz__pair-front {
    position: absolute;
    width: 62.6%;   /* 144 / 230 */
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__pair-back {
    top: 0;
    left: 0;
}

.p-bizz__pair-front {
    top: 37.85%;   /* 67 / 177 */
    left: 37.4%;   /* 86 / 230 */
}

.p-bizz__pair-back img,
.p-bizz__pair-front img {
    aspect-ratio: 144 / 111;
    object-fit: cover;
}

/* =============================================================
   WORK FLOW（業務フロー）
   ============================================================= */
.p-bizz__flow {
    padding: 0 0 calc(140 * var(--u));
}

.p-bizz__flow-body {
    margin-top: calc(54 * var(--u));
    padding-left: calc(64 * var(--u));
}

.p-bizz__flow-body .p-bizz__text {
    max-width: calc(541 * var(--u));
}

/* 4 列（230 ＋ すき間 62） */
.p-bizz__flow-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(62 * var(--u));
    max-width: calc(1106 * var(--u));
    margin-top: calc(54 * var(--u));
}

/* 番号つきブロックの中で使うときは、上の余白だけ揃える */
.p-bizz__block-body .p-bizz__flow-list {
    margin-top: calc(51 * var(--u));
}

.p-bizz__flow-item {
    position: relative;
    /* 三角を写真の高さの中央に置くため、カード幅を基準にできるようにする */
    container-type: inline-size;
}

/* 次のステップへ送る三角（17 × 28）。
   写真の上端 = STEP ラベル 42px、写真の高さ = 幅 × 177/230 */
.p-bizz__flow-item + .p-bizz__flow-item::before {
    content: '';
    position: absolute;
    top: calc(28 * var(--u) + 38.48cqw);
    left: calc(-45 * var(--u));
    width: calc(17 * var(--u));
    aspect-ratio: 17 / 28;
    background-color: var(--color-midium-gray);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.p-bizz__flow-step {
    display: block;
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0625em;
    line-height: calc(42 / 16);
}

.p-bizz__flow-img {
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

.p-bizz__flow-img img {
    aspect-ratio: 230 / 177;
    object-fit: cover;
}

.p-bizz__flow-ttl {
    margin-top: calc(24 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0625em;
    line-height: calc(26 / 16);
}

.p-bizz__flow-text {
    margin-top: calc(10 * var(--u));
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;
    line-height: calc(24 / 14);
}

/* =============================================================
   AVAILABLE SALES ITEMS（営業品目）
   ============================================================= */
.p-bizz__items {
    padding-bottom: calc(130 * var(--u));
}

.p-bizz__items-body {
    margin-top: calc(56 * var(--u));
    padding-left: calc(64 * var(--u));
}

/* 3 列 × n 行の一覧表。枠線は上と左を表に、右と下を各セルに持たせる */
/* 外枠 ＋ 縦の仕切りだけ。横罫は引かず、見出しの帯で区切る（Figma どおり）。
   仕切りは「1px のすき間から下地の線色を覗かせる」方式にしてある。
   セルごとに border-left を付けると列数が変わったときに位置がずれるため、
   この形なら 3 列でも 2 列でも自動的に正しい位置に出る。 */
.p-bizz__items-table {
    display: grid;
    max-width: calc(1070 * var(--u));
    margin-top: calc(33 * var(--u));
    column-gap: 1px;
    border: 1px solid var(--color-midium-gray);
    background-color: var(--color-midium-gray);
}

/* 各セルは「見出しの帯／中身」の 2 段。段の高さを表全体で共有する（subgrid）ので、
   どれかの見出しが 2 行になっても、同じ段の帯はそろって同じ高さになり、表が崩れない */
.p-bizz__items-group {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    background-color: #fff;
}

.p-bizz__items-table--col3 { grid-template-columns: repeat(3, 1fr); }
.p-bizz__items-table--col2 { grid-template-columns: repeat(2, 1fr); }

/* 埋めセルは中身を持たず、背景をページ側に合わせるだけ */
.p-bizz__items-group--empty {
    background-color: var(--color-light-gray);
}

/* 文字は 16px（デザインは 18px だが、長い分類名でも 1 行に収まりやすいように小さくした）。
   2 行になったときに行間が開きすぎないよう、行送りは 1.6（25.6px）。
   1 行のときの帯の高さ（55px）は変えない：25.6 + 14.7 x 2。
   同じ段に 2 行の帯があって背が伸びたときは、文字を上下中央に置く */
.p-bizz__items-ttl {
    display: flex;
    align-items: center;
    padding: calc(14.7 * var(--u)) calc(30 * var(--u));
    background-color: var(--color-light-silver);
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0556em;
    line-height: 1.6;
}

/* 分類名の下に置く説明（03 CARBON のパターン） */
.p-bizz__items-desc {
    padding: calc(12 * var(--u)) calc(30 * var(--u)) 0;
    color: var(--color-dark-gray);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;
    line-height: calc(24 / 14);
}

.p-bizz__items-desc + .p-bizz__items-list {
    padding-top: calc(24 * var(--u));
}

/* デザイン実測：項目タイトルの文字の開始位置を基準に、「・」が 7px 内側、
   項目の文字が 22.5px 内側（PC・SP 共通）。タイトルの左 padding は 30px なので、
   リストの左 padding は 30 + 7 = 37px、点から文字までは 15.5px */
.p-bizz__items-list {
    padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)) calc(37 * var(--u));
}

.p-bizz__items-item {
    position: relative;
    padding-left: calc(15.5 * var(--u));
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;
    line-height: 2;
}

/* 品目の補足（<small>（…）</small>）は 12px。字間は品目と同じ（PC 1px・SP 0）を引き継ぐ */
.p-bizz__items-item small {
    font-size: 0.75em;
}

.p-bizz__items-item::before {
    content: '';
    position: absolute;
    top: calc(14 * var(--u));
    left: 0;
    width: calc(4 * var(--u));
    height: calc(4 * var(--u));
    border-radius: 50%;
    background-color: var(--color-dark-gray);
}

/* --- 本文の左 ＋ 枠付きリストを右（04 ENERGY のパターン）--- */
.p-bizz__items-body--aside {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.p-bizz__items-body--aside .p-bizz__items-lead {
    flex-shrink: 0;
    width: 45.8%;   /* 520 / 1136 */
}

.p-bizz__items-body--aside .p-bizz__text {
    max-width: none;
}

.p-bizz__items-aside {
    flex-shrink: 0;
    width: 48.9%;   /* 555 / 1136 */
    padding: calc(21 * var(--u)) calc(30 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u));
    border: 1px solid var(--color-midium-gray);
}

/* 16px・行送り 1.6（25.6px）にしても、1 行のときの文字の位置（上から 18px が中心）と
   リストまでの間隔は変えない：5.2 + 25.6 + 17.2 = 48px */
.p-bizz__items-aside .p-bizz__items-ttl {
    padding: calc(5.2 * var(--u)) 0 calc(17.2 * var(--u));
    background-color: transparent;
}

/* 見出しに左 padding がない並びでも、点は見出しの 7px 内側にそろえる */
.p-bizz__items-aside .p-bizz__items-list {
    padding: 0 0 0 calc(7 * var(--u));
}

/* =============================================================
   OTHER SOLUTIONS
   左は画面端まで、右はコンテンツ幅（1200px）の右端で止める
   ============================================================= */
/* 角丸は右上・右下だけ（左は画面端まで伸ばすため） */
.p-bizz__other {
    display: flex;
    align-items: stretch;
    max-width: min(calc(50% + 600px), calc(100% - var(--gut)));
    margin-right: auto;
    overflow: hidden;
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
    background-color: var(--color-dark-gray);
}

/* CONTACT との間隔（c-contact 既定の 158px ではなく 92px） */
.p-bizz .c-contact {
    padding-top: calc(92 * var(--u));
}

/* 左の余白は「画面端からコンテンツ左端まで ＋ 65px」 */
.p-bizz__other-body {
    flex: 1;
    min-width: 0;
    padding: calc(72 * var(--u)) calc(89 * var(--u)) calc(71 * var(--u)) calc(var(--gut) + 65 * var(--u));
}

.p-bizz__other-ttl {
    color: #fff;
    font-family: var(--font-mon);
    font-size: calc(36 * var(--u));
    font-weight: 600;
    letter-spacing: 0.028em;
    /* デザインは 1 行で、行の高さ 23px として配置している。ただ行送り 23px のままだと、
       狭い画面（850px 以下など）で 2 行に折れたとき上下の行が重なるので、行送りは 1.2 にして、
       増えたぶん（上下の半分ずつ）をマイナスの余白で打ち消す。1 行のときの位置は変わらない */
    line-height: 1.2;
    margin-block: calc((23 - 36 * 1.2) / 2 * var(--u));
    text-transform: uppercase;
}

.p-bizz__other-list {
    margin-top: calc(39 * var(--u));
    border-top: 1px solid var(--color-midium-gray);
}

.p-bizz__other-item {
    border-bottom: 1px solid var(--color-midium-gray);
}

.p-bizz__other-link {
    display: flex;
    align-items: center;
    column-gap: calc(16 * var(--u));
    padding: calc(14 * var(--u)) 0;
}

.p-bizz__other-num {
    flex-shrink: 0;
    width: calc(39 * var(--u));
    color: var(--color-midium-gray);
    transition: color 0.3s;
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0714em;
    line-height: calc(32 / 14);
}

.p-bizz__other-label {
    flex: 1;
    min-width: 0;
    color: var(--color-midium-gray);
    transition: color 0.3s;
    font-size: calc(15 * var(--u));
    font-weight: 500;
    line-height: calc(25 / 15);
}

/* 通常は番号・ラベル・丸矢印すべて #A6B0BA。
   ホバーで文字が白に、丸矢印が「白い塗り円 ＋ #2A323E の矢印」に変わる。
   TOP は中の矢印が青（arrow_circle_white.png）だが、ここは背景が
   ダークグレーなので背景色と同じ濃さの矢印にしている。 */
.p-bizz__other-arrow {
    position: relative;
    flex-shrink: 0;
    width: calc(30 * var(--u));
    aspect-ratio: 1 / 1;
    background: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

.p-bizz__other-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/common/arrow_circle_white_dgray.png) no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s;
}

.p-bizz__other-link:hover {
    opacity: 1;
}

.p-bizz__other-link:hover .p-bizz__other-arrow::after {
    opacity: 1;
}

.p-bizz__other-link:hover .p-bizz__other-num,
.p-bizz__other-link:hover .p-bizz__other-label {
    color: #fff;
}

.p-bizz__other-img {
    flex-shrink: 0;
    width: 44.62%;   /* 589 / 1320 */
    overflow: hidden;
}

.p-bizz__other-img picture {
    height: 100%;
}

.p-bizz__other-img img {
    height: 100%;
    object-fit: cover;
}

/* =============================================================
   タブレット〜小さめの PC（769px 〜 1200px）
   デザインは 1440px と 375px だけなので、その間は
   「文字サイズは PC のまま、横並びだけほどく」方針でつなぐ。
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1200px) {

    /* FV は 2 段組のままだが、タイトルが右のリードに
       かぶらないところまで詰める */
    .p-bizz__fv-ttlBox {
        width: 54%;
    }

    .p-bizz__fv-leadBox {
        width: 42%;
        margin-left: 4%;
    }

    .p-bizz__fv-ttl {
        font-size: min(calc(85 * var(--u)), 8.4vw);
    }
}

@media screen and (min-width: 769px) and (max-width: 1080px) {

    /* 本文の左インデントは詰める */
    .p-bizz__block-body,
    .p-bizz__flow-body,
    .p-bizz__items-body {
        padding-left: calc(24 * var(--u));
    }

    /* WHAT WE DO とテキスト＋写真は縦積みにして、本文の幅を確保する */
    .p-bizz__intro-inner,
    .p-bizz__media {
        display: flex;
        flex-direction: column;
    }

    .p-bizz__intro-img,
    .p-bizz__media-img {
        order: 2;
        width: 100%;
        max-width: calc(600 * var(--u));
        margin-top: calc(32 * var(--u));
    }

    .p-bizz__media-body {
        width: 100%;
    }

    .p-bizz__text,
    .p-bizz__intro-text {
        max-width: none;
    }

    /* カード・ステップ・営業品目は 2 列に落とす */
    .p-bizz__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* パートナーは 2 つ並べると本文が細くなりすぎるので 1 列に（写真＋本文の横並びはそのまま） */
    .p-bizz__partners {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 1 列にしたぶん写真が大きくなりすぎないよう、写真は PC デザインの 260px のまま、残りを本文に */
    .p-bizz__partner {
        grid-template-columns: calc(260 * var(--u)) minmax(0, 1fr);
        column-gap: calc(34 * var(--u));
    }

    .p-bizz__flow-list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: calc(40 * var(--u));
    }

    /* 2 列になると三角の位置が合わなくなるので出さない */
    .p-bizz__flow-item + .p-bizz__flow-item::before {
        content: none;
    }

    .p-bizz__items-table {
        grid-template-columns: repeat(2, 1fr);
    }

    /* OTHER SOLUTIONS は画面幅いっぱいに */
    .p-bizz__other {
        max-width: none;
    }

    /* 左右の余白が PC のまま（89px）だと、850px 以下で「スマート・ソリューション」が
       「ソリューシ / ョン」と折れるので詰める */
    .p-bizz__other-body {
        padding-right: calc(40 * var(--u));
        padding-left: calc(var(--gut) + 32 * var(--u));
    }
}

/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    /* ---------- FV ----------
       写真（高さ 510px）の上に本文を重ねる。本文が長くて 510px に収まらないとき
       （04 ENERGY のリードを 2 行にした場合など）は、写真のほうを伸ばして
       本文が INDEX バーの裏に隠れないようにする。
       写真と本文を同じマスに重ね、マスの高さ = 510px と「本文＋下 30px」の大きいほう */
    .p-bizz__fv {
        display: grid;
        grid-template-columns: 100%;
    }

    .p-bizz__fv .c-fv__img {
        grid-area: 1 / 1;
        height: auto;
        min-height: calc(510 * var(--u));
        aspect-ratio: auto;
    }

    /* 写真そのものの縦横比でマスが伸びないよう、写真は枠いっぱいに敷くだけにする */
    .p-bizz__fv .c-fv__img picture {
        position: absolute;
        inset: 0;
    }

    .p-bizz__fv .c-fv__index {
        grid-area: 2 / 1;
    }

    /* INDEX バーは 120px */
    .p-bizz__fv .c-fv__index {
        padding: calc(27 * var(--u)) calc(31 * var(--u)) calc(36 * var(--u));
    }

    .p-bizz__fv .c-fv__indexList {
        column-gap: calc(35 * var(--u));
        row-gap: calc(9 * var(--u));
    }

    .p-bizz__fv .c-fv__indexLink {
        column-gap: calc(8 * var(--u));
    }

    /* 2 列ぶん使う項目は、チェブロンを右端ではなく文字のすぐ後ろに置く */
    .p-bizz__fv .c-fv__indexItem--wide .c-fv__indexLink {
        justify-content: flex-start;
        column-gap: calc(39 * var(--u));
    }

    .p-bizz__fv .c-fv__body {
        grid-area: 1 / 1;
        position: relative;
        top: auto;
        display: block;
        padding-top: calc(134 * var(--u));
        padding-bottom: calc(30 * var(--u));
    }

    .p-bizz__fv-gear {
        top: calc(247 * var(--u));
        right: calc(-102 * var(--u));
        width: calc(246 * var(--u));
    }

    .p-bizz__fv-ttlBox,
    .p-bizz__fv-leadBox {
        width: 100%;
    }

    .p-bizz__fv-num {
        font-size: calc(18 * var(--u));
        line-height: calc(30 / 18);
    }

    .p-bizz__fv-ttl {
        margin-top: calc(12 * var(--u));
        font-size: calc(36 * var(--u));
        letter-spacing: 0.0833em;   /* 3px（PC の 0.0353em のままだと 1.3px しか空かない） */
        line-height: calc(44 / 36);
    }

    .p-bizz__fv-leadBox {
        margin-top: calc(30 * var(--u));
    }

    .p-bizz__fv-lead {
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(35 / 20);
    }

    .p-bizz__fv-text {
        margin-top: calc(18 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 400;
        letter-spacing: 0;
        line-height: 2;
    }

    /* ---------- NEWS（高さ 120px） ---------- */
    .p-bizz__news-link {
        display: block;
        padding: calc(12 * var(--u)) 0 calc(16 * var(--u));
    }

    .p-bizz__news-head {
        display: flex;
        align-items: center;
        column-gap: calc(20 * var(--u));
    }

    .p-bizz__news-label {
        margin-right: 0;
        letter-spacing: 0;
    }

    .p-bizz__news-date {
        letter-spacing: 0;
    }

    /* SP は折り返して 3 行まで。それ以上は末尾を三点リーダーにする（お知らせ一覧の SP と同じ） */
    .p-bizz__news-ttl {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        margin-top: calc(4 * var(--u));
        letter-spacing: 0;
        white-space: normal;
    }

    /* ---------- セクション共通 ---------- */
    /* 縦組みの飾り文字は SP では出さない */
    .p-bizz__side {
        display: none;
    }

    .p-bizz__copy {
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(35 / 20);
    }

    /* 番号つきブロックのリードだけ、デザインではテキストボックスが
       内容幅（335px）より広い 343px で組まれている。
       右マージンが 20px → 12px になるが、そうしないと折り返し位置が合わない。 */
    .p-bizz__block-body .p-bizz__copy {
        width: calc(343 * var(--u));
    }

    .p-bizz__text {
        max-width: none;
        margin-top: calc(18 * var(--u));
        font-size: calc(16 * var(--u));
        letter-spacing: 0;
        line-height: 2;
    }

    .p-bizz__belt {
        margin-bottom: calc(68 * var(--u));
    }

    .p-bizz__belt img {
        aspect-ratio: 375 / 266;
    }

    /* ---------- WHAT WE DO ---------- */
    .p-bizz__intro {
        /* 歯車が画面右外まで出るデザインなので、ここで切る（横スクロール防止） */
        overflow: hidden;
        padding-top: calc(60 * var(--u));
    }

    /* SP は 見出し・本文 → 写真 の順に積む */
    .p-bizz__intro-inner {
        display: flex;
        flex-direction: column;
    }

    .p-bizz__intro-img {
        order: 2;
        width: 100%;
        margin-top: calc(30 * var(--u));
    }

    .p-bizz__intro-img img {
        aspect-ratio: 335 / 188;
    }

    /* SP はコピーの右下、本文の背面に回り込む（Figma: x=135 y=951 288x288）。
       右端は画面外に出るのが正しいので .p-bizz__intro 側で切り落とす */
    .p-bizz__intro-gear {
        top: calc(136 * var(--u));
        left: calc(115 * var(--u));
        width: calc(288 * var(--u));
    }

    .p-bizz__intro-copy {
        margin-top: calc(30 * var(--u));
        font-size: calc(22 * var(--u));
        letter-spacing: 0;
        line-height: calc(40 / 22);
    }

    .p-bizz__intro-text {
        max-width: none;
        margin-top: calc(18 * var(--u));
    }

    .p-bizz__intro-note {
        margin-top: calc(2 * var(--u));
    }

    /* ---------- 番号つきブロック ---------- */
    .p-bizz__blocks {
        padding-top: calc(68 * var(--u));
        padding-bottom: calc(68 * var(--u));
    }

    .p-bizz__block + .p-bizz__block {
        margin-top: calc(68 * var(--u));
    }

    .p-bizz__block-head {
        column-gap: calc(30 * var(--u));
        padding-bottom: calc(7 * var(--u));
    }

    .p-bizz__block-head::after {
        width: calc(36 * var(--u));
    }

    .p-bizz__block-num {
        font-size: calc(32 * var(--u));
        line-height: calc(52 / 32);
    }

    .p-bizz__block-label {
        margin-top: calc(13 * var(--u));
        letter-spacing: 0;
    }

    .p-bizz__block-body {
        margin-top: calc(30 * var(--u));
        padding-left: 0;
    }

    /* カードは 写真（左）＋ 本文（右） の横並び */
    .p-bizz__cards {
        display: block;
        margin-top: calc(30 * var(--u));
    }

    .p-bizz__card {
        display: flex;
        align-items: flex-start;
        column-gap: calc(18 * var(--u));
    }

    .p-bizz__card + .p-bizz__card {
        margin-top: calc(24 * var(--u));
    }

    .p-bizz__card-img {
        flex-shrink: 0;
        width: calc(123 * var(--u));
    }

    .p-bizz__card-img img {
        aspect-ratio: 123 / 156;
    }

    .p-bizz__card-body {
        flex: 1;
        min-width: 0;
    }

    .p-bizz__card-step {
        font-size: calc(14 * var(--u));
    }

    .p-bizz__card-ttl {
        margin-top: 0;
        letter-spacing: 0;
    }

    .p-bizz__card-text {
        letter-spacing: 0;
    }

    /* 注記は SP では左寄せ */
    .p-bizz__block-note {
        margin-top: calc(8 * var(--u));
        text-align: left;
    }

    /* 補足ブロックは縦積み、写真だけ 3 列で残す */
    .p-bizz__sub {
        display: block;
        margin-top: calc(40 * var(--u));
    }

    .p-bizz__sub-body {
        width: 100%;
    }

    .p-bizz__sub-imgs {
        width: auto;
        margin-top: calc(52 * var(--u));
        margin-right: 0;
        padding-inline: calc(15 * var(--u));
        column-gap: calc(13 * var(--u));
    }

    /* テキスト ＋ 写真は縦積み */
    .p-bizz__media {
        display: block;
        margin-top: calc(30 * var(--u));
    }

    .p-bizz__media-body {
        width: 100%;
    }

    .p-bizz__media-img {
        width: 100%;
        margin-top: calc(30 * var(--u));
    }

    .p-bizz__media-img img {
        aspect-ratio: 335 / 188;
    }

    /* パートナーは 1 列。写真（左）＋ 本文（右）、ボタンはその下に全幅 */
    .p-bizz__partners {
        display: block;
        margin-top: calc(32 * var(--u));
    }

    .p-bizz__partner {
        display: grid;
        grid-template-columns: calc(138 * var(--u)) 1fr;
        column-gap: calc(18 * var(--u));
    }

    .p-bizz__partner + .p-bizz__partner {
        margin-top: calc(40 * var(--u));
    }

    .p-bizz__partner-img {
        grid-row: 1;
    }

    .p-bizz__partner-img img {
        aspect-ratio: 138 / 176;
    }

    .p-bizz__partner-ttl,
    .p-bizz__partner-text {
        letter-spacing: 0;
    }

    .p-bizz__partner-btn {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: start;
        margin-top: calc(20 * var(--u));
    }

    /* 写真を上に大きく置くパターン（03 CARBON） */
    .p-bizz__partners--spStack .p-bizz__partner {
        display: block;
    }

    .p-bizz__partners--spStack .p-bizz__partner + .p-bizz__partner {
        margin-top: calc(40 * var(--u));
    }

    .p-bizz__partners--spStack .p-bizz__partner-img img {
        aspect-ratio: 333 / 195;
    }

    .p-bizz__partners--spStack .p-bizz__partner-body {
        margin-top: calc(20 * var(--u));
    }

    /* ---------- WORK FLOW ---------- */
    .p-bizz__flow {
        padding: 0 0 calc(68 * var(--u));
    }

    .p-bizz__flow-body {
        margin-top: calc(30 * var(--u));
        padding-left: 0;
    }

    .p-bizz__flow-body .p-bizz__text {
        max-width: none;
    }

    /* STEP ラベル（左）＋ 写真と本文（右） */
    .p-bizz__flow-list,
    .p-bizz__block-body .p-bizz__flow-list {
        display: block;
        max-width: none;
        margin-top: calc(48 * var(--u));
    }

    .p-bizz__flow-item {
        display: grid;
        grid-template-columns: calc(87 * var(--u)) 1fr;
    }

    .p-bizz__flow-item + .p-bizz__flow-item {
        margin-top: calc(35 * var(--u));
    }

    /* 三角（28 × 17）は STEP ラベルの下に置いて下向きにする */
    .p-bizz__flow-item::before,
    .p-bizz__flow-item + .p-bizz__flow-item::before {
        content: '';
        position: absolute;
        top: calc(36 * var(--u));
        left: calc(16 * var(--u));
        width: calc(28 * var(--u));
        aspect-ratio: 28 / 17;
        background-color: var(--color-midium-gray);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .p-bizz__flow-step {
        grid-column: 1;
        grid-row: 1;
    }

    .p-bizz__flow-img {
        grid-column: 2;
        grid-row: 1;
    }

    .p-bizz__flow-img img {
        aspect-ratio: 246 / 189;
    }

    /* 2 枚重ねは枠 246 x 189、写真 153 x 118 */
    .p-bizz__card-img--pair::before,
    .p-bizz__flow-img--pair::before {
        padding-top: 76.83%;   /* 189 / 246 */
    }

    .p-bizz__pair-back,
    .p-bizz__pair-front {
        width: 62.2%;   /* 153 / 246 */
    }

    .p-bizz__pair-front {
        top: 37.57%;   /* 71 / 189 */
        left: 36.99%;  /* 91 / 246 */
    }

    .p-bizz__pair-back img,
    .p-bizz__pair-front img {
        aspect-ratio: 153 / 118;
    }

    .p-bizz__flow-body-text {
        grid-column: 2;
        grid-row: 2;
    }

    .p-bizz__flow-ttl {
        margin-top: calc(22 * var(--u));
        letter-spacing: 0;
    }

    .p-bizz__flow-text {
        letter-spacing: 0;
    }

    /* ---------- 営業品目 ---------- */
    .p-bizz__items {
        padding-bottom: calc(68 * var(--u));
    }

    .p-bizz__items-body {
        margin-top: calc(30 * var(--u));
        padding-left: 0;
    }

    .p-bizz__items-table {
        display: block;
        max-width: none;
        margin-top: calc(41 * var(--u));
        border: 0;
        background-color: transparent;
    }

    .p-bizz__items-group {
        border: 1px solid var(--color-midium-gray);
    }

    /* SP は 1 列なので埋めセルは要らない */
    .p-bizz__items-group--empty {
        display: none;
    }

    /* 枠線が重ならないように 1px ぶん詰める */
    .p-bizz__items-group + .p-bizz__items-group {
        margin-top: -1px;
    }

    /* 1 行のときの帯の高さ（53px）は変えない：25.6 + 13.7 x 2 */
    .p-bizz__items-ttl {
        padding: calc(13.7 * var(--u)) calc(31 * var(--u));
        letter-spacing: 0;
    }

    .p-bizz__items-desc {
        padding: calc(17 * var(--u)) calc(28 * var(--u)) 0;
        letter-spacing: 0;
    }

    .p-bizz__items-desc + .p-bizz__items-list {
        padding-top: calc(10 * var(--u));
    }

    /* SP はタイトルの左 padding が 31px なので、31 + 7 = 38px */
    .p-bizz__items-list {
        padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)) calc(38 * var(--u));
    }

    /* 本文の右に置く枠付きリストは、SP では本文の下に全幅で */
    .p-bizz__items-body--aside {
        display: block;
    }

    .p-bizz__items-body--aside .p-bizz__items-lead,
    .p-bizz__items-aside {
        width: 100%;
    }

    .p-bizz__items-aside {
        margin-top: calc(25 * var(--u));
        padding: calc(24 * var(--u)) calc(28 * var(--u));
    }

    .p-bizz__items-item {
        letter-spacing: 0;
    }

    /* ---------- OTHER SOLUTIONS ---------- */
    .p-bizz__other {
        display: block;
        max-width: calc(100% - 19 * var(--u));
    }

    .p-bizz .c-contact {
        padding-top: calc(80 * var(--u));
    }

    .p-bizz__other-body {
        padding: calc(61 * var(--u)) calc(25 * var(--u)) calc(45 * var(--u)) calc(21 * var(--u));
    }

    .p-bizz__other-ttl {
        font-size: calc(24 * var(--u));
        letter-spacing: 0;
        line-height: 1.2;
        margin-block: calc((23 - 24 * 1.2) / 2 * var(--u));
    }

    .p-bizz__other-list {
        margin-top: calc(39 * var(--u));
    }

    .p-bizz__other-link {
        column-gap: calc(16 * var(--u));
        padding: calc(14 * var(--u)) 0;
    }

    .p-bizz__other-num {
        width: calc(37 * var(--u));
        letter-spacing: 0;
    }

    .p-bizz__other-img {
        width: 100%;
    }

    .p-bizz__other-img picture {
        height: auto;
    }

    .p-bizz__other-img img {
        height: auto;
        aspect-ratio: 356 / 237;
    }
}


/* =============================================================
   事業領域 一覧（/our_business/）
   design : PC 1440px / SP 375px
   ============================================================= */
.p-bizzList {
    background-color: var(--color-light-gray);
}

/* ---------- FV ----------
   写真は INDEX バーの裏まで敷き（649px）、青幕は上の 575px だけに掛かる */
.p-bizzList__fv .c-fv__img {
    height: calc(575 * var(--u));
}

.p-bizzList__fv .c-fv__body {
    top: calc(249 * var(--u));
}

.p-bizzList__fv-ttl {
    width: max-content;
}

/* Figma は textCase = UPPER。入力は「Business」のままで大文字表示にする */
.p-bizzList__fv-ttl .c-secTtl__en {
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}

.p-bizzList__fv-ttl .c-secTtl__ja {
    column-gap: calc(12 * var(--u));
    color: var(--color-light-silver);
}

/* INDEX はこのページ内の 4 事業の行へのリンク */
.p-bizzList__fv .c-fv__index {
    padding: calc(25 * var(--u)) 0;
}

.p-bizzList__fv .c-fv__indexLink {
    line-height: calc(24 / 14);
}

/* ---------- 導入 ---------- */
.p-bizzList__intro {
    padding-top: calc(131 * var(--u));
}

.p-bizzList__copy {
    margin-top: calc(38 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    letter-spacing: 0.028em;   /* 1px */
    line-height: calc(66 / 36);
}

/* リッチテキストなので中身は <p>。段落の余白は行送りに任せる */
.p-bizzList__copy > :first-child { margin-top: 0; }
.p-bizzList__copy > :last-child  { margin-bottom: 0; }
.p-bizzList__copy p              { margin: 0; }

.p-bizzList__text {
    max-width: calc(763 * var(--u));
    margin-top: calc(35 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.p-bizzList__text > :first-child { margin-top: 0; }
.p-bizzList__text > :last-child  { margin-bottom: 0; }
.p-bizzList__text p              { margin: 0; }

/* ---------- 4 事業 ---------- */
/* 下の余白は c-contact 側の padding-top（158px）が持つので、ここでは付けない */
.p-bizzList__items {
    padding-top: calc(87 * var(--u));
}

.p-bizzList__list {
    display: flex;
    flex-direction: column;
    row-gap: calc(80 * var(--u));
}

/* 左（番号・英字）｜中（リード・本文・ボタン）｜右（写真）
   仕切り線は行の高さと合わないので、罫としてではなく擬似要素で置く */
.p-bizzList__item {
    position: relative;
    display: grid;
    /* INDEX のページ内リンクで飛んだとき、固定ヘッダーに隠れないようにする */
    scroll-margin-top: var(--l-header-h);
    grid-template-columns: calc(389 * var(--u)) 1fr calc(320 * var(--u));
    min-height: calc(311 * var(--u));
}

.p-bizzList__item::before,
.p-bizzList__item::after {
    content: '';
    position: absolute;
    top: calc(15 * var(--u));
    left: calc(389 * var(--u));
}

.p-bizzList__item::before {
    width: 1px;
    height: calc(296 * var(--u));
    background-color: var(--color-midium-gray);
}

/* 仕切りの上端だけ青く太い */
.p-bizzList__item::after {
    width: 2px;
    height: calc(27 * var(--u));
    background-color: var(--color-hamabo-blue);
}

.p-bizzList__head {
    display: grid;
    grid-template-columns: calc(28 * var(--u)) 1fr;
    column-gap: calc(32 * var(--u));
    align-items: center;
}

.p-bizzList__num {
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0833em;   /* 2px */
    line-height: 1;
}

.p-bizzList__en {
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(40 * var(--u));
    font-weight: 600;
    letter-spacing: 0.05em;   /* 2px */
    line-height: calc(60 / 40);
    text-transform: uppercase;
}

.p-bizzList__label {
    margin-left: calc(60 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    line-height: calc(25 / 15);
}

.p-bizzList__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-left: calc(49 * var(--u));
    padding-bottom: calc(6 * var(--u));
}

.p-bizzList__lead {
    margin-top: calc(6 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.042em;   /* 1px */
    line-height: calc(42 / 24);
}

.p-bizzList__lead > :first-child { margin-top: 0; }
.p-bizzList__lead > :last-child  { margin-bottom: 0; }
.p-bizzList__lead p              { margin: 0; }

.p-bizzList__desc {
    max-width: calc(371 * var(--u));
    margin-top: calc(15 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* 本文の長さが行ごとに違っても、ボタンは写真の下端に揃える */
.p-bizzList__btn {
    margin-top: auto;
}

.p-bizzList__img {
    /* グリッド項目は既定で行いっぱいに伸びる。角丸が写真の下端とずれるので止める */
    align-self: start;
    margin-top: calc(10 * var(--u));
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

/* <picture> も <img> も既定は inline。そのままだと下に行間ぶんの隙間ができる */
.p-bizzList__img picture,
.p-bizzList__img img {
    display: block;
}

.p-bizzList__img img {
    aspect-ratio: 320 / 295;
    object-fit: cover;
}

/* 行全体をクリックできるようにする（キーボード操作はボタンが受け持つ） */
.p-bizzList__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.p-bizzList__btn {
    position: relative;
    z-index: 2;
}

.p-bizzList__item:hover .p-bizzList__btn {
    background-color: var(--color-hamabo-blue);
    border-color: var(--color-hamabo-blue);
    color: #fff;
}

.p-bizzList__item:hover .p-bizzList__btn .c-btn__arrow {
    background-color: #fff;
}


/* ---------- 一覧：タブレット〜小さめの PC ---------- */
@media screen and (min-width: 769px) and (max-width: 1080px) {

    /* 3 段組が苦しくなるので、写真を本文の下に落として 2 段組にする */
    .p-bizzList__item {
        grid-template-columns: calc(300 * var(--u)) 1fr;
        min-height: 0;
    }

    .p-bizzList__item::before {
        left: calc(300 * var(--u));
    }

    .p-bizzList__item::after {
        left: calc(300 * var(--u));
    }

    .p-bizzList__body {
        padding-left: calc(40 * var(--u));
    }

    .p-bizzList__img {
        grid-column: 2;
        max-width: calc(500 * var(--u));
        margin-top: calc(30 * var(--u));
        margin-left: calc(40 * var(--u));
    }
}


/* ---------- 一覧：SP ---------- */
@media screen and (max-width: 768px) {

    /* FV は 296px。写真も青幕も同じ高さで、INDEX バーはその下に置く */
    .p-bizzList__fv .c-fv__img {
        height: calc(296 * var(--u));
        aspect-ratio: auto;
    }

    .p-bizzList__fv .c-fv__img img {
        height: 100%;
    }

    .p-bizzList__fv .c-fv__body {
        top: calc(140 * var(--u));
    }

    .p-bizzList__fv-ttl .c-secTtl__en {
        font-size: calc(36 * var(--u));
        letter-spacing: 0.0833em;   /* 3px */
    }

    .p-bizzList__fv-ttl .c-secTtl__ja {
        column-gap: calc(12 * var(--u));
        font-size: calc(14 * var(--u));
    }

    /* INDEX は 4 事業を縦に 1 列。矢印は右端に揃える。
       左の余白は 20px の内容幅ではなく 31px（Figma 実測） */
    .p-bizzList__fv .c-fv__index {
        padding: calc(27 * var(--u)) calc(31 * var(--u)) calc(35 * var(--u));
    }

    .p-bizzList__fv .c-fv__indexList {
        display: flex;
        flex-direction: column;
        row-gap: calc(9 * var(--u));
    }

    .p-bizzList__fv .c-fv__indexItem {
        width: 100%;
    }

    .p-bizzList__fv .c-fv__indexLink {
        justify-content: space-between;
        width: calc(199 * var(--u));
    }

    /* ---------- 導入 ---------- */
    .p-bizzList__intro {
        padding-top: calc(65 * var(--u));
    }

    .p-bizzList__copy {
        margin-top: calc(30 * var(--u));
        font-size: calc(22 * var(--u));
        letter-spacing: 0;
        line-height: calc(40 / 22);
    }

    .p-bizzList__text {
        margin-top: calc(18 * var(--u));
        letter-spacing: 0;
        font-weight: 400;
    }

    /* ---------- 4 事業 ---------- */
    .p-bizzList__items {
        padding-top: calc(48 * var(--u));
    }

    /* CONTACT との間隔（c-contact 既定の 42px ではなく 75px） */
    .p-bizzList .c-contact {
        padding-top: calc(75 * var(--u));
    }

    .p-bizzList__list {
        row-gap: calc(81 * var(--u));
    }

    /* バッジ（左）＋ 和名・リード（右）／ 写真 ／ 本文 ／ ボタン の 4 段 */
    .p-bizzList__item {
        grid-template-columns: calc(100 * var(--u)) 1fr;
        column-gap: calc(18 * var(--u));
        min-height: 0;
    }

    .p-bizzList__item::before,
    .p-bizzList__item::after {
        content: none;
    }

    /* 左側の入れ物はほどいて、中身を直接グリッドに並べる */
    .p-bizzList__side,
    .p-bizzList__body {
        display: contents;
    }

    /* 100 × 100 のバッジ。歯車のリングを 4 分割した図で、
       青くなる区画が 1 件目から 上 → 右 → 下 → 左 と回る。
       形が CSS で再現できないので Figma から書き出した画像を敷く。 */
    .p-bizzList__head {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: calc(5 * var(--u));
        width: calc(100 * var(--u));
        height: calc(100 * var(--u));
        background: url(../img/bizz/bizz_list_gear01.webp) no-repeat center / contain;
    }

    .p-bizzList__item:nth-child(4n + 2) .p-bizzList__head { background-image: url(../img/bizz/bizz_list_gear02.webp); }
    .p-bizzList__item:nth-child(4n + 3) .p-bizzList__head { background-image: url(../img/bizz/bizz_list_gear03.webp); }
    .p-bizzList__item:nth-child(4n)     .p-bizzList__head { background-image: url(../img/bizz/bizz_list_gear04.webp); }

    .p-bizzList__num {
        font-size: calc(22 * var(--u));
        letter-spacing: 0.0518em;   /* 1.14px */
        line-height: calc(13.6 / 22);
    }

    .p-bizzList__en {
        font-size: calc(10 * var(--u));
        letter-spacing: 0.114em;   /* 1.14px */
        line-height: calc(13.6 / 10);
    }

    /* 和名はバッジの上端、リードは下端に合わせる（Figma どおり） */
    .p-bizzList__label {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin-top: calc(4 * var(--u));
        margin-left: 0;
    }

    .p-bizzList__lead {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin-top: 0;
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(32 / 20);
    }

    .p-bizzList__img {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin-top: calc(30 * var(--u));
        margin-left: 0;
    }

    .p-bizzList__img img {
        aspect-ratio: 335 / 188;
    }

    .p-bizzList__desc {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
        margin-top: calc(20 * var(--u));
        letter-spacing: 0;
    }

    /* SP は「Read more」の小さいピル型 */
    .p-bizzList__btn {
        grid-column: 1 / -1;
        grid-row: 4;
        width: calc(136 * var(--u));
        height: calc(30 * var(--u));
        margin-top: calc(10 * var(--u));
        padding-inline: calc(12 * var(--u)) calc(15.5 * var(--u));   /* 矢印は右端から 16.5px（デザイン実測、枠線 1px 込み） */
        border-radius: calc(15 * var(--u));
        color: var(--color-midium-gray);
        font-family: var(--font-mon);
        font-size: calc(14 * var(--u));
        font-weight: 400;
    }

    /* 矢印は細い線の矢印（9 x 8）。recruit の Read more と同じ */
    .p-bizzList__btn .c-btn__arrow {
        width: calc(9 * var(--u));
        aspect-ratio: 9 / 8;
        -webkit-mask-image: url(../img/common/arrow_readmore.svg);
        mask-image: url(../img/common/arrow_readmore.svg);
    }

}

/* 英語版：本文横の「WHAT WE DO」が 1081〜1400px で 2 行に折れるので、少し小さくして 1 行に収める */
@media screen and (min-width: 1081px) and (max-width: 1400px) {
    html[lang^="en"] .p-bizz__intro-body .c-secHead__en {
        font-size: calc(50 * var(--u));
        white-space: nowrap;
    }
}

/* 英語版：協業製品の見出しは枠が 200px ほどと狭く、字送りがあると「Next-generation / electric / …」と 1 語ずつ折れるので詰める */
html[lang^="en"] .p-bizz__partner-ttl {
    letter-spacing: 0;
}

/* 英語版（Montserrat）：協業製品の見出しは 1081〜1339px で枠が 200px ほどになり、1 語ずつ折れるので少し小さくする */
@media screen and (min-width: 1081px) and (max-width: 1339px) {
    html[lang^="en"] .p-bizz__partner-ttl {
        font-size: calc(15 * var(--u));
    }
}