/* スライドエリア全体の上下余白 */
.sec_plan {
    padding-bottom: clamp(40px, 5%, 60px);
}

/* 間取り切替ボタン（サムネイル） */
.slide_thumb {
    max-width: 900px !important;
    width: calc(100% - 40px) !important;
    margin: clamp(40px, 5.84%, 70px) auto 30px !important;
}
@media screen and (max-width: 480px) {
    .slide_thumb {
        margin: 30px auto 20px !important;
    }
}

.slide_thumb .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* ★ここを追加（1個でも複数個でも中央寄せにする指定） */
    align-items: flex-start !important;
    gap: clamp(10px, 1.67vw, 15px) 1.88% !important;
    transform: none !important;
}

.slide_thumb .swiper-slide {
    max-width: 212px !important;
    width: 23.56% !important;
    border-radius: 5px !important;
    background: rgba(159, 160, 160, 0.5) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform: none !important;
    position: static !important;
    margin: 0 !important;
    opacity: 1 !important;
    transition: background 0.3s ease-in-out !important;
}
@media screen and (max-width: 480px) {
    .slide_thumb .swiper-slide {
        width: 32% !important;
    }
}

.slide_thumb .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    pointer-events: none !important;
}

/* 選択中およびホバー時の背景色 */
.slide_thumb .swiper-slide.swiper-slide-thumb-active,
.slide_thumb .swiper-slide:hover {
    background: rgba(97, 84, 48, 0.5) !important;
}


/* ===================================
   メイン図面スライダー（下部画像）の幅指定
   =================================== */
.plan_slide_outer {
    position: relative;
}

/* ★図面スライダーの枠幅を正しく制御し、横に溢れ出ないように固定 */
.plan_slide {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ★枠外の画像（2枚目以降）を隠す指定 */
}

.plan_slide .swiper-slide {
    width: 100% !important; /* ★1枚だけをぴったり画面枠に収める */
    box-sizing: border-box;
}

.plan_slide .slide_in {
    max-width: 880px;
    width: 84.62%;
    margin-inline: auto;
}
@media screen and (max-width: 480px) {
    .plan_slide .slide_in {
        width: 100%;
    }
}

/* 左右矢印ボタン */
.plan_slide_outer .plan_arrow {
    opacity: 1;
    width: 4.24%;
    height: auto;
    line-height: 1;
    margin-top: 0;
    transition: opacity 0.3s ease-in-out;
}
.plan_slide_outer .plan_arrow::after {
    content: none;
}
.plan_slide_outer .plan_arrow.arrow_prev {
    left: 1.93%;
}
.plan_slide_outer .plan_arrow.arrow_next {
    right: 1.93%;
}
.plan_slide_outer .plan_arrow img {
    width: 100%;
}