@charset "utf-8";

/*左からフェード＆スライド*/
.slide-left {
	-webkit-animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: slide-left 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
    @-webkit-keyframes slide-left {
    0% {-webkit-transform: translateX(200px);
                transform: translateX(200px);
                opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
    }
    }
    @keyframes slide-left {
    0% {
        -webkit-transform: translateX(200px);
                transform: translateX(200px);
                opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
    }
}

/*右からフェード＆スライド*/
.slide-right {
	-webkit-animation: slide-right 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s both;
	        animation: slide-right 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s both;
}
    @-webkit-keyframes slide-right {
    0% {
      -webkit-transform: translateX(-200px);
              transform: translateX(-200px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity: 1;
    }
    }
    @keyframes slide-right {
        0% {
        -webkit-transform: translateX(-200px);
                transform: translateX(-200px);
                opacity: 0;
        }
        100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
        }
    }


/*下からフェード＆スライド（早く）*/
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 1.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: fade-in-bottom 1.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
    @-webkit-keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
    }
    @keyframes fade-in-bottom {
        0% {
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
                opacity: 0;
        }
        100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
        }
    }


/*下からフェード＆スライド（ゆっくり）*/
.slide-in-bottom_slow {
	-webkit-animation: slide-in-bottom_slow 3.5s 0s both;
	        animation: slide-in-bottom_slow 3.5s 0s both;
}
    @-webkit-keyframes slide-in-bottom_slow {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
    }
    @keyframes slide-in-bottom_slow {
        0% {
        -webkit-transform: translateY(1000px);
                transform: translateY(1000px);
                opacity: 0;
        }
        100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
        }
    }


/*フェードイン*/
.fade-in {
	-webkit-animation: fade-in 2s 0.5s ease-in both;
	        animation: fade-in 2s 0.5s ease-in both;
}
    @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
    }
    @keyframes fade-in {
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }


/*スタンプを押したような動き*/
.puff-in-center {
	-webkit-animation: puff-in-center 1.0s cubic-bezier(0.950, 0.050, 0.795, 0.035) 5.0s both;
	        animation: puff-in-center 1.0s cubic-bezier(0.950, 0.050, 0.795, 0.035) 5.0s both;
}
    @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
    }
    @keyframes puff-in-center {
        0% {
        -webkit-transform: scale(2);
                transform: scale(2);
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 0;
        }
        100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
        }
    }


/* ふわふわした動き */
.fuwafuwa {
    animation: 5s fuwafuwa 0s infinite;
}
@keyframes fuwafuwa {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
    }


/* マウスオーバーでガタガタ動くアニメーション */
.shake:hover {
    animation: shake 1.0s ease-in-out forwards;
}
    @keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
    }