body {
  overflow-x: hidden;
  background-image: url(../img/bg_sp.jpg);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}

.kv-outer {
  overflow-x: hidden;
}

.kv-pc {
  display: none;
}

.kv {
  display: block;
  margin-bottom: 0;
}

.loading {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.ratio {
  position: relative
}

.ratio::before {
  float: left;
  content: "";
}

.ratio::after {
  display: block;
  content: "";
  clear: both;
}

.kv {
  position: relative;
  box-sizing: border-box;
  background: url(../img/sp/bg_top.jpg) no-repeat top center;
  background-size: contain;
  text-align: center;
}

.kv::before {
  padding-top: 177%;
}

.kv .chara {
  position: relative;
  opacity: 0;
}

body .kv .chara {
  top: -20px;
}

body .kv .chara1,
body .kv .chara3,
body .kv .chara5,
body .kv .chara7,
body .kv .chara9 {
  left: -20px;
}

body .kv .chara2,
body .kv .chara4,
body .kv .chara6,
body .kv .chara8 {
  left: 20px;
}

body .kv .glow {
  -webkit-animation: glow ease 3s infinite forwards alternate;
  animation: glow ease 3s infinite forwards alternate;
}

@-webkit-keyframes glow {
  0% { opacity: 0.5}
  100% { opacity: 1}
}

@keyframes glow {
  0% { opacity: 0.5}
  100% { opacity: 1}
}

#img-logo,
.kv .chara {
  position: absolute;
  bottom: 6%;
  left: 0;
}

.bg-cross {
  display: none;
}

#img-term {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.term {
  text-align: center;
}

.anchorLink {
  padding: 4%;
  background: #000;
}

.anchorLink.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.anchorLink > ul {
  display: flex;
  justify-content: space-around;
}

.anchorLink > ul > li {
  padding: 0 3%;
}

.anchorLink > ul > li:not(:first-child) {
  background: url(../img/parts/bg_anchor_line.svg) no-repeat left center;
  background-size: 1px 20px;
}

.anchorLink > ul > li > a {
  color: #fff;
}

.section-wrap-outer {
  padding: 0 2.1739%;
}

.section-wrap {
  max-width: 1100px;
  width: 100%;
  margin: auto;
  background: rgba(0, 0, 0, 0.4);
}

/* section.about */

section.about {
  padding: 4% 10% 0;
}

section.about > h2 {
  margin-bottom: 4%;
}

.appArea {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6%
}

.appIcon {
  flex-basis: 27%;
}

.appBanner {
  margin-left: 2%;
}

.btnAbout {
  padding: 0 6%;
}
.footer_about{
  background: #000!important;
}
/* section.chara */

section.chara {
  margin-bottom: 9.9033%;
  padding: 4% 2.4154% 0;
}

section.chara > h2 {
  margin-bottom: 4%;
  /* padding: 0 14.734%; */
}

section.chara .thumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.chara .new-thumb2 {
  justify-content: center;
  gap: 5.26716%;
}

section.chara .thumb.new-thumb {
  margin-bottom: 2.7777%;
}

section.chara .thumb.new-thumb > li {
  width: 20.772%;
}

section.chara .thumb > li {
  width: 15%;
}

section.chara .thumb > li:nth-child(1) {
  margin-bottom: 2%;
}

/* section.dungeon */

section.dungeon {
  position: relative;
  margin-bottom: 7.2463%;
  z-index: 1;
}

section.dungeon .img1,
section.dungeon .img2 {
  position: absolute;
  width: 73%;
  z-index: -1;
}

section.dungeon .img1 {
  top: 13%;
  right: 0;
}

section.dungeon .img2 {
  bottom: 2%;
  left: 0;
}
.spe_dungeon {
    background: url(../img/spdungeon_chara.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 73vw;
    margin: 0 auto;
    position: relative;
}
.spe_dungeon .battleMov {
    position: absolute;
    width: 34vw;
    right: -0.5vw;
    top: 7vw;
    height: 53vw;
    background: url("../img/movie_supedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;
    cursor: pointer;
}
.char_dungeon {
    background: url(../img/challedungeon_chara.png) no-repeat;
    background-size: contain;
    background-position: right;
    width: 100%;
    height: 72vw;
    margin: 0 auto;
    position: relative;
}
.char_dungeon .battleMov2 {
    position: absolute;
    width: 34vw;
    left: 0.5vw;
    top: 13.5vw;
    height: 60vw;
    background: url("../img/movie_charedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;
    cursor: pointer;
}
/* section.campaign */

section.campaign {
  position: relative;
  margin-bottom: 7.2463%;
  z-index: 1;
}
.campaign_box{
  position: relative;
  margin-bottom: 5vw;
}
.campaign_btn01{
  position: absolute;
  bottom: 2vw;
  width: 45vw;
  left: 0;
  right: 0;
  margin: auto;
}
.campaign_btn01 li:first-child{
  margin-bottom: 5vw;
}
.campaign_btn02{
  width: 45vw;
  margin: 0 auto;
}
.campaign_btn02 li:first-child{
  margin-bottom: 5vw;
}
/* section.rezero */

section.rezero {
  padding: 0 5.5555% 5.5555%;
}

section.rezero > .img {
  position: relative;
}

section.rezero > .img > a {
  display: block;
  position: absolute;
  bottom: 3.5%;
  left: 9%;
  width: 80%;
  height: 5%;
  /* background: rgba(255, 0, 0, 0.5); */
  text-indent: -9999px;
}

section.rezero > .img {
  margin-bottom: 4.8309%;
}

.footerOuter {
  background: #000;
}

.footer {
  width: 61.594%;
  margin: auto;
  padding: 0 0 6%;
}

.footer.isPC {
  display: none;
}

.footer > ul {
  display: flex;
}

.footer .copyright {
  margin-top: 3rem;
}

.popup_content {
  background: #796bae;
}

.popup_content a {
  color: #edfe97;
}

.popup {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 300px;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 2rem;
  top: -2rem;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  z-index: 10000;
}
.popup-bg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  opacity: 0;
}

.popup .splide-outer {
  max-width: 960px;
  margin: auto;
}
.popup .splide__slide img {
  width: 100%;
}
.popup .splide__pagination {
  display: none !important;
}
.popup .splide__arrow {
  background: none;
}
.popup .splide__arrow--next {
  right: -1.5rem;
}
.popup .splide__arrow--prev {
  left: -1.5rem;
}

@media screen and (min-width: 737px) {

  body {
    background: url(../img/pc/bg_img.jpg) repeat-y center top;
    background-size: 100% auto;
    background-attachment: fixed;
  }

  .kv {
    overflow: hidden;
    max-width: 1030px;
    height: 550px;
    margin: auto;
    background: none;
  }

  .kv.ratio::before {
    padding-top: 0;
  }

  .kv-outer {
    position: relative;
    /* background: url(../img/pc/bg_top.jpg) no-repeat top center; */
    pointer-events: none;
  }
  .kv_img{
    object-fit: cover;
    width: 100%;
    height: 664px;
  }
  body .kv .chara {
    top: 20px;
  }

  .bg-cross {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    max-width: 1920px;
    z-index: 1;
  }

  #img-term {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    max-width: 1920px;
    height: 54px;
  }

  #img-logo {
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }

  .anchorLink {
    padding: 10px 0;
    text-align: center;
  }

  .anchorLink > ul {
    justify-content: center;
  }

  .appIcon {
    flex-basis: auto;
  }

  .appIcon > img {
    max-width: 78px;
    max-height: 78px;
  }

  section.about {
    width: 580px;
    margin: auto;
    padding: 40px 0;
    background: none;
  }
  .footer_about section.about {
    padding: 40px 0 0;
  }

  section.chara .thumb > li {
    cursor: pointer;
  }

  section.chara .thumb.new-thumb > li {
    width: 21.05%;
  }
  .spe_dungeon {
    background: url(../img/spdungeon_chara.png) no-repeat;
    background-size: contain;
    width: 1000px;
    height: 774px;
    margin: 0 auto 20px;
    position: relative;
}
.spe_dungeon .battleMov {
    position: absolute;
    width: 355px;
    right: 14px;
    top: 76px;
    height: 521px;
    background: url("../img/movie_supedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;
    cursor: pointer;
}
.char_dungeon {
    background: url(../img/challedungeon_chara.png) no-repeat;
    background-size: contain;
    width: 900px;
    height: 824px;
    margin: 0 0 0 145px;
    position: relative;
}
.char_dungeon .battleMov2 {
    position: absolute;
    width: 355px;
    left: -76px;
    top: 145px;
    height: 521px;
    background: url("../img/movie_charedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;
    cursor: pointer;
}
.campaign_box{
  margin-bottom: 40px;
}
.campaign_btn01{
  position: absolute;
  top: 80%;
  width: 41%;
  left: 0;
  right: 0;
  margin: auto;
}
.campaign_btn01 li:first-child{
  margin-bottom: 10%;
}
.campaign_btn02{
  width: 41%;
  margin: 0 auto;
}
.campaign_btn02 li:first-child{
  margin-bottom: 10%;
}
.emi_voice {
  background: url(../img/yaku_emilia.png) no-repeat;
  background-size: contain;
  width: 612px;
  height: 580px;
  margin: 0 0 0 363px;
  position: relative;
}
.emi_voice .battleMov3 {
  position: absolute;
  width: 355px;
  left: -222px;
  top: 42px;
  height: 475px;
  background: url("../img/movie_emilia.png") no-repeat;
  background-size: contain;
  display: block;
  z-index: 800;
  cursor: pointer;
}
.remu_voice {
  background: url(../img/yaku_rem.png) no-repeat;
  background-size: contain;
  width: 612px;
  height: 580px;
  margin: -50px 0 0 124px;
  position: relative;
}
.remu_voice .battleMov4 {
  position: absolute;
  width: 355px;
  right: -246px;
  top: 15px;
  height: 475px;
  background: url("../img/movie_rem.png") no-repeat;
  background-size: contain;
  display: block;
  z-index: 800;
  cursor: pointer;
}
.pete_voice {
  background: url(../img/yaku_petergius.png) no-repeat;
  background-size: contain;
  width: 612px;
  height: 580px;
  margin: -30px 0 0 383px;
  position: relative;
}
.pete_voice .battleMov5 {
  position: absolute;
  width: 355px;
  left: -241px;
  top: 65px;
  height: 475px;
  background: url("../img/movie_petergius.png") no-repeat;
  background-size: contain;
  display: block;
  z-index: 800;
  cursor: pointer;
}

  .popup-inner {
    max-width: 500px;
  }

  .close-btn {
    top: 0;
  }

  section.rezero {
    padding: 0 0 54px;
  }

  section.rezero > .img {
    margin-bottom: 38px;
  }

  section.rezero > .img > a {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }

  /* .footerOuter {
    background: none;
  } */

  .copyright{
    font-size: 14px;
  }

  .footer {
    display: flex;
    width: 970px;
    margin: auto;
  }

  .footer.isSP {
    display: none;
  }

  .footer.isPC {
    display: block;
    width: 100%;
    padding: 0 0 50px;
    background: #000;
  }

  .footer > ul {
    justify-content: center;
  }

  .popup_content {
    max-width: 1000px;
  }

  .spMode .kv {
    width: 100%;
    height: 564px;
  }
}

@media screen and (min-width: 1030px) {
  .kv {
    height: 664px;
  }

}

@media screen and (max-width: 1070px) {
  .spe_dungeon {
    background: url(../img/spdungeon_chara.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 73vw;
    margin: 0 auto;
    position: relative;
}
.spe_dungeon .battleMov {
    position: absolute;
    width: 34vw;
    right: -0.5vw;
    top: 7vw;
    height: 53vw;
    background: url("../img/movie_supedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;
    cursor: pointer;
}
.char_dungeon {
    background: url(../img/challedungeon_chara.png) no-repeat;
    background-size: contain;
    background-position: right;
    width: 100%;
    height: 72vw;
    margin: 0 auto;
    position: relative;
}
.char_dungeon .battleMov2 {
    position: absolute;
    width: 34vw;
    left: 0.5vw;
    top: 13.5vw;
    height: 60vw;
    background: url("../img/movie_charedan.png") no-repeat;
    background-size: contain;
    display: block;
    z-index: 800;

}
.emi_voice {
  width: 100%;
  height: 73vw;
  background: url(../img/yaku_emilia.png) no-repeat;
  background-size: contain;
  margin: 0 auto;
  position: relative;
}
.emi_voice .battleMov3 {
  position: absolute;
  width: 34vw;
  right: -0.5vw;
  top: 7vw;
  height: 53vw;
  background: url("../img/movie_emilia.png") no-repeat;
  background-size: contain;
  display: block;
  z-index: 800;
  cursor: pointer;
}
.remu_voice {
  background: url(../img/yaku_rem.png) no-repeat;
  background-size: contain;
  background-position: right;
  width: 100%;
  height: 72vw;
  margin: 0 auto;
  position: relative;
}
.remu_voice .battleMov4 {
  position: absolute;
  width: 34vw;
  left: 0.5vw;
  top: 13.5vw;
  background: url("../img/movie_rem.png") no-repeat;
  background-size: contain;
  height: 60vw;
  display: block;
  z-index: 800;

}
.pete_voice {
  background: url(../img/yaku_petergius.png) no-repeat;
  background-size: contain;
  background-position: right;
  width: 100%;
  height: 72vw;
  margin: 0 auto;
  position: relative;
}
.pete_voice .battleMov5 {
  position: absolute;
  width: 34vw;
  left: 0.5vw;
  top: 13.5vw;
  height: 60vw;
  background: url("../img/movie_petergius.png") no-repeat;
  background-size: contain;
  display: block;
  z-index: 800;

}
}