/* スライドのスタイル PCSP共通です */
:root {
	--pagination_height: 2em;
}

.splide {
	margin-top: 0.5em;
	margin-bottom: var(--pagination_height);
}
.splide__track{
	padding-bottom: 1px;
}
.slider-bottom {
	width: 100%;
	height: 1em;
}

.splide__slide {
	display: flex;
	width: 100%;

}

.splide__slide img {
	height: auto;
	width: 100%;
}

/* スライド共通のスタイル */
.splide__slide img {
	border: solid 1px #dadada;
	transform: scale(1);
	transition: all .2s ease;
	opacity: 0.3;
	z-index: 1;

}

/* アクティブなスライドのスタイル */
.splide__slide.is-active img {

	transition: all .1s ease;
	transform: scale(1);
	opacity: 1;
	z-index: 10;
	/* 中央のスライドを一番上にする */
}

/* Arrows */
/* サイドを押すと次のスライドに */

button.splide__arrow--prev, button.splide__arrow--next {
	color: transparent;
	border: none;
	border-radius: 0;

	background: transparent;
	padding-inline: 0;
	/* ↑ buttonのデフォルト		スタイル打ち消し */

	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 5%;
	height: 100%;
	cursor: pointer;
	z-index: 10;
}


.splide__arrow--prev {
	left: 0;
}

.splide__arrow--next {
	left: auto;
	right: 0;
}

.splide__arrow>svg {
	display: none;
}

/* ページ送り矢印*/
.splide__arrow--prev::before,
.splide__arrow--next::before {
	position: absolute;
	content: "";
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	border-top: 2px solid #808080;
	border-right: 2px solid #808080;
	border-top: 1px solid #c25f02;
	border-right: 1px solid #c25f02;
	height: 30px;
	width: 30px;
	z-index: 12;
}

.splide__arrow--prev::before {
	left: 15px;
	transform: rotate(-135deg);
}

.splide__arrow--next::before {
	left: auto;
	right: 15px;
	transform: rotate(45deg);
}

.splide__arrow--prev:active:before {

		transform: rotate(-135deg) scale(1.1);
}

.splide__arrow--next:active:before {
	transform: rotate(45deg) scale(1.1);
}
@media screen and (max-width: 768px){
	.splide__arrow--prev::before,
.splide__arrow--next::before {
		display: none;
}
}
/* Dots */
.control_wrap{
	position: absolute;
	width: 100%;
display: flex;
justify-content: center;
	align-items: center;

		padding-top: 5px;
}
@media screen and (max-width: 768px){
	.control_wrap {
		padding-top: 4px;
}
.slider-bottom{
	height: 1px;
}
}
.splide__pagination {
position: relative;
top:0;
	/* bottom: calc(var(--pagination_height) * -1); */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 1em;
	/* width: 100%; */
	height: var(--pagination_height);
	padding-left: 60px;
		padding-right: 30px;
	z-index: 1;
}

.splide__pagination__page {
	background: #ccc;
	border: 0;
	border-radius: 50%;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 3px;
	opacity: .7;
	padding: 0;
	position: relative;
	transition: transform .2s linear;

	cursor: pointer;
}

.splide__pagination__page:hover, .splide__pagination__page:focus {
	opacity: 1;
	background: #fcd65b;

}

.splide__pagination__page.is-active {
	background: #fa9601;
	transform: scale(1.1);
	z-index: 1;
}
.splide__pagination__page:active {
	transform: scale(1.3);

}
@media screen and (max-width: 768px){
	.splide__pagination{
		padding-left: 20px;
		padding-right: 40px;
	}
	article.menu_first,article.menu_last{
		position: relative;
	}
}

/* 一時停止ボタン */
.pausebutton_wrap {
	/* position: absolute; */
	top: auto;
	bottom: calc(var(--pagination_height) * -1);
	left: auto;
	right: 8%;

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 15;
	width: var(--pagination_height);
	height: var(--pagination_height);
}

.splide__toggle {
	color: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	background: transparent;
	padding-inline: 0;
	/* ↑ buttonのデフォルトスタイル打ち消し */
	/* padding-top: 5px; */
}
.splide__toggle:hover{
cursor: pointer;
}
.splide__toggle:active {
	transform: scale(1.2);

}

.splide__toggle span img {
	width: 24px;
	height: 24px;
}