/*** スライドショー ***/
.slide-show{
	position: relative; /*子要素の起点*/
	margin: 16px auto; /*中央配置*/
	//width: 1300px; /*任意の幅*/
	//height: 176px; /*任意の高さ*/
	aspect-ratio: 1300 / 176;
	overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド(画像) ***/
.slide-show > img{
	position: absolute;
	top: 0;
	left: 100%; /*右側へ隠す*/
	width: 100%;
	height: 100%;
	animation: slide 21s linear forwards infinite; /*スライドアニメーション（ループ）*/
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
	animation: slide 21s linear forwards infinite, slide-start 21s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/4時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
	animation-delay: 3s; /* 1/4の遅延 */
}
.slide-show > img:nth-of-type(3) {
	animation-delay: 6s; /* 2/4の遅延 */
}
.slide-show > img:nth-of-type(4){
	animation-delay: 9s; /* 3/4の遅延 */
}
.slide-show > img:nth-of-type(5){
	animation-delay: 12s; /* 3/4の遅延 */
}
.slide-show > img:nth-of-type(6){
	animation-delay: 15s; /* 3/4の遅延 */
}
.slide-show > img:nth-of-type(7){
	animation-delay: 18s; /* 3/4の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
	0% {
		left: 100%; /*右*/
	}
	3%, 14%{ /*画像が4枚なので 1/4 まで*/
		left: 0; /*表示*/
	}
	17%,100%{
		left: -100%; /*左*/
	}
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
	0%,14%{
		left: 0; /*表示*/
	}
	17%,100%{
		left: -100%; /*左へ隠す*/
	}
}