@media screen and (min-width: 769px) {
    html, body {
        /* 背景を固定し、スクロールを無効化 */
        overflow: hidden;
    }
}

/* ==========================================================================
   Swiper Navigation Buttons
   ========================================================================== */

@media print, screen and (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        display: block !important; /* デフォルトの非表示を上書き */
        width: 1rem;
        height: 1rem;
        top: 25%;
        /* 矢印の形をtransformで作成 */
        -webkit-transform: translateY(-50%) rotate(45deg);
           -moz-transform: translateY(-50%) rotate(45deg);
                transform: translateY(-50%) rotate(45deg);
    }

    .swiper-button-next {
        right: 22px;
        left: auto;
        border-top: 2px solid #d8d1c1;
        border-right: 2px solid #d8d1c1;
    }
    
    .swiper-container-rtl .swiper-button-prev {
        left: auto;
    }

    .swiper-button-prev {
        left: 22px;
        border-left: 2px solid #d8d1c1;
        border-bottom: 2px solid #d8d1c1;
    }

    /* 設定されていた背景画像を無効化 */
    .swiper-button-next.swiper-button-black,
    .swiper-button-prev.swiper-button-black,
    .swiper-container-rtl .swiper-button-next.swiper-button-black,
    .swiper-container-rtl .swiper-button-prev.swiper-button-black {
        background-image: none !important;
    }
}