@charset "UTF-8";
/* CSS Document */
/* ===============================

オートプレイでループするスライダー

=============================== */
.loop-slider__warp {
	position: relative;
}
/* =================
コンテナ */
@supports (aspect-ratio: 3/ 2) {
	.loop-slide {
		--loop-slide-aspect: 3 / 2;
	}
}
@supports not (aspect-ratio: 3/ 2) {
	.loop-slide {
		--loop-slide-aspect: 66.666%;
	}
}
.loop-slide {
	width: min(
		calc(336rem / 16),
		calc(100% / 4)
	);
	max-width: 100%;
}
@media (max-width: 959px) {
	.loop-slide {
		width: min(
			calc(336rem / 16),
			calc(100% / 3.5)
		);
	}
}
@media (max-width: 559px) {
	.loop-slide {
		width: min(
			calc(336rem / 16),
			calc(100% / 2.5)
		);
	}
}
@media (max-width: 414px) {
	.loop-slide {
		width: min(
			calc(336rem / 16),
			calc(100% / 1.8)
		);
	}
}
.loop-slide img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
}
@supports (aspect-ratio: 3 / 2) {
	.loop-slide img {
		aspect-ratio: var(--loop-slide-aspect);
	}
}
@supports not (aspect-ratio: 3 / 2) {
	.loop-slide {
		position: relative;
	}
	.loop-slide::before {
		content: "";
		display: inline-block;
		padding-top: var(--loop-slide-aspect);
	}
	.loop-slide img {
		position: absolute;
		top: 0;
		left: 0;
	}
}