/* カルーセル */
.splide__arrow {
	background: none;
}

#splide1 .splide__arrow svg {
	fill: #ffffff;
	height: 1.5em;
	width: 1.5em;
}

#splide2 .splide__arrow svg {
	fill: #cccccc;
	height: 1.5em;
	width: 1.5em;
}

.thumbnails {
	display: flex;
	margin: 0.5rem -0.2rem 0;
	padding: 0;
	justify-content: center;
}

.thumbnail {
	overflow: hidden;
	list-style: none;
	margin: 0 0.2rem;
	cursor: pointer;
	opacity: 0.3;
}

.thumbnail.is-active {
	opacity: 1;
}


/* splide.js カスタマイズcss */

@media (min-width : 992px) {

	#splide2 .splide__arrow--prev {
		left: calc(50vw - 32%) !important;
	}

	#splide2 .splide__arrow--next {
		right: calc(50vw - 32%) !important;
	}

	#splide2 .splide__arrow {
		background: #ffffff !important;
		position: absolute;
		opacity: 1 !important;
		height: 4em !important;
		width: 3em !important;
		top: 50% !important;
		-webkit-transform : translate(0%, -70%) !important;
		transform: translate(0%, -100%) !important;
		border-radius: 0% !important;
	}
}

@media (min-width : 1200px) {

	#splide2 .splide__arrow--prev {
		left: calc(50vw - 32%) !important;
	}

	#splide2 .splide__arrow--next {
		right: calc(50vw - 32%) !important;
	}

	#splide2 .splide__arrow {
		background: #ffffff !important;
		position: absolute;
		opacity: 1 !important;
		height: 4em !important;
		width: 3em !important;
		top: 50% !important;
		-webkit-transform : translate(0%, -70%) !important;
		transform: translate(0%, -70%) !important;
		border-radius: 0% !important;
	}
}

@media (min-width : 1400px) {


	#splide2 .splide__arrow--prev {
		left: calc(50vw - 30%) !important;
	}

	#splide2 .splide__arrow--next {
		right: calc(50vw - 30%) !important;
	}

	#splide2 .splide__arrow {
		background: #ffffff !important;
		position: absolute;
		opacity: 1 !important;
		height: 4em !important;
		width: 3em !important;
		top: 50% !important;
		-webkit-transform : translate(0%, -70%) !important;
		transform: translate(0%, -70%) !important;
		border-radius: 0% !important;
	}
}

#splide1 .splide__arrow--prev {
	left: 3em !important;
}

#splide1 .splide__arrow--next {
	right: 3em !important;
}

#splide1 .splide__arrow {
	background: #ffffff00 !important;
	position: absolute;
	opacity: 1 !important;
	height: 4em !important;
	width: 3em !important;
	top: 50% !important;
	-webkit-transform : translate(0%, -50%) !important;
	transform: translate(0%, -50%) !important;
	border-radius: 0% !important;
}

.pagination-area {
	bottom: -2.5rem !important;
}

.pagination-area li {
	margin-left: 5px !important;
	margin-right: 5px !important;
}

.page-dot {
	border-radius: 0 !important;
	background-color: #9e9ea0 !important;
}

.page-dot.is-active {
	background-color: #222222 !important;
}