@charset "utf-8";

/* =======================================
	common
======================================= */
.pc {
  display: none;
}
.sp {
  display: block;
}

body {
  position: relative;
  width: 100%;
  min-height: 100lvh;
  margin: 0 auto;
  text-align: center;
  color: white;
  line-height: 1;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

body:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url("../images/bg_sp.jpg") center center repeat-y;
  background-size: 100%;
  z-index: -1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
table {
  width: 100%;
}
tr,
td {
  vertical-align: top;
}

a {
  outline: none;
  text-decoration: underline;
}

a:link {
  color: white;
  text-decoration: none;
}
a:visited {
  color: white;
  text-decoration: none;
}
a:hover {
  color: white;
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

/* =======================================
	layout
======================================= */
main {
  position: relative;
  width: 100%;
  min-height: 100lvh;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.4);
}

section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* =======================================
	header
======================================= */
header {
  position: relative;
  width: 100%;
  height: 0;
  background: url("../images/header_sp.jpg") left top no-repeat;
  padding-top: calc(1483 / 828 * 100%);
  background-size: cover;
}

.banner {
  position: absolute;
  bottom: 28%;
  left: 1%;
  width: 26%;
  height: auto;
}

/* =======================================
	navigation
======================================= */
nav {
  position: relative;
  width: 100%;
  padding: 3% 0;
  background: black;
}

nav.fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

nav ul {
  width: 82%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3%;
}

nav ul li:nth-child(2),
nav ul li:nth-child(4) {
  width: 1px;
  height: clamp(0.875rem, 0.25rem + 3.13vw, 1.75rem);
  background: #c588ff;
}

/* =======================================
	download
======================================= */
.download {
  width: 100%;
  margin: 0 auto;
  padding: 5% 0 5%;
}

.download-title {
  width: 76%;
  margin: 0 auto 3%;
}

.download-button {
  width: 76%;
  margin: 0 auto 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
}

.download-link {
  width: 66.3%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* =======================================
	video
======================================= */
.announcement-video {
  width: 95%;
  margin: 5% auto 0;
  display: flex;
  justify-content: center;
}

/* =======================================
	#chara
======================================= */
#chara {
  width: 100%;
  padding: 4% 0 0;
}

#chara h2 {
  width: 100%;
  margin: 0 auto 2%;
  display: flex;
  justify-content: center;
}

.chara_btn {
  width: 50.72%;
  margin: 0 auto 8%;
  display: flex;
  justify-content: center;
}

.godv-title {
  width: 72%;
  margin: 0 auto 2%;
}

.godv-01,
.godv-02 {
  width: 85%;
  margin: 0 auto 4%;
}

/* =======================================
	#contents
======================================= */
#contents {
  width: 100%;
  padding: 4% 0 4%;
}

#contents h2 {
  width: 100%;
  margin: 0 auto 1%;
  display: flex;
  justify-content: center;
}

.sp_dungeon {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.ch_dungeon {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.sp_dungeon_video {
  position: absolute;
  top: 35.2%;
  right: 2.6%;
  width: 34.8%;
  height: auto;
}

.ch_dungeon_video {
  position: absolute;
  top: 33%;
  left: 2.4%;
  width: 34.8%;
  height: auto;
}

.kmission {
  width: 100%;
  margin: 0 auto 2%;
}

.yakuvoice {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
}

.yaku_voice_title {
  width: 80%;
  margin: 0 auto 6%;
}

.yaku_voice_01 {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0 auto 5%;
  background: url("../images/yaku_natsuki.png") left top no-repeat;
  padding-top: calc(440 / 1020 * 100%);
  background-size: cover;
}

.yaku_voice_02 {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0 auto 5%;
  background: url("../images/yaku_reinhard.png") left top no-repeat;
  padding-top: calc(440 / 1020 * 100%);
  background-size: cover;
}

.yaku_voice_03 {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0 auto 3%;
  background: url("../images/yaku_regulus.png") left top no-repeat;
  padding-top: calc(440 / 1020 * 100%);
  background-size: cover;
}

.voice {
  position: absolute;
  width: 30%;
  height: 0;
  padding-top: calc(64 / 310 * 30%);
  background: url("../images/voice_btn_on.png") left top no-repeat;
  background-size: 100% auto;
}

.voice.nowplaying {
  background: url("../images/voice_btn_off.png") left top no-repeat;
  background-size: cover;
}

#btn-play1 {
  bottom: 20.5%;
  left: 9%;
}

#btn-play2 {
  bottom: 20%;
  right: 20%;
}

#btn-play3 {
  bottom: 20%;
  left: 14%;
}

.yaku_voice_etc {
  width: 83.45%;
  margin: 0 auto;
}

.yaku_voice_etc ul {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.45%;
}

/* =======================================
	#cp
======================================= */
#cp {
  width: 100%;
  padding: 4% 0 0;
}

#cp h2 {
  width: 100%;
  margin: 0 auto 4%;
  display: flex;
  justify-content: center;
}

.cp1,
.cp2,
.cp3,
.cp4 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.cp1,
.cp2,
.cp3,
.cp4 {
  margin-bottom: 8%;
}

ul.cpBtns {
  position: relative;
  margin: 5% auto 0;
  width: 46%;
}

ul.cpBtns li:nth-child(1) {
  width: 100%;
  margin: 0 auto 3%;
}

ul.cpBtns li:nth-child(2) {
  width: 50%;
  margin: 0 auto 8%;
}

ul.cpBtns li:nth-child(3) {
  width: 72%;
  margin: 0 auto;
}

/* =======================================
	#about
======================================= */
#about {
  width: 88.89%;
  height: 0;
  padding-top: calc(1012 / 736 * 88.89%);
  background: url("../images/about_sp.png") center top no-repeat;
  background-size: cover;
}

#about a {
  width: 77%;
  height: clamp(1.25rem, 0.179rem + 5.36vw, 2.75rem);
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  margin: auto;
}

.copyright {
  width: 100%;
  margin: 0 auto;
  padding: 9% 0 6%;
  font-size: clamp(0.36rem, 0.046rem + 1.57vw, 0.8rem);
}

/* =======================================
	footer
======================================= */
footer {
  background: black;
  padding: 0 0 8%;
}

footer .download {
  background: transparent;
  padding: 5% 0 3%;
}

footer .download-title {
  margin: 0 auto 5%;
}

footer .foot-download {
  padding: 5% 0 0;
}

.foot-nav {
  width: 70%;
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.foot-nav li {
  display: flex;
  justify-content: center;
}

.foot-nav li:nth-child(1),
.foot-nav li:nth-child(2),
.foot-nav li:nth-child(3) {
  margin-bottom: 5%;
}

.foot-nav li a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foot-nav li img {
  height: clamp(0.75rem, 0.125rem + 3.13vw, 1.625rem);
}

.foot-copytight {
  width: 100%;
  margin: 0 auto;
  font-size: clamp(0.55rem, 0.036rem + 2.57vw, 1rem);
}

.gototop {
  position: fixed;
  bottom: 5%;
  right: 3%;
  z-index: 100;
}

.gototop a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(2.4rem, 1.029rem + 6.86vw, 3.6rem);
  height: clamp(2.4rem, 1.029rem + 6.86vw, 3.6rem);
  color: #2e2e2e;
  text-align: center;
  font-size: clamp(1rem, 0.314rem + 3.43vw, 1.6rem);
  text-decoration: none;
  background: white;
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  main {
    width: 90%;
    max-width: 1100px;
  }

  nav {
    width: 100%;
    height: 80px;
    padding: 0;
  }

  nav ul {
    max-width: 835px;
    height: 80px;
  }

  a,
  button,
  .swiper-button-prev01,
  .swiper-button-next01,
  .mySwiper01Thumb .swiper-wrapper .swiper-slide {
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  nav a:hover,
  .swiper-button-prev01:hover,
  .swiper-button-next01:hover,
  .mySwiper01Thumb .swiper-wrapper .swiper-slide:hover,
  .banner a:hover,
  .download a:hover,
  .chara_btn a:hover,
  .cpBtns a:hover,
  .about-link a:hover,
  .foot-nav a:hover,
  .gototop a:hover {
    -moz-opacity: 0.5;
    opacity: 0.5;
  }

  header {
    background: url("../images/header.jpg") left top no-repeat;
    padding-top: calc(662 / 1920 * 100%);
    background-size: cover;
  }

  .banner {
    width: clamp(4.688rem, -7.602rem + 25.6vw, 10rem);
    position: absolute;
    bottom: 10%;
    left: 22%;
    height: auto;
  }

  .banner.banner-fixed {
    width: clamp(8.5rem, 5.03rem + 7.23vw, 10rem);
  }

  .download {
    width: 52.55%;
    max-width: 596px;
    padding: 5% 0 4%;
  }

  .download-title {
    width: 100%;
  }

  .download-button {
    width: 100%;
    margin: 0 auto 2.4em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2%;
  }

  .download-link {
    width: 86%;
  }

  .announcement-video {
    width: 58.18%;
    margin: 0 auto 3em;
  }

  #chara,
  #contents,
  #cp {
    padding: 3% 0 0;
  }

  #chara h2 {
    width: 88%;
    margin: 0 auto 0.5em;
  }

  .chara_btn {
    width: 36%;
    margin: 0 auto 3.6em;
  }

  .godv-title {
    width: 64%;
    margin: 0 auto 2em;
  }

  .godv-01 {
    width: 79.18%;
    margin: 0 auto 3em;
  }

  .godv-02 {
    width: 78.36%;
    margin: 0 auto 2em;
  }

  #contents h2 {
    width: 92%;
    margin: 0 auto 1%;
  }

  .sp_dungeon {
    width: 92.73%;
    margin: 0 auto 2em;
  }

  .ch_dungeon {
    width: 92.73%;
    margin: 0 auto 2em;
  }

  .kmission {
    width: 92.72%;
    margin: 0 auto 0.5em;
  }

  .yaku_voice_title {
    width: 75.7%;
    margin: 0 auto 4em;
  }

  .yaku_voice_01 {
    width: 92.72%;
    margin: 0 auto 3em;
    background: url("../images/yaku_natsuki.png") left top no-repeat;
    padding-top: calc(440 / 1020 * 92.72%);
    background-size: cover;
  }

  .yaku_voice_02 {
    width: 92.72%;
    position: relative;
    margin: 0 auto 3em;
    background: url("../images/yaku_reinhard.png") left top no-repeat;
    padding-top: calc(440 / 1020 * 92.72%);
    background-size: cover;
  }

  .yaku_voice_03 {
    width: 92.72%;
    position: relative;
    margin: 0 auto 1.6em;
    background: url("../images/yaku_regulus.png") left top no-repeat;
    padding-top: calc(440 / 1020 * 92.72%);
    background-size: cover;
  }

  .yaku_voice_etc {
    width: 77.18%;
    margin: 0 auto 3em;
  }

  #cp h2 {
    width: 92.72%;
    margin: 0 auto 3em;
  }

  .cp1,
  .cp2,
  .cp3,
  .cp4 {
    position: relative;
    width: 92.72%;
  }

  .cp1 {
    margin-bottom: 4em;
  }

  .cp3 {
    margin-bottom: 0;
  }

  .cp4 {
    margin-bottom: 3em;
  }

  #about {
    width: 88.18%;
    height: 0;
    padding-top: calc(1051 / 970 * 88.18%);
    background: url("../images/about_pc.png") center top no-repeat;
    background-size: cover;
  }

  #about a {
    width: 65%;
    height: clamp(2.25rem, -0.352rem + 5.42vw, 3.375rem);
    bottom: 5%;
  }

  .copyright {
    padding: 2em 0 4.5em;
    font-size: clamp(0.563rem, -0.305rem + 1.81vw, 0.938rem);
  }

  footer {
    padding: 0 0 4em;
  }

  footer .foot-download {
    padding: 2.5em 0 1em;
  }

  .foot-nav {
    width: 84%;
    max-width: 926px;
    margin: 0 auto 3.6em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: unset;
  }

  .foot-nav li:nth-child(1),
  .foot-nav li:nth-child(2),
  .foot-nav li:nth-child(3) {
    margin-bottom: 0;
  }

  .foot-nav li img {
    height: clamp(1.25rem, 0.383rem + 1.81vw, 1.625rem);
  }
}