.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
  visibility: hidden;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

@keyframes lineFloat{
  0%   {transform:translateY(-8px);}
  50%  {transform:translateY( 8px);}
  100% {transform:translateY(-8px);}
}

/* アニメーションで translateY するのは keyframes に限定する */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%); /* ちょっと下から上へ */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%); /* 中央へ */
  }
}

/* アニメーションで テキストをループ */
.loop-text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  background: #f4f4f4; /* 任意 */
  position: relative;
}

.loop-text {
  display: inline-block;
  white-space: nowrap;
  animation: scrollLoop 60s linear infinite;
  font-size: 6rem;
  color: #bababa;
}

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

@media (max-width: 768px) {
  .loop-text {
    font-size: 5rem;
  }
}