.outer{
  width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 450px;
  z-index: 99;
}

.topTextAni01 {
	animation: logotext_01 6s ease 0s forwards;	
	font-size: 25px;
    color: #333;
    position: absolute;
    top: 120px;
    bottom: 0;
    width: 100%;
    line-height: 180%;
}

.logo01 {
	animation: logo_01 2s ease 0s forwards;	
}

.logo02 {
	animation: logo_02 2s ease 0s forwards;	
	margin-left: -50px;
    margin-top: 30px;
}

.logo03 {
	animation: logo_03 2s ease 0s forwards;	
    margin-top: 30px;
}

.logo04 {
	animation: logo_04 2s ease 0s forwards;	
    margin-top: 30px;
}

.delay-time10 {
	animation-delay: 1.0s;
	opacity: 0;
}

.delay-time20 {
	animation-delay: 2.0s;
	opacity: 0;
}

.delay-time30 {
	animation-delay: 3.0s;
	opacity: 0;
}

.delay-time50 {
	animation-delay: 5.0s;
	opacity: 0;
}

.delay-time58 {
	animation-delay: 5.8s;
	opacity: 0;
}

.delay-time66 {
	animation-delay: 6.6s;
	opacity: 0;
}

.delay-time72 {
	animation-delay: 7.2s;
	opacity: 0;
}

@keyframes logotext_01 {
  0% {
  transform: translateY(100px);
  opacity: 0;
  }

  50% {
  transform: translateY(0px);
  opacity: 100%;
  }

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

@keyframes logo_01 {
  0% {
  transform: translateX(-400px);
  opacity: 0;
  }

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

@keyframes logo_02 {
  0% {
  transform: translateX(400px);
  opacity: 0;
  }

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

@keyframes logo_03 {
  0% {
  transform: translateX(-400px);
  opacity: 0;
  }

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

@keyframes logo_04 {
  0% {
  transform: translateY(100px);
  opacity: 0;
  }

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

@media screen and (max-width: 767px) {
/* 768pxまでの幅の場合に適応される */

.inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 250px;
  z-index: 99;
}
	
.topTextAni01 {
	animation: logotext_01 6s ease 0s forwards;	
	font-size: 18px;
    color: #333;
    position: absolute;
    top: 120px;
    bottom: 0;
    width: 100%;
    line-height: 180%;
}

.logo01 img{
    width: 60%;
    height: auto;
}

.logo02 img{
    width: 60%;
    height: auto;
}

.logo03 img{
    width: 60%;
    height: auto;
}

.logo04 img{
    width: 60%;
    height: auto;
}

}