@charset "utf-8";

/*メイン*/ 
.swiperMain, .swiperMain2, .swiperMain3 {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
}
.swiper-slide {
    width: auto;
    height: auto;
}
    .swiper-slide img {
        display: block;
        width: 88%;
        height: 100%;
        margin: 0 auto;
    }


/*サムネイル 1 */
.swiperThumbnail {
    width: 100%;
    padding: 0;
    overflow: hidden;
}
    .swiperThumbnail .swiper-slide {
        width: 150px;
        height: auto;
        text-align: center;
        overflow: hidden;
        opacity: 0.2;
    }
    .swiperThumbnail .swiper-slide-active {
        opacity: 1;
    }

    .swiperThumbnail .swiper-slide img {
        width: 100%;
        height: auto;
    }

/*サムネイル 2 */
.swiperThumbnail2 {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .swiperThumbnail2 .swiper-slide {
        width: 150px;
        height: auto;
        text-align: center;
        overflow: hidden;
        opacity: 0.2;
    }

    .swiperThumbnail2 .swiper-slide-active {
        opacity: 1;
    }

    .swiperThumbnail2 .swiper-slide img {
        width: 100%;
        height: auto;
    }

/*サムネイル 3 */
.swiperThumbnail3 {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .swiperThumbnail3 .swiper-slide {
        width: 150px;
        height: auto;
        text-align: center;
        overflow: hidden;
        opacity: 0.2;
    }

    .swiperThumbnail3 .swiper-slide-active {
        opacity: 1;
    }

    .swiperThumbnail3 .swiper-slide img {
        width: 100%;
        height: auto;
    }

/* 矢印の色変更 */
.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #707070;
}

@media (max-width: 700px) {
    .swiper-slide img {
        width: 80%;
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: 5px !important;
    }
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: 5px !important;
    }
    .swiperThumbnail .swiper-slide, .swiperThumbnail2 .swiper-slide {
        width: 100px;
    }
}