@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;
}

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
======================================= */
.pc-kv {
  display: none;
}

.pc-content {
  display: block;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: #0277d2;
}

.wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-width: unset;
}

main {
  position: relative;
  width: 100%;
  min-height: 100lvh;
  max-width: 600px;
  margin: 0 auto;
}

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

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

.banner {
  position: absolute;
  bottom: 34%;
  left: 0.5%;
  width: 23%;
  height: auto;
}

/* =======================================
	navigation
======================================= */
nav {
  position: relative;
  width: 100%;
  height: 0;
  background: url("../images/01_menu.bg.jpg") left top no-repeat;
  padding-top: calc(98 / 828 * 100%);
  background-size: cover;
}

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

nav ul {
  width: 90%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li:nth-child(2),
nav ul li:nth-child(4) {
  padding: 0 2.4%;
}

nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

/* =======================================
	download
======================================= */
.download {
  width: 100%;
  margin: 0 auto;
  padding: 5% 0 7%;
  background: url("../images/01_menu_bg_02.png") center top no-repeat;
  background-size: 100% auto;
}

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

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

.download-link {
  width: 50%;
  margin: 0 auto;
}

/* =======================================
	video
======================================= */
.announcement-video {
  position: relative;
  width: 75%;
  height: 0;
  margin: 1.5% auto 0;
  background: url("../images/01_header_movie.png") left top no-repeat;
  background-size: cover;
  padding-top: calc(380 / 627 * 75%);
}

.announcement-video a {
  width: 87%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

/* =======================================
	wave
======================================= */
.wave {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.wave1 {
  margin: -6% auto 0;
}

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

.charaInner {
  position: relative;
  width: 96%;
  height: 0;
  margin: 0 auto;
  background: url("../images/02_chara_bg.png") left top no-repeat;
  background-size: cover;
  padding-top: calc(1376 / 817 * 96%);
}

#chara h2 {
  width: 50%;
  margin: 0 auto 6%;
}

.godvmaxgacha {
  width: 84%;
  margin: 0 auto 2%;
}

.gacha01 {
  width: 98%;
  margin: 0 auto;
}

.gacha02 {
  width: 90%;
  margin: 0 auto;
}

/* =======================================
	#contents
======================================= */
#contents {
  width: 100%;
  padding: 4% 0 5%;
  background: #8fc31f;
}

#contents h2 {
  width: 80.24%;
  margin: 0 auto 6%;
}

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

.sp_ranking {
  position: relative;
  width: 98%;
  margin: 0 auto 3%;
}

.sp_dungeon_video {
  position: absolute;
  bottom: 7.2%;
  left: 7%;
  width: 38%;
  height: auto;
}

.kmission {
  width: 98%;
  margin: 0 auto;
}

/* =======================================
	#yakuvoice
======================================= */
#yakuvoice {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0 4%;
  background: #0099ff;
}

.yakuvoice {
  position: absolute;
  bottom: 9.6%;
  left: 0;
  right: 0;
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3.5%;
}

.yakuvoice-1,
.yakuvoice-2 {
  position: relative;
}

.voice {
  position: absolute;
  width: 86%;
  height: 0;
  padding-top: calc(88 / 310 * 86%);
  background: url("../images/05_voice_btn_on.png") left top no-repeat;
  background-size: cover;
}

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

#btn-play1 {
  bottom: 3%;
  left: 7%;
}

#btn-play2 {
  bottom: 3%;
  left: 7%;
}

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

#cp h2 {
  width: 68%;
  margin: 0 auto 2%;
}

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

.cp2,
.cp3 {
  width: 98%;
}

.cp2 {
  margin-top: -36%;
  margin-bottom: 2%;
}

.cp4 {
  margin-bottom: 3%;
}

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

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

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

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

.cp-play {
  width: 98%;
  margin: 0 auto 5%;
  position: relative;
}

.cp-play-inner {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  width: 72%;
  margin: auto;
}

ul.cp-play-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
  margin: 0 auto 4%;
}

.cp-play-dmm {
  width: 57%;
  margin: 0 auto;
}

/* =======================================
	#cp-startdash
======================================= */
#cp-startdash {
  width: 100%;
  padding: 4% 0 2%;
  background: #8fc31f;
}

/* =======================================
	#cp-login
======================================= */
#cp-login {
  width: 100%;
  padding: 4% 0 10%;
  background: #00ac97;
}

/* =======================================
	#about
======================================= */
#about {
  width: 100%;
  height: 0;
  margin: -6% auto 0;
  padding-top: calc(1049 / 828 * 100%);
  background: url("../images/07_about_bg.png") center top no-repeat;
  background-size: cover;
}

.about-title {
  width: 81%;
  margin: 0 auto;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  margin: auto;
}

.about-text {
  width: 94%;
  position: absolute;
  top: 29%;
  left: 0;
  right: 0;
  margin: auto;
}

.about-link {
  width: 70%;
  position: absolute;
  bottom: 11%;
  left: 0;
  right: 0;
  margin: auto;
}

.about-copyright {
  font-size: clamp(0.5rem, 0.071rem + 2.14vw, 0.875rem);
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
}

/* =======================================
	footer
======================================= */
footer {
  background: #212121;
  padding: 4% 0 5%;
}

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

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

.foot-nav {
  width: 90%;
  margin: 0 auto 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3%;
}

.foot-nav li a {
  width: 100%;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.129rem + 2.86vw, 1.2rem);
}

.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: 601px) {
  .pc-content {
    width: 600px;
    box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.5),
      4px 0 8px -2px rgba(0, 0, 0, 0.5);
  }

  nav {
    height: 80px;
    padding: 0;
  }

  nav.fixed {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  nav ul {
    height: 80px;
  }

  .banner {
    max-width: 157px;
  }

  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,
  ul.cp-play-icons li a:hover,
  .cp-play-dmm a:hover,
  .banner a:hover,
  .download a:hover,
  .cpBtns a:hover,
  .about-link a:hover,
  .foot-nav a:hover,
  .gototop a:hover {
    -moz-opacity: 0.5;
    opacity: 0.5;
  }
}

@media screen and (min-width: 601px) and (max-width: 1280px) {
  .wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    background: url("../images/07_about_bg.png") center center no-repeat;
    background-size: cover;
  }

  .banner {
    width: 120px;
  }
}

@media screen and (min-width: 1281px) {
  header {
    display: none;
  }

  .wrapper {
    width: 100%;
    display: flex;
  }

  .wrapper::before {
    display: none;
  }

  .pc-kv {
    display: block;
    flex: 1;
  }

  .pc-kv::before {
    content: "";
    display: block;
    width: calc(100vw - 600px);
    height: 100%;
    position: fixed;
    background: black url("../images/01_header_main_pc.jpg") center top
      no-repeat;
    background-size: auto 100%;
  }

  .pc-content {
    margin: 0 0 0 auto;
    box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.5);
  }

  nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    z-index: 100;
  }

  nav.fixed {
    width: 600px;
    left: auto;
    right: 0;
    transform: none;
  }

  main {
    padding-top: 80px;
  }
}