@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;700;900&family=Noto+Sans+JP:wght@400;600;900&display=swap");
/*========================================
*	common
========================================*/
::selection {
  color: #000;
  background: #fff;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  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;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 767px) {
  html.no-scroll {
    overflow: hidden;
  }
}
html.modal-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;
}

ul,
li {
  list-style: none;
}

tr,
th,
td {
  font-weight: normal;
  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: -1.4641288433vw;
  }
}
@media only screen and (min-width: 767px) {
  .header--dl {
    margin-left: -2.196193265vw;
  }
}
.header--webstore {
  bottom: 0;
}
@media only screen and (min-width: 767px) {
  .header--webstore {
    bottom: 0.3660322108vw;
  }
}

@media only screen and (min-width: 767px) {
  .footer--contact-btn__item {
    width: 16.8374816984vw;
  }
  .footer--contact-btn__item:before {
    width: 16.8374816984vw;
  }
}
.footer--copyright {
  padding: 10.9333333333vw 0;
}
@media only screen and (min-width: 767px) {
  .footer--copyright {
    padding: 2.0497803807vw 0 2.1229868228vw;
  }
}
.footer--copyright-icon {
  margin-bottom: 6.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright-icon {
    margin-bottom: 1.6105417277vw;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec {
    padding: 1.4641288433vw 6.4421669107vw 2.196193265vw 9.5168374817vw;
  }
}

@media only screen and (min-width: 767px) {
  .gnavi {
    background-image: url("../data/webp/common/header/bg_gnavi_pc_v2.png.webp");
    padding-left: 0.1464128843vw;
    background-size: 100% 100%;
  }
}
.gnavi-item {
  width: 97.3333333333vw;
  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(1) {
    margin: 0 0 0 -0.0732064422vw;
  }
  .gnavi-item:nth-child(2) {
    margin: 0 0 0 -1.756954612vw;
  }
  .gnavi-item:nth-child(3) {
    margin: 0 0 0 -1.756954612vw;
  }
  .gnavi-item:nth-child(4) {
    margin: 0 0 0 -1.756954612vw;
  }
  .gnavi-item:nth-child(5) {
    margin: 0 0 0 -1.756954612vw;
  }
  .gnavi-item:nth-child(6) {
    margin: 0 0 0 -1.756954612vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-item.about {
    background-image: url("../data/webp/common/header/list_about_pc_en.png.webp");
    width: 10.9077598829vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-item.howto {
    background-image: url("../data/webp/common/header/list_howto_pc_en.png.webp");
    width: 12.0058565154vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-item.chara {
    background-image: url("../data/webp/common/header/list_chara_pc_en.png.webp");
    width: 13.4699853587vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-item.stage {
    background-image: url("../data/webp/common/header/list_stage_pc_en.png.webp");
    width: 10.5783308931vw;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-item.steam {
    background-image: url("../data/webp/common/header/list_steam_pc_en.png.webp");
    width: 11.420204978vw;
  }
}
.gnavi-item.webstore {
  padding-bottom: 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .gnavi-item.webstore {
    background-image: url("../data/webp/common/header/list_webstore_pc_en.png.webp");
    width: 14.9707174231vw;
    padding-bottom: 0;
  }
}
@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;
  }
}

.container--title-text {
  line-height: 0.9;
}
@media only screen and (min-width: 767px) {
  .container--title-text {
    line-height: 0.75;
  }
}

@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.5373352855vw 0;
  }
}
.top-main--store-list__item:last-child a {
  height: 11.6vw;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item:last-child a {
    height: 3.5871156662vw;
  }
}

@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.webstore {
  padding-bottom: 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .top-menu--list-item.webstore {
    padding-bottom: 0;
  }
}

@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--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("../data/webp/common/icon/icon_fb.png.webp");
  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) {
  .top-steam--inner {
    padding: 21.0102489019vw 0 0;
  }
}
.top-steam--btn {
  margin: 38.5333333333vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-steam--btn {
    margin: -5.8565153734vw 0 0 18.8872620791vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-steam--tit {
    width: 49.7803806735vw;
  }
}
.top-steam--tit__pic {
  margin-top: -3.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .top-steam--tit__pic {
    margin-top: 0;
  }
}
.top-steam--icon {
  top: -14vw;
}
@media only screen and (min-width: 767px) {
  .top-steam--icon {
    top: auto;
    bottom: -21.2298682284vw;
  }
}

@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, rgb(0, 0, 0) 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, rgb(255, 138, 0) 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;
  }
}

.steam-content--frame:nth-child(1) .steam-content--summary {
  padding: 4.5333333333vw 2.6666666667vw 5.6vw;
  margin: 2.6666666667vw 0 2.6666666667vw;
  font-size: 8vw;
  line-height: 1.2;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(1) .steam-content--summary {
    padding: 1.1713030747vw 0.7320644217vw 1.756954612vw;
    margin: 0.9516837482vw 0;
    font-size: 2.0497803807vw;
  }
}
.steam-content--frame:nth-child(2) .steam-content--summary {
  margin: 2.6666666667vw 0 2.6666666667vw;
  padding: 2.8vw 3.4666666667vw;
  line-height: 1.2;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(2) .steam-content--summary {
    padding: 0.7320644217vw 0.7320644217vw;
    margin: 0.9516837482vw 0;
  }
}
.steam-content--frame:nth-child(3) .steam-content--summary {
  margin: 2.6666666667vw 0 2.6666666667vw;
  padding: 5.6vw 0 6.6666666667vw;
  line-height: 1.2;
  font-size: 6.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(3) .steam-content--summary {
    font-size: 1.756954612vw;
    padding: 1.756954612vw 0.1464128843vw 1.9033674963vw;
    margin: 0.878477306vw 0;
  }
}

.webstore .container--title-text {
  line-height: 1.0869565217;
  font-size: 6.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore .container--title-text {
    line-height: 0.75;
    font-size: 2.196193265vw;
  }
}
.webstore .container--title-bg {
  padding: 20.8vw 5.3333333333vw 17.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore .container--title-bg {
    padding: 6.588579795vw 2.9282576867vw 2.0497803807vw;
  }
}
/*# sourceMappingURL=../maps/style-en.css.map */