:root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #f8f8f8;
    --color-gray: #ddd;
    --color-theme: #f5695f;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
}

.swiper-wrapper {
    padding-left: 0;
}

    .swiper-wrapper li {
        list-style: none;
    }

.swiper-button-prev,
.swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

    .swiper-button-prev::before,
    .swiper-button-next::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "";
        border-radius: 50%;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        width: 1.2rem;
        height: 1.2rem;
        content: "";
        border: solid var(--color-gray);
        border-width: 3px 3px 0 0;
    }

    .swiper-button-prev::after {
        margin-left: 0.4rem;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .swiper-button-next::after {
        margin-right: 0.4rem;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.swiper-custom-container {
    overflow: hidden;
}

    .swiper-custom-container .swiper {
        overflow: visible;
    }

    .swiper-custom-container .swiper-button-prev,
    .swiper-custom-container .swiper-button-next {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        margin: auto;
    }

        .swiper-custom-container .swiper-button-prev::before,
        .swiper-custom-container .swiper-button-next::before {
            background-color: rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: var(--box-shadow-dark);
            box-shadow: var(--box-shadow-dark);
        }

        .swiper-custom-container .swiper-button-prev::after,
        .swiper-custom-container .swiper-button-next::after {
            border-color: #fff;
        }

    .swiper-custom-container .swiper-button-prev {
        right: calc(100% - 1.6rem);
    }

    .swiper-custom-container .swiper-button-next {
        left: calc(100% - 1.6rem);
    }

    .swiper-custom-container .slide {
        /* overflow: hidden; リボンのはみ出しを表示したい */
        -webkit-transition: var(--transition), opacity 1s;
        transition: var(--transition), opacity 1s;
        /* border-radius: 4px; カードの角丸を他と合わせる */
    }

    .swiper-custom-container .swiper-slide:not(.swiper-slide-visible) .slide {
        pointer-events: none;
        opacity: 0.3;
    }

    .swiper-custom-container .swiper-custom-inner {
        padding: 1em 16em 0 16em;
    }

@media only screen and (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    .swiper-custom-container .swiper-custom-inner {
        padding: 1em 4em 0 4em;
    }

    .pc {
        display: none !important;
    }

    .swiper-custom-container .swiper {
        padding: 0 3.2rem;
    }

    .swiper-custom-container .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .swiper-custom-container .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (max-width: 599px) {
    html {
        font-size: 50%;
    }
}

@media only screen and (min-width: 1025px) {
    .swiper-button-prev::before,
    .swiper-button-next::before {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .swiper-button-prev:hover::before,
    .swiper-button-next:hover::before {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .swiper-custom-container .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .swiper-custom-container .slide:hover {
        -webkit-transform: translateY(-16px);
        transform: translateY(-16px);
    }

    .swiper-custom-container .slide:hover img {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@media only screen and (max-width: 1960px) {
    .swiper-custom-container .swiper-custom-inner {
        padding: 1em 8em 0 8em;
    }
}

@media only screen and (max-width: 2200px) {
    .swiper-custom-container .swiper-custom-inner {
        padding: 1em 12em 0 12em;
    }
}