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

@keyframes updown_anim{
  0%{
    transform: translateY(130%); /*表示範囲外から*/
      opacity: 0;
  }
    
     99%{
    transform : translateY(0); /*文字が上に揃うまで待機*/

  } 

  100%{
    transform: translateY(0); /*文字が上に揃うまで待機*/
      color: #000;
  }
}

/*** アニメーションする要素の親 ***/
.updownanm{
  display: flex; /*　横並びに */
  overflow: hidden; /* はみ出たものを非表示に */
    opacity: 1;
will-change: opacity;
}

/*** アニメーションを適用する要素 ***/
.updownanm span {
  transform: translateY(130%); /*デフォルトで下に隠す*/
  display: block; /*ブロック要素に*/
  animation: 1s updown_anim forwards;
      animation-iteration-count:1;/* アニメーション */
    margin: 0 auto;
}




.boderanm{
      animation: border_anim 0.7s linear forwards;
    content: '';
      width: 90%;
       opacity: 1;
}


@keyframes border_anim {
 from {
   width: 0%;
  }

  to {
   width: 90%;
  }
}