body {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url('../images/top/sp-package-img.png'),
                    url('../images/top/sp-background-mv.png');
  background-size: 84%, 72%;
  background-position: center 145%, center 12%;
  overflow: hidden;
}

.bg-telop {
  position: absolute;
  width: 1200px;
  z-index: 0;
  height: 100%;
  background-image: url("../images/top/telop.png"), url("../images/top/telop.png");
  background-repeat: repeat-x, repeat-x;
  background-size: 30%, 30%;
  animation: moveBg 5s infinite linear;
}

@keyframes moveBg{
    0%    { background-position: 50% 2%, 50% 98%; }
    100%  { background-position: 7% 2%, 93% 98%; }
}

.nav-img {
  position: absolute;
  z-index: 5;
}

.nav-img a,
.nav-img img {
  display: block;
  height: 110px;
  width: auto;
}

.nav-img.about {
  left: 5vw;
  top: 8vh;
}

.nav-img.event {
  right: 5vw;
  top: 18vh;
}

.nav-img.cm {
  left: 5vw;
  top: 28vh;
}

.nav-img.sponsor {
  right: 5vw;
  top: 38vh;
}

.nav-img.ura {
  top: 80vh;
  right: 10vw;
}

.nav-img.ura img,
.nav-img.ura a {
  height: 40px !important;
}

.package-img {
  position: absolute;
  z-index: 1;
  width: 84%;
  bottom: -20vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#canvas {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
}