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: rgb(24, 14, 13);
  width: 100%;
  top: 0;
  margin: 0 auto;
  padding: 10% 0;
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.glNav.show {
  -webkit-transform: translate(0, 0);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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: 48%;
}
.glNav-menu__item + .glNav-menu__item {
  margin-left: auto;
}
.glNav-menu__item:nth-of-type(n + 1) {
  margin-top: 0%;
  margin-left: auto;
}

.glNav-button-top {
  background: url(../img/sp/glnav_top_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-top:hover {
  background-position: none;
}
.glNav-button-top.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-top.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 112px;
  height: 122px;
  right: 0;
  top: -30px;
  background: url(../img/sp/star.png);
  background-size: cover;
  z-index: 50;
}

.glNav-button-character {
  background: url(../img/sp/glnav_character_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-character:hover {
  background-position: none;
}
.glNav-button-character.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-character.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 112px;
  height: 122px;
  right: -40px;
  top: -10px;
  background: url(../img/sp/star.png);
  background-size: cover;
  z-index: 50;
}

.glNav-button-system {
  background: url(../img/sp/glnav_system_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-system:hover {
  background-position: none;
}
.glNav-button-system.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-system.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 102.4px;
  height: 108.8px;
  right: 0;
  bottom: 0;
  background: url(../img/sp/flower.png);
  background-size: cover;
  z-index: 50;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.glNav-button-story {
  background: url(../img/sp/glnav_story_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-story:hover {
  background-position: none;
}
.glNav-button-story.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-story.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 128px;
  height: 136px;
  left: -34px;
  bottom: -10px;
  background: url(../img/sp/flower.png);
  background-size: cover;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  z-index: 50;
}

.glNav-button-gallery {
  background: url(../img/sp/glnav_gallery_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-gallery:hover {
  background-position: none;
}
.glNav-button-gallery.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-gallery.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 89.6px;
  height: 97.6px;
  left: 0;
  top: -30px;
  background: url(../img/sp/star.png);
  background-size: cover;
  z-index: 50;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.glNav-button-special {
  background: url(../img/sp/glnav_special_sp.png) no-repeat;
  display: block;
  margin: 0 auto;
  width: 43.9583333333vw;
  height: 14.1666666667vw;
  background-size: 100% auto;
}
.glNav-button-special:hover {
  background-position: none;
}
.glNav-button-special.selected {
  background-position: 0 100%;
  pointer-events: none;
}
.glNav-button-special.selected:after {
  content: "";
  display: block;
  position: absolute;
  width: 89.6px;
  height: 95.2px;
  right: 0;
  top: -10px;
  background: url(../img/sp/flower.png);
  background-size: cover;
  z-index: 50;
}

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

/* FOOTER --------------------------------*/
.sns-button {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5%;
}
.sns-button__item {
  position: relative;
  width: 10.4166666667%;
}

.official-sns {
  max-width: auto;
  max-width: initial;
  width: 98%;
  margin-top: 5%;
}
.official-sns__item {
  width: 32.6666666667%;
}
.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;
}

.footer {
  position: relative;
  bottom: initial;
  left: initial;
}

/* NEW --------------------------------*/
/* common */
.common-window__caption.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 16%;
  height: 0;
  padding-bottom: 8%;
  position: absolute;
  top: -15%;
  left: -1%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.select-buttons__item.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 19%;
  height: 0;
  padding-bottom: 9.5%;
  position: absolute;
  top: -25%;
  left: 3%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

/* glNav */
.glNav-menu__item.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 15%;
  height: 0;
  padding-bottom: 7.5%;
  position: absolute;
  top: 54%;
  left: auto;
  bottom: auto;
  right: 18%;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

/* top */
.glNav-button-top.new:before,
.glNav-button-story.new:before,
.glNav-button-character.new:before,
.glNav-button-system.new:before,
.glNav-button-gallery.new:before,
.glNav-button-special.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 25%;
  height: 0;
  padding-bottom: 12.5%;
  position: absolute;
  top: -10%;
  left: auto;
  bottom: auto;
  right: -4%;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

/* character */
.character-section.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 14%;
  height: 0;
  padding-bottom: 7%;
  position: absolute;
  top: 4%;
  left: 0%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

/* system */
.system-start.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 18%;
  height: 0;
  padding-bottom: 9%;
  position: absolute;
  top: -5%;
  left: -1%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.system-select-menu__item.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 10%;
  height: 0;
  padding-bottom: 5%;
  position: absolute;
  top: -10%;
  left: 20%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.system-caption.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 16%;
  height: 0;
  padding-bottom: 8%;
  position: absolute;
  top: auto;
  left: 2%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.system-section-caption.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 16%;
  height: 0;
  padding-bottom: 8%;
  position: absolute;
  top: auto;
  left: 0;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.system-section-flexboxes__item.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 17%;
  height: 0;
  padding-bottom: 8.5%;
  position: absolute;
  top: -10px;
  left: 0%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.system-section-flexboxes__item-full.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 17%;
  height: 0;
  padding-bottom: 8.5%;
  position: absolute;
  top: -10px;
  left: 0%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.ability-wrapper.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 10%;
  height: 0;
  padding-bottom: 5%;
  position: absolute;
  top: -8%;
  left: -3%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.common-window-caption.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 10%;
  height: 0;
  padding-bottom: 5%;
  position: absolute;
  top: -13%;
  left: auto;
  bottom: auto;
  right: 0%;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.streaming-image.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 10%;
  height: 0;
  padding-bottom: 5%;
  position: absolute;
  top: 0;
  left: auto;
  bottom: auto;
  right: 2%;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.goods-image.new:before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 20%;
  height: 0;
  padding-bottom: 10%;
  position: absolute;
  top: -5%;
  left: 0%;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}

.common-window.topics div.newinfo.new::before {
  content: "";
  background: url(../img/new.png) 0 0 no-repeat;
  background-size: cover;
  width: 15%;
  height: 0;
  padding-bottom: 7.5%;
  position: absolute;
  top: -0.5em;
  left: 9.4em;
  bottom: auto;
  right: auto;
  pointer-events: none;
  z-index: 100;
  -webkit-animation: anim-new 1.5s infinite ease;
          animation: anim-new 1.5s infinite ease;
}