@charset "UTF-8";

.slider-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* シンプルスライダー */
.slider-wrapper { 
    overflow: hidden; 
    position: relative; 
    margin: 0 auto;
    padding-top: 10px;
    max-width: 1000px;
    height: calc(var(--card-width) * var(--card-aspect-ratio) + 40px);

    /* 両端を透明にする設定 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.slider-track { 
    display: flex; 
    animation: scroll 20s linear infinite;
    width: fit-content;
}
.slider-track:hover { 
    animation-play-state: paused; 
}
.slider-card { 
    background:#fff; 
    border-radius:10px; 
    box-shadow:0 2px 6px rgba(0,0,0,0.15); 
    cursor:pointer; 
    transition: transform 0.3s;
    overflow: hidden;
    margin:0 10px;
}

/* アニメーション */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 5 - 150px)); }
}
.slider-track {
    display: flex;
    animation: scroll 20s linear infinite;
}
/* レスポンシブ */
@media (max-width: 480px) {
    .slider-wrapper { 
    /* 両端を透明にする設定 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 50, black 95%, transparent 100%);
    }
}
@media (max-width: 768px) {
    @keyframes scroll {
        100% { transform: translateX(calc(-250px * 5 - 150px)); }
    }
}


@media (min-width: 1500px) {
    @keyframes scroll {
        100% { transform: translateX(calc(var(--card-width-max) * -5 - 150px)); }
    }
    .slider-container {
    max-width: 1500px;
    margin: 0 auto;
    }
    .slider-wrapper { 
        max-width: 100%;
        height: calc(var(--card-width-max) * var(--card-aspect-ratio) + 20px);
    }

}