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

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

html,
body {
  font-size: 62.5%;
  color: #fff;
  background-color: #000;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 767px) {
  html.no-scroll {
    overflow: hidden;
  }
}
html.modal-no-scroll {
  overflow: hidden;
}

body {
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 100% auto;
  background-image: url("../data/webp/common/bg.jpg.webp");
  width: 100%;
  letter-spacing: 0.08em;
  overflow-x: hidden;
}
@media only screen and (min-width: 767px) {
  body {
    background-size: 32.2840409956vw auto;
  }
}
body.top {
  background: #171717;
}
body.character-detail {
  background: #171717;
}

a {
  color: #fff;
  text-decoration: none;
}

h1,
h2,
h3 {
  line-height: 1;
}

ul,
li {
  list-style: none;
}

tr,
th,
td {
  font-weight: normal;
  text-align: left;
}

img,
picture {
  -webkit-backface-visibility: hidden;
  width: 100%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  vertical-align: bottom;
}

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

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

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
.swiper-button-prev, .swiper-button-next {
  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-prev::before, .swiper-button-prev::after, .swiper-button-next::before, .swiper-button-next::after {
  content: none;
}
@media only screen and (min-width: 767px) {
  .swiper-button-prev, .swiper-button-next {
    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 {
  width: 35.7333333333vw;
  height: 20vw;
  position: absolute;
  top: 0;
  left: 1.2vw;
  pointer-events: none;
  display: block;
  cursor: pointer;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .header--logo a {
    width: 14.494875549vw;
    height: 8.1991215227vw;
    left: 0.5124450952vw;
  }
  .header--logo a:hover {
    opacity: 0.8;
  }
}
@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.top,
  .header--btn.open .header--btn-parts__item.bottom {
    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 300ms;
}
@media only screen and (min-width: 767px) {
  .header--lang {
    margin-left: -2.0497803807vw;
    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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
  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 rgb(0, 0, 0), 0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0 -0.0732064422vw 0 rgb(0, 0, 0);
    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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
}
@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 rgb(0, 0, 0), 0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0 -0.0732064422vw 0 rgb(0, 0, 0);
  }
}
@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 300ms;
}
@media only screen and (min-width: 767px) {
  .header--dl {
    background-image: url("../data/webp/common/header/gnavi_dl_pc_v2.png.webp");
    width: 13.616398243vw;
    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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
  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 rgb(0, 0, 0), 0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0 -0.0732064422vw 0 rgb(0, 0, 0);
    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;
  }
}
.header--webstore {
  position: fixed;
  width: 100%;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: 0.3s;
  z-index: 5;
}
@media only screen and (max-width: 767px) {
  .header--webstore {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
  }
}
@media only screen and (min-width: 767px) {
  .header--webstore {
    bottom: 0.3660322108vw;
    right: 1.9765739385vw;
    width: 26.9399707174vw;
    opacity: 0;
    visibility: hidden;
  }
  .header--webstore.visible {
    opacity: 1;
    visibility: visible;
  }
  .header--webstore.visible:hover {
    opacity: 0.8;
  }
}
.header--webstore.sp-hide {
  opacity: 0;
  visibility: hidden;
}

.gnavi {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}
.gnavi {
  background-image: url("../data/webp/common/header/bg_gnavi.png.webp");
  background-position: 0 8vw;
  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_v3.png.webp");
    background-position: 0 0;
    height: 3.5871156662vw;
    width: 65.1537335286vw;
    padding: 0;
    margin: 0 0 0 -1.4641288433vw;
    display: flex;
  }
}
.gnavi-item {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  width: 97.3333333333vw;
  height: 14vw;
  margin: 0.6666666667vw 0 0 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .gnavi-item {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    height: 3.5871156662vw;
    margin: 0;
  }
  .gnavi-item:nth-child(1) {
    margin: 0 0 0 0.2196193265vw;
  }
  .gnavi-item:nth-child(2) {
    margin: 0 0 0 -1.5373352855vw;
  }
  .gnavi-item:nth-child(3) {
    margin: 0 0 0 -1.5373352855vw;
  }
  .gnavi-item:nth-child(4) {
    margin: 0 0 0 -1.5373352855vw;
  }
  .gnavi-item:nth-child(5) {
    margin: 0 0 0 -1.5373352855vw;
  }
  .gnavi-item:nth-child(6) {
    margin: 0 0 0 -1.5373352855vw;
  }
}
.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_v3.png.webp");
    width: 14.5314787701vw;
  }
}
.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_v3.png.webp");
    width: 11.1273792094vw;
  }
}
.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_v3.png.webp");
    width: 12.0058565154vw;
  }
}
.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_v3.png.webp");
    width: 10.102489019vw;
  }
}
.gnavi-item.steam {
  background-image: url("../data/webp/common/header/list_steam.png.webp");
}
@media only screen and (min-width: 767px) {
  .gnavi-item.steam {
    background-image: url("../data/webp/common/header/list_steam_pc_v3.png.webp");
    width: 11.82284041vw;
  }
}
.gnavi-item.webstore {
  background-image: url("../data/webp/common/header/list_store.png.webp");
}
@media only screen and (min-width: 767px) {
  .gnavi-item.webstore {
    background-image: url("../data/webp/common/header/list_webstore_pc_v3.png.webp");
    width: 13.140556369vw;
  }
}
.gnavi-item a {
  width: 100%;
  height: 100%;
  padding: 0 10.4vw 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: 10.4vw;
}
@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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
  letter-spacing: 0.1em;
  text-align: center;
}
@media only screen and (min-width: 767px) {
  .gnavi-item a span {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 1.0248901903vw;
    text-shadow: -0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0 -0.0732064422vw 0 rgb(0, 0, 0);
    padding: 0 1.4641288433vw 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;
}
.gnavi.steam .gnavi-item.steam a .bg-img.on {
  opacity: 1;
}
.gnavi.steam .gnavi-item.steam a .bg-img.off {
  opacity: 0;
}
.gnavi.steam .gnavi-item.steam a span:after {
  right: -0.2196193265vw;
}
.gnavi.webstore .gnavi-item.webstore a .bg-img.on {
  opacity: 1;
}
.gnavi.webstore .gnavi-item.webstore a .bg-img.off {
  opacity: 0;
}
.gnavi.webstore .gnavi-item.webstore 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, .footer.guideline, .footer.interview, .footerobserver {
    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: 23.7920937042vw;
  }
}
.footer--pagetop {
  width: 22.2666666667vw;
  margin: 0 auto 10vw;
  position: absolute;
  top: 0;
  right: 38.9333333333vw;
  z-index: 2;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--pagetop:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--pagetop {
    width: 7.467057101vw;
    margin: 0;
    top: 2.5622254758vw;
    right: 1.4641288433vw;
  }
}
.footer--bnr {
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 0.8vw 0.8vw;
  background-image: url("../data/webp/common/bg_bnr.png.webp");
  padding: 4.6666666667vw 1.3333333333vw 8.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .footer--bnr {
    background-size: 0.2196193265vw 0.2196193265vw;
    padding: 1.317715959vw 3.6603221083vw 2.196193265vw;
  }
}
.footer--bnr-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 767px) {
  .footer--bnr-list:has(.footer--bnr-list__item:nth-of-type(5):last-child) {
    padding: 0 19.7657393851vw;
  }
}
@media only screen and (min-width: 767px) and (min-width: 767px) {
  .footer--bnr-list:has(.footer--bnr-list__item:nth-of-type(9)) .footer--bnr-list__item {
    width: 16.3250366032vw;
    flex-basis: 16.3250366032vw;
    margin: 0.878477306vw 0.439238653vw 0;
  }
}
.footer--bnr-list__item {
  width: 44vw;
  margin: 4vw 2vw 0;
}
@media only screen and (min-width: 767px) {
  .footer--bnr-list__item {
    width: 19.2532942899vw;
    flex-basis: 19.2532942899vw;
    margin: 0.878477306vw 0.439238653vw 0;
  }
}
.footer--bnr-list__item a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--bnr-list__item a:hover {
    opacity: 0.8;
  }
}
.footer--contents {
  background-color: #262626;
}
.footer--btn {
  background-color: #2b2b2b;
  text-align: center;
  padding: 8vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .footer--btn {
    padding: 2.196193265vw 0 2.7086383602vw;
  }
}
.footer--btn__tit {
  font-size: 5.8666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  letter-spacing: 0.1em;
}
@media only screen and (min-width: 767px) {
  .footer--btn__tit {
    font-size: 1.756954612vw;
  }
}
.footer--btn__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2.9333333333vw;
  margin: 5.0666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .footer--btn__list {
    justify-content: center;
    column-gap: 0;
    margin: 1.6105417277vw 0 0;
  }
}
.footer--btn__item {
  height: 12.6666666667vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--btn__item:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--btn__item {
    height: 3.513909224vw;
    margin-right: 1.317715959vw;
  }
}
.footer--btn__item:last-child {
  height: 13.6vw;
  margin-top: 2.8vw;
}
@media only screen and (min-width: 767px) {
  .footer--btn__item:last-child {
    height: 3.6603221083vw;
    margin-top: 0;
  }
}
.footer--btn__item img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.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;
    top: 0;
    right: 0;
  }
}
.footer--contact-tit {
  font-size: 4.8vw;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  margin: 0 0 4.2666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@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;
  position: relative;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@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.steam:before {
  display: block;
  content: "";
  background-color: #fff;
}
.footer--contact-btn__item.ko-list:before {
  display: block;
  content: "";
  background-color: #5c5c5c;
}
.footer--contact-btn__item a {
  background-color: #000;
  width: 100%;
  height: 100%;
  font-size: 3.7333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  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;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2.9333333333vw;
  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;
    column-gap: 0;
  }
}
.footer--spec-btn__item {
  height: 12.6666666667vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn__item:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn__item {
    height: 3.513909224vw;
    margin-right: 1.317715959vw;
  }
}
.footer--spec-btn__item:last-child {
  height: 13.6vw;
  margin-top: 2.8vw;
}
@media only screen and (min-width: 767px) {
  .footer--spec-btn__item:last-child {
    height: 3.6603221083vw;
    margin-top: 0;
  }
}
.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-size: 2.4vw;
  text-align: center;
  color: #000;
  padding: 1.6vw 2.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@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-size: 2.9333333333vw;
  margin: 0 0 0 3.3333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@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-size: 2.4vw;
  color: #9d9d9d;
  line-height: 1.25;
  display: block;
  padding-top: 2vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@media only screen and (min-width: 767px) {
  .footer--spec-attention span {
    font-size: 0.7320644217vw;
    padding-top: 0.2196193265vw;
  }
}
.footer--sns {
  background-color: #2b2b2b;
  padding: 8vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8vw;
}
@media only screen and (min-width: 767px) {
  .footer--sns {
    background-color: #181818;
    padding: 2.5622254758vw 0;
    gap: 0 1.5373352855vw;
  }
}
.footer--sns__item {
  flex-basis: 10.4vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .footer--sns__item {
    flex-basis: 2.8550512445vw;
  }
}
.footer--copyright {
  background-color: #000;
  text-align: center;
  padding: 9.3333333333vw 0 12vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright {
    font-size: 0.7320644217vw;
    padding: 2.0497803807vw 0 3.074670571vw;
  }
}
.footer--copyright-icon {
  display: flex;
  flex-direction: row;
  column-gap: 5.8666666667vw;
  justify-content: center;
  margin-bottom: 4.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright-icon {
    column-gap: 1.1713030747vw;
    margin-bottom: 1.6105417277vw;
  }
}
.footer--copyright-icon__cero {
  width: 14.5333333333vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright-icon__cero {
    width: 3.1478770132vw;
  }
}
.footer--copyright-icon__teen {
  width: 30.4vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright-icon__teen {
    width: 6.4421669107vw;
  }
}
.footer--copyright-icon__age {
  width: 14.5333333333vw;
}
@media only screen and (min-width: 767px) {
  .footer--copyright-icon__age {
    width: 3.1478770132vw;
  }
}
.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: 20.8vw 5.3333333333vw 14.6666666667vw;
  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 rgb(0, 0, 0);
  line-height: 0.75;
}
@media only screen and (min-width: 767px) {
  .container--title-text {
    font-size: 2.196193265vw;
    text-shadow: 0 0.439238653vw 0 rgb(0, 0, 0);
  }
}
.container--title-text__small {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 6.1333333333vw;
  letter-spacing: 0.08em;
  text-shadow: 0 0.8vw 0 rgb(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .container--title-text__small {
    font-size: 2.196193265vw;
    text-shadow: 0 0.439238653vw 0 rgb(0, 0, 0);
  }
}
.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;
  }
}
@media only screen and (min-width: 767px) {
  .container--contents.steam {
    padding: 0;
  }
}
.container--contents.webstore {
  padding: 27.2vw 0 30vw;
}
@media only screen and (min-width: 767px) {
  .container--contents.webstore {
    margin-top: 2.196193265vw;
    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: 12.1522693997vw 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;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--webstore {
    position: absolute;
    transition: 0.3s;
    top: 31.0395314788vw;
    right: 1.9765739385vw;
    width: 26.9399707174vw;
  }
  .top-main--webstore:hover {
    opacity: 0.8;
  }
}
.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-large_sp.png.webp");
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4.8vw 0 4vw;
  margin: -4.1333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list {
    background-image: url("../data/webp/top/main/bg_store-btn-large.png.webp");
    padding: 1.6105417277vw 0 1.6105417277vw;
    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:last-child {
  margin-top: 1.8666666667vw;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item:last-child {
    margin-top: 0.5124450952vw;
  }
}
.top-main--store-list__item:last-child a {
  height: 12.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .top-main--store-list__item:last-child a {
    height: 3.7335285505vw;
  }
}
.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: 0.9516837482vw 0 0;
    z-index: 2;
  }
}
.top-main--pickup-text {
  position: absolute;
  left: 0;
  top: -8.6666666667vw;
}
@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 {
    display: none;
  }
}
.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: 8.6666666667vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-main--slide {
    background-image: url("../data/webp/character/ui/bg_border.jpg.webp");
    background-size: 0.2196193265vw;
    border-bottom: #0fabd0 0.2928257687vw solid;
    width: 100%;
    padding: 0 2.3792093704vw;
    margin: 1.317715959vw 0 0;
  }
  .top-main--slide:not(:has(.top-main--slide-item:nth-child(5))) .top-main--slide-wrap {
    display: flex;
    justify-content: center;
  }
  .top-main--slide:not(:has(.top-main--slide-item:nth-child(5))) .swiper-button-prev,
  .top-main--slide:not(:has(.top-main--slide-item:nth-child(5))) .swiper-button-next {
    opacity: 0;
    pointer-events: none;
  }
}
.top-main--slide-list {
  padding: 0 0 5.3333333333vw;
  overflow: visible;
}
@media only screen and (min-width: 767px) {
  .top-main--slide-list {
    padding: 1.0980966325vw 0;
  }
}
.top-main--slide-item {
  filter: brightness(50%);
}
@media only screen and (min-width: 767px) {
  .top-main--slide-item {
    width: 22.6939970717vw !important;
    margin: 0 0.5490483163vw !important;
  }
}
.top-main--slide-item a {
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
  pointer-events: none;
}
@media only screen and (min-width: 767px) {
  .top-main--slide-item a:hover {
    opacity: 0.8;
  }
}
@media only screen and (max-width: 767px) {
  .top-main--slide .swiper-slide-active {
    filter: brightness(100%);
  }
  .top-main--slide .swiper-slide-active a {
    pointer-events: auto;
  }
}
@media only screen and (min-width: 767px) {
  .top-main--slide .swiper-slide.is-visible {
    filter: brightness(100%);
  }
  .top-main--slide .swiper-slide.is-visible a {
    pointer-events: auto;
  }
  .top-main--slide .swiper-slide-prev, .top-main--slide .swiper-slide-next {
    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: -2.196193265vw;
  }
}
.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: -2.196193265vw;
  }
}
.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");
  }
}

.top-main--mv-img__11 {
  background-image: url("../data/webp/top/main/mainvisual_11.png.webp");
}
@media only screen and (min-width: 767px) {
  .top-main--mv-img__11 {
    background-image: url("../data/webp/top/main/mainvisual_11_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_v2.png.webp");
    clip-path: polygon(0 13.8%, 100% 2.6%, 100% 100%, 0 100%);
    padding: 93.3333333333vw 0 10.6666666667vw;
    margin-top: -97.6vw;
  }
  .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");
    background-position: 0 6.1333333333vw;
    width: 100%;
    padding: 10.4vw 0 11.2vw;
  }
  .top-menu--list-item {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    width: 97.3333333333vw;
    height: 14vw;
    margin: 0.6666666667vw 0 0 2.6666666667vw;
  }
  .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.steam {
    background-image: url("../data/webp/common/header/list_steam.png.webp");
  }
  .top-menu--list-item.webstore {
    background-image: url("../data/webp/common/header/list_store.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 rgb(0, 0, 0);
    letter-spacing: 0.1em;
    padding: 0 10.4vw 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
  }
  .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: 10.4vw;
  }
}

.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: 29.3333333333vw 0 0;
  margin-top: -23.0666666667vw;
  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%);
  }
}
@media only screen and (min-width: 767px) {
  .top-about--feature-read {
    position: relative;
    z-index: 2;
  }
}
.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: 34vw;
  height: 31.8666666667vw;
  top: 16.1333333333vw;
  left: 25.2vw;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara4-l {
    width: 18.8140556369vw;
    height: 17.7159590044vw;
    top: 9.8828696925vw;
    left: 33.3089311859vw;
  }
}
.top-about--feature-chara__item.item-chara4-r {
  width: 35.2vw;
  height: 36.5333333333vw;
  top: 16.9333333333vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara4-r {
    width: 22.4743777452vw;
    height: 20.2781844802vw;
    top: 8.4187408492vw;
    right: 23.6456808199vw;
  }
}
.top-about--feature-chara__item.item-chara3-l {
  width: 68.8vw;
  height: 53.6vw;
  top: 24.2666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara3-l {
    width: 40.4831625183vw;
    height: 29.7218155198vw;
    top: 11.859443631vw;
    left: 14.2752562225vw;
  }
}
.top-about--feature-chara__item.item-chara3-r {
  width: 40.8vw;
  height: 96.2666666667vw;
  top: 6.5333333333vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara3-r {
    width: 39.7510980966vw;
    height: 53.3674963397vw;
    top: -2.9282576867vw;
    right: 2.5622254758vw;
  }
}
.top-about--feature-chara__item.item-chara2-l {
  width: 61.0666666667vw;
  height: 76.2666666667vw;
  top: 38.1333333333vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara2-l {
    width: 39.6046852123vw;
    height: 42.3865300146vw;
    top: 15.7393850659vw;
    left: 1.0980966325vw;
  }
}
.top-about--feature-chara__item.item-chara2-r {
  width: 47.0666666667vw;
  height: 62.2666666667vw;
  top: 30vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara2-r {
    width: 28.1112737921vw;
    height: 34.4802342606vw;
    top: 13.0307467057vw;
    right: 23.9385065886vw;
  }
}
.top-about--feature-chara__item.item-chara1-l {
  width: 55.7333333333vw;
  height: 170.8vw;
  top: 6.6666666667vw;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara1-l {
    width: 53.8799414348vw;
    height: 70.4978038067vw;
    top: -3.8799414348vw;
  }
}
.top-about--feature-chara__item.item-chara1-r {
  width: 56.9333333333vw;
  height: 162vw;
  top: 4.6666666667vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-about--feature-chara__item.item-chara1-r {
    width: 50vw;
    height: 74.8901903367vw;
    top: -8.345534407vw;
  }
}
.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-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;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.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-size: 5.3333333333vw;
  letter-spacing: 0.04em;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  padding-right: 6.6666666667vw;
  margin-left: 6.6666666667vw;
  position: relative;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .top-howto--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    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-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;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.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;
  letter-spacing: 0.04em;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  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: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    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;
    position: relative;
    z-index: 1;
  }
}
.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 {
  transform: translate3d(-50%, -50%, 0) skewY(12deg);
  width: 125%;
  height: auto;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@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-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;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.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 {
  position: relative;
  font-size: 5.3333333333vw;
  letter-spacing: 0.04em;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  padding-right: 6.6666666667vw;
  margin-left: 6.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .top-stage--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    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-policy {
  background-color: #353535;
  padding: 7.3333333333vw 0 10vw;
}
@media only screen and (min-width: 767px) {
  .top-policy {
    padding: 2.196193265vw 0 2.9282576867vw;
    position: relative;
  }
}
.top-policy--tit {
  font-size: 4.8vw;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  margin: 0 0 4.2666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .top-policy--tit {
    font-size: 1.317715959vw;
    margin: 0 0 1.317715959vw;
  }
}
@media only screen and (min-width: 767px) {
  .top-policy--btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.top-policy--btn__item {
  width: 78.6666666667vw;
  height: 13.8666666667vw;
  margin: 3.7333333333vw auto 0;
  position: relative;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .top-policy--btn__item:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .top-policy--btn__item {
    width: 21.5959004392vw;
    height: 3.8067349927vw;
    margin: 0 0.8052708638vw;
  }
}
.top-policy--btn__item a {
  background-color: #000;
  width: 100%;
  height: 100%;
  font-size: 3.7333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .top-policy--btn__item a {
    font-size: 1.0248901903vw;
  }
}

.top-steam {
  background-color: #000;
  clip-path: polygon(0 11.5%, 100% 0, 100% 88.5%, 0% 100%);
  height: 138.4vw;
  margin: -22.6666666667vw 0 0;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .top-steam {
    clip-path: polygon(0 36%, 100% 1%, 100% 62.5%, 0% 97%);
    height: 61.420204978vw;
    margin: -22.1083455344vw 0 0;
  }
}
.top-steam--inner {
  background-position: 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% auto;
  background-image: url("../data/webp/top/bg_steam.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(140.8vw - 4.5333333333vw);
  padding: 14.6666666667vw 0 0;
  margin: 0.9333333333vw 0;
  position: relative;
}
.top-steam--inner:before {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  top: 6.9333333333vw;
  right: 0;
  width: 96.9333333333vw;
  height: 103.2vw;
  background-position: 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% auto;
  background-image: url("../data/webp/top/bg_steam_circle.png.webp");
  z-index: 0;
}
@media only screen and (min-width: 767px) {
  .top-steam--inner:before {
    z-index: -1;
    width: 58.345534407vw;
    height: 62.737920937vw;
    background-image: url("../data/webp/top/bg_steam_circle_pc.png.webp");
    background-repeat: no-repeat, repeat;
    background-size: 100% auto;
    top: 0vw;
    left: 0vw;
    right: auto;
  }
}
@media only screen and (min-width: 767px) {
  .top-steam--inner {
    background-position: right 0, 0 0;
    background-image: url("../data/webp/top/bg_steam_pc.png.webp"), url("../data/webp/common/bg.jpg.webp");
    background-size: cover, 32.2840409956vw auto;
    clip-path: polygon(0 calc(35% + 0.6588579795vw), 100% 0, 100% calc(65% - 0.6588579795vw), 0% 100%);
    height: calc(59.9560761347vw - 1.317715959vw);
    padding: 24.8901903367vw 0 0;
    margin: 0.439238653vw 0;
  }
  .top-steam--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: 19.0336749634vw;
    left: -3.6603221083vw;
    transform: rotate(-12deg);
    z-index: 3;
  }
}
.top-steam--tit {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 767px) {
  .top-steam--tit {
    width: 43.9238653001vw;
    z-index: 6;
  }
}
.top-steam--tit__pic {
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .top-steam--tit__pic {
    width: 100%;
  }
}
.top-steam--tit__bg {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 767px) {
  .top-steam--tit__bg {
    display: none;
  }
}
.top-steam--icon {
  position: absolute;
  z-index: 2;
  width: 40.1333333333vw;
  height: 40.5333333333vw;
  top: -17.3333333333vw;
  right: 0;
}
@media only screen and (min-width: 767px) {
  .top-steam--icon {
    z-index: 6;
    width: 16.9106881406vw;
    height: 19.6193265007vw;
    top: auto;
    right: auto;
    bottom: -19.1800878477vw;
    left: 0;
  }
}
.top-steam--line {
  width: 50vw;
  position: absolute;
  top: 34.6266471449vw;
  left: 0;
  z-index: 5;
}
.top-steam--btn {
  position: absolute;
  background-image: url("../data/webp/common/bg_btn_v2_sp.png.webp");
  width: 60vw;
  height: 13.3333333333vw;
  padding: 0 0.8vw 0.2666666667vw;
  margin: 45.6vw auto 0;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.top-steam--btn .bg-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
.top-steam--btn .bg-img.on {
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .top-steam--btn:hover .bg-img.on {
    opacity: 1;
  }
  .top-steam--btn:hover .bg-img.off {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .top-steam--btn {
    background-size: 100% auto;
    background-image: url("../data/webp/common/bg_btn_v2.png.webp");
    width: 23.9385065886vw;
    height: 5.6368960469vw;
    padding: 0 1.317715959vw 0;
    margin: -8.0527086384vw 0 0 18.8872620791vw;
    transform: rotate(-12deg);
    z-index: 6;
  }
  .top-steam--btn:hover .top-steam--btn-text:before {
    right: -0.5124450952vw;
  }
}
.top-steam--btn-text {
  position: relative;
  font-size: 5.3333333333vw;
  letter-spacing: 0.04em;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  padding-right: 7.3333333333vw;
  margin: -1.3333333333vw 0 0 4.8vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .top-steam--btn-text {
    font-size: 2.196193265vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    padding-right: 2.9282576867vw;
    margin: -0.5856515373vw 0 0;
  }
}
.top-steam--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.9333333333vw);
}
@media only screen and (min-width: 767px) {
  .top-steam--btn-text:before {
    width: 1.9033674963vw;
    height: 2.3426061493vw;
    top: calc(50% + 0.3660322108vw);
    transition: 0.3s;
  }
}
.top-steam--btn-smalltext {
  position: relative;
  font-size: 4vw;
  letter-spacing: 0.04em;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 767px) {
  .top-steam--btn-smalltext {
    font-size: 1.4641288433vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
  }
}
.top-steam--movie {
  position: absolute;
  top: 52.8vw;
  width: 92.2666666667vw;
  height: 52vw;
  right: 3.8666666667vw;
  overflow: hidden;
  box-shadow: 0.5333333333vw 0.4vw #00a8ff;
  border: 1.0666666667vw solid #000;
  background-color: #000;
}
@media only screen and (min-width: 767px) {
  .top-steam--movie {
    width: 44.289897511vw;
    height: 24.8901903367vw;
    top: 12.5915080527vw;
    right: 8.8579795022vw;
    box-shadow: 0.2928257687vw 0.2196193265vw #00a8ff;
    border: 0.5856515373vw solid #000;
    z-index: 5;
  }
}
.top-steam--movie video {
  width: calc(100% + 0.5333333333vw);
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 767px) {
  .top-steam--movie video {
    width: calc(100% + 0.5856515373vw);
  }
}

.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, rgb(0, 0, 0) 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, rgb(255, 138, 0) 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, rgb(0, 0, 0) 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, rgb(255, 138, 0) 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 rgb(0, 0, 0);
  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 rgb(0, 0, 0);
    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%, rgb(0, 0, 0) 100%);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4vw;
  text-shadow: 0 0.4vw 0 rgb(0, 0, 0);
  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 rgb(0, 0, 0);
    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 rgb(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .chara-main--data-name span {
    font-size: 3.6603221083vw;
    text-shadow: 0 0.5856515373vw 0 rgb(0, 0, 0);
    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], .chara-main--type-list__item[data-color=red-gb] {
  background-color: #932c21;
}
.chara-main--type-list__item[data-color=green], .chara-main--type-list__item[data-color=green-rb] {
  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: none;
    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] span:before,
.chara-main.ja .chara-main--type-list__item[data-type=at-mix] 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] span:before,
.chara-main.ja .chara-main--type-list__item[data-type=df-mix] span:before {
  content: "ディフェンダー";
}
.chara-main.en .chara-main--type-list__item[data-type=at] span:before,
.chara-main.en .chara-main--type-list__item[data-type=at-mix] 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] span:before,
.chara-main.en .chara-main--type-list__item[data-type=df-mix] 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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
  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 rgb(0, 0, 0), 0.0732064422vw 0.1464128843vw 0 rgb(0, 0, 0), 0 -0.0732064422vw 0 rgb(0, 0, 0);
    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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .stage-main--title span {
    font-size: 2.9282576867vw;
    text-shadow: 0 0.2928257687vw 0 rgb(0, 0, 0);
  }
}
.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: none;
  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-prev,
.stage-main .swiper-button-next {
  width: 9.0666666667vw;
  height: 7.8666666667vw;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .stage-main .swiper-button-prev,
  .stage-main .swiper-button-next {
    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-prev,
  .js--animeend .stage-main .swiper-button-next {
    transition: 0.3s;
    transition-delay: 0s;
  }
  .js--animeend .stage-main .swiper-button-prev:hover,
  .js--animeend .stage-main .swiper-button-next:hover {
    opacity: 0.7;
  }
}
.js--animeend .stage-main .swiper-button-prev.swiper-button-disabled,
.js--animeend .stage-main .swiper-button-next.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--prev, .stage-ui--next {
  width: 50%;
  height: 12vw;
}
@media only screen and (min-width: 767px) {
  .stage-ui--prev, .stage-ui--next {
    width: 20.5710102489vw;
    height: 5.1244509517vw;
    transition: 0.3s;
  }
}
.stage-ui--prev a, .stage-ui--next 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--prev a, .stage-ui--next a {
    padding: 0 2.9282576867vw 0.439238653vw;
  }
}
.stage-ui--prev span, .stage-ui--next 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--prev span, .stage-ui--next 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 rgb(0, 0, 0), 0.4vw 0.9333333333vw 0 rgb(0, 0, 0), 0 -0.4vw 0 rgb(0, 0, 0);
  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 rgb(0, 0, 0);
  }
}

.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, rgb(15, 171, 208) 49%, rgb(255, 156, 0) 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-prev,
.howto-slide--chara .swiper-button-next {
  width: 5.7333333333vw;
  height: 5.4666666667vw;
  top: 11.4666666667vw;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .howto-slide--chara .swiper-button-prev,
  .howto-slide--chara .swiper-button-next {
    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, rgb(24, 24, 24) 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, rgb(15, 171, 208) 49%, rgb(255, 156, 0) 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, rgb(27, 27, 27) 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: 17.3333333333vw auto 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .howto-ele--img {
    width: 30.3806734993vw;
    background: none;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    top: calc(50% + 2.5622254758vw);
    left: 7.6134699854vw;
    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: 62.6666666667vw 5.3333333333vw 10vw;
  margin: -51.7333333333vw 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;
}
.howto-ele--text .type-white {
  color: #edd7b9;
}
.howto-ele--text .type-black {
  color: #8b7fae;
}
@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 6.2225475842vw 3.074670571vw 39.1654465593vw;
    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, rgb(15, 171, 208) 49%, rgb(255, 156, 0) 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 300ms;
  }
  .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::before, .interview-header::after {
    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: 0px 0.8vw 0px rgb(0, 0, 0);
  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: 0px 6px 0px rgb(0, 0, 0);
    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::before, .interview-contents--main-subtit::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 0.8vw;
  height: 50%;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-subtit::before, .interview-contents--main-subtit::after {
    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::before, .interview-contents--main-tit::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 0.8vw;
}
@media only screen and (min-width: 767px) {
  .interview-contents--main-tit::before, .interview-contents--main-tit::after {
    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 300ms;
    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: 0px 0.5333333333vw 0px rgb(0, 0, 0);
}
@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: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    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 300ms;
  }
}

.guideline {
  position: relative;
}
.guideline .container--contents {
  padding: 41.3333333333vw 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;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .guideline .container--contents {
    background-image: url("../data/webp/common/bg_container_line_pc.png.webp");
    padding: 8.5651537335vw 0 3.6603221083vw;
    margin: 0;
  }
}
.guideline-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.4vw;
}
@media only screen and (min-width: 767px) {
  .guideline-logo {
    width: 14.7877013177vw;
  }
}
.guideline-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 767px) {
  .guideline-logo a {
    transition: opacity 300ms;
  }
  .guideline-logo a:hover {
    opacity: 0.8;
  }
}
.guideline-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) {
  .guideline-contents {
    width: 87.8477306003vw;
    margin: 0 auto;
    padding: 3.6603221083vw 7.3206442167vw 3.6603221083vw;
    font-size: 1.4641288433vw;
    line-height: 2.3426061493vw;
  }
}
.guideline-contents--main-tit {
  position: relative;
  padding-bottom: 4.5333333333vw;
  font-size: 5.3333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 6.6666666667vw;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main-tit {
    padding-bottom: 1.756954612vw;
    font-size: 2.635431918vw;
    line-height: 2.9282576867vw;
    letter-spacing: 0.08;
  }
}
.guideline-contents--main-tit::before, .guideline-contents--main-tit::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 0.8vw;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main-tit::before, .guideline-contents--main-tit::after {
    height: 0.2928257687vw;
  }
}
.guideline-contents--main-tit::before {
  background: #00a8ff;
  left: 0;
}
.guideline-contents--main-tit::after {
  background: #ff9c00;
  right: 0;
}
.guideline-contents--main-subtit {
  font-size: 4.6666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 1.3428571429;
  letter-spacing: 0;
  text-indent: -1em;
  padding-left: 1em;
  margin: 8.6666666667vw 0 4.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main-subtit {
    font-size: 2.196193265vw;
    margin: 2.9282576867vw 0 2.196193265vw;
  }
}
.guideline-contents--main-text {
  font-size: 3.7333333333vw;
  line-height: 1.5357142857;
  margin: 5.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main-text {
    font-size: 1.4641288433vw;
    line-height: 1.6;
    margin: 2.196193265vw 0 0;
  }
}
.guideline-contents--main-text.right {
  text-align: right;
}
.guideline-contents--main-text p {
  text-indent: -1em;
  padding-left: 1em;
}
.guideline-contents--main-text p small {
  font-size: 3.2vw;
  display: block;
  line-height: 1.65;
  text-indent: -2.5em;
  padding-left: 2.5em;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main-text p small {
    font-size: 1.1713030747vw;
  }
}
.guideline-contents--main a {
  color: #00a8ff;
  text-decoration: underline;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--main a:hover {
    text-decoration: none;
  }
}
.guideline-contents--faq-tit {
  background-color: #2c2c2c;
  width: 100%;
  height: 12vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 10.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--faq-tit {
    height: 4.39238653vw;
    margin: 4.39238653vw 0 0;
  }
}
.guideline-contents--faq-tit span {
  font-size: 5.3333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 6.6666666667vw;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--faq-tit span {
    font-size: 2.196193265vw;
    line-height: 2.9282576867vw;
    letter-spacing: 0.08;
  }
}
.guideline-contents--faq-item {
  font-size: 3.7333333333vw;
  line-height: 1.5357142857;
  margin: 5.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--faq-item {
    font-size: 1.4641288433vw;
    line-height: 1.6;
    margin: 2.196193265vw 0 0;
  }
}
.guideline-contents--faq-item dt {
  font-weight: bold;
  text-indent: -1em;
  padding-left: 1em;
}
.guideline-contents--faq-item dd {
  text-indent: -1em;
  padding-left: 1em;
}
.guideline-contents--faq-item span {
  text-indent: -1em;
  padding-left: 1em;
  display: block;
}
.guideline-contents--faq a {
  color: #00a8ff;
  text-decoration: underline;
}
@media only screen and (min-width: 767px) {
  .guideline-contents--faq a:hover {
    text-decoration: none;
  }
}
.guideline-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) {
  .guideline-btn--return {
    width: 44.2166910688vw;
    height: 5.6368960469vw;
    margin: 3.6603221083vw auto 0;
    background-image: url("../img/interview/btn_return_pc.png");
  }
  .guideline-btn--return:hover::before {
    opacity: 1;
  }
  .guideline-btn--return:hover a::after {
    transform: translate3d(25%, -52%, 0);
  }
  .guideline-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 300ms;
    z-index: 1;
  }
}
.guideline-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: 0px 0.5333333333vw 0px rgb(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .guideline-btn--return a {
    justify-content: start;
    padding: 1.0980966325vw 0 0 4.831625183vw;
    line-height: 2.9282576867vw;
    font-size: 1.4641288433vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    z-index: 2;
  }
}
.guideline-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) {
  .guideline-btn--return a::after {
    width: 1.756954612vw;
    height: 2.3426061493vw;
    right: 3.513909224vw;
    transition: transform 300ms;
  }
}

.observer {
  position: relative;
}
.observer .container--contents {
  padding: 41.3333333333vw 0 26.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;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .observer .container--contents {
    background-image: url("../data/webp/common/bg_container_line_pc.png.webp");
    padding: 8.5651537335vw 0 3.6603221083vw;
    margin: 0;
  }
}
.observer-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 72.4vw;
}
@media only screen and (min-width: 767px) {
  .observer-logo {
    width: 14.7877013177vw;
  }
}
.observer-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 767px) {
  .observer-logo a {
    transition: opacity 300ms;
  }
  .observer-logo a:hover {
    opacity: 0.8;
  }
}
.observer-contents {
  padding: 9.3333333333vw 0 13.3333333333vw;
  background: #1b1b1b;
  font-size: 3.7333333333vw;
  line-height: 5.7333333333vw;
}
@media only screen and (min-width: 767px) {
  .observer-contents {
    width: 87.8477306003vw;
    margin: 0 auto;
    padding: 3.6603221083vw 0 3.6603221083vw;
    font-size: 1.4641288433vw;
    line-height: 2.3426061493vw;
  }
}
.observer-contents--tit {
  width: 100%;
  position: relative;
  padding-bottom: 10vw;
  font-size: 4.2666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .observer-contents--tit {
    width: calc(100% - 14.6412884334vw);
    padding-bottom: 2.9282576867vw;
    font-size: 2.635431918vw;
    line-height: 2.9282576867vw;
    letter-spacing: 0.08;
  }
}
.observer-contents--tit::before, .observer-contents--tit::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 0.8vw;
}
@media only screen and (min-width: 767px) {
  .observer-contents--tit::before, .observer-contents--tit::after {
    height: 0.2928257687vw;
  }
}
.observer-contents--tit::before {
  background: #00a8ff;
  left: 0;
}
.observer-contents--tit::after {
  background: #ff9c00;
  right: 0;
}
.observer-contents--subtit {
  background: linear-gradient(90deg, rgba(255, 138, 0, 0.05) 0%, rgb(255, 138, 0) 40%, rgb(255, 138, 0) 60%, rgba(255, 138, 0, 0.05) 100%);
  width: 100%;
  padding: 1.0666666667vw 2.6666666667vw 2.9333333333vw;
  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 1.0666666667vw 0 #000;
  text-align: center;
  margin: 12.6666666667vw auto 6.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .observer-contents--subtit {
    background: linear-gradient(90deg, rgba(255, 138, 0, 0.05) 0%, rgb(255, 138, 0) 40%, rgb(255, 138, 0) 60%, rgba(255, 138, 0, 0.05) 100%);
    width: calc(100% - 7.3206442167vw);
    padding: 0.5856515373vw 0.7320644217vw 1.1713030747vw;
    font-size: 2.0497803807vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    margin: 4.0263543192vw auto 1.756954612vw;
  }
}
.observer-contents--subtit__pic {
  width: 48.2666666667vw;
  height: 22.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .observer-contents--subtit__pic {
    width: 14.494875549vw;
    height: 6.8814055637vw;
  }
}
.observer-contents--read {
  font-size: 3.7333333333vw;
  line-height: 1.5357142857;
  padding: 0 3.7333333333vw;
  margin: 10vw 0 0;
}
@media only screen and (min-width: 767px) {
  .observer-contents--read {
    font-size: 1.4641288433vw;
    line-height: 1.6;
    margin: 2.196193265vw 0 0;
    text-align: center;
  }
}
.observer-contents--img {
  width: 89.3333333333vw;
  margin: 8vw auto 0;
}
@media only screen and (min-width: 767px) {
  .observer-contents--img {
    width: 73.2064421669vw;
    margin: 2.3426061493vw auto 0;
  }
}
.observer-contents--text {
  font-size: 3.7333333333vw;
  line-height: 1.5357142857;
  padding: 0 3.7333333333vw;
  margin: 6vw 0 0;
}
@media only screen and (min-width: 767px) {
  .observer-contents--text {
    font-size: 1.4641288433vw;
    line-height: 1.6;
    margin: 2.196193265vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .observer-contents--text.pc-center {
    text-align: center;
  }
}
.observer-contents--text em {
  font-style: normal;
  font-weight: bold;
}
.observer-contents--text a {
  color: #00a8ff;
  text-decoration: underline;
}
@media only screen and (min-width: 767px) {
  .observer-contents--text a:hover {
    text-decoration: none;
  }
}
.observer-contents--text > p {
  letter-spacing: -0.025rem;
  margin: 3.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .observer-contents--text > p {
    margin: 1.6105417277vw 0 0;
  }
}
.observer-contents--text > p small {
  font-size: 3.2vw;
  display: inline-block;
  line-height: 1.65;
  padding-left: 1em;
}
@media only screen and (min-width: 767px) {
  .observer-contents--text > p small {
    font-size: 1.1713030747vw;
  }
}
.observer-contents--link {
  margin: 8vw 0 0;
}
@media only screen and (min-width: 767px) {
  .observer-contents--link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 4.39238653vw 0 0;
  }
}
.observer-contents--link-item {
  width: 68vw;
  height: 12vw;
  margin: 4.6666666667vw auto 0;
  position: relative;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .observer-contents--link-item:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .observer-contents--link-item {
    width: 21.5959004392vw;
    height: 3.8067349927vw;
    margin: 0 0.8052708638vw;
  }
}
.observer-contents--link-item:before {
  display: block;
  content: "";
  background-color: #fff;
  width: 68vw;
  height: 12vw;
  position: absolute;
  right: -0.4vw;
  bottom: -0.4vw;
}
@media only screen and (min-width: 767px) {
  .observer-contents--link-item:before {
    width: 21.5959004392vw;
    height: 3.8067349927vw;
    right: -0.1464128843vw;
    bottom: -0.1464128843vw;
  }
}
.observer-contents--link-item a {
  background-color: #000;
  width: 100%;
  height: 100%;
  font-size: 3.2vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .observer-contents--link-item a {
    font-size: 1.0248901903vw;
  }
}
.observer-contents--btn {
  position: relative;
  width: 89.3333333333vw;
  height: 16.6666666667vw;
  margin: 8.6666666667vw auto 0;
  background: url("../data/webp/observer/btn.png.webp") no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 767px) {
  .observer-contents--btn {
    background-image: url("../data/webp/observer/btn_pc.png.webp");
    width: 30.2342606149vw;
    height: 5.6368960469vw;
    margin: 3.6603221083vw auto 0;
  }
  .observer-contents--btn:hover::before {
    opacity: 1;
  }
  .observer-contents--btn:hover a::after {
    transform: translate3d(25%, -52%, 0);
  }
  .observer-contents--btn::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("../data/webp/observer/btn_pc_on.png.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 300ms;
    z-index: 1;
  }
}
.observer-contents--btn a {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  line-height: 15.2vw;
  text-align: center;
  justify-content: center;
}
@media only screen and (min-width: 767px) {
  .observer-contents--btn a {
    line-height: 4.9048316252vw;
    z-index: 2;
  }
}
.observer-contents--btn a span {
  color: #fff;
  font-size: 5.3333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .observer-contents--btn a span {
    font-size: 2.196193265vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
  }
}
.observer-contents--btn a::after {
  content: "";
  display: block;
  position: absolute;
  width: 3.8666666667vw;
  height: 4.8vw;
  background: url("../data/webp/observer/icon_arrow.png.webp") 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) {
  .observer-contents--btn a::after {
    width: 1.756954612vw;
    height: 2.3426061493vw;
    right: 3.513909224vw;
    transition: transform 300ms;
  }
}
.observer .mfp-bg {
  background-color: #262626;
  opacity: 0.85;
}
.observer .observer-modal {
  width: 89.3333333333vw;
  margin: 0 auto;
  color: #fff;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal {
    width: 53.4407027818vw;
    max-width: 730px;
  }
}
.observer .observer-modal__inner {
  padding: 13.3333333333vw 0;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__inner {
    padding: 4.0263543192vw 0;
  }
}
.observer .observer-modal__title {
  font-size: 4.2666666667vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.375;
  margin-bottom: 8vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__title {
    font-size: 1.4641288433vw;
    margin-bottom: 2.5622254758vw;
  }
}
.observer .observer-modal__body {
  background: #000;
  border: 0.5333333333vw solid #6a6a6a;
  height: 70vh;
  padding: 3.3333333333vw 2vw 3.3333333333vw 4vw;
  font-size: 3.7333333333vw;
  line-height: 1.5714285714;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body {
    border: 0.2928257687vw solid #6a6a6a;
    font-size: 1.1713030747vw;
    line-height: 1.625;
    padding: 1.4641288433vw 1.0980966325vw 1.4641288433vw 2.196193265vw;
  }
}
.observer .observer-modal__body-scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 2vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body-scroll {
    padding-right: 1.0980966325vw;
  }
}
.observer .observer-modal__body-scroll::-webkit-scrollbar {
  width: 1.4666666667vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body-scroll::-webkit-scrollbar {
    width: 0.5856515373vw;
  }
}
.observer .observer-modal__body-scroll::-webkit-scrollbar-thumb {
  background-color: #6a6a6a;
  width: 1.4666666667vw;
  border-radius: 0.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body-scroll::-webkit-scrollbar-thumb {
    width: 0.5856515373vw;
    border-radius: 0.2928257687vw;
  }
}
.observer .observer-modal__body h3 {
  font-size: 4.4vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  margin: 5.3333333333vw 0 4vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body h3 {
    font-size: 1.3909224012vw;
    margin: 1.8301610542vw 0 1.0980966325vw;
  }
}
.observer .observer-modal__body ul {
  margin: 4vw 0 4vw;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body ul {
    margin: 0.3660322108vw 0 0.3660322108vw;
  }
}
.observer .observer-modal__body ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.observer .observer-modal__body a {
  color: #00a8ff;
  text-decoration: underline;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__body a:hover {
    text-decoration: none;
  }
}
.observer .observer-modal__close {
  background: url("../data/webp/observer/close.png.webp") no-repeat center center;
  background-size: contain;
  appearance: none;
  border: none;
  background-color: transparent;
  color: transparent;
  width: 7.6vw;
  height: 5.8666666667vw;
  cursor: pointer;
  top: 4.6666666667vw;
  right: 4vw;
  opacity: 1;
}
@media only screen and (min-width: 767px) {
  .observer .observer-modal__close {
    width: 2.5622254758vw;
    height: 1.9765739385vw;
    top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 300ms;
  }
  .observer .observer-modal__close:hover {
    opacity: 0.85;
  }
}

@media only screen and (min-width: 767px) {
  .steam-main {
    padding: 0 0 5.1244509517vw;
  }
}
.steam-main--bg {
  width: 100%;
  padding: 57.3333333333vw 0 0;
  margin: -60vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .steam-main--bg {
    padding: 6.588579795vw 0 0;
    margin: 0vw 0 0;
  }
}
.steam-main--img {
  width: 100%;
  height: 111.4666666667vw;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url("../data/webp/steam/main_bg.png.webp");
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 767px) {
  .steam-main--img {
    background-image: url("../data/webp/steam/main_bg_pc.png.webp");
    height: 21.9619326501vw;
  }
}
.steam-main--tit {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.steam-main--tit > p {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.2s;
}
.steam-main--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) {
  .steam-main--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%);
  }
}
.steam-main--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) {
  .steam-main--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%);
  }
}
.steam-main--tit img {
  position: relative;
  z-index: 2;
}

.steam-content {
  background-color: #1b1b1b;
  background-size: 8.5333333333vw;
  border-top: #000 0.9333333333vw solid;
  border-bottom: #ff8a00 0.9333333333vw solid;
  background-position: 0 0;
  padding: 0 0 12.6666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .steam-content {
    width: 88.2137628111vw;
    background-size: 2.3426061493vw;
    border-top: none;
    border-bottom: #ff8a00 0.3660322108vw solid;
    padding: 0 0 3.8799414348vw;
    margin: 10.0292825769vw auto 0;
  }
}
.steam-content--subtit {
  background: rgb(255, 138, 0);
  padding: 1.0666666667vw 2.6666666667vw 2.9333333333vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 7.4666666667vw;
  height: 13.3333333333vw;
  text-shadow: 0 1.0666666667vw 0 #000;
  margin: 11.7333333333vw 0 6.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--subtit {
    background: linear-gradient(90deg, rgba(255, 138, 0, 0.05) 0%, rgb(255, 138, 0) 40%, rgb(255, 138, 0) 60%, rgba(255, 138, 0, 0.05) 100%);
    padding: 0.5856515373vw 0.7320644217vw 1.1713030747vw;
    font-size: 2.0497803807vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    margin: 0 0 1.756954612vw;
    height: 3.6603221083vw;
  }
}
.steam-content--subtit__pic {
  width: 48.2666666667vw;
  height: 22.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--subtit__pic {
    width: 14.494875549vw;
    height: 6.8814055637vw;
  }
}
.steam-content--summary {
  background: linear-gradient(90deg, rgba(255, 138, 0, 0.5) 0%, rgba(255, 138, 0, 0.1) 20%, rgba(255, 138, 0, 0.05) 40%, rgba(255, 138, 0, 0) 50%, rgba(255, 138, 0, 0.05) 60%, rgba(255, 138, 0, 0.1) 80%, rgba(255, 138, 0, 0.5) 100%);
  padding: 7.2vw 2.6666666667vw 7.2vw;
  margin: 6.5333333333vw 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 6.6666666667vw;
  text-shadow: 0 0.5333333333vw 0 #000;
  line-height: 1.2;
}
@media only screen and (min-width: 767px) {
  .steam-content--summary {
    padding: 1.8301610542vw 0.7320644217vw;
    margin: 1.756954612vw 0 1.756954612vw;
    font-size: 1.756954612vw;
    text-shadow: 0 0.2928257687vw 0 #000;
  }
}
.steam-content--summary__orangetxt {
  color: #ff8a00;
  white-space: pre;
}
.steam-content--summary__pic {
  width: 48.2666666667vw;
  height: 22.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--summary__pic {
    width: 14.494875549vw;
    height: 6.8814055637vw;
  }
}
.steam-content--text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.8vw;
  line-height: 1.5;
  padding: 0 6vw;
  margin: 10.8vw 0 2.6666666667vw;
  text-align: center;
}
@media only screen and (min-width: 767px) {
  .steam-content--text {
    font-size: 1.4641288433vw;
    padding: 0 7.6866764275vw;
    margin: 1.0980966325vw 0;
  }
}
.steam-content--reference {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 2.6666666667vw;
  line-height: 4.2666666667vw;
  padding: 0 4.6666666667vw;
  margin: 2.6666666667vw 0;
  color: #9d9d9d;
  text-align: start;
}
@media only screen and (min-width: 767px) {
  .steam-content--reference {
    font-size: 0.878477306vw;
    padding: 0 7.6866764275vw;
    margin: 1.0980966325vw 0;
    line-height: 1.1713030747vw;
  }
}
.steam-content--reference.center {
  text-align: center;
}
.steam-content--list {
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 767px) {
  .steam-content--list {
    width: 88.2869692533vw;
    margin: 3.2942898975vw auto 0;
    display: flex;
    justify-content: center;
    column-gap: 0.9516837482vw;
  }
}
.steam-content--frame {
  background: linear-gradient(316deg, rgb(15, 171, 208) 50%, rgb(255, 156, 0) 50%);
  position: relative;
  width: 89.3333333333vw;
  height: 85.4666666667vw;
  padding: 0.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame {
    background: linear-gradient(316.7deg, rgb(15, 171, 208) 50%, rgb(255, 156, 0) 50%);
    width: 25.8418740849vw;
    height: 24.3777452416vw;
    padding: 0.2196193265vw;
  }
}
.steam-content--frame:nth-child(1) {
  margin-top: 6.8vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(1) {
    margin-top: -6.0029282577vw;
  }
}
.steam-content--frame:nth-child(1) .steam-content--summary {
  padding: 10.1333333333vw 2.6666666667vw 10.1333333333vw;
  margin: 2.8vw 0;
  font-size: 7.2vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(1) .steam-content--summary {
    padding: 2.7086383602vw 0.7320644217vw 2.7818448023vw;
    margin: 1.0248901903vw 0;
    font-size: 2.0497803807vw;
  }
}
.steam-content--frame:nth-child(2) {
  margin-top: 5.8666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(2) {
    margin-top: -6.0029282577vw;
  }
}
.steam-content--frame:nth-child(2) .steam-content--summary {
  margin: 2.8vw 0;
  padding: 1.3333333333vw 3.4666666667vw 1.6vw;
  text-align: center;
  line-height: 1.3;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(2) .steam-content--summary {
    padding: 0.439238653vw 1.4641288433vw 0.5856515373vw;
    margin: 1.0248901903vw 0;
  }
}
.steam-content--frame:nth-child(3) {
  margin-top: 5.8666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(3) {
    margin-top: -6.0029282577vw;
  }
}
.steam-content--frame:nth-child(3) .steam-content--summary {
  margin: 2.8vw 0;
  padding: 5.8666666667vw 2.6666666667vw;
  line-height: 1.3;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame:nth-child(3) .steam-content--summary {
    margin: 1.0248901903vw 0;
    padding: 1.4641288433vw 0.7320644217vw 1.8301610542vw;
  }
}
.steam-content--block {
  background: url("../data/webp/howto/parts_mode.png.webp") no-repeat right bottom;
  background-size: 32vw;
  background-color: #1b1b1b;
  width: 87.6vw;
  height: 84.1333333333vw;
  padding: 0;
  margin: 0 auto 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--block {
    background-size: 7.6134699854vw;
  }
  .steam-content--block.list {
    width: 25.4026354319vw;
    height: 23.9385065886vw;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
}
.steam-content--block__overlay {
  position: absolute;
  z-index: 1;
  top: 12.2666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--block__overlay {
    top: 3.3674963397vw;
  }
}
.steam-content--block__tit {
  background-color: transparent !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.steam-content--block__tit > p {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.2s;
}
.steam-content--block__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) {
  .steam-content--block__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%);
  }
}
.steam-content--block__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) {
  .steam-content--block__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%);
  }
}
.steam-content--block__tit img {
  position: relative;
  z-index: 2;
}
.steam-content--block__thumb {
  width: 87.6vw;
  height: 49.4666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .steam-content--block__thumb {
    width: 25.4026354319vw;
    height: 14.2752562225vw;
  }
}
.steam-content--spec {
  background: #141414;
  margin-top: 16.1333333333vw;
  padding: 0 0 12.8vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec {
    margin-top: 4.3191800878vw;
    padding: 2.196193265vw 0 3.513909224vw;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__box {
    width: 57.1010248902vw;
    margin-inline: auto;
  }
}
.steam-content--spec__toggle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 1.8666666667vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__toggle {
    column-gap: 0.6588579795vw;
  }
}
.steam-content--spec__toggle:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 0.5333333333vw;
  background-color: #fff;
  bottom: 0;
  z-index: 1;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__toggle:before {
    height: 0.1464128843vw;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 10%, rgb(255, 255, 255) 90%, rgba(0, 0, 0, 0) 100%);
  }
}
.steam-content--spec__tit {
  background-color: #fff;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 92% 100%, 0 100%, 0 20%);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  text-align: center;
  color: #fff;
  padding: 1.6vw 2.6666666667vw;
  min-height: 11.2vw;
  min-width: 44.1333333333vw;
  position: relative;
  align-content: center;
  cursor: pointer;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__tit {
    font-size: 1.1713030747vw;
    padding: 0.5856515373vw 0.8052708638vw;
    min-height: 2.9282576867vw;
    min-width: 16.1054172767vw;
  }
}
.steam-content--spec__tit:before {
  display: block;
  content: "";
  position: absolute;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 92% 100%, 0 100%, 0 20%);
  width: calc(100% - 1.0666666667vw);
  height: calc(100% - 1.0666666667vw);
  background-color: #141414;
  top: 0.5333333333vw;
  left: 0.5333333333vw;
  z-index: -1;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__tit:before {
    width: calc(100% - 0.2928257687vw);
    height: calc(100% - 0.2928257687vw);
    top: 0.1464128843vw;
    left: 0.1464128843vw;
  }
}
.steam-content--spec__tit.on {
  color: #000;
}
.steam-content--spec__tit.on:before {
  display: block;
  content: "";
  background-color: #fff;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec .steam-content--reference {
    padding: 0 7.3206442167vw 0;
  }
}
.steam-content--spec__detail {
  margin: 8.8vw 0 0;
  display: none;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail {
    flex-wrap: wrap;
    margin: 1.0248901903vw 0 0 8.0527086384vw;
    order: 1;
  }
}
.steam-content--spec__detail.on {
  display: block;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail.on {
    display: flex;
  }
}
.steam-content--spec__detail-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: 89.3333333333vw;
  margin: 2.6666666667vw auto 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0.9516837482vw 0 0;
    width: 49.7803806735vw;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list:nth-child(4) {
    width: 11.7130307467vw;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list:nth-child(4) .steam-content--spec__detail-list__text {
    flex-basis: 4.39238653vw;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list:nth-child(5) {
    width: 18.3016105417vw;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list:nth-child(5) .steam-content--spec__detail-list__text {
    flex-basis: 7.3206442167vw;
  }
}
.steam-content--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: 900;
  font-size: 3.2vw;
  text-align: center;
  color: #000;
  padding: 1.0666666667vw 2.6666666667vw;
  flex-basis: 21.2vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list__tit {
    font-size: 0.878477306vw;
    flex-basis: 5.8565153734vw;
    padding: 0.5124450952vw 0.8052708638vw;
  }
}
.steam-content--spec__detail-list__text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 4.2666666667vw;
  margin: 0 0 0 2.6666666667vw;
  flex-basis: calc(100% - 24vw);
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list__text {
    font-size: 1.1713030747vw;
    margin: 0 0 0 1.317715959vw;
    flex-basis: 41.4348462665vw;
  }
}
.steam-content--spec__detail-list__text .pc-none {
  display: inline-block;
}
@media only screen and (min-width: 767px) {
  .steam-content--spec__detail-list__text .pc-none {
    display: none;
  }
}
.steam-content--login {
  background: #141414;
}
@media only screen and (min-width: 767px) {
  .steam-content--login {
    margin-top: 4.3191800878vw;
    padding: 2.196193265vw 0 0;
  }
}
.steam-content--login__method {
  width: 89.3333333333vw;
  margin-inline: auto;
  margin-top: 9.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__method {
    width: 72.8404099561vw;
    margin-top: 2.635431918vw;
  }
}
.steam-content--login__bg {
  background-color: #2c2c2c;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.steam-content--login__tag {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  line-height: 0.9em;
  font-size: 3.7333333333vw;
  padding: 1.7333333333vw 2.6666666667vw 2vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__tag {
    font-size: 1.6105417277vw;
    padding: 0.6588579795vw 1.317715959vw 0.878477306vw;
  }
}
.steam-content--login__picture {
  margin-top: 9.0666666667vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__picture {
    margin-top: 2.635431918vw;
  }
}
.steam-content--login__details {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  font-size: 3.7333333333vw;
  text-align: center;
  margin-inline: auto;
  padding: 6.6666666667vw 0 14.1333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__details {
    font-size: 1.1713030747vw;
    line-height: 1.756954612vw;
    padding: 3.2942898975vw 0.878477306vw;
  }
}
.steam-content--login__details-info {
  margin-top: 5.6vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__details-info {
    margin-top: 0;
    display: inline-block;
  }
}
.steam-content--login__underline {
  color: #ff8a00;
  border-bottom: 0.1333333333vw solid #ff8a00;
}
@media only screen and (min-width: 767px) {
  .steam-content--login__underline {
    border-bottom: 0.0732064422vw solid #ff8a00;
  }
}
.steam-content--attetion {
  background-color: #2c2c2c;
  width: 100%;
  padding: 6.6666666667vw 5.3333333333vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion {
    padding: 1.4641288433vw 0 2.5622254758vw;
  }
}
.steam-content--attetion.accordion {
  background-color: #373737;
  width: auto;
  padding: 3.3333333333vw 2.6666666667vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion.accordion {
    padding: 1.4641288433vw 1.4641288433vw 1.8301610542vw;
    margin: 1.4641288433vw 0 0 4.4655929722vw;
  }
  .steam-content--attetion.accordion .steam-content--attetion-heading {
    text-align: left;
  }
}
.steam-content--attetion-heading {
  color: #ff0000;
  text-align: center;
  font-size: 3.7333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion-heading {
    font-size: 1.1713030747vw;
  }
}
.steam-content--attetion-text1 {
  color: #fff;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 2.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion-text1 {
    font-size: 1.1713030747vw;
    line-height: 1.5;
    margin: 0.3660322108vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion-text1.center {
    text-align: center;
  }
  .steam-content--attetion-text1.center span {
    display: block;
  }
}
.steam-content--attetion-text2 {
  color: #f6ff00;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 4vw 0 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion-text2 {
    font-size: 1.1713030747vw;
    line-height: 1.5;
    margin: 0.7320644217vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .steam-content--attetion-text2.center {
    text-align: center;
  }
  .steam-content--attetion-text2.center span {
    display: block;
  }
}
.steam-content--faq {
  background: #141414;
  padding: 0 0 10vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--faq {
    margin-top: 4.3191800878vw;
    padding: 2.196193265vw 0 3.6603221083vw;
  }
}
.steam-content--accordion {
  background: #141414;
  width: 89.3333333333vw;
  margin: 3.2vw auto 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion {
    width: 73.2064421669vw;
  }
}
.steam-content--accordion__item {
  background-color: #202020;
  color: #fff;
  margin: 2.5333333333vw auto 0;
  border-radius: 3.4666666667vw;
  cursor: pointer;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__item {
    margin: 1.3909224012vw auto 0;
    border-radius: 1.4641288433vw;
  }
}
.steam-content--accordion__wrap {
  padding: 3.6vw 3.6vw 3.6vw 4vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__wrap {
    padding: 1.6837481698vw 1.2445095168vw;
  }
}
.steam-content--accordion__wrap.active {
  padding: 3.6vw 3.6vw 1.8666666667vw 4vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__wrap.active {
    padding: 1.6837481698vw 1.2445095168vw 1.6837481698vw;
  }
}
.steam-content--accordion__wrap.active:has(.steam-content--attetion) {
  padding: 3.6vw 3.6vw 5.3333333333vw 4vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__wrap.active:has(.steam-content--attetion) {
    padding: 1.6837481698vw 1.2445095168vw 1.6837481698vw;
  }
}
.steam-content--accordion__title {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.5;
  padding: 0 8vw 0 10.4vw;
  display: flex;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__title {
    font-size: 1.9033674963vw;
    line-height: 2.196193265vw;
    padding: 0 0.878477306vw 0 4.4655929722vw;
  }
}
.steam-content--accordion__title:before {
  display: block;
  content: "";
  position: absolute;
  background-color: #ff8a00;
  background: url("../data/webp/common/steam_question.png.webp") no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
  top: -1.2vw;
  left: 0;
  border-radius: 50%;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__title:before {
    width: 3.3674963397vw;
    height: 3.3674963397vw;
    top: -0.5124450952vw;
  }
}
.steam-content--accordion__title:after {
  display: block;
  content: "";
  content: "+";
  font-size: 6.6666666667vw;
  font-weight: bold;
  position: absolute;
  padding-top: 0.2666666667vw;
  text-align: center;
  right: 0;
  background-color: #141414;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  transition: all 0.4s ease;
  line-height: 0.9;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__title:after {
    font-size: 2.9282576867vw;
    width: 3.3674963397vw;
    height: 3.3674963397vw;
    top: -0.5856515373vw;
    line-height: 0.7;
  }
}
.steam-content--accordion__title.active:after {
  display: block;
  content: "";
  content: "−";
}
.steam-content--accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.steam-content--accordion__txt {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  font-size: 3.4666666667vw;
  border-top: 0.4vw solid #ff8a00;
  margin-top: 5.0666666667vw;
  padding: 6.4vw 0 3.2vw 10.4vw;
  line-height: 4.8vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__txt {
    font-size: 1.4641288433vw;
    line-height: 2.196193265vw;
    margin-top: 2.3426061493vw;
    padding: 1.0980966325vw 0 0 4.4655929722vw;
    border-top: 0.2196193265vw solid #ff8a00;
    display: flex;
    flex-wrap: wrap;
  }
}
.steam-content--accordion__txt:before {
  display: block;
  content: "";
  position: absolute;
  background: url("../data/webp/common/steam_answer.png.webp") no-repeat;
  background-size: contain;
  font-size: 5.3333333333vw;
  width: 4.4vw;
  height: 4.8vw;
  top: 6.2666666667vw;
  left: 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__txt:before {
    width: 1.6837481698vw;
    height: 1.8301610542vw;
    top: 1.1713030747vw;
    left: 0.8052708638vw;
  }
}
.steam-content--accordion__pic {
  width: 100%;
  margin: 2.9333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__pic {
    width: 33.0893118594vw;
    margin: 1.1713030747vw 0 0;
  }
}
.steam-content--accordion__pic.middle {
  margin: 2.9333333333vw 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__pic.middle {
    width: 33.0893118594vw;
    margin: 1.1713030747vw 0;
  }
}
.steam-content--accordion__ref {
  color: #9d9d9d;
  font-size: 2.6666666667vw;
  width: 100%;
  line-height: 1.6;
}
@media only screen and (min-width: 767px) {
  .steam-content--accordion__ref {
    font-size: 0.878477306vw;
    line-height: 1.3;
  }
}

.webstore .header--webstore {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 767px) {
  .webstore .header--webstore:hover {
    opacity: 0.8;
  }
}
.webstore .header--webstore.sp-hide {
  opacity: 0;
  visibility: hidden;
}
.webstore--slide {
  width: 100%;
  height: 68vw;
  padding: 0 0 11.7333333333vw;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .webstore--slide {
    width: 72.9136163982vw;
    height: 45.3879941435vw;
    padding: 0;
    order: 2;
  }
}
.webstore--slide .swiper-container {
  overflow: visible;
}
.webstore--slide-item {
  height: 56.2666666667vw;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .webstore--slide-item {
    height: 41.0688140556vw;
  }
}
.webstore--slide .swiper-controls {
  position: relative;
  height: 5.6vw;
  width: fit-content;
  margin-top: 6.1333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-controls {
    margin-top: 1.756954612vw;
    height: 2.4890190337vw;
  }
}
.webstore--slide .swiper-button-next, .webstore--slide .swiper-button-prev {
  width: 5.7333333333vw;
  height: 5.6vw;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 11;
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-button-next, .webstore--slide .swiper-button-prev {
    width: 2.5622254758vw;
    height: 2.4890190337vw;
    top: 50%;
  }
  .webstore--slide .swiper-button-next:hover, .webstore--slide .swiper-button-prev:hover {
    opacity: 0.7;
  }
}
.webstore--slide .swiper-button-next.is-disable, .webstore--slide .swiper-button-prev.is-disable {
  opacity: 0.35;
}
.webstore--slide .swiper-button-prev {
  background-image: url("../data/webp/webstore/slide_prev_white.png.webp");
  left: -13.4666666667vw;
  right: auto;
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-button-prev {
    left: -5.710102489vw;
  }
}
.webstore--slide .swiper-button-next {
  background-image: url("../data/webp/webstore/slide_next_white.png.webp");
  right: -13.4666666667vw;
  left: auto;
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-button-next {
    right: -5.710102489vw;
  }
}
.webstore--slide .swiper-pagination-bullets {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}
.webstore--slide .swiper-pagination-bullet {
  border-radius: 0;
  border: 0.4vw solid #fff;
  background: #fff;
  width: 10.6666666667vw;
  height: 1.0666666667vw;
  margin: 0 0.4666666667vw !important;
  opacity: 1 !important;
  transition: 0.3s;
}
.webstore--slide .swiper-pagination-bullet-active {
  background: #ff8a00;
  border-color: #ff8a00;
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-pagination-bullet-active {
    border: 0.1464128843vw solid #ff8a00 !important;
  }
}
@media only screen and (min-width: 767px) {
  .webstore--slide .swiper-pagination-bullet {
    border: 0.1464128843vw solid #fff;
    width: 5.8565153734vw;
    height: 0.5856515373vw;
    margin: 0 0.2562225476vw !important;
  }
}
.webstore-content {
  background-size: 8.5333333333vw;
  background-position: 0 0;
  padding: 0 0 11.8666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .webstore-content {
    width: 88.2137628111vw;
    background-size: 2.3426061493vw;
    padding: 0;
    margin: 2.196193265vw auto 0;
  }
}
.webstore-content--subtit {
  background: rgb(255, 138, 0);
  padding: 1.0666666667vw 2.6666666667vw 2.9333333333vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 7.4666666667vw;
  height: 13.3333333333vw;
  text-shadow: 0 1.0666666667vw 0 #000;
  margin: 10.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--subtit {
    background: linear-gradient(90deg, rgba(255, 138, 0, 0.05) 0%, rgb(255, 138, 0) 40%, rgb(255, 138, 0) 60%, rgba(255, 138, 0, 0.05) 100%);
    padding: 0.5856515373vw 0.7320644217vw 1.1713030747vw;
    font-size: 2.0497803807vw;
    text-shadow: 0 0.2928257687vw 0 #000;
    margin: 0 0 1.756954612vw;
    height: 3.6603221083vw;
  }
}
.webstore-content--subtit__pic {
  width: 48.2666666667vw;
  height: 22.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--subtit__pic {
    width: 14.494875549vw;
    height: 6.8814055637vw;
  }
}
@media only screen and (min-width: 767px) {
  .webstore-content--faq {
    background: rgba(0, 0, 0, 0.25);
    padding: 2.196193265vw 0 5.5636896047vw;
  }
}
.webstore-content--attetion {
  background-color: #2c2c2c;
  width: 100%;
  padding: 6.6666666667vw 5.3333333333vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion {
    padding: 1.4641288433vw 0 2.5622254758vw;
  }
}
.webstore-content--attetion.accordion {
  background-color: #373737;
  width: auto;
  padding: 3.3333333333vw 2.6666666667vw 5.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion.accordion {
    padding: 1.4641288433vw 1.4641288433vw 1.8301610542vw;
    margin: 1.4641288433vw 0 0 4.4655929722vw;
  }
  .webstore-content--attetion.accordion .webstore-content--attetion-heading {
    text-align: left;
  }
}
.webstore-content--attetion-heading {
  color: #ff0000;
  text-align: center;
  font-size: 3.7333333333vw;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion-heading {
    font-size: 1.1713030747vw;
  }
}
.webstore-content--attetion-text1 {
  color: #fff;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 2.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion-text1 {
    font-size: 1.1713030747vw;
    line-height: 1.5;
    margin: 0.3660322108vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion-text1.center {
    text-align: center;
  }
  .webstore-content--attetion-text1.center span {
    display: block;
  }
}
.webstore-content--attetion-text2 {
  color: #f6ff00;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 4vw 0 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion-text2 {
    font-size: 1.1713030747vw;
    line-height: 1.5;
    margin: 0.7320644217vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .webstore-content--attetion-text2.center {
    text-align: center;
  }
  .webstore-content--attetion-text2.center span {
    display: block;
  }
}
.webstore-content--accordion {
  width: 89.3333333333vw;
  margin: 8.4vw auto 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion {
    width: 73.2064421669vw;
    margin: 2.7818448023vw auto 0;
  }
}
.webstore-content--accordion__item {
  background-color: #202020;
  color: #fff;
  margin: 2.5333333333vw auto 0;
  border-radius: 3.4666666667vw;
  cursor: pointer;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__item {
    margin: 1.3909224012vw auto 0;
    border-radius: 1.4641288433vw;
  }
}
.webstore-content--accordion__item:first-child {
  margin-top: 0;
}
.webstore-content--accordion__wrap {
  padding: 3.6vw 3.6vw 3.6vw 4vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__wrap {
    padding: 1.6837481698vw 1.2445095168vw;
  }
}
.webstore-content--accordion__wrap.active {
  padding: 3.6vw 3.6vw 1.8666666667vw 4vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__wrap.active {
    padding: 1.6837481698vw 1.2445095168vw 1.6837481698vw;
  }
}
.webstore-content--accordion__wrap.active:has(.webstore-content--attetion) {
  padding: 3.6vw 3.6vw 5.3333333333vw 4vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__wrap.active:has(.webstore-content--attetion) {
    padding: 1.6837481698vw 1.2445095168vw 1.6837481698vw;
  }
}
.webstore-content--accordion__title {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.5;
  padding: 0 8vw 0 10.4vw;
  display: flex;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__title {
    font-size: 1.9033674963vw;
    line-height: 2.196193265vw;
    padding: 0 3.3674963397vw 0 4.4655929722vw;
  }
}
.webstore-content--accordion__title:before {
  display: block;
  content: "";
  position: absolute;
  background-color: #ff8a00;
  background: url("../data/webp/common/steam_question.png.webp") no-repeat;
  background-size: contain;
  width: 8vw;
  height: 8vw;
  top: -1.2vw;
  left: 0;
  border-radius: 50%;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__title:before {
    width: 3.3674963397vw;
    height: 3.3674963397vw;
    top: -0.5124450952vw;
  }
}
.webstore-content--accordion__title:after {
  display: block;
  content: "";
  content: "+";
  font-size: 6.6666666667vw;
  font-weight: bold;
  position: absolute;
  padding-top: 0.2666666667vw;
  text-align: center;
  right: 0;
  background-color: #141414;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  transition: all 0.4s ease;
  line-height: 0.9;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__title:after {
    font-size: 2.9282576867vw;
    width: 3.3674963397vw;
    height: 3.3674963397vw;
    top: -0.5856515373vw;
    line-height: 0.7;
  }
}
.webstore-content--accordion__title.active:after {
  display: block;
  content: "";
  content: "−";
}
.webstore-content--accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.webstore-content--accordion__txt {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
  font-size: 3.4666666667vw;
  border-top: 0.4vw solid #ff8a00;
  margin-top: 5.0666666667vw;
  padding: 6.4vw 0 3.2vw 10.4vw;
  line-height: 4.8vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__txt {
    font-size: 1.4641288433vw;
    line-height: 2.196193265vw;
    margin-top: 2.3426061493vw;
    padding: 1.0980966325vw 0 0 4.4655929722vw;
    border-top: 0.2196193265vw solid #ff8a00;
    display: flex;
    flex-wrap: wrap;
  }
}
.webstore-content--accordion__txt:before {
  display: block;
  content: "";
  position: absolute;
  background: url("../data/webp/common/steam_answer.png.webp") no-repeat;
  background-size: contain;
  font-size: 5.3333333333vw;
  width: 4.4vw;
  height: 4.8vw;
  top: 6.2666666667vw;
  left: 1.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__txt:before {
    width: 1.6837481698vw;
    height: 1.8301610542vw;
    top: 1.1713030747vw;
    left: 0.8052708638vw;
  }
}
.webstore-content--accordion__pic {
  width: 100%;
  margin: 2.9333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__pic {
    width: 61.7862371889vw;
    margin: 2.9282576867vw 0 0;
  }
}
.webstore-content--accordion__pic.middle {
  margin: 2.9333333333vw 0;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__pic.middle {
    width: 61.7862371889vw;
    margin: 2.9282576867vw 0;
  }
}
.webstore-content--accordion__ref {
  color: #9d9d9d;
  font-size: 2.6666666667vw;
  width: 100%;
  line-height: 1.6;
}
@media only screen and (min-width: 767px) {
  .webstore-content--accordion__ref {
    font-size: 0.878477306vw;
    line-height: 1.3;
  }
}
.webstore-content--additional {
  width: 89.3333333333vw;
  margin: 2.5333333333vw auto 0;
  background: #000;
  border-radius: 3.4666666667vw;
  padding: 5.6vw 4.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .webstore-content--additional {
    width: 73.2064421669vw;
    margin: 1.3909224012vw auto 0;
    padding: 2.0497803807vw 2.3426061493vw;
    border-radius: 1.4641288433vw;
  }
}
.webstore-content--additional__text {
  font-size: 3.4666666667vw;
  line-height: 1.3846153846;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 767px) {
  .webstore-content--additional__text {
    font-size: 1.4641288433vw;
  }
}
.webstore-content--additional__link {
  font-size: 3.4666666667vw;
  display: inline-block;
  color: #006cff;
  text-decoration: underline;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 767px) {
  .webstore-content--additional__link {
    font-size: 1.4641288433vw;
    margin-top: 0.5124450952vw;
    transition: 0.3s;
  }
  .webstore-content--additional__link:hover {
    color: #ff8a00;
  }
}
.webstore-content--additional__ref {
  margin-top: 5.2vw;
  display: block;
  font-size: 2.9333333333vw;
  line-height: 1.3636363636;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 767px) {
  .webstore-content--additional__ref {
    margin-top: 1.8301610542vw;
    font-size: 1.0248901903vw;
    line-height: 1.4285714286;
  }
}

.p200mdl {
  background-image: url("../data/webp/200mdl/bg.png.webp");
  background-size: 58.6666666667vw auto;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl {
    background-size: 16.1054172767vw auto;
  }
}
.p200mdl__container {
  background-repeat: repeat-y;
  background-position: 0 218vw;
  background-size: 100% auto;
  background-image: url("../data/webp/200mdl/bg_line.png.webp");
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__container {
    background-position: 0 33.6749633968vw;
    background-image: url("../data/webp/200mdl/bg_line_pc.png.webp");
  }
}
.p200mdl__contents {
  background-image: url("../data/webp/200mdl/bg_bottom_sp.png.webp");
  background-position: 0 bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 0 0 13.6vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__contents {
    background-image: url("../data/webp/200mdl/bg_bottom.png.webp");
    padding: 0 0 2.5622254758vw;
  }
}
.p200mdl__store {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url("../data/webp/200mdl/bg_store.png.webp");
  width: 100vw;
  padding: 4vw 0 5.8666666667vw;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: 10;
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 767px) {
  .p200mdl__store {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__store {
    background-image: url("../data/webp/200mdl/bg_store_pc.png.webp");
    width: 24.5241581259vw;
    padding: 0 0 1.4641288433vw;
    left: 2.9282576867vw;
    bottom: 2.9282576867vw;
  }
}
.p200mdl__store--title {
  width: 61.8666666667vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--title {
    width: 18.3016105417vw;
  }
}
.p200mdl__store--list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 2vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--list {
    margin: 0.2928257687vw 0 0;
  }
}
.p200mdl__store--item {
  margin: 0 0.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--item {
    margin: 0 0.5856515373vw;
  }
}
.p200mdl__store--item a {
  height: 9.0666666667vw;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  transition: 0.3s all;
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--item a:hover {
    opacity: 0.8;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--item a {
    height: 3.1478770132vw;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--item:last-child {
    margin-top: 0.5124450952vw;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__store--item:last-child a {
    height: 3.3674963397vw;
  }
}
.p200mdl__store--item img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.p200mdl__main {
  width: 100%;
  height: 216.9333333333vw;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 767px) {
  .p200mdl__main {
    height: 73.2064421669vw;
  }
}
.p200mdl__main--bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p200mdl__main--bg-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.p200mdl__main--bg-inner {
  position: absolute;
  width: calc(100% + 8vw);
  height: calc(100% + 16vw);
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -52%, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__main--bg-inner {
    transform: translate3d(-50%, -48%, 0);
    width: calc(100% + 8.78477306vw);
    height: calc(100% + 8.78477306vw);
  }
}
.p200mdl__main--bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
  background-image: url("../data/webp/200mdl/main_sp.png.webp");
}
@media only screen and (min-width: 767px) {
  .p200mdl__main--bg-img {
    background-image: url("../data/webp/200mdl/main.png.webp");
  }
}
.p200mdl__main--logo {
  width: 33.8666666667vw;
  position: absolute;
  top: 5.3333333333vw;
  left: 2.2666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__main--logo {
    width: 16.8374816984vw;
    top: 2.5622254758vw;
    left: auto;
    right: 3.2942898975vw;
  }
}
.p200mdl__main--title {
  width: 51.4666666667vw;
  position: absolute;
  bottom: 26.1333333333vw;
  right: 2.6666666667vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .p200mdl__main--title {
    width: 24.0117130307vw;
    bottom: 18.1551976574vw;
    right: 3.2942898975vw;
  }
  .p200mdl__main--title:hover {
    opacity: 0.8 !important;
  }
}
.p200mdl__catch {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .p200mdl__catch {
    margin: -14.3484626647vw 0 0 -0.878477306vw;
  }
}
.p200mdl__catch--video {
  width: 100%;
}
@media only screen and (min-width: 767px) {
  .p200mdl__catch--video {
    width: 75.4026354319vw;
  }
}
.p200mdl__catch--video video {
  padding: 0.6666666667vw 0;
  background-color: #fff;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 767px) {
  .p200mdl__catch--video video {
    border-radius: 0.3660322108vw;
    padding: 0.3660322108vw 0.3660322108vw 0.3660322108vw 0;
  }
}
.p200mdl__catch--bg {
  margin: -8.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__catch--bg {
    width: 47.5841874085vw;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.p200mdl__catch--text {
  margin: -33.3333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__catch--text {
    width: 47.5841874085vw;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.p200mdl__luffy {
  margin: -2.6666666667vw 0 0;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy {
    margin: 3.1478770132vw 0 0;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--img {
    width: 76.1346998536vw;
  }
}
.p200mdl__luffy--name {
  margin: -65.6vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--name {
    width: 65.3733528551vw;
    height: 62.9575402635vw;
    position: absolute;
    top: -0.8052708638vw;
    right: 4.831625183vw;
    margin: 0;
  }
}
.p200mdl__luffy--info {
  width: 90.6666666667vw;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--info {
    width: 45.9736456808vw;
    margin: 0;
    position: absolute;
    top: 30.6002928258vw;
    right: 5.9297218155vw;
  }
}
.p200mdl__luffy--info:before {
  display: block;
  content: "";
  background-color: #00eaff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0.6666666667vw;
  left: 0.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--info:before {
    top: 0.2928257687vw;
    left: 0.2928257687vw;
  }
}
.p200mdl__luffy--text {
  background-size: 21.3333333333vw auto;
  background-image: url("../data/webp/200mdl/bg_info.png.webp");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-color: #1c1c1c;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  padding: 2.6666666667vw 0 4vw 2vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--text {
    background-size: 11.7130307467vw auto;
    padding: 1.4641288433vw 0 1.8301610542vw 1.0980966325vw;
  }
}
.p200mdl__luffy--text span {
  font-size: 4.1333333333vw;
  line-height: 1.375;
  letter-spacing: -0.05em;
  text-indent: -0.5em;
  margin: 0 0 2vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--text span {
    font-size: 1.756954612vw;
    line-height: 1.4166666667;
    margin: 0 0 0.878477306vw;
  }
}
.p200mdl__luffy--text.en span {
  letter-spacing: 0em;
  text-indent: 0;
}
.p200mdl__luffy--text small {
  font-size: 2.6666666667vw;
  line-height: 1.3;
  display: block;
}
@media only screen and (min-width: 767px) {
  .p200mdl__luffy--text small {
    font-size: 1.0248901903vw;
    line-height: 1.5;
  }
}
.p200mdl__campaign {
  margin: 12vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__campaign {
    margin: 0;
  }
}
.p200mdl__camblock1 {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.8) 100%);
  margin: 7.6vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1 {
    width: 100%;
    margin: 3.6603221083vw 0 0;
  }
}
.p200mdl__camblock1--title {
  position: relative;
  z-index: 2;
}
.p200mdl__camblock1--inner {
  background-repeat: no-repeat;
  background-size: 3.6vw;
  background-image: url("../data/webp/200mdl/bg_stripe.png.webp");
  padding: 53.3333333333vw 0 9.0666666667vw;
  margin: -5.7333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--inner {
    background-size: 0.9516837482vw;
    padding: 2.7086383602vw 0 5.1244509517vw;
    margin: -2.7086383602vw 0 0;
  }
}
.p200mdl__camblock1--img {
  width: 89.4666666667vw;
  height: 58.2666666667vw;
  position: absolute;
  top: 8.6666666667vw;
  left: 6.2666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--img {
    width: 49.121522694vw;
    height: 31.9912152269vw;
    top: -2.4158125915vw;
    left: auto;
    right: 5.4904831625vw;
    z-index: 2;
  }
}
.p200mdl__camblock1--text {
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--text {
    width: 44.6559297218vw;
    margin: 0 0 0 7.3206442167vw;
  }
}
.p200mdl__camblock1--attention {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  padding: 0 5.3333333333vw;
  margin: 1.7333333333vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--attention {
    text-align: center;
    padding: 0;
    margin: -1.0980966325vw 0 0;
  }
}
.p200mdl__camblock1--attention span {
  text-shadow: 0 0 2.6666666667vw #000;
  font-size: 2.6666666667vw;
  line-height: 1.3;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--attention span {
    text-shadow: 0 0 0.878477306vw #000;
    font-size: 0.878477306vw;
    line-height: 1.5;
  }
}
.p200mdl__camblock1--kira {
  position: absolute;
  width: 100%;
  top: 5.3333333333vw;
  z-index: 4;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--kira {
    width: 90.775988287vw;
    top: -2.4158125915vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.p200mdl__camblock2 {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.8) 100%);
  margin: 8.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2 {
    width: 100%;
    margin: 3.2942898975vw 0 0;
  }
}
.p200mdl__camblock2--title {
  position: relative;
  z-index: 2;
}
.p200mdl__camblock2--inner {
  background-repeat: no-repeat;
  background-size: 3.6vw;
  background-image: url("../data/webp/200mdl/bg_stripe.png.webp");
  padding: 5.3333333333vw 0 7.7333333333vw;
  margin: -5.7333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--inner {
    background-size: 0.9516837482vw;
    padding: 2.7086383602vw 0 5.1244509517vw;
    margin: -2.7086383602vw 0 0;
  }
}
.p200mdl__camblock2--img {
  width: 81.8666666667vw;
  height: 82.1333333333vw;
  position: absolute;
  top: 31.0666666667vw;
  left: 8vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--img {
    width: 44.9487554905vw;
    height: 45.0951683748vw;
    top: -4.1727672035vw;
    left: 6.2225475842vw;
    z-index: 2;
  }
}
.p200mdl__camblock2--text {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--text {
    width: 46.7789165447vw;
    margin: 0 0 0 45.3879941435vw;
  }
}
.p200mdl__camblock2--attention {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  padding: 0 5.3333333333vw;
  margin: 76vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--attention {
    padding: 0;
    margin: 0.3660322108vw 0 0 50.878477306vw;
  }
}
.p200mdl__camblock2--attention span {
  font-size: 4.2666666667vw;
  line-height: 1.375;
  letter-spacing: 0;
  margin: 0 0 1.7333333333vw;
  display: block;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--attention span {
    font-size: 1.9033674963vw;
    line-height: 1.5384615385;
    margin: 0 0 1.0980966325vw;
  }
}
.p200mdl__camblock2--attention small {
  text-shadow: 0 0 2.6666666667vw #000;
  font-size: 2.6666666667vw;
  line-height: 1.3;
  letter-spacing: 0;
  display: block;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--attention small {
    text-shadow: 0 0 0.878477306vw #000;
    font-size: 0.878477306vw;
    line-height: 1.5;
  }
}
.p200mdl__camblock2--kira {
  position: absolute;
  width: 100%;
  top: 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--kira {
    width: 90.775988287vw;
    top: -2.4158125915vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.p200mdl__camblock3 {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.8) 100%);
  margin: 7.6vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3 {
    width: 100%;
    margin: 3.6603221083vw 0 0;
  }
}
.p200mdl__camblock3--title {
  position: relative;
  z-index: 2;
}
.p200mdl__camblock3--inner {
  background-repeat: no-repeat;
  background-size: 3.6vw;
  background-image: url("../data/webp/200mdl/bg_stripe.png.webp");
  padding: 5.7333333333vw 0 5.3333333333vw;
  margin: -5.7333333333vw 0 0;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--inner {
    background-size: 0.9516837482vw;
    padding: 2.7086383602vw 0 4.0263543192vw;
    margin: -2.7086383602vw 0 0;
  }
}
.p200mdl__camblock3--img {
  width: 60.9333333333vw;
  height: 103.3333333333vw;
  position: absolute;
  top: 9.7333333333vw;
  left: 19.2vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--img {
    width: 22.2547584187vw;
    height: 37.9209370425vw;
    top: -2.0497803807vw;
    left: auto;
    right: 17.2035139092vw;
    z-index: 2;
  }
}
.p200mdl__camblock3--text {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--text {
    width: 53.074670571vw;
    margin: 0 0 0 7.3206442167vw;
  }
}
.p200mdl__camblock3--kira {
  position: absolute;
  width: 100%;
  top: 5.7333333333vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--kira {
    width: 90.775988287vw;
    top: -2.4158125915vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.p200mdl__camblock3--attention {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  padding: 4vw 5.3333333333vw 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--attention {
    text-align: center;
    padding: 2.2693997072vw 0 0;
  }
}
.p200mdl__camblock3--attention span {
  text-shadow: 0 0 2.6666666667vw #000;
  font-size: 2.6666666667vw;
  line-height: 1.3;
  letter-spacing: 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--attention span {
    text-shadow: 0 0 0.878477306vw #000;
    font-size: 0.878477306vw;
    line-height: 1.5;
  }
}
.p200mdl__camblock3.comingsoon {
  pointer-events: none;
}
.p200mdl__camblock3.comingsoon:after {
  display: block;
  content: "";
  background-position: center;
  background-size: 100vw auto;
  background-repeat: no-repeat;
  background-image: url("../data/webp/ja/200mdl/comingsoon_sp.png.webp");
  background-color: rgba(51, 51, 51, 0.75);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3.comingsoon:after {
    background-size: 62.2254758419vw auto;
    background-image: url("../data/webp/ja/200mdl/comingsoon.png.webp");
  }
}
.p200mdl__camblock3.comingsoon .p200mdl__goods--btn {
  pointer-events: none;
}
.p200mdl__camblock3.comingsoon.en:after {
  display: block;
  content: "";
  background-image: url("../data/webp/en/200mdl/comingsoon_sp.png.webp");
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3.comingsoon.en:after {
    background-size: 79.7950219619vw auto;
    background-image: url("../data/webp/en/200mdl/comingsoon.png.webp");
  }
}
.p200mdl__goods {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  background-image: url("../data/webp/200mdl/bg_goods_sp.png.webp");
  padding: 6.4vw 0 4.9333333333vw;
  text-align: center;
}
@media only screen and (min-width: 767px) {
  .p200mdl__goods {
    background-image: url("../data/webp/200mdl/bg_goods.png.webp");
    width: 75.2562225476vw;
    padding: 3.513909224vw 0 2.0497803807vw;
    margin: 0 auto;
  }
}
.p200mdl__goods--title {
  width: 85.3333333333vw;
  margin: 0 auto 2.9333333333vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__goods--title {
    width: 47.5841874085vw;
    margin: 0 auto 1.0980966325vw;
  }
}
.p200mdl__goods--text {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-size: 2.6666666667vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__goods--text {
    font-size: 1.4641288433vw;
  }
}
.p200mdl__goods--btn {
  width: 73.8666666667vw;
  height: 14.6666666667vw;
  margin: 40vw auto 0;
  display: block;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__goods--btn {
    background-repeat: no-repeat;
    background-size: contain;
    width: 40.4099560761vw;
    height: 8.0527086384vw;
    margin: 25.2562225476vw auto 0;
  }
  .p200mdl__goods--btn.ja {
    background-image: url("../data/webp/ja/200mdl/btn_tokusetsu.png.webp");
  }
  .p200mdl__goods--btn.en {
    background-image: url("../data/webp/en/200mdl/btn_tokusetsu.png.webp");
  }
  .p200mdl__goods--btn:hover img.on {
    opacity: 1;
  }
  .p200mdl__goods--btn:hover img.off {
    opacity: 0;
  }
}
.p200mdl__goods--btn img {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
}
.p200mdl__goods--btn img.on {
  opacity: 0;
}
.p200mdl__sign {
  margin: 10.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4.1727672035vw 0 4.39238653vw;
    margin: 7.906295754vw 0 0;
  }
}
.p200mdl__sign--contents {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7.3333333333vw 0 10.9333333333vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign--contents {
    background-color: transparent;
    padding: 0;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign--title {
    width: 74.6705710102vw;
    margin: 0 auto;
  }
}
.p200mdl__sign--img {
  width: 81.6vw;
  margin: 0 auto;
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign--img {
    width: 35.8711566618vw;
    margin: 2.5622254758vw auto 0;
  }
}
.p200mdl__sign--kira {
  position: absolute;
  width: 100%;
  top: -4vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign--kira {
    width: 54.9048316252vw;
    top: -2.5622254758vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.p200mdl__movie {
  margin: 10.6666666667vw 0 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3.8799414348vw 0 3.6603221083vw;
    margin: 4.39238653vw 0 0;
  }
}
.p200mdl__movie--contents {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7.3333333333vw 0 12vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie--contents {
    background-color: transparent;
    padding: 0;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie--title {
    width: 74.6705710102vw;
    margin: 0 auto;
  }
}
.p200mdl__movie--yt {
  width: 100%;
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie--yt {
    width: 62.6647144949vw;
    margin: 2.5622254758vw auto 0;
  }
}
.p200mdl__movie--yt iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.p200mdl__movie--published {
  text-align: center;
  height: 11.2vw;
  margin: 1.3333333333vw auto 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie--published {
    height: 4.0995607613vw;
    margin: 0.439238653vw auto 0;
  }
}
.p200mdl__movie--published img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
}
.p200mdl--btn {
  background-image: url("../data/webp/200mdl/bg_btn_sp.png.webp");
  width: 92vw;
  height: 12.5333333333vw;
  margin: 12vw auto 0;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.p200mdl--btn .bg-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all;
}
.p200mdl--btn .bg-img.on {
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .p200mdl--btn:hover .bg-img.on {
    opacity: 1;
  }
  .p200mdl--btn:hover .bg-img.off {
    opacity: 0;
  }
}
@media only screen and (max-width: 767px) {
  .p200mdl--btn img {
    opacity: 0;
  }
}
@media only screen and (min-width: 767px) {
  .p200mdl--btn {
    background-image: url("../data/webp/200mdl/bg_btn.png.webp");
    background-size: 100% auto;
    width: 44.2166910688vw;
    height: 5.6368960469vw;
    padding: 0 1.4641288433vw 0.878477306vw;
    margin: 2.7818448023vw auto 0;
    z-index: 6;
  }
  .p200mdl--btn:hover .top-chara--btn-text:before {
    right: -0.5124450952vw;
  }
}
.p200mdl--btn span {
  font-family: "M PLUS 1", sans-serif;
  font-weight: 900;
  font-size: 5.0666666667vw;
  letter-spacing: 0.08em;
  line-height: 1.0789473684;
  text-shadow: 0px 0.5333333333vw 0px rgb(0, 0, 0);
  padding-right: 4.6666666667vw;
  margin-left: 2vw;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .p200mdl--btn span {
    font-size: 2.196193265vw;
    text-shadow: 0px 0.2928257687vw 0px rgb(0, 0, 0);
    padding-right: 2.5622254758vw;
    margin-left: 1.8301610542vw;
  }
}
.p200mdl--btn 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: 4vw;
  height: 4.8vw;
  right: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  top: calc(50% + 0.6666666667vw);
}
@media only screen and (min-width: 767px) {
  .p200mdl--btn span:before {
    width: 1.756954612vw;
    height: 2.196193265vw;
    top: calc(50% + 0.3660322108vw);
    transition: 0.3s;
  }
}
.p200mdl--btn.en {
  text-align: center;
}
.p200mdl--btn.en span {
  font-size: 4vw;
  line-height: 1.0333333333;
  padding-right: 8vw;
  margin-left: 9.3333333333vw;
}
@media only screen and (min-width: 767px) {
  .p200mdl--btn.en span {
    font-size: 1.8301610542vw;
    padding-right: 4.39238653vw;
    margin-left: 4.39238653vw;
  }
}

.footer.p200mdl {
  padding: 0;
  margin: 0;
}
.footer.p200mdl:before {
  content: none;
}

@keyframes p200mdl-main-pc {
  0% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(1.4641288433vw, -1.4641288433vw, 0);
  }
  30% {
    transform: translate3d(-1.4641288433vw, -1.4641288433vw, 0);
  }
  45% {
    transform: translate3d(1.4641288433vw, 0%, 0);
  }
  60% {
    transform: translate3d(0%, 1.4641288433vw, 0);
  }
  75% {
    transform: translate3d(-1.4641288433vw, -1.4641288433vw, 0);
  }
  90%, 100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes p200mdl-main {
  0% {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(2.6666666667vw, -2.6666666667vw, 0);
  }
  30% {
    transform: translate3d(-2.6666666667vw, -2.6666666667vw, 0);
  }
  45% {
    transform: translate3d(2.6666666667vw, 0%, 0);
  }
  60% {
    transform: translate3d(0%, 2.6666666667vw, 0);
  }
  75% {
    transform: translate3d(-2.6666666667vw, -2.6666666667vw, 0);
  }
  90%, 100% {
    transform: translate3d(0, 0, 0);
  }
}
.p200mdl__store {
  opacity: 0;
  pointer-events: none;
}
.p200mdl__main--title, .p200mdl__main--logo {
  opacity: 0;
  pointer-events: none;
}
.p200mdl__main--bg-wrap {
  transform: scale(1.2);
  filter: blur(10px);
}
.p200mdl.js--loadend .p200mdl__store {
  opacity: 1;
  pointer-events: opacity;
  transition: all 300ms;
  transition-delay: 100ms;
}
.p200mdl.js--loadend .p200mdl__store.sp-hide {
  opacity: 0;
  visibility: hidden;
}
.p200mdl.js--loadend .p200mdl__main--title, .p200mdl.js--loadend .p200mdl__main--logo {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 300ms;
  transition-delay: 300ms;
}
.p200mdl.js--loadend .p200mdl__main--bg-wrap {
  transform: scale(1);
  filter: blur(0px);
  transition: all 300ms;
}
.p200mdl.js--loadend .p200mdl__main--bg-img {
  animation: p200mdl-main 250ms;
  animation-delay: 280ms;
  animation-fill-mode: forwards;
}
@media only screen and (min-width: 767px) {
  .p200mdl.js--loadend .p200mdl__main--bg-img {
    animation: p200mdl-main-pc 250ms;
    animation-delay: 280ms;
    animation-fill-mode: forwards;
  }
}
.p200mdl__catch--bg, .p200mdl__catch--text {
  opacity: 0;
  transform: translate3d(100%, -20%, 0);
}
.p200mdl__catch.js--anime .p200mdl__catch--bg {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__catch.js--anime .p200mdl__catch--text {
  transition: all 300ms;
  transition-delay: 50ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__luffy--img img {
  transform: scale(0);
  opacity: 0;
}
.p200mdl__luffy--img.js--anime img {
  transition: all 340ms;
  transition-timing-function: cubic-bezier(0.24, 0.875, 0.57, 1.45);
  transform: scale(1);
  opacity: 1;
}
.p200mdl__luffy--name img {
  transform: translate3d(20%, 0, 0);
  opacity: 0;
}
.p200mdl__luffy--name.js--anime img {
  transition: all 200ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__luffy--info {
  transform: translate3d(0, 15%, 0);
  opacity: 0;
}
.p200mdl__luffy--info.js--anime {
  transition: all 200ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__campaign--title {
  transform: translate3d(0, 15%, 0);
  opacity: 0;
}
.p200mdl__campaign.js--anime .p200mdl__campaign--title {
  transition: all 200ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock1:not(.js--anime) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.p200mdl__camblock1--kira {
  opacity: 0;
}
.p200mdl__camblock1--attention {
  opacity: 0;
}
.p200mdl__camblock1--title {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--title {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock1--text {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock1--text {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock1--img {
  opacity: 0;
  transform: scale(0);
}
.p200mdl__camblock1.js--anime .p200mdl__camblock1--title {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock1.js--anime .p200mdl__camblock1--kira {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__camblock1.js--anime .p200mdl__camblock1--attention {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__camblock1.js--anime .p200mdl__camblock1--text {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock1.js--anime .p200mdl__camblock1--img {
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.24, 0.875, 0.57, 1.45);
  opacity: 1;
  transform: scale(1);
}
.p200mdl__camblock2:not(.js--anime) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.p200mdl__camblock2--title {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--title {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock2--kira {
  opacity: 0;
}
.p200mdl__camblock2--attention, .p200mdl__camblock2--text {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock2--attention, .p200mdl__camblock2--text {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock2--img {
  opacity: 0;
  transform: scale(0);
}
.p200mdl__camblock2.js--anime .p200mdl__camblock2--title {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock2.js--anime .p200mdl__camblock2--kira {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__camblock2.js--anime .p200mdl__camblock2--attention, .p200mdl__camblock2.js--anime .p200mdl__camblock2--text {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock2.js--anime .p200mdl__camblock2--img {
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.24, 0.875, 0.57, 1.45);
  opacity: 1;
  transform: scale(1);
}
.p200mdl__camblock3:not(.js--anime) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.p200mdl__camblock3--title {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--title {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock3--kira {
  opacity: 0;
}
.p200mdl__camblock3--attention {
  opacity: 0;
}
.p200mdl__camblock3--text {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__camblock3--text {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__camblock3--img {
  opacity: 0;
  transform: scale(0);
}
.p200mdl__camblock3.js--anime .p200mdl__camblock3--title {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock3.js--anime .p200mdl__camblock3--attention {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__camblock3.js--anime .p200mdl__camblock3--kira {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__camblock3.js--anime .p200mdl__camblock3--text {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__camblock3.js--anime .p200mdl__camblock3--img {
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.24, 0.875, 0.57, 1.45);
  opacity: 1;
  transform: scale(1);
}
.p200mdl__goods {
  transform: translate3d(0, 5%, 0);
  opacity: 0;
}
.p200mdl__goods.js--anime {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__sign:not(.js--anime) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.p200mdl__sign--title {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__sign--title {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__sign--kira {
  opacity: 0;
}
.p200mdl__sign--img {
  opacity: 0;
  transform: scale(0);
}
.p200mdl__sign.js--anime .p200mdl__sign--title {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl__sign.js--anime .p200mdl__sign--kira {
  transition: all 200ms;
  opacity: 1;
}
.p200mdl__sign.js--anime .p200mdl__sign--img {
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.24, 0.875, 0.57, 1.45);
  opacity: 1;
  transform: scale(1);
}
.p200mdl__movie {
  opacity: 0;
  transform: translate3d(0, 5.3333333333vw, 0);
}
@media only screen and (min-width: 767px) {
  .p200mdl__movie {
    transform: translate3d(0, 1.4641288433vw, 0);
  }
}
.p200mdl__movie:not(.js--anime) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.p200mdl__movie.js--anime {
  transition: all 300ms;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.p200mdl--btn {
  opacity: 0;
}
.p200mdl--btn.js--anime {
  transition: all 300ms;
  opacity: 1;
}
@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(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateZ(360deg);
  }
}
@keyframes loading-rotate02 {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateZ(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateZ(-360deg);
  }
}
.loading--text.orange {
  animation: loading-text01 1000ms ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 100ms;
}

.loading--text.blue {
  animation: loading-text02 1000ms ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 100ms;
}

.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 650000ms 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 650000ms 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 650000ms 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 650000ms 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 650000ms 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 650000ms 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 400ms;
  transition-delay: 200ms;
  pointer-events: none;
}

@keyframes rumble {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: translate(8px, 0px);
  }
  40% {
    transform: translate(-6px, -6px);
  }
  60% {
    transform: translate(6px, -8px);
  }
  80%, 100% {
    transform: rotate(0deg);
  }
}
@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-stage--img.luffy, .top-steam--img.luffy, .top-howto--img.luffy, .top-chara--img.luffy {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.top-stage--img.coin, .top-steam--img.coin, .top-howto--img.coin, .top-chara--img.coin {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.top-stage--movie, .top-stage--movie-bg, .top-steam--movie, .top-steam--movie-bg, .top-howto--movie, .top-howto--movie-bg, .top-chara--movie, .top-chara--movie-bg {
  opacity: 0;
  transform: scale(0) rotate(-12.25deg);
}
@media only screen and (min-width: 767px) {
  .top-stage--movie, .top-stage--movie-bg, .top-steam--movie, .top-steam--movie-bg, .top-howto--movie, .top-howto--movie-bg, .top-chara--movie, .top-chara--movie-bg {
    transform: scale(0) rotate(-12.25deg);
  }
}
.top-stage--tit, .top-steam--tit, .top-howto--tit, .top-chara--tit {
  transform: scale(1.4);
  opacity: 0;
}
.top-stage--line, .top-steam--line, .top-howto--line, .top-chara--line {
  transform: translate3d(-11%, 7%, 0);
  opacity: 0;
}
.top-stage--btn, .top-steam--btn, .top-howto--btn, .top-chara--btn {
  opacity: 0;
  transform: translate3d(-10%, 0, 0);
}
@media only screen and (min-width: 767px) {
  .top-stage--btn, .top-steam--btn, .top-howto--btn, .top-chara--btn {
    transform: translate3d(-11%, 7%, 0) rotate(-12deg);
  }
}
.top-stage--icon, .top-steam--icon, .top-howto--icon, .top-chara--icon {
  transform: scale(1.4);
  opacity: 0;
}
.top-chara--slide, .top-stage--slide {
  opacity: 0;
}
.top-steam--movie {
  opacity: 1;
  transform: none;
}
.top.top.js--loadend .top-main--mv-img {
  transition: all 400ms;
  transform: scale(1);
  filter: blur(0px);
}
.top.top.js--loadend .top-main--mv-wrap {
  animation: mv-zoom 40000ms linear infinite;
  animation-direction: alternate;
  animation-delay: 400ms;
}
.top.top.js--loadend .top-main--line1 {
  transition: all 400ms;
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}
.top.top.js--loadend .top-main--line2 {
  transition: all 400ms;
  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: 200ms;
}
.top.top.js--loadend .top-main--logo span {
  animation: rumble 200ms linear infinite;
  animation-delay: 370ms;
  animation-iteration-count: 1;
}
.top.top.js--loadend .top-main--logo span img {
  transform: scale(1);
  transition: all 300ms;
  transition-delay: 200ms;
  transition-timing-function: cubic-bezier(0.04, 0.355, 0.425, 1.43);
}
.top.top.js--loadend .top-main--store {
  transition: opacity 400ms;
  transition-delay: 200ms;
  opacity: 1;
}

.top-about--feature-read span {
  opacity: 0;
}
.top-about--feature-read span img {
  transform: scale(1.4);
}
.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 200ms linear infinite;
  animation-delay: 170ms;
  animation-iteration-count: 1;
}
.js--anime.top-about--feature-read span {
  opacity: 1;
  transition: opacity 0ms;
  transition-delay: 0ms;
}
.js--anime.top-about--feature-read span img {
  transform: scale(1);
  transition: all 300ms;
  transition-delay: 0ms;
  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 400ms;
  transition-delay: 100ms;
}
.js--anime .top-about--feature-chara__item.item-chara1-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 50ms;
}
.js--anime .top-about--feature-chara__item.item-chara1-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 50ms;
}
.js--anime .top-about--feature-chara__item.item-chara2-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 100ms;
}
.js--anime .top-about--feature-chara__item.item-chara2-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 100ms;
}
.js--anime .top-about--feature-chara__item.item-chara3-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 150ms;
}
.js--anime .top-about--feature-chara__item.item-chara3-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 150ms;
}
.js--anime .top-about--feature-chara__item.item-chara4-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 200ms;
}
.js--anime .top-about--feature-chara__item.item-chara4-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 200ms;
}
.js--anime .top-about--feature-chara__item.item-chara5-l {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 250ms;
}
.js--anime .top-about--feature-chara__item.item-chara5-r {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
  transition-delay: 250ms;
}
.js--anime .catch-1 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
}
.js--anime .catch-2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
}
@media only screen and (max-width: 767px) {
  .js--anime .catch-2 {
    transform: translate3d(0, 0, 0) rotate(-0.7deg);
  }
}
.js--anime .top-howto--img.luffy, .js--anime .top-howto--img.coin {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
}
.js--anime .top-howto--movie,
.js--anime .top-howto--movie-bg {
  opacity: 1;
  transform: scale(1) rotate(-12.25deg);
  transition: all 300ms;
}
@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-stage--tit,
.js--anime .top-steam--tit,
.js--anime .top-chara--tit,
.js--anime .top-howto--tit {
  transform: scale(1);
  opacity: 1;
  transition: all 200ms;
  transition-delay: 300ms;
}
@media only screen and (min-width: 767px) {
  .js--anime .top-stage--line,
  .js--anime .top-steam--line,
  .js--anime .top-chara--line,
  .js--anime .top-howto--line {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all 300ms;
    transition-property: opacity, transform;
    transition-duration: 100ms, 300ms;
    transition-delay: 500ms, 500ms;
  }
}
.js--anime .top-stage--btn,
.js--anime .top-steam--btn,
.js--anime .top-chara--btn,
.js--anime .top-howto--btn {
  opacity: 1;
  transition: all 300ms;
  transition-property: opacity, transform;
  transition-duration: 100ms, 300ms;
  transition-delay: 660ms, 660ms;
  transform: translate3d(0, 0, 0);
}
@media only screen and (min-width: 767px) {
  .js--anime .top-stage--btn,
  .js--anime .top-steam--btn,
  .js--anime .top-chara--btn,
  .js--anime .top-howto--btn {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }
}
.js--anime .top-chara--slide,
.js--anime .top-stage--slide {
  opacity: 1;
  transition: opacity 300ms;
}
.js--anime .top-steam--icon {
  transform: scale(1);
  opacity: 1;
  transition: all 200ms;
  transition-delay: 900ms;
}

@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 300ms;
  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 400ms forwards;
}
@media only screen and (min-width: 767px) {
  .chara-main--illust-img.js--hide img {
    animation: chara-detail-out 400ms forwards;
  }
}
.chara-main--illust-img.js--show img {
  animation: chara-detail-in-sp 400ms forwards;
}
@media only screen and (min-width: 767px) {
  .chara-main--illust-img.js--show img {
    animation: chara-detail-in 400ms forwards;
  }
}
.chara-main--ui-btn {
  pointer-events: auto;
}
.chara-main--ui-btn.js--hide {
  display: none;
}
.chara-main--bg-item {
  transition: opacity 200ms;
  transition-timing-function: linear;
}
.chara-main--type-list {
  transition: opacity 200ms;
  transition-timing-function: linear;
}
.chara-main--skill-data__list {
  transition: opacity 200ms;
  transition-timing-function: linear;
}
.chara-main[data-style="0"] .chara-main--illust-img.illust-2d img {
  animation-delay: 600ms;
}

.chara-main--skill-name,
.chara-main--skill-data div,
.chara-main--data-catch,
.chara-main--type,
.chara-main--data-name span,
.chara-main--mode,
.chara-main--ui,
#js-chara--slide,
.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--skill-data div,
.chara-main--data-catch,
.chara-main--type,
.chara-main--skill-name,
.chara-main--data-name span {
  transform: translate3d(6.6666666667vw, 0, 0);
}
@media only screen and (min-width: 767px) {
  .chara-main--skill-data div,
  .chara-main--data-catch,
  .chara-main--type,
  .chara-main--skill-name,
  .chara-main--data-name span {
    transform: translate3d(3.6603221083vw, 0, 0);
  }
}

.js--loadend .chara-main--skill-name,
.js--loadend .chara-main--skill-data div,
.js--loadend .chara-main--data-catch,
.js--loadend .chara-main--type,
.js--loadend .chara-main--data-name span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 200ms;
}
.js--loadend .chara-main--data,
.js--loadend .chara-main--mode,
.js--loadend #js-chara--slide,
.js--loadend .chara-subnavi--scrollbar {
  opacity: 1;
  transition: opacity 400ms;
}
@media only screen and (max-width: 767px) {
  .js--loadend .chara-main--data-name {
    opacity: 1;
    transition: opacity 400ms;
  }
}
.js--loadend .chara-main--mode,
.js--loadend .chara-main--ui {
  opacity: 1;
  transition: opacity 580ms;
}
.js--loadend .chara-main--data {
  transition: all 600ms;
}
.js--loadend .chara-main--data,
.js--loadend #js-chara--slide,
.js--loadend .chara-subnavi--scrollbar {
  transition-delay: 100ms;
}
.js--loadend .chara-main--data-catch {
  transition-delay: 100ms;
}
.js--loadend .chara-main--mode {
  transition-delay: 100ms;
}
.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: 0ms;
}

.stage-index--list-item {
  opacity: 0;
  pointer-events: none;
}

.js--loadend .stage-index--list-item {
  pointer-events: auto;
  animation: fade-in-up 300ms;
  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 400ms;
  transform: scale(1);
  transition-delay: 350ms;
}
.js--loadhide .stage-main--title {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: all 300ms;
  transition-delay: 550ms;
}
.js--loadhide .stage-main--minimap, .js--loadhide .stage-main--thumbs {
  opacity: 1;
  transition: opacity 400ms;
  transition-delay: 750ms;
}
.js--loadhide .stage-main .swiper-button-next {
  opacity: 1;
  transition: opacity 400ms;
  transition-delay: 750ms;
}
@media only screen and (min-width: 767px) {
  .js--loadhide.js--animeend .stage-main .swiper-button-prev,
  .js--loadhide.js--animeend .stage-main .swiper-button-next {
    transition: 0.3s;
    transition-delay: 0s;
  }
  .js--loadhide.js--animeend .stage-main .swiper-button-prev:hover,
  .js--loadhide.js--animeend .stage-main .swiper-button-next:hover {
    opacity: 0.7;
  }
}
.js--loadhide.js--animeend .stage-main .swiper-button-prev.swiper-button-disabled,
.js--loadhide.js--animeend .stage-main .swiper-button-next.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-roll--tit img, .howto-ele--tit img, .howto-mode--tit img {
  will-change: opacity;
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .howto-mode--tit-bg:before, .howto-ele--tit-bg:before, .howto-roll--tit-bg:before {
    display: block;
    content: "";
    will-change: left;
  }
  .howto-mode--tit-bg:after, .howto-ele--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--tit img, .howto-mode--block {
  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 400ms;
}
.js--loadend .howto-main .catch-1,
.js--loadend .howto-main .catch-2 {
  opacity: 1;
  transform: none;
  transition: all 400ms;
  transition-property: opacity, transform;
  transition-duration: 0ms, 400ms;
  transition-delay: 100ms, 100ms;
}

.js--anime .slide-progress .swiper-slide img.on {
  transition: 0ms !important;
}
.js--anime .howto-roll--tit img, .js--anime .howto-ele--tit img {
  opacity: 1;
  transition: all 500ms;
}
.js--anime .howto-ele--img {
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}
.js--anime .howto-ele--text {
  opacity: 1;
  transition: all 400ms;
  transition-delay: 200ms;
}
.js--anime .howto-slide--chara-item {
  opacity: 1;
  transform: scale(1);
  transition: all 400ms;
}
@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 200ms !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 200ms !important;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-mode--tit-bg, .js--anime .howto-ele--tit-bg, .js--anime .howto-roll--tit-bg {
    transition: 250ms;
  }
  .js--anime .howto-mode--tit-bg:before, .js--anime .howto-ele--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-mode--tit-bg:before, .js--anime .howto-ele--tit-bg:before, .js--anime .howto-roll--tit-bg:before {
    left: -32%;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime .howto-mode--tit-bg:after, .js--anime .howto-ele--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-mode--tit-bg:after, .js--anime .howto-ele--tit-bg:after, .js--anime .howto-roll--tit-bg:after {
    right: -32%;
  }
}
.js--anime .howto-hint--tit {
  opacity: 1;
  transition: opacity 400ms;
}
.js--anime .howto-hint--line {
  transition: all 400ms;
  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: 500ms;
  }
}
.js--anime .howto-hint--detail {
  opacity: 1;
  transition: opacity 400ms;
  transition-delay: 400ms;
}
.js--anime .howto-hint--slide {
  opacity: 1;
  transition: opacity 400ms;
  transition-delay: 400ms;
}
.js--anime.howto-mode--tit img {
  opacity: 1;
  transition: all 400ms;
}
.js--anime.howto-mode--block {
  opacity: 1;
  transition: all 400ms;
}

.steam-main--img {
  transform: scale(1.25);
}
@media only screen and (min-width: 767px) {
  .steam-content--tit-bg:before {
    display: block;
    content: "";
    will-change: left;
  }
  .steam-content--tit-bg:after {
    display: block;
    content: "";
    will-change: right;
  }
}
.steam-content--tit img, .steam-content--spec, .steam-content--login, .steam-content--faq {
  will-change: opacity;
  opacity: 0;
}
.steam-content--frame.js--scroll, .steam-content--block.js--scroll {
  will-change: opacity;
  opacity: 0;
}
@media only screen and (min-width: 767px) {
  .steam-content--frame.js--scroll, .steam-content--block.js--scroll {
    will-change: opacity;
    opacity: 1;
  }
}

.js--loadend .steam-main--img {
  transform: scale(1);
  transition: transform 400ms;
}

.js--anime.steam-main--tit img {
  opacity: 1;
  transition: all 400ms;
}
@media only screen and (min-width: 767px) {
  .js--anime.steam-main--tit-bg {
    transition: 250ms;
  }
  .js--anime.steam-main--tit-bg:before {
    display: block;
    content: "";
    transition: 250ms;
    left: -18%;
  }
}
@media only screen and (min-width: 767px) and (min-width: 767px) {
  .js--anime.steam-main--tit-bg:before {
    left: -32%;
  }
}
@media only screen and (min-width: 767px) {
  .js--anime.steam-main--tit-bg:after {
    display: block;
    content: "";
    transition: 250ms;
    right: -18%;
  }
}
@media only screen and (min-width: 767px) and (min-width: 767px) {
  .js--anime.steam-main--tit-bg:after {
    right: -32%;
  }
}
.js--anime.steam-content--tit img {
  opacity: 1;
  transition: all 400ms;
}
.js--anime.steam-content--frame {
  opacity: 1;
  transition: all 400ms;
}
.js--anime.steam-content--block, .js--anime.steam-content--spec, .js--anime.steam-content--login, .js--anime.steam-content--faq {
  opacity: 1;
  transition: all 400ms;
}
.js--anime.steam-content--block__tit-bg {
  transition: 250ms;
}
.js--anime.steam-content--block__tit-bg:before {
  display: block;
  content: "";
  transition: 250ms;
  left: 0%;
}
.js--anime.steam-content--block__tit-bg:after {
  display: block;
  content: "";
  transition: 250ms;
  right: 0%;
}
/*# sourceMappingURL=../maps/style.css.map */