.inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ----------------------
    mainContents
   ---------------------- */
#mainContents {
  background: url(../img/system/bg.jpg) no-repeat;
  background-size: contain;
  width: 100vw;
  height: 489.6vw;
  overflow: hidden;
}

#mainContents h2 {
  background-image: url("../img/system/title.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 100vw;
  height: 37.06667vw;
  top: 22vw;
  left: 0;
}
#mainContents h2.show {
  opacity: 1;
}

#meter {
  background-image: url("../img/system/meter.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 96.4vw;
  height: 37.06667vw;
  top: 56.26667vw;
  left: 0;
}
#meter.show {
  opacity: 1;
}

#normal_bg {
  background-image: url("../img/system/normal_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 98vw;
  height: 45.46667vw;
  top: 91.2vw;
  left: 0.8vw;
}
#normal_bg.show {
  opacity: 1;
}

#normal_img {
  background-image: url("../img/system/normal_img.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 93.86667vw;
  height: 40vw;
  top: 93.86667vw;
  left: 2.66667vw;
}
#normal_img.show {
  opacity: 1;
}

#mission_bg {
  background-image: url("../img/system/mission_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 98.13333vw;
  height: 44.66667vw;
  top: 135.73333vw;
  left: 0.8vw;
}
#mission_bg.show {
  opacity: 1;
}

#mission_img {
  background-image: url("../img/system/mission_img.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 95.6vw;
  height: 49.33333vw;
  top: 128.8vw;
  left: 4.26667vw;
}
#mission_img.show {
  opacity: 1;
}

#reach_bg {
  background-image: url("../img/system/reach_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 100vw;
  height: 249.6vw;
  top: 236vw;
  left: 0;
}
#reach_bg.show {
  opacity: 1;
}

#reach_img {
  background-image: url("../img/system/reach_img.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 92.8vw;
  height: 226.8vw;
  top: 249.86667vw;
  left: 7.2vw;
}
#reach_img.show {
  opacity: 1;
}

#ranka_img {
  background-image: url("../img/system/ranka_img.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  opacity: 0;
  transition: opacity 0.4s linear;
  width: 98.13333vw;
  height: 57.2vw;
  top: 179.6vw;
  left: 1.2vw;
}
#ranka_img.show {
  opacity: 1;
}

#arrow {
  background: url("../img/system/arrow.png") no-repeat;
  background-size: contain;
  width: 35.86667vw;
  height: 284vw;
  position: absolute;
  top: 101.6vw;
  left: 56.8vw;
  opacity: 0;
  transform: translate(0, -30vw);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
#arrow.show {
  opacity: 1;
  transform: translate(0, 0);
}