@charset "utf-8";

/* slider レイアウト */

.swiper-container{
	display: block;
	width: 100%;
	padding-bottom: 50px;
	margin: 50px auto 0;
	position: relative;
}

.swiper-slide{
	width: 100%;
}


/* PC */
@media all and (min-width: 789px) {

	.swiper-container .navi{
		width: 350px;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		z-index: 100;
	}
}


/* サムネイル */
.swiper-container-horizontal > .swiper-my-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
	margin: 0 20px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
	width: 200px;
	margin-left: calc(50% - 100px);
	margin-right: calc(50% - 100px);
}
.swiper-my-pagination{
	justify-content: flex-start;
	text-align: left;
	padding: 0 10px;
}

.swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background-color: #0B306B;
}
.swiper-my-pagination .swiper-pagination-bullet {
	border-radius: 0;
	display: inline-flex;
	width: calc((100% - 21px) / 3);
	height: calc(((100% - 21px) / 3) * 0.66);
	margin-right: 10px;
	margin-bottom: 10px;
	background: transparent;
	opacity: 1;
}
.swiper-my-pagination .swiper-pagination-bullet:nth-child(3n) {
	margin-right: 0;
}

.swiper-my-pagination .swiper-pagination-bullet-active {
	background: transparent;
	opacity: 0.6;
}

.swiper-my-pagination img {
	box-shadow: none;
	margin: 0;
	vertical-align: bottom;
	width: 100%;
	height: calc(((100% - 20px) / 3) * 0.66);
}

/* ページャ */
.swiper-button-prev,
.swiper-button-next{
	width: 78px;
	height: 78px;
	top: 45%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	border: none;
	border: 0;
}

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

.swiper-button-prev{
	background-image: url("../image/icon_arrow_prev.png");
	background-position: center center;
	left: 0;
}
.swiper-button-next{
	background-image: url("../image/icon_arrow_next.png");
	background-position: center center;
	right: 0;
}

/* PC */
@media all and (min-width: 901px) {
	.swiper-button-prev{
		left: 0;
	}
	.swiper-button-next{
		right: 0;
	}
}

/* SP */
@media all and (max-width: 900px) {
	.swiper-button-prev,
	.swiper-button-next{
		width: 40px;
		height: 40px;
		top: auto;
		bottom: 0;
	}
}