@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
@media screen and (min-width:768px){

.fadeInTrigger, .slowfadeInTrigger,.fadeUpTrigger, 
.fadeDownTrigger, .fadeLeftTrigger, .fadeLeftslowTrigger,
.fadeLeftfastTrigger, .fadeRightTrigger {
    opacity: 0;
}


/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
/* その場で */
.slowfadeIn{
  animation-name:slowfadeInAnime;
  animation-duration:4s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes slowfadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

    
    /* 下から */
    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    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.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:1s;
    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:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

       /* 左から はやい */
    
.fadeLeftfast{
        animation-name:fadeLeftfastAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes fadeLeftfastAnime{
          from {
            opacity: 0;
            transform: translateX(-900px);
          }
        
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
        


       /* 左から 高さある */
    
       .fadeLeftslow{
        animation-name:fadeLeftslowAnime;
        animation-duration:2s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes fadeLeftslowAnime{
          from {
            opacity: 0;
            transform: translateX(-50px);
          }
        
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
      }




/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:767px){  
  
  
.sp_fadeInTrigger, .sp_slowfadeInTrigger, .sp_fadeUpTrigger, 
.sp_fadeDownTrigger, .sp_fadeLeftTrigger, .sp_fadeLeftslowTrigger,
.sp_fadeLeftfastTrigger, .sp_fadeRightTrigger {
    opacity: 0;
}


/* その場で */
.sp_fadeIn{
    animation-name:sp_fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes sp_fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }
    
    /* 下から */
    
    .sp_fadeUp{
    animation-name:sp_fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes sp_fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 上から */
    
    .sp_fadeDown{
    animation-name:sp_fadeDownAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes sp_fadeDownAnime{
      from {
        opacity: 0;
        transform: translateY(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 左から　*/
    
    .sp_fadeLeft{
    animation-name:sp_fadeLeftAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes sp_fadeLeftAnime{
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    /* 右から */
    
    .sp_fadeRight{
    animation-name:sp_fadeRightAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes sp_fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

       /* 左から はやい */
    
.sp_fadeLeftfast{
        animation-name:sp_fadeLeftfastAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes sp_fadeLeftfastAnime{
          from {
            opacity: 0;
            transform: translateX(-900px);
          }
        
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
        


       /* 左から 高さある */
    
       .sp_fadeLeftslow{
        animation-name:sp_fadeLeftslowAnime;
        animation-duration:2s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes sp_fadeLeftslowAnime{
          from {
            opacity: 0;
            transform: translateX(-50px);
          }
        
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
/* その場で */
.sp_slowfadeIn{
  animation-name:sp_slowfadeInAnime;
  animation-duration:4s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes sp_slowfadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

        
      }