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


.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.blurTrigger
.delayScroll{
    opacity: 0;
}
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}


@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}


.count2{  
  animation-iteration-count: 2;
}

.countinfinite{  
  animation-iteration-count: infinite;
}


.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}

.fadeUpTrigger {
    opacity: 0;
    transform: translateY(20px); /* 下から始まる位置 */
    transition: all 0.5s ease-in-out; /* アニメーション速度 */
}

.fadeUp {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置 */
}