/* ========================================================================== 
   contents-slider.css - 無限ループ・スムーズスクロール版
   修正版：画像枚数に左右されず、JSで一定速度を制御する基盤
   ========================================================================== */

/* --- スライダー外枠 --- */
.contents-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #fff; /* 背景を白に固定 */
    position: relative;
    /* スクロール時の描画崩れ防止 */
    -webkit-overflow-scrolling: touch;
}

/* --- スライドを横に並べて流すコンテナ --- */
.contents-slide-wrapper {
    display: flex;
    width: fit-content; /* 中身の幅に合わせる */
    
    /* アニメーション設定：秒数はJS側で枚数に合わせて動的にセットされます */
    animation-name: infinity-loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    /* GPUアクセラレーションを強制 */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* --- 各スライドのサイズ設定 --- */
.contents-slide {
    flex: 0 0 500px; /* PCでの1枚の幅 */
    width: 500px;
    height: auto;      /* 高さ自動 */
}

.contents-slide-img {
    width: 100%;
    /* 1200*675の比率(16:9)をCSSで維持 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0 10px;   /* 左右の余白を調整 */
    box-sizing: border-box;
}

.contents-slide-img img {
    width: 100%;
    height: 100%;      /* 親要素のaspect-ratioに従う */
    display: block;
    object-fit: cover; /* 余白（黒帯）を出さずに枠一杯に表示 */
    image-rendering: -webkit-optimize-contrast;
}

/* --- 無限ループアニメーション（translate3dを使用） --- */
@keyframes infinity-loop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* JSで1セット分を複製しているため、-50%移動した瞬間にループ */
        transform: translate3d(-50%, 0, 0);
    }
}

/* 不要な操作UIを非表示 */
.contents-slider-controls,
.contents-slider-progress,
.contents-dots,
.contents-progress-container,
.contents-slider-prev,
.contents-slider-next,
.contents-dot,
.contents-progress-bar {
    display: none !important;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .contents-slide {
        flex: 0 0 300px; /* スマホでの1枚の幅 */
        width: 300px;
    }

    /* スマホ時の余白調整 */
    .contents-slide-img {
        padding: 0 5px; 
    }
}