@charset "UTF-8";

/* ===================================================
   導入クリニック様ロゴスライダー（TOP）
=================================================== */

.client-logos {
    background-color: #ffffff;
    overflow: hidden;
}

.client-logos__desktop {
    display: block;
}

.client-logos__mobile {
    display: none;
}

.client-logos__viewport {
    width: 100%;
    overflow: hidden;
}

.client-logos__track {
    display: flex;
    width: max-content;
}

.client-logos__list {
    display: flex;
    gap: 20px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.client-logos__item {
    flex-shrink: 0;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logos__item img {
    height: 140px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
}

/* 画面幅に収まる場合は中央寄せ */
.client-logos__viewport.is-static {
    display: flex;
    justify-content: center;
}

.client-logos__viewport.is-static .client-logos__track {
    width: auto;
}

/* 画面幅を超える場合は流れるアニメーション */
.client-logos__viewport.is-animated .client-logos__track {
    animation: client-logos-scroll var(--client-logos-duration, 40s) linear infinite;
    animation-delay: var(--client-logos-delay, 0s);
}

.client-logos__viewport.is-animated .client-logos__list {
    padding-right: 20px;
}

.client-logos__viewport--alt.is-animated .client-logos__track {
    animation-name: client-logos-scroll-reverse;
}

@keyframes client-logos-scroll {
    0% {
        transform: translateX(0);
    }

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

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

    100% {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-logos__viewport.is-animated .client-logos__track {
        animation: none;
    }

    .client-logos__viewport--alt.is-animated .client-logos__track {
        animation: none;
    }
}

@media screen and (max-width: 768px) {
    .client-logos__desktop {
        display: none;
    }

    .client-logos__mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .client-logos__item {
        height: 100px;
    }

    .client-logos__item img {
        height: 100px;
    }
}