@import url(https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;700;900&family=Noto+Sans+JP:wght@900&display=swap);
::selection {
  color: #000;
  background: #fff;
}
*,
:after,
:before {
  box-sizing: border-box;
}
:focus {
  outline: 0;
}
body,
html {
  font-size: 62.5%;
  color: #fff;
  background-color: #000;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 767px) {
  html.no-scroll {
    overflow: hidden;
  }
}
body {
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 100% auto;
  background-image: url(../data/webp/common/bg.jpg.webp);
  width: 100%;
  letter-spacing: 0.08em;
  overflow-x: hidden;
}
@media only screen and (min-width: 767px) {
  body {
    background-size: 32.2840409956vw auto;
  }
}
body.top {
  background: #171717;
}
body.character-detail {
  background: #171717;
}
a {
  color: #fff;
  text-decoration: none;
}
h1,
h2,
h3 {
  line-height: 1;
}
li,
ul {
  list-style: none;
}
td,
th,
tr {
  font-weight: 400;
  text-align: left;
}
img,
picture {
  -webkit-backface-visibility: hidden;
  width: 100%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  vertical-align: bottom;
}
.pc-none {
  display: none;
}
@media only screen and (max-width: 767px) {
  .pc-none {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .sp-none {
    display: none;
  }
}
@media only screen and (min-width: 767px) {
  .header--lang {
    margin-left: 9.5168374817vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi {
    background-image: url(../data/webp/common/header/bg_gnavi_pc_en.png.webp);
    padding-left: 0.1464128843vw;
  }
}
.gnavi-item {
  width: 94.6666666667vw;
  height: 14vw;
  margin: 0.9333333333vw 0 0 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .gnavi-item {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    height: 3.5871156662vw;
    margin: 0;
  }
  .gnavi-item:nth-child(2) {
    margin: 0 0 0 -1.9033674963vw;
  }
  .gnavi-item:nth-child(3) {
    margin: 0 0 0 -1.756954612vw;
  }
  .gnavi-item:nth-child(4) {
    margin: 0 0 0 -1.756954612vw;
  }
}
.gnavi-item.about {
  background-image: url(../data/webp/common/header/list_about_en.png.webp);
}
@media only screen and (min-width: 767px) {
  .gnavi-item.about {
    background-image: url(../data/webp/common/header/list_about_pc_en.png.webp);
    width: 12.9575402635vw;
  }
}
@media only screen and (max-width: 767px) {
  .gnavi-x img {
    width: 6.4vw;
    height: 6.6666666667vw;
  }
  .gnavi-x span {
    font-size: 5.0666666667vw;
    letter-spacing: 0.05em;
  }
}
@media only screen and (max-width: 767px) {
  .gnavi-fb {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/common/header/btn_fb.png.webp);
    width: 60vw;
    height: 14.6666666667vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.3333333333vw;
    margin: 3.3333333333vw auto 0;
  }
  .gnavi-fb img {
    width: 6vw;
    height: 6vw;
    display: block;
    margin-right: 2vw;
  }
  .gnavi-fb span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: 5.0666666667vw;
    letter-spacing: 0;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-fb {
    display: none;
  }
}
@media only screen and (min-width: 767px) {
  .top-main {
    height: 49.6339677892vw;
  }
}
.top-main--store {
  margin: 30vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-main--store {
    margin: -1.6837481698vw 0 0 2.9282576867vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--store-list {
    padding: 1.317715959vw 0;
  }
}
.top-main--slide {
  margin: 8.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-main--slide {
    margin: 3.2942898975vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--slide-wrap.swiper-wrapper {
    justify-content: center !important;
  }
}
@media only screen and (max-width: 767px) {
  .top-menu {
    background-size: cover;
    background-image: url(../data/webp/en/top/main/bg_menu.png.webp);
    padding: 46.6666666667vw 0 10.6666666667vw;
    margin-top: -46.6666666667vw;
  }
}
.top-menu--list-item.about {
  background-image: url(../data/webp/common/header/list_about_en.png.webp);
}
.top-about {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/top/bg_about.png.webp);
  padding: 42.6666666667vw 0 0;
  margin-top: -42.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-about {
    border-top: 0.7320644217vw solid #000;
    background-image: url(../data/webp/top/bg_about_pc.png.webp);
    padding: 0;
    margin-top: 0;
  }
}
.top-about--feature {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-about--feature {
    clip-path: polygon(0 0, 100% 0, 100% 72.3%, 0 100%);
  }
}
.top-about--feature-chara {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/top/bg_about_chara.png.webp);
  height: 114.6666666667vw;
  margin-top: -17.6vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara {
    background-image: url(../data/webp/top/bg_about_chara_pc.png.webp);
    height: 60.7613469985vw;
    margin-top: -14.4216691069vw;
  }
}
.top-about--feature-chara__item {
  position: absolute;
}
.top-about--feature-chara__item.item-coin1 {
  width: 33.3333333333vw;
  height: 80vw;
  left: auto;
  right: 0;
  top: -32.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-coin1 {
    width: 100%;
    height: 47.5841874085vw;
    left: 0;
    right: auto;
    top: 9.5168374817vw;
  }
}
.top-about--feature-chara__item.item-coin2 {
  height: 88vw;
  top: -4vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-coin2 {
    width: 32.9428989751vw;
    height: 51.2445095168vw;
    top: 0vw;
    left: auto;
    right: 0;
    z-index: 2;
  }
}
.top-about--feature-chara__item.item-chara4-l {
  width: 46.6666666667vw;
  height: 46.6666666667vw;
  top: 9.0666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara4-l {
    width: 24.8901903367vw;
    height: 21.2298682284vw;
    top: 8.1259150805vw;
    left: 27.3060029283vw;
  }
}
.top-about--feature-chara__item.item-chara4-r {
  width: 42.6666666667vw;
  height: 40vw;
  top: 4.6666666667vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara4-r {
    width: 25.6222547584vw;
    height: 21.9619326501vw;
    top: 6.3689604685vw;
    right: 22.1815519766vw;
  }
}
.top-about--feature-chara__item.item-chara3-l {
  width: 49.3333333333vw;
  height: 54.6666666667vw;
  top: 26.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara3-l {
    width: 32.9428989751vw;
    height: 30.7467057101vw;
    top: 11.2737920937vw;
    left: 13.9092240117vw;
  }
}
.top-about--feature-chara__item.item-chara3-r {
  width: 46.6666666667vw;
  height: 49.3333333333vw;
  top: 4.6666666667vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara3-r {
    width: 27.8184480234vw;
    height: 30.3806734993vw;
    top: -1.9765739385vw;
    right: 6.0029282577vw;
  }
}
.top-about--feature-chara__item.item-chara2-l {
  width: 40vw;
  height: 53.3333333333vw;
  top: 45.4666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara2-l {
    width: 35.7979502196vw;
    height: 25.8418740849vw;
    top: 14.934114202vw;
  }
}
.top-about--feature-chara__item.item-chara2-r {
  width: 42.6666666667vw;
  height: 64vw;
  top: 30.2666666667vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara2-r {
    width: 27.8184480234vw;
    height: 33.6749633968vw;
    top: 12.6647144949vw;
    right: 22.1815519766vw;
  }
}
.top-about--feature-chara__item.item-chara1-l {
  width: 50vw;
  height: 70.6666666667vw;
  top: 61.3333333333vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara1-l {
    width: 46.8521229868vw;
    height: 40.6295754026vw;
    top: 24.8901903367vw;
  }
}
.top-about--feature-chara__item.item-chara1-r {
  width: 54.6666666667vw;
  height: 104vw;
  top: 31.7333333333vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara1-r {
    width: 43.9238653001vw;
    height: 65.8857979502vw;
    top: -3.2942898975vw;
  }
}
.top-about--feature-chara__item.item-coin3 {
  height: 82.6666666667vw;
  top: 61.0666666667vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-coin3 {
    width: 54.9048316252vw;
    height: 46.1200585652vw;
    top: 32.2108345534vw;
  }
}
.top-about--movie {
  clip-path: polygon(0 21.5%, 100% 0, 100% 100%, 0 100%);
  height: 105.6vw;
  overflow: hidden;
  position: relative;
  margin: -21.6vw 0 0;
  background: #000;
}
@media only screen and (min-width: 767px) {
  .top-about--movie {
    clip-path: polygon(0 39.7%, 100% 0, 100% 100%, 0 100%);
    height: 55.0512445095vw;
    margin: -21.2298682284vw 0 0;
  }
}
.top-howto--inner {
  padding: 9.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-howto--inner {
    padding: 21.2298682284vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-chara--inner {
    background-position: right -0.7320644217vw, 0 0;
    padding: 21.9619326501vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-chara--slider {
    margin-top: -39.5%;
  }
}
.top-stage--inner {
  padding: 6.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-stage--inner {
    background-position: right -2.9282576867vw, 0 0;
    padding: 17.5695461201vw 0 0;
  }
}
.top-stage--slider {
  margin: -6.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-stage--slider {
    margin-top: -34.5%;
  }
}
@media only screen and (min-width: 767px) {
  .top-stage--btn {
    margin: 5.8565153734vw 0 0 10.2489019034vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-info--bg {
    background: linear-gradient(
      -90deg,
      rgba(255, 138, 0, 0.6) 0,
      rgba(255, 138, 0, 0.3) 45%,
      rgba(255, 138, 0, 0) 70%
    );
    width: 58.5651537335vw;
  }
}
.top-info--btn {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  width: 60vw;
  height: 14.6666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.3333333333vw;
  margin: 4.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-info--btn {
    width: 15.1537335286vw;
    height: 3.8067349927vw;
    padding-bottom: 0.3660322108vw;
    margin: 0 0 0 1.4641288433vw;
  }
}
.top-info--btn span {
  font-size: 5.3333333333vw;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .top-info--btn span {
    font-size: 1.317715959vw;
  }
}
.top-info--btn.btn-x {
  background-image: url(../data/webp/en/top/btn_x.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-info--btn.btn-x {
    background-image: url(../data/webp/en/top/btn_x.png.webp);
  }
  .top-info--btn.btn-x:hover:before {
    background-image: url(../data/webp/common/icon/icon_x_b.png.webp);
  }
}
.top-info--btn.btn-x:before {
  display: block;
  content: "";
  background-image: url(../data/webp/common/icon/icon_x.png.webp);
  width: 6.6666666667vw;
  height: 5.3333333333vw;
  margin: 0.2666666667vw 2vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-info--btn.btn-x:before {
    width: 1.5373352855vw;
    height: 1.6837481698vw;
    margin: 0.1464128843vw 0.5856515373vw 0 0;
  }
}
.top-info--btn.btn-fb {
  background-image: url(../data/webp/en/top/btn_fb.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-info--btn.btn-fb {
    background-image: url(../data/webp/en/top/btn_fb.png.webp);
  }
  .top-info--btn.btn-fb:hover:before {
    background-image: url(../data/webp/common/icon/icon_fb_b.png.webp);
  }
  .top-info--btn.btn-fb:hover span {
    color: #1877f2;
  }
}
.top-info--btn.btn-fb:before {
  display: block;
  content: "";
  background-image: url(../social/telegram.svg);
  width: 6.1333333333vw;
  height: 6.1333333333vw;
  margin: 0.2666666667vw 1.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-info--btn.btn-fb:before {
    width: 1.4641288433vw;
    height: 1.4641288433vw;
    margin: 0.1464128843vw 0.3660322108vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .howto-main--catch.catch-1 {
    top: 10.2489019034vw;
  }
}
@media only screen and (max-width: 767px) {
  .howto-main--intro {
    padding: 64vw 0 12vw;
  }
}
.howto-main--intro:before {
  display: block;
  content: "";
  top: -2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro:before {
    top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .howto-main--intro-movie {
    top: -7.7333333333vw;
  }
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inline__text {
    line-height: 1.35;
  }
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide {
    margin: 0 0 0 1.8301610542vw;
  }
}
@media only screen and (min-width: 767px) {
  .howto-hint--detail {
    width: 55.7833089312vw;
    padding: 9.5168374817vw 0 0 6.2225475842vw;
  }
}
.chara-index--list-item__catch {
  background: linear-gradient(
    90deg,
    #000 0,
    rgba(0, 0, 0, 0.7) 55%,
    rgba(0, 0, 0, 0) 95%
  );
}
.chara-index--list-item__catch:after {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    #ff8a00 0,
    rgba(255, 138, 0, 0.7) 55%,
    rgba(255, 138, 0, 0) 95%
  );
}
.chara-main--data-name span {
  text-align: center;
}
.chara-main--skill-data__bg span {
  font-size: 3.7333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__bg span {
    font-size: 1.4641288433vw;
  }
}
.stage-main--title span {
  font-size: 6.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .stage-main--title span {
    font-size: 2.9282576867vw;
  }
}