@charset "utf-8";
/* CSS Document */
body {
    margin: 0;
    overflow-x: hidden; /* 横スクロールバーを非表示にする */
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* スライダーからはみ出る画像を隠す */
    white-space: nowrap; /* 画像が改行されないようにする */
}

.slider-wrapper {
    display: inline-flex; /* flexとinline-blockの特性を併せ持つ */
    /* transition: transform 0.5s linear; シームレススクロールではJSでアニメーションを制御するため不要 */
    animation: slide-left 70s linear infinite; /* アニメーションの追加 */
    /* アニメーションの速度は、画像の枚数や幅によって調整してください */
    /* animation-play-state: running; */ /* JavaScriptで制御するためコメントアウト */
}

.slider-wrapper img {
    width: 250px; /* 各画像の幅を250pxに固定 */
    height: 180px; /* 適宜高さを調整（例として） */
    object-fit: cover; /* 画像の比率を維持しつつコンテナを覆う */
    display: block; /* img要素のデフォルト余白をなくす */
    margin-right: 10px; /* 画像間の余白 */
    flex-shrink: 0; /* 画像が縮まないようにする */
}

/* アニメーションのキーフレーム */
@keyframes slide-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* ラッパーの半分（複製された部分）まで移動 */
    }
}

/* スマートフォンでの表示を考慮 */
@media (max-width: 768px) {
    .slider-wrapper img {
        width: 250px; /* スマホでは画像を少し小さくする */
        height: 180px;
        margin-right: 8px;
    }
    .slider-wrapper {
        animation: slide-left 40s linear infinite; /* スマホではアニメーションを速くする */
    }
}