@charset "utf-8";

.cb{
	/* floatを解除 */
	clear: both;
	}


/*==================================================
挙動
===================================*/

/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
    }
    
    /* 下から */
    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    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: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);
        }
    }

    /* ぼかしから*/
.blur{
    animation-name:blurAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    }
  }