@charset "UTF-8";
/* CSS Document */

.slideinfv {
  animation: slideinfv 1.2s;
} 

@keyframes slideinfv {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}


.fadeIn {
             animation: fadeIn 1.2s;
        }
 @keyframes fadeIn {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}


.fadeIn2 {
      animation-name: fadeIn2;
  animation-duration: 1s;
    animation-delay: 3s;
 animation-fill-mode: forwards;
        }
 @keyframes fadeIn2 {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}


.slideinDY {
  animation: slideinDY 1.2s;
    animation-fill-mode: forwards;
} 

@keyframes slideinDY {
  0% {
    transform: translateY(-30px);
      opacity: 0;
  }
  100% {
    transform: translateY(0);
      opacity: 1;
  }
}

.slideinUY {
    
     animation-name: slideinUY;
  animation-duration: 1.2s;
    animation-delay: 1.5s;
 animation-fill-mode: forwards;
} 

@keyframes slideinUY {
  0% {
     transform: translateY(50px);
      opacity: 0;
    
  }
  100% {
    transform: translateY(0px);
opacity: 1;
  }
}

.slideinUY2 {
    
     animation-name: slideinUY2;
  animation-duration: 1.2s;
    animation-delay: 1.8s;
 animation-fill-mode: forwards;
} 

@keyframes slideinUY2 {
  0% {
     transform: translateY(50px);
      opacity: 0;
    
  }
  100% {
    transform: translateY(0px);
opacity: 1;
  }
}


.slideinUY3 {
    
     animation-name: slideinUY3;
  animation-duration: 1.2s;
    animation-delay: 2.5s;
 animation-fill-mode: forwards;
} 

@keyframes slideinUY3 {
  0% {
     transform: translateY(50px);
      opacity: 0;
    
  }
  100% {
    transform: translateY(0px);
opacity: 1;
  }
}

.slideinblue {
    
     animation-name: slideinblue;
  animation-duration: 1.2s;
    animation-delay: 2s;
 animation-fill-mode: forwards;
} 

@keyframes slideinblue {
  0% {
     transform: translateX(50px);
      opacity: 0;
    
  }
  100% {
    transform: translateX(0px);
opacity: 1;
  }
}


.slideinblue2 {
    
     animation-name: slideinblue2;
  animation-duration: 1.2s;
 animation-fill-mode: forwards;
} 

@keyframes slideinblue2 {
  0% {
     transform: translateX(50px);
      opacity: 0;
    
  }
  100% {
    transform: translateX(0px);
opacity: 1;
  }
}


.slideinred {
    
     animation-name: slideinred;
  animation-duration: 1.2s;
    animation-delay: 2s;
 animation-fill-mode: forwards;
} 

@keyframes slideinred {
  0% {
     transform: translateX(-50px);
      opacity: 0;
    
  }
  100% {
    transform: translateX(0px);
opacity: 1;
  }
}



.parallax-large-anim {
  animation-name: parallax-large-anim;
 /* animation-duration: 0.001s; /* この値はスクロール連動では相対的なものになる */
  /*animation-timeline: scroll(root); *//* スクロールタイムラインを設定 */
    animation-duration: 2s;
     animation-delay: 2s;
    animation-fill-mode: forwards;
} 


@keyframes parallax-large-anim {
  0% {
    transform: translateY(100px);
      opacity: 0;
  }
  50% {
    transform: translateY(0px);
      opacity: 0.5;
  }
    100% {
    transform: translateY(0px);
         opacity: 1;
  }
}

.effectpoint1{
     animation-name: effectpoint1;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes effectpoint1 {
  0% {
     transform: scale(1);
    
  }
     80% {
     transform: scale(1);
    
  }
  100% {
     transform: scale(0.84);

  }
}


.effectpoint2{
   animation-name: effectpoint2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes effectpoint2 {
  0% {
     transform: scale(1);
    
  }
     80% {
     transform: scale(1);
    
  }
  100% {
     transform: scale(0.92);
  }
}