.slider-section {
    padding: 60px 20px 150px;
    margin-bottom: 40px;
}

/* ===== スライダーコンテナ共通スタイル ===== */
[class^="slider-container-"] {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

/* ===== スライダーラッパー共通 ===== */
[class^="slider-wrapper-"] {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    gap: 20px;
    /*overflow: hidden;*/
}

/* ===== スライド共通スタイル ===== */
[class^="slide-10"],
[class^="slide-11"],
[class^="slide-12"],
[class^="slide-13"],
[class^="slide-14"],
[class^="slide-15"] {
    position: absolute;
    top: 0;
    width: calc(50% - 10px);
    height: auto;
    opacity: 0;
    /*visibility: hidden;*/
    border-radius: 10px;
    /* transition を削除 - GSAPで制御 */
    display: flex;
    flex-direction: column;
}

/* 背景画像用の疑似要素 */
/*[class^="slide-10"]::before,
[class^="slide-11"]::before,
[class^="slide-12"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 250px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
    flex-shrink: 0;
    background-image: var(--bg-image);
    aspect-ratio:960/640; 
}*/
/*
[class^="slide-10"]::before,
[class^="slide-11"]::before,
[class^="slide-12"]::before,
[class^="slide-13"]::before,
[class^="slide-14"]::before,
[class^="slide-15"]::before {
    background-image: var(--bg-image);
}*/

/* アクティブスライド（左側） */
[class^="slide-10"].active,
[class^="slide-11"].active,
[class^="slide-12"].active,
[class^="slide-13"].active,
[class^="slide-14"].active,
[class^="slide-15"].active {
    left: 0;
    z-index: 2;
}

/* 次のスライド（右側） - PC用 */
[class^="slide-10"].next,
[class^="slide-11"].next,
[class^="slide-12"].next,
[class^="slide-13"].next,
[class^="slide-14"].next,
[class^="slide-15"].next {
    left: calc(50% + 10px);
    z-index: 1;
}

/* ===== 背景画像設定（各スライド個別） ===== */
/* スライダー10 */
/*.slide-10-1::before { background-image: url("../img/index06_M-January.jpg"); }
.slide-10-2::before { background-image: url("../img/index48_M-waraku.jpg"); }
.slide-10-3::before { background-image: url("../img/index03_M.jpg"); }
.slide-10-4::before { background-image: url("../img/index19_M-course.jpg"); }*/

/* スライダー11 */
/* 動的に追加されるスライドにも対応 */
/* 既存の個別指定は削除してOK（念のため残してもOK） */
/*.slide-11-1::before,
.slide-11-2::before,
.slide-11-3::before,
.slide-11-4::before,
.slide-11-5::before,
.slide-11-6::before,
.slide-11-7::before,
.slide-11-8::before,
.slide-11-9::before,
.slide-11-10::before {
    background-image: var(--bg-image);
}*/

/* スライダー12 */
/*.slide-12-1::before { background-image: url("../img/index01_M.jpg"); }
.slide-12-2::before { background-image: url("../img/index16_M-entrance.jpg"); }
.slide-12-3::before { background-image: url("../img/index29_M-garden.jpg"); }
.slide-12-4::before { background-image: url("../img/index10_M-room.jpg"); }
.slide-12-5::before { background-image: url("../img/index11_M-room.jpg"); }
.slide-12-6::before { background-image: url("../img/index12_M-room.jpg"); }
.slide-12-7::before { background-image: url("../img/index13_M-room.jpg"); }
.slide-12-8::before { background-image: url("../img/index14_M-room.jpg"); }
.slide-12-9::before { background-image: url("../img/index15_M-room.jpg"); }
.slide-12-10::before { background-image: url("../img/index32_M-room.jpg"); }*/

/* スライダー13 */
.slide-13-1::before { background-image: url("../img/index100_M.jpg"); }
.slide-13-2::before { background-image: url("../img/index100_M.jpg"); }
.slide-13-3::before { background-image: url("../img/index100_M.jpg"); }

/* スライダー14 */
.slide-14-1::before { background-image: url("../img/index100_M.jpg"); }
.slide-14-2::before { background-image: url("../img/index100_M.jpg"); }
.slide-14-3::before { background-image: url("../img/index100_M.jpg"); }

/* スライダー15 */
.slide-15-1::before { background-image: url("../img/index100_M.jpg"); }
.slide-15-2::before { background-image: url("../img/index100_M.jpg"); }
.slide-15-3::before { background-image: url("../img/index100_M.jpg"); }

/* ===== タイトルスライド共通（画像の下に配置） ===== */
.title-slide-10,
.title-slide-11,
.title-slide-12,
.title-slide-13,
.title-slide-14,
.title-slide-15 {
    position: relative;
    width: 100%;
    padding: 20px 10px;
    text-align: left;
    z-index: 5;
    box-sizing: border-box;
}
.title-slide-10 img,
.title-slide-11 img,
.title-slide-12 img,
.title-slide-13 img,
.title-slide-14 img,
.title-slide-15 img
{border-radius: 25px;padding-bottom:10px;height:auto;}
/* ===== 矢印ボタン共通 ===== */
.thumb-arrow-10,
.thumb-arrow-11,
.thumb-arrow-12,
.thumb-arrow-13,
.thumb-arrow-14,
.thumb-arrow-15 {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 700%;
    transform: translate(-50%, 700%);
    display: flex;
    gap: 15px;
    width: auto;
    padding: 0;
    margin: 0;
}

.prev-10, .next-10,
.prev-11, .next-11,
.prev-12, .next-12,
.prev-13, .next-13,
.prev-14, .next-14,
.prev-15, .next-15 {
    background: transparent;
    color: rgba(0, 0, 0, 1.0);
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 1.0);
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.prev-10:hover, .next-10:hover,
.prev-11:hover, .next-11:hover,
.prev-12:hover, .next-12:hover,
.prev-13:hover, .next-13:hover,
.prev-14:hover, .next-14:hover,
.prev-15:hover, .next-15:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.prev-10:active, .next-10:active,
.prev-11:active, .next-11:active,
.prev-12:active, .next-12:active,
.prev-13:active, .next-13:active,
.prev-14:active, .next-14:active,
.prev-15:active, .next-15:active {
    transform: scale(0.95);
}

/* ===== タブレット用スタイル ===== */
@media screen and (max-width: 1024px) {
    [class^="slide-10"],
    [class^="slide-11"],
    [class^="slide-12"],
    [class^="slide-13"],
    [class^="slide-14"],
    [class^="slide-15"] {
        width: calc(50% - 10px);
    }

    [class^="slide-10"]::before,
    [class^="slide-11"]::before,
    [class^="slide-12"]::before,
    [class^="slide-13"]::before,
    [class^="slide-14"]::before,
    [class^="slide-15"]::before {
        height:auto;
    }

    [class^="slider-wrapper-"] {
        height:auto;
    }
    /* 背景画像（::before）にのみズームを適用 */
    /*[class^="slide-10"]::before,
    [class^="slide-11"]::before,
    [class^="slide-12"]::before,
    [class^="slide-13"]::before,
    [class^="slide-14"]::before,
    [class^="slide-15"]::before {
        transform: scale(var(--zoom-scale)) translate(calc(var(--zoom-x) / var(--zoom-scale)), calc(var(--zoom-y) / var(--zoom-scale)));
        transform-origin: center center;
        will-change: transform;
        transition: var(--transition);
    }*/
    
    /* 画像タッチエリア（::beforeの位置に重ねる） */
    .image-touch-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; /* ::beforeと同じ高さ */
        z-index: 10;
        touch-action: none;
    }
    
    /* タイトルエリアは通常通り */
    .title-slide-10,
    .title-slide-11,
    .title-slide-12,
    .title-slide-13,
    .title-slide-14,
    .title-slide-15 {
        position: relative;
        z-index: 5;
        pointer-events: auto;
        touch-action: auto;
    }
.title-slide-10 img,
.title-slide-11 img,
.title-slide-12 img,
.title-slide-13 img,
.title-slide-14 img,
.title-slide-15 img
{border-radius: 25px;padding-bottom:10px;height:auto;}
    /* ズーム中のスタイル */
    [class^="slide-10"].zooming,
    [class^="slide-11"].zooming,
    [class^="slide-12"].zooming,
    [class^="slide-13"].zooming,
    [class^="slide-14"].zooming,
    [class^="slide-15"].zooming {
        user-select: none;
        -webkit-user-select: none;
    }
    
    [class^="slide-10"].zooming .image-touch-area,
    [class^="slide-11"].zooming .image-touch-area,
    [class^="slide-12"].zooming .image-touch-area,
    [class^="slide-13"].zooming .image-touch-area,
    [class^="slide-14"].zooming .image-touch-area,
    [class^="slide-15"].zooming .image-touch-area {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }
    
    /* スライドのオーバーフロー制御 */
    [class^="slide-10"],
    [class^="slide-11"],
    [class^="slide-12"],
    [class^="slide-13"],
    [class^="slide-14"],
    [class^="slide-15"] {
        /*overflow: hidden;*/
    }
.thumb-arrow-10,
.thumb-arrow-11,
.thumb-arrow-12,
.thumb-arrow-13,
.thumb-arrow-14,
.thumb-arrow-15 {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 700%;
    transform: translate(-50%, 700%);
    display: flex;
    gap: 15px;
    width: auto;
    padding: 0;
    margin: 0;
}
.prev-10, .next-10,
.prev-11, .next-11,
.prev-12, .next-12,
.prev-13, .next-13,
.prev-14, .next-14,
.prev-15, .next-15 {
    background: transparent;
    color: rgba(0, 0, 0, 1.0);
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 1.0);
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.prev-10:hover, .next-10:hover,
.prev-11:hover, .next-11:hover,
.prev-12:hover, .next-12:hover,
.prev-13:hover, .next-13:hover,
.prev-14:hover, .next-14:hover,
.prev-15:hover, .next-15:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.prev-10:active, .next-10:active,
.prev-11:active, .next-11:active,
.prev-12:active, .next-12:active,
.prev-13:active, .next-13:active,
.prev-14:active, .next-14:active,
.prev-15:active, .next-15:active {
    transform: scale(0.95);
}




}

/* ===== スマホ用スタイル（1つ表示） ===== */
@media screen and (max-width: 768px) {
    .slider-section {
        padding: 40px 15px 140px;
    }

    [class^="slider-wrapper-"] {
        height: auto;
        touch-action: pan-y;
        gap: 0;
    }

    [class^="slide-10"]::before,
    [class^="slide-11"]::before,
    [class^="slide-12"]::before,
    [class^="slide-13"]::before,
    [class^="slide-14"]::before,
    [class^="slide-15"]::before {
        height: auto;
    }

    /* スマホ: 1つ表示 */
    [class^="slide-10"],
    [class^="slide-11"],
    [class^="slide-12"],
    [class^="slide-13"],
    [class^="slide-14"],
    [class^="slide-15"] {
        width: 100%;
        left: 0;
    }

    /* スマホでは.nextクラスを非表示 */
    [class^="slide-10"].next,
    [class^="slide-11"].next,
    [class^="slide-12"].next,
    [class^="slide-13"].next,
    [class^="slide-14"].next,
    [class^="slide-15"].next {
        opacity: 0;
        /*visibility: hidden;*/
    }

    /* アクティブのみ表示 */
    [class^="slide-10"].active,
    [class^="slide-11"].active,
    [class^="slide-12"].active,
    [class^="slide-13"].active,
    [class^="slide-14"].active,
    [class^="slide-15"].active {
        left: 0;
    }

 .thumb-arrow-10,
.thumb-arrow-11,
.thumb-arrow-12,
.thumb-arrow-13,
.thumb-arrow-14,
.thumb-arrow-15 {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 790%;
    transform: translate(-50%, 790%);
    display: flex;
    gap: 15px;
    width: auto;
    padding: 0;
    margin: 0;
}
.prev-10, .next-10,
.prev-11, .next-11,
.prev-12, .next-12,
.prev-13, .next-13,
.prev-14, .next-14,
.prev-15, .next-15 {
    background: transparent;
    color: rgba(0, 0, 0, 1.0);
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 1.0);
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.prev-10:hover, .next-10:hover,
.prev-11:hover, .next-11:hover,
.prev-12:hover, .next-12:hover,
.prev-13:hover, .next-13:hover,
.prev-14:hover, .next-14:hover,
.prev-15:hover, .next-15:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.prev-10:active, .next-10:active,
.prev-11:active, .next-11:active,
.prev-12:active, .next-12:active,
.prev-13:active, .next-13:active,
.prev-14:active, .next-14:active,
.prev-15:active, .next-15:active {
    transform: scale(0.95);
}

    .title-slide-10,
    .title-slide-11,
    .title-slide-12,
    .title-slide-13,
    .title-slide-14,
    .title-slide-15 {
        padding: 15px 5px;
    }
.title-slide-10 img,
.title-slide-11 img,
.title-slide-12 img,
.title-slide-13 img,
.title-slide-14 img,
.title-slide-15 img
{border-radius: 10px;padding-bottom:10px;height:auto;}
    [class^="slide-10"],
    [class^="slide-11"],
    [class^="slide-12"],
    [class^="slide-13"],
    [class^="slide-14"],
    [class^="slide-15"] {
        --zoom-scale: 1;
        --zoom-x: 0px;
        --zoom-y: 0px;
        --transition: none;
    }
    
    /* 背景画像（::before）にのみズームを適用 */
    /*[class^="slide-10"]::before,
    [class^="slide-11"]::before,
    [class^="slide-12"]::before,
    [class^="slide-13"]::before,
    [class^="slide-14"]::before,
    [class^="slide-15"]::before {
        transform: scale(var(--zoom-scale)) translate(calc(var(--zoom-x) / var(--zoom-scale)), calc(var(--zoom-y) / var(--zoom-scale)));
        transform-origin: center center;
        will-change: transform;
        transition: var(--transition);
    }*/
    
    /* 画像タッチエリア（::beforeの位置に重ねる） */
    .image-touch-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; /* ::beforeと同じ高さ */
        z-index: 10;
        touch-action: none;
    }
    
    /* タイトルエリアは通常通り */
    .title-slide-10,
    .title-slide-11,
    .title-slide-12,
    .title-slide-13,
    .title-slide-14,
    .title-slide-15 {
        position: relative;
        z-index: 5;
        pointer-events: auto;
        touch-action: auto;
    }
    
    /* ズーム中のスタイル */
    [class^="slide-10"].zooming,
    [class^="slide-11"].zooming,
    [class^="slide-12"].zooming,
    [class^="slide-13"].zooming,
    [class^="slide-14"].zooming,
    [class^="slide-15"].zooming {
        user-select: none;
        -webkit-user-select: none;
    }
    
    [class^="slide-10"].zooming .image-touch-area,
    [class^="slide-11"].zooming .image-touch-area,
    [class^="slide-12"].zooming .image-touch-area,
    [class^="slide-13"].zooming .image-touch-area,
    [class^="slide-14"].zooming .image-touch-area,
    [class^="slide-15"].zooming .image-touch-area {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }
    
    /* スライドのオーバーフロー制御 */
    [class^="slide-10"],
    [class^="slide-11"],
    [class^="slide-12"],
    [class^="slide-13"],
    [class^="slide-14"],
    [class^="slide-15"] {
        /*overflow: hidden;*/
    }

}

/* ===== 超小型デバイス ===== */
@media screen and (max-width: 480px) {
    [class^="slider-wrapper-"] {
        height: auto;
    }

    [class^="slide-10"]::before,
    [class^="slide-11"]::before,
    [class^="slide-12"]::before,
    [class^="slide-13"]::before,
    [class^="slide-14"]::before,
    [class^="slide-15"]::before {
        height: auto;
    }
    .image-touch-area {
        height:auto; /* 超小型デバイスでの::beforeの高さに合わせる */
    }

.title-slide-10 img,
.title-slide-11 img,
.title-slide-12 img,
.title-slide-13 img,
.title-slide-14 img,
.title-slide-15 img
{border-radius:25px;padding-bottom:10px;height:auto;}

.thumb-arrow-10,
.thumb-arrow-11,
.thumb-arrow-12,
.thumb-arrow-13,
.thumb-arrow-14,
.thumb-arrow-15 {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 600%;
    transform: translate(-50%, 600%);
    display: flex;
    gap: 15px;
    width: auto;
    padding: 0;
    margin: 0;
}
.prev-10, .next-10,
.prev-11, .next-11,
.prev-12, .next-12,
.prev-13, .next-13,
.prev-14, .next-14,
.prev-15, .next-15 {
    background: transparent;
    color: rgba(0, 0, 0, 1.0);
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 1.0);
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.prev-10:hover, .next-10:hover,
.prev-11:hover, .next-11:hover,
.prev-12:hover, .next-12:hover,
.prev-13:hover, .next-13:hover,
.prev-14:hover, .next-14:hover,
.prev-15:hover, .next-15:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.prev-10:active, .next-10:active,
.prev-11:active, .next-11:active,
.prev-12:active, .next-12:active,
.prev-13:active, .next-13:active,
.prev-14:active, .next-14:active,
.prev-15:active, .next-15:active {
    transform: scale(0.95);
}

}