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

/* --- 共通設定：画像コンテナ --- */
/* 2枚〜7枚すべてに適用（PCではすべて完全横並び） */
.featureContents .image-container.image-col-7,
.featureContents .image-container.image-col-6,
.featureContents .image-container.image-col-5,
.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;
}

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

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

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

/* --- 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/20260612/tee1920.jpg") !important;
        background-position: center center;
        /* 1920*990 の比率（990 ÷ 1920 ＝ 51.56%） */
        padding-top: 51.56%; 
    } 
    /* パンくずリストの文字色を変更 */
    .crumbsList {
        color: #000;
    }
}

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

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

    /* ★6枚並び：SPでは3列のGrid（3個・3個の2行に自動配置） */
    .featureContents .image-container.image-col-6 {
        display: grid !important;
        grid-template-columns: repeat(3, calc((100% - 25px) / 7));
        justify-content: center;
        gap: 5px;
        padding: 0 10px;
    }
    .featureContents .image-container.image-col-6 .image-item {
        flex: none !important;
        width: 100%;
    }

    /* ★7枚並び：SPでは「上が4個、下が3個」の2行（両行とも綺麗に中央寄せ） */
    .featureContents .image-container.image-col-7 {
        display: grid !important;
        /* 8列の特殊グリッド（2マス＋1gapが1/7の画像幅と完全に一致する特殊計算） */
        grid-template-columns: repeat(8, calc((100% - 25px) / 14 - 2.5px)) !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 10px !important;
    }
    .featureContents .image-container.image-col-7 .image-item {
        flex: none !important;
        width: 100% !important;
        grid-column: span 2 !important; /* すべての画像を2マス分（等幅）に固定 */
    }
    /* 1枚目の位置を明示して自動配置のバグを防ぐ */
    .featureContents .image-container.image-col-7 .image-item:nth-child(1) {
        grid-column: 1 / span 2 !important;
    }
    /* 5個目の画像を「2列目」から開始させ、かつ2マス分の幅を確実に維持する */
    .featureContents .image-container.image-col-7 .image-item:nth-child(5) {
        grid-column: 2 / span 2 !important;
    }

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

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