@charset "UTF-8";
@font-face {
  font-family: "ange-default";
  src: url("../../font/FOT-ChiaroStd-B.otf") format("opentype");
}
body {
  width: 100vw;
  overflow-x: hidden;
  font-feature-settings: "palt";
  font-family: "ange-default", sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 1.0416666667vw;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  width: 100%;
  height: 100%;
}

#container {
  width: 100vw;
  height: auto;
  background: url("/sp/image/top/pattern_bg.png") top left/contain repeat;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#menu {
  width: 110vw;
  height: 100vh; /*ナビの高さ*/
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  position: fixed;
  /*ナビのスタート位置と形状*/
  top: -100vh;
  right: -5vw;
  /*動き*/
  overflow-y: scroll;
  flex-direction: column;
  transition: all 0.6s;
  z-index: 999;
  /*ナビゲーションの縦スクロール*/
}
#menu.active {
  top: 0;
}
#menu .titleLogo {
  width: 100vw;
  height: 20.3125vw;
  background: url("/sp/image/menu/menu_logo.png") top left/contain no-repeat;
  background-position: top 0 left 28.9583333333vw;
  background-size: 42.0833333333vw 20.3125vw;
  position: absolute;
  top: 0;
  left: 5vw;
}
#menu nav {
  width: 100vw;
  height: auto;
  position: absolute;
  top: 20.3125vw;
  left: 5vw;
  z-index: 999;
}
#menu ul {
  width: 100vw;
  height: auto;
  background-color: #1a213d;
  display: flex;
  position: relative;
  flex-direction: column;
  border-top: solid 0.2083333333vw #f2f7fe;
  border-bottom: solid 0.2083333333vw #f2f7fe;
  z-index: 999;
  justify-content: center;
}
#menu ul .itemWrap {
  width: 100vw;
  height: 8.125vw;
  position: relative;
}
#menu ul .itemWrap:last-of-type {
  margin-bottom: 5.7291666667vw;
}
#menu ul .itemWrap:first-of-type {
  margin-top: 5.7291666667vw;
}
#menu ul .itemWrap:not(:last-of-type) {
  margin-bottom: 1.4583333333vw;
}
#menu ul .itemWrap .item {
  width: 100vw;
  height: 8.125vw;
  background: url("/sp/image/menu/menu_tab_base.png") top left no-repeat;
  background-size: 100vw 8.125vw;
  position: absolute;
  top: 0;
  left: 0;
}
#menu ul .itemWrap .item img {
  width: 44.6875vw;
  height: 5.7291666667vw;
  position: absolute;
  top: 1.1458333333vw;
  left: 27.65625vw;
}
#menu ul .itemWrap.disable {
  pointer-events: none;
}
#menu ul .itemWrap.disable .item::after {
  width: 100vw;
  height: 8.125vw;
  background: url("/sp/image/menu/header_disabled.png") top left/contain no-repeat;
  background-size: 100vw 8.125vw;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
#menu .topBtn {
  width: 100vw;
  height: 20.4166666667vw;
  background: url("/sp/image/menu/footer_top.png") top left/contain no-repeat;
  background-position: top 0 left 44.1666666667vw;
  background-size: 12.2916666667vw 12.2916666667vw;
  position: absolute;
  top: 98.9583333333vw;
  left: 5vw;
}

.menuBtn {
  width: 8.125vw;
  height: 8.125vw;
  background: url("/sp/image/menu/menu_btn.png") top left/contain no-repeat;
  position: fixed;
  top: 4.4791666667vw;
  right: 2.6041666667vw;
  transition: all 0.6s;
  z-index: 9999; /*ボタンを最前面に*/
}
.menuBtn.active {
  background: url("/sp/image/menu/menu_close_btn.png") top left/contain no-repeat;
  transform: rotateZ(-360deg);
}

#fv {
  width: 100vw;
  height: auto;
  position: relative;
}
#fv .bgImg {
  width: 100vw;
  height: auto;
  position: relative;
}
#fv .mainLogo {
  width: 73.75vw;
  height: 36.7708333333vw;
  background: url("/sp/image/top/main_logo.png") top left/contain no-repeat;
  position: absolute;
  top: 45.8333333333vw;
  left: 13.125vw;
}

#announcement {
  position: relative;
  width: 100vw;
  height: auto;
  margin-top: 1rem;
  padding-bottom: 3rem;
}
#announcement > div {
  width: 88.9583333333vw;
  margin: 0 auto;
  padding-bottom: 8.3333333333vw;
  font-size: 6rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 1.5rem #d7ddef;
  padding: 1rem;
  border: solid 0.4rem #fff;
  background-color: #464388;
}
#announcement > div:hover {
  opacity: 0.7;
}

#mainContent {
  width: 100vw;
  height: auto;
  position: relative;
  margin-top: -33.3333333333vw;
}

#bannerWrap {
  width: 100vw;
  position: relative;
}
#bannerWrap > div {
  width: 93.75vw;
  margin: 0 auto;
}
#bannerWrap > div > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5vw;
  gap: 3.75vw 4.1666666667vw;
}
#bannerWrap > div > div.btnFAQWrap {
  justify-content: flex-end;
  width: 87vw;
  margin-bottom: 5vw;
}
#bannerWrap > div > div:first-of-type {
  margin-top: 0;
}
#bannerWrap > div > div.shareBtn {
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}
#bannerWrap > div > div a {
  display: block;
  width: auto;
  height: 12.5vw;
  margin-bottom: 2rem;
}
#bannerWrap > div > div a.btnFAQ {
  height: 15.1041666667vw;
  margin-bottom: 2rem;
}
#bannerWrap > div > div a.shareText {
  height: 4.1666666667vw;
  margin-top: 2.5vw;
}
#bannerWrap > div > div a.twitter, #bannerWrap > div > div a.line {
  height: 10.4166666667vw;
  margin: 0 2.0833333333vw;
}
#bannerWrap > div > div a img {
  display: block;
  width: auto;
  height: 100%;
}

#progress,
#story,
#world,
#spec,
#system {
  width: 100vw;
  height: auto;
  position: relative;
}
#progress .title,
#story .title,
#world .title,
#spec .title,
#system .title {
  width: 98.0208333333vw;
  height: 12.5vw;
  margin: 0 auto;
  background: url("/sp/image/top/title_base.png") top left/contain no-repeat;
  position: relative;
}
#progress .title::before,
#story .title::before,
#world .title::before,
#spec .title::before,
#system .title::before {
  width: 41.6666666667vw;
  height: 11.0416666667vw;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -20.8333333333vw;
  content: "";
}

#story .imgList,
#system .imgList,
#world .imgList,
#progress .imgList {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#story .imgList .naviImg,
#system .imgList .naviImg,
#world .imgList .naviImg,
#progress .imgList .naviImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#story .imgList .naviImg.showing,
#system .imgList .naviImg.showing,
#world .imgList .naviImg.showing,
#progress .imgList .naviImg.showing {
  pointer-events: auto;
  opacity: 1;
  -webkit-animation-fill-mode: forwards;
}
#story .imgList .naviImg.show_R,
#system .imgList .naviImg.show_R,
#world .imgList .naviImg.show_R,
#progress .imgList .naviImg.show_R {
  -webkit-animation: navi_slidein_r 0.5s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}
#story .imgList .naviImg.hide_R,
#system .imgList .naviImg.hide_R,
#world .imgList .naviImg.hide_R,
#progress .imgList .naviImg.hide_R {
  -webkit-animation: navi_slideout_r 0.5s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}
#story .imgList .naviImg.show_L,
#system .imgList .naviImg.show_L,
#world .imgList .naviImg.show_L,
#progress .imgList .naviImg.show_L {
  -webkit-animation: navi_slidein_l 0.5s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}
#story .imgList .naviImg.hide_L,
#system .imgList .naviImg.hide_L,
#world .imgList .naviImg.hide_L,
#progress .imgList .naviImg.hide_L {
  -webkit-animation: navi_slideout_l 0.5s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}
#story .imgList img,
#system .imgList img,
#world .imgList img,
#progress .imgList img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#story .arrowBtn,
#system .arrowBtn,
#world .arrowBtn,
#progress .arrowBtn {
  width: 5.5208333333vw;
  height: 7.7083333333vw;
  position: absolute;
}
#story .arrowBtn[data-side=L],
#system .arrowBtn[data-side=L],
#world .arrowBtn[data-side=L],
#progress .arrowBtn[data-side=L] {
  background: url("/sp/image/top/arrow_l.png") top left/contain no-repeat;
  left: 0.7291666667vw;
}
#story .arrowBtn[data-side=R],
#system .arrowBtn[data-side=R],
#world .arrowBtn[data-side=R],
#progress .arrowBtn[data-side=R] {
  background: url("/sp/image/top/arrow_r.png") top left/contain no-repeat;
  right: 0.7291666667vw;
}
#story .indicatorWrap,
#system .indicatorWrap,
#world .indicatorWrap,
#progress .indicatorWrap {
  width: 100vw;
  margin-top: 2.9166666667vw;
  margin-bottom: 6.25vw;
  display: flex;
  justify-content: center;
}
#story .indicatorWrap .indicator,
#system .indicatorWrap .indicator,
#world .indicatorWrap .indicator,
#progress .indicatorWrap .indicator {
  width: 2.9166666667vw;
  height: 2.9166666667vw;
  background-color: #464388;
  position: relative;
  border: solid 0.4166666667vw #f2f7fe;
  border-radius: 50%;
}
#story .indicatorWrap .indicator:not(:last-of-type),
#system .indicatorWrap .indicator:not(:last-of-type),
#world .indicatorWrap .indicator:not(:last-of-type),
#progress .indicatorWrap .indicator:not(:last-of-type) {
  margin-right: 2.1875vw;
}
#story .indicatorWrap .indicator.on::before,
#system .indicatorWrap .indicator.on::before,
#world .indicatorWrap .indicator.on::before,
#progress .indicatorWrap .indicator.on::before {
  width: 1.4583333333vw;
  height: 1.4583333333vw;
  background-color: #b9beff;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
}

/**
* プログレス
*/
#progress .title::before {
  background: url("/sp/image/top/title_progress_txt.png") top center/contain no-repeat;
}
#progress .characterArea {
  width: 100vw;
  height: auto;
  margin-top: 3.8541666667vw;
  position: relative;
}
#progress .characterArea .bgImg {
  width: 100vw;
  height: auto;
  position: relative;
}
#progress .characterArea .magicList {
  width: 100vw;
  height: 10.3125vw;
  display: flex;
  position: absolute;
  top: 2.3958333333vw;
  left: 0;
  justify-content: center;
}
#progress .characterArea .magicList .magicBtn {
  width: 19.1666666667vw;
  height: 7.0833333333vw;
  background-size: 19.1666666667vw 7.0833333333vw;
  position: relative;
}
#progress .characterArea .magicList .magicBtn[data-attr=BLUE] {
  background: url("/sp/image/magic/tab_blue_off.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr=BLACK] {
  background: url("/sp/image/magic/tab_black_off.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr=RED] {
  background: url("/sp/image/magic/tab_red_off.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr=WHITE] {
  background: url("/sp/image/magic/tab_white_off.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr=GREEN] {
  background: url("/sp/image/magic/tab_green_off.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr=BLUE] {
  background: url("/sp/image/magic/tab_blue_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr=BLACK] {
  background: url("/sp/image/magic/tab_black_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr=RED] {
  background: url("/sp/image/magic/tab_red_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr=WHITE] {
  background: url("/sp/image/magic/tab_white_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr=GREEN] {
  background: url("/sp/image/magic/tab_green_on.png") top left/contain no-repeat;
}
#progress .characterArea .charaImgWrap {
  width: 100vw;
  height: 110vw;
  position: absolute;
  top: 15.625vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList {
  width: 95.8333333333vw;
  height: 110vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg h3 {
  position: absolute;
  top: 1.4583333333vw;
  left: 2.5vw;
  width: 45.8333333333vw;
  margin: 0;
  text-align: center;
  font-size: 3.6rem;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .description {
  position: absolute;
  top: 95.8333333333vw;
  left: 6.7708333333vw;
  width: 82.7083333333vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .description p {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.3;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile {
  position: absolute;
  top: 62.7083333333vw;
  left: 3.5416666667vw;
  width: 88.5416666667vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt {
  position: absolute;
  width: 21.875vw;
  height: 5.2083333333vw;
  color: #ffffff;
  font-size: 2.7rem;
  text-align: center;
  white-space: nowrap;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(1) {
  top: 0;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(2) {
  top: 0;
  left: 48.9583333333vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(3) {
  top: 10.625vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(4) {
  top: 10.8333333333vw;
  left: 48.9583333333vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(5) {
  top: 21.4583333333vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt:nth-of-type(6) {
  top: 21.875vw;
  left: 48.9583333333vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd {
  position: absolute;
  width: 38.5416666667vw;
  height: 5.4166666667vw;
  margin: 0;
  font-size: 2.7rem;
  text-align: center;
  white-space: nowrap;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(1) {
  top: 4.375vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(2) {
  top: 4.375vw;
  left: 50vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(3) {
  top: 14.7916666667vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(4) {
  top: 14.7916666667vw;
  left: 50vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(5) {
  top: 25.625vw;
  left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd:nth-of-type(6) {
  top: 25.625vw;
  left: 48.9583333333vw;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast {
  position: absolute;
  top: 46.6666666667vw;
  right: 3.125vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 28.125vw;
  margin: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl {
  width: 100%;
  text-align: right;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl dt {
  display: inline-block;
  padding-right: 3.125vw;
  font-size: 2.8rem;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl dd {
  display: inline-block;
  margin: 0;
  font-size: 2.8rem;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg.blue h3, #progress .characterArea .charaImgWrap .imgList .naviImg.blue .profile dd, #progress .characterArea .charaImgWrap .imgList .naviImg.blue .cast dt, #progress .characterArea .charaImgWrap .imgList .naviImg.blue .cast dd, #progress .characterArea .charaImgWrap .imgList .naviImg.blue .description {
  color: #1c46ce;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.black h3, #progress .characterArea .charaImgWrap .imgList .naviImg.black .profile dd, #progress .characterArea .charaImgWrap .imgList .naviImg.black .cast dt, #progress .characterArea .charaImgWrap .imgList .naviImg.black .cast dd, #progress .characterArea .charaImgWrap .imgList .naviImg.black .description {
  color: #663c91;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.red h3, #progress .characterArea .charaImgWrap .imgList .naviImg.red .profile dd, #progress .characterArea .charaImgWrap .imgList .naviImg.red .cast dt, #progress .characterArea .charaImgWrap .imgList .naviImg.red .cast dd, #progress .characterArea .charaImgWrap .imgList .naviImg.red .description {
  color: #b50000;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.white h3, #progress .characterArea .charaImgWrap .imgList .naviImg.white .profile dd, #progress .characterArea .charaImgWrap .imgList .naviImg.white .cast dt, #progress .characterArea .charaImgWrap .imgList .naviImg.white .cast dd, #progress .characterArea .charaImgWrap .imgList .naviImg.white .description {
  color: #a16a00;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.green h3, #progress .characterArea .charaImgWrap .imgList .naviImg.green .profile dd, #progress .characterArea .charaImgWrap .imgList .naviImg.green .cast dt, #progress .characterArea .charaImgWrap .imgList .naviImg.green .cast dd, #progress .characterArea .charaImgWrap .imgList .naviImg.green .description {
  color: #248112;
}
#progress .characterArea .charaImgWrap .arrowBtn {
  bottom: 67.6041666667vw;
}

/**
* ストーリー
*/
#story .title::before {
  background: url("/sp/image/top/title_story_txt.png") top center/contain no-repeat;
}
#story .contentBody {
  position: relative;
  width: 100%;
  height: 129.1666666667vw;
}
#story .contentBody .indicatorWrap {
  position: absolute;
  bottom: 4rem;
}
#story .contentBody .arrowBtn[data-side=L],
#story .contentBody .arrowBtn[data-side=R] {
  top: 45%;
}
#story .contentBody .storyImgWrap {
  position: relative;
  height: 100%;
  background-image: url(../image/top/story_chara_bg.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  overflow: visible;
}
#story .contentBody .storyImgWrap .imgList {
  position: relative;
  height: 100%;
}
#story .contentBody .storyImgWrap .imgList .naviImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8.7%;
  padding-bottom: 14rem;
}
#story .contentBody p {
  margin-top: 4rem;
  margin-bottom: 0;
  font-size: 3.4rem;
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
}
#story .contentBody .contentBody p:first-of-type {
  margin-top: 0;
}

/**
* 世界観
*/
#world .title::before {
  background: url("/sp/image/top/title_world_txt.png") top center/contain no-repeat;
}
#world .worldImgWrap {
  width: 100vw;
  height: 83.5416666667vw;
  margin-top: 5.7291666667vw;
  position: relative;
}
#world .worldImgWrap .imgList {
  width: 92.1875vw;
  height: 83.5416666667vw;
}
#world .worldImgWrap .imgList .naviImg .textBody {
  position: absolute;
  top: 54.1666666667vw;
  left: 7.2916666667vw;
  width: 81.25vw;
}
#world .worldImgWrap .imgList .naviImg .textBody p {
  margin: 0 0 0.7em;
  font-size: 2.8rem;
  line-height: 1.45;
}
#world .worldImgWrap .imgList .naviImg.blue .textBody p {
  color: #1c46ce;
}
#world .worldImgWrap .imgList .naviImg.black .textBody p {
  color: #663c91;
}
#world .worldImgWrap .imgList .naviImg.red .textBody p {
  color: #b50000;
}
#world .worldImgWrap .imgList .naviImg.white .textBody p {
  color: #a16a00;
}
#world .worldImgWrap .imgList .naviImg.green .textBody p {
  color: #248112;
}
#world .worldImgWrap .arrowBtn {
  top: 38.8541666667vw;
}

/**
* システム
*/
#system .title::before {
  background: url("/sp/image/top/title_system_txt.png") top center/contain no-repeat;
}
#system .systemImgWrap {
  width: 100vw;
  height: 83.4375vw;
  margin-top: 5.3125vw;
  position: relative;
}
#system .systemImgWrap .imgList {
  width: 92.1875vw;
  height: 83.4375vw;
}
#system .systemImgWrap .arrowBtn {
  top: 38.6458333333vw;
}
#system .systemImgWrap .imgList img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 1;
}
#system .systemImgWrap .imgList .contentBody {
  width: 78.9583333333vw;
  position: absolute;
  top: 10.4166666667vw;
  left: 7.0833333333vw;
}
#system .systemImgWrap .imgList .screenshot {
  width: 78.9583333333vw;
  height: auto;
  padding: 0.5208333333vw 0;
  position: static;
  border: 1px solid #bfc7e4;
}
#system .systemImgWrap .imgList .screenshot img {
  display: block;
  width: calc(100% - 0.5208333333vw);
  position: static;
  margin-left: 0.5208333333vw;
  pointer-events: none;
  opacity: 1;
}
#system .systemImgWrap .imgList .naviImg h3 {
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  color: #464388;
  font-size: 4.1rem;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}
#system .systemImgWrap .imgList .naviImg .textBody {
  position: static;
  width: 100%;
  margin-top: 2.6041666667vw;
}
#system .systemImgWrap .imgList .naviImg .textBody p {
  margin: 0;
  color: #21307a;
  font-size: 2.8rem;
  line-height: 1.45;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}

/**
*	SNS
*/
#sns {
  width: 100vw;
  height: auto;
  display: flex;
  position: relative;
  flex-direction: column;
}
#sns .bgImg {
  width: 100vw;
  height: 251.6666666667vw;
  background: url("/sp/image/top/sky_bg.png") top left/contain no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
#sns .youtubeWrap,
#sns .twitterWrap {
  width: 79.1666666667vw;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative;
  border: solid 0.4166666667vw #7dbdff;
  border-radius: 5px;
}
#sns .youtubeWrap .title,
#sns .twitterWrap .title {
  width: 40.5208333333vw;
  height: 7.3958333333vw;
  margin-top: 1.9791666667vw;
  margin-right: auto;
  margin-bottom: 2.1875vw;
  margin-left: auto;
  position: relative;
}
#sns .youtubeWrap .linkBtn,
#sns .twitterWrap .linkBtn {
  width: 30.5208333333vw;
  height: 7.7083333333vw;
  margin-top: 2.3958333333vw;
  margin-right: auto;
  margin-left: auto;
  display: block;
  position: relative;
}
#sns .twitterWrap {
  height: 76.7708333333vw;
  margin-top: 10.7291666667vw;
  margin-bottom: 3.2291666667vw;
}
#sns .twitterWrap .title {
  background: url("/sp/image/top/title_twitter.png") top left/contain no-repeat;
}
#sns .twitterWrap .twitterContent {
  width: 71.6666666667vw;
  max-width: 1200px;
  height: 52.0833333333vw;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  overflow: hidden auto;
  border: solid 0.4166666667vw #7dbdff;
}
#sns .twitterWrap .twitterContent iframe .twitter-timeline-rendered {
  width: 71.6666666667vw !important;
}
#sns .youtubeWrap {
  height: 108.8541666667vw;
}
#sns .youtubeWrap .title {
  background: url("/sp/image/top/title_movie.png") top left/contain no-repeat;
}
#sns .youtubeWrap .youtubeList {
  width: 72.1875vw;
  height: 83.3333333333vw;
  margin: 0 auto;
  display: flex;
  position: relative;
  flex-direction: column;
}
#sns .youtubeWrap .youtubeList .iframeWrap {
  width: 72.1875vw;
  height: 40.5208333333vw;
  position: relative;
}
#sns .youtubeWrap .youtubeList .iframeWrap:first-of-type {
  margin-bottom: 2.2916666667vw;
}
#sns .youtubeWrap .youtubeList .iframeWrap iframe {
  width: 72.1875vw;
  height: 40.5208333333vw;
  border: solid 0.4166666667vw #7dbdff; /*線*/
}
#sns .youtubeWrap .youtubeList .iframeWrap a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#news {
  width: 100vw;
  height: auto;
  margin-top: 6.4583333333vw;
  margin-bottom: 10.4166666667vw;
  position: relative;
}
#news .bannerList {
  width: 100vw;
  height: 32.7083333333vw;
  display: flex;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
}
#news .bannerList .bannerImg {
  width: 40.1041666667vw;
  height: 15vw;
  margin-bottom: 2.7083333333vw;
  position: relative;
}
#news .bannerList .bannerImg:nth-of-type(2n) {
  margin-left: 2.1875vw;
}
#news .bannerList .bannerImg img {
  width: 40.1041666667vw;
  height: 15vw;
}

#spec .title::before {
  background: url("/sp/image/top/title_spec_txt.png") top center/contain no-repeat;
}
#spec .info {
  width: 100vw;
  margin-top: 5.8333333333vw;
  background-color: #1a213d;
  border-top: solid 0.2083333333vw #f2f7fe;
  border-bottom: solid 0.2083333333vw #f2f7fe;
  align-items: center;
}
#spec .info .titleLogo {
  width: 56.6666666667vw;
  height: 28.6458333333vw;
  margin: 0 auto;
  background: url("/sp/image/top/main_logo.png") top left/contain no-repeat;
  position: relative;
}
#spec .info .text {
  width: 75vw;
  margin: 0 auto 4.1666666667vw auto;
}
#spec .info .text dl {
  display: flex;
  width: 100%;
  gap: 2.2916666667vw;
  flex-wrap: wrap;
  font-size: 3rem;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 0 6px rgb(0, 0, 0);
}
#spec .info .text dt {
  width: 21.875vw;
  margin: 0;
}
#spec .info .text dd {
  width: 50vw;
  margin: 0;
}

footer {
  width: 100vw;
  height: 27.7083333333vw;
  margin-top: 5.9375vw;
  position: relative;
}
footer .bgImg {
  width: 100vw;
  height: 21.7708333333vw;
  position: absolute;
  bottom: 0;
  left: 0;
}
footer .topBtn {
  width: 12.2916666667vw;
  height: 12.2916666667vw;
  margin-right: auto;
  margin-left: auto;
  background: url("/sp/image/menu/footer_top.png") top left/cover no-repeat;
  display: block;
  position: relative;
}
footer .logoCompany {
  position: relative;
  margin-top: 6.0416666667vw;
  color: #464388;
  font-size: 3rem;
  text-align: center;
  line-height: 1;
  text-shadow: 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255);
}

.hover-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s 0s;
}
.hover-wrap.active {
  pointer-events: auto;
  opacity: 1;
}
.hover-wrap h2 {
  text-align: center;
  color: #7dbdff;
  font-size: 20px;
  line-height: 1em;
  margin: 10px 0;
}
.hover-wrap .hover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1000px;
  height: 80%;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.hover-wrap .hover-content .content-wrap {
  font-size: 16px;
  line-height: 1.5;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  height: 85%;
  padding: 10px 0;
}
.hover-wrap .hover-content .content-wrap div {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}
.hover-wrap .hover-content .content-wrap .color-heading {
  font-size: 18px;
  background-color: #97adc4;
  color: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  text-align: center;
}
.hover-wrap .hover-content .content-wrap .outline {
  border: 1px solid #999;
  padding: 10px;
  margin-bottom: 2px;
  font-size: 12px;
}
.hover-wrap .hover-content .content-wrap .outline span {
  display: inline-block;
  width: 65%;
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
  text-align: center;
}
.hover-wrap .hover-content .content-wrap .outline span:nth-child(1) {
  width: 35%;
  border-right: 1px solid #999;
}
.hover-wrap .hover-content .content-wrap ul {
  font-size: 12px;
  list-style: disc;
  padding-left: 1em;
}
.hover-wrap .hover-content .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background: #000;
  color: #fff;
}
.hover-wrap .hover-content .close-btn:hover {
  background: #333;
}
.hover-wrap .hover-content .close-btn::after {
  content: "×";
}

@keyframes navi_animation {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
  10%, 90% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}
@keyframes navi_slidein_r {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes navi_slidein_l {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes navi_slideout_r {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}
@keyframes navi_slideout_l {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}