.album {
	margin: auto;
	background-color: white;
	position: fixed;
	z-index: -1;
	width: 100vw;
}
.album img {
	width: 100%;
	/* 1枚5秒 × 3枚 ＝ 15秒に変更 */
	animation-duration: 15s;
	-webkit-animation-duration: 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
	height: 715px;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.album .img1 {
	animation-name: album1;
	-webkit-animation-name: album1;
	position: relative; /* 高さを維持するためimg1のみrelative */
}
.album .img2 {
	animation-name: album2;
	-webkit-animation-name: album2;
}
.album .img3 {
	animation-name: album3;
	-webkit-animation-name: album3;
}

/* 15秒を3分割した計算:
  0s - 5s (0% - 33.3%): 1枚目
  5s - 10s (33.3% - 66.6%): 2枚目
  10s - 15s (66.6% - 100%): 3枚目
*/

@keyframes album1 {
	0% { opacity: 1; }   /* 表示開始 */
	25% { opacity: 1; }  /* 3.75sまで表示維持 */
	33.3% { opacity: 0; } /* 5sで完全に消える */
	91.6% { opacity: 0; } /* 13.75sからフェードイン開始 */
	100% { opacity: 1; }  /* 15sで表示完了 */
}

@keyframes album2 {
	0% { opacity: 0; }
	25% { opacity: 0; }  /* 3.75sからフェードイン開始 */
	33.3% { opacity: 1; } /* 5sで表示完了 */
	58.3% { opacity: 1; } /* 8.75sまで表示維持 */
	66.6% { opacity: 0; } /* 10sで完全に消える */
	100% { opacity: 0; }
}

@keyframes album3 {
	0% { opacity: 0; }
	58.3% { opacity: 0; } /* 8.75sからフェードイン開始 */
	66.6% { opacity: 1; } /* 10sで表示完了 */
	91.6% { opacity: 1; } /* 13.75sまで表示維持 */
	100% { opacity: 0; }  /* 15sで完全に消える */
}

/* --- Safari用 --- */
@-webkit-keyframes album1 {
	0% { opacity: 1; } 25% { opacity: 1; } 33.3% { opacity: 0; } 91.6% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes album2 {
	0% { opacity: 0; } 25% { opacity: 0; } 33.3% { opacity: 1; } 58.3% { opacity: 1; } 66.6% { opacity: 0; } 100% { opacity: 0; }
}
@-webkit-keyframes album3 {
	0% { opacity: 0; } 58.3% { opacity: 0; } 66.6% { opacity: 1; } 91.6% { opacity: 1; } 100% { opacity: 0; }
}