body {
    animation: fadeInBody 2s ease 0s 1 normal;
    -webkit-animation: fadeInBody 2s ease 0s 1 normal;
}

@keyframes fadeInBody {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeInBody {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*フェードイン */
.fadeIn {
    opacity: 0;
}
.st-fadeIn {
    animation: an-fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    opacity: 0;
}
.st-fadeIn-top {
    animation: an-fadeIn-top 5s 1 forwards;
    opacity: 0;
}
@keyframes an-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes an-fadeIn-top {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*バウンス */
.bound {
}
.st-bound {
    animation: an-bound 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
    transform: translateY(0);
}
    
@keyframes an-bound {
	0% {
    transform: translateY(0);
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	25% {
    transform: translateY(-15px);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	50% {
    transform: translateY(0);
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	75% {
    transform: translateY(-5px);
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	100% {
    transform: translateY(0)
	}
}

/*左から*/
.leftIn {
    transform: translateX(-50px);
    opacity: 0;
}
.st-leftIn {
    animation: an-leftIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateX(-50px);
    opacity: 0;
}

@keyframes an-leftIn {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/*右から */
.rightIn {
    transform: translateX(20px);
    opacity: 0;
}

.st-rightIn {
    animation: an-rightIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateX(20px);
    opacity: 0;
}

@keyframes an-rightIn {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}


/*ズームイン */
.zoomIn {
    transform: scale(1.4);
    opacity: 0;
}

.st-zoomIn {
    animation: an-zoomIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: scale(1.4);
    opacity: 0;
}

@keyframes an-zoomIn {
    0% {
        opacity: 0;
        transform: scale(1.4);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*アップ */
.upIn {
    transform: translateY(75px);
    opacity: 0;
}

.st-upIn {
    animation: an-upIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    transform: translateY(75px);
    opacity: 0;
}
@keyframes an-upIn {
    0% {
        opacity: 0;
        transform: translateY(75px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}




/*ステップ*/
.delay02 {
    animation-delay: 0.05s;
}
.delay03 {
    animation-delay: 0.1s;
}
.delay04 {
    animation-delay: 0.15s;
}
.delay05 {
    animation-delay: 0.2s;
}
.delay06 {
    animation-delay: 0.25s;
}
.delay07 {
    animation-delay: 0.3s;
}
.delay08 {
    animation-delay: 0.35s;
}
.delay09 {
    animation-delay: 0.4s;
}
.delay10 {
    animation-delay: 0.45s;
}
.delay11 {
    animation-delay: 0.5s;
}
.delay12 {
    animation-delay: 0.55s;
}
.delay13 {
    animation-delay: 0.6s;
}
.delay14 {
    animation-delay: 0.65s;
}
.delay15 {
    animation-delay: 0.7s;
}