@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/00_ten_header_sp.jpg") left top no-repeat;
  padding-top: calc(1120 / 820 * 100%);
  background-size: cover;
}

.banner {
  position: absolute;
  bottom: 25%;
  left: 3.5%;
  width: 20%;
  height: auto;
}

/* =======================================
	navigation
======================================= */
nav {
  position: relative;
  width: 100%;
  padding: 4% 0;
  background: #0277d2;
}

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

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

/* =======================================
	download
======================================= */
.download {
  width: 100%;
  margin: 0 auto;
  padding: 8% 0 5%;
  background: url("../images/01_ten_bg01.png") right bottom no-repeat;
  background-size: 100%;
}

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

.download-button {
  width: 77.44%;

  margin: 0 auto 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
}

.download-link {
  width: 77.44%;

  margin: 0 auto;
}

/* =======================================
	video
======================================= */
.announcement-video {
  width: 67.8%;
  margin: 5% auto 0;
}

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

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

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

.maxgacha {
  width: 57.2%;
  margin: 0 auto 2%;
}

.gacha {
  width: 88%;
  margin: 0 auto 4%;
}

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

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

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

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

.sp_dungeon_video {
  position: absolute;
  top: 10.2%;
  left: 3.6%;
  width: 36.5%;
  height: auto;
}

.ch_dungeon_video {
  position: absolute;
  top: 10.2%;
  right: 3.5%;
  width: 36.5%;
  height: auto;
}

.kmission {
  width: 100%;
  margin: 0 auto 2%;
  padding-top: 5%;
}

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

.voice {
  position: absolute;
  width: 25%;
  height: 0;
  padding-top: calc(60 / 200 * 25%);
  background: url("../images/voice_btn_on.png") left top no-repeat;
  background-size: cover;
}

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

#btn-play1 {
  bottom: -4%;
  left: 5%;
}

#btn-play2 {
  bottom: -4%;
  left: 38%;
}

#btn-play3 {
  bottom: -4%;
  right: 4%;
}

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

#cp h2 {
  width: 80.24%;
  margin: 0 auto 4%;
}

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

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

ul.cpBtns {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
}

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

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

/* =======================================
	#about
======================================= */
#about {
  width: 100%;
  height: 0;
  padding-top: calc(861 / 820 * 100%);
  background: url("../images/04_ten_ten.png") center top no-repeat;
  background-size: cover;
}

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

/* =======================================
	footer
======================================= */
footer {
  background: #0277d2;
  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;
  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,
  .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/w601_1280px_bg.jpg") 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: url("../images/00_ten_header_bg.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;
  }

  .banner {
    width: 128px;
  }
}