@charset "UTF-8";

/* ====================================
	アニメーションkeyframes設定
 ==================================== */
 /* メインビジュアル  アニメーション */

 @keyframes jello {
    0%,11.1%,to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

 @keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.02,1.02,1.02);
        transform: scale3d(1.02,1.02,1.02)
    }

    80% {
        -webkit-transform: scale3d(.98,.98,.98);
        transform: scale3d(.98,.98,.98)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes elasticity
{
	0% {
		opacity: 1;
		transform: translate(-50%,10%);
	}
	58% {
		opacity: 1;
		transform: translate(-50%,10%);
	}
	72% {
		opacity: 1;
		transform: translate(-50%,0%);
	}
	86% {
		opacity: 1;
		transform: translate(-50%,0%);
	}
	100% {
		opacity: 1;
		transform: translate(-50%,10%);
	}
}