section {
  margin-bottom: 80px;
}

#bgmBox {
  background: url(../img/btn_bgm.png) 0 0 no-repeat;
  background-size: 81px 243px;
  z-index: 10050;
  pointer-events: auto;
  width: 81px;
  height: 81px;
  right: 43.2px;
  bottom: -108.8px;
}

.common-window-text {
  font-size: 1em;
}

.section-top:before {
  content: "";
}

.first-view-container {
  background: url(../img/firstview_package_sp.jpg) 55% 55% no-repeat;
  background-size: contain;
}
.first-view-logo {
  top: 6%;
}
.first-view-catch {
  top: 5%;
}

.top-movie-wrapper {
  display: none;
}

.top {
  display: block;
  width: 100%;
  height: initial;
}
.top .main-visual-wrapper {
  display: block;
  position: relative;
  width: 100vw;
  height: auto;
  margin: 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 1;
}
.top .main-visual-container {
  display: block;
  width: 100%;
  position: relative;
  margin: 0%;
}
.top .main-visual-container img {
  display: block;
  width: 100%;
  margin: 0;
}
.top .main-shadow {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100vw;
  margin-right: 0;
  margin-left: auto;
  -webkit-transform: translate(5%, 0);
          transform: translate(5%, 0);
}
.top .main-shadow img {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}
.top .main-visual {
  width: 100%;
  max-width: 100vw;
  top: 0;
  right: 6%;
  z-index: 1;
  -webkit-transform: translate(5%, 0);
          transform: translate(5%, 0);
}
.top .main-visual-character {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}
.top .main-visual-character.displayend {
  display: none;
}
.top .main-catch {
  position: absolute;
  height: 80vw;
  top: 10vw;
  left: 2vw;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
}
.top .main-logo-wrapper {
  top: 0;
}
.top .main-logo-container {
  margin: 20% 0;
}
.top .main-logo img {
  width: 100%;
}
.top .main-release {
  position: absolute;
  width: 65vw;
  top: auto;
  left: auto;
  bottom: 20vw;
  right: 4vw;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
}
.top .main-release img {
  display: block;
  position: relative;
  width: 100%;
}

.main-order-button {
  position: absolute;
  top: -33%;
}

.top-character-image-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.top-character-image-container.robot {
  width: 60%;
  margin: auto;
  margin-right: 0;
  margin-bottom: -8%;
  padding-top: 0;
}
.top-character-image-container.robot img {
  display: block;
  margin: 0 25% 0 auto;
}
.top-character-image-container.trico {
  width: 60%;
  margin: auto;
  margin-left: 0;
}
.top-character-image-container.trico img {
  display: block;
  margin: 0 auto 0 25%;
}
.top-character-image-text.robot {
  top: -19%;
  left: -57%;
}
.top-character-image-text.trico {
  top: 51%;
  right: -27%;
}
.top-system-image-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.top-system-image-container {
  width: 70%;
}
.top-system-image-btn {
  margin-right: 10%;
}

.main-banner-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 7% 0;
}
.main-banner-item {
  display: block;
  position: relative;
  cursor: pointer;
}

.topics {
  margin: 2% auto;
}
.topics-wrapper {
  width: 100%;
  margin: auto;
}
.topics-caption {
  margin: 5% auto;
}

.topics-button-prev, .topics-button-next {
  display: block;
  width: 12vw;
  max-width: 90px;
  height: auto;
  background-image: none;
  top: 28%;
}
.topics-button-prev img, .topics-button-next img {
  vertical-align: bottom;
  width: 100%;
}
.topics-button-prev {
  left: 2vw;
}
.topics-button-next {
  right: 2vw;
}

.topics-pagination {
  position: relative;
  margin-top: 10px;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: gray;
  margin: 0 2%;
}
.swiper-pagination-bullet-active {
  background: rgb(255, 133, 79);
}

.topics-list {
  display: block;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}
.topics-list-block {
  max-width: 960px;
  margin: 0 auto;
}
.topics-item-wrapper {
  overflow: visible;
}
.topics-item-container {
  display: block;
  width: auto;
  height: 800px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.topics-card {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}

.order-button-ps4 {
  font-size: 0.85em;
}
.order-button-switch {
  font-size: 0.85em;
}
.order-button-comingsoon {
  font-size: 0.85em;
}
.order-button-buy {
  font-size: 0.85em;
}