/* fadeIn */
.fadeIn{
    animation-name: fadeInAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .fadeInTrigger{
        opacity: 0;
    }

    /* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    transition : all 1s;
    opacity:0;
    }
.fadeUpsec{
    animation-name:fadeUpAnimesec;
    animation-duration:1s;
    animation-fill-mode:forwards;
    transition : all 1s;
    opacity:0;
}
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }
    @keyframes fadeUpAnimesec{
        from {
          opacity: 0;
        transform: translateY(100px);
        }
      
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .fadeUpTrigger, .fadeUpTrigger2{
        opacity: 0;
        overflow:hidden;
    }