/* -----------------------
  generation
----------------------- */
.generation{
  position: relative;
}
.generation::before{
  content: "";
  background: url(../img/sokode.png) no-repeat top center/ 100%;
  width: min(calc(750/ 750 * 100vw), 750px);
  height: min(calc(262/ 750 * 100vw), 262px);
  position: absolute;
  top: max(calc(-112/ 750 * 100vw), -112px);
  z-index: 2;
}
.loop {
  position: absolute;
  top: min(calc(40/ 750 * 100vw), 40px);
  display: flex;
  width: max-content;
  animation: scrollLoop 20s linear infinite;
}

.loop > p {
  flex-shrink: 0;
  width: min(calc(3202/ 750 * 100vw), 3202px);
}

@keyframes scrollLoop {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}