/* CSS Document */

.top-slide-bottom{
	animation-name:fadeUpAnime_up;
	animation-duration: 1000ms;
	animation-fill-mode:forwards;
	animation-delay: 1s;
	opacity:0;
}
      
@keyframes fadeUpAnime_up{
	from {
		opacity: 0;
		transform: translate(0px, -50px);
	}

	to {
		opacity: 1;
		transform: translate(0,0);
	}
}

.top-slide-up{
	animation-name:fadeUpAnime_up;
	animation-duration: 1000ms;
	animation-fill-mode:forwards;
	animation-delay: 0.5s;
	opacity:0;
}
      
@keyframes fadeUpAnime_up{
	from {
		opacity: 0;
		transform: translate(0px, 50px);
	}

	to {
		opacity: 1;
		transform: translate(0,0);
	}
}

/* フェードイン用のCSS */


/* 透明からフェードイン */
.slide-appear {
	opacity: 0;
	transform: translate(0, 0);
	transition: all 1200ms ease-out;
 }

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 60px);
	transition: all 1s ease-out;
 }

.slide-bottom1 {
	opacity: 0;
	transform: translate(0, 40px);
	transition: all 0.5s ease-out;
 }

.slide-bottom2 {
	opacity: 0;
	transform: translate(0, 80px);
	transition: all 0.6s ease-out;
 }

.slide-bottom3 {
	opacity: 0;
	transform: translate(0, 120px);
	transition: all 0.7s ease-out;
 }


.slide-bottom4 {
	opacity: 0;
	transform: translate(0, 140px);
	transition: all 0.8s ease-out;
 }

.slide-bottom5 {
	opacity: 0;
	transform: translate(-50px, 20px);
	transition: all 300ms ease-out;
 }

 /* 左からフェードイン */

.slide-left {
	opacity: 0;
	transform: translate(-50px, 0);
	transition: all 600ms ease-out;
 }

.slide-left-bottom {
	opacity: 0;
	transform: translate(-50px, 20px);
	transition: all 300ms ease-out;
 }

.slide-left1 {
	opacity: 0;
	transform: translate(-50px, -50%);
	transition: all 400ms ease-out;
 }