/* 全体設定 */
.css-carousel-slider5 {
	width: 100%;
	max-width: 848px;  /* サイズ設定をする場合はここ(*1) */
	min-width: 424px;  /* サイズ設定をする場合はここ(*1) */
	overflow: hidden;
	position: relative;
}
.css-carousel-slider5 img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider5 .slide-wrap {
	width: 500%;  /* 画像の合計数*100%を設定(*2) */
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	z-index: 0;
	animation: css-carousel-slider5 50s infinite; /* スライダーアニメーション全体の時間(*3) */
	animation-delay: 2s; /* スライダーが始まるまでの時間(*4) */
}
.css-carousel-slider5 .slide-wrap-main {
	width: 100%;
	z-index: 1;
	animation: css-carousel-slider-main5 50s infinite; /* (*3)と同じ内容を設定 */
	animation-delay: 2s; /* (*4)と同じ内容を設定 */
}
.css-carousel-slider5 .slide {
	width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider5 {
	0% { transform: translateX(0); }

	16% { transform: translateX(calc(1 / 5 * -100%)); }
	20% { transform: translateX(calc(1 / 5 * -100%)); }

	36% { transform: translateX(calc(2 / 5 * -100%)); }
	40% { transform: translateX(calc(2 / 5 * -100%)); }

	56% { transform: translateX(calc(3 / 5 * -100%)); }
	60% { transform: translateX(calc(3 / 5 * -100%)); }

	76% { transform: translateX(calc(4 / 5 * -100%)); }
	80% { transform: translateX(calc(4 / 5 * -100%)); }

	96% { transform: translateX(calc(5 / 5 * -100%)); }
	100% { transform: translateX(calc(5 / 5 * -100%)); }
}

@keyframes css-carousel-slider-main5 {
	0% { transform: translateX(100%); }
	80% { transform: translateX(100%); }
	96% { transform: translateX(0%);}
}