@charset "UTF-8";
/*
 * 無尽蔵に横スクロールを続けるロゴカルーセルのアニメーション定義
 *
 * CSSの @keyframes による translateX 計算とループ処理の基礎スタイルを定義します。
 *
 * @package crmt-block-base
 * Last modified: 2026-04-01
 *
 * ブレイクポイント規約
 * Tablet : @media (width <= 768px) { ... }
 * Mobile : @media (width <= 540px) { ... }
*/

/* ===================================================
   無限スクロール カライアントロゴカルーセル
=================================================== */
.logo-carousel {
    /* HTMLから変数を受け取る（未設定時のフォールバック付き） */
    --c-speed: var(--speed, 30s);
    --c-gap: var(--gap-pc, 40px);
    --c-logo-w: var(--logo-w-pc, 180px);

    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    /* 上下の余白 */
}

/* SP時のサイズ調整（ブレイクポイントはプロジェクトに合わせて） */
@media (max-width: 768px) {
    .logo-carousel {
        --c-gap: var(--gap-sp, 20px);
        --c-logo-w: var(--logo-w-sp, 120px);
    }
}

/* トラック（レーン）の設定 */
.logo-carousel__track {
    display: flex;
    gap: var(--c-gap);
    width: max-content;
    /* 縮むのを防ぐ */
}

/* リスト（1セット分）の設定 */
.logo-carousel__list {
    display: flex;
    gap: var(--c-gap);
    padding: 0;
    margin: 0;
    list-style: none;
    flex-shrink: 0;

    /* アニメーション設定 */
    animation: logo-scroll var(--c-speed) linear infinite;
}

/* 右方向スクロールへの切り替え */
.logo-carousel[data-dir="right"] .logo-carousel__list {
    animation-direction: reverse;
}

/* 任意：マウスホバーでスクロールを一時停止させる場合はコメント解除 */
/*
.logo-carousel:hover .logo-carousel__list {
    animation-play-state: paused;
}
*/

/* 個別のロゴサイズ */
.logo-carousel__list li {
    width: var(--c-logo-w);
    /* 縦方向は中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-carousel__list img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* アニメーションのキーフレーム */
@keyframes logo-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* 1つのリストの幅（100%）＋ ギャップ1つ分だけ左に移動 */
        transform: translateX(calc(-100% - var(--c-gap)));
    }
}