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

.box{
  opacity: 0;
}

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:4s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  /* 下から */
  
  .fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* 上から */
  
  .fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* 左から */
  
  .fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeLeftAnime{
    from {
      opacity: 0;
    transform: translateX(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  
  /* 右から */
  
  .fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeRightAnime{
    from {
      opacity: 0;
    transform: translateX(100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }

  .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: 1s;
    }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeInTrigger,
  .fadeUpTrigger,
  .fadeDownTrigger,
  .fadeLeftTrigger,
  .fadeRightTrigger{
      opacity: 0;
  }

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

/*全共通*/

.slide-in {
    overflow: hidden;
      display: inline-block;
  }
  
  .slide-in_inner {
    display: inline-block;
  
  }
  
  /*左右のアニメーション*/
  .leftAnime{
      opacity: 0;/*事前に透過0にして消しておく*/
  }
  /*左右のアニメーション*/
  .leftAnime02{
    opacity: 0;/*事前に透過0にして消しておく*/
  }
  .slideAnimeLeftRight {
    animation-name:slideTextX100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  .slideAnimeLeftRight02 {
    animation-name:slideTextX100;
    animation-duration:0.8s;
    animation-delay: 0.5s;
    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:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  .slideAnimeRightLeft02 {
    animation-name:slideTextX-100;
    animation-duration:0.8s;
    animation-delay: 0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  
  @keyframes slideTextX-100 {
    from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
      opacity: 0;
    }
  
    to {
    transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
  }