/* スライドショー全体の枠 */
.slideshow-container {
    width: 960px;
    height: 720px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #eee; /* 読み込み待ちの背景色 */
}

/* 画像の共通設定 */
.slideshow-container img {
    width: 960px;
    height: 720px;
    object-fit: cover;
    position: absolute; /* 画像を同じ位置に重ねる */
    top: 0;
    left: 0;
    opacity: 0; /* 最初は全員透明 */
    animation: fadeAnimation 15s infinite; /* 15秒で3枚をループ */
}

/* 切り替わりのタイミング設定（3枚構成） */
.slideshow-container img:nth-child(1) {
    animation-delay: 0s;
}
.slideshow-container img:nth-child(2) {
    animation-delay: 5s;
}
.slideshow-container img:nth-child(3) {
    animation-delay: 10s;
}

/* フェードアニメーションの定義 */
@keyframes fadeAnimation {
    0% { opacity: 0; }
    5% { opacity: 1; }   /* 0.75秒かけて表示 */
    33% { opacity: 1; }  /* 5秒まで表示維持 */
    38% { opacity: 0; }  /* 0.75秒かけて消える */
    100% { opacity: 0; }
}