@charset "UTF-8";


/* keyframes */
@keyframes MoveLeft {
  from {
    transform: translateX(100%);
  }

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

@keyframes MoveLeft2 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}


/* CSSのみ */
.loop-text.-css {
  overflow: hidden;
  /* はみ出したテキストは表示しない */
  display: flex;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.loop-text.-css .loop-text__item {
  flex-shrink: 0;
  /* 要素を縮めたくない */
  white-space: nowrap;
  /* 要素を改行させない */
  font-size: 60px;
  font-style: italic;
  font-weight: bold;
  color: #555555;
  letter-spacing: 0.05em;

  &:nth-child(odd) {
    animation: MoveLeft 24s -12s infinite linear;
    /* 24秒かけて-12秒後に無限ループさせる */
    animation-fill-mode: both;
  }

  &:nth-child(even) {
    animation: MoveLeft2 24s infinite linear;
    /* 24秒かけて無限ループさせる */
    animation-fill-mode: both;
  }
}

@media screen and (min-width: 769px) {
  .loop-text.-css .loop-text__item {
    font-size: 120px;
  }
}



/* JSで調整 */
.loop-text.-js {
  overflow: hidden;
  /* はみ出したテキストは表示しない */
  display: flex;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.loop-text.-js .loop-text__item {
  flex-shrink: 0;
  /* 要素を縮めたくない */
  white-space: nowrap;
  /* 要素を改行させない */
  font-size: 60px;
  font-style: italic;
  font-weight: bold;
  color: #555555;
  letter-spacing: 0.05em;

  &:nth-child(odd) {
    animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
    animation-fill-mode: both;
  }

  &:nth-child(even) {
    animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
    animation-fill-mode: both;
  }
}

@media screen and (min-width: 769px) {
  .loop-text.-js .loop-text__item {
    font-size: 120px;
  }
}