/* -------------------------
導入事例　無限スクロール 
------------------------- */
.marquee {
  --gap: 20px;
  --item-width: 100px; /* 1280px 未満: 100px */
  overflow: hidden;
  width: 100%;
}

/* 1280px 以上: 180px */
@media (min-width: 1280px) {
  .marquee { --item-width: 180px; }
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  contain: layout paint;
  backface-visibility: hidden;
  margin-bottom: 10px;
}

.marquee__list {
  display: flex;
  flex: none;           /* 幅固定で継ぎ目ズレ防止 */
  margin-right: 20px;   /* リスト間 20px（★最後も含め常に一定） */
}

.marquee__item {
  flex: none;
  width: var(--item-width);
  margin-right: var(--gap); /* アイテム間の余白 */
}
.marquee__item:last-child { margin-right: 0; }

.marquee__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { transform: none !important; }
}