@charset "UTF-8";
@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;
  }
}
.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
.swiper-button-next,
.swiper-button-prev {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  margin-top: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: transparent;
  display: block;
  cursor: pointer;
  pointer-events: auto;
}
.swiper-button-next::after,
.swiper-button-next::before,
.swiper-button-prev::after,
.swiper-button-prev::before {
  content: none;
}
@media only screen and (min-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    transition: 0.3s;
  }
}
.header {
  width: 100%;
  position: fixed;
  z-index: 10;
}
.header.scroll .header--logo {
  pointer-events: auto;
  opacity: 1;
  transition: 0.3s;
}
.header.scroll .header--logo a {
  pointer-events: auto;
}
@media only screen and (max-width: 767px) {
  .header.scroll .header--dl.dl-1 {
    transform: none;
  }
  .header.scroll .header--dl.dl-2 {
    transform: translateY(-14.4vw);
  }
  .header.scroll .header--lang.lang-1 {
    transform: none;
  }
  .header.scroll .header--lang.lang-1 .header--lang-menu__list {
    display: block;
  }
  .header.scroll .header--lang.lang-2 {
    transform: translateY(-14.4vw);
  }
  .header.scroll .header--lang.lang-2 .header--lang-menu__list {
    display: none;
  }
}
.header--inner {
  display: flex;
  height: 0;
}
.header--logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/header/deco_logo.png.webp);
  width: 38.6666666667vw;
  height: 23.3333333333vw;
  position: relative;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
@media only screen and (min-width: 767px) {
  .header--logo {
    background-image: url(../data/webp/common/header/deco_logo_pc.png.webp);
    width: 17.2035139092vw;
    height: 10.980966325vw;
  }
}
.header--logo a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
  width: 35.7333333333vw;
  height: 20vw;
  position: absolute;
  top: 0;
  left: 1.2vw;
  pointer-events: none;
}
@media only screen and (min-width: 767px) {
  .header--logo a:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .header--logo a {
    width: 14.494875549vw;
    height: 8.1991215227vw;
    left: 0.5124450952vw;
  }
}
@media only screen and (max-width: 767px) {
  .header--btn {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/common/header/gnavi_btn.png.webp);
    width: 16.4vw;
    height: 17.2vw;
    padding: 2.9333333333vw 2.9333333333vw 0 3.6vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
  }
  .header--btn-parts {
    width: 10vw;
    height: 6vw;
    position: relative;
  }
  .header--btn-parts__item {
    width: 10vw;
    height: 4.5333333333vw;
    display: block;
    position: absolute;
    left: 0;
  }
  .header--btn-parts__item.top {
    top: 0;
    z-index: 2;
  }
  .header--btn-parts__item.bottom {
    bottom: 0;
  }
  .header--btn-parts__item.center {
    top: 1.0666666667vw;
    opacity: 0;
  }
  .header--btn-text {
    width: 10vw;
    height: 3.4666666667vw;
    position: relative;
    margin: 0.8vw 0 0;
  }
  .header--btn-text__img {
    display: block;
    position: absolute;
    transition: 0.3s;
    top: 0;
    left: 0;
  }
  .header--btn-text__img.close {
    opacity: 0;
  }
  .header--btn.open .header--btn-parts__item.bottom,
  .header--btn.open .header--btn-parts__item.top {
    opacity: 0;
  }
  .header--btn.open .header--btn-parts__item.center {
    opacity: 1;
  }
  .header--btn.open .header--btn-text__img.open {
    opacity: 0;
  }
  .header--btn.open .header--btn-text__img.close {
    opacity: 1;
  }
}
.header--lang {
  position: absolute;
  top: 0;
  z-index: 3;
  transition: transform 0.3s;
}
@media only screen and (min-width: 767px) {
  .header--lang {
    margin-left: 0;
    position: relative;
    z-index: 2;
    order: 1;
  }
}
.header--lang-btn {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  height: 13.7333333333vw;
  display: block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .header--lang-btn {
    background-size: contain;
    background-image: url(../data/webp/common/header/gnavi_lang_pc.png.webp);
    width: 9.3704245974vw;
    height: 2.7818448023vw;
    padding: 0 1.4641288433vw 0 1.8301610542vw;
    transition: 0.3s;
  }
  .header--lang-btn:hover {
    padding-top: 0.1464128843vw;
  }
}
.header--lang-btn__icon {
  width: 7.8666666667vw;
  height: 8.1333333333vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .header--lang-btn__icon {
    width: 1.4641288433vw;
    height: 1.6105417277vw;
    padding-top: 0.1464128843vw;
  }
}
.header--lang-btn__text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
  letter-spacing: 0.1em;
  padding: 0 0.6666666667vw;
  display: none;
}
@media only screen and (min-width: 767px) {
  .header--lang-btn__text {
    font-size: 1.1713030747vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 #000,
      0.0732064422vw 0.1464128843vw 0 #000, 0 -0.0732064422vw 0 #000;
    padding: 0 0.2196193265vw 0 0.3660322108vw;
    display: block;
  }
}
.header--lang-btn__arw {
  width: 4.4vw;
  height: 4.1333333333vw;
  padding-top: 0.4vw;
}
@media only screen and (min-width: 767px) {
  .header--lang-btn__arw {
    width: 1.0980966325vw;
    height: 1.0248901903vw;
    padding-top: 0.1464128843vw;
  }
}
.header--lang-menu {
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: all 0.3s;
  opacity: 0;
}
.header--lang-menu__list {
  background: rgba(0, 0, 0, 0.5);
  padding: 14.4vw 0 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .header--lang-menu__list {
    width: 9.3704245974vw;
    padding: 2.9282576867vw 0 0;
  }
}
.header--lang-menu__list-item {
  margin-top: 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .header--lang-menu__list-item {
    margin-top: 0.3660322108vw;
  }
}
.header--lang-menu__list-item a {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 10.6666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 4.2666666667vw;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .header--lang-menu__list-item a {
    height: 2.9282576867vw;
    font-size: 1.1713030747vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 #000,
      0.0732064422vw 0.1464128843vw 0 #000, 0 -0.0732064422vw 0 #000;
  }
}
@media only screen and (max-width: 767px) {
  .header--lang.lang-1 {
    top: 0;
    left: 39.3333333333vw;
    transform: translateY(-14.4vw);
  }
  .header--lang.lang-1 .header--lang-btn {
    background-image: url(../data/webp/common/header/gnavi_lang.png.webp);
    width: 25.3333333333vw;
    padding: 0 4.6666666667vw;
  }
  .header--lang.lang-1 .header--lang-menu__list {
    width: 24vw;
    display: none;
  }
}
@media only screen and (min-width: 767px) {
  .header--lang.lang-1 {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header--lang.lang-2 {
    top: 0;
    left: 9.8666666667vw;
    transform: translateY(0vw);
  }
  .header--lang.lang-2 .header--lang-btn {
    background-image: url(../data/webp/common/header/gnavi_lang-top.png.webp);
    width: 33.4666666667vw;
    padding: 0 4vw;
  }
  .header--lang.lang-2 .header--lang-btn .header--lang-btn__icon {
    width: 6.4vw;
    height: 6.9333333333vw;
    padding-top: 0.2666666667vw;
  }
  .header--lang.lang-2 .header--lang-btn .header--lang-btn__text {
    display: block;
  }
  .header--lang.lang-2 .header--lang-btn .header--lang-btn__arw {
    display: block;
  }
  .header--lang.lang-2 .header--lang-menu__list {
    width: 32vw;
  }
}
.header--lang.open .header--lang-menu {
  pointer-events: all;
  height: auto;
  opacity: 1;
}
.header--dl {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  height: 13.7333333333vw;
  position: absolute;
  z-index: 4;
  transition: transform 0.3s;
}
@media only screen and (min-width: 767px) {
  .header--dl {
    background-image: url(../data/webp/common/header/gnavi_dl_pc.png.webp);
    width: 14.2020497804vw;
    height: 3.5871156662vw;
    padding: 0;
    margin-left: -1.6837481698vw;
    position: relative;
    order: 4;
  }
}
.header--dl-btn {
  width: 100%;
  height: 100%;
  display: block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 3.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .header--dl-btn {
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
  }
  .header--dl-btn .bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
  }
  .header--dl-btn .bg-img.on {
    opacity: 0;
  }
  .header--dl-btn:hover .bg-img.on {
    opacity: 1;
  }
  .header--dl-btn:hover .bg-img.off {
    opacity: 0;
  }
}
.header--dl-btn__text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 4.8vw;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .header--dl-btn__text.top {
    display: none;
  }
}
@media only screen and (min-width: 767px) {
  .header--dl-btn__text {
    font-size: 1.1713030747vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 #000,
      0.0732064422vw 0.1464128843vw 0 #000, 0 -0.0732064422vw 0 #000;
    padding: 0 0.3660322108vw 0.2928257687vw 1.4641288433vw;
    position: relative;
  }
  .header--dl-btn__text.top {
    display: block;
  }
  .header--dl-btn__text.under {
    display: none;
  }
}
.header--dl-btn__icon {
  width: 8vw;
  height: 8.2666666667vw;
  padding-top: 0.4vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .header--dl-btn__icon {
    width: 1.8301610542vw;
    height: 1.9765739385vw;
    padding-top: 0.1464128843vw;
  }
}
@media only screen and (max-width: 767px) {
  .header--dl.dl-1 {
    background-image: url(../data/webp/common/header/gnavi_dl.png.webp);
    width: 26.6666666667vw;
    padding: 0 1.3333333333vw 0 4.6666666667vw;
    top: 0;
    left: 57.0666666667vw;
    transform: translateY(-14.4vw);
  }
}
@media only screen and (min-width: 767px) {
  .header--dl.dl-1 {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header--dl.dl-2 {
    background-image: url(../data/webp/common/header/gnavi_dl-top.png.webp);
    width: 48.4vw;
    padding: 0 1.3333333333vw 0 5.3333333333vw;
    top: 0;
    left: 35.7333333333vw;
    transform: translateY(0);
  }
  .header--dl.dl-2 .header--dl-btn__text {
    font-size: 4.2666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .header--dl.scroll.dl-1 {
    transform: translateY(0);
  }
  .header--dl.scroll.dl-2 {
    transform: translateY(-14.4vw);
  }
}
@media only screen and (max-width: 767px) {
  .header--navi {
    background: rgba(0, 0, 0, 0.75);
    width: 100vw;
    height: calc(var(--vh) * 100);
    padding: 22.6666666667vw 0 0;
    position: absolute;
    top: 0;
    right: -100vw;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.7, 0, 1, 1) 0s;
    z-index: 2;
  }
  .header--navi.open {
    right: 0;
  }
}
@media only screen and (min-width: 767px) {
  .header--navi {
    order: 2;
    z-index: 3;
  }
}
.gnavi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/header/bg_gnavi.png.webp);
  padding: 12vw 0 19.4666666667vw;
}
@media only screen and (min-width: 767px) {
  .gnavi {
    background-size: 100% auto;
    background-image: url(../data/webp/common/header/bg_gnavi_pc.png.webp);
    height: 3.5871156662vw;
    padding: 0;
    margin: 0 0 0 -1.317715959vw;
    display: flex;
  }
}
.gnavi-item {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  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.8301610542vw;
  }
  .gnavi-item:nth-child(4) {
    margin: 0 0 0 -1.8301610542vw;
  }
}
.gnavi-item.about {
  background-image: url(../data/webp/common/header/list_about.png.webp);
}
@media only screen and (min-width: 767px) {
  .gnavi-item.about {
    background-image: url(../data/webp/common/header/list_about_pc.png.webp);
    width: 22.5475841874vw;
  }
}
.gnavi-item.howto {
  background-image: url(../data/webp/common/header/list_howto.png.webp);
}
@media only screen and (min-width: 767px) {
  .gnavi-item.howto {
    background-image: url(../data/webp/common/header/list_howto_pc.png.webp);
    width: 16.6910688141vw;
  }
}
.gnavi-item.chara {
  background-image: url(../data/webp/common/header/list_chara.png.webp);
}
@media only screen and (min-width: 767px) {
  .gnavi-item.chara {
    background-image: url(../data/webp/common/header/list_chara_pc.png.webp);
    width: 15.8857979502vw;
  }
}
.gnavi-item.stage {
  background-image: url(../data/webp/common/header/list_stage.png.webp);
}
@media only screen and (min-width: 767px) {
  .gnavi-item.stage {
    background-image: url(../data/webp/common/header/list_stage_pc.png.webp);
    width: 12.737920937vw;
  }
}
.gnavi-item a {
  width: 100%;
  height: 100%;
  padding: 0 7.4666666667vw 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .gnavi-item a {
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .gnavi-item a .bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
  }
  .gnavi-item a .bg-img.on {
    opacity: 0;
  }
  .gnavi-item a:hover .bg-img.on {
    opacity: 1;
  }
  .gnavi-item a:hover .bg-img.off {
    opacity: 0;
  }
  .gnavi-item a:hover span:after {
    right: -0.2196193265vw;
  }
}
.gnavi-item a:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_arw_navi.png.webp);
  width: 8.5333333333vw;
  height: 7.3333333333vw;
  position: absolute;
  top: 3.3333333333vw;
  right: 7.4666666667vw;
}
@media only screen and (min-width: 767px) {
  .gnavi-item a:after {
    content: none;
  }
}
.gnavi-item a span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 4.8vw;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
  letter-spacing: 0.1em;
}
@media only screen and (min-width: 767px) {
  .gnavi-item a span {
    font-size: 1.1713030747vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 #000,
      0.0732064422vw 0.1464128843vw 0 #000, 0 -0.0732064422vw 0 #000;
    padding: 0 0.7320644217vw 0.2928257687vw 0.7320644217vw;
    display: block;
    position: relative;
  }
  .gnavi-item a span:after {
    display: block;
    /* content: ""; */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/common/icon/icon_arw_navi_pc.png.webp);
    width: 1.0980966325vw;
    height: 1.0248901903vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: 0.3s;
  }
}
@media only screen and (max-width: 767px) {
  .gnavi-x {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/common/header/btn_x.png.webp);
    width: 60vw;
    height: 14.6666666667vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.3333333333vw;
    margin: 0 auto;
  }
  .gnavi-x img {
    width: 6.6666666667vw;
    height: 6.9333333333vw;
    display: block;
    margin-right: 2vw;
  }
  .gnavi-x span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: 5.2vw;
    letter-spacing: 0.1em;
  }
}
@media only screen and (min-width: 767px) {
  .gnavi-x {
    display: none;
  }
}
.gnavi.howto .gnavi-item.howto a .bg-img.on {
  opacity: 1;
}
.gnavi.howto .gnavi-item.howto a .bg-img.off {
  opacity: 0;
}
.gnavi.howto .gnavi-item.howto a span:after {
  right: -0.2196193265vw;
}
.gnavi.character .gnavi-item.chara a .bg-img.on,
.gnavi.character-detail .gnavi-item.chara a .bg-img.on {
  opacity: 1;
}
.gnavi.character .gnavi-item.chara a .bg-img.off,
.gnavi.character-detail .gnavi-item.chara a .bg-img.off {
  opacity: 0;
}
.gnavi.character .gnavi-item.chara a span:after,
.gnavi.character-detail .gnavi-item.chara a span:after {
  right: -0.2196193265vw;
}
.gnavi.stage .gnavi-item.stage a .bg-img.on,
.gnavi.stage-detail .gnavi-item.stage a .bg-img.on {
  opacity: 1;
}
.gnavi.stage .gnavi-item.stage a .bg-img.off,
.gnavi.stage-detail .gnavi-item.stage a .bg-img.off {
  opacity: 0;
}
.gnavi.stage .gnavi-item.stage a span:after,
.gnavi.stage-detail .gnavi-item.stage a span:after {
  right: -0.2196193265vw;
}
.footer {
  position: relative;
  padding: 30vw 0 0;
  margin: -30vw 0 0;
}
@media only screen and (max-width: 767px) {
  .footer.top {
    margin: 0;
  }
  .footer:before {
    display: block;
    content: "";
    background-color: #000;
    clip-path: polygon(0 80%, 100% 5%, 100% 100%, 0 100%);
    width: 100%;
    height: 30vw;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media only screen and (min-width: 767px) {
  .footer {
    padding: 0;
    margin: 0;
  }
  .footer.ja.top .footer--pagetop {
    top: auto;
    bottom: -9.1508052709vw;
  }
}
.footer--pagetop {
  width: 22.2666666667vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
  margin: 2vw auto;
  /* top: 0; */
  right: 38.9333333333vw;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .footer--pagetop:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--pagetop {
    position: absolute;
    width: 7.467057101vw;
    margin: 0;
    bottom: 60px;
    right: 1.4641288433vw;
  }
}
.footer--contents {
  background-color: #262626;
}
.footer--contact {
  background-color: #2b2b2b;
  padding: 7.3333333333vw 0 10vw;
}
@media only screen and (min-width: 767px) {
  .footer--contact {
    padding: 2.196193265vw 0 2.9282576867vw;
    position: relative;
  }
  .footer--contact:before {
    display: block;
    content: "";
    background-color: #000;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    width: 13.17715959vw;
    height: 11.7130307467vw;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.footer--contact-tit {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 4.8vw;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  margin: 0 0 4.2666666667vw;
}
@media only screen and (min-width: 767px) {
  .footer--contact-tit {
    font-size: 1.317715959vw;
    margin: 0 0 1.317715959vw;
  }
}
@media only screen and (min-width: 767px) {
  .footer--contact-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.footer--contact-btn__item {
  width: 78.6666666667vw;
  height: 13.8666666667vw;
  margin: 3.7333333333vw auto 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .footer--contact-btn__item:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--contact-btn__item {
    width: 21.5959004392vw;
    height: 3.8067349927vw;
    margin: 0 0.8052708638vw;
  }
}
.footer--contact-btn__item:before {
  display: block;
  content: "";
  width: 78.6666666667vw;
  height: 13.8666666667vw;
  position: absolute;
  right: -0.4vw;
  bottom: -0.4vw;
}
@media only screen and (min-width: 767px) {
  .footer--contact-btn__item:before {
    width: 21.5959004392vw;
    height: 3.8067349927vw;
    right: -0.1464128843vw;
    bottom: -0.1464128843vw;
  }
}
.footer--contact-btn__item.ios:before {
  display: block;
  content: "";
  background-color: #ff8a00;
}
.footer--contact-btn__item.googleplay:before {
  display: block;
  content: "";
  background-color: #0fabd0;
}
.footer--contact-btn__item a {
  background-color: #000;
  width: 100%;
  height: 100%;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .footer--contact-btn__item a {
    font-size: 1.0248901903vw;
  }
}
.footer--spec {
  padding: 8vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .footer--spec {
    display: flex;
    padding: 1.4641288433vw 7.3206442167vw 2.196193265vw 12.8111273792vw;
  }
}
.footer--spec-logo {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--spec-logo:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-logo {
    flex-basis: 27.3060029283vw;
    margin-right: 0.9516837482vw;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-contents {
    flex-basis: calc(100% - 28.2576866764vw);
    display: flex;
    flex-direction: column;
  }
}
.footer--spec-btn {
  display: flex;
  justify-content: space-between;
  margin: 4.2666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn {
    justify-content: start;
    margin: 1.6105417277vw 0 0;
    order: 2;
  }
}
.footer--spec-btn__item {
  height: 12.8vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn__item {
    height: 3.513909224vw;
    margin-right: 1.317715959vw;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn__item:hover {
    opacity: 0.8;
  }
}
.footer--spec-btn__item img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.footer--spec-detail {
  margin: 5.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .footer--spec-detail {
    display: flex;
    flex-wrap: wrap;
    margin: 0.7320644217vw 0 0;
    order: 1;
  }
}
.footer--spec-detail__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 2.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .footer--spec-detail__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0.9516837482vw 0 0;
    order: 1;
  }
}
.footer--spec-detail__list-tit {
  background-color: #fff;
  clip-path: polygon(8% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 30%);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.4vw;
  text-align: center;
  color: #000;
  padding: 1.6vw 2.6666666667vw;
}
@media only screen and (max-width: 767px) {
  .footer--spec-detail__list-tit {
    flex-basis: 32vw;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-detail__list-tit {
    font-size: 0.7320644217vw;
    padding: 0.5124450952vw 0.8052708638vw;
  }
}
.footer--spec-detail__list-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.9333333333vw;
  margin: 0 0 0 3.3333333333vw;
}
@media only screen and (max-width: 767px) {
  .footer--spec-detail__list-text {
    flex-basis: calc(100% - 35.3333333333vw);
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-detail__list-text {
    font-size: 0.878477306vw;
    margin: 0 1.317715959vw;
  }
}
.footer--spec-attention {
  margin: 2.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .footer--spec-attention {
    margin: 1.0980966325vw 0 0;
    order: 3;
  }
}
.footer--spec-attention span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.4vw;
  color: #9d9d9d;
  line-height: 1.25;
  display: block;
  padding-top: 2vw;
}
@media only screen and (min-width: 767px) {
  .footer--spec-attention span {
    font-size: 0.7320644217vw;
    padding-top: 0.2196193265vw;
  }
}
.footer--copyright {
  background-color: #000;
  text-align: center;
  padding: 6.6666666667vw 0;
}
@media only screen and (min-width: 767px) {
  .footer--copyright {
    font-size: 0.7320644217vw;
    padding: 1.317715959vw 0 1.1713030747vw;
  }
}
.footer--copyright span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.4vw;
  color: #9d9d9d;
  line-height: 1.35;
}
@media only screen and (min-width: 767px) {
  .footer--copyright span {
    font-size: 0.7320644217vw;
  }
}
.loading {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
}
.loading--text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 8.2666666667vw;
  letter-spacing: 0.1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading--text.white {
  color: #fff;
}
.loading--text.blue {
  color: rgba(51, 212, 255, 0.5);
}
.loading--text.orange {
  color: rgba(255, 138, 0, 0.5);
}
@media only screen and (min-width: 767px) {
  .loading--text {
    letter-spacing: 0.2em;
    font-size: 2.8550512445vw;
  }
}
.container {
  overflow-x: hidden;
}
.container--title {
  background-color: #000;
  padding: 0 0 1.6vw;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .container--title {
    clip-path: polygon(0 0, 100% 0, 100% calc(60% + 0.8vw), 0 100%);
  }
}
@media only screen and (min-width: 767px) {
  .container--title {
    padding: 0 0 0.5856515373vw;
  }
}
.container--title-bg {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/common/bg_title.png.webp);
  background-color: #171717;
  text-align: center;
  padding: 22.6666666667vw 5.3333333333vw 20vw;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .container--title-bg {
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  }
}
@media only screen and (min-width: 767px) {
  .container--title-bg {
    background-image: url(../data/webp/common/bg_title_pc.png.webp);
    padding: 6.588579795vw 2.9282576867vw 2.0497803807vw;
  }
}
.container--title-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 8.8vw;
  letter-spacing: 0.08em;
  text-shadow: 0 0.8vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .container--title-text {
    font-size: 2.196193265vw;
    text-shadow: 0 0.439238653vw 0 #000;
  }
}
.container--contents {
  background-image: url(../data/webp/common/bg_container_line.png.webp),
    url(../data/webp/common/bg_container_grade.png.webp);
  background-position: 0 0, 0 bottom;
  background-repeat: repeat-y, no-repeat;
  background-size: 100% auto;
  padding: 28.6666666667vw 0 38.6666666667vw;
  margin: -21.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .container--contents {
    background-image: url(../data/webp/common/bg_container_line_pc.png.webp),
      url(../data/webp/common/bg_container_grade_pc.png.webp);
    background-repeat: no-repeat, no-repeat;
    padding: 4.0263543192vw 0;
    margin: 0;
  }
}
@media only screen and (min-width: 767px) {
  .container--contents.howto {
    background-position: 0 center, 0 bottom;
    background-repeat: repeat-y, no-repeat;
  }
}
@media only screen and (min-width: 767px) {
  .container--contents.character {
    padding: 4.0263543192vw 0 5.4904831625vw;
  }
}
@media only screen and (max-width: 767px) {
  .container--contents.character-detail {
    background-image: url(../data/webp/common/bg_container_grade.png.webp);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    padding: 0 0 44vw;
  }
}
@media only screen and (min-width: 767px) {
  .container--contents.character-detail {
    padding: 0 0 6.2225475842vw;
  }
}
@media only screen and (min-width: 767px) {
  .container--contents.stage-detail {
    padding: 0;
  }
}
.top-main {
  padding: 78.1333333333vw 0 0;
  display: block;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-main {
    height: 49.9267935578vw;
    padding: 13.17715959vw 0 0;
    margin: 0;
  }
}
.top-main--mv {
  width: 100%;
  height: 194.6666666667vw;
  overflow: hidden;
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .top-main--mv {
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 97%);
  }
}
@media only screen and (min-width: 767px) {
  .top-main--mv {
    height: 42.8257686676vw;
  }
}
.top-main--mv-wrap {
  width: 100%;
  height: 100%;
}
.top-main--mv-img {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  width: 100%;
  height: 100%;
}
.top-main--line1 {
  display: none;
}
@media only screen and (min-width: 767px) {
  .top-main--line1 {
    width: 12.8111273792vw;
    height: 32.5768667643vw;
    position: absolute;
    bottom: 6.7349926794vw;
    left: 0;
    display: block;
  }
}
.top-main--line2 {
  display: none;
}
@media only screen and (min-width: 767px) {
  .top-main--line2 {
    width: 38.7994143485vw;
    height: 39.897510981vw;
    position: absolute;
    top: 3.2942898975vw;
    left: 0;
    display: block;
  }
}
.top-main--logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/top/main/bg_logo.png.webp);
  width: 100vw;
  height: 56.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-main--logo {
    background-image: url(../data/webp/top/main/bg_logo_pc.png.webp);
    width: 34.0409956076vw;
    height: 20.3513909224vw;
    margin-left: 0.5856515373vw;
  }
}
.top-main--logo img {
  width: 100.4vw;
  height: 56vw;
  display: block;
  position: absolute;
  top: 3.2vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-main--logo img {
    width: 29.2825768668vw;
    height: 16.4714494876vw;
    top: 2.196193265vw;
    left: 1.2445095168vw;
  }
}
.top-main--store {
  width: 88vw;
  margin: 24vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-main--store {
    width: 27.2327964861vw;
    margin: -2.5622254758vw 0 0 2.9282576867vw;
  }
}
.top-main--store-title {
  position: relative;
}
.top-main--store-list {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/top/main/bg_store-btn.png.webp);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4.1333333333vw 0 4.4vw;
  margin: -4.1333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list {
    padding: 1.6105417277vw 0 1.1713030747vw;
    margin: -1.4641288433vw 0 0;
  }
}
.top-main--store-list__item {
  margin: 0 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item {
    margin: 0 0.439238653vw;
  }
}
.top-main--store-list__item a {
  height: 11.4666666667vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item a:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item a {
    height: 3.513909224vw;
  }
}
.top-main--store-list__item img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.top-main--pickup {
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup {
    border-bottom: 0.1464128843vw solid #ff8a00;
    background-image: url(../data/webp/ja/top/bg_pickup_parts_pc.png.webp),
      url(../data/webp/ja/top/bg_pickup_pc.png.webp);
    background-size: cover, 0.3660322108vw 0.3660322108vw;
    background-repeat: no-repeat, repeat;
    margin: 4.39238653vw 0 0;
    z-index: 2;
  }
}
.top-main--pickup-text {
  position: absolute;
  left: 0;
  top: 6vw;
}
@media only screen and (max-width: 767px) {
  .top-main--pickup-text {
    height: 80vw;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-text {
    width: 70%;
    top: 46%;
    left: 52%;
    transform: translate(-50%, -50%);
  }
}
.top-main--pickup-text__inline {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 12.4vw;
  line-height: 0.9;
  letter-spacing: 0.1em;
  display: inline-block;
  word-break: keep-all;
  opacity: 0.2;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-text__inline {
    font-size: 5.3440702782vw;
    letter-spacing: 0.05em;
  }
}
.top-main--pickup-text__inline:last-child {
  margin: 0.35em 0 0;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-text__inline:last-child {
    margin: 0 0 0 39.5314787701vw;
  }
}
.top-main--pickup-bnr {
  padding: 5.3333333333vw 0 5.3333333333vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-bnr {
    padding: 1.0980966325vw 0 1.0980966325vw 1.8301610542vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.top-main--pickup-bnr__item {
  width: 82.6666666667vw;
  margin: 4vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-bnr__item {
    width: 19.2532942899vw;
    flex-basis: 19.2532942899vw;
    margin: 0 0.5124450952vw;
  }
}
.top-main--pickup-bnr__item a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-main--pickup-bnr__item a:hover {
    opacity: 0.8;
  }
}
.top-main--slide {
  margin: 6vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-main--slide {
    border-bottom: #0fabd0 0.2928257687vw solid;
    margin: 2.9282576867vw 0 0;
  }
}
.top-main--slide-list {
  padding: 0 0 5.3333333333vw;
  overflow: visible;
}
@media only screen and (min-width: 767px) {
  .top-main--slide-list {
    background-image: url(../data/webp/character/ui/bg_border.jpg.webp);
    background-size: 0.2196193265vw;
    padding: 1.0980966325vw 0;
  }
}
.top-main--slide-item {
  filter: brightness(50%);
}
.top-main--slide-item a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-main--slide-item a:hover {
    opacity: 0.8;
  }
}
.top-main--slide .swiper-slide-active {
  filter: brightness(100%);
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-slide-next,
  .top-main--slide .swiper-slide-prev {
    filter: brightness(100%);
  }
}
.top-main--slide .swiper-button-next,
.top-main--slide .swiper-button-prev {
  width: 9.8666666667vw;
  height: 8vw;
  top: calc(50% - 2.6666666667vw);
  bottom: auto;
  pointer-events: auto;
  transform: translateY(-50%);
  z-index: 11;
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-button-next,
  .top-main--slide .swiper-button-prev {
    width: 2.9282576867vw;
    height: 2.635431918vw;
    top: 50%;
  }
  .top-main--slide .swiper-button-next:hover,
  .top-main--slide .swiper-button-prev:hover {
    opacity: 0.7;
  }
}
.top-main--slide .swiper-button-next.is-disable,
.top-main--slide .swiper-button-prev.is-disable {
  opacity: 0.3;
  pointer-events: none;
}
.top-main--slide .swiper-button-prev {
  background-image: url(../data/webp/top/ui/slide_prev.png.webp);
  left: 5.3333333333vw;
  right: auto;
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-button-prev {
    left: 12.298682284vw;
  }
}
.top-main--slide .swiper-button-next {
  background-image: url(../data/webp/top/ui/slide_next.png.webp);
  right: 5.3333333333vw;
  left: auto;
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-button-next {
    right: 12.298682284vw;
  }
}
.top-main--slide .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -4.0995607613vw;
  }
}
@media only screen and (max-width: 767px) {
  .top-main--slide .swiper-pagination-bullet {
    border-radius: 0.2666666667vw;
    border: 0.4vw solid #fff;
    background: #000;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin: 0 1.6vw !important;
    opacity: 1 !important;
    transition: 0.3s;
  }
  .top-main--slide .swiper-pagination-bullet-active {
    background: #ff8a00;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-pagination-bullet {
    display: none;
  }
}
.top-main--mv-img__01 {
  background-image: url(../data/webp/top/main/mainvisual_01.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__01 {
    background-image: url(../data/webp/top/main/mainvisual_01_pc.png.webp);
  }
}
.top-main--mv-img__02 {
  background-image: url(../data/webp/top/main/mainvisual_02.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__02 {
    background-image: url(../data/webp/top/main/mainvisual_02_pc.png.webp);
  }
}
.top-main--mv-img__03 {
  background-image: url(../data/webp/top/main/mainvisual_03.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__03 {
    background-image: url(../data/webp/top/main/mainvisual_03_pc.png.webp);
  }
}
.top-main--mv-img__04 {
  background-image: url(../data/webp/top/main/mainvisual_04.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__04 {
    background-image: url(../data/webp/top/main/mainvisual_04_pc.png.webp);
  }
}
.top-main--mv-img__05 {
  background-image: url(../data/webp/top/main/mainvisual_05.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__05 {
    background-image: url(../data/webp/top/main/mainvisual_05_pc.png.webp);
  }
}
.top-main--mv-img__06 {
  background-image: url(../data/webp/top/main/mainvisual_06.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__06 {
    background-image: url(../data/webp/top/main/mainvisual_06_pc.png.webp);
  }
}
.top-main--mv-img__07 {
  background-image: url(../data/webp/top/main/mainvisual_07.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__07 {
    background-image: url(../data/webp/top/main/mainvisual_07_pc.png.webp);
  }
}
.top-main--mv-img__08 {
  background-image: url(../data/webp/top/main/mainvisual_08.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__08 {
    background-image: url(../data/webp/top/main/mainvisual_08_pc.png.webp);
  }
}
.top-main--mv-img__09 {
  background-image: url(../data/webp/top/main/mainvisual_09.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__09 {
    background-image: url(../data/webp/top/main/mainvisual_09_pc.png.webp);
  }
}
.top-main--mv-img__10 {
  background-image: url(../data/webp/top/main/mainvisual_10.png.webp);
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__10 {
    background-image: url(../data/webp/top/main/mainvisual_10_pc.png.webp);
  }
}
@media only screen and (max-width: 767px) {
  .top-menu {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-position: 0 0;
    background-image: url(../data/webp/ja/top/main/bg_menu.png.webp);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    padding: 76vw 0 10.6666666667vw;
    margin-top: -78.6666666667vw;
  }
  .top-menu--list {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-image: url(../data/webp/top/main/bg_menu_list.png.webp);
    width: 100%;
    padding: 12vw 0 11.2vw;
  }
  .top-menu--list-item {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    width: 94.6666666667vw;
    height: 14vw;
    margin: 0.9333333333vw 0 0 5.3333333333vw;
  }
  .top-menu--list-item.about {
    background-image: url(../data/webp/common/header/list_about.png.webp);
  }
  .top-menu--list-item.howto {
    background-image: url(../data/webp/common/header/list_howto.png.webp);
  }
  .top-menu--list-item.chara {
    background-image: url(../data/webp/common/header/list_chara.png.webp);
  }
  .top-menu--list-item.stage {
    background-image: url(../data/webp/common/header/list_stage.png.webp);
  }
  .top-menu--list-item a {
    width: 100%;
    height: 100%;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: 4.8vw;
    text-shadow: 0.6666666667vw 1.0666666667vw 0 #000;
    letter-spacing: 0.1em;
    padding: 0 7.4666666667vw 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .top-menu--list-item a:after {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/common/icon/icon_arw_navi.png.webp);
    width: 8.5333333333vw;
    height: 7.3333333333vw;
    position: absolute;
    top: 3.3333333333vw;
    right: 7.4666666667vw;
  }
}
.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% 87%, 0 100%);
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-about--feature {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 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: 129.3333333333vw;
  margin-top: -4.2666666667vw;
  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: 66.4714494876vw;
    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.6vw;
  left: 10.6666666667vw;
}
@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: -5.6vw;
}
@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: 20vw;
  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: 7.3333333333vw;
  right: -8vw;
}
@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: 46.4vw;
  height: 46.9333333333vw;
  top: 41.6vw;
  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--feature-catch {
  width: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.top-about--feature-catch.catch-1 {
  left: 0;
  bottom: 96vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-catch.catch-1 {
    bottom: 10.2489019034vw;
  }
}
.top-about--feature-catch.catch-2 {
  right: 0;
  bottom: 8vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-catch.catch-2 {
    bottom: 5.8565153734vw;
  }
}
.top-about--movie {
  clip-path: polygon(0 22%, 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-about--movie video {
  width: 100%;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-howto {
  background-color: #000;
  clip-path: polygon(0 11%, 100% 0, 100% 89%, 0 100%);
  height: 186.6666666667vw;
  margin: -22.6666666667vw 0 0;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-howto {
    clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%);
    height: 61.4934114202vw;
    margin: -21.9619326501vw 0 0;
  }
}
.top-howto--inner {
  background-position: 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% auto;
  background-image: url(../data/webp/top/bg_howto.png.webp),
    url(../data/webp/common/bg.jpg.webp);
  clip-path: polygon(
    0 calc(11% + 0.4666666667vw),
    100% 0,
    100% calc(89% - 0.4666666667vw),
    0 100%
  );
  height: calc(186.6666666667vw - 1.8666666667vw);
  padding: 20vw 0 0;
  margin: 0.9333333333vw 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-howto--inner {
    background-position: right 0, 0 0;
    background-image: url(../data/webp/top/bg_howto_pc.png.webp),
      url(../data/webp/common/bg.jpg.webp);
    background-size: cover, 32.2840409956vw auto;
    background-position: 0 -3.2942898975vw, 0 0;
    clip-path: polygon(
      0 calc(35% + 0.2196193265vw),
      100% 0,
      100% calc(65% - 0.2196193265vw),
      0 100%
    );
    height: calc(61.4934114202vw - 0.878477306vw);
    padding: 21.2298682284vw 0 0;
    margin: 0.439238653vw 0;
  }
  .top-howto--inner:after {
    display: block;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 30%,
      rgba(0, 0, 0, 0.01) 100%
    );
    width: 60%;
    height: 28.5505124451vw;
    position: absolute;
    top: 21.0834553441vw;
    left: -3.6603221083vw;
    transform: rotate(-12deg);
    z-index: 3;
  }
}
@media only screen and (min-width: 767px) {
  .top-howto--tit {
    width: 60.3953147877vw;
    position: relative;
    z-index: 5;
  }
}
.top-howto--movie {
  border: 0.6666666667vw solid #000;
  background: #000;
  width: 82.6666666667vw;
  height: 39.4666666667vw;
  position: absolute;
  top: 66.6666666667vw;
  left: 4.6666666667vw;
  transform: rotate(-12.25deg);
  overflow: hidden;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .top-howto--movie {
    border: 0.3660322108vw solid #000;
    width: 38.7994143485vw;
    height: 21.9619326501vw;
    position: absolute;
    top: 12.4450951684vw;
    left: 39.5314787701vw;
    transform: rotate(-12deg);
  }
}
.top-howto--movie video {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-howto--movie-bg {
  background: #0fabd0;
  width: 82.6666666667vw;
  height: 39.4666666667vw;
  position: absolute;
  top: 67.0666666667vw;
  left: 5.0666666667vw;
  transform: rotate(-12.25deg);
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-howto--movie-bg {
    width: 38.7994143485vw;
    height: 21.9619326501vw;
    position: absolute;
    top: 12.8111273792vw;
    left: 40.0439238653vw;
    transform: rotate(-12deg);
  }
}
.top-howto--img {
  width: 100%;
  height: 109.3333333333vw;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .top-howto--img.luffy {
    height: 52.7086383602vw;
    bottom: 6.9546120059vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-howto--img.coin {
    height: 34.7730600293vw;
  }
}
.top-howto--line {
  width: 40.2635431918vw;
  position: absolute;
  top: 38.7994143485vw;
  left: 0;
  z-index: 4;
}
.top-howto--btn {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/bg_btn.png.webp);
  width: 58.4vw;
  height: 13.8666666667vw;
  padding: 0 2vw 0.5333333333vw;
  margin: 63.3333333333vw auto 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.top-howto--btn .bg-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
.top-howto--btn .bg-img.on {
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .top-howto--btn:hover .bg-img.on {
    opacity: 1;
  }
  .top-howto--btn:hover .bg-img.off {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-howto--btn {
    background-size: 100% auto;
    width: 21.4494875549vw;
    height: 5.6368960469vw;
    padding: 0 1.4641288433vw 0.878477306vw;
    margin: -9.5168374817vw 0 0 10.2489019034vw;
    transform: rotate(-12deg);
    z-index: 6;
  }
  .top-howto--btn:hover .top-howto--btn-text:before {
    right: -0.5124450952vw;
  }
}
.top-howto--btn-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  white-space: nowrap;
  font-size: 5.3333333333vw;
  letter-spacing: 0.04em;
  text-shadow: 0 0.5333333333vw 0 #000;
  padding-right: 6.6666666667vw;
  margin-left: 6.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-howto--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    padding-right: 2.5622254758vw;
    margin-left: 1.8301610542vw;
  }
}
.top-howto--btn-text:before {
  display: block;
  /* content: ""; */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_link.png.webp);
  width: 4.6666666667vw;
  height: 5.4666666667vw;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% + 0.6666666667vw);
}
@media only screen and (min-width: 767px) {
  .top-howto--btn-text:before {
    width: 1.9033674963vw;
    height: 2.3426061493vw;
    top: calc(50% + 0.3660322108vw);
    transition: 0.3s;
  }
}
.top-chara {
  background-color: #000;
  clip-path: polygon(0 10.5%, 100% 0, 100% 89.5%, 0 100%);
  height: 202.6666666667vw;
  margin: -22.6666666667vw 0 0;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-chara {
    clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%);
    height: 61.4934114202vw;
    margin: -21.9619326501vw 0 0;
  }
}
.top-chara--inner {
  background-position: 0 -20vw, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% auto;
  background-image: url(../data/webp/top/bg_chara.png.webp),
    url(../data/webp/common/bg.jpg.webp);
  clip-path: polygon(
    0 calc(10.5% + 0.4666666667vw),
    100% 0,
    100% calc(89.5% - 0.4666666667vw),
    0 100%
  );
  height: calc(202.6666666667vw - 1.8666666667vw);
  padding: 8.6666666667vw 0 0;
  margin: 0.9333333333vw 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-chara--inner {
    background-image: url(../data/webp/top/bg_chara_pc.png.webp),
      url(../data/webp/common/bg.jpg.webp);
    background-size: cover, 32.2840409956vw auto;
    background-position: right -0.7320644217vw, 0 0;
    clip-path: polygon(
      0 calc(35% + 0.2196193265vw),
      100% 0,
      100% calc(65% - 0.2196193265vw),
      0 100%
    );
    height: calc(61.4934114202vw - 0.878477306vw);
    padding: 24.1581259151vw 0 0;
    margin: 0.439238653vw 0;
  }
  .top-chara--inner:after {
    display: block;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 30%,
      rgba(0, 0, 0, 0.01) 100%
    );
    width: 60%;
    height: 30.7467057101vw;
    position: absolute;
    top: 19.7657393851vw;
    left: -3.6603221083vw;
    transform: rotate(-12deg);
    z-index: 3;
  }
}
@media only screen and (min-width: 767px) {
  .top-chara--tit {
    width: 60.3953147877vw;
    position: relative;
    z-index: 5;
  }
}
@media only screen and (min-width: 767px) {
  .top-chara--slider {
    margin-top: -40%;
  }
}
.top-chara--slide {
  transform: skew(0, -12deg);
}
@media only screen and (min-width: 767px) {
  .top-chara--slide {
    transform: skew(0, 12deg);
  }
}
.top-chara--slide-item {
  width: 28.2666666667vw !important;
  height: 88.8vw !important;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-chara--slide-item {
    width: 11.2005856515vw !important;
    height: 34.9926793558vw !important;
  }
}
.top-chara--slide-item__bg {
  width: 27.7333333333vw;
  height: 88vw;
  position: absolute;
  right: 0;
  bottom: 0;
}
.top-chara--slide-item__bg.red {
  background: #ff4919;
}
.top-chara--slide-item__bg.blue {
  background: #195ebc;
}
.top-chara--slide-item__bg.green {
  background: #23e59a;
}
@media only screen and (min-width: 767px) {
  .top-chara--slide-item__bg {
    width: 10.980966325vw;
    height: 34.6998535871vw;
  }
}
.top-chara--slide-item__img {
  width: 27.7333333333vw;
  height: 88vw;
  display: block;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-chara--slide-item__img {
    width: 10.980966325vw;
    height: 34.6998535871vw;
  }
}
.top-chara--slide-item__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate3d(-50%, -50%, 0) skewY(12deg);
  max-width: none;
  width: 107%;
  height: auto;
}
@media only screen and (min-width: 767px) {
  .top-chara--slide-item__img img {
    transform: translate3d(-50%, -50%, 0) skewY(-12deg);
  }
}
.top-chara--line {
  width: 40.2635431918vw;
  position: absolute;
  top: 38.7994143485vw;
  left: 0;
  z-index: 4;
}
.top-chara--btn {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/bg_btn.png.webp);
  width: 58.4vw;
  height: 13.8666666667vw;
  padding: 0 2vw 0.5333333333vw;
  margin: 9.3333333333vw auto 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.top-chara--btn .bg-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
.top-chara--btn .bg-img.on {
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .top-chara--btn:hover .bg-img.on {
    opacity: 1;
  }
  .top-chara--btn:hover .bg-img.off {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-chara--btn {
    background-size: 100% auto;
    width: 21.4494875549vw;
    height: 5.6368960469vw;
    padding: 0 1.4641288433vw 0.878477306vw;
    margin: 2.196193265vw 0 0 10.2489019034vw;
    transform: rotate(-12deg);
    z-index: 6;
  }
  .top-chara--btn:hover .top-chara--btn-text:before {
    right: -0.5124450952vw;
  }
}
.top-chara--btn-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.3333333333vw;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-shadow: 0 0.5333333333vw 0 #000;
  padding-right: 6.6666666667vw;
  margin-left: 6.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-chara--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    padding-right: 2.5622254758vw;
    margin-left: 1.8301610542vw;
  }
}
.top-chara--btn-text:before {
  display: block;
  /* content: ""; */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_link.png.webp);
  width: 4.6666666667vw;
  height: 5.4666666667vw;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% + 0.6666666667vw);
}
@media only screen and (min-width: 767px) {
  .top-chara--btn-text:before {
    width: 1.9033674963vw;
    height: 2.3426061493vw;
    top: calc(50% + 0.3660322108vw);
    transition: 0.3s;
  }
}
.top-stage {
  background-color: #000;
  clip-path: polygon(0 11.5%, 100% 0, 100% 88.5%, 0 100%);
  height: 174.6666666667vw;
  margin: -22.6666666667vw 0 0;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-stage {
    clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%);
    height: 61.4934114202vw;
    margin: -21.9619326501vw 0 0;
  }
}
.top-stage--inner {
  background-position: 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% auto;
  background-image: url(../data/webp/top/bg_stage.png.webp),
    url(../data/webp/common/bg.jpg.webp);
  background-position: 0 bottom, 0 0;
  clip-path: polygon(
    0 calc(11.5% + 0.4666666667vw),
    100% 0,
    100% calc(88.5% - 0.4666666667vw),
    0 100%
  );
  height: calc(174.6666666667vw - 1.8666666667vw);
  padding: 13.3333333333vw 0 0;
  margin: 0.9333333333vw 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-stage--inner {
    background-position: right 0.7320644217vw, 0 0;
    background-image: url(../data/webp/top/bg_stage_pc.png.webp),
      url(../data/webp/common/bg.jpg.webp);
    background-size: cover, 32.2840409956vw auto;
    clip-path: polygon(
      0 calc(35% + 0.2196193265vw),
      100% 0,
      100% calc(65% - 0.2196193265vw),
      0 100%
    );
    height: calc(61.4934114202vw - 0.878477306vw);
    padding: 21.2298682284vw 0 0;
    margin: 0.439238653vw 0;
  }
  .top-stage--inner:after {
    display: block;
    content: "";
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 30%,
      rgba(0, 0, 0, 0.01) 100%
    );
    width: 60%;
    height: 28.5505124451vw;
    position: absolute;
    top: 21.0834553441vw;
    left: -3.6603221083vw;
    transform: rotate(-12deg);
    z-index: 3;
  }
}
@media only screen and (min-width: 767px) {
  .top-stage--tit {
    width: 60.3953147877vw;
    position: relative;
    z-index: 5;
  }
}
.top-stage--slider {
  margin: -16vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-stage--slider {
    margin-top: -34.5%;
  }
}
.top-stage--slide {
  transform: skew(0, -12deg);
}
@media only screen and (min-width: 767px) {
  .top-stage--slide {
    transform: skew(0, 12deg);
  }
}
.top-stage--slide-list:nth-of-type(2) {
  margin: 1.3333333333vw 0 0;
}
.top-stage--slide-item {
  width: 40vw !important;
  height: 33.3333333333vw !important;
  margin-right: 0.9333333333vw !important;
}
@media only screen and (min-width: 767px) {
  .top-stage--slide-item {
    width: 29.7218155198vw !important;
    height: 26.0614934114vw !important;
    margin-right: 0.7320644217vw !important;
    position: relative;
  }
}
.top-stage--slide-item:before {
  display: block;
  content: "";
  background: #000;
  width: 39.3333333333vw;
  height: 32.6666666667vw;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media only screen and (min-width: 767px) {
  .top-stage--slide-item:before {
    width: 29.5021961933vw;
    height: 25.8418740849vw;
  }
}
.top-stage--slide-item__img {
  width: 39.3333333333vw;
  height: 32.6666666667vw;
  display: block;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-stage--slide-item__img {
    width: 29.5021961933vw;
    height: 25.8418740849vw;
  }
}
.top-stage--slide-item__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate3d(-50%, -50%, 0) skewY(12deg);
  width: 125%;
  height: auto;
  max-width: none;
}
@media only screen and (min-width: 767px) {
  .top-stage--slide-item__img img {
    transform: translate3d(-50%, -50%, 0) skewY(-12deg);
  }
}
.top-stage--line {
  width: 40.2635431918vw;
  position: absolute;
  top: 38.7994143485vw;
  left: 0;
  z-index: 4;
}
.top-stage--btn {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  background-image: url(../data/webp/common/bg_btn.png.webp);
  width: 58.4vw;
  height: 13.8666666667vw;
  padding: 0 2vw 0.5333333333vw;
  margin: 9.3333333333vw auto 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.top-stage--btn .bg-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
.top-stage--btn .bg-img.on {
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .top-stage--btn:hover .bg-img.on {
    opacity: 1;
  }
  .top-stage--btn:hover .bg-img.off {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-stage--btn {
    background-size: 100% auto;
    width: 21.4494875549vw;
    height: 5.6368960469vw;
    padding: 0 1.4641288433vw 0.878477306vw;
    margin: 1.8301610542vw 0 0 10.2489019034vw;
    transform: rotate(-12deg);
    z-index: 6;
  }
  .top-stage--btn:hover .top-stage--btn-text:before {
    right: -0.5124450952vw;
  }
}
.top-stage--btn-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.3333333333vw;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 0.5333333333vw 0 #000;
  padding-right: 6.6666666667vw;
  margin-left: 6.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .top-stage--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    padding-right: 2.5622254758vw;
    margin-left: 1.8301610542vw;
  }
}
.top-stage--btn-text:before {
  display: block;
  /* content: ""; */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_link.png.webp);
  width: 4.6666666667vw;
  height: 5.4666666667vw;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% + 0.6666666667vw);
}
@media only screen and (min-width: 767px) {
  .top-stage--btn-text:before {
    width: 1.9033674963vw;
    height: 2.3426061493vw;
    top: calc(50% + 0.3660322108vw);
    transition: 0.3s;
  }
}
.top-info {
  padding: 5.3333333333vw 5.3333333333vw 8vw;
}
@media only screen and (min-width: 767px) {
  .top-info {
    padding: 0;
    margin: -13.17715959vw 0 2.9282576867vw;
    display: flex;
    justify-content: end;
  }
}
@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: 44.6559297218vw;
    padding: 2.0497803807vw 5.4904831625vw 2.0497803807vw 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
  }
}
.top-info--tit {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 6.4vw;
  text-shadow: 0.2666666667vw 0.2666666667vw 0 #000,
    -0.2666666667vw -0.2666666667vw 0 #000, -0.2666666667vw 1px 0 #000,
    1px -0.2666666667vw 0 #000, 0.2666666667vw 0 0 #000,
    -0.2666666667vw 0 0 #000, 0 0.2666666667vw 0 #000, 0 -0.2666666667vw 0 #000;
  text-align: center;
  letter-spacing: 0.1em;
  padding-left: 0.1em;
  padding: 0.3660322108vw 0 0;
  color: #fff;
}
@media only screen and (min-width: 767px) {
  .top-info--tit {
    font-size: 1.9033674963vw;
    text-shadow: 0.2196193265vw 0.2196193265vw 0 #000,
      -0.2196193265vw -0.2196193265vw 0 #000, -0.2196193265vw 1px 0 #000,
      1px -0.2196193265vw 0 #000, 0.2196193265vw 0 0 #000,
      -0.2196193265vw 0 0 #000, 0 0.2196193265vw 0 #000,
      0 -0.2196193265vw 0 #000;
    text-align: left;
    margin: 0 0 0 1.0980966325vw;
  }
  .top-info--tit small {
    font-size: 1.4641288433vw;
  }
}
.top-info--btn {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/ja/top/btn_x.png.webp);
  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;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
  }
  .top-info--btn .bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
  }
  .top-info--btn .bg-img.on {
    opacity: 0;
  }
  .top-info--btn:hover:before {
    background-image: url(../data/webp/common/icon/icon_x_b.png.webp);
  }
  .top-info--btn:hover .bg-img.on {
    opacity: 1;
  }
  .top-info--btn:hover .bg-img.off {
    opacity: 0;
  }
  .top-info--btn:hover span {
    color: #000;
  }
}
.top-info--btn:before {
  display: block;
  content: "";
  background-image: url(../data/webp/common/icon/icon_x.png.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  width: 6.6666666667vw;
  height: 6.9333333333vw;
  margin: 0.2666666667vw 2.2666666667vw 0 0;
  position: relative;
  z-index: 2;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-info--btn:before {
    width: 1.5373352855vw;
    height: 1.6837481698vw;
    margin: 0.2196193265vw 0.7320644217vw 0 0;
  }
}
.top-info--btn span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.3333333333vw;
  letter-spacing: 0.1em;
  position: relative;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-info--btn span {
    font-size: 1.6105417277vw;
  }
}
.top-bnr {
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 0.8vw 0.8vw;
  background-image: url(../data/webp/ja/top/bg_bnr.png.webp);
  padding: 4.6666666667vw 0 8.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .top-bnr {
    background-size: 0.2196193265vw 0.2196193265vw;
    padding: 1.317715959vw 0 2.196193265vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-bnr--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .top-bnr--list:has(.top-bnr--list-item:nth-child(5)) {
    padding: 0 19.7657393851vw;
  }
}
.top-bnr--list-item {
  width: 78vw;
  margin: 4vw auto 0;
}
@media only screen and (min-width: 767px) {
  .top-bnr--list-item {
    width: 19.2532942899vw;
    flex-basis: 19.2532942899vw;
    margin: 0.878477306vw 0.439238653vw 0;
  }
}
.top-bnr--list-item a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-bnr--list-item a:hover {
    opacity: 0.8;
  }
}
.chara-index {
  padding: 7.3333333333vw 5.3333333333vw 10vw;
}
@media only screen and (max-width: 767px) {
  .chara-index {
    border-top: #000 0.2666666667vw solid;
    border-bottom: #0fabd0 1.3333333333vw solid;
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 1.0666666667vw;
    background-image: url(../data/webp/common/bg_list_filter.png.webp);
  }
}
@media only screen and (min-width: 767px) {
  .chara-index {
    width: 80.8199121523vw;
    padding: 0;
    margin: 0 auto;
    position: relative;
  }
  .chara-index:before {
    display: block;
    content: "";
    background-image: url(../data/webp/common/bg_list_filter.png.webp);
    border-bottom: #0fabd0 0.3660322108vw solid;
    background-position: 0 1.4641288433vw;
    background-size: 0.2928257687vw;
    width: 100%;
    height: calc(100% - 1.4641288433vw);
    position: absolute;
    top: 1.4641288433vw;
    left: 0;
  }
}
@media only screen and (min-width: 767px) {
  .chara-index--list {
    padding: 0 1.8301610542vw 1.4641288433vw 2.4158125915vw;
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .chara-index--list-item:not(:first-child) {
    margin-top: 2.6666666667vw;
  }
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item {
    margin: 0 0 1.4641288433vw;
  }
  .chara-index--list-item:not(:nth-child(3n)) {
    margin: 0 1.4641288433vw 1.4641288433vw 0;
  }
}
.chara-index--list-item a {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  width: 89.3333333333vw;
  height: 22.6666666667vw;
  display: block;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item a {
    width: 24.5241581259vw;
    height: 6.2225475842vw;
    transition: 0.3s;
  }
  .chara-index--list-item a:hover .chara-index--list-item__prof:after {
    opacity: 1;
  }
}
.chara-index--list-item__prof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 62%;
  height: calc(100% - 1.3333333333vw);
  position: relative;
}
.chara-index--list-item__prof:before {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    #000 10%,
    rgba(0, 0, 0, 0.6) 38%,
    rgba(0, 0, 0, 0) 60%
  );
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chara-index--list-item__prof:after {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    #ff8a00 10%,
    rgba(255, 138, 0, 0.6) 38%,
    rgba(255, 138, 0, 0) 60%
  );
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item__prof {
    height: calc(100% - 0.3660322108vw);
    transition: 0.3s;
  }
  .chara-index--list-item__prof:before {
    display: block;
    content: "";
    width: 24.5241581259vw;
    transition: 0.3s;
  }
  .chara-index--list-item__prof:after {
    display: block;
    content: "";
    width: 24.5241581259vw;
    transition: 0.3s;
  }
}
.chara-index--list-item__catch {
  background: linear-gradient(
    90deg,
    #000 0,
    rgba(0, 0, 0, 0.7) 45%,
    rgba(0, 0, 0, 0) 80%
  );
  width: 100%;
  padding: 0.2666666667vw 1.6vw 0.9333333333vw 5.3333333333vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item__catch {
    padding: 0.2196193265vw 0.5856515373vw 0.3660322108vw 1.4641288433vw;
  }
}
.chara-index--list-item__catch:after {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    #ff8a00 0,
    rgba(255, 138, 0, 0.7) 45%,
    rgba(255, 138, 0, 0) 80%
  );
  width: 100%;
  height: 0.1333333333vw;
  position: absolute;
  left: 0;
  bottom: -0.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item__catch:after {
    height: 0.0732064422vw;
    bottom: -0.0732064422vw;
  }
}
.chara-index--list-item__catch span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.9333333333vw;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item__catch span {
    font-size: 0.8052708638vw;
  }
}
.chara-index--list-item__name {
  width: 100%;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-size: 5.3333333333vw;
  line-height: 1.15;
  text-shadow: 0 0.8vw 0 #000;
  padding: 0.6666666667vw 0 0 5.3333333333vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-index--list-item__name {
    font-size: 1.4641288433vw;
    text-shadow: 0 0.2196193265vw 0 #000;
    padding: 0.2196193265vw 0 0 1.4641288433vw;
    line-height: 1.15;
  }
}
.chara-index .item-0001 a {
  background-image: url(../data/webp/character/0001_thumb.png.webp);
}
.chara-index .item-0002 a {
  background-image: url(../data/webp/character/0002_thumb.png.webp);
}
.chara-index .item-0003 a {
  background-image: url(../data/webp/character/0003_thumb.png.webp);
}
.chara-index .item-0004 a {
  background-image: url(../data/webp/character/0004_thumb.png.webp);
}
.chara-index .item-0005 a {
  background-image: url(../data/webp/character/0005_thumb.png.webp);
}
.chara-index .item-0006 a {
  background-image: url(../data/webp/character/0006_thumb.png.webp);
}
.chara-index .item-0007 a {
  background-image: url(../data/webp/character/0007_thumb.png.webp);
}
.chara-index .item-0008 a {
  background-image: url(../data/webp/character/0008_thumb.png.webp);
}
.chara-index .item-0009 a {
  background-image: url(../data/webp/character/0009_thumb.png.webp);
}
.chara-index .item-0010 a {
  background-image: url(../data/webp/character/0010_thumb.png.webp);
}
.chara-index .item-0011 a {
  background-image: url(../data/webp/character/0011_thumb.png.webp);
}
.chara-index .item-0012 a {
  background-image: url(../data/webp/character/0012_thumb.png.webp);
}
.chara-index .item-0013 a {
  background-image: url(../data/webp/character/0013_thumb.png.webp);
}
.chara-index .item-0014 a {
  background-image: url(../data/webp/character/0014_thumb.png.webp);
}
.chara-index .item-0015 a {
  background-image: url(../data/webp/character/0015_thumb.png.webp);
}
.chara-index .item-0016 a {
  background-image: url(../data/webp/character/0016_thumb.png.webp);
}
.chara-index .item-0017 a {
  background-image: url(../data/webp/character/0017_thumb.png.webp);
}
.chara-index .item-0018 a {
  background-image: url(../data/webp/character/0018_thumb.png.webp);
}
.chara-index .item-0019 a {
  background-image: url(../data/webp/character/0019_thumb.png.webp);
}
.chara-index .item-0020 a {
  background-image: url(../data/webp/character/0020_thumb.png.webp);
}
.chara-index .item-0021 a {
  background-image: url(../data/webp/character/0021_thumb.png.webp);
}
.chara-index .item-0022 a {
  background-image: url(../data/webp/character/0022_thumb.png.webp);
}
.chara-index .item-0023 a {
  background-image: url(../data/webp/character/0023_thumb.png.webp);
}
.chara-index .item-0024 a {
  background-image: url(../data/webp/character/0024_thumb.png.webp);
}
.chara-index .item-0025 a {
  background-image: url(../data/webp/character/0025_thumb.png.webp);
}
.chara-index .item-0026 a {
  background-image: url(../data/webp/character/0026_thumb.png.webp);
}
.chara-index .item-0027 a {
  background-image: url(../data/webp/character/0027_thumb.png.webp);
}
.chara-index .item-0028 a {
  background-image: url(../data/webp/character/0028_thumb.png.webp);
}
.chara-index .item-0029 a {
  background-image: url(../data/webp/character/0029_thumb.png.webp);
}
.chara-index .item-0030 a {
  background-image: url(../data/webp/character/0030_thumb.png.webp);
}
.chara-index .item-0031 a {
  background-image: url(../data/webp/character/0031_thumb.png.webp);
}
.chara-index .item-0032 a {
  background-image: url(../data/webp/character/0032_thumb.png.webp);
}
.chara-index .item-0033 a {
  background-image: url(../data/webp/character/0033_thumb.png.webp);
}
.chara-index .item-0034 a {
  background-image: url(../data/webp/character/0034_thumb.png.webp);
}
.chara-index .item-0035 a {
  background-image: url(../data/webp/character/0035_thumb.png.webp);
}
.chara-index .item-0036 a {
  background-image: url(../data/webp/character/0036_thumb.png.webp);
}
.chara-index .item-0037 a {
  background-image: url(../data/webp/character/0037_thumb.png.webp);
}
.chara-index .item-0038 a {
  background-image: url(../data/webp/character/0038_thumb.png.webp);
}
.chara-index .item-0039 a {
  background-image: url(../data/webp/character/0039_thumb.png.webp);
}
.chara-index .item-0040 a {
  background-image: url(../data/webp/character/0040_thumb.png.webp);
}
.chara-index .item-0041 a {
  background-image: url(../data/webp/character/0041_thumb.png.webp);
}
.chara-index .item-0042 a {
  background-image: url(../data/webp/character/0042_thumb.png.webp);
}
.chara-index .item-0043 a {
  background-image: url(../data/webp/character/0043_thumb.png.webp);
}
.chara-index .item-0044 a {
  background-image: url(../data/webp/character/0044_thumb.png.webp);
}
.chara-index .item-0045 a {
  background-image: url(../data/webp/character/0045_thumb.png.webp);
}
.chara-index .item-0046 a {
  background-image: url(../data/webp/character/0046_thumb.png.webp);
}
.chara-index .item-0047 a {
  background-image: url(../data/webp/character/0047_thumb.png.webp);
}
.chara-index .item-0048 a {
  background-image: url(../data/webp/character/0048_thumb.png.webp);
}
.chara-index .item-0049 a {
  background-image: url(../data/webp/character/0049_thumb.png.webp);
}
.chara-index .item-0050 a {
  background-image: url(../data/webp/character/0050_thumb.png.webp);
}
.chara-index .item-0051 a {
  background-image: url(../data/webp/character/0051_thumb.png.webp);
}
.chara-index .item-0052 a {
  background-image: url(../data/webp/character/0052_thumb.png.webp);
}
.chara-index .item-0053 a {
  background-image: url(../data/webp/character/0053_thumb.png.webp);
}
.chara-index .item-0054 a {
  background-image: url(../data/webp/character/0054_thumb.png.webp);
}
.chara-index .item-0055 a {
  background-image: url(../data/webp/character/0055_thumb.png.webp);
}
.chara-index .item-0056 a {
  background-image: url(../data/webp/character/0056_thumb.png.webp);
}
.chara-index .item-0057 a {
  background-image: url(../data/webp/character/0057_thumb.png.webp);
}
.chara-index .item-0058 a {
  background-image: url(../data/webp/character/0058_thumb.png.webp);
}
.chara-index .item-0059 a {
  background-image: url(../data/webp/character/0059_thumb.png.webp);
}
.chara-index .item-0060 a {
  background-image: url(../data/webp/character/0060_thumb.png.webp);
}
.chara-index .item-0061 a {
  background-image: url(../data/webp/character/0061_thumb.png.webp);
}
.chara-index .item-0062 a {
  background-image: url(../data/webp/character/0062_thumb.png.webp);
}
.chara-index .item-0063 a {
  background-image: url(../data/webp/character/0063_thumb.png.webp);
}
.chara-index .item-0064 a {
  background-image: url(../data/webp/character/0064_thumb.png.webp);
}
.chara-index .item-0065 a {
  background-image: url(../data/webp/character/0065_thumb.png.webp);
}
.chara-index .item-0066 a {
  background-image: url(../data/webp/character/0066_thumb.png.webp);
}
.chara-index .item-0067 a {
  background-image: url(../data/webp/character/0067_thumb.png.webp);
}
.chara-index .item-0068 a {
  background-image: url(../data/webp/character/0068_thumb.png.webp);
}
.chara-index .item-0069 a {
  background-image: url(../data/webp/character/0069_thumb.png.webp);
}
.chara-index .item-0070 a {
  background-image: url(../data/webp/character/0070_thumb.png.webp);
}
.chara-index .item-0071 a {
  background-image: url(../data/webp/character/0071_thumb.png.webp);
}
.chara-index .item-0072 a {
  background-image: url(../data/webp/character/0072_thumb.png.webp);
}
.chara-index .item-0073 a {
  background-image: url(../data/webp/character/0073_thumb.png.webp);
}
.chara-index .item-0074 a {
  background-image: url(../data/webp/character/0074_thumb.png.webp);
}
.chara-index .item-0075 a {
  background-image: url(../data/webp/character/0075_thumb.png.webp);
}
.chara-index .item-0076 a {
  background-image: url(../data/webp/character/0076_thumb.png.webp);
}
.chara-index .item-0077 a {
  background-image: url(../data/webp/character/0077_thumb.png.webp);
}
.chara-index .item-0078 a {
  background-image: url(../data/webp/character/0078_thumb.png.webp);
}
.chara-index .item-0079 a {
  background-image: url(../data/webp/character/0079_thumb.png.webp);
}
.chara-index .item-0080 a {
  background-image: url(../data/webp/character/0080_thumb.png.webp);
}
.chara-index .item-0081 a {
  background-image: url(../data/webp/character/0081_thumb.png.webp);
}
.chara-index .item-0082 a {
  background-image: url(../data/webp/character/0082_thumb.png.webp);
}
.chara-index .item-0083 a {
  background-image: url(../data/webp/character/0083_thumb.png.webp);
}
.chara-index .item-0084 a {
  background-image: url(../data/webp/character/0084_thumb.png.webp);
}
.chara-index .item-0085 a {
  background-image: url(../data/webp/character/0085_thumb.png.webp);
}
.chara-index .item-0086 a {
  background-image: url(../data/webp/character/0086_thumb.png.webp);
}
.chara-index .item-0087 a {
  background-image: url(../data/webp/character/0087_thumb.png.webp);
}
.chara-index .item-0088 a {
  background-image: url(../data/webp/character/0088_thumb.png.webp);
}
.chara-index .item-0089 a {
  background-image: url(../data/webp/character/0089_thumb.png.webp);
}
.chara-index .item-0090 a {
  background-image: url(../data/webp/character/0090_thumb.png.webp);
}
.chara-index .item-0091 a {
  background-image: url(../data/webp/character/0091_thumb.png.webp);
}
.chara-index .item-0092 a {
  background-image: url(../data/webp/character/0092_thumb.png.webp);
}
.chara-index .item-0093 a {
  background-image: url(../data/webp/character/0093_thumb.png.webp);
}
.chara-index .item-0094 a {
  background-image: url(../data/webp/character/0094_thumb.png.webp);
}
.chara-index .item-0095 a {
  background-image: url(../data/webp/character/0095_thumb.png.webp);
}
.chara-index .item-0096 a {
  background-image: url(../data/webp/character/0096_thumb.png.webp);
}
.chara-index .item-0097 a {
  background-image: url(../data/webp/character/0097_thumb.png.webp);
}
.chara-index .item-0098 a {
  background-image: url(../data/webp/character/0098_thumb.png.webp);
}
.chara-index .item-0099 a {
  background-image: url(../data/webp/character/0099_thumb.png.webp);
}
.chara-index .item-0100 a {
  background-image: url(../data/webp/character/0100_thumb.png.webp);
}
.chara-main {
  padding: 21.3333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-main {
    padding: 6.588579795vw 0 5.4904831625vw;
    overflow: hidden;
  }
}
.chara-main--bg {
  pointer-events: none;
}
.chara-main--bg-item {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  width: 100%;
  height: 166.6666666667vw;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: repeat;
  background-size: 10vw;
  background-position: 0 0;
}
@media only screen and (min-width: 767px) {
  .chara-main--bg-item {
    background-size: 3.6603221083vw;
    background-position: 2.196193265vw 0.878477306vw;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 54%, 0 100%);
  }
}
.chara-main--bg-item[data-color="blue"] {
  background-image: url(../data/webp/character/ui/bg_blue.jpg.webp);
}
.chara-main--bg-item[data-color="red"] {
  background-image: url(../data/webp/character/ui/bg_red.jpg.webp);
}
.chara-main--bg-item[data-color="green"] {
  background-image: url(../data/webp/character/ui/bg_green.jpg.webp);
}
@media only screen and (max-width: 767px) {
  .chara-main--illust {
    position: relative;
  }
}
.chara-main--illust-img {
  width: 146.6666666667vw;
  height: 146.6666666667vw;
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .chara-main--illust-img {
    left: 50%;
    transform: translateX(-50%);
  }
  .chara-main--illust-img.illust-3d-1,
  .chara-main--illust-img.illust-3d-2,
  .chara-main--illust-img.illust-3d-3 {
    width: 106.6666666667vw;
    height: 106.6666666667vw;
    top: 2.6666666667vw;
  }
}
@media only screen and (min-width: 767px) {
  .chara-main--illust-img {
    width: 44.6559297218vw;
    height: 44.6559297218vw;
    top: 1.0980966325vw;
    right: 4.0263543192vw;
    z-index: 2;
  }
}
.chara-main--mode-name {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.5) 60%,
    #000 100%
  );
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4vw;
  text-shadow: 0 0.4vw 0 #000;
  padding: 0.8vw 5.3333333333vw 1.0666666667vw 12.6666666667vw;
  position: absolute;
  top: 12.6666666667vw;
  right: 0;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .chara-main--mode-name {
    font-size: 1.756954612vw;
    text-shadow: 0 0.2196193265vw 0 #000;
    padding: 0.439238653vw 2.9282576867vw 0.5856515373vw 3.513909224vw;
    top: 4.0263543192vw;
  }
}
.chara-main--ui {
  position: relative;
  z-index: 3;
}
.chara-main--ui-btn {
  width: 22.6666666667vw;
  height: 20.2666666667vw;
  position: absolute;
  left: 4vw;
  z-index: 4;
}
@media only screen and (min-width: 767px) {
  .chara-main--ui-btn {
    width: 8.78477306vw;
    height: 7.7598828697vw;
    left: auto;
    right: 2.5622254758vw;
  }
}
.chara-main--ui-btn__img {
  width: 100%;
  height: 100%;
  transition: 0.3s;
  cursor: pointer;
  pointer-events: auto;
}
.chara-main--ui-btn__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) scale(0.9);
  transition: 0.3s;
}
@media only screen and (min-width: 767px) {
  .chara-main--ui-btn__img:hover img {
    transform: translate(-50%, -50%) scale(1);
  }
}
.chara-main--ui-btn.btn-change {
  top: 69.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--ui-btn.btn-change {
    top: 19.7657393851vw;
  }
}
.chara-main--ui-btn.btn-2d {
  top: 89.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--ui-btn.btn-2d {
    top: 27.8184480234vw;
  }
}
.chara-main--ui-btn.btn-3d {
  top: 89.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--ui-btn.btn-3d {
    top: 27.8184480234vw;
  }
}
.chara-main--data {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/character/ui/bg_data.png.webp);
  width: 100%;
  min-height: 101.3333333333vw;
  padding: 16.9333333333vw 0 14.6666666667vw;
  margin-top: 95.3333333333vw;
  position: relative;
  pointer-events: none;
}
@media only screen and (min-width: 767px) {
  .chara-main--data {
    background-image: url(../data/webp/character/ui/bg_data_pc.png.webp);
    background-repeat: repeat-y;
    width: 71.7423133236vw;
    min-height: 34.4070278184vw;
    padding: 2.196193265vw 0 3.074670571vw;
    margin-top: 0;
  }
}
.chara-main--data-catch {
  background: #ff8a00;
  max-width: 90%;
  height: 4.8vw;
  display: inline-flex;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch {
    max-width: 70%;
    height: 2.4890190337vw;
    margin-left: 2.9282576867vw;
  }
}
.chara-main--data-catch:before {
  display: block;
  content: "";
  background: #ff8a00;
  clip-path: polygon(
    65% 0,
    100% calc(50% + 0.2666666667vw),
    calc(65% + 0.1333333333vw) 100%,
    0 100%,
    0 0
  );
  width: 5.3333333333vw;
  height: 4.8vw;
  position: absolute;
  top: 0;
  right: -2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch:before {
    clip-path: polygon(
      65% 0,
      100% calc(50% + 0.1464128843vw),
      calc(65% + 0.0732064422vw) 100%,
      0 100%,
      0 0
    );
    width: 2.9282576867vw;
    height: 2.4890190337vw;
    right: -1.4641288433vw;
  }
}
.chara-main--data-catch__bg {
  background: #000;
  height: 4.5333333333vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch__bg {
    height: 2.3426061493vw;
  }
}
.chara-main--data-catch__bg:before {
  display: block;
  content: "";
  background: #000;
  clip-path: polygon(65% 0, 100% 50%, 65% 100%, 0 100%, 0 0);
  width: 5.3333333333vw;
  height: 4.5333333333vw;
  position: absolute;
  top: 0;
  right: -2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch__bg:before {
    width: 2.9282576867vw;
    height: 2.3426061493vw;
    right: -1.4641288433vw;
  }
}
.chara-main--data-catch span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.9333333333vw;
  padding: 0 0.2666666667vw 0 5.3333333333vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch span {
    font-size: 1.4641288433vw;
    padding: 0 0.1464128843vw 0 0.7320644217vw;
  }
}
.chara-main--data-name {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.9333333333vw 5.3333333333vw 3.6vw;
  margin-top: -1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name {
    padding: 1.6837481698vw 20.4978038067vw 1.4641288433vw 2.7818448023vw;
    margin-top: -1.1713030747vw;
  }
}
.chara-main--data-name-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.chara-main--data-name-bg[data-color="blue"] {
  background: linear-gradient(
    90deg,
    rgba(25, 92, 175, 0) 0,
    rgba(25, 92, 175, 0.7) 15%,
    rgba(25, 92, 175, 0.7) 85%,
    rgba(25, 92, 175, 0) 100%
  );
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name-bg[data-color="blue"] {
    background: linear-gradient(
      90deg,
      rgba(25, 92, 175, 0.7) 0,
      rgba(25, 92, 175, 0.7) 15%,
      rgba(25, 92, 175, 0.5) 60%,
      rgba(25, 92, 175, 0) 100%
    );
  }
}
.chara-main--data-name-bg[data-color="red"] {
  background: linear-gradient(
    90deg,
    rgba(141, 33, 21, 0) 0,
    rgba(141, 33, 21, 0.7) 15%,
    rgba(141, 33, 21, 0.7) 85%,
    rgba(141, 33, 21, 0) 100%
  );
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name-bg[data-color="red"] {
    background: linear-gradient(
      90deg,
      rgba(141, 33, 21, 0.7) 0,
      rgba(141, 33, 21, 0.7) 15%,
      rgba(141, 33, 21, 0.5) 60%,
      rgba(141, 33, 21, 0) 100%
    );
  }
}
.chara-main--data-name-bg[data-color="green"] {
  background: linear-gradient(
    90deg,
    rgba(25, 175, 117, 0) 0,
    rgba(25, 175, 117, 0.7) 15%,
    rgba(25, 175, 117, 0.7) 85%,
    rgba(25, 175, 117, 0) 100%
  );
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name-bg[data-color="green"] {
    background: linear-gradient(
      90deg,
      rgba(25, 175, 117, 0.7) 0,
      rgba(25, 175, 117, 0.7) 15%,
      rgba(25, 175, 117, 0.5) 60%,
      rgba(25, 175, 117, 0) 100%
    );
  }
}
.chara-main--data-name span {
  position: relative;
  z-index: 2;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 9.0666666667vw;
  letter-spacing: 0;
  line-height: 1.25;
  text-shadow: 0 0.8vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name span {
    font-size: 3.6603221083vw;
    text-shadow: 0 0.5856515373vw 0 #000;
    word-break: keep-all;
  }
  .chara-main--data-name span br {
    display: none;
  }
}
.chara-main--type {
  height: 5.3333333333vw;
  margin-top: 4vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-main--type {
    height: 2.196193265vw;
    margin-top: 1.4641288433vw;
  }
}
.chara-main--type-list {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--type-list {
    left: 3.2942898975vw;
  }
}
.chara-main--type-list__item {
  border-radius: 2.6666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 5.3333333333vw;
  padding: 0 2vw 0 6.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-main--type-list__item {
    border-radius: 1.0980966325vw;
    height: 2.196193265vw;
    padding: 0 0.7320644217vw 0 2.5622254758vw;
  }
}
.chara-main--type-list__item:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  width: 5.3333333333vw;
  height: 6.9333333333vw;
  position: absolute;
  top: 50%;
  left: -0.2666666667vw;
  transform: translateY(-50%);
}
@media only screen and (min-width: 767px) {
  .chara-main--type-list__item:before {
    width: 2.196193265vw;
    height: 2.5622254758vw;
    left: -0.1464128843vw;
  }
}
.chara-main--type-list__item:not(:first-child) {
  margin-left: 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--type-list__item:not(:first-child) {
    margin-left: 1.0980966325vw;
  }
}
.chara-main--type-list__item[data-color="blue"] {
  background-color: #195caf;
}
.chara-main--type-list__item[data-color="red-gb"],
.chara-main--type-list__item[data-color="red"] {
  background-color: #932c21;
}
.chara-main--type-list__item[data-color="green-rb"],
.chara-main--type-list__item[data-color="green"] {
  background-color: #19af75;
}
.chara-main--type-list__item[data-color="blue"][data-type="at"]:before {
  background-image: url(../data/webp/character/icon/b_at.png.webp);
}
.chara-main--type-list__item[data-color="blue"][data-type="gt"]:before {
  background-image: url(../data/webp/character/icon/b_gt.png.webp);
}
.chara-main--type-list__item[data-color="blue"][data-type="df"]:before {
  background-image: url(../data/webp/character/icon/b_df.png.webp);
}
.chara-main--type-list__item[data-color="blue"][data-type="at-mix"]:before {
  background-image: url(../data/webp/character/icon/b_atgt.png.webp);
}
.chara-main--type-list__item[data-color="red"][data-type="at"]:before {
  background-image: url(../data/webp/character/icon/r_at.png.webp);
}
.chara-main--type-list__item[data-color="red"][data-type="gt"]:before {
  background-image: url(../data/webp/character/icon/r_gt.png.webp);
}
.chara-main--type-list__item[data-color="red"][data-type="df"]:before {
  background-image: url(../data/webp/character/icon/r_df.png.webp);
}
.chara-main--type-list__item[data-color="red"][data-type="df-mix"]:before {
  background-image: url(../data/webp/character/icon/r_dfgt.png.webp);
}
.chara-main--type-list__item[data-color="green"][data-type="at"]:before {
  background-image: url(../data/webp/character/icon/g_at.png.webp);
}
.chara-main--type-list__item[data-color="green"][data-type="gt"]:before {
  background-image: url(../data/webp/character/icon/g_gt.png.webp);
}
.chara-main--type-list__item[data-color="green"][data-type="df"]:before {
  background-image: url(../data/webp/character/icon/g_df.png.webp);
}
.chara-main--type-list__item[data-color="green"][data-type="at-c"]:before {
  background-image: url(../data/webp/character/icon/g_at-c.png.webp);
}
.chara-main--type-list__item[data-color="red-gb"]:before {
  background-image: url(../data/webp/character/icon/r_at-c.png.webp);
}
.chara-main--type-list__item[data-color="green-rb"]:before {
  background-image: url(../data/webp/character/icon/g_at-c.png.webp);
}
.chara-main--type-list__item span {
  display: flex;
  position: relative;
}
.chara-main--type-list__item span:before {
  display: block;
  content: "";
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.2vw;
  display: flex;
}
@media only screen and (min-width: 767px) {
  .chara-main--type-list__item span:before {
    font-size: 1.317715959vw;
  }
}
.chara-main--skill {
  min-height: 38vw;
  padding: 0 5.3333333333vw;
  margin: 6vw 0 0;
}
.chara-main--skill:has(.chara-main--skill-data__attention) {
  min-height: calc(38vw + 5em);
}
@media only screen and (min-width: 767px) {
  .chara-main--skill {
    min-height: 15.5197657394vw;
    padding: 0;
    margin: 1.4641288433vw 0 0 2.9282576867vw;
  }
  .chara-main--skill:has(.chara-main--skill-data__attention) {
    min-height: calc(15.5197657394vw + 5em);
  }
}
.chara-main--skill-name {
  border-left: 1.3333333333vw solid #ff8a00;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-size: 6.5333333333vw;
  background-repeat: repeat;
  background-image: url(../data/webp/character/ui/bg_hatching.png.webp);
  width: 100%;
  height: 6.6666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-name {
    background-size: 3.5871156662vw;
    border-left: 0.5124450952vw solid #ff8a00;
    width: 37.3352855051vw;
    height: 2.7086383602vw;
  }
}
.chara-main--skill-name span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 3.7333333333vw;
  padding-left: 4vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-name span {
    font-size: 1.5373352855vw;
    padding-left: 1.6105417277vw;
  }
}
.chara-main--skill-data {
  margin: 3.3333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data {
    margin: 1.317715959vw 0 0;
  }
}
.chara-main--skill-data__list {
  width: 100%;
  position: absolute;
  top: 0;
}
.chara-main--skill-data__list.list-2 {
  z-index: 2;
}
.chara-main--skill-data__list.list-3 {
  z-index: 3;
}
.chara-main--skill-data__list-item {
  display: flex;
  position: relative;
}
.chara-main--skill-data__list-item:nth-child(n + 2) {
  margin: 1.7333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__list-item {
    width: 37.3352855051vw;
  }
  .chara-main--skill-data__list-item:nth-child(n + 2) {
    margin: 0.5124450952vw 0 0;
  }
}
.chara-main--skill-data__list-item:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  width: 3.6vw;
  height: 12.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__list-item:before {
    width: 1.6105417277vw;
    height: 5.3440702782vw;
  }
}
.chara-main--skill-data__list-item.skill-1:before {
  background-image: url(../data/webp/character/icon/skill_01.png.webp);
}
.chara-main--skill-data__list-item.skill-2:before {
  background-image: url(../data/webp/character/icon/skill_02.png.webp);
}
.chara-main--skill-data__list-item:after {
  display: block;
  content: "";
  background-color: #ff8a00;
  width: calc(100% - 3.6vw);
  height: 12.1333333333vw;
  position: absolute;
  right: -0.5333333333vw;
  bottom: -0.5333333333vw;
  z-index: 1;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__list-item:after {
    width: calc(100% - 1.6105417277vw);
    height: 5.3440702782vw;
    right: -0.1464128843vw;
    bottom: -0.1464128843vw;
  }
}
.chara-main--skill-data__bg {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-position: right bottom;
  background-image: url(../data/webp/character/ui/bg_deco_dots.png.webp);
  background-color: #1c1c1c;
  width: calc(100% - 3.6vw);
  height: 12.1333333333vw;
  padding: 0 2vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__bg {
    width: calc(100% - 1.6105417277vw);
    height: 5.3440702782vw;
    padding: 0.878477306vw;
  }
}
.chara-main--skill-data__bg img {
  width: 9.6vw;
  height: 9.6vw;
  margin-right: 2vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__bg img {
    width: 3.6603221083vw;
    height: 3.6603221083vw;
    margin-right: 0.878477306vw;
  }
}
.chara-main--skill-data__bg span {
  flex-basis: calc(100% - 11.6vw);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 4.2666666667vw;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__bg span {
    flex-basis: calc(100% - 4.5387994143vw);
    font-size: 1.6837481698vw;
  }
}
.chara-main--skill-data__attention {
  background: rgba(0, 0, 0, 0.8);
  margin: 2vw 0 0;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__attention {
    background: 0 0;
    margin: 0.878477306vw 0 0 1.6105417277vw;
  }
}
.chara-main--skill-data__attention span {
  font-size: 2.1333333333vw;
  line-height: 1.35;
  display: inline-block;
  margin-left: 3.6vw;
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data__attention span {
    font-size: 0.878477306vw;
    margin-left: 0;
  }
}
.chara-main[data-style="0"] .chara-main--bg .bg-2,
.chara-main[data-style="0"] .chara-main--bg .bg-3 {
  opacity: 0;
}
.chara-main[data-style="0"] .chara-main--mode-name {
  opacity: 0;
}
.chara-main[data-style="0"] .chara-main--type .list-2,
.chara-main[data-style="0"] .chara-main--type .list-3 {
  opacity: 0;
}
.chara-main[data-style="0"] .chara-main--skill .list-2,
.chara-main[data-style="0"] .chara-main--skill .list-3 {
  opacity: 0;
}
.chara-main[data-style="0"] .chara-main--data-name .list-2,
.chara-main[data-style="0"] .chara-main--data-name .list-3 {
  opacity: 0;
}
.chara-main[data-style="0"] .chara-main--mode .mode-2,
.chara-main[data-style="0"] .chara-main--mode .mode-3 {
  opacity: 0;
}
.chara-main[data-style="1"] .chara-main--bg .bg-2,
.chara-main[data-style="1"] .chara-main--bg .bg-3 {
  opacity: 0;
}
.chara-main[data-style="1"] .chara-main--type .list-2,
.chara-main[data-style="1"] .chara-main--type .list-3 {
  opacity: 0;
}
.chara-main[data-style="1"] .chara-main--skill .list-2,
.chara-main[data-style="1"] .chara-main--skill .list-3 {
  opacity: 0;
}
.chara-main[data-style="1"] .chara-main--data-name .list-2,
.chara-main[data-style="1"] .chara-main--data-name .list-3 {
  opacity: 0;
}
.chara-main[data-style="1"] .chara-main--mode .mode-2,
.chara-main[data-style="1"] .chara-main--mode .mode-3 {
  opacity: 0;
}
.chara-main[data-style="2"] .chara-main--bg .bg-3 {
  opacity: 0;
}
.chara-main[data-style="2"] .chara-main--type .list-1,
.chara-main[data-style="2"] .chara-main--type .list-3 {
  opacity: 0;
}
.chara-main[data-style="2"] .chara-main--skill .list-3 {
  opacity: 0;
}
.chara-main[data-style="2"] .chara-main--data-name .list-1,
.chara-main[data-style="2"] .chara-main--data-name .list-3 {
  opacity: 0;
}
.chara-main[data-style="2"] .chara-main--mode .mode-1,
.chara-main[data-style="2"] .chara-main--mode .mode-3 {
  opacity: 0;
}
.chara-main[data-style="3"] .chara-main--type .list-1,
.chara-main[data-style="3"] .chara-main--type .list-2 {
  opacity: 0;
}
.chara-main[data-style="3"] .chara-main--data-name .list-1,
.chara-main[data-style="3"] .chara-main--data-name .list-2 {
  opacity: 0;
}
.chara-main[data-style="3"] .chara-main--mode .mode-1,
.chara-main[data-style="3"] .chara-main--mode .mode-2 {
  opacity: 0;
}
.chara-main.ja .chara-main--type-list__item[data-type="at-mix"] span:before,
.chara-main.ja .chara-main--type-list__item[data-type="at"] span:before {
  content: "アタッカー";
}
.chara-main.ja .chara-main--type-list__item[data-type="gt"] span:before {
  content: "ゲッター";
}
.chara-main.ja .chara-main--type-list__item[data-type="df-mix"] span:before,
.chara-main.ja .chara-main--type-list__item[data-type="df"] span:before {
  content: "ディフェンダー";
}
.chara-main.en .chara-main--type-list__item[data-type="at-mix"] span:before,
.chara-main.en .chara-main--type-list__item[data-type="at"] span:before {
  content: "Attacker";
}
.chara-main.en .chara-main--type-list__item[data-type="gt"] span:before {
  content: "Runner";
}
.chara-main.en .chara-main--type-list__item[data-type="df-mix"] span:before,
.chara-main.en .chara-main--type-list__item[data-type="df"] span:before {
  content: "Defender";
}
.chara-subnavi {
  padding: 0 5.3333333333vw 12.8vw;
  margin: -5.3333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi {
    padding: 0 2.9282576867vw;
    margin: 0;
    position: relative;
  }
}
.chara-subnavi:before {
  display: block;
  content: "";
  background-image: url(../data/webp/character/ui/bg_border.jpg.webp);
  background-size: 0.5333333333vw;
  border-bottom: #0fabd0 0.5333333333vw solid;
  background-position: 0 0;
  width: calc(100% + 5.3333333333vw);
  height: calc(100% - 5.3333333333vw);
  position: absolute;
  top: 5.3333333333vw;
  left: -5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi:before {
    background-size: 0.2196193265vw;
    border-bottom: #0fabd0 0.2928257687vw solid;
    width: calc(100% + 7.6866764275vw);
    height: calc(100% - 3.074670571vw);
    top: 3.2942898975vw;
    left: -7.6866764275vw;
  }
}
.chara-subnavi--container {
  overflow: visible;
}
.chara-subnavi--slide {
  height: 34.9333333333vw !important;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--slide {
    height: 13.3235724744vw !important;
    transition: 0.3s;
  }
  .chara-subnavi--slide:hover a {
    margin-top: -0.7320644217vw;
  }
}
.chara-subnavi--slide a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  transition: 0.3s;
}
.chara-subnavi--slide a:before {
  display: block;
  content: "";
  background: #ff8a00;
  width: calc(100% - 0.4vw);
  height: 34.5333333333vw;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--slide a:before {
    width: calc(100% - 0.1464128843vw);
    height: 13.17715959vw;
  }
}
.chara-subnavi--slide img {
  width: calc(100% - 0.4vw);
  height: 34.5333333333vw;
  display: block;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--slide img {
    width: calc(100% - 0.1464128843vw);
    height: 13.17715959vw;
  }
}
.chara-subnavi .swiper-slide-current a:after {
  display: block;
  content: "";
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chara-subnavi--scrollbar {
  border-radius: 0;
  background: #000;
  width: calc(100% - 0.5333333333vw);
  height: 4vw;
  padding: 0.9333333333vw 1.0666666667vw;
  margin: 3.6vw auto 0;
  transform: skewX(-40deg);
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--scrollbar {
    width: calc(100% - 0.2928257687vw);
    height: 1.1713030747vw;
    padding: 0.2928257687vw 0.3660322108vw;
    margin: 1.4641288433vw auto 0;
  }
}
.chara-subnavi--scrollbar:after {
  display: block;
  content: "";
  background: #000;
  width: 1.0666666667vw;
  height: 5.8666666667vw;
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--scrollbar:after {
    width: 0.2928257687vw;
    height: 1.756954612vw;
  }
}
.chara-subnavi--scrollbar .swiper-scrollbar-drag {
  border-right: #000 solid 1.0666666667vw;
  border-radius: 0;
  background: #0fabd0;
  height: 2.1333333333vw;
  transform: skewX(-40deg);
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--scrollbar .swiper-scrollbar-drag {
    height: 0.5856515373vw;
  }
}
.chara-subnavi--btn {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/character/ui/btn_index.png.webp);
  width: 54.9333333333vw;
  height: 13.0666666667vw;
  padding-bottom: 0.9333333333vw;
  display: block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  left: 50%;
  bottom: -6.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--btn {
    background-image: url(../data/webp/character/ui/btn_index_pc.png.webp);
    width: 14.7877013177vw;
    height: 3.4407027818vw;
    bottom: -1.8301610542vw;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
  }
  .chara-subnavi--btn .bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
  }
  .chara-subnavi--btn .bg-img.on {
    opacity: 0;
  }
  .chara-subnavi--btn:hover .bg-img.on {
    opacity: 1;
  }
  .chara-subnavi--btn:hover .bg-img.off {
    opacity: 0;
  }
  .chara-subnavi--btn:hover:before {
    right: 0.9516837482vw;
  }
}
.chara-subnavi--btn:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_arw_w.png.webp);
  width: 2.5333333333vw;
  height: 3.3333333333vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% - 0.6666666667vw);
  right: 3.6vw;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--btn:before {
    width: 0.7320644217vw;
    height: 0.9516837482vw;
    top: calc(50% - 0.1464128843vw);
    right: 1.2445095168vw;
    transition: 0.3s;
  }
}
.chara-subnavi--btn span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  padding: 0 2.6666666667vw 1.3333333333vw 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .chara-subnavi--btn span {
    font-size: 1.0980966325vw;
    padding: 0 0.878477306vw 0.439238653vw 0;
  }
}
.stage-index {
  padding: 7.3333333333vw 5.3333333333vw 10vw;
}
@media only screen and (max-width: 767px) {
  .stage-index {
    border-top: #000 0.2666666667vw solid;
    border-bottom: #0fabd0 1.3333333333vw solid;
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 1.0666666667vw;
    background-image: url(../data/webp/common/bg_list_filter.png.webp);
  }
}
@media only screen and (min-width: 767px) {
  .stage-index {
    width: 80.8199121523vw;
    padding: 0;
    margin: 0 auto;
    position: relative;
  }
  .stage-index:before {
    display: block;
    content: "";
    background-image: url(../data/webp/common/bg_list_filter.png.webp);
    border-bottom: #0fabd0 0.3660322108vw solid;
    background-position: 0 1.4641288433vw;
    background-size: 0.2928257687vw;
    width: 100%;
    height: calc(100% - 1.4641288433vw);
    position: absolute;
    top: 1.4641288433vw;
    left: 0;
  }
}
@media only screen and (min-width: 767px) {
  .stage-index--list {
    padding: 0 2.0497803807vw 2.196193265vw;
    display: flex;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .stage-index--list-item:not(:first-child) {
    margin-top: 3.7333333333vw;
  }
}
@media only screen and (min-width: 767px) {
  .stage-index--list-item {
    margin: 0 0 1.4641288433vw;
  }
  .stage-index--list-item:not(:nth-child(3n)) {
    margin: 0 1.4641288433vw 1.4641288433vw 0;
  }
}
.stage-index--list-item a {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  width: 89.3333333333vw;
  height: 33.3333333333vw;
  padding: 21.3333333333vw 4vw 1.3333333333vw 2.6666666667vw;
  display: block;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .stage-index--list-item a {
    width: 24.5241581259vw;
    height: 9.1508052709vw;
    padding: 5.8565153734vw 1.0980966325vw 0.3660322108vw 0.7320644217vw;
    transition: 0.3s;
  }
  .stage-index--list-item a:hover .stage-index--list-item__name {
    color: #ff8a00;
  }
}
.stage-index--list-item__name {
  height: 10.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  letter-spacing: 0;
  font-size: 4.6666666667vw;
  line-height: 1.1;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-index--list-item__name {
    height: 3.074670571vw;
    font-size: 1.317715959vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 #000,
      0.0732064422vw 0.1464128843vw 0 #000, 0 -0.0732064422vw 0 #000;
    transition: 0.3s;
  }
}
.stage-index .item-0001 a {
  background-image: url(../data/webp/stage/0001_thumb.png.webp);
}
.stage-index .item-0002 a {
  background-image: url(../data/webp/stage/0002_thumb.png.webp);
}
.stage-index .item-0003 a {
  background-image: url(../data/webp/stage/0003_thumb.png.webp);
}
.stage-index .item-0004 a {
  background-image: url(../data/webp/stage/0004_thumb.png.webp);
}
.stage-index .item-0005 a {
  background-image: url(../data/webp/stage/0005_thumb.png.webp);
}
.stage-index .item-0006 a {
  background-image: url(../data/webp/stage/0006_thumb.png.webp);
}
.stage-index .item-0007 a {
  background-image: url(../data/webp/stage/0007_thumb.png.webp);
}
.stage-index .item-0008 a {
  background-image: url(../data/webp/stage/0008_thumb.png.webp);
}
.stage-index .item-0009 a {
  background-image: url(../data/webp/stage/0009_thumb.png.webp);
}
.stage-index .item-0010 a {
  background-image: url(../data/webp/stage/0010_thumb.png.webp);
}
.stage-index .item-0011 a {
  background-image: url(../data/webp/stage/0011_thumb.png.webp);
}
.stage-index .item-0012 a {
  background-image: url(../data/webp/stage/0012_thumb.png.webp);
}
.stage-index .item-0013 a {
  background-image: url(../data/webp/stage/0013_thumb.png.webp);
}
.stage-index .item-0014 a {
  background-image: url(../data/webp/stage/0014_thumb.png.webp);
}
.stage-index .item-0015 a {
  background-image: url(../data/webp/stage/0015_thumb.png.webp);
}
.stage-index .item-0016 a {
  background-image: url(../data/webp/stage/0016_thumb.png.webp);
}
.stage-index .item-0017 a {
  background-image: url(../data/webp/stage/0017_thumb.png.webp);
}
.stage-index .item-0018 a {
  background-image: url(../data/webp/stage/0018_thumb.png.webp);
}
.stage-index .item-0019 a {
  background-image: url(../data/webp/stage/0019_thumb.png.webp);
}
.stage-index .item-0020 a {
  background-image: url(../data/webp/stage/0020_thumb.png.webp);
}
.stage-index .item-0021 a {
  background-image: url(../data/webp/stage/0021_thumb.png.webp);
}
.stage-index .item-0022 a {
  background-image: url(../data/webp/stage/0022_thumb.png.webp);
}
.stage-index .item-0023 a {
  background-image: url(../data/webp/stage/0023_thumb.png.webp);
}
.stage-index .item-0024 a {
  background-image: url(../data/webp/stage/0024_thumb.png.webp);
}
.stage-index .item-0025 a {
  background-image: url(../data/webp/stage/0025_thumb.png.webp);
}
.stage-index .item-0026 a {
  background-image: url(../data/webp/stage/0026_thumb.png.webp);
}
.stage-index .item-0027 a {
  background-image: url(../data/webp/stage/0027_thumb.png.webp);
}
.stage-index .item-0028 a {
  background-image: url(../data/webp/stage/0028_thumb.png.webp);
}
.stage-index .item-0029 a {
  background-image: url(../data/webp/stage/0029_thumb.png.webp);
}
.stage-index .item-0030 a {
  background-image: url(../data/webp/stage/0030_thumb.png.webp);
}
.stage-index .item-0031 a {
  background-image: url(../data/webp/stage/0031_thumb.png.webp);
}
.stage-index .item-0032 a {
  background-image: url(../data/webp/stage/0032_thumb.png.webp);
}
.stage-index .item-0033 a {
  background-image: url(../data/webp/stage/0033_thumb.png.webp);
}
.stage-index .item-0034 a {
  background-image: url(../data/webp/stage/0034_thumb.png.webp);
}
.stage-index .item-0035 a {
  background-image: url(../data/webp/stage/0035_thumb.png.webp);
}
.stage-index .item-0036 a {
  background-image: url(../data/webp/stage/0036_thumb.png.webp);
}
.stage-index .item-0037 a {
  background-image: url(../data/webp/stage/0037_thumb.png.webp);
}
.stage-index .item-0038 a {
  background-image: url(../data/webp/stage/0038_thumb.png.webp);
}
.stage-index .item-0039 a {
  background-image: url(../data/webp/stage/0039_thumb.png.webp);
}
.stage-index .item-0040 a {
  background-image: url(../data/webp/stage/0040_thumb.png.webp);
}
.stage-index .item-0041 a {
  background-image: url(../data/webp/stage/0041_thumb.png.webp);
}
.stage-index .item-0042 a {
  background-image: url(../data/webp/stage/0042_thumb.png.webp);
}
.stage-index .item-0043 a {
  background-image: url(../data/webp/stage/0043_thumb.png.webp);
}
.stage-index .item-0044 a {
  background-image: url(../data/webp/stage/0044_thumb.png.webp);
}
.stage-index .item-0045 a {
  background-image: url(../data/webp/stage/0045_thumb.png.webp);
}
.stage-index .item-0046 a {
  background-image: url(../data/webp/stage/0046_thumb.png.webp);
}
.stage-index .item-0047 a {
  background-image: url(../data/webp/stage/0047_thumb.png.webp);
}
.stage-index .item-0048 a {
  background-image: url(../data/webp/stage/0048_thumb.png.webp);
}
.stage-index .item-0049 a {
  background-image: url(../data/webp/stage/0049_thumb.png.webp);
}
.stage-index .item-0050 a {
  background-image: url(../data/webp/stage/0050_thumb.png.webp);
}
.stage-index .item-0051 a {
  background-image: url(../data/webp/stage/0051_thumb.png.webp);
}
.stage-index .item-0052 a {
  background-image: url(../data/webp/stage/0052_thumb.png.webp);
}
.stage-index .item-0053 a {
  background-image: url(../data/webp/stage/0053_thumb.png.webp);
}
.stage-index .item-0054 a {
  background-image: url(../data/webp/stage/0054_thumb.png.webp);
}
.stage-index .item-0055 a {
  background-image: url(../data/webp/stage/0055_thumb.png.webp);
}
.stage-index .item-0056 a {
  background-image: url(../data/webp/stage/0056_thumb.png.webp);
}
.stage-index .item-0057 a {
  background-image: url(../data/webp/stage/0057_thumb.png.webp);
}
.stage-index .item-0058 a {
  background-image: url(../data/webp/stage/0058_thumb.png.webp);
}
.stage-index .item-0059 a {
  background-image: url(../data/webp/stage/0059_thumb.png.webp);
}
.stage-index .item-0060 a {
  background-image: url(../data/webp/stage/0060_thumb.png.webp);
}
.stage-index .item-0061 a {
  background-image: url(../data/webp/stage/0061_thumb.png.webp);
}
.stage-index .item-0062 a {
  background-image: url(../data/webp/stage/0062_thumb.png.webp);
}
.stage-index .item-0063 a {
  background-image: url(../data/webp/stage/0063_thumb.png.webp);
}
.stage-index .item-0064 a {
  background-image: url(../data/webp/stage/0064_thumb.png.webp);
}
.stage-index .item-0065 a {
  background-image: url(../data/webp/stage/0065_thumb.png.webp);
}
.stage-index .item-0066 a {
  background-image: url(../data/webp/stage/0066_thumb.png.webp);
}
.stage-index .item-0067 a {
  background-image: url(../data/webp/stage/0067_thumb.png.webp);
}
.stage-index .item-0068 a {
  background-image: url(../data/webp/stage/0068_thumb.png.webp);
}
.stage-index .item-0069 a {
  background-image: url(../data/webp/stage/0069_thumb.png.webp);
}
.stage-index .item-0070 a {
  background-image: url(../data/webp/stage/0070_thumb.png.webp);
}
.stage-index .item-0071 a {
  background-image: url(../data/webp/stage/0071_thumb.png.webp);
}
.stage-index .item-0072 a {
  background-image: url(../data/webp/stage/0072_thumb.png.webp);
}
.stage-index .item-0073 a {
  background-image: url(../data/webp/stage/0073_thumb.png.webp);
}
.stage-index .item-0074 a {
  background-image: url(../data/webp/stage/0074_thumb.png.webp);
}
.stage-index .item-0075 a {
  background-image: url(../data/webp/stage/0075_thumb.png.webp);
}
.stage-index .item-0076 a {
  background-image: url(../data/webp/stage/0076_thumb.png.webp);
}
.stage-index .item-0077 a {
  background-image: url(../data/webp/stage/0077_thumb.png.webp);
}
.stage-index .item-0078 a {
  background-image: url(../data/webp/stage/0078_thumb.png.webp);
}
.stage-index .item-0079 a {
  background-image: url(../data/webp/stage/0079_thumb.png.webp);
}
.stage-index .item-0080 a {
  background-image: url(../data/webp/stage/0080_thumb.png.webp);
}
.stage-index .item-0081 a {
  background-image: url(../data/webp/stage/0081_thumb.png.webp);
}
.stage-index .item-0082 a {
  background-image: url(../data/webp/stage/0082_thumb.png.webp);
}
.stage-index .item-0083 a {
  background-image: url(../data/webp/stage/0083_thumb.png.webp);
}
.stage-index .item-0084 a {
  background-image: url(../data/webp/stage/0084_thumb.png.webp);
}
.stage-index .item-0085 a {
  background-image: url(../data/webp/stage/0085_thumb.png.webp);
}
.stage-index .item-0086 a {
  background-image: url(../data/webp/stage/0086_thumb.png.webp);
}
.stage-index .item-0087 a {
  background-image: url(../data/webp/stage/0087_thumb.png.webp);
}
.stage-index .item-0088 a {
  background-image: url(../data/webp/stage/0088_thumb.png.webp);
}
.stage-index .item-0089 a {
  background-image: url(../data/webp/stage/0089_thumb.png.webp);
}
.stage-index .item-0090 a {
  background-image: url(../data/webp/stage/0090_thumb.png.webp);
}
.stage-index .item-0091 a {
  background-image: url(../data/webp/stage/0091_thumb.png.webp);
}
.stage-index .item-0092 a {
  background-image: url(../data/webp/stage/0092_thumb.png.webp);
}
.stage-index .item-0093 a {
  background-image: url(../data/webp/stage/0093_thumb.png.webp);
}
.stage-index .item-0094 a {
  background-image: url(../data/webp/stage/0094_thumb.png.webp);
}
.stage-index .item-0095 a {
  background-image: url(../data/webp/stage/0095_thumb.png.webp);
}
.stage-index .item-0096 a {
  background-image: url(../data/webp/stage/0096_thumb.png.webp);
}
.stage-index .item-0097 a {
  background-image: url(../data/webp/stage/0097_thumb.png.webp);
}
.stage-index .item-0098 a {
  background-image: url(../data/webp/stage/0098_thumb.png.webp);
}
.stage-index .item-0099 a {
  background-image: url(../data/webp/stage/0099_thumb.png.webp);
}
.stage-index .item-0100 a {
  background-image: url(../data/webp/stage/0100_thumb.png.webp);
}
.stage-main {
  width: 100%;
  display: block;
  position: relative;
  margin: -4vw 0 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .stage-main {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .stage-main--bg {
    background-image: url(../data/webp/stage/ui/bg_border.png.webp);
    background-size: 8.5333333333vw;
    border-bottom: #0fabd0 0.8vw solid;
    background-position: 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .stage-main--contents {
    width: 100%;
    height: 56.2225475842vw;
    position: relative;
  }
}
.stage-main--title {
  border-left: 1.3333333333vw solid #ff8a00;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-size: 4vw;
  background-repeat: repeat;
  background-image: url(../data/webp/stage/ui/bg_hatching.png.webp);
  width: 89.3333333333vw;
  padding: 4.2666666667vw 3.3333333333vw 4.6666666667vw 6vw;
  margin: 0 auto 5.0666666667vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 767px) {
  .stage-main--title {
    background-image: url(../data/webp/stage/ui/bg_hatching_pc.png.webp);
    background-size: 100%;
    background-repeat: repeat-y;
    border-left: 0.6588579795vw solid #ff8a00;
    width: 94.1434846266vw;
    padding: 0.9516837482vw 1.8301610542vw 1.317715959vw 2.5622254758vw;
    margin: 0;
    position: absolute;
    top: 3.8067349927vw;
    left: 2.9282576867vw;
    z-index: 2;
  }
}
.stage-main--title span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 6.9333333333vw;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .stage-main--title span {
    font-size: 2.9282576867vw;
    text-shadow: 0 0.2928257687vw 0 #000;
  }
}
.stage-main--slider {
  width: 100%;
  height: 56.5333333333vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .stage-main--slider {
    height: 56.2225475842vw;
  }
  .stage-main--slider:before {
    display: block;
    content: "";
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 5%,
      rgba(0, 0, 0, 0) 25%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
  }
}
.stage-main--slider .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
.stage-main--thumbs {
  position: relative;
  width: 100%;
  padding: 0 4vw;
  margin: 2vw auto 0;
  overflow: hidden;
  z-index: 5;
}
@media only screen and (min-width: 767px) {
  .stage-main--thumbs {
    padding: 0;
    margin: -9.1508052709vw 0 0 2.9282576867vw;
  }
}
.stage-main--thumbs .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
@media only screen and (max-width: 767px) {
  .stage-main--thumbs .swiper-wrapper {
    justify-content: center;
    flex-wrap: wrap;
  }
}
.stage-main--thumbs-item {
  flex-shrink: 0;
  width: 20.9333333333vw;
  height: 11.8666666667vw;
  transition-property: transform;
  position: relative;
  z-index: 2;
  outline: 0;
  cursor: pointer;
  pointer-events: auto;
  margin: 2vw 0.8vw 0;
  transition: 0.3s;
}
.stage-main--thumbs-item:after {
  display: block;
  content: "";
  border: #ff8a00 solid 0.4vw;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s;
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .stage-main--thumbs-item {
    width: 11.0541727672vw;
    height: 6.2225475842vw;
    margin: 0 0.7320644217vw 0 0;
  }
  .stage-main--thumbs-item:after {
    border: #ff8a00 solid 0.1464128843vw;
  }
  .stage-main--thumbs-item:hover {
    opacity: 0.8;
  }
}
.stage-main--thumbs-item.swiper-slide-thumb-active:after {
  opacity: 1;
}
.stage-main--minimap {
  width: 89.3333333333vw;
  margin: 8.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .stage-main--minimap {
    width: auto;
    display: flex;
    margin: 0;
    position: absolute;
    right: 2.9282576867vw;
    bottom: 2.9282576867vw;
    z-index: 2;
  }
}
.stage-main--minimap-img {
  margin: 4vw auto 0;
}
@media only screen and (min-width: 767px) {
  .stage-main--minimap-img {
    width: 16.7642752562vw;
    margin: 0 0 0 0.7320644217vw;
  }
}
.stage-main .swiper-button-next,
.stage-main .swiper-button-prev {
  width: 9.0666666667vw;
  height: 7.8666666667vw;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-main .swiper-button-next,
  .stage-main .swiper-button-prev {
    width: 5.4904831625vw;
    height: 4.7584187408vw;
  }
}
.stage-main .swiper-button-prev {
  background-image: url(../data/webp/stage/ui/slide_prev.png.webp);
  left: 5.3333333333vw;
  right: auto;
}
@media only screen and (min-width: 767px) {
  .stage-main .swiper-button-prev {
    left: 2.9282576867vw;
  }
}
.stage-main .swiper-button-next {
  background-image: url(../data/webp/stage/ui/slide_next.png.webp);
  right: 5.3333333333vw;
  left: auto;
}
@media only screen and (min-width: 767px) {
  .stage-main .swiper-button-next {
    right: 2.9282576867vw;
  }
}
@media only screen and (min-width: 767px) {
  .js--animeend .stage-main .swiper-button-next,
  .js--animeend .stage-main .swiper-button-prev {
    transition: 0.3s;
    transition-delay: 0s;
  }
  .js--animeend .stage-main .swiper-button-next:hover,
  .js--animeend .stage-main .swiper-button-prev:hover {
    opacity: 0.7;
  }
}
.js--animeend .stage-main .swiper-button-next.swiper-button-disabled,
.js--animeend .stage-main .swiper-button-prev.swiper-button-disabled {
  opacity: 0.4;
}
.stage-ui {
  padding: 8vw 0 14vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (min-width: 767px) {
  .stage-ui {
    background-image: url(../data/webp/stage/ui/bg_border.png.webp);
    background-size: 2.3426061493vw;
    border-bottom: #0fabd0 0.2928257687vw solid;
    background-position: 0 0;
    padding: 2.5622254758vw 0 3.2942898975vw;
  }
}
.stage-ui--next,
.stage-ui--prev {
  width: 50%;
  height: 12vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next,
  .stage-ui--prev {
    width: 20.5710102489vw;
    height: 5.1244509517vw;
    transition: 0.3s;
  }
}
.stage-ui--next a,
.stage-ui--prev a {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-position: 0 bottom;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 5.3333333333vw 0.8vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next a,
  .stage-ui--prev a {
    padding: 0 2.9282576867vw 0.439238653vw;
  }
}
.stage-ui--next span,
.stage-ui--prev span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next span,
  .stage-ui--prev span {
    font-size: 1.8301610542vw;
  }
}
.stage-ui--prev {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 35%,
    rgba(0, 0, 0, 0) 100%
  );
}
.stage-ui--prev a {
  background-image: url(../data/webp/stage/ui/line_prev.png.webp);
}
@media only screen and (min-width: 767px) {
  .stage-ui--prev a {
    background-image: url(../data/webp/stage/ui/line_prev_pc.png.webp);
  }
}
.stage-ui--prev span {
  padding-left: 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--prev span {
    padding-left: 2.196193265vw;
  }
}
.stage-ui--prev span:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_link.png.webp);
  width: 3.7333333333vw;
  height: 4.5333333333vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(-180deg);
  left: 0;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-ui--prev span:before {
    width: 1.317715959vw;
    height: 1.6105417277vw;
    transition: 0.3s;
  }
}
.stage-ui--prev:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}
.stage-ui--prev:hover span:before {
  left: -0.2196193265vw;
}
.stage-ui--next {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.8) 75%
  );
}
.stage-ui--next a {
  background-image: url(../data/webp/stage/ui/line_next.png.webp);
  justify-content: end;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next a {
    background-image: url(../data/webp/stage/ui/line_next_pc.png.webp);
  }
}
.stage-ui--next span {
  padding-right: 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next span {
    padding-right: 2.196193265vw;
  }
}
.stage-ui--next span:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_link.png.webp);
  width: 3.7333333333vw;
  height: 4.5333333333vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% + 0.2666666667vw);
  right: 0;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-ui--next span:after {
    width: 1.317715959vw;
    height: 1.6105417277vw;
    transition: 0.3s;
  }
}
.stage-ui--next:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.8) 55%
  );
}
.stage-ui--next:hover span:after {
  right: -0.2196193265vw;
}
.stage-ui--btn {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/stage/ui/btn_index.png.webp);
  width: 54.9333333333vw;
  height: 13.0666666667vw;
  padding-bottom: 0.9333333333vw;
  display: block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  left: 50%;
  bottom: -6.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--btn {
    background-image: url(../data/webp/stage/ui/btn_index_pc.png.webp);
    width: 22.9136163982vw;
    height: 5.0512445095vw;
    bottom: 3.2942898975vw;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .stage-ui--btn .bg-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
  }
  .stage-ui--btn .bg-img.on {
    opacity: 0;
  }
  .stage-ui--btn:hover .bg-img.on {
    opacity: 1;
  }
  .stage-ui--btn:hover .bg-img.off {
    opacity: 0;
  }
  .stage-ui--btn:hover:before {
    right: 1.6105417277vw;
  }
}
.stage-ui--btn:before {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/common/icon/icon_arw_w.png.webp);
  width: 2.5333333333vw;
  height: 3.3333333333vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% - 0.6666666667vw);
  right: 3.6vw;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-ui--btn:before {
    width: 1.4641288433vw;
    height: 1.6837481698vw;
    top: calc(50% - 0.1464128843vw);
    right: 1.8301610542vw;
    transition: 0.3s;
  }
}
.stage-ui--btn span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  padding: 0 2.6666666667vw 1.3333333333vw 0;
  text-shadow: -0.4vw 0.9333333333vw 0 #000, 0.4vw 0.9333333333vw 0 #000,
    0 -0.4vw 0 #000;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .stage-ui--btn span {
    font-size: 1.8301610542vw;
    padding: 0 0.878477306vw 0.439238653vw 0;
    text-shadow: 0 0.2928257687vw 0 #000;
  }
}
.howto-main {
  width: 100%;
  padding: 126vw 0 0;
  margin: -28.6666666667vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-main {
    padding: 40.2635431918vw 0 0;
    margin: -15.3733528551vw 0 0;
  }
}
.howto-main--img {
  width: 100%;
  height: 123.3333333333vw;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/howto/main.jpg.webp);
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--img {
    background-image: url(../data/webp/howto/main_pc.png.webp);
    height: 41.3616398243vw;
  }
}
.howto-main--catch {
  width: 100%;
  height: 43.3333333333vw;
  position: absolute;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .howto-main--catch {
    width: 50vw;
    height: 20.1317715959vw;
  }
}
.howto-main--catch.catch-1 {
  top: 10.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--catch.catch-1 {
    top: 18.1551976574vw;
  }
}
.howto-main--catch.catch-2 {
  top: 79.7333333333vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--catch.catch-2 {
    top: 15.6661786237vw;
  }
}
.howto-main--intro {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .howto-main--intro {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-position: 0 bottom;
    background-image: url(../data/webp/howto/bg_main.jpg.webp);
    padding: 61.3333333333vw 0 12vw;
  }
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inner {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    clip-path: polygon(0 0, 100% 12%, 100% 85%, 0 100%);
    background-image: url(../data/webp/howto/bg_main_pc.jpg.webp);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
  }
}
.howto-main--intro:before {
  display: block;
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 7%, 0 100%);
  background-color: #ff8a00;
  width: 100%;
  height: 10.6666666667vw;
  position: absolute;
  top: -2.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro:before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 9%);
    height: 3.074670571vw;
    top: 0;
    z-index: 2;
  }
}
.howto-main--intro:after {
  display: block;
  content: "";
  clip-path: polygon(0 88%, 100% 17%, 100% 100%, 0 100%);
  background-color: #0fabd0;
  width: 100%;
  height: 10.1333333333vw;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro:after {
    clip-path: polygon(0 27%, 100% 0, 100% 5%, 0 100%);
    height: 3.8067349927vw;
  }
}
.howto-main--intro-movie {
  width: 89.6vw;
  height: 67.7333333333vw;
}
@media only screen and (max-width: 767px) {
  .howto-main--intro-movie {
    background: linear-gradient(331deg, #0fabd0 49%, #ff9c00 51%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10.2666666667vw;
    overflow: hidden;
  }
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-movie {
    flex-basis: 45.8272327965vw;
    width: 45.8272327965vw;
    height: 25.4026354319vw;
    position: relative;
  }
}
.howto-main--intro-movie video {
  width: 100%;
  height: auto;
  padding: 0.5333333333vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-movie video {
    padding: 0.0732064422vw;
  }
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inline {
    flex-basis: 54.1727672035vw;
  }
}
.howto-main--intro-inline__read {
  background: linear-gradient(
    90deg,
    rgba(255, 138, 0, 0.1) 5%,
    rgba(255, 138, 0, 0.75) 35%,
    rgba(255, 138, 0, 0.75) 65%,
    rgba(255, 138, 0, 0.1) 95%
  );
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.3333333333vw;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-shadow: 0 0.6666666667vw 0 #000;
  padding: 0.9333333333vw 6vw 1.6vw;
  margin: 0 0 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inline__read {
    background: linear-gradient(
      90deg,
      rgba(255, 138, 0, 0.5) 35%,
      rgba(255, 138, 0, 0) 75%
    );
    font-size: 2.5622254758vw;
    text-align: left;
    text-shadow: 0 0.2196193265vw 0 #000;
    padding: 0.5124450952vw 2.9282576867vw 0.878477306vw;
    margin: 0 0 0.7320644217vw;
  }
}
.howto-main--intro-inline__read.en {
  font-size: 4.2666666667vw;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inline__read.en {
    font-size: 2.196193265vw;
  }
}
.howto-main--intro-inline__text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  line-height: 1.35;
  text-shadow: 0 0.4vw 0 #000;
  padding: 0 4.6666666667vw 0 6vw;
}
@media only screen and (min-width: 767px) {
  .howto-main--intro-inline__text {
    font-size: 1.9033674963vw;
    text-shadow: 0 0.2196193265vw 0 #000;
    line-height: 1.5;
    padding: 0 1.8301610542vw 0 2.9282576867vw;
  }
}
.howto-main--intro-inline__text .orange {
  color: #ff8a00;
}
.howto-main--intro-inline__text .blue {
  color: #0fabd0;
}
.howto-roll {
  margin: 9.6vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-roll {
    margin: 4.0263543192vw 0 0;
  }
}
.howto-roll--tit {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.howto-roll--tit > p {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.2s;
}
.howto-roll--tit > p:before {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 138, 0, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-roll--tit > p:before {
    background: linear-gradient(
      90deg,
      rgba(255, 138, 0, 0.6) 0,
      rgba(255, 138, 0, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-roll--tit > p:after {
  display: block;
  content: "";
  background: linear-gradient(
    -90deg,
    rgba(15, 171, 208, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .howto-roll--tit > p:after {
    background: linear-gradient(
      -90deg,
      rgba(15, 171, 208, 0.6) 0,
      rgba(15, 171, 208, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-roll--tit img {
  position: relative;
  z-index: 2;
}
.howto-slide {
  margin: 8.6666666667vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-slide {
    margin: 0;
  }
}
.howto-slide--ctrl {
  width: 100%;
  height: 33.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .howto-slide--ctrl {
    height: 15.3733528551vw;
    padding: 0 1.0980966325vw;
    margin: 21.9619326501vw 0 0;
    overflow: hidden;
  }
}
.howto-slide--ctrl-bg {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/howto/bg_ctrl.png.webp);
  height: 100%;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .howto-slide--ctrl-bg {
    background-image: url(../data/webp/howto/bg_ctrl_pc.png.webp);
    z-index: 3;
  }
}
.howto-slide--ctrl-item {
  width: 47.3333333333vw !important;
  text-align: center;
  margin: 0 -6.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .howto-slide--ctrl-item {
    width: 34.7730600293vw !important;
    margin: 0 -1.4641288433vw !important;
  }
}
.howto-slide--ctrl-item__icon {
  width: 16.6666666667vw;
  height: 20vw;
  margin: 0 auto -2vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-slide--ctrl-item__icon {
    width: 7.906295754vw !important;
    height: 9.0043923865vw;
    margin: 0 auto -0.7320644217vw;
    transform-origin: 50% 75%;
  }
}
.howto-slide--ctrl-item__icon img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.howto-slide--ctrl-item__icon .on {
  z-index: 1;
}
.howto-slide--ctrl-item__name {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 6.4vw;
  text-shadow: 0 0.9333333333vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .howto-slide--ctrl-item__name {
    font-size: 2.9282576867vw;
    text-shadow: 0 0.1464128843vw 0 #000;
    transform-origin: 50% 0;
  }
}
@media only screen and (max-width: 767px) {
  .howto-slide--ctrl-item.swiper-slide-active .howto-slide--ctrl-item__name {
    text-shadow: 0 1.2vw 0 #000;
  }
}
@media only screen and (max-width: 767px) {
  .howto-slide--ctrl-item:not(.swiper-slide-active)
    .howto-slide--ctrl-item__name {
    letter-spacing: -0.06em;
  }
}
.howto-slide--chara {
  margin: -18vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara {
    margin: -44.6559297218vw 0 0;
  }
}
.howto-slide--chara-item {
  width: 100vw;
  height: 124vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara-item {
    width: 62.5915080527vw;
    height: 62.5915080527vw;
  }
}
.howto-slide--chara-item-parallax {
  position: absolute;
  width: 100%;
  height: 100%;
}
.howto-slide--chara-item img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara-item img {
    transform: translate(-50%, -50%);
  }
}
.howto-slide--chara-item img.on {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%) !important;
}
.howto-slide--chara-item img.off {
  filter: brightness(0);
  transform: translate(-50%, -50%) !important;
}
@media only screen and (max-width: 767px) {
  .howto-slide--chara-item.chara-1 img {
    height: 124%;
    max-height: 124%;
    top: 55%;
    left: 57.5%;
  }
}
@media only screen and (max-width: 767px) {
  .howto-slide--chara-item.chara-2 img {
    height: 108%;
    max-height: 108%;
    top: 46.5%;
    left: 63%;
  }
}
@media only screen and (max-width: 767px) {
  .howto-slide--chara-item.chara-3 img {
    height: 125%;
    max-height: 125%;
    top: 53%;
    left: 56.5%;
  }
}
.howto-slide--chara-item.swiper-slide-active {
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara-item.swiper-slide-active img {
    transform: translate(-50%, -50%);
  }
}
.howto-slide--chara .swiper-button-next,
.howto-slide--chara .swiper-button-prev {
  width: 5.7333333333vw;
  height: 5.4666666667vw;
  top: 11.4666666667vw;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara .swiper-button-next,
  .howto-slide--chara .swiper-button-prev {
    width: 2.5622254758vw;
    height: 2.4158125915vw;
    top: 10.102489019vw;
  }
}
.howto-slide--chara .swiper-button-prev {
  background-image: url(../data/webp/howto/arw_prev.png.webp);
  left: 28vw;
  right: auto;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara .swiper-button-prev {
    left: 31.4787701318vw;
  }
}
.howto-slide--chara .swiper-button-next {
  background-image: url(../data/webp/howto/arw_next.png.webp);
  right: 28vw;
  left: auto;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara .swiper-button-next {
    right: 31.4787701318vw;
  }
}
.howto-slide--content {
  border-bottom: 0.9333333333vw solid #000;
  background: url(../data/webp/howto/bg_slide_content.jpg.webp),
    linear-gradient(
      0deg,
      #181818 85%,
      rgba(24, 24, 24, 0.8) 90%,
      rgba(24, 24, 24, 0) 100%
    );
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: 100% auto;
  margin: -65.3333333333vw 0 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content {
    border-bottom: 0.3660322108vw solid #000;
    background: url(../data/webp/howto/bg_pattern.jpg.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 3.6603221083vw;
    margin: -19.8389458272vw 0 0;
  }
}
.howto-slide--content-item {
  width: 100vw;
  height: auto !important;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-item {
    width: 100%;
    padding: 3.074670571vw 0 2.196193265vw;
  }
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-bg {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0,
      rgba(0, 0, 0, 0.7) 33%,
      rgba(0, 0, 0, 0) 85%
    );
    padding: 2.3426061493vw 0;
    display: flex;
  }
}
.howto-slide--content-thumb {
  background: linear-gradient(331deg, #0fabd0 49%, #ff9c00 51%);
  width: 89.6vw;
  height: 50.4vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-thumb {
    width: 36.1639824305vw;
    height: 20.2781844802vw;
    margin: 0;
    order: 2;
  }
}
.howto-slide--content-thumb video {
  width: 100%;
  height: 100%;
  padding: 0.5333333333vw;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-thumb video {
    padding: 0.1464128843vw;
  }
}
.howto-slide--content-block {
  padding: 0 0 8.2666666667vw;
  margin: 5.3333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-block {
    width: 54.9780380673vw;
    padding: 1.8301610542vw 0 0;
    margin: 0 2.7818448023vw 0 0;
    order: 1;
  }
}
.howto-slide--content-block__icon {
  width: 38.1333333333vw;
  height: 42.6666666667vw;
  position: absolute;
  top: -6vw;
  left: 0.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-block__icon {
    width: 18.1551976574vw;
    height: 19.1800878477vw;
    top: -1.0980966325vw;
    left: 4.7584187408vw;
  }
}
.howto-slide--content-detail__tit {
  width: 100%;
}
.howto-slide--content-detail__text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.5;
  padding: 2vw 2.6666666667vw 2.6666666667vw 38vw;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-detail__text {
    font-size: 1.756954612vw;
    line-height: 1.4;
    padding: 1.0980966325vw 3.2942898975vw 0 22.6939970717vw;
  }
}
.howto-slide--content-bgtext {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 17.3333333333vw;
  letter-spacing: 0.025em;
  line-height: 1;
  opacity: 0.035;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.0666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-slide--content-bgtext {
    font-size: 13.9092240117vw;
    bottom: -0.7320644217vw;
  }
}
.howto-ele {
  border-bottom: 0.9333333333vw solid #000;
  background: url(../data/webp/howto/bg_pattern.jpg.webp) repeat 0 0;
  background-size: 10vw;
  margin: 10.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-ele {
    background: linear-gradient(
        126deg,
        #1b1b1b 45%,
        rgba(27, 27, 27, 0.2) 60%,
        rgba(27, 27, 27, 0) 70%
      ),
      url(../data/webp/howto/bg_pattern.jpg.webp);
    background-size: 100%, 3.6603221083vw;
    background-repeat: no-repeat, repeat;
    background-position: 0 0;
    border-bottom: 0.2928257687vw solid #ff8a00;
    margin: 4.0263543192vw 0 0;
    position: relative;
  }
}
.howto-ele--bg {
  background-image: url(../data/webp/howto/bg_ele.png.webp),
    url(../data/webp/howto/bg_ele_bottom.png.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0, 0 bottom;
  padding: 4vw 0 13.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .howto-ele--bg {
    background-image: url(../data/webp/howto/bg_ele_pc.png.webp);
    background-position: 0 center;
    padding: 3.074670571vw 0 7.467057101vw;
    position: relative;
  }
}
.howto-ele--tit {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.howto-ele--tit > p {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.2s;
}
.howto-ele--tit > p:before {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 138, 0, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-ele--tit > p:before {
    background: linear-gradient(
      90deg,
      rgba(255, 138, 0, 0.6) 0,
      rgba(255, 138, 0, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-ele--tit > p:after {
  display: block;
  content: "";
  background: linear-gradient(
    -90deg,
    rgba(15, 171, 208, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .howto-ele--tit > p:after {
    background: linear-gradient(
      -90deg,
      rgba(15, 171, 208, 0.6) 0,
      rgba(15, 171, 208, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-ele--tit img {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .howto-ele--tit {
    position: relative;
    z-index: 3;
  }
}
.howto-ele--img {
  width: 78.6666666667vw;
  margin: 0.6666666667vw auto 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-ele--img {
    width: 23.4260614934vw;
    background: 0 0;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    top: calc(50% + 2.7818448023vw);
    left: 12.5915080527vw;
    z-index: 2;
  }
}
.howto-ele--text {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 15%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0) 60%
  );
  padding: 56.6666666667vw 5.3333333333vw 10vw;
  margin: -53.3333333333vw 0 0;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  text-shadow: 0 0.4vw 0 #000;
  line-height: 1.75;
  overflow-wrap: break-word;
  position: relative;
}
.howto-ele--text .orange {
  color: #ff8a00;
}
.howto-ele--text .blue {
  color: #0fabd0;
}
.howto-ele--text .type-red {
  color: #ff4919;
}
.howto-ele--text .type-blue {
  color: #227efc;
}
.howto-ele--text .type-green {
  color: #23e59a;
}
@media only screen and (min-width: 767px) {
  .howto-ele--text {
    background: url(../data/webp/howto/bg_ele_text.png.webp) no-repeat 0 center;
    background-size: 100% auto;
    font-size: 1.756954612vw;
    line-height: 1.5;
    text-shadow: 0 0.1464128843vw 0 #000;
    padding: 2.196193265vw 15.3733528551vw 3.074670571vw 38.0673499268vw;
    margin: 4.0263543192vw 0 0;
  }
}
.howto-mode {
  background-image: url(../data/webp/stage/ui/bg_border.png.webp);
  background-size: 8.5333333333vw;
  border-top: #000 0.9333333333vw solid;
  border-bottom: #000 0.9333333333vw solid;
  background-position: 0 0;
  padding: 9.3333333333vw 0 12.6666666667vw;
  margin: 10vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode {
    background-size: 2.3426061493vw;
    border-top: none;
    border-bottom: #000 0.3660322108vw solid;
    padding: 3.6603221083vw 0 3.2942898975vw;
    margin: 5.1244509517vw 0 0;
  }
}
.howto-mode--tit {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.howto-mode--tit > p {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.2s;
}
.howto-mode--tit > p:before {
  display: block;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 138, 0, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--tit > p:before {
    background: linear-gradient(
      90deg,
      rgba(255, 138, 0, 0.6) 0,
      rgba(255, 138, 0, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-mode--tit > p:after {
  display: block;
  content: "";
  background: linear-gradient(
    -90deg,
    rgba(15, 171, 208, 0.5) 0,
    rgba(15, 171, 208, 0) 99%
  );
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--tit > p:after {
    background: linear-gradient(
      -90deg,
      rgba(15, 171, 208, 0.6) 0,
      rgba(15, 171, 208, 0.4) 70%,
      rgba(15, 171, 208, 0) 90%
    );
  }
}
.howto-mode--tit img {
  position: relative;
  z-index: 2;
}
.howto-mode--subtit {
  background: linear-gradient(
    90deg,
    rgba(255, 138, 0, 0.05) 0,
    rgba(255, 138, 0, 0.6) 40%,
    rgba(255, 138, 0, 0.6) 60%,
    rgba(255, 138, 0, 0.05) 100%
  );
  padding: 1.3333333333vw 2.6666666667vw 1.6vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.8666666667vw;
  text-shadow: 0 0.5333333333vw 0 #000;
  margin: 0 0 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-mode--subtit {
    padding: 0.7320644217vw 1.4641288433vw 0.878477306vw;
    font-size: 2.0497803807vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    margin: 1.4641288433vw 0 0;
    justify-content: start;
  }
}
.howto-mode--subtit.blue {
  background: linear-gradient(
    90deg,
    rgba(15, 171, 208, 0.05) 0,
    rgba(15, 171, 208, 0.6) 40%,
    rgba(15, 171, 208, 0.6) 60%,
    rgba(15, 171, 208, 0.05) 100%
  );
}
.howto-mode--subtit.pc-none {
  display: none;
}
@media only screen and (max-width: 767px) {
  .howto-mode--subtit.pc-none {
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .howto-mode--subtit.sp-none {
    display: none;
  }
}
.howto-mode--text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  line-height: 1.25;
  padding: 0 6vw;
  margin: 2.6666666667vw 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--text {
    font-size: 1.4641288433vw;
    padding: 0 1.4641288433vw;
    margin: 1.0980966325vw 0;
  }
  .howto-mode--text.center {
    text-align: center;
  }
}
.howto-mode--text .orange {
  color: #ff8a00;
}
.howto-mode--text .blue {
  color: #0fabd0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--list {
    width: 88.2869692533vw;
    margin: 3.2942898975vw auto 0;
    display: flex;
    justify-content: space-between;
  }
}
.howto-mode--block {
  border-bottom: 0.6666666667vw solid #ff8a00;
  background: url(../data/webp/howto/parts_mode.png.webp) no-repeat right bottom;
  background-size: 11.3333333333vw;
  background-color: #1b1b1b;
  width: 89.3333333333vw;
  padding: 5.3333333333vw 0 3.3333333333vw;
  margin: 6.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block {
    border-bottom: 0.3660322108vw solid #ff8a00;
  }
  .howto-mode--block.list {
    width: 27.4524158126vw;
    padding: 0 0 1.8301610542vw;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .howto-mode--block.list .howto-mode--thumb {
    order: 1;
  }
  .howto-mode--block.list .howto-mode--subtit {
    background: linear-gradient(
      90deg,
      rgba(255, 138, 0, 0.6) 0,
      rgba(255, 138, 0, 0.3) 65%,
      rgba(255, 138, 0, 0) 80%
    );
    order: 2;
  }
  .howto-mode--block.list .howto-mode--text {
    order: 3;
  }
  .howto-mode--block.full {
    width: 88.2869692533vw;
    padding: 1.8301610542vw 0 3.6603221083vw;
    margin: 3.2942898975vw auto 0;
  }
  .howto-mode--block.full .howto-mode--subtit {
    justify-content: center;
  }
  .howto-mode--block.full .howto-mode--block-column {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 3.2942898975vw;
  }
  .howto-mode--block.full .howto-mode--block-column .howto-mode--block-thumb {
    width: 38.5065885798vw;
    margin: 0;
  }
  .howto-mode--block.medium {
    width: 68.8140556369vw;
    padding: 0;
    margin: 3.2942898975vw auto 0;
    display: flex;
  }
  .howto-mode--block.medium .howto-mode--block-thumb {
    width: 27.0863836018vw;
    margin: 0;
  }
  .howto-mode--block.medium .howto-mode--block-column {
    width: 41.7276720351vw;
  }
  .howto-mode--block.medium .howto-mode--subtit {
    margin: 1.8301610542vw 0 0;
    background: linear-gradient(
      90deg,
      rgba(15, 171, 208, 0.6) 0,
      rgba(15, 171, 208, 0.3) 65%,
      rgba(15, 171, 208, 0) 80%
    );
  }
}
.howto-mode--block.blue {
  border-bottom: 0.6666666667vw solid #0fabd0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block.blue {
    border-bottom: 0.3660322108vw solid #0fabd0;
  }
}
.howto-mode--block-thumb {
  width: 78.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-thumb {
    width: 100%;
  }
}
.howto-mode--block-detail {
  background-color: rgba(0, 0, 0, 0.5);
  width: 78.6666666667vw;
  padding: 2.6666666667vw 0;
  margin: 2.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail {
    width: 41.21522694vw;
    padding: 1.4641288433vw 0;
    margin: 0;
  }
}
.howto-mode--block-detail__point {
  padding: 0 2.6666666667vw 0 8vw;
  position: relative;
}
.howto-mode--block-detail__point:not(:first-child) {
  margin: 2.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail__point {
    padding: 0 2.5622254758vw 0 4.39238653vw;
  }
  .howto-mode--block-detail__point:not(:first-child) {
    margin: 1.4641288433vw 0 0;
  }
}
.howto-mode--block-detail__point:before {
  display: block;
  content: "";
  background-color: #0fabd0;
  width: 0.6666666667vw;
  height: calc(100% - 0.2666666667vw);
  position: absolute;
  top: 0.2666666667vw;
  left: 4.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail__point:before {
    width: 0.3660322108vw;
    height: calc(100% - 0.1464128843vw);
    top: 0.1464128843vw;
    left: 2.5622254758vw;
  }
}
.howto-mode--block-detail__point:after {
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  background-image: url(../data/webp/howto/icon_point.png.webp);
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: 0;
  left: 2.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail__point:after {
    width: 2.196193265vw;
    height: 2.196193265vw;
    left: 1.6105417277vw;
  }
}
.howto-mode--block-detail__point-tit {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  color: #0fabd0;
  font-size: 3.7333333333vw;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail__point-tit {
    font-size: 1.4641288433vw;
  }
}
.howto-mode--block-detail__point-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.2vw;
  margin: 1.0666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--block-detail__point-text {
    font-size: 1.1713030747vw;
    line-height: 1.35;
    margin: 0.3660322108vw 0 0;
  }
}
.howto-hint {
  border-bottom: 0.9333333333vw solid #000;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url(../data/webp/howto/bg_hint.png.webp);
  padding: 20.8vw 0 8.6666666667vw;
  margin: 10vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-hint {
    border-bottom: 0.3660322108vw solid #000;
    background-image: url(../data/webp/howto/bg_hint_pc.png.webp);
    padding: 0 0 2.5622254758vw;
    margin: 5.4904831625vw 0 0;
    display: flex;
  }
}
.howto-hint--line,
.howto-hint--tit {
  width: 100%;
  height: 14.1333333333vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
@media only screen and (min-width: 767px) {
  .howto-hint--line,
  .howto-hint--tit {
    height: 7.6866764275vw;
  }
}
.howto-hint--slide {
  background: linear-gradient(335deg, #0fabd0 49%, #ff9c00 51%);
  width: 89.3333333333vw;
  height: 42.1333333333vw;
  padding: 0 0 5.3333333333vw;
  margin: 2.6666666667vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide {
    width: 38.6530014641vw;
    height: 18.1551976574vw;
    padding: 0;
    margin: 0 0 0 4.7584187408vw;
    order: 2;
  }
}
.howto-hint--slide .swiper-container {
  overflow: visible;
}
.howto-hint--slide-item {
  width: 89.3333333333vw;
  height: 42.1333333333vw;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide-item {
    width: 38.6530014641vw;
    height: 18.1551976574vw;
  }
}
.howto-hint--slide-item img {
  width: 100%;
  height: auto;
  padding: 0.4vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide-item img {
    padding: 0.2196193265vw;
  }
}
.howto-hint--slide .swiper-button-next,
.howto-hint--slide .swiper-button-prev {
  width: 9.8666666667vw;
  height: 8vw;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 11;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide .swiper-button-next,
  .howto-hint--slide .swiper-button-prev {
    width: 3.8067349927vw;
    height: 3.513909224vw;
    top: 50%;
  }
  .howto-hint--slide .swiper-button-next:hover,
  .howto-hint--slide .swiper-button-prev:hover {
    opacity: 0.7;
  }
}
.howto-hint--slide .swiper-button-next.is-disable,
.howto-hint--slide .swiper-button-prev.is-disable {
  opacity: 0.35;
}
.howto-hint--slide .swiper-button-prev {
  background-image: url(../data/webp/top/ui/slide_prev.png.webp);
  left: -4vw;
  right: auto;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide .swiper-button-prev {
    left: -2.196193265vw;
  }
}
.howto-hint--slide .swiper-button-next {
  background-image: url(../data/webp/top/ui/slide_next.png.webp);
  right: -4vw;
  left: auto;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide .swiper-button-next {
    right: -2.196193265vw;
  }
}
.howto-hint--slide .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -6vw;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -3.2942898975vw;
  }
}
.howto-hint--slide .swiper-pagination-bullet {
  border-radius: 0.2666666667vw;
  border: 0.4vw solid #fff;
  background: #000;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  margin: 0 1.6vw !important;
  opacity: 1 !important;
  transition: 0.3s;
}
.howto-hint--slide .swiper-pagination-bullet-active {
  background: #ff8a00;
}
@media only screen and (min-width: 767px) {
  .howto-hint--slide .swiper-pagination-bullet {
    border-radius: 0.1464128843vw;
    border: 0.1464128843vw solid #fff;
    width: 1.0980966325vw;
    height: 1.0980966325vw;
    margin: 0 0.7320644217vw !important;
  }
}
.howto-hint--detail {
  padding: 0 6vw;
  margin: 9.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-hint--detail {
    width: 52.8550512445vw;
    padding: 9.5168374817vw 2.9282576867vw 0 6.2225475842vw;
    margin: 0;
  }
}
.howto-hint--detail-tit {
  width: 100%;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.7333333333vw;
  text-shadow: 0 0.5333333333vw 0 #000;
  line-height: 1.35;
}
@media only screen and (min-width: 767px) {
  .howto-hint--detail-tit {
    font-size: 2.9282576867vw;
    text-shadow: 0 0.3660322108vw 0 #000;
    letter-spacing: 0.06em;
    padding: 0;
    line-height: 1.1;
  }
}
.howto-hint--detail-tit .orange {
  color: #ff8a00;
}
.howto-hint--detail-text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  line-height: 1.35;
  margin: 2vw 0 0;
}
@media only screen and (min-width: 767px) {
  .howto-hint--detail-text {
    font-size: 1.756954612vw;
    padding: 0;
    margin: 0.7320644217vw 0;
  }
}
.howto-hint--detail-text .orange {
  color: #ff8a00;
}
.howto-hint--detail-text .blue {
  color: #0fabd0;
}
.interview {
  position: relative;
  letter-spacing: 0.1vw;
}
@media only screen and (min-width: 767px) {
  .interview {
    letter-spacing: 0.0732064422vw;
  }
}
.interview .container--contents {
  padding: 0 0 6.6666666667vw;
  margin-top: 0;
  background-image: url(../data/webp/common/bg_container_line.png.webp);
  background-position: 0 0;
  background-repeat: repeat-y;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .interview .container--contents {
    background-image: url(../data/webp/common/bg_container_line_pc.png.webp);
    padding: 0 0 3.6603221083vw;
    margin: 0;
  }
}
.interview-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.4vw;
}
@media only screen and (min-width: 767px) {
  .interview-logo {
    width: 14.7877013177vw;
  }
}
.interview-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 767px) {
  .interview-logo a {
    transition: opacity 0.3s;
  }
  .interview-logo a:hover {
    opacity: 0.8;
  }
}
.interview-text--highlight {
  color: #ff4919;
}
.interview-header {
  width: 100%;
  height: 82.6666666667vw;
  background: url(../img/interview/bg_header.png) no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .interview-header {
    position: relative;
    width: 100%;
    height: 28.4773060029vw;
    background: url(../img/interview/bg_header_pc.jpg) repeat-x center top;
    background-size: 2.1229868228vw auto;
  }
  .interview-header::after,
  .interview-header::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 0.2928257687vw;
  }
  .interview-header::before {
    background: #00a8ff;
    left: 0;
  }
  .interview-header::after {
    background: #ff9c00;
    right: 0;
  }
}
.interview-header--title {
  padding: 29.3333333333vw 4vw 0;
}
@media only screen and (min-width: 767px) {
  .interview-header--title {
    position: relative;
    width: 73.2064421669vw;
    margin: 0 auto;
    padding: 9.224011713vw 0 0 0;
  }
}
.interview-header--title-main {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.3333333333vw;
  line-height: 7.4666666667vw;
  text-shadow: 0 0.8vw 0 #000;
  letter-spacing: -0.0366032211vw;
}
@media only screen and (min-width: 767px) {
  .interview-header--title-main {
    font-size: 2.9282576867vw;
    line-height: 3.953147877vw;
    text-shadow: 0 6px 0 #000;
    letter-spacing: 0.0732064422vw;
  }
}
.interview-header--title-sub {
  margin-top: 1.8666666667vw;
  font-size: 4vw;
  line-height: 5.8666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-header--title-sub {
    margin-top: 1.0248901903vw;
    font-size: 1.8301610542vw;
    line-height: 3.2210834553vw;
  }
}
.interview-contents {
  padding: 6.6666666667vw 5.3333333333vw 5.3333333333vw;
  background: #1b1b1b;
  font-size: 3.7333333333vw;
  line-height: 5.7333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents {
    width: 87.8477306003vw;
    margin: 3.8067349927vw auto 0;
    padding: 3.6603221083vw 7.3206442167vw 3.6603221083vw;
    font-size: 1.4641288433vw;
    line-height: 2.3426061493vw;
  }
}
.interview-contents--intro-img {
  margin-bottom: 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--intro-img {
    margin-bottom: 3.074670571vw;
  }
}
.interview-contents--intro-text {
  margin-top: 4.5333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-contents--intro-text {
    margin-top: 2.0497803807vw;
  }
}
.interview-contents--intro-text:first-of-type {
  margin-top: 0;
}
@media only screen and (min-width: 767px) {
  .interview-contents--intro-attention {
    font-size: 1.1713030747vw;
  }
}
.interview-contents--cast {
  width: 89.3333333333vw;
  margin-top: 7.2vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast {
    width: 73.2064421669vw;
    margin-top: 4.0995607613vw;
  }
}
.interview-contents--cast:not(:first-of-type) {
  margin-top: 4vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast:not(:first-of-type) {
    margin-top: 2.196193265vw;
  }
}
.interview-contents--cast-kana {
  font-size: 2.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-kana {
    font-size: 0.878477306vw;
  }
}
.interview-contents--cast-top {
  display: flex;
  align-items: baseline;
  width: 100%;
  height: 8.6666666667vw;
  padding: 1.8666666667vw 0 0 3.3333333333vw;
  font-size: 3.7333333333vw;
  color: #fff;
  background: url(../img/interview/frame_cast_1_top.jpg) no-repeat center top;
  background-size: 100% auto;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-top {
    height: 4.1727672035vw;
    padding: 0.9516837482vw 0 0 1.756954612vw;
    font-size: 1.4641288433vw;
    background-image: url(../img/interview/frame_cast_1_top_pc.jpg);
  }
}
.interview-contents--cast-contents {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 3.2vw 2.6666666667vw 0vw 3.4666666667vw;
  background: url(../img/interview/frame_cast_1_repeat.jpg) repeat-y center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-contents {
    align-items: center;
    padding: 2.196193265vw 1.4641288433vw 0vw 1.9033674963vw;
    background-image: url(../img/interview/frame_cast_1_repeat_pc.jpg);
  }
}
.interview-contents--cast-img {
  width: 25.8666666667vw;
  margin-right: 4.5333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-img {
    width: 6.8814055637vw;
    margin-right: 2.196193265vw;
  }
}
.interview-contents--cast-text {
  width: 57.3333333333vw;
  font-size: 3.2vw;
  line-height: 5.2vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-text {
    width: 59.2972181552vw;
    font-size: 1.1713030747vw;
    line-height: 1.756954612vw;
    margin-top: -0.878477306vw;
  }
}
.interview-contents--cast-text-main {
  font-size: 3.7333333333vw;
  line-height: 5.0666666667vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-text-main {
    font-size: 1.4641288433vw;
    line-height: 2.7818448023vw;
  }
}
.interview-contents--cast-bottom {
  width: 100%;
  height: 4.2666666667vw;
  background: url(../img/interview/frame_cast_1_bottom.jpg) no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast-bottom {
    height: 2.3426061493vw;
    background-image: url(../img/interview/frame_cast_1_bottom_pc.jpg);
  }
}
.interview-contents--cast02 .interview-contents--cast-top {
  background-image: url(../img/interview/frame_cast_2_top.jpg);
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast02 .interview-contents--cast-top {
    background-image: url(../img/interview/frame_cast_2_top_pc.jpg);
  }
}
.interview-contents--cast02 .interview-contents--cast-contents {
  background-image: url(../img/interview/frame_cast_2_repeat.jpg);
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast02 .interview-contents--cast-contents {
    background-image: url(../img/interview/frame_cast_2_repeat_pc.jpg);
  }
}
.interview-contents--cast02 .interview-contents--cast-bottom {
  background-image: url(../img/interview/frame_cast_2_bottom.jpg);
}
@media only screen and (min-width: 767px) {
  .interview-contents--cast02 .interview-contents--cast-bottom {
    background-image: url(../img/interview/frame_cast_2_bottom_pc.jpg);
  }
}
.interview-contents--main-subtit {
  position: relative;
  margin-top: 14.6666666667vw;
  padding: 1.8666666667vw 0 1.8666666667vw 4.8vw;
  font-size: 4vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 5.8666666667vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-subtit {
    margin-top: 5.8565153734vw;
    padding: 0.439238653vw 0 0.439238653vw 1.756954612vw;
    font-size: 1.8301610542vw;
    line-height: 2.9282576867vw;
  }
}
.interview-contents--main-subtit::after,
.interview-contents--main-subtit::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 0.8vw;
  height: 50%;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-subtit::after,
  .interview-contents--main-subtit::before {
    width: 0.2928257687vw;
  }
}
.interview-contents--main-subtit::before {
  background: #00a8ff;
  top: 0;
}
.interview-contents--main-subtit::after {
  background: #ff9c00;
  bottom: 0;
}
.interview-contents--main-tit {
  position: relative;
  padding-bottom: 4.5333333333vw;
  margin-top: 10vw;
  font-size: 4.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 6.6666666667vw;
  letter-spacing: -0.0333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-tit {
    margin-top: 5.1244509517vw;
    padding-bottom: 1.756954612vw;
    font-size: 2.196193265vw;
    line-height: 2.9282576867vw;
  }
}
.interview-contents--main-tit::after,
.interview-contents--main-tit::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 0.8vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-tit::after,
  .interview-contents--main-tit::before {
    height: 0.2928257687vw;
  }
}
.interview-contents--main-tit::before {
  background: #00a8ff;
  left: 0;
}
.interview-contents--main-tit::after {
  background: #ff9c00;
  right: 0;
}
.interview-contents--main-read {
  display: flex;
  margin-top: 6.6666666667vw;
  font-size: 4vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-read {
    margin-top: 2.9282576867vw;
    font-size: 1.8301610542vw;
    line-height: 2.635431918vw;
  }
}
.interview-contents--main-read::before {
  content: "";
  display: block;
  width: 9.3333333333vw;
  height: 0.4vw;
  margin: 3.2vw 1.3333333333vw 0 0;
  background: #fff;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-read::before {
    width: 3.8067349927vw;
    height: 0.2928257687vw;
    margin: 1.4641288433vw 1.1713030747vw 0 0;
  }
}
.interview-contents--main-read-text {
  width: 78.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-read-text {
    width: 68.8140556369vw;
  }
}
.interview-contents--main-item {
  margin-top: 4.5333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-item {
    margin-top: 2.196193265vw;
  }
}
.interview-contents--main-name {
  float: left;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  width: 13.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-name {
    width: 5.710102489vw;
  }
}
.interview-contents--main-name01 {
  color: #00a8ff;
}
.interview-contents--main-name02 {
  color: #ff8a00;
}
.interview-contents--main-text {
  margin-top: 4.5333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-text {
    margin-top: 1.9033674963vw;
  }
}
.interview-contents--main-text:first-of-type {
  margin-top: 0;
}
.interview-contents--main-text:not(:first-of-type)::before {
  content: "　";
}
.interview-contents--main-movie {
  margin-top: 4.5333333333vw;
}
.interview-contents--main-movie iframe {
  width: 100%;
  height: 50.6666666667vw;
  pointer-events: auto;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-movie iframe {
    height: 40.9956076135vw;
  }
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-movie {
    margin-top: 1.9033674963vw;
  }
}
.interview-contents--main-attention {
  font-size: 3.2vw;
  margin-top: 4.5333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-attention {
    font-size: 1.1713030747vw;
    margin-top: 2.4890190337vw;
  }
}
.interview-contents--main-img {
  margin-top: 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-img {
    margin-top: 2.4890190337vw;
  }
}
.interview-btn--return {
  position: relative;
  width: 89.3333333333vw;
  height: 16.6666666667vw;
  margin: 6.5333333333vw auto 0;
  background: url(../img/interview/btn_return.png) no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .interview-btn--return {
    width: 44.2166910688vw;
    height: 5.6368960469vw;
    margin: 3.6603221083vw auto 0;
    background-image: url(../img/interview/btn_return_pc.png);
  }
  .interview-btn--return:hover::before {
    opacity: 1;
  }
  .interview-btn--return:hover a::after {
    transform: translate3d(25%, -52%, 0);
  }
  .interview-btn--return::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../img/interview/btn_return_pc_on.png) no-repeat center top;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
  }
}
.interview-btn--return a {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 4vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 5.3333333333vw;
  text-align: center;
  align-items: start;
  justify-content: center;
  padding: 2.4vw 0 0 0;
  text-shadow: 0 0.5333333333vw 0 #000;
}
@media only screen and (min-width: 767px) {
  .interview-btn--return a {
    justify-content: start;
    padding: 1.0980966325vw 0 0 4.831625183vw;
    line-height: 2.9282576867vw;
    font-size: 1.4641288433vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    z-index: 2;
  }
}
.interview-btn--return a::after {
  content: "";
  display: block;
  position: absolute;
  width: 3.8666666667vw;
  height: 4.8vw;
  background: url(../img/interview/icon_arrow.png) no-repeat center top;
  background-size: 100% auto;
  top: 50%;
  right: 5.3333333333vw;
  transform: translate3d(0, -52%, 0);
}
@media only screen and (min-width: 767px) {
  .interview-btn--return a::after {
    width: 1.756954612vw;
    height: 2.3426061493vw;
    right: 3.513909224vw;
    transition: transform 0.3s;
  }
}
.interview .footer {
  pointer-events: none;
}
.interview .footer--contents {
  pointer-events: auto;
}
.interview .footer--pagetop,
.interview .footer::before {
  display: none;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes loading-text01 {
  0%,
  50% {
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    transform: translate3d(-53%, -50%, 0);
  }
}
@keyframes loading-text02 {
  0%,
  50% {
    transform: translate3d(-50%, -50%, 0);
  }
  100% {
    transform: translate3d(-47%, -50%, 0);
  }
}
@keyframes loading-rotate01 {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateZ(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateZ(360deg);
  }
}
@keyframes loading-rotate02 {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateZ(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateZ(-360deg);
  }
}
.loading--text.orange {
  animation: loading-text01 1s ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 0.1s;
}
.loading--text.blue {
  animation: loading-text02 1s ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 0.1s;
}
.loading--border {
  display: none;
}
.isSp .loading,
.isTablet .loading {
  background: url(/assets/data/webp/common/bg_loading.jpg.webp) no-repeat center;
  background-size: cover;
  background-color: #000;
}
.isPc .loading--border {
  position: absolute;
  width: 1px;
  height: 200vw;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: block;
}
.isPc .loading--border span {
  display: block;
  width: 100%;
  height: 100%;
}
.isPc .loading--border.loading--border01 {
  margin-top: -46.6666666667vw;
  animation: loading-rotate01 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border01 {
    margin-top: -17.3333333333vw;
  }
}
.isPc .loading--border.loading--border01 span {
  background: #33d4ff;
  transform: rotateZ(-75deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border01 span {
    transform: rotateZ(-80deg);
  }
}
.isPc .loading--border.loading--border02 {
  margin-top: 84vw;
  margin-left: -13.3333333333vw;
  animation: loading-rotate02 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border02 {
    margin-top: 13.3333333333vw;
    margin-left: -36vw;
  }
}
.isPc .loading--border.loading--border02 span {
  background: #33d4ff;
  transform: rotateZ(-55deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border02 span {
    transform: rotateZ(-37deg);
  }
}
.isPc .loading--border.loading--border03 {
  margin-top: 34.6666666667vw;
  margin-left: 13.3333333333vw;
  animation: loading-rotate02 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border03 {
    margin-top: 16vw;
    margin-left: 36vw;
  }
}
.isPc .loading--border.loading--border03 span {
  background: #33d4ff;
  transform: rotateZ(63deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border03 span {
    transform: rotateZ(70deg);
  }
}
.isPc .loading--border.loading--border04 {
  margin-top: -40vw;
  margin-left: 0vw;
  animation: loading-rotate01 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border04 {
    margin-top: -13.3333333333vw;
    margin-left: -26.6666666667vw;
  }
}
.isPc .loading--border.loading--border04 span {
  background: #ff8a00;
  transform: rotateZ(60deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border04 span {
    transform: rotateZ(55deg);
  }
}
.isPc .loading--border.loading--border05 {
  margin-top: 37.3333333333vw;
  margin-left: 0vw;
  animation: loading-rotate02 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border05 {
    margin-top: 18.6666666667vw;
    margin-left: 0vw;
  }
}
.isPc .loading--border.loading--border05 span {
  background: #ff8a00;
  transform: rotateZ(-70deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border05 span {
    transform: rotateZ(-79deg);
  }
}
.isPc .loading--border.loading--border06 {
  margin-top: -66.6666666667vw;
  margin-left: 40vw;
  animation: loading-rotate01 650s linear infinite;
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border06 {
    margin-top: 2.6666666667vw;
    margin-left: 40vw;
  }
}
.isPc .loading--border.loading--border06 span {
  background: #ff8a00;
  transform: rotateZ(-70deg);
}
@media only screen and (min-width: 767px) {
  .isPc .loading--border.loading--border06 span {
    transform: rotateZ(-30deg);
  }
}
.js--loadhide .loading {
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.4s;
  transition-delay: 0.2s;
  pointer-events: none;
}
@keyframes rumble {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: translate(8px, 0);
  }
  40% {
    transform: translate(-6px, -6px);
  }
  60% {
    transform: translate(6px, -8px);
  }
  100%,
  80% {
    transform: rotate(0);
  }
}
@keyframes mv-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.top-main--mv {
  overflow: hidden;
}
.top-main--mv-img {
  transform: scale(1.2);
  filter: blur(5px);
}
.top-main--line1 {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.top-main--line2 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.top-main--logo {
  opacity: 0;
}
.top-main--logo span {
  display: block;
}
.top-main--logo span img {
  transform: scale(1.5);
}
.top-main--store {
  opacity: 0;
}
.top-chara--img.luffy,
.top-howto--img.luffy,
.top-stage--img.luffy {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.top-chara--img.coin,
.top-howto--img.coin,
.top-stage--img.coin {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.top-chara--movie,
.top-chara--movie-bg,
.top-howto--movie,
.top-howto--movie-bg,
.top-stage--movie,
.top-stage--movie-bg {
  opacity: 0;
  transform: scale(0) rotate(-12.25deg);
}
@media only screen and (min-width: 767px) {
  .top-chara--movie,
  .top-chara--movie-bg,
  .top-howto--movie,
  .top-howto--movie-bg,
  .top-stage--movie,
  .top-stage--movie-bg {
    transform: scale(0) rotate(-12.25deg);
  }
}
.top-chara--tit,
.top-howto--tit,
.top-stage--tit {
  transform: scale(1.4);
  opacity: 0;
}
.top-chara--line,
.top-howto--line,
.top-stage--line {
  transform: translate3d(-11%, 7%, 0);
  opacity: 0;
}
.top-chara--btn,
.top-howto--btn,
.top-stage--btn {
  opacity: 0;
  transform: translate3d(-10%, 0, 0);
}
@media only screen and (min-width: 767px) {
  .top-chara--btn,
  .top-howto--btn,
  .top-stage--btn {
    transform: translate3d(-11%, 7%, 0) rotate(-12deg);
  }
}
.top-chara--slide,
.top-stage--slide {
  opacity: 0;
}
.top.top.js--loadend .top-main--mv-img {
  transition: all 0.4s;
  transform: scale(1);
  filter: blur(0);
}
.top.top.js--loadend .top-main--mv-wrap {
  animation: mv-zoom 40s linear infinite;
  animation-direction: alternate;
  animation-delay: 0.4s;
}
.top.top.js--loadend .top-main--line1 {
  transition: all 0.4s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.top.top.js--loadend .top-main--line2 {
  transition: all 0.4s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.top.top.js--loadend .top-main--logo {
  opacity: 1;
  transition: opacity 80ms;
  transition-delay: 0.2s;
}
.top.top.js--loadend .top-main--logo span {
  animation: rumble 0.2s linear infinite;
  animation-delay: 370ms;
  animation-iteration-count: 1;
}
.top.top.js--loadend .top-main--logo span img {
  transform: scale(1);
  transition: all 0.3s;
  transition-delay: 0.2s;
  transition-timing-function: cubic-bezier(0.04, 0.355, 0.425, 1.43);
}
.top.top.js--loadend .top-main--store {
  transition: opacity 0.4s;
  transition-delay: 0.2s;
  opacity: 1;
}
.top-about--feature-read span {
  opacity: 0;
}
.top-about--feature-read span img {
  transform: scale(1.4);
}
@media (max-width: 766px) {
  .top-about--feature-read span img {
    margin-top: 45vw;
  }
}
.top-about--feature-chara__item.item-coin1,
.top-about--feature-chara__item.item-coin2,
.top-about--feature-chara__item.item-coin3 {
  opacity: 0;
  transform: scale(0.5);
}
.top-about--feature-chara__item.item-chara1-l {
  opacity: 0;
  transform: translate3d(-15%, 0, 0);
}
.top-about--feature-chara__item.item-chara1-r {
  opacity: 0;
  transform: translate3d(15%, 0, 0);
}
.top-about--feature-chara__item.item-chara2-l {
  opacity: 0;
  transform: translate3d(-15%, 0, 0);
}
.top-about--feature-chara__item.item-chara2-r {
  opacity: 0;
  transform: translate3d(15%, 0, 0);
}
.top-about--feature-chara__item.item-chara3-l {
  opacity: 0;
  transform: translate3d(-15%, 0, 0);
}
.top-about--feature-chara__item.item-chara3-r {
  opacity: 0;
  transform: translate3d(15%, 0, 0);
}
.top-about--feature-chara__item.item-chara4-l {
  opacity: 0;
  transform: translate3d(-15%, 0, 0);
}
.top-about--feature-chara__item.item-chara4-r {
  opacity: 0;
  transform: translate3d(15%, 0, 0);
}
.top-about--feature-chara__item.item-chara5-l {
  opacity: 0;
  transform: translate3d(-15%, 0, 0);
}
.top-about--feature-chara__item.item-chara5-r {
  opacity: 0;
  transform: translate3d(15%, 0, 0);
}
.top-about--feature-catch.catch-1 {
  opacity: 0;
  transform: translate3d(-10%, 8%, 0);
}
.top-about--feature-catch.catch-2 {
  opacity: 0;
  transform: translate3d(10%, -8%, 0);
}
@media only screen and (max-width: 767px) {
  .top-about--feature-catch.catch-2 {
    transform: translate3d(10%, -8%, 0) rotate(-0.7deg);
  }
}
.js--anime.top-about--feature-read {
  animation: rumble 0.2s linear infinite;
  animation-delay: 170ms;
  animation-iteration-count: 1;
}
.js--anime.top-about--feature-read span {
  opacity: 1;
  transition: opacity 0s;
  transition-delay: 0s;
}
.js--anime.top-about--feature-read span img {
  transform: scale(1);
  transition: all 0.3s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.04, 0.355, 0.425, 1.43);
}
.js--anime .top-about--feature-chara__item.item-coin1,
.js--anime .top-about--feature-chara__item.item-coin2,
.js--anime .top-about--feature-chara__item.item-coin3 {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s;
  transition-delay: 0.1s;
}
.js--anime .top-about--feature-chara__item.item-chara1-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 50ms;
}
.js--anime .top-about--feature-chara__item.item-chara1-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 50ms;
}
.js--anime .top-about--feature-chara__item.item-chara2-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 0.1s;
}
.js--anime .top-about--feature-chara__item.item-chara2-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 0.1s;
}
.js--anime .top-about--feature-chara__item.item-chara3-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 150ms;
}
.js--anime .top-about--feature-chara__item.item-chara3-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 150ms;
}
.js--anime .top-about--feature-chara__item.item-chara4-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.js--anime .top-about--feature-chara__item.item-chara4-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.js--anime .top-about--feature-chara__item.item-chara5-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 250ms;
}
.js--anime .top-about--feature-chara__item.item-chara5-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
  transition-delay: 250ms;
}
.js--anime .catch-1 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
}
.js--anime .catch-2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
}
@media only screen and (max-width: 767px) {
  .js--anime .catch-2 {
    transform: translate3d(0, 0, 0) rotate(-0.7deg);
  }
}
.js--anime .top-howto--img.coin,
.js--anime .top-howto--img.luffy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.3s;
}
.js--anime .top-howto--movie,
.js--anime .top-howto--movie-bg {
  opacity: 1;
  transform: scale(1) rotate(-12.25deg);
  transition: all 0.3s;
}
@media only screen and (min-width: 767px) {
  .js--anime .top-howto--movie,
  .js--anime .top-howto--movie-bg {
    transform: scale(1) rotate(-12.25deg);
  }
}
.js--anime .top-chara--tit,
.js--anime .top-howto--tit,
.js--anime .top-stage--tit {
  transform: scale(1);
  opacity: 1;
  transition: all 0.2s;
  transition-delay: 0.3s;
}
@media only screen and (min-width: 767px) {
  .js--anime .top-chara--line,
  .js--anime .top-howto--line,
  .js--anime .top-stage--line {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all 0.3s;
    transition-property: opacity, transform;
    transition-duration: 0.1s, 0.3s;
    transition-delay: 0.5s, 0.5s;
  }
}
.js--anime .top-chara--btn,
.js--anime .top-howto--btn,
.js--anime .top-stage--btn {
  opacity: 1;
  transition: all 0.3s;
  transition-property: opacity, transform;
  transition-duration: 0.1s, 0.3s;
  transition-delay: 660ms, 660ms;
  transform: translate3d(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .js--anime .top-chara--btn,
  .js--anime .top-howto--btn,
  .js--anime .top-stage--btn {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }
}
.js--anime .top-chara--slide,
.js--anime .top-stage--slide {
  opacity: 1;
  transition: opacity 0.3s;
}
@media only screen and (min-width: 767px) {
  .chara-index:before {
    display: block;
    content: "";
  }
}
.chara-index--list-item {
  opacity: 0;
  pointer-events: none;
}
.js--loadend .chara-index--list-item {
  pointer-events: auto;
  animation: fade-in-up 0.3s;
  animation-fill-mode: forwards;
}
@keyframes chara-detail-in {
  0% {
    opacity: 0;
    transform: translate3d(-25%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes chara-detail-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(25%, 0, 0);
  }
}
@keyframes chara-detail-in-sp {
  0% {
    opacity: 0;
    transform: translate3d(-15%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes chara-detail-out-sp {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(15%, 0, 0);
  }
}
@media only screen and (min-width: 767px) {
  .chara-main:before {
    display: block;
    content: "";
  }
}
.chara-main--illust-img img {
  opacity: 0;
}
.chara-main--illust-img.js--hide img {
  animation: chara-detail-out-sp 0.4s forwards;
}
@media only screen and (min-width: 767px) {
  .chara-main--illust-img.js--hide img {
    animation: chara-detail-out 0.4s forwards;
  }
}
.chara-main--illust-img.js--show img {
  animation: chara-detail-in-sp 0.4s forwards;
}
@media only screen and (min-width: 767px) {
  .chara-main--illust-img.js--show img {
    animation: chara-detail-in 0.4s forwards;
  }
}
.chara-main--ui-btn {
  pointer-events: auto;
}
.chara-main--ui-btn.js--hide {
  display: none;
}
.chara-main--bg-item {
  transition: opacity 0.2s;
  transition-timing-function: linear;
}
.chara-main--type-list {
  transition: opacity 0.2s;
  transition-timing-function: linear;
}
.chara-main--skill-data__list {
  transition: opacity 0.2s;
  transition-timing-function: linear;
}
.chara-main[data-style="0"] .chara-main--illust-img.illust-2d img {
  animation-delay: 0.6s;
}
#js-chara--slide,
.chara-main--data-catch,
.chara-main--data-name span,
.chara-main--mode,
.chara-main--skill-data div,
.chara-main--skill-name,
.chara-main--type,
.chara-main--ui,
.chara-subnavi--scrollbar {
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .chara-main--data-name {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .chara-main--data {
    opacity: 0;
  }
}
.chara-main--data-catch,
.chara-main--data-name span,
.chara-main--skill-data div,
.chara-main--skill-name,
.chara-main--type {
  transform: translate3d(6.6666666667vw, 0, 0);
}
@media only screen and (min-width: 767px) {
  .chara-main--data-catch,
  .chara-main--data-name span,
  .chara-main--skill-data div,
  .chara-main--skill-name,
  .chara-main--type {
    transform: translate3d(3.6603221083vw, 0, 0);
  }
}
.js--loadend .chara-main--data-catch,
.js--loadend .chara-main--data-name span,
.js--loadend .chara-main--skill-data div,
.js--loadend .chara-main--skill-name,
.js--loadend .chara-main--type {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s;
}
.js--loadend #js-chara--slide,
.js--loadend .chara-main--data,
.js--loadend .chara-main--mode,
.js--loadend .chara-subnavi--scrollbar {
  opacity: 1;
  transition: opacity 0.4s;
}
@media only screen and (max-width: 767px) {
  .js--loadend .chara-main--data-name {
    opacity: 1;
    transition: opacity 0.4s;
  }
}
.js--loadend .chara-main--mode,
.js--loadend .chara-main--ui {
  opacity: 1;
  transition: opacity 580ms;
}
.js--loadend .chara-main--data {
  transition: all 0.6s;
}
.js--loadend #js-chara--slide,
.js--loadend .chara-main--data,
.js--loadend .chara-subnavi--scrollbar {
  transition-delay: 0.1s;
}
.js--loadend .chara-main--data-catch {
  transition-delay: 0.1s;
}
.js--loadend .chara-main--mode {
  transition-delay: 0.1s;
}
.js--loadend .chara-main--data-name span {
  transition-delay: 180ms;
}
.js--loadend .chara-main--type {
  transition-delay: 260ms;
}
.js--loadend .chara-main--skill-name {
  transition-delay: 340ms;
}
.js--loadend .chara-main--skill-data div {
  transition-delay: 420ms;
}
.js--loadend .chara-main--ui {
  transition-delay: 720ms;
}
.js--animeend
  .chara-main[data-style="0"]
  .chara-main--illust-img.illust-2d
  img {
  animation-delay: 0s;
}
.stage-index--list-item {
  opacity: 0;
  pointer-events: none;
}
.js--loadend .stage-index--list-item {
  pointer-events: auto;
  animation: fade-in-up 0.3s;
  animation-fill-mode: forwards;
}
.stage-main--title {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.stage-main--slider-item img {
  transform: scale(1.1);
}
.stage-main--minimap,
.stage-main--thumbs {
  opacity: 0;
}
.stage-main .swiper-button-next {
  opacity: 0;
}
.js--loadhide .stage-main--slider-item img {
  transition: transform 0.4s;
  transform: scale(1);
  transition-delay: 350ms;
}
.js--loadhide .stage-main--title {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 0.3s;
  transition-delay: 550ms;
}
.js--loadhide .stage-main--minimap,
.js--loadhide .stage-main--thumbs {
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 750ms;
}
.js--loadhide .stage-main .swiper-button-next {
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 750ms;
}
@media only screen and (min-width: 767px) {
  .js--loadhide.js--animeend .stage-main .swiper-button-next,
  .js--loadhide.js--animeend .stage-main .swiper-button-prev {
    transition: 0.3s;
    transition-delay: 0s;
  }
  .js--loadhide.js--animeend .stage-main .swiper-button-next:hover,
  .js--loadhide.js--animeend .stage-main .swiper-button-prev:hover {
    opacity: 0.7;
  }
}
.js--loadhide.js--animeend
  .stage-main
  .swiper-button-next.swiper-button-disabled,
.js--loadhide.js--animeend
  .stage-main
  .swiper-button-prev.swiper-button-disabled {
  opacity: 0.4;
}
.howto-main--img {
  transform: scale(1.25);
}
.howto-main .catch-1 {
  will-change: opacity, transform;
  opacity: 0;
  transform: translate3d(-10%, 4%, 0);
}
.howto-main .catch-2 {
  will-change: opacity, transform;
  opacity: 0;
  transform: translate3d(10%, -4%, 0);
}
.howto-ele--tit img,
.howto-mode--tit img,
.howto-roll--tit img {
  will-change: opacity;
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .howto-ele--tit-bg:before,
  .howto-mode--tit-bg:before,
  .howto-roll--tit-bg:before {
    display: block;
    content: "";
    will-change: left;
  }
  .howto-ele--tit-bg:after,
  .howto-mode--tit-bg:after,
  .howto-roll--tit-bg:after {
    display: block;
    content: "";
    will-change: right;
  }
}
.howto-ele--img,
.howto-ele--text {
  will-change: opacity;
  opacity: 0;
}
.howto-mode--block,
.howto-mode--tit img {
  will-change: opacity;
  opacity: 0;
}
.howto-slide--chara-item {
  opacity: 0;
  transform: scale(1.1);
  will-change: opacity, transform;
}
.howto-hint--line {
  will-change: clip-path;
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
}
@media only screen and (min-width: 767px) {
  .howto-hint--line {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}
.howto-hint--detail {
  will-change: opacity;
  opacity: 0;
}
.howto-hint--slide {
  will-change: opacity;
  opacity: 0;
}
.howto-hint--tit {
  will-change: opacity;
  opacity: 0;
}
.js--loadend .howto-main--img {
  transform: scale(1);
  transition: transform 0.4s;
}
.js--loadend .howto-main .catch-1,
.js--loadend .howto-main .catch-2 {
  opacity: 1;
  transform: none;
  transition: all 0.4s;
  transition-property: opacity, transform;
  transition-duration: 0s, 0.4s;
  transition-delay: 0.1s, 0.1s;
}
.js--anime .slide-progress .swiper-slide img.on {
  transition: 0s !important;
}
.js--anime .howto-ele--tit img,
.js--anime .howto-roll--tit img {
  opacity: 1;
  transition: all 0.5s;
}
.js--anime .howto-ele--img {
  opacity: 1;
  transition: all 0.4s;
  transition-delay: 0.1s;
}
.js--anime .howto-ele--text {
  opacity: 1;
  transition: all 0.4s;
  transition-delay: 0.2s;
}
.js--anime .howto-slide--chara-item {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s;
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-slide--chara-item {
    cursor: pointer;
  }
  .js--anime .howto-slide--chara-item.hover .on,
  .js--anime .howto-slide--chara-item:hover .on {
    opacity: 1 !important;
    transition: opacity 0.2s !important;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-slide--ctrl-item {
    cursor: pointer;
  }
  .js--anime .howto-slide--ctrl-item.hover .on,
  .js--anime .howto-slide--ctrl-item:hover .on {
    opacity: 1 !important;
    transition: opacity 0.2s !important;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-ele--tit-bg,
  .js--anime .howto-mode--tit-bg,
  .js--anime .howto-roll--tit-bg {
    transition: 250ms;
  }
  .js--anime .howto-ele--tit-bg:before,
  .js--anime .howto-mode--tit-bg:before,
  .js--anime .howto-roll--tit-bg:before {
    display: block;
    content: "";
    transition: 250ms;
    left: -18%;
  }
}
@media only screen and (min-width: 767px) and (min-width: 767px) {
  .js--anime .howto-ele--tit-bg:before,
  .js--anime .howto-mode--tit-bg:before,
  .js--anime .howto-roll--tit-bg:before {
    left: -32%;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-ele--tit-bg:after,
  .js--anime .howto-mode--tit-bg:after,
  .js--anime .howto-roll--tit-bg:after {
    display: block;
    content: "";
    transition: 250ms;
    right: -18%;
  }
}
@media only screen and (min-width: 767px) and (min-width: 767px) {
  .js--anime .howto-ele--tit-bg:after,
  .js--anime .howto-mode--tit-bg:after,
  .js--anime .howto-roll--tit-bg:after {
    right: -32%;
  }
}
.js--anime .howto-hint--tit {
  opacity: 1;
  transition: opacity 0.4s;
}
.js--anime .howto-hint--line {
  transition: all 0.4s;
  transition-timing-function: linear;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition-delay: 180ms;
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-hint--line {
    transition-duration: 0.5s;
  }
}
.js--anime .howto-hint--detail {
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 0.4s;
}
.js--anime .howto-hint--slide {
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 0.4s;
}
.js--anime.howto-mode--tit img {
  opacity: 1;
  transition: all 0.4s;
}
.js--anime.howto-mode--block {
  opacity: 1;
  transition: all 0.4s;
}