/* Swiper wrapper for index page */
.usescene_banner {
	padding-bottom: 77px;
}

.usescene_banner .slider {
	position: relative;
	width: 100%;
	height: 267px;
	overflow: hidden;
}

.swiper {
	visibility: visible;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.swiper img {
	max-width: calc(100vw - 32px);
}

.swiper-normal {
	visibility: visible;
	position: absolute;
	overflow: visible;
	min-width: 1800px;
	margin: 0 auto;
	top: 0;
	left: 50%;
	transform: translate(-49.5%, 0);
}

#swiper-normal .swiper-wrapper,
#swiper-min .swiper-wrapper {
	margin-top: 0;
}

#swiper-normal .swiper-slide {
	width: 569px;
	height: 219px;
}

#swiper-normal a,
#swiper-min a {
	width: 100%;
	height: 100%;
	display: block;
}

#swiper-normal .swiper-slide img {
	width: 569px;
	height: 219px;
}

#swiper-min .swiper-slide img {
	width: calc(100vw - 32px);
	height: auto;
}

@media screen and (max-width:864px) {
	#banner-min, #swiper-min {
		visibility: visible;
		display: block;
	}
	#banner-normal, #swiper-normal {
		display: none;
	}
	.usescene_banner .slider {
		height: calc(39vw + 48px);
	}

	.swiper-normal {
		min-width: calc(100vw - 16px);
		left: calc( 50% + 14px);
	}

	.swiper img {
		width: calc(100vw - 32px);
	}
}

@media screen and (min-width:865px) {
	#banner-min, #swiper-min {
		display: none;
	}

	#banner-normal, #swiper-normal {
		visibility: visible;
		display: block;
	}
}

#prev-btn {
	/* PC側はswiper本体(1800px)がコンテナ(1200px)より外へ約300pxはみ出すため、その分を重畳領域に加える */
	width: calc(50% - 11px);
	height: 219px;
	position: absolute;
	top: 0px;
	left: -306px;
	background-color: rgba(48,56,64,0.7);
	z-index: 20;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#prev-btn img {
	width: 48px;
	height: 48px;
	position: absolute;
	top: calc(50% - 24px);
	right: 0;
	-webkit-transform: translate(0, 20%);
	transform: translate(0, 20%);
}

#next-btn {
	width: calc(50% - 11px);
	height: 219px;
	position: absolute;
	top: 0px;
	right: -300px;
	background-color: rgba(48,56,64,0.7);
	z-index: 20;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#prev-btn:focus,
#next-btn:focus {
	outline: none;
}

#prev-btn:focus-visible,
#next-btn:focus-visible {
	outline: 2px solid rgba(255,255,255,0.85);
	outline-offset: -2px;
}

#next-btn img {
	width: 48px;
	height: 48px;
	position: absolute;
	top: calc(50% - 24px);
	left: 0;
	-webkit-transform: translate(35%, 0);
	transform: translate(35%, 0);
}

#prev-btn.swiper-button-disabled,
#next-btn.swiper-button-disabled {
	opacity: 0.5;
}

/* Swiper pagination bullets */
#swiper-pagination-normal,
#swiper-pagination-min {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
	width: auto;
	z-index: 30;
	line-height: 1;
	pointer-events: none;
}

#swiper-pagination-normal .swiper-pagination-bullet,
#swiper-pagination-min .swiper-pagination-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

#swiper-pagination-normal .swiper-pagination-bullet-active,
#swiper-pagination-min .swiper-pagination-bullet-active {
	background: rgba(255,255,255,1);
}