@charset 'utf-8';

/* =============================================================
   人を知る（/people/ と /people/01/〜）
   design : PC 1440px / SP 375px

   - 一覧    … page-people.php        .p-people
   - 詳細    … single-people-item.php .p-person
   - スライダー … template-parts/people-slider.php .c-peopleSlider
                 TOP と詳細ページで共有する
   ============================================================= */


/* =============================================================
   一覧（/people/）
   ============================================================= */
.p-people {
    background-color: var(--color-light-gray);
}

/* ---------- FV ---------- */
/* INDEX バーがないので、写真は 540px ちょうど */
.p-people__fv .c-fv__img {
    height: calc(540 * var(--u));
}

/* 共通の c-fv は INDEX バーの裏まで写真を 649px 敷くが、このページはバーがない。
   649px のままだと写真が 1.2 倍に拡大されて人の位置がデザインとずれるため、枠の高さに合わせる
   （入稿画像はデザインのトリミング済み 5000×1875 ＝ 1440×540 と同じ比率） */
.p-people__fv .c-fv__img img {
    height: 100%;
}

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

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

.p-people__fv-ttl .c-secTtl__en {
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}

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

/* ---------- 一覧 ---------- */
/* 下の余白は c-contact 側が持つので、ここでは付けない */
.p-people__list {
    padding-top: calc(80 * var(--u));
}

/* 一覧の下に RECRUIT が入る。その手前の余白 */
.p-people__list {
    padding-bottom: calc(223 * var(--u));
}

/* デザインの一覧は内容幅（1200）より狭い 1128px の枠に収まっている */
.p-people__items {
    max-width: calc(1128 * var(--u));
    display: flex;
    flex-direction: column;
    row-gap: calc(80 * var(--u));
}

/* 縦書きの「PEOPLE #01」（左）＋ 白いカード（右）。
   縦書きの箱は文字幅ぶんだけにして、カードとの間を 51px 空ける */
.p-people__item {
    display: grid;
    grid-template-columns: calc(24 * var(--u)) 1fr;
    column-gap: calc(51 * var(--u));
}

.p-people__num {
    align-self: start;
    writing-mode: vertical-rl;
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0417em;   /* 1px */
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.p-people__card {
    position: relative;
    display: grid;
    grid-template-columns: calc(433 * var(--u)) 1fr;
    min-height: calc(356 * var(--u));
    overflow: hidden;
    border-radius: calc(10 * var(--u));
    background-color: #fff;
}

.p-people__img {
    display: block;
    /* ホバーで写真を拡大するので、はみ出したぶんを枠で切る */
    overflow: hidden;
    height: 100%;
}

.p-people__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 行数が 2 行でも 3 行でもカードの中で上下中央に置く（Figma どおり）。
   固定の上余白にすると 3 行のときだけ下にずれる */
.p-people__body {
    display: block;
    align-self: center;
    padding-inline: calc(68 * var(--u));
}

.p-people__copy {
    display: block;
    max-width: calc(425 * var(--u));   /* Figma は 422px。3px だけ余裕を持たせて折り返しを合わせる */
    color: var(--color-dark-gray);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0417em;   /* 1px */
    line-height: calc(42 / 24);
}

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

.p-people__name {
    display: block;
    margin-top: calc(33 * var(--u));
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(24 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0417em;   /* 1px */
    line-height: calc(36 / 24);
}

.p-people__dept {
    display: block;
    margin-top: calc(4 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: calc(24 / 14);
}

/* 丸矢印。ホバーで白い塗り円＋濃い矢印に反転する */
.p-people__arrow {
    position: absolute;
    right: calc(57 * var(--u));
    bottom: calc(40 * var(--u));
    width: calc(60 * var(--u));
    aspect-ratio: 1 / 1;
    /* 円は画像ではなく border で描く。画像の端に接した 1px の線は、表示倍率
       125% などで枠が小数ピクセルの位置に来ると左右だけ薄く欠けて見えるが、
       border はブラウザが画素に合わせて描くので上下左右とも同じ太さになる */
    border: 1px solid var(--color-midium-gray);
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s;
}

/* 矢印（長さ 22px・線 1.5px）はマスクにして色を CSS で変える */
.p-people__arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-midium-gray);
    -webkit-mask: url(../img/common/arrow_line_l.svg) no-repeat center / calc(24 * var(--u)) auto;
    mask: url(../img/common/arrow_line_l.svg) no-repeat center / calc(24 * var(--u)) auto;
    transition: background-color 0.3s;
}

/* カードが白いので、ホバーは青い塗り円＋白い矢印に反転させる */
.p-people__card:hover .p-people__arrow {
    border-color: var(--color-hamabo-blue);
    background-color: var(--color-hamabo-blue);
}

.p-people__card:hover .p-people__arrow::after {
    background-color: #fff;
}

/* ホバーでカード全体を薄くしない（common.css の a:hover { opacity: 0.7 } を打ち消す）。
   代わりに TOP の COMPANY PROFILE のカードと同じく、写真をゆっくりズームする */
.p-people__card:hover {
    opacity: 1;
}

.p-people__card:hover .p-people__img img {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {

    .p-people__card:hover .p-people__img img {
        transform: none;
    }
}

/* タッチ端末では :hover がタップ後も残り、戻ったときに写真が拡大したままになるので、
   SP ではズームしない（TOP の COMPANY PROFILE と同じ扱い） */
@media screen and (max-width: 768px) {

    .p-people__card:hover .p-people__img img {
        transform: none;
    }
}


/* =============================================================
   詳細（/people/01/）
   ============================================================= */
.p-person {
    background-color: var(--color-light-gray);
}

/* ---------- FV ----------
   上 540px だけ青く塗り、写真はそこからはみ出して下まで伸びる */
.p-person__fv {
    position: relative;
    overflow: hidden;
    margin-top: calc(-1 * var(--l-header-h));
    padding-bottom: calc(84 * var(--u));
}

.p-person__fv::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: calc(540 * var(--u));
    background-color: var(--color-hamabo-blue);
}

.p-person__bread {
    position: absolute;
    top: calc(96 * var(--u));
    right: max(20px, calc((100% - 1200px) / 2 - 88px));
    left: max(20px, calc((100% - 1200px) / 2 - 88px));
    z-index: 2;
}

/* 写真（左）＋ 名前と profile（右） */
.p-person__fv-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: calc(592 * var(--u)) 1fr;
    column-gap: calc(67 * var(--u));
    padding-top: calc(179 * var(--u));
}

/* 縦書きの「PEOPLE #01」。内容カラムより 69px 左に出す。
   .l-inner は左右の余白を含んだ幅なので、絶対配置の基準は画面端になる。
   そのため内容カラムの開始位置（--gut）から引く */
.p-person__side {
    position: absolute;
    top: calc(179 * var(--u));
    left: calc(var(--inner-pad) - 69 * var(--u));
    writing-mode: vertical-rl;
    color: var(--color-light-silver);
    font-family: var(--font-mon);
    font-size: calc(40 * var(--u));
    font-weight: 400;
    letter-spacing: 0.025em;   /* 1px */
    /* デザインの行送りは 23px。1（40px）だと縦書きの行の箱が横に広がり、
       左端はそのままで文字だけ約 9px 右へ寄って写真に近づいてしまう */
    line-height: calc(23 / 40);
    text-transform: uppercase;
    white-space: nowrap;
}

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

.p-person__fv-img img {
    display: block;
    width: 100%;
    aspect-ratio: 592 / 585;
    object-fit: cover;
}

/* 見出し・氏名・所属は高さ 308px の箱に下寄せで入れる。
   見出しが 2 行なら上に余りができ、3 行以上なら箱の上へはみ出して伸びる。
   こうすると行数が変わっても氏名（423px）と所属（463px）が動かず、
   青い帯（540px）からはみ出さない。 */
.p-person__fv-head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(308 * var(--u));
}

.p-person__copy {
    color: #fff;
    font-size: calc(36 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0278em;   /* 1px */
    line-height: calc(66 / 36);
}

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

.p-person__name {
    margin-top: calc(55 * var(--u));
    color: var(--color-light-silver);
    font-family: var(--font-mon);
    font-size: calc(36 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0278em;   /* 1px */
    line-height: 1;
}

.p-person__dept {
    margin-top: calc(4 * var(--u));
    color: var(--color-light-silver);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: calc(24 / 14);
}

/* ---------- profile ----------
   FV の右列の続き。青い帯より下に出るので文字は濃色になる */
.p-person__profile {
    margin-top: calc(89 * var(--u));
}

.p-person__profile-label {
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: calc(36 / 16);
}

.p-person__profile-text {
    max-width: calc(461 * var(--u));
    margin-top: calc(9 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: 2;
}

/* ---------- Q&A ---------- */
.p-person__q-head {
    display: grid;
    grid-template-columns: calc(78 * var(--u)) 1fr;
    /* デザインは「Q.1」と質問の箱を上端でそろえている（ベースラインぞろえだと
       質問が 6px 下がり、行も高くなって下線まで下がる） */
    align-items: start;
    padding-bottom: calc(13 * var(--u));   /* Q.1 の上余白 2px で行が 1px 高くなるぶん詰めて、下線をデザイン位置に */
    border-bottom: 1px solid var(--color-light-silver);
}

.p-person__q-num {
    margin-top: calc(2 * var(--u));   /* 字面の上端をデザインに合わせる（実測で 1px 上に出ていた） */
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(36 * var(--u));
    font-weight: 600;
    letter-spacing: 0.0278em;   /* 1px */
    line-height: calc(26 / 36);
}

.p-person__q-ttl {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: calc(26 / 16);
}

/* 見出し（左・青）と本文（右） */
.p-person__q-body {
    display: grid;
    grid-template-columns: calc(444 * var(--u)) calc(595 * var(--u));
    justify-content: space-between;
    margin-top: calc(40 * var(--u));
}

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

/* 改行を指定した 1 行が 444px 列にわずかに収まらない見出しだけ、列を文字幅に合わせて
   段落ちさせない（PHP が --leadFit を付ける）。2 カラムの PC のみ。
   右の本文列は必要なら縮め、間は最低 40px 空ける */
@media screen and (min-width: 1081px) {

    .p-person__q-body--leadFit {
        grid-template-columns: max-content minmax(0, calc(595 * var(--u)));
        column-gap: calc(40 * var(--u));
    }

    .p-person__q-body--leadFit .p-person__q-lead {
        white-space: nowrap;
    }
}

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

.p-person__q-text {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.p-person__q-img {
    max-width: calc(897 * var(--u));
    margin: calc(119 * var(--u)) auto 0;
    overflow: hidden;
    border-radius: calc(10 * var(--u));
}

/* 全幅で敷く写真は角丸なし。左下に「Bridging To The Future.」を重ねる */
.p-person__q-img--wide {
    position: relative;
    max-width: none;
    border-radius: 0;
}

/* 文字はフォントではなく画像（Figma のベクターを書き出したもの）。
   写真の幅に対する比率で置くので、画面幅が変わっても位置関係は保たれる */
.p-person__q-img--wide::after {
    content: '';
    position: absolute;
    left: 3.542%;             /* 51 / 1440 */
    bottom: 4.566%;           /* 31 / 679 */
    width: 76.181%;           /* 1097 / 1440 */
    aspect-ratio: 1097 / 86;
    background: url(../img/people/bridging_to_the_future.webp) no-repeat center / contain;
}

.p-person__q-img img {
    display: block;
    width: 100%;
    object-fit: cover;
}

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

/* ---------- 他のインタビューを見る ---------- */
.p-person__other {
    padding-top: calc(223 * var(--u));   /* 最終画像の下端から「other people」の字面まで 223.5px（デザイン実測） */
}

/* 見出しとの間隔は TOP（78px）より詰まる */
.p-person__other .c-peopleSlider__slider {
    margin-top: calc(67 * var(--u));
}

/* 前へ／次へ と同じ行に置く */
.p-person__other-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-23 * var(--u));
}

/* このページのボタンだけ、共通部品より内側の余白が広い
   （デザイン実測：矢印 22 / テキスト 59 / 右 22） */
.p-person__other-btn {
    width: calc(249 * var(--u));
    padding-left: calc(22 * var(--u));
    column-gap: calc(21 * var(--u));
}

/* 戻るボタンの下から RECRUIT までの余白 */
.p-person__other {
    padding-bottom: calc(209 * var(--u));
}


/* =============================================================
   インタビューのスライダー（TOP と詳細ページで共有）
   TOP の PEOPLE セクションで確認済みのレイアウトをそのまま使う。
   ============================================================= */
.c-peopleSlider {
    --people-card-w: calc(330 * var(--u));
    --people-gap: calc(16 * var(--u));
}

.c-peopleSlider__slider {
    overflow: hidden;
    margin-top: calc(78 * var(--u));
    /* l-inner と同じ左位置（＝見出しの左端）から始め、
       そこより左に流れたカードは見えないようクリップする */
    margin-left: calc((100% - min(100%, 1440 * var(--u))) / 2 + 120 * var(--u));
}

.c-peopleSlider__track {
    display: flex;
    column-gap: var(--people-gap);
    width: max-content;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-peopleSlider__track.is-noTransition {
    transition: none;
}

.c-peopleSlider__item {
    flex-shrink: 0;
    width: var(--people-card-w);
}

.c-peopleSlider__num {
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.071em;
    line-height: 1.64;
    text-transform: uppercase;
}

.c-peopleSlider__card {
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: calc(9 * var(--u));
    aspect-ratio: 330 / 450;
    border-radius: calc(10 * var(--u));
}

.c-peopleSlider__card:hover {
    opacity: 1;
}

.c-peopleSlider__img {
    display: block;
    width: 100%;
    height: 100%;
}

.c-peopleSlider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- マウスオーバーで出るテキスト --- */
.c-peopleSlider__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(30 * var(--u));
    background-color: rgba(0, 64, 149, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.c-peopleSlider__card:hover .c-peopleSlider__body,
.c-peopleSlider__card:focus-visible .c-peopleSlider__body {
    opacity: 1;
}

.c-peopleSlider__copy {
    display: block;
    font-size: calc(18 * var(--u));
    font-weight: 600;
    line-height: 1.7;
}

.c-peopleSlider__copy p { margin: 0; }

.c-peopleSlider__dept {
    display: block;
    margin-top: calc(22 * var(--u));
    color: var(--color-light-silver);
    font-size: calc(13 * var(--u));
    font-weight: 400;
    line-height: 1.6;
}

.c-peopleSlider__name {
    display: block;
    margin-top: calc(6 * var(--u));
    font-family: var(--font-mon);
    font-size: calc(20 * var(--u));
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.c-peopleSlider__arrow {
    position: absolute;
    right: calc(24 * var(--u));
    bottom: calc(26 * var(--u));
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    background-color: #fff;
    -webkit-mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
    mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

/* 前へ／次へ。スライダーと左端をそろえる */
.c-peopleSlider__nav {
    display: flex;
    column-gap: calc(20.5 * var(--u));
    margin-top: calc(38 * var(--u));
    margin-left: calc((100% - min(100%, 1440 * var(--u))) / 2 + 120 * var(--u));
}

.c-peopleSlider__navBtn {
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    padding: 0;
    border: 0;
    background-color: var(--color-midium-gray);
    transition: background-color 0.3s;
    -webkit-mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
    mask: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

.c-peopleSlider__navBtn--prev {
    transform: rotate(180deg);
}

.c-peopleSlider__navBtn:hover {
    background-color: var(--color-hamabo-blue);
}


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

    .p-people__card {
        grid-template-columns: calc(300 * var(--u)) 1fr;
    }

    .p-people__body {
        padding: calc(48 * var(--u)) calc(40 * var(--u)) calc(100 * var(--u));
    }

    /* ---------- 詳細 FV ----------
       写真 592px と 36px の見出しを横に並べると、1080px 以下では
       右の列が 300px を切って見出しが何行にも折れてしまう。
       SP と同じく 見出し → 写真 → profile の縦積みに切り替える。
       文字サイズは PC のままにして、レイアウトだけほどく。 */
    .p-person__fv {
        padding-bottom: calc(60 * var(--u));
    }

    .p-person__fv-inner {
        display: flex;
        flex-direction: column;
    }

    .p-person__fv-body,
    .p-person__fv-head {
        display: contents;
    }

    .p-person__copy    { order: 1; }
    .p-person__name    { order: 2; }
    .p-person__dept    { order: 3; }
    .p-person__fv-img  { order: 4; }
    .p-person__profile { order: 5; }

    /* 写真が画面幅いっぱいに伸びて巨大にならないよう頭打ちにする */
    .p-person__fv-img {
        max-width: calc(592 * var(--u));
        margin-top: calc(31 * var(--u));
    }

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

    .p-person__profile-text {
        max-width: none;
    }

    .p-person__q-body {
        grid-template-columns: 1fr;
        row-gap: calc(24 * var(--u));
    }
}


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

    /* ---------- 一覧 FV ---------- */
    .p-people__fv .c-fv__img {
        height: calc(296 * var(--u));
        aspect-ratio: auto;
    }

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

    /* line-height 1 のぶん文字が上に寄るので、6px 下げて視覚位置を合わせる */
    .p-people__fv .c-fv__body {
        top: calc(146 * var(--u));
    }

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

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

    /* ---------- 一覧 ---------- */
    .p-people__list {
        padding-top: calc(60 * var(--u));
    }

    .p-people__list {
        padding-bottom: calc(68 * var(--u));
    }

    .p-people__items {
        row-gap: calc(48 * var(--u));
    }

    /* 縦書きをやめ、番号はカードの上に置く */
    .p-people__item {
        display: block;
    }

    .p-people__num {
        writing-mode: horizontal-tb;
        font-size: calc(14 * var(--u));
        letter-spacing: 0;
        line-height: calc(23 / 14);
    }

    .p-people__card {
        grid-template-columns: calc(118 * var(--u)) 1fr;
        min-height: calc(175 * var(--u));
        margin-top: calc(7 * var(--u));
    }

    .p-people__body {
        align-self: start;
        padding: calc(12 * var(--u)) calc(17 * var(--u)) 0;
    }

    /* Figma は高さ 81px 固定 ＋ 縦位置センター（textAlignVertical = CENTER）。
       2 行でも 3 行でも枠の高さは変わらず、文字が上下中央に来る */
    .p-people__copy {
        display: flex;
        align-items: center;
        min-height: calc(81 * var(--u));
        font-size: calc(15 * var(--u));
        letter-spacing: 0;
        line-height: calc(25 / 15);
    }

    /* flex の子になるので、中の <p> を横いっぱいに広げておく */
    .p-people__copy > * {
        width: 100%;
    }

    .p-people__name {
        margin-top: calc(6 * var(--u));
        font-size: calc(16 * var(--u));
        letter-spacing: 0;
        line-height: calc(23 / 16);
    }

    .p-people__dept {
        margin-top: calc(4 * var(--u));
        font-size: calc(10 * var(--u));
        letter-spacing: 0;
        line-height: calc(18 / 10);
    }

    .p-people__arrow {
        display: none;
    }

    /* ---------- 詳細 FV ---------- */
    .p-person__fv {
        padding-bottom: calc(68 * var(--u));
    }

    .p-person__fv::before {
        height: calc(534 * var(--u));
    }

    .p-person__bread {
        top: calc(70 * var(--u));
        right: calc(20 * var(--u));
        left: calc(20 * var(--u));
    }

    /* 名前 → 写真 → profile の縦積み。
       PC では profile が右列の中にあるので、ほどいて順番を組み替える */
    .p-person__fv-inner {
        display: flex;
        flex-direction: column;
        padding-top: calc(153 * var(--u));
    }

    .p-person__side {
        display: none;
    }

    .p-person__fv-body,
    .p-person__fv-head {
        display: contents;
    }

    .p-person__copy    { order: 1; }
    .p-person__name    { order: 2; }
    .p-person__dept    { order: 3; }
    .p-person__fv-img  { order: 4; }
    .p-person__profile { order: 5; }

    .p-person__fv-img {
        margin-top: calc(60 * var(--u));
    }

    .p-person__fv-img img {
        aspect-ratio: 333 / 329;
    }

    .p-person__copy {
        font-size: calc(24 * var(--u));
        letter-spacing: 0;
        line-height: calc(42 / 24);
    }

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

    .p-person__dept {
        margin-top: calc(1 * var(--u));
        letter-spacing: 0;
    }

    /* ---------- profile ---------- */
    .p-person__profile {
        margin-top: calc(30 * var(--u));
    }

    .p-person__profile-text {
        max-width: none;
        margin-top: calc(3 * var(--u));
        letter-spacing: 0;
    }

    /* ---------- Q&A ---------- */
    .p-person__q-head {
        grid-template-columns: calc(55 * var(--u)) 1fr;
        padding-bottom: calc(20 * var(--u));
    }

    .p-person__q-num {
        margin-top: calc(2 * var(--u));
        font-size: calc(24 * var(--u));
        letter-spacing: 0;
        line-height: calc(26 / 24);   /* デザインの行送り 26px（PC の比率のままだと 17px になる） */
    }

    .p-person__q-ttl {
        letter-spacing: 0;
    }

    .p-person__q-body {
        grid-template-columns: 1fr;
        margin-top: calc(30 * var(--u));
    }

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

    .p-person__q-text {
        margin-top: calc(18 * var(--u));
        letter-spacing: 0;
    }

    /* SP は 3 枚とも画面幅より広く、左右にはみ出して切れる */
    .p-person__q {
        overflow: hidden;
    }

    .p-person__q-img--wide::after {
        left: 18.456%;        /* (20 + 78) / 531 */
        bottom: 6.159%;       /* 17 / 276 */
        width: 63.089%;       /* 335 / 531 */
    }

    /* 左右のはみ出しは固定の -78px ではなく、画面の中央に置いた結果として出す。
       幅は 450px 以上で 637px 止まりなので、固定値だと画面が広いとき左に寄ってしまう（375px では同じ -78px） */
    .p-person__q-img,
    .p-person__q-img--wide {
        width: calc(531 * var(--u));
        max-width: none;
        margin: calc(68 * var(--u)) calc((100% - 531 * var(--u)) / 2) 0;
        border-radius: calc(10 * var(--u));
    }

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

    /* ---------- 他のインタビュー ---------- */
    .p-person__other {
        padding-top: calc(73 * var(--u));   /* 最終画像の下端から「other people」の字面まで 73.5px（デザイン実測） */
    }

    /* 戻るボタンは左寄せ・幅 249px（Figma 実測） */
    .p-person__other-foot {
        justify-content: flex-start;
        margin-top: calc(44 * var(--u));
    }

    .p-person__other-btn {
        width: calc(249 * var(--u));
    }

    /* ---------- スライダー ----------
       SP は横スライドを解除して縦積み。写真（左）＋ 文字（右）。
       TOP の PEOPLE セクションで確認済みの組み方をそのまま使う */
    .c-peopleSlider__slider {
        overflow: visible;
        margin-top: calc(71 * var(--u));
        margin-left: 0;
        /* 左右とも l-inner と同じ余白にして、上の見出しと端をそろえる */
        padding: 0 var(--inner-pad);
    }

    .c-peopleSlider__track {
        display: block;
        width: auto;
        transform: none !important;
        transition: none;
    }

    .c-peopleSlider__item {
        width: auto;
    }

    /* SP はループ用のクローンを使わない */
    .c-peopleSlider__item--clone {
        display: none;
    }

    .c-peopleSlider__item + .c-peopleSlider__item {
        margin-top: calc(37.5 * var(--u));
    }

    .c-peopleSlider__num {
        color: var(--color-hamabo-blue);
        font-size: calc(14 * var(--u));
        letter-spacing: 0.07em;
        line-height: 1.64;
    }

    .c-peopleSlider__card {
        display: flex;
        align-items: center;
        column-gap: calc(28.5 * var(--u));
        overflow: visible;
        margin-top: calc(13 * var(--u));
        aspect-ratio: auto;
        border-radius: 0;
    }

    .c-peopleSlider__img {
        flex-shrink: 0;
        overflow: hidden;
        /* カード幅に対する比率で持たせ、画面幅に追従させる。
           40.15% は 375px 時の 134.5px / 335px と同率。
           固定 px だと 450px 以上で --u が 1.2 に頭打ちになり、
           画面が広がるほど画像だけ相対的に小さくなってしまう。 */
        width: 40.15%;
        aspect-ratio: 540 / 800;
        border-radius: calc(4 * var(--u));
    }

    /* SP は常時表示。並びは コピー → 名前 → 部署 */
    .c-peopleSlider__body {
        position: static;
        flex: 1;
        min-width: 0;
        padding: 0;
        background-color: transparent;
        color: var(--color-dark-gray);
        opacity: 1;
    }

    /* SP は PC 用の固定改行（<br>）を解除し、画面幅に応じて自然に折り返させる。
       word-break: auto-phrase は文節単位で改行位置を決めるため
       「もの／づくり」のような不自然な分割を避けられる。
       （未対応ブラウザでは通常の折り返しにフォールバックする） */
    .c-peopleSlider__copy br,
    .c-peopleSlider__dept br {
        display: none;
    }

    .c-peopleSlider__copy,
    .c-peopleSlider__dept {
        word-break: auto-phrase;
        text-wrap: balance;
    }

    .c-peopleSlider__copy {
        order: 1;
        color: var(--color-dark-gray);
        font-size: calc(15 * var(--u));
        line-height: 1.66;
    }

    .c-peopleSlider__name {
        order: 2;
        margin-top: calc(20 * var(--u));
        color: var(--color-hamabo-blue);
        font-size: calc(20 * var(--u));
        font-weight: 600;
    }

    .c-peopleSlider__dept {
        order: 3;
        margin-top: calc(3 * var(--u));
        color: var(--color-dark-gray);
        font-size: calc(12 * var(--u));
        line-height: 1.5;
    }

    .c-peopleSlider__arrow {
        display: none;
    }

    /* SP は矢印ボタン不要 */
    .c-peopleSlider__nav {
        display: none;
    }
}

/* =============================================================
   詳細 FV：SP のときの青い帯
   デザイン（SP）は青い帯の下端が写真の天地中央に来る（534px / 写真の中心 538.5px）。
   帯を固定の高さで塗ると、見出しの行数が増えて写真が下がったときに中心からずれるので、
   写真の枠から上へ塗り、下端を写真の高さのちょうど半分にする。
   枠の overflow: hidden だとこの塗りも切れるので、角丸は写真自体に付ける
   ============================================================= */
@media screen and (max-width: 768px) {

    .p-person__fv::before {
        display: none;
    }

    .p-person__fv-img {
        position: relative;
        overflow: visible;
    }

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

    /* 上と左右は FV の枠（overflow: hidden）で切れるので、大きめに伸ばしておく */
    .p-person__fv-img::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: -9999px;
        right: -9999px;
        bottom: 50%;
        left: -9999px;
        background-color: var(--color-hamabo-blue);
    }
}


/* 英語版：キャッチコピーは行の長さをそろえ、1 語だけの行を作らない
   （狭いカードで manufacturing のような長い語が 1 語で残るのを防ぐ） */
html[lang^="en"] :is(.p-people__copy, .c-peopleSlider__copy, .p-person__copy) {
    text-wrap-style: balance;
}

/* 英語版（Montserrat）：SP の other people のカード（幅 172px）で見出しが 4 行にならないよう少し小さくする */
@media screen and (max-width: 768px) {
    html[lang^="en"] .c-peopleSlider__copy {
        font-size: calc(14 * var(--u));
    }
}