section {
  padding: 0;
  height: auto;
  max-height: initial;
}
section .caption-sp {
  display: block;
  position: relative;
  width: 100%;
}
section .caption-sp img {
  display: block;
  position: relative;
  width: 422px;
  height: 136px;
  padding-top: 100px;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0% 0%;
     object-position: 0% 0%;
}

.header-grass {
  display: block;
  position: absolute;
  width: 100%;
  top: initial;
  bottom: -15.5%;
  z-index: 20;
  pointer-events: none;
}
.header-grass img {
  display: block;
  position: relative;
  width: 100%;
  -webkit-animation: 1s anim-showgrassup forwards;
          animation: 1s anim-showgrassup forwards;
}

.glnav-star-1, .glnav-star-2, .glnav-star-3, .glnav-star-4, .glnav-star-5, .glnav-star-6, .glnav-star-7, .glnav-star-8, .glnav-star-9, .glnav-star-10 {
  display: none;
}

#bgmBox {
  -webkit-transform: scale(2);
          transform: scale(2);
  right: 100px;
  bottom: -55px;
}

.common-window.topics {
  margin: 10% auto 5%;
}
.common-window-caption {
  max-width: 100%;
}

.common-image-caption {
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  margin-top: 10px;
}
.common-image-caption.sub {
  margin: auto;
  -webkit-transform-origin: initial;
          transform-origin: initial;
}

.common-image-deco.minikonko {
  display: block;
  right: -30px;
  top: -180px;
}
.common-image-deco.minisakasa {
  display: block;
  right: -30px;
  top: -150px;
}
.common-image-deco.miniflora {
  display: block;
  right: -5px;
  top: -165px;
}
.common-image-deco.konko {
  display: none;
}
.common-image-deco.sakasa {
  display: none;
}
.common-image-deco.flora {
  display: none;
}
.common-image-deco.tanuki-normal {
  top: -384px;
  left: -57px;
}
.common-image-deco.tanuki-attack {
  bottom: -179px;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.common-image-deco.flog-piyo {
  display: none;
}
.common-image-deco.flog-normal {
  top: -443px;
  right: -45px;
}
.common-image-deco.flog-attack {
  bottom: -165px;
  right: 83px;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.common-image-wrapper.charatext {
  width: 100%;
}
.common-image-wrapper.charatext img {
  width: 66%;
}
.common-image-wrapper.story-silhouette {
  width: auto;
  left: initial;
}
.common-image-wrapper.story-silhouette img {
  max-width: 100%;
}

.submenu {
  padding-top: 1%;
  padding-bottom: 2%;
  width: 100%;
  min-width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.submenu-item {
  display: block;
  width: 48vw;
  height: 10.2816vw;
}
.submenu-item:hover {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.submenu-item.show {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.submenu img {
  width: 100%;
}

article {
  width: 92%;
  margin: 0 auto;
  height: auto;
  overflow-y: unset;
}

.content {
  width: 100%;
  height: auto;
  min-height: 600px;
  padding-top: 0.5%;
  padding-bottom: 250px;
}
.content-wrapper {
  padding-top: 0%;
}

.content-wrapper {
  height: auto;
  overflow-y: hidden;
}
.content-wrapper .content-container {
  padding: 0 0 270px;
}
.content-wrapper .content-container.system, .content-wrapper .content-container.special, .content-wrapper .content-container.story {
  padding: 0 0 270px !important;
}

.bg-movie {
  display: none;
}
.bg-movie.visible {
  display: none;
}
.bg-movie.invisible {
  display: none;
}

.section-top {
  background: rgb(252, 229, 198);
}

.top {
  width: 100%;
  height: auto;
  max-width: initial;
}
.top.visible {
  opacity: 1;
}
.top.invisible {
  opacity: 1;
}
.top .main-visual {
  display: block;
  height: 100vh;
  width: auto;
  background-position-x: 47%;
}
.top .main-logo {
  display: none;
  width: 100%;
  top: 28%;
  left: 0%;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.top .main-logo img {
  display: block;
  width: 60%;
  height: auto;
}
.top .main-catch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  left: 0;
}
.top .main-catch img {
  display: block;
  width: 80%;
  height: 100%;
}
.top .top-topics {
  display: block;
  position: relative;
  opacity: 1;
  left: 0;
  bottom: 0;
  -webkit-animation: none;
          animation: none;
  -webkit-transform: none;
          transform: none;
  background: black;
  width: 100%;
  height: auto;
  padding-top: 10%;
  padding-bottom: 4%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.top .top-topics::before {
  content: "";
  width: 212px;
  height: 72px;
  position: absolute;
  left: calc(50% - 106px);
  top: 20px;
}
.top .top-topics .fukidasi {
  width: 95%;
  height: auto;
  position: relative;
  left: initial;
  top: initial;
  overflow: initial;
}
.top .top-topics .fukidasi li p {
  color: white;
  font-size: 1.42em;
}
.top .top-topics .fukidasi li:nth-child(n+6) {
  display: none;
}
.top .banner {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: initial;
  opacity: 1;
  z-index: initial;
  margin: 0 auto;
  padding-bottom: 270px;
  pointer-events: auto;
  background: url("../img/top_bg.jpg");
  background-size: 110% 110%;
  background-position: 50% 50%;
}
.top .banner .banner-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
.top .banner .banner-item {
  display: block;
  width: 50%;
  -webkit-filter: none;
          filter: none;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 1;
}
.top .banner .banner-item.visible {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-filter: none;
          filter: none;
}
.top .banner .banner-item.invisible {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-filter: none;
          filter: none;
}
.top .banner .banner-item:hover {
  opacity: 0.75;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-filter: brightness(1.2em);
          filter: brightness(1.2em);
}
.top .banner .banner-item:nth-child(n+7) {
  display: block;
}
.top .banner .banner-item img {
  display: block;
  position: relative;
}
.top .banner .banner-item:nth-child(n) {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}
.top .banner .banner-item:last-child {
  display: none;
  pointer-events: none;
}

.order-wrapper .order {
  display: block;
  position: absolute;
  left: 2%;
  top: auto;
  bottom: 130px;
  z-index: 1000;
  background: url("../img/top-order.png") no-repeat;
  background-size: cover;
  -webkit-animation: 1s anim-appear forwards;
          animation: 1s anim-appear forwards;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.order-wrapper .order:hover {
  background-image: url("../img/top-order_on.png");
}
.order-wrapper .release-date {
  display: block;
  position: absolute;
  top: auto;
  bottom: 130px;
  left: 24%;
  width: 60%;
  -webkit-animation: 1s anim-appear forwards;
          animation: 1s anim-appear forwards;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.order-wrapper .release-date img {
  width: 100%;
}

.story {
  width: 100%;
  height: auto;
  min-height: 60vh;
  max-width: initial;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.story-character-image-wrapper .text-box {
  width: 753px;
  height: 412px;
}
.story-character-image-wrapper .text-box .text {
  padding: 60px 70px;
  font-size: 37px;
}
.story-character-image-wrapper .neisan {
  top: 88px;
  right: -43px;
}
.story-character-image-wrapper .cues {
  top: 87px;
}
.story-character-image-wrapper .neid {
  right: 40px;
  bottom: 205px;
}
.story-character-image-wrapper .yean {
  right: 40px;
}
.story-character-image-wrapper .goldy {
  top: 100px;
}
.story-character-image-wrapper .silvia {
  top: 90px;
}

.character {
  height: auto;
  min-height: 100vh;
  padding: 10px 0px 250px;
  display: block;
  position: relative;
}
.character-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 5% 0px;
}
.character-wrapper .text-box {
  display: block;
  position: relative;
  background: url("../img/character/textbox.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.character-wrapper .text-box .text {
  padding: 35px 75px;
  font-size: 27.5px;
}
.character-wrapper .text-box .name-plate .name {
  padding: 15px 24px;
  font-size: 27.5px;
}
.character-wrapper .bu.osama {
  width: 45%;
}
.character-wrapper .bu.ouji {
  width: 36%;
}
.character-wrapper .bu img {
  display: block;
  position: relative;
  width: 100%;
}

.system {
  width: 100%;
  height: auto;
  min-height: 60vh;
  max-width: initial;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.gallery {
  width: 100%;
  height: auto;
  min-height: 100vh;
  max-width: initial;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.gallery-movie-wrapper .gallery-movie {
  width: 80%;
  font-size: 1.2em;
}
.gallery-movie-wrapper .gallery-movie .size-small-sp {
  font-size: 1.2em;
}

.special {
  width: 100%;
  height: auto;
  min-height: 100vh;
  max-width: initial;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.special .benefit-container {
  width: 85%;
  height: auto;
}
.special .benefit-container .shopname {
  display: block;
  width: 100%;
  color: rgb(242, 98, 65);
  font-size: 1.6em;
  font-weight: 700;
  margin: 2% auto 0;
}
.special .benefit-container .shopname img {
  width: auto;
  height: auto;
  -webkit-transform: scale(2);
          transform: scale(2);
}
.special .benefit-container .detail {
  width: 90%;
  font-size: 1.6em;
  margin: 0 auto;
}
.special .benefit-container .benefit-frame {
  display: block;
  position: relative;
  max-height: 500px;
}
.special .benefit-container .benefit-frame .image {
  display: block;
  position: relative;
  height: 100%;
  max-height: 500px;
  border: 2px solid rgb(255, 255, 255);
  -webkit-box-shadow: 2px 2px 4px rgb(111, 77, 62);
          box-shadow: 2px 2px 4px rgb(111, 77, 62);
  -o-object-fit: cover;
     object-fit: cover;
}
.special .benefit-container .benefit-frame.animate {
  max-height: 500px;
}
.special .benefit-container .benefit-frame.trader {
  max-height: 500px;
}
.btn-wrapper {
  display: block;
  position: relative;
  margin: 0% 0% 5%;
}
.btn-wrapper .btn {
  display: block;
  position: relative;
  width: 404.8px;
  height: 84.8px;
}
.btn-wrapper .btn p {
  text-align: center;
  color: rgb(220, 199, 140);
  font-size: 1.7em;
}

.deco-chara, .deco-chara2 {
  display: none;
}

.famitsu-wrapper {
  bottom: auto;
  top: 75vh;
  left: auto;
  right: 10px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.famitsu-div {
  width: 25vw;
}

.top-streaming-banner {
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
.top-streaming-banner .streaming-image {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  max-width: initial;
  height: auto;
  margin: 0 auto;
}
.top-streaming-banner .streaming-image img {
  display: block;
  position: relative;
  width: 100%;
}