@charset "UTF-8";
/*! Writen  by SCSS */

/* 1. スライダー全体の共通設定 */
.sec_modelhouse .k-main-container, 
.sec_modelhouse .k-thumb-container {
    overflow: hidden;
    position: relative;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* メインとサムネイルの隙間 */
.sec_modelhouse .k-main-container { 
    margin: 0 auto !important; /* 中央寄せ */
    position: relative;        /* 矢印の基準点にする */
    margin-bottom: 20px !important; 
}

/* 2. サムネイル全体の横幅設定 */
.sec_modelhouse .k-thumb-container {
    /* メインと同じ width に揃えるのがコツです */
    width: 100% !important; 
    height: auto !important;
    /* もしPCで少し小さく見せたいなら、中身のスライドの padding で調整します */
    padding: 0 7.5%; 
    box-sizing: border-box; /* パディングを含めた計算にする */
}

@media screen and (max-width: 768px) {
    .sec_modelhouse .k-thumb-container {
        width: 90% !important; 
        padding: 0 2.5%; /* スマホではパディングを減らして横幅を確保 */
    }
}

/* --- ここから追加：透明な箱の膨らみを阻止する --- */
.sec_modelhouse .k-thumb-container .swiper-wrapper {
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important; /* 上詰めに固定 */
}

/* --- 3. サムネイルの「形」を固定する設定（ここを修正） --- */
.sec_modelhouse .k-thumb-container .swiper-slide {
    width: 100%; 
    aspect-ratio: 3 / 2 !important; 
    height: auto !important; 
    position: relative;
    cursor: pointer;
    overflow: hidden;
    /* 追加：スライド自体が変な余白を持つのを防ぐ */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. 画像：枠の形に合わせて綺麗に収める */
.sec_modelhouse .k-thumb-container .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 比率を保ったまま枠を埋める */
    display: block !important;
}

/* 黒いマスク */
.sec_modelhouse .k-thumb-container .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    transition: 0.3s;
    z-index: 5;
    pointer-events: none; /* ★これを追加！マスクを無視してクリックを通す */
}
.sec_modelhouse .k-thumb-container .swiper-slide-thumb-active::after {
    background: rgba(0,0,0,0);
}

/* 矢印のデザイン */
.sec_modelhouse .k-main-container .swiper-button-next::after,
.sec_modelhouse .k-main-container .swiper-button-prev::after {
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
}

#modelhouse p.caption.mt4 {
    margin-top: 20px !important;
    font-size: 10px;
}

@media screen and (max-width: 768px) {
    #modelhouse p.caption.mt4 {
        font-size: 7px;
        padding-left: 0 !important;
    }
}