/* ========================================================
   トップページ修正：PEOPLEセクション（3つの修正のうちの1つ目）
   ・PC版：2カラム（2x2グリッド）へのレイアウト変更
   ・SP版：スライダー内での画像・キャッチコピー・ラベル幅の最適化
   ======================================================== */

/* SP版（766px以下）： キャッチコピーの幅とはみ出し修正など */
@media screen and (max-width: 766px) {
    #sandbox-people-grid .index__people__interview__item__image {
        width: 100% !important;
        /* absolute計算の基準となる画像の高さを元CSSの推察値（208）に固定 */
        height: calc(100vw / 375 * 208) !important;
        object-fit: cover !important;
    }

    #sandbox-people-grid .index__people__interview__item__catch {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        /* absoluteでプロフBOXが浮いているため、画像の下に少し余白をとる */
        margin-top: calc(100vw / 375 * 20) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
        font-size: calc(100vw / 375 * 14) !important;
        line-height: calc(100vw / 375 * 22) !important;
        color: #333333 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #sandbox-people-grid .index__people__interview__item__profile {
        /* ご提示いただいたもとのSP用CSSを完全再現 */
        position: absolute !important;
        left: calc(100vw / 375 * 0) !important;
        top: calc(100vw / 375 * (208 - 31)) !important;
        height: calc(100vw / 375 * 32) !important;
        padding-right: calc(100vw / 375 * 32) !important;
        font-size: calc(100vw / 375 * 13) !important;
        line-height: calc(100vw / 375 * 28) !important;
        padding-left: calc(100vw / 375 * 12) !important;
        background-color: transparent !important;
        background-image: url("../image/index/interview-red-sp.png") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        bottom: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

/* PC版（767px以上）： 元のデザインを保ったまま2カラム（2x2=4つ）に整列させる */
@media screen and (min-width: 767px) {
    #sandbox-people-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: calc(100vw / 1280 * 40) 0 !important;
        width: 100% !important;
        max-width: none !important;
        /* vw計算でシームレスに拡大・縮小させるため固定幅を解除 */
        margin: calc(100vw / 1280 * 40) auto 0 !important;
        padding-bottom: calc(100vw / 1280 * 50) !important;
        position: relative !important;
    }

    #sandbox-people-grid .index__people__interview__item {
        /* 横幅を半分弱にして2列化（例: 親の幅からgapを引いた半分） */
        width: 48% !important;
        position: relative !important;
        /* absoluteは無効化し、コンテナ基準で子要素を絶対配置できるようにする */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        display: block !important;
        clear: none !important;
    }

    #sandbox-people-grid .index__people__interview__item__image {
        width: 100% !important;
        /* aspect-ratio: 16/10 相当になるようにvwで高さを計算（widthが全体の約48%と仮定し、画面幅全体の30%の高さとする） */
        height: calc(100vw / 1280 * 384) !important;
        object-fit: cover !important;
    }

    /* SP側と同じようにvwのcalc計算で背景画像・余白・位置を設定する */
    #sandbox-people-grid .index__people__interview__item__profile {
        position: absolute !important;
        left: calc(100vw / 1280 * -2) !important;
        /* top は (画像の高さ - プロフィールラベルの高さ + めり込ませ幅) */
        top: calc(100vw / 1280 * (384 - 40)) !important;
        bottom: auto !important;
        height: calc(100vw / 1280 * 42) !important;
        padding-right: calc(100vw / 1280 * 40) !important;
        font-size: calc(100vw / 1280 * 16) !important;
        line-height: calc(100vw / 1280 * 38) !important;
        padding-left: calc(100vw / 1280 * 16) !important;
        margin: 0 !important;
        background-color: transparent !important;
        /* PC用赤い背景画像を使う（もし白に変えたいなら後ほど変更可能） */
        background-image: url("../image/index/interview-red-pc.png") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        z-index: 10 !important;
    }

    #sandbox-people-grid .index__people__interview__item__catch {
        display: block !important;
        /* absoluteで浮いている分、キャッチコピーが上に詰まるのでマージンで押し下げる */
        margin-top: calc(100vw / 1280 * 15) !important;
        font-size: calc(100vw / 1280 * 16) !important;
        line-height: calc(100vw / 1280 * 25) !important;
    }

    /* VIEW MOREボタンの中央寄せ（PC版のみ） */
    #sandbox-people-button {
        position: relative !important;
        /* unsetにするとz-indexが効かなくなり背景の下に潜り込みます！ */
        z-index: 100 !important;
        /* 背景の装飾図形より手前に出す */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 40px !important;
        /* グリッドとの余白 */
    }

    /* 4件並んで縦に長くなった分、下のセクションにめり込まないように高さを自動調整 */
    .index__people {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 50px !important;
        overflow: visible !important;
    }

    .index__project {
        margin-top: calc(100vw / 1280 * 250) !important;
        position: relative !important;
        z-index: 5 !important;
    }

    #sandbox-people-button .index__people__more__button {
        position: relative !important;
        top: inherit !important;
        right: inherit !important;
    }
}

/* ========================================================
   下層ページ修正：PEOPLE一覧セクション（3つの修正のうちの2つ目）
   対象ファイル：page-people_sandbox.php
   ・PC版：3カラムへのレイアウト変更（フレックス/グリッド等）
   ・SP版：余白や表示崩れの最適化（必要に応じて）
   ======================================================== */

/* キービジュアルの余白を0にリセット */
.project__key-visual,
.workstyle__key-visual,
.people__key-visual,
.sales__key-visual,
.consultant__key-visual,
.engineer__key-visual,
.sustainability__key-visual {
    margin: 0 !important;
}

/* 元の背景画像の右側にできる隙間を埋め、赤帯を右端までシームレスに伸ばす(PC用) */
@media screen and (min-width: 767px) {
    .people__key-visual {
        background-color: #F8F8F8 !important;
        /* 元の背景色をキープ */

        /* 2つの背景を重ねます。
           手前：元の斜め画像の赤いヘッダー画像
           奥：右端まで伸ばすための赤い帯（グラデーションを利用したベタ塗り）
        */
        background-image:
            url("../image/common/header-red-pc.png"),
            linear-gradient(to right, #D10B31, #D10B31) !important;

        /* 手前の画像は元通りのサイズ(1058)、奥の帯は幅100%・高さ86の赤帯にします */
        background-size:
            calc(100vw / 1280 * 1058) calc(100vw / 1280 * 531),
            100% calc(100vw / 1280 * 86) !important;

        /* どちらも左下・右下に配置 */
        background-position:
            left bottom,
            right bottom !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }
}

/* SP版（766px以下）： 下層ページPEOPLE一覧向け */
@media screen and (max-width: 766px) {
    .people__key-visual {
        background-color: #F8F8F8 !important;
        /* 元の背景色をキープ */

        /* SP画像と赤帯グラデーションを重ねる */
        background-image:
            url("../image/common/header-red-sp.png"),
            linear-gradient(to right, #D10B31, #D10B31) !important;

        /* SP版の全体高さ(292) - メイン高さ(254) = 下部の隙間(38) */
        /* 手前の画像サイズは元々のmaster.cssの指定を引き継ぎ、奥の帯は高さ38とします */
        background-size:
            calc(100vw / 1280 * 1058) calc(100vw / 1280 * 531),
            100% calc(100vw / 375 * 38) !important;

        background-position:
            left bottom,
            right bottom !important;

        background-repeat:
            no-repeat,
            no-repeat !important;
    }

    /* 新設したVIEW MOREボタンのスタイル（SP用） - 今回の指定でPCのみとするため非表示 */
    .sandbox-people-more-trigger {
        display: none !important;
    }

    .people__interview {
        padding-bottom: 50px;
    }

}

/* PC版（767px以上）： 下層ページPEOPLE一覧向け（3カラム等） */
@media screen and (min-width: 767px) {

    /* 3カラムグリッドレイアウト */
    #sandbox-people-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: calc(100vw / 1280 * 40) !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-bottom: 50px !important;
    }

    #sandbox-people-list .people__interview__interview__item {
        width: 100% !important;
        margin: 0 !important;
        position: relative !important;
    }

    .people__message {
        margin-top: 100px !important;
    }

    /* 新設したVIEW MOREボタンのスタイル（PC用） */
    .sandbox-people-more-trigger {
        display: block !important;
        width: fit-content !important;
        margin: calc(100vw / 1280 * 40) auto 0 !important;
        position: relative !important;
        z-index: 100 !important;
    }

    .sandbox-people-more-image {
        width: calc(100vw / 1280 * 110) !important;
        height: auto !important;
    }

    /* 9件目以降を隠すクラス（展開ボタンがあるPC版のみ適用） */
    .sandbox-hidden-item {
        display: none !important;
    }

    .people__interview {
        padding-bottom: 50px;
    }
}