@charset "utf-8";.top_page_font_color{color: #FFFFFF;}/* 全体背景 */
.featureContents {
    background-color: #f5f5f5;
}

/* --- 共通設定：画像コンテナ --- */
/* 2枚、3枚、4枚すべてに適用 */
.featureContents .image-container.image-col-4,
.featureContents .image-container.image-col-3,
.featureContents .image-container.image-col-2 {
    display: flex !important;
    justify-content: center; /* 中央に寄せる */
    gap: 10px;               /* 画像同士の隙間 */
    width: 100%;
    max-width: 1030px;
    margin: 20px auto;
    padding: 0;
}

/* 共通のアイテム設定 */
.featureContents .image-container .image-item {
    min-width: 0;
}

/* 画像自体の表示設定 */
.featureContents .image-container .image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- ★サイズ固定ロジック：すべて4枚並び時のサイズに合わせる --- */

/* 4枚並び：そのまま4分割 */
.featureContents .image-container.image-col-4 .image-item {
    flex: 1;
}

/* 3枚・2枚並び：4枚並びの時と同じ幅に強制固定 */
.featureContents .image-container.image-col-3 .image-item,
.featureContents .image-container.image-col-2 .image-item {
    /* (全体の100% - 隙間10px×3箇所) / 4枚分 */
    flex: 0 0 calc((100% - 30px) / 4); 
}

/* --- KVバナー：PC・スマホ共通の土台設定 --- */
.featureContents .feature-detail2 .feature-kv-container {
    background-repeat: no-repeat;
    background-size: 100%; /* バナーを横幅いっぱいに綺麗に収める設定 */
    width: 100%;
    height: 0;
}

/* --- PC用：その他 --- */
@media (min-width: 751px) {
    .featureContents .feature-detail2 .feature-kv-container {
        /* ★ここにPC用バナー（1920*990）の画像パスを入れてください */
        background-image: url("/photo/page/20260522/HALFSHIRT1920.jpg") !important;
        background-position: center center;
        /* 1920*990 の比率（990 ÷ 1920 ＝ 51.56%） */
        padding-top: 51.56%; 
    } 
    /* パンくずリストの文字色を変更 */
    .crumbsList {
        color: #000;
    }
}

/* --- スマホ用：レスポンシブ --- */
@media (max-width: 750px) {
    /* 全体の隙間を調整 */
    .featureContents .image-container.image-col-4,
    .featureContents .image-container.image-col-3,
    .featureContents .image-container.image-col-2 {
        gap: 5px;
        padding: 0 10px; 
    }

    /* スマホでも「4枚並び」のサイズに合わせる */
    .featureContents .image-container.image-col-3 .image-item,
    .featureContents .image-container.image-col-2 .image-item {
        /* (全体の100% - 隙間5px×3箇所) / 4枚分 */
        flex: 0 0 calc((100% - 15px) / 4);
    }

    /* スマホ用：KVバナー画像と位置の変更 */
    .featureContents .feature-detail2 .feature-kv-container {
        /* ★ここにスマホ用バナー（1000*1000）の画像パスを入れてください */
        background-image: url("/photo/page/20260522/HALFSHIRT1000.jpg") !important;
        background-position: center center;
        /* 1000*1000 の比率（真四角なので 100%） */
        padding-top: 100%; 
    }  

    /* スマホ用：iframeの幅を100%に */
    .featureContents .feature-detail2 .feature-message-section iframe {
        width: 100%;
    }
}