@charset "UTF-8";


/* スライダー全体のコンテナ */
.sc-slider-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 0 32px;
}

/* メイン画像（上の大きい方） */
.sc-main-swiper {
    margin-bottom: 18px;
    border-radius: 4px; /* 角を少し丸める */
    overflow: hidden;
}

.sc-main-swiper img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* サムネイル（下の小さい方） */
.sc-thumb-swiper .swiper-slide {
    width: 25%;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* 選択されていないサムネイルを少し薄くする */
.sc-thumb-swiper .swiper-slide:not(.swiper-slide-thumb-active) {
    opacity: 0.6;
}

.thumb-img-box {
    width: 100%;
    padding: 0px; /* 枠線の内側に余白が欲しい場合は調整 */
    box-sizing: border-box;
}

.sc-thumb-swiper img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

/* 【重要】添付画像のような「緑の太枠」の再現 */
.sc-thumb-swiper .swiper-slide-thumb-active .thumb-img-box {
    outline: 3px solid #008542; /* 塾のイメージカラー */
    outline-offset: -3px; /* 枠線を画像の内側に食い込ませる */
}
.sc-thumb-swiper .swiper-wrapper{
    justify-content: center;
}