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

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.opacityAnime{
  opacity: 0;
}


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

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:both;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(30px);
  }

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

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
     opacity: 1; /* ここでopacityを1に設定する */
}

.delay-time04{
animation-delay: 0.4s;
    
}



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


/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.0s;
animation-fill-mode:both;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.blurFadeText {
  opacity: 0;
  transform: scale(1.05); /* 少しだけ大きく */
  filter: blur(8px);     /* 控えめぼやや */
  transition:
    opacity 1.0s ease-out,
    filter 1.0s ease-out,
    transform 1.0s ease-out;
  
  /* はみ出さないように最大幅を100%、必要なら折り返しも */
  max-width: 100%;
  display: inline-block;  /* 必要に応じてインラインブロック */
  box-sizing: border-box; /* パディング・ボーダー込みでサイズ管理 */
  word-break: break-word; /* 長い単語の折り返し */
}

.blurFadeText.blurFade {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}