@keyframes fade {
  0% {
    opacity: 0;/* 透明 */
  }
  100% {
    opacity: 1;/* 不透明 */
  }
}

@keyframes BottomToTop2 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(400px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

@keyframes BottomToTop3 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(600px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

@keyframes BottomToTop4 {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(800px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

@keyframes BottomToTop5{
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(1000px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

@keyframes RightToLeft5{
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(1000px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
div.img1{
  animation:  fade 4s ease 0.5s 1 forwards;
}

div.img2{
  animation: fade 4s ease 3.5s 1 forwards;
}

div.img3{
	animation: fade 4s ease 6.5s 1 forwards;
}

div.img4{
  animation: fade 4s ease 5s 1 forwards;
}

div.img5{
 animation: fade 4s ease 2s 1 forwards;
}

div.img6{
 animation: fade 6s ease 7s 1 forwards;
}

/*div.img1{
  animation:  fade 4s ease 0.5s 1 forwards;
}

div.img2{
 animation: fade 4s ease 2.5s 1 forwards;
}

div.img3{
	animation: fade 4s ease 3.5s 1 forwards;
}

div.img4{
  animation: fade 4s ease 4.5s 1 forwards;
}

div.img5{
 animation: fade 4s ease 5.5s 1 forwards;
}*/

@keyframes RightToLeft{
  0% {
    opacity: 0;/* 透明 */
  }
  100% {
    opacity: 1;/* 不透明 */
  }
}

p.main_catch{
	animation: RightToLeft 6s ease 8s 1 forwards;
}