@charset "UTF-8";

.main {
    max-width: 500px;
}

.main_inner {
    overflow: visible;
}

.left_inner {
    width: 368px;
    padding: 100px 170px 0 15px;
    row-gap: 5px;
}

.right_inner {
    padding: 100px 0 0 165px;
    width: 425px;
}

.swiper-slide img {
    width: inherit !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: #ffffff;
    background-color: rgba(0, 0, 0, .35);
    border-radius: 50%;
    width: 51px;
    height: 51px;
    /* top: calc(50% - 29px); */
    top: 60%;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -88px);
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -88px);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
}

/* ページネーション */
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, -50px);
}

.swiper-pagination-bullet {
    font-size: 0;
    /* テキストだけ非表示 */
}
.swiper-pagination-fraction {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 1rem;
    margin-left: auto;
}
@media screen and (max-width: 1280px) {
    .right_inner {
        padding: 100px 0 0 78px;
        width: 360px;
    }
    .left_inner {
        width: 304px;
        padding: 100px 110px 0 15px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}
@media screen and (max-width: 1150px) {
    .main {
        max-width: 450px;
    }
    .right_inner {
        padding: 100px 0 0 41px;
        width: 325px;
    }
}
@media screen and (max-width: 1040px) {
    .main {
        max-width: 400px;
    }
    .left_inner {
        width: 226px;
        padding: 100px 31px 0 15px;
    }
}
@media screen and (max-width: 768px) {
    .main {
        max-width: 400px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom,145px);
    }
}