body {
  font-size: calc(25rem + ((1vw - 6.4px) * 3.571));
}

.br-sp {
  display: block;
}

.br-pc {
  display: none;
}

.bg-movie__movie {
  height: 100vh;
  width: auto;
}

/* GLNAV --------------------------------*/
.sp-menu-button {
  display: block;
  width: 10vw;
  height: 10vw;
  position: fixed;
  top: 1%;
  right: 1%;
  z-index: 20000;
}

.sp-menu-button img {
  display: block;
  width: 100%;
}

.glNav {
  background: url(../img/system/bg_system_pattern.png) 0 0 repeat, linear-gradient(to top, #005958 0%, #201333 100%);
  box-shadow: 0px 3px 5px 0px black, inset 0px 0px 3px 3px #ba008c;
  width: 100%;
  top: 0;
  margin: 0 auto;
  padding: 10% 0;
  transform: translate(0, -120%);
  transition: transform 0.2s ease;
}

.glNav.show {
  transform: translate(0, 0);
}

.glNav-corner {
  display: block;
}

.glNav-wrapper {
  max-width: auto;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.glNav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: auto;
  width: 100%;
  margin: 0 auto;
  padding-top: 10px;
  position: relative;
  text-align: center;
}

.glNav-menu__item {
  display: block;
  width: 100%;
}

.glNav-menu__item + .glNav-menu__item {
  margin-left: auto;
}

.glNav-menu__item:nth-of-type(n + 1) {
  margin-top: 5%;
}

.glNav-button-top {
  display: block;
  margin: 0 auto;
  width: 16.5625vw;
  height: 11.5625vw;
  background-size: 100% auto;
}

.glNav-button-top:hover {
  background-position: none;
}

.glNav-button-top.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-character {
  display: block;
  margin: 0 auto;
  width: 46.71875vw;
  height: 11.5625vw;
  background-size: 100% auto;
}

.glNav-button-character:hover {
  background-position: none;
}

.glNav-button-character.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-system {
  display: block;
  margin: 0 auto;
  width: 30.15625vw;
  height: 11.40625vw;
  background-size: 100% auto;
}

.glNav-button-system:hover {
  background-position: none;
}

.glNav-button-system.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-story {
  display: block;
  background-size: 100% auto;
  width: 25.3125vw;
  height: 11.40625vw;
  background-position: 0 0;
  margin: 0 auto;
}

.glNav-button-story:hover {
  background-position: none;
}

.glNav-button-story.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-gallery {
  display: block;
  margin: 0 auto;
  width: 36.875vw;
  height: 11.40625vw;
  background-size: 100% auto;
}

.glNav-button-gallery:hover {
  background-position: none;
}

.glNav-button-gallery.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-product {
  display: block;
  margin: 0 auto;
  width: 35.9375vw;
  height: 10.5625vw;
  background-size: 100% auto;
}

.glNav-button-product:hover {
  background-position: none;
}

.glNav-button-product.selected {
  background-position: 0 100%;
  pointer-events: none;
}

.glNav-button-contest {
  display: block;
  margin: 0 auto;
  width: 35.9375vw;
  height: 10.5625vw;
  background-size: 100% auto;
}

.glNav-button-contest:hover {
  background-position: none;
}

.glNav-button-contest.selected {
  background-position: 0 100%;
  pointer-events: none;
}

/* FLOAT --------------------------------*/
.reserve-button-float {
  width: 32%;
  right: -5%;
  bottom: 13%;
}

.reserve-button-float:hover {
  right: -3%;
}

/* FOOTER --------------------------------*/
.sns-button {
  justify-content: center;
  margin-top: 5%;
}

.sns-button__item {
  position: relative;
  width: 10.41667%;
}

.official-sns {
  max-width: auto;
  max-width: initial;
  width: 98%;
  margin-top: 5%;
}

.official-sns__item {
  width: 32.66667%;
}

.official-sns__item img {
  width: 100%;
}

.official-sns__item:not(:last-of-type) {
  margin-right: auto;
}

.official-sns__item:not(:nth-of-type(3n)) {
  margin-right: 1%;
}

.copy-wrapper {
  display: block;
  margin: 3% auto 5%;
  padding: 0 2%;
  text-align: center;
}

.banner-nip {
  display: block;
  margin: 5% auto 0;
  width: 50%;
}

.banner-nip img {
  width: 100%;
  vertical-align: bottom;
}


  .nav-lg{
    display: none;
  }

  .topics-button-next{
    display: block;
  }
  
  .topics-button-prev{
    display: block;
  }