.ticker {
  overflow: hidden;
  width: 100%;
  opacity: 0.15;

  & .ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-slide 25000ms linear infinite;
    will-change: transform;
    gap: 5rem;
  }
  & .ticker__group {
    display: flex;
    align-items: center;
    gap: 5rem;
    overflow: hidden;
    
    & > img {
      height: 2.5rem;
    }
  }
  
  @media (min-width: 1024px) {
    & .ticker__track {
      gap: 8rem;
    }
    & .ticker__group {
      gap: 8rem;
    }
    & .ticker__group > img {
      height: 5rem;
    }
  }
}

@keyframes ticker-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.ticker-container--2 .ticker-track {
  transform: translate3d(-50%, 0, 0);
  animation: ticker-horizontal-reverse 24s linear infinite;
}

/* 1024px以上（縦流れ切り替え時） */
@media (min-width: 1024px) {
  /* 縦流れ時：逆方向スライダーの初期位置を最初からY軸-50%ずらしておく */
  .ticker-container--2 .ticker-track {
    transform: translate3d(0, -50%, 0);
    animation: ticker-vertical-reverse 25s linear infinite;
  }
}

/* ----------------------------------
   @keyframes アニメーション定義
---------------------------------- */

/* 横流れ：標準 (左移動) */
@keyframes ticker-horizontal {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 横流れ：逆方向 (右移動) */
@keyframes ticker-horizontal-reverse {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* 縦流れ：標準 (上移動) */
@keyframes ticker-vertical {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}

/* 縦流れ：逆方向 (下移動) */
@keyframes ticker-vertical-reverse {
  0% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}