/**
 * Swiper NBH用CSS
 */

/* frame */
.swiperFrame{
    width:100%;
    position:relative;
}
@media screen and (max-width: 767px){
/*    .swiperFrame{
        width:calc( 100% + 20px );
        margin-left:-10px;
    }
        */
}


/* swiper */
.swiper {
    /*width: 90%;*/
   /* margin:0 auto;*/
}
.swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* button */
.swiper-button-prev,.swiper-button-next{
    color:#666;
}
.swiper-button-prev{
    position:absolute;
    left:0;
}
.swiper-button-next{
    position:absolute;
    right:0;
}
.swiper-button-prev:after,.swiper-button-next:after{
    font-size:30px;
}
@media screen and (max-width: 767px){
    .swiper-button-prev:after,.swiper-button-next:after{
        font-size:24px;
    }
}

/* pagination */
.swiper-pagination{
    position:relative;
    margin-top:15px;
}
.swiper-pagination-bullet-active{
    color:#333;
    background-color:#333;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);
}



/*-------------------------------------------------
/*　右側が見切れているバージョン　.swiperFrame-noRight
/*-------------------------------------------------*/
@media screen and (max-width: 767px){
    .swiperFrame-noRight{
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    .swiperFrame-noRight .swiper{
        padding-left:20px;
        padding-right:20px;
    }

}

@media screen and (min-width: 768px){
    .swiperFrame-noRight .swiper {
        width: 100%;
        margin:0;
        padding-left:20px;
    }
}