@charset "utf-8";


.fade-in-left-slow {
  animation: fadeInFromLeft 1.5s ease-out forwards;
}

@keyframes fadeInFromLeft {
  0% {
    opacity: 0; /* 開始時は透明 */
    transform: translateX(-50px); 
  }
  100% {
    opacity: 1; /* 終了時は不透明 */
    transform: translateX(0); /* 元の位置 */
  }
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.fade-in-left.is-active{
  opacity: 1;
  transform: translateX(0);
}


.fade-in-left-2s {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}


.fade-in-left-2s .is-active{
  opacity: 1;
  transform: translateX(0);
}



/* 上からフェードイン */

.fade-in-box {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.fade-in-box.is-active{
  opacity: 1;
  transform: translateY(0);
}

.fade-in-box img {
  display: block; 
  width: 100%;    
}