.fadeInUpTrigger{
    opacity: 0;
}



/* その場で */
.fadeIn, section{
    animation-name:fadeInAnime;
    animation-duration:.7s;
    animation-delay: .5s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    opacity:0;
    z-index: 2;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    /* 下から */
    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:.7s;
    animation-delay: .3s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(50px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 上から */
    
    .fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:0.5s;
    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.5s;
    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.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }