@charset "UTF-8";

.c-image-loop {
  --gap: 10px;
  --visible: 4;
  --duration: 45s;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.c-image-loop__track {
  display: flex;
  width: max-content;
  gap: var(--gap);
  animation: image-loop var(--duration) linear infinite;
  will-change: transform;
}

.c-image-loop__list {
  display: flex;
  gap: var(--gap);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-image-loop__item {
  flex-shrink: 0;
  width: calc((100vw - (var(--gap) * (var(--visible) - 1))) / var(--visible));
}

.c-image-loop__item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}

@keyframes image-loop {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - (var(--gap) / 2)),
        0,
        0);
  }
}

/* 1024px以下：約3.5枚 */
@media screen and (max-width: 1024px) {
  .c-image-loop {
    --visible: 3.5;
    --gap: 10px;
  }
}

/* 680px以下：約1.25枚 */
@media screen and (max-width: 680px) {
  .c-image-loop {
    --visible: 1.25;
    --gap: 8px;
    --duration:35s;
  }
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .c-image-loop__track {
    animation-play-state: paused;
  }
}