/* 矢印の動き */
@keyframes arrow {
    0% {
      transform: translate(0, 0);
    }
    60% {
      transform: translate(0px, 30px);
    }
    0%, 60%, 100% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
  }


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
    from {
      transform: translateX(-100%); /*要素を左の枠外に移動*/
          opacity: 0;
    }
  
    to {
      transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
  }
  
  .slideAnimeRightLeft {
      animation-name:slideTextX-100;
      animation-duration:1.8s;
      animation-fill-mode:forwards;
      opacity: 0;
  }
  
  
  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);/*要素を右の枠外に移動*/
      opacity: 0;
    }
  
    to {
      transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
  }

/* 画像のフェードイン */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeRightAnime{
    from {
      opacity: 0;
    transform: translateX(100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }

  /* 下線アニメーション */
  .underline-before{
    padding-bottom: 5px;
    background: linear-gradient(rgba(0, 0, 0, 0.373),rgba(0, 0, 0, 0.373)) 0 100%/0 1px no-repeat;
    /*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */
  
    transition: background 1s;
    /*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */
  
    text-decoration: none;
    /*テキストの装飾の設定 */
    }
    .underline-after {
      background-size: 100% 1px;
      /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
    }
    /* contents-line */
    #contents .underline-before{
      background: linear-gradient(rgba(0, 0, 0, 0.373),rgba(0, 0, 0, 0.373)) top/0.5px 0 no-repeat;
    }
    #contents .underline-after {
      background-size: 0.5px 100%;
    }