/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/


.gallery-top .swiper-slide .box img,
.gallery-top .swiper-slide .detail_desc {
    opacity: 0; /* 初期状態は非表示 */
    visibility: hidden; /* 見えない状態に設定 */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* フェードの速度を調整 */
}

.gallery-top .swiper-slide .box img.visible,
.gallery-top .swiper-slide .detail_desc.visible {
    opacity: 1; /* アクティブ時に表示 */
    visibility: visible; /* 見える状態に設定 */
}


.swiper-container {
    width: 100%;
    margin: 0;

}
.swiper-slide {
    height: auto;
}
.gallery-thumbs {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /*padding: 10px 0;*/
    margin: 20px 0 30px;
}
.gallery-thumbs .swiper-slide {
    opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #fff;
}
.box {
    margin: 0 0 20px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    color: #999;
}
.box img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
    /*    --swiper-navigation-color: #000 !important;
    background: #fff;
    opacity: 0.3;*/
}
.swiper-button-next,
.swiper-button-prev {
    top: 0;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 20px !important;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 0 !important;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 0 !important;
}

.main_banner .swiper-button-next,
.main_banner .swiper-button-prev {
    display: none;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
    background: #fff;
}

.swiper-pagination {
    text-align: right !important;
    margin: 0 0px 20px -60px;
}

@media screen and (max-width: 767px) {
    .swiper-pagination {
        text-align: right !important;
        margin: 0 0px 20px -30px;
    }
}


.swiper-wrapper{
    height: 100%;
}

.progressbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #ddd;
    overflow: hidden;
    z-index: 999;
}

.progressbar_in {
    display: block;
    height: 100%;
    width: 0%;
    background-color: #635941;
    transition: width linear;
}





.swiper-slide video {
    width: 100%; /* 横幅をスライド幅に合わせる */
    height: 100%; /* 高さをスライド高さに合わせる */
    object-fit: cover; /* トリミングしてビデオを全体に収める */
    object-position: center; /* ビデオの中央を表示 */
}