/* 表示枠 */
.xcs-marquee {
    overflow: hidden;
    width: 100%;
}

/* 流れるレール */
.xcs-marquee__track {
    display: flex;
    gap: 20px;
    align-items: stretch;
    will-change: transform;
    animation: xcs-marquee 20s linear infinite;
    /* width:max-content は外す（これが崩れの元になりやすい） */
}

/* 1枚の幅：おおむね “同時に4枚くらい” 見えるサイズに固定 */
.xcs-marquee__item {
    flex: 0 0 clamp(180px, 22vw, 280px);
}

/* 画像：縦横比で揃える（縦長事故を防ぐ） */
.xcs-marquee__item img {
    display: block;
    width: 100%;
    height: auto;
    /* 固定heightをやめる */
    aspect-ratio: 4 / 3;
    /* 好みで 16/9 や 1/1 でもOK */
    object-fit: cover;
    border-radius: 12px;
}

/* 無限ループ（HTMLで同じ画像群を2回並べている前提） */
@keyframes xcs-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 動きを減らす設定のユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
    .xcs-marquee__track {
        animation: none;
    }
}

/* ===== 逆方向用 ===== */
.xcs-marquee--reverse {
    padding-top: 50px;
}

.xcs-marquee--reverse .xcs-marquee__track {
    animation-name: xcs-marquee-reverse;
}

/* 左 → 右 */
@keyframes xcs-marquee-reverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.xcs-marquee__item {
    position: relative;
    overflow: hidden;
    /* はみ出し防止 */
    /* border-radius: 50px; */
}

.xcs-marquee__item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* “中央は透明、端ほど白” を4方向に足し合わせる */
    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 5%,
            rgba(255, 255, 255, 0) 95%,
            rgba(255, 255, 255, 1) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 5%,
            rgba(255, 255, 255, 0) 95%,
            rgba(255, 255, 255, 1) 100%
        );
}

.xcs-marqueeWrap {
    background: linear-gradient(
        to bottom,
        rgba(242, 140, 40, 0) 0%,
        rgba(242, 140, 40, 0.15) 35%,
        rgba(242, 140, 40, 0.25) 50%,
        rgba(242, 140, 40, 0.15) 65%,
        rgba(242, 140, 40, 0) 100%
    );
}


/* スマホは少し大きめに（2枚くらい見える） */
@media (max-width: 768px) {
    .xcs-marquee__item {
        flex-basis: clamp(130px, 33vw, 260px);
    }

    .xcs-marquee__track {
        animation: xcs-marquee 10s linear infinite;
        gap: 14px;
    }

    .xcs-marquee--reverse .xcs-marquee__track {
    animation: xcs-marquee-reverse 10s linear infinite;
}
}





/* 以下はSP時にカード状に並べるパターン */

.xcs-marquee-flex{
    display: none;
}


@media (max-width: 500px) {
    .xcs-marquee {
        display: none;
    }
    .xcs-marquee-flex{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }
    .xcs-marquee-flex__item img {
        box-shadow:  0 4px 6px rgba(0, 0, 0, 0.1);
    }
}