@charset "utf-8";.top_page_font_color{color: #FFFFFF;}/* ===============================
    KV（修正版）
=============================== */
@media (min-width: 751px) {
    .featureContents .feature-detail2 .feature-kv-container {
        background-image: url(/photo/page/20220421/7sleeve12002.jpg)!important;
        background-repeat: no-repeat;
        /* ↓ここを contain に変更 */
        background-size: contain; 
        background-position: center center;
        /* ↓【重要】画像の横縦比を指定（例：横1200px 縦727pxの場合） */
        width: 100%;
        aspect-ratio: 1200 / 727; 
        height: auto; /* 固定高さがあれば解除する */
    }
}

@media (max-width: 750px) {
    .featureContents .feature-detail2 .feature-kv-container {
        background-image: url(/photo/page/20220421/7sleeve1000.jpg)!important;
        background-repeat: no-repeat;
        /* ↓ここを contain に変更 */
        background-size: contain;
        background-position: center center; /* SPも中央合わせがおすすめ */
        /* ↓【重要】SP用画像の横縦比を指定（例：横1000px 縦1000pxの場合） */
        width: 100%;
        aspect-ratio: 1000 / 1000;
        height: auto; /* 固定高さがあれば解除する */
    }
}

/* ===============================
   画像グリッド共通
=============================== */
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 20pxから10pxに詰めました */
}

.image-container .image-item {
    display: block;
    margin-bottom: 0; /* 文字下の余白対策：明示的に0に */
}

.image-container .image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===============================
   PCカラム指定
=============================== */

/* 2カラム（サイズは3カラムと同じ） */
.image-col-2 .image-item {
    /* gapが10pxになったので計算式を微調整 */
    width: calc((100% - 20px) / 3);
}

/* 3カラム */
.image-col-3 .image-item {
    width: calc((100% - 20px) / 3);
}

/* 7カラム */
.image-col-7 .image-item {
    width: calc((100% - 60px) / 7);
}

/* ===============================
    SP対応（750px以下）
=============================== */
@media (max-width: 750px) {
    .image-container {
        gap: 5px; /* SPは余白5pxに調整 */
    }

    /* 3カラム：SPでも3つ並びを維持 */
    .image-col-3 .image-item {
        width: calc((100% - 10px) / 3);
    }

    /* 7カラム：SPでは4枚並び（4つ・3つの2行）にする */
    .image-col-7 .image-item {
        width: calc((100% - 15px) / 4);
    }

    /* 2カラム：SPでは2つ並びにする（もし必要であれば） */
    .image-col-2 .image-item {
        width: calc((100% - 5px) / 2);
    }
}