/**
 * Swiper Custom Styles
 * - Top slideshow navigation & pagination
 */

/* ============================
   Top Slideshow - Navigation Arrows
   White circle background + #5391d7 arrow, 70% opacity
   ============================ */
.top-swiper .swiper-button-prev,
.top-swiper .swiper-button-next {
	width: 28px;
	height: 28px;
	margin-top: -14px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	opacity: 0.7;
}
.top-swiper .swiper-button-prev:hover,
.top-swiper .swiper-button-next:hover {
	opacity: 1;
}
/* Hide Swiper default arrow icon (v12: SVG element) */
.top-swiper .swiper-button-prev svg,
.top-swiper .swiper-button-next svg {
	display: none;
}
/* Arrow via pseudo-element */
.top-swiper .swiper-button-prev::after,
.top-swiper .swiper-button-next::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #5391d7;
	border-bottom: 2px solid #5391d7;
}
.top-swiper .swiper-button-prev::after {
	transform: rotate(135deg);
	margin-left: 2px;
}
.top-swiper .swiper-button-next::after {
	transform: rotate(-45deg);
	margin-right: 2px;
}
.top-swiper .swiper-button-prev {
	left: 10px;
}
.top-swiper .swiper-button-next {
	right: 10px;
}

/* ============================
   Top Slideshow - Pagination below image
   ============================ */
.top-swiper .swiper-pagination {
	bottom: 0;
	top: auto;
	width: max-content;
	left: inherit;
	right: 0.5rem;
}
.top-swiper .swiper-pagination-bullet {
	background: #999;
	opacity: 1;
	border-radius: 0;
	width: 0.75rem;
	height: 0.75rem;
}
.top-swiper .swiper-pagination-bullet-active {
	background: #0A498D;
	opacity: 1;
}


#visual.top-swiper .swiper-button-next, #visual.top-swiper .swiper-button-prev{
    background: url(../img/sp/top/vis_btn_nav_r.png) no-repeat left center;
    background-size: contain;
    width: 40px;
	height: auto;
    aspect-ratio: 37 / 78;
	right: 0;
	bottom: 0;
	top: 0;
	border-radius: 0;
	opacity: 1;
	margin: auto 0;
}

#visual.top-swiper .swiper-button-prev{
	left: 0;
	right: inherit;
	background: url(../img/sp/top/vis_btn_nav_l.png) no-repeat left center;
}

.top-swiper .swiper-button-next::after, .top-swiper .swiper-button-prev::after{content: none;}