body {
  background-color: #333535;
}

main {
  position: relative;
  height: 80vh;
}
main article {
  min-width: auto;
}

#copy {
  text-align: center;
  max-width: 400px;
  width: 22%;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, 25%);
  margin-right: -30%;
}
#copy img {
  width: 90%;
}

#top {
  position: absolute;
  max-width: 32vw;
  height: 100%;
  width: 50%;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -25%);
}
#top section {
  position: absolute;
  width: 100%;
}
#top section ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
#top section ul li {
  width: 8vw;
  height: 8vw;
  opacity: 0;
  background-color: #fff;
  animation-name: fadeimg;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  position: relative;
}
#top section ul li:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  animation-name: fadeoutimg;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}
#top section ul li:nth-of-type(13) {
  animation-delay: 0s;
}
#top section ul li:nth-of-type(13):after {
  animation-delay: 1.7s;
}
#top section ul li:nth-of-type(9) {
  animation-delay: 0.1s;
}
#top section ul li:nth-of-type(9):after {
  animation-delay: 1.8s;
}
#top section ul li:nth-of-type(5) {
  animation-delay: 0.2s;
}
#top section ul li:nth-of-type(5):after {
  animation-delay: 1.9s;
}
#top section ul li:nth-of-type(1) {
  animation-delay: 0.3s;
}
#top section ul li:nth-of-type(1):after {
  animation-delay: 2.0s;
}
#top section ul li:nth-of-type(2) {
  animation-delay: 0.4s;
}
#top section ul li:nth-of-type(2):after {
  animation-delay: 2.1s;
}
#top section ul li:nth-of-type(3) {
  animation-delay: 0.5s;
}
#top section ul li:nth-of-type(3):after {
  animation-delay: 2.2s;
}
#top section ul li:nth-of-type(4) {
  animation-delay: 0.6s;
}
#top section ul li:nth-of-type(4):after {
  animation-delay: 2.3s;
}
#top section ul li:nth-of-type(8) {
  animation-delay: 0.7s;
}
#top section ul li:nth-of-type(8):after {
  animation-delay: 2.4s;
}
#top section ul li:nth-of-type(12) {
  animation-delay: 0.8s;
}
#top section ul li:nth-of-type(12):after {
  animation-delay: 2.5s;
}
#top section ul li:nth-of-type(16) {
  animation-delay: 0.9s;
}
#top section ul li:nth-of-type(16):after {
  animation-delay: 2.6s;
}
#top section ul li:nth-of-type(15) {
  animation-delay: 1.0s;
}
#top section ul li:nth-of-type(15):after {
  animation-delay: 2.7s;
}
#top section ul li:nth-of-type(14) {
  animation-delay: 1.1s;
}
#top section ul li:nth-of-type(14):after {
  animation-delay: 2.8s;
}
#top section ul li:nth-of-type(10) {
  animation-delay: 1.2s;
}
#top section ul li:nth-of-type(10):after {
  animation-delay: 2.9s;
}
#top section ul li:nth-of-type(6) {
  animation-delay: 1.3s;
}
#top section ul li:nth-of-type(6):after {
  animation-delay: 3.0s;
}
#top section ul li:nth-of-type(7) {
  animation-delay: 1.4s;
}
#top section ul li:nth-of-type(7):after {
  animation-delay: 3.1s;
}
#top section ul li:nth-of-type(11) {
  animation-delay: 1.5s;
}
#top section ul li:nth-of-type(11):after {
  animation-delay: 3.2s;
}
#top section ul li img {
  width: 100%;
  height: 100%;
}
#top section.anime_01 {
  animation-name: fadeoutimg;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
  animation-delay: 4s;
}
#top section.anime_02 {
  position: absolute;
  top: 0;
  animation-name: fadetitle;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 4s;
  text-align: center;
}
#top section.anime_02 img {
  width: 100%;
}
#top section.anime_02 img:last-child {
  width: 60%;
  margin-top: 5%;
}

@keyframes fadeoutimg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeimg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadetitle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 768px) {
  main {
    padding-top: 0;
    flex-wrap: wrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
  }
  main article {
    min-width: auto;
  }

  #copy {
    width: 17%;
    right: 3%;
    top: auto;
    bottom: 0;
    margin: 0;
    transform: translate(0);
    animation-name: fadetitle;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 4s;
  }
  #copy img {
    width: 100%;
  }

  #top {
    position: static;
    max-width: 600px;
    height: 50vw;
    width: 50%;
    transform: translate(0);
  }
  #top section ul li {
    width: 12.5vw;
    height: 12.5vw;
  }
}