/* ==========================================================================
   取引企業ロゴの帯（横に流れ続ける装飾）
   同じ並びを 2 回つなげて左へ流し、ちょうど半分（1 並び分）進んだ所で最初に戻すと切れ目なく見える
   SP は 2 段で、下段だけ逆向き（右へ）に流す
   ========================================================================== */

.c-client-logos {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.c-client-logos__row {
    overflow: hidden;
}

/* PC 用の 1 段は SP では出さない（SP 用の 2 段はその逆） */
.c-client-logos__row--pc {
    display: none;
}

.c-client-logos__track {
    display: flex;
    width: max-content;
    animation: c-client-logos-scroll calc(var(--_count) * var(--logo-marquee-speed)) linear infinite;
}

.c-client-logos__row--reverse .c-client-logos__track {
    animation-direction: reverse;
}

/* 並びの末尾にもロゴ間と同じ余白を取り、2 回目の並びとのつなぎ目の間隔を揃える */
.c-client-logos__list {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0 var(--space-3) 0 0;
    list-style: none;
}

.c-client-logos__item {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--logo-h);
}

/* ロゴの縦横比はそれぞれ違うので、高さと最大幅の枠に収める */
.c-client-logos__img {
    width: auto;
    height: var(--logo-h);
    max-width: var(--logo-max-w);
    object-fit: contain;
}

@keyframes c-client-logos-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* OS で「視差効果を減らす」を設定している人には動かさない */
@media (prefers-reduced-motion: reduce) {
    .c-client-logos__track {
        animation: none;
    }
}

@media (min-width: 768px) {
    .c-client-logos__row--pc {
        display: block;
    }

    .c-client-logos__row--sp {
        display: none;
    }

    .c-client-logos__list {
        gap: var(--space-5);
        padding-right: var(--space-5);
    }
}