/* fadeUp */

.fadeUp {

	animation-name: fadeUpAnime;

	animation-duration: 0.8s;

	animation-fill-mode: forwards;

	opacity: 0;

}

@keyframes fadeUpAnime {

from {

	opacity: 0;

	transform: translateY(5px);

}

to {

	opacity: 1;

	transform: translateY(0);

}

}

/* 順番がくるまで消しておくスタイル */

.loading-transparent {

	opacity: 0;

}

/* fadeIn */

.fadeIn {

	animation-name: fadeInAnime;

	animation-duration: 0.5s;

	animation-fill-mode: forwards;

	opacity: 0;

}

@keyframes fadeInAnime {

from {

	opacity: 0;

}

to {

	opacity: 1;

}

}





/* fadeOut */

.fadeOut {

	animation-name: fadeOutAnime;

	animation-duration: 0.5s;

	animation-fill-mode: forwards;

	opacity: 1;

}

@keyframes fadeOutAnime {

from {

	opacity: 1;

}

to {

	opacity: 0;

}

}



/* fadeLeft */

.fadeLeft {

	animation-name: fadeLeftAnime;

	animation-duration: 1s;

	animation-fill-mode: forwards;

	opacity: 0;

}

@keyframes fadeLeftAnime {

from {

	opacity: 0;

	transform: translateX(-15px);

}

to {

	opacity: 1;

	transform: translateX(0);

}

}



/* .fadeLeft-a {

	opacity: 0;

} */



/* fadeDown */

.fadeDown {

	animation-name: fadeDownAnime;

	animation-duration: 1s;

	animation-fill-mode: forwards;

	opacity: 0;

}

@keyframes fadeDownAnime {

from {

	opacity: 0;

	transform: translateY(-15px);

}

to {

	opacity: 1;

	transform: translateY(0);

}

}