/* --- ロゴスクロール全体：さらにスリムに、間隔は広く --- */
.p-logo-scroller {
    width: 100%;
    overflow: hidden;
    background: var(--wp--preset--color--white);
    padding: 8px 0; /* 上下の余白を極限まで絞る */
}

.p-logo-scroller__inner {
    display: flex;
    width: 100%;
}

/* スクロールするトラック */
.p-logo-scroller__track {
    display: flex;
    align-items: center;
    gap: 70px;          /* ★ロゴ同士の間隔を大幅にアップ（60pxから120pxへ） */
    width: max-content;
    animation: logo-scroll 30s linear infinite; /* 間隔が広がった分、少しゆっくり(60s)に */
}

.p-logo-scroller__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ロゴ部分：高さを以前の半分以下(20px)に */
.p-logo-scroller__img {
  height: 40px;         /* ← 表示枠 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-logo-scroller__img img {
  max-height: 90%;     /* ← 枠内に収める */
  width: auto;
}

/* 不要な要素を完全に排除 */
.p-logo-scroller__name,
.p-logo-scroller__dummy,
.p-logo-scroller__item::before {
    display: none !important;
}

/* --- 無限スクロールのアニメーション設定 --- */
@keyframes logo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .p-logo-scroller__track {
        gap: 80px; /* スマホでは間隔を少し詰める */
    }
    .p-logo-scroller__img {
        height: 30px; /* スマホはさらに細く */
    }
}