@charset "UTF-8";
/* スライドショー全体の表示領域を定義 */
.slider-container {
    width: 100%; /* ページの端まで広げる */
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* 画像を横並びにし、アニメーションを適用する要素 */
.slide-track {
    display: flex;
    
    /* ポイント: 画像1枚の幅を25vw (画面幅の25%) とした場合、
       8枚分の合計幅は 25vw * 8 = 200vw となります。
    */
    width: 130vw; 
    
    /* アニメーションを適用 */
    animation: scroll-left 20s linear infinite;
}

/* 画像（img要素）のスタイル */
.slide-track img {
    /* ポイント: 各画像の幅を画面幅の割合で設定 (例: 1枚あたり25vw = 4枚で画面幅いっぱい) 
       これで、画面幅が変わると画像サイズも変わります。
    */
    max-width: 80vw; 
    max-height: 80vw; /* 高さを幅に合わせて調整（アスペクト比を維持したい場合） */
    object-fit: cover;
    flex-shrink: 0;
}

/* ホバー時にアニメーションを一時停止 */
.slide-track:hover {
    animation-play-state: paused;
}

/* アニメーションの定義 */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* ポイント: 画像1セット分 (4枚分) の幅だけ左に移動させる。
           4枚で全体の幅の50%なので、-50%に設定します。
           (slide-trackの幅200vwの50%は100vw。つまり画面幅1つ分移動)
        */
        transform: translateX(-50%); 
    }
}