/* コンテナの設定：スライドを表示する枠の大きさを指定します */
.container {
    width: 100%;
    max-width: 850px; /* 画像の標準的な横幅に合わせる */
    height: 500px;    /* 表示したい高さに調整してください */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* スライド共通設定 */
.image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;    /* 画像全体を表示（切れないようにする） */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: slideshow 15s infinite; /* 15秒かけて1ループ */
}

/* 画像の指定 */
.src1 {
    background-image: url('i.JPG');
    animation-delay: 0s;
}

.src3 {
    background-image: url('u.JPG');
    animation-delay: 5s; /* 5秒後に開始 */
}

.src4 {
    background-image: url('e.JPG');
    animation-delay: 10s; /* 10秒後に開始 */
}

/* フェードイン・フェードアウトのアニメーション */
@keyframes slideshow {
    0% { opacity: 0; }
    10% { opacity: 1; }  /* 1.5秒かけて表示 */
    33% { opacity: 1; }  /* 5秒目まで表示維持 */
    43% { opacity: 0; }  /* 次の画像へ切り替わり */
    100% { opacity: 0; }
}