@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  scroll-behavior: smooth !important;
  font-size: 16px;
}

body {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "Noto Sans CJK JP", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #000;
}

.rblock {
  position: relative;
}

.ablock {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rblock img, .rblock picture,
.ablock img, .ablock picture {
  display: block;
}

.pblock img, .pblock picture {
  display: block;
  width: 100%;
}

li {
  list-style: none;
}

img, picture {
  border: 0;
  vertical-align: top;
}

a {
  color: #ffcc00;
}

#wrapper {
  width: 100%;
  position: relative;
}

.wrapper {
  width: 100%;
}

.pc {
  display: block;
}
@media screen and (max-width: 1360px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 1360px) {
  .sp {
    display: block;
  }
}

.contents {
  position: relative;
  width: 1360px;
  margin: 0 auto;
}
@media screen and (max-width: 1360px) {
  .contents {
    width: 100%;
  }
}

/* common */
#lovl {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  background: #fff;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

.loader {
  font-size: 10px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -3em;
  margin-top: -3em;
  border-top: 1.1em solid #ff7bac;
  border-right: 1.1em solid #ff7bac;
  border-bottom: 1.1em solid #ff7bac;
  background: #fff;
  border-left: 1.1em solid #fff;
  animation: load_circle 0.8s infinite linear;
}

@keyframes load_circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ptop {
  position: fixed;
  right: 1em;
  bottom: 6em;
  width: 15.625em;
  z-index: 100;
}
.ptop img {
  width: 100%;
  display: block;
}
.ptop a {
  pointer-events: auto;
  display: block;
  transition-duration: 0.2s;
}
.ptop a:hover {
  filter: brightness(150%);
}
@media screen and (max-width: 1360px) {
  .ptop {
    width: 20vw;
  }
}

.c_header {
  position: relative;
  width: 100%;
}

#s0 {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background-image: url(../images/top/s0/top_bg2.png), url(../images/top/s0/bg_top.jpg);
  background-image: url(../images/top/s0/top_bg2.png), -webkit-image-set(url(../images/top/s0/bg_top.webp) type("image/webp"), url(../images/top/s0/bg_top.jpg) type("image/jpeg"));
  background-image: url(../images/top/s0/top_bg2.png), image-set(url(../images/top/s0/bg_top.webp) type("image/webp"), url(../images/top/s0/bg_top.jpg) type("image/jpeg"));
  background-position: center bottom, center top;
  background-repeat: repeat-x, no-repeat;
  background-size: auto 128px, 3840px auto;
  background-color: #ffffff;
}
#s0 .contents {
  transition-duration: 0.2s;
  /*
  @include media-min($bp-pc-max + 1) {
      width: 70.833%;
  }
  */
}
#s0 .contents:before {
  content: "";
  display: block;
  padding-top: 51.985%;
}
@media screen and (max-width: 1695px) {
  #s0 .contents:before {
    padding-top: 57%;
  }
}
@media screen and (min-width: 1920px) {
  #s0 {
    background-size: auto 18.104%, auto 100%;
    background-repeat: repeat-x, repeat-x;
  }
}
@media screen and (max-width: 1360px) {
  #s0 {
    background-size: auto 18.104%, 282.352% auto;
  }
}

#s0_tank {
  position: absolute;
  width: 747px;
  margin-left: 0;
  left: calc(50% - 981px);
  /*
  left: 0;
  margin-left: calc(-31.65% - 373.5px); left: 50%;
  */
  bottom: 22px;
}
@media screen and (max-width: 1710px) {
  #s0_tank {
    left: -133px;
    bottom: 1%;
  }
}
@media screen and (max-width: 1360px) {
  #s0_tank {
    left: -9.5%;
    width: 54.92%;
  }
}
#s0_tank img {
  display: block;
  width: 100%;
  transition-duration: 0.2s;
}
#s0_tank {
  transition-duration: 0.2s;
}

.rot {
  pointer-events: none;
  animation: a_rot_l 60s linear infinite;
}

@keyframes a_rot_l {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes a_rot_r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
#s0_g7 {
  position: absolute;
  width: 19.264%;
  left: 87.647%;
  top: 0;
  margin-top: 28.455%;
}

#s0_g6 {
  position: absolute;
  width: 30.808%;
  left: 95.147%;
  top: 0;
  margin-top: -2.868%;
  animation-name: a_rot_r;
}

#s0_g5 {
  position: absolute;
  width: 17.794%;
  left: 91.397%;
  top: 0;
  margin-top: -2.648%;
  z-index: 2;
}

#s0_g4 {
  position: absolute;
  width: 26.838%;
  left: -31.103%;
  top: 0;
  margin-top: -1.25%;
  animation-name: a_rot_r;
}

#s0_g3 {
  position: absolute;
  width: 21.691%;
  left: 4.264%;
  top: 0;
  margin-top: -12.133%;
  animation-name: a_rot_r;
}

#s0_g2 {
  position: absolute;
  width: 34.338%;
  left: -18.824%;
  top: 0;
  margin-top: -14.853%;
}

#s0_g1 {
  position: absolute;
  width: 27.426%;
  left: 65.882%;
  top: 0;
  margin-top: -20%;
  animation-name: a_rot_r;
}

#s0_tx2 {
  position: absolute;
  width: 53.382%;
  left: 24.485%;
  top: 0;
  margin-top: 35.882%;
}
@media screen and (max-width: 1710px) {
  #s0_tx2 {
    left: 40%;
    margin-top: 42%;
  }
}
#s0_tx2 {
  transition-duration: 0.2s;
}

#s0_tx1 {
  position: absolute;
  width: 67.647%;
  left: 16.764%;
  top: 0;
  margin-top: 9.926%;
}

#s0 h1 {
  position: absolute;
  width: 70.441%;
  left: 15.588%;
  top: 0;
  margin-top: 15.441%;
}

#s0_flower {
  position: absolute;
  width: 132.426%;
  left: -15.589%;
  top: 0;
  margin-top: -19.118%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

#menu {
  position: sticky;
  top: 0;
  width: 100%;
  background: url(../images/common/menu/bg_menu.png) repeat-x #FF7BAC;
  background-size: auto 100%;
  z-index: 10;
  color: #fff;
}
#menu .contents:before {
  content: "";
  display: block;
  padding-top: 9.779%;
}
#menu nav {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#menu nav ul {
  position: relative;
}
#menu nav li {
  position: absolute;
  height: 0;
  padding-top: 4.632%;
}
#menu nav .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}
#menu nav .item img {
  transition: opacity 0.2s;
}
#menu nav .item img:nth-child(2) {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  inset: 0;
  opacity: 0;
}
#menu nav .item:hover img:nth-child(1), #menu nav .item.active img:nth-child(1) {
  opacity: 0;
}
#menu nav .item:hover img:nth-child(2), #menu nav .item.active img:nth-child(2) {
  opacity: 1;
}
#menu_top #menu nav .item.active img:nth-child(1) {
  opacity: 1;
}
#menu_top #menu nav .item.active img:nth-child(2) {
  opacity: 0;
}
#menu nav .item.disabled {
  pointer-events: none;
}
#menu nav .item.disabled img:nth-child(1) {
  opacity: 0.5;
}
#menu nav .item.disabled img:nth-child(2) {
  opacity: 0;
}
#menu nav .item:focus-visible {
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}
#menu.is-sticky {
  box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1360px) {
  #menu.is-sticky {
    box-shadow: 0vw 0.5882352941vw 0.5882352941vw 0vw rgba(0, 0, 0, 0.3);
  }
}

#menu_top {
  position: absolute;
  width: 5.661%;
  left: 6.764%;
  top: 0;
  margin-top: 2.941%;
}

#menu_system {
  position: absolute;
  width: 11.617%;
  left: 16.911%;
  top: 0;
  margin-top: 2.941%;
}

#menu_character {
  position: absolute;
  width: 16.617%;
  left: 33.602%;
  top: 0;
  margin-top: 2.941%;
}

#menu_story {
  position: absolute;
  width: 9.485%;
  left: 54.264%;
  top: 0;
  margin-top: 2.941%;
}

#menu_movie {
  position: absolute;
  width: 9.411%;
  left: 67.573%;
  top: 0;
  margin-top: 2.941%;
}

#menu_special {
  position: absolute;
  width: 11.764%;
  left: 82.5%;
  top: 0;
  margin-top: 2.941%;
}

.c_main {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c_section {
  position: relative;
  width: 100%;
}

/* frame */
.frame {
  position: relative;
  width: 91.176%;
  margin: 0 auto;
}
.frame .frametop {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.frame .framehead {
  position: relative;
  width: 21.129%;
  padding-top: 6.4%;
  background-color: #ccc;
  border-radius: 20px 20px 0 0;
}
@media screen and (max-width: 1360px) {
  .frame .framehead {
    border-radius: 1.4705882353vw 1.4705882353vw 0 0;
  }
}
.frame .framehead {
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.37);
}
@media screen and (max-width: 1360px) {
  .frame .framehead {
    box-shadow: 0.7352941176vw 0.7352941176vw 0vw 0vw rgba(0, 0, 0, 0.37);
  }
}
.frame .framehead h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin-top: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame .frametab {
  position: relative;
  top: 1px;
  display: flex;
  justify-content: space-between;
  margin-right: 4.193%;
  width: 46.129%;
}
.frame .frametab .tabitem {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 31.468%;
  padding-top: 10.314%;
  background-color: #fff;
  border-top: 8px solid #FF7BAC;
  border-left: 8px solid #FF7BAC;
  border-right: 8px solid #FF7BAC;
  border-bottom: none;
  border-width: 8px;
}
@media screen and (max-width: 1360px) {
  .frame .frametab .tabitem {
    border-width: 0.5882352941vw;
  }
}
.frame .frametab .tabitem {
  transform: skewX(-16.5deg);
  border-radius: 20px 20px 0 0;
}
@media screen and (max-width: 1360px) {
  .frame .frametab .tabitem {
    border-radius: 1.4705882353vw 1.4705882353vw 0 0;
  }
}
.frame .frametab .tabitem {
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.37);
}
@media screen and (max-width: 1360px) {
  .frame .frametab .tabitem {
    box-shadow: 0.7352941176vw 0.7352941176vw 0vw 0vw rgba(0, 0, 0, 0.37);
  }
}
.frame .frametab .tabitem {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -1.399%;
}
.frame .frametab .tabitem:last-child {
  margin-right: 0;
}
.frame .frametab .tabitem .tablabel {
  display: block;
  position: absolute;
  width: 94%;
  left: 3.666%;
  top: 0;
  margin-top: 10.5%;
  transform: skewX(16.5deg);
}
.frame .frametab .tabitem img:nth-child(2) {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  inset: 0;
  opacity: 0;
}
.frame .frametab .tabitem:hover, .frame .frametab .tabitem[aria-selected=true] {
  background-color: #FF7BAC;
  border-color: #fff;
}
.frame .frametab .tabitem:hover img:nth-child(1), .frame .frametab .tabitem[aria-selected=true] img:nth-child(1) {
  opacity: 0;
}
.frame .frametab .tabitem:hover img:nth-child(2), .frame .frametab .tabitem[aria-selected=true] img:nth-child(2) {
  opacity: 1;
}
.frame .frametab .tabitem:focus-visible {
  outline: 3px solid #0088ff;
}
.frame .framebody {
  position: relative;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  border-radius: 0 50px 50px 50px;
}
@media screen and (max-width: 1360px) {
  .frame .framebody {
    border-radius: 0 3.6764705882vw 3.6764705882vw 3.6764705882vw;
  }
}
.frame .framebody {
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.37);
}
@media screen and (max-width: 1360px) {
  .frame .framebody {
    box-shadow: 0.7352941176vw 0.7352941176vw 0vw 0vw rgba(0, 0, 0, 0.37);
  }
}
.frame .framebody .framepannel {
  position: relative;
  width: 100%;
}
.frame .framebody .framepannel .pannel_i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* footer */
.c_footer {
  position: relative;
  font-family: "YakuHanJPs", "M PLUS U", -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-style: normal;
  paint-order: stroke fill;
  font-size: 16px;
}
@media screen and (max-width: 1360px) {
  .c_footer {
    font-size: max(1.1764705882vw, 12px);
  }
}
.c_footer {
  width: 100%;
  color: #fff;
  background-color: #E75296;
  text-align: center;
}
.c_footer .contents:before {
  content: "";
  display: block;
  position: relative;
  padding-top: 4.7%;
}

.footerlogo {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 3.5%;
}
.footerlogo #nsw2logo {
  position: relative;
  width: 12.279%;
  margin-right: 1.563%;
}
.footerlogo #d3plogo {
  position: relative;
  width: 8.088%;
  margin-left: 1.563%;
}
@media screen and (max-width: 1360px) {
  .footerlogo {
    width: 80%;
    margin: 0 auto 5.4% auto;
  }
}
@media screen and (max-width: 1360px) {
  .footerlogo #nsw2logo {
    width: 30.625%;
  }
  .footerlogo #d3plogo {
    width: 20.313%;
  }
}

.copyright {
  position: relative;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 3.82%;
}
@media screen and (max-width: 1360px) {
  .copyright {
    padding-left: 3.44%;
    padding-right: 3.44%;
  }
}

#copyright {
  position: relative;
  margin-bottom: 3.45%;
  line-height: 1.6;
}
#copyright span {
  display: inline-block;
  margin: 0 0.25em;
}
@media screen and (max-width: 1360px) {
  #copyright span {
    display: block;
    margin: 0;
  }
}

.c_footer ul {
  position: relative;
}
@media screen and (max-width: 1360px) {
  .c_footer ul {
    display: inline-block;
    text-align: left;
  }
}

.c_footer li {
  position: relative;
  margin-bottom: 0.3em;
}

.c_footer li.indent {
  text-indent: -1em;
  margin-left: 1em;
}

@media screen and (max-width: 1360px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .ptop {
    width: 20vw;
  }
  .contents {
    width: 100%;
  }
}
.cbpopup #cboxContent {
  margin-top: 0;
  background: #000;
}

.cbpopup .cboxIframe {
  background: #000;
}

.cbpopup #cboxError {
  padding: 0px;
  border: none;
}

.cbpopup #cboxLoadedContent {
  border: none;
  background: #000;
}

.cbpopup #cboxTitle {
  position: absolute;
  top: 0px;
  left: 0;
  color: #ccc;
}

.cbpopup #cboxCurrent {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #ccc;
}

.cbpopup #cboxLoadingGraphic {
  background: url(../images/colorbox/loading.gif) no-repeat center center;
}

.cbpopup #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
}

.cbpopup #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

.cbpopup #cboxSlideshow {
  position: absolute;
  top: 0px;
  right: 90px;
  color: #fff;
}

.cbpopup #cboxClose {
  display: none;
}

.cbpopup #btn_popup_close {
  position: absolute;
  width: 7.157%;
  left: 91.157%;
  top: 0;
  margin-top: 2.421%;
}

.cbpopup #btn_popup_nsw {
  position: absolute;
  width: 31.368%;
  left: 18.526%;
  top: 0;
  margin-top: 97.789%;
}

.cbpopup #btn_popup_steam {
  position: absolute;
  width: 31.368%;
  left: 54%;
  top: 0;
  margin-top: 97.789%;
}

.cbpopup #btn_close,
.cbpopup #btn_popup_nsw,
.cbpopup #btn_popup_steam {
  display: block;
  transition-duration: 0.2s;
}

.cbpopup #btn_popup_close:hover,
.cbpopup #btn_popup_nsw:hover,
.cbpopup #btn_popup_steam:hover {
  filter: brightness(140%);
  transform: scale(1.05);
}

.cbpopup #cboxLoadedContent img,
.cbpopup #btn_popup_close img,
.cbpopup #btn_popup_nsw img,
.cbpopup #btn_popup_steam img {
  display: block;
  width: 100%;
}

#bundle_tx1 {
  position: absolute;
  width: 100%;
  left: 0%;
  top: 0;
  margin-top: 0%;
}

#bundle_tx2 {
  position: absolute;
  width: 100%;
  left: 0%;
  top: 0;
  margin-top: 98.105%;
}

#btn_bundle {
  position: absolute;
  width: 31.368%;
  left: 35.789%;
  top: 0;
  margin-top: 84.315%;
}

.cbpopup #btn_bundle_close {
  position: absolute;
  width: 7.157%;
  left: 91.157%;
  top: 0;
  margin-top: 2.421%;
}

.cbpopup #btn_bundle {
  display: block;
  transition-duration: 0.2s;
}

.cbpopup #btn_bundle_close:hover,
.cbpopup #btn_bundle:hover {
  filter: brightness(140%);
  transform: scale(1.05);
}

.cbmv #cboxContent {
  margin-top: 43px;
  background: #000;
}

.cbmv .cboxIframe {
  background: #000;
}

.cbmv #cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

.cbmv #cboxLoadedContent {
  border: 2px solid #ff0;
  border-image: linear-gradient(135deg, #7ac943, #fff, #ff7bac);
  border-image-slice: 1;
  background: #000;
}

.cbmv #cboxTitle {
  position: absolute;
  top: -20px;
  left: 0;
  color: #ccc;
}

.cbmv #cboxCurrent {
  position: absolute;
  top: -20px;
  right: 0px;
  color: #ccc;
}

.cbmv #cboxLoadingGraphic {
  background: url(../images/colorbox/loading.gif) no-repeat center center;
}

.cbmv #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
}

.cbmv #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

.cbmv #cboxSlideshow {
  position: absolute;
  top: -20px;
  right: 90px;
  color: #fff;
}

.cbmv #cboxClose {
  position: absolute;
  overflow: hidden;
  top: -43px;
  right: 0px;
  display: block;
  background: url("../images/common/btn_close.png") no-repeat top center;
  width: 156px;
  height: 0;
  padding-top: 40px;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}

.cbmv #cboxClose:hover {
  filter: brightness(120%);
}

@media screen and (max-width: 1360) {
  .cbmv #cboxClose {
    position: absolute;
    overflow: hidden;
    top: -23px;
    right: 0px;
    display: block;
    background: url("../images/common/btn_close.png") no-repeat top center;
    background-size: 100% auto;
    width: 78px;
    height: 0;
    padding-top: 20px;
  }
}