html { scroll-behavior: smooth; }
body { font-family: 'Noto Serif JP', serif; }

@-webkit-keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes infinity-scroll-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.scroll-infinity__wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

@media (min-width: 768px) {
  .scroll-infinity__wrap {
    margin-right: calc(100% - 50vw);
  }
}

.scroll-infinity__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
}

.scroll-infinity__list--left {
  -webkit-animation: infinity-scroll-left 60s infinite linear 0.5s both;
          animation: infinity-scroll-left 60s infinite linear 0.5s both;
}

@media (min-width: 768px) {
  .scroll-infinity__list--left {
    -webkit-animation: infinity-scroll-left 80s infinite linear 0.5s both;
            animation: infinity-scroll-left 80s infinite linear 0.5s both;
  }
}

.scroll-infinity__item {
  width: 12.4rem;
  margin-left: 0.2rem;
}

.scroll-infinity__item > img {
  width: 100%;
}