@charset "utf-8";


body{
  background-color: #000000;
}

.main-wrapper{
  width: 75%;
  height: 400px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main-wrapper-page8{
  width: 80%;

  margin: auto;
}

.container-page8{
  display: block;
  width: 100%;
  height: 300px;

  margin-top: 25px;
}

.img-area{
  display: inline-block;
  width: 40%;
  height: 100%;
  margin-left: 5%;
  margin-right: 5%;
  float: left;
  text-align: center;
  }

.img-area img{
  width: 100%;
}

.text-area{
  display: inline-block;
  width: 40%;
  height: 100%;
  margin-left: 5%;
  margin-right: 5%;
  float: left;
}

.text-area p{
  color: #ffffff;
}

.text-area a{
  color: #ffffff;
  text-decoration: none;
  font-size: 25px;
}

.cnt-area{
  text-align: center;
}

.home-link{
  color: #ffffff;
  text-decoration: none;
  font-size:30px;

}

/*右から*/
.move1{
  animation-name: img-fade-in1;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

/*下から*/
.move2{
  animation-name: img-fade-in2;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

/*左から*/
.move3{
  animation-name: img-fade-in3;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}

/*上から*/
.move4{
  animation-name: text-fade-in;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}



@keyframes img-fade-in1{
  0%{opacity: 0;
    transform: translatex(100px);
  }
  100%{opacity: 1;
    transform: translatex(0px);
  }
}

@keyframes img-fade-in2{
  0%{opacity: 0;
    transform: translatey(-100px);
  }
  100%{opacity: 1;
    transform: translatey(0px);
  }
}
@keyframes img-fade-in3{
  0%{opacity: 0;
    transform: translatex(-100px);
  }
  100%{opacity: 1;
    transform: translatex(0px);
  }
}

@keyframes text-fade-in{
  0%{opacity: 0;
    transform: translatey(100px);
  }
  100%{opacity: 1;
    transform: translatey(0px);
  }
}