/* swiper のカスタムデザイン */

/*矢印のリンク領域を丸型に*/
.swiper-button-next,
.swiper-button-prev {background:rgba(0,0,0,0.8); color: #fff; font-family:"Font Awesome 6 Free"; font-weight:600; font-size: 16px; text-align:center; display:inline-flex; align-items: center; justify-content: center; line-height: 1; width: 40px; height:auto; aspect-ratio:1/1; border-radius: 99em; margin: 0; transform: translateY(-50%); transition: 0.2s opacity,0.2s background;}
.swiper-button-next:after,
.swiper-button-prev:after{display: none;}
.swiper-button-next:hover,
.swiper-button-prev:hover{background:rgba(0,0,0,0.6);}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {opacity: 0.2;}
.swiper-button-next{right: 20px;}
.swiper-button-next:before{content: '\f178';}
.swiper-button-prev{left: 20px;}
.swiper-button-prev:before{content: "\f177";}
@media screen and (max-width:960px){
.swiper-button-next,
.swiper-button-prev{width: 30px; font-size: 12px;}
.swiper-button-next{right: 15px;}
.swiper-button-prev{left: 15px;}
}

/* スクロールバー */
.swiper-scrollbar { background: rgba(120,120,120,0.2); border-radius: 99em;}
.swiper-scrollbar-drag { background: #000; border-radius: 99em; }
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal{left: 1rem; bottom: 1rem; width: calc(100% - 2rem); height: 5px;}