@charset "UTF-8";
.fadeUpTrigger{opacity: 0;}
.fadeDownTrigger{opacity: 0;}
.fadeInFocus{opacity: 0;}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02{animation-delay: 0.2s;}
.delay-time04{animation-delay: 0.4s;}
.delay-time06{animation-delay: 0.6s;}
.delay-time08{animation-delay: 0.8s;}
.delay-time10{animation-delay: 1.0s;}
.delay-time12{animation-delay: 1.2s;}
.delay-time14{animation-delay: 1.4s;}
.delay-time16{animation-delay: 1.6s;}
.delay-time18{animation-delay: 1.8s;}
.delay-time20{animation-delay: 2.0s;}


/*==================================================
ふわっ
===================================*/

/* 下から */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.7s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(30px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }


/*==================================================
ふわっ
===================================*/

/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==================================================
じわ～っと表示
===================================*/
/* フェードインとぼけている画像からピントが合うアニメーション */
.fadeInFocus {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}

.fadeInFocus.visible {
  opacity: 1;
  filter: blur(0);
}


@media screen and (min-width: 768px),print {}
@media screen and (max-width: 767px) {}