@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

html,
body,
#container,
#app {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: white;
  background-color: black;
  text-align: center;
  z-index: 10;
}

body {
  background-color: white;
}

#app {
  position: relative;
}

ul {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

*:focus {
  outline: none;
}

#copyright {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0.5vh;
  font-size: 1vh;
  font-weight: 500;
}

#menu-button-container {
  position: absolute;
  width: 100%;
  text-align: right;
}
#menu-button-container img {
  width: 10vw;
}

#menu-button-batsu-container {
  position: absolute;
  z-index: 40;
  width: 100%;
  text-align: right;
}
#menu-button-batsu-container img {
  width: 10vw;
}

#menu {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: white;
}
#menu #mn-logo {
  position: absolute;
  width: 25%;
  padding: 1vh;
}
#menu #mn-logo img {
  width: 100%;
}
#menu #mn-select {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
#menu #mn-select .mn-button {
  position: relative;
  display: inline-block;
  max-width: 71.47%;
  max-height: 13.3333333333vh;
}
#menu #mn-select .mn-button p {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  line-height: 100%;
  font-size: 5.282vw;
}
#menu #mn-select img {
  width: 100%;
}
#menu #mn-how-to {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-items: center;
  align-content: center;
}
#menu #mn-how-to #mn-how-to-images {
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#menu #mn-how-to #mn-how-to-images #mn-left,
#menu #mn-how-to #mn-how-to-images #mn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
}
#menu #mn-how-to #mn-how-to-images #mn-left img,
#menu #mn-how-to #mn-how-to-images #mn-right img {
  width: 50%;
}
#menu #mn-how-to #mn-how-to-images #mn-left img {
  transform: scale(-1, 1);
}
#menu #mn-how-to #mn-how-to-images #mn-middle {
  width: 100%;
  height: auto;
  display: flex;
}
#menu #mn-how-to #mn-how-to-images #mn-middle img {
  max-width: 95%;
}
#menu #mn-how-to #mn-how-to-images #mn-middle #mn-how-to-pagenation img {
  width: 50%;
}
#menu #mn-how-to #step-container {
  width: 100%;
  position: relative;
}
#menu #mn-how-to #step-container #step-img {
  top: 0;
  left: 0;
  width: 10vw;
}
#menu #mn-how-to #step-container #step-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 4vw;
}
#menu #mn-how-to #mn-how-to-texts {
  width: 100%;
  height: 10%;
  margin-top: 1vh;
  margin-bottom: 2vh;
  color: black;
  align-content: center;
  font-size: 2vw;
  font-weight: 500;
}
#menu #mn-how-to #mn-how-to-texts p {
  width: 100%;
  align-content: center;
  color: black;
  font-size: 4vw;
}
#menu #mn-how-to-image {
  height: 100%;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#menu #mn-select-language {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
#menu #mn-select-language a {
  position: relative;
  display: inline-block;
  max-width: 71.47%;
  max-height: 13.3333333333vh;
}
#menu #mn-select-language a p {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  line-height: 100%;
  font-size: 5.282vw;
}
#menu #mn-select-language img {
  width: 100%;
}

.invisible {
  visibility: hidden;
}

#cover {
  z-index: 10000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
}

#for-pc {
  z-index: 10001;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/danron-PC.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.display-none {
  display: none;
}

.list-fade-leave-active,
.list-fade-enter-active {
  transition: opacity 0s ease;
}

.mode-fade-enter-active,
.mode-fade-leave-active {
  transition: opacity 0.3s ease;
}

.chara-fade-enter-active {
  transition: opacity 0.3s ease;
}

.chara-fade-leave-active {
  transition: opacity 0.3s 0.3s ease;
}

.list-fade-leave-active,
.list-fade-enter-active,
.mode-fade-enter-from,
.mode-fade-leave-to,
.chara-fade-enter-from,
.chara-fade-leave-to {
  opacity: 0;
}

#modal-chara-select {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: grid;
  grid-template-rows: 7.2202166065% auto 6.8592057762%;
}
#modal-chara-select #modal-scroll-area {
  position: relative;
  overflow-y: scroll;
  grid-row: 2;
  height: 100%;
  z-index: 20;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#modal-chara-select #modal-scroll-area li {
  display: contents;
  list-style: none;
}
#modal-chara-select #modal-scroll-area img {
  z-index: 40;
  width: 100%;
  height: 42.1333333333vw;
  background-color: white;
}

#close-button-container-unlock {
  position: absolute;
  opacity: 1;
  position: absolute;
  width: 5%;
  top: -30px;
  right: 4px;
}
#close-button-container-unlock img {
  width: 100%;
}

#close-button-container {
  opacity: 1;
  position: absolute;
  width: 5%;
  top: 0;
  right: 20px;
}
#close-button-container img {
  width: 100%;
}

#modal-header-area {
  grid-row: 1;
}

#modal-footer-area {
  grid-row: 3;
}

#modal-header-area,
#modal-footer-area {
  width: 100%;
  height: 100%;
}

.non-modal-area {
  position: absolute;
  z-index: 30;
  width: 100%;
  height: 100%;
}

#modal-unlock {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}
#modal-unlock #unlock-modal-container {
  position: relative;
  z-index: 40;
}
#modal-unlock #unlock-modal-container #unlock-modal-area {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 47.7093206951% 22.906793049% 22.906793049% auto;
}
#modal-unlock #unlock-modal-container #modal-unlock-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#modal-unlock #unlock-modal-container #btn-unlock {
  grid-row: 2;
}
#modal-unlock #unlock-modal-container #btn-not-unlock {
  grid-row: 3;
}
#modal-unlock #unlock-modal-container .modal-button {
  margin: auto;
  z-index: 50;
  height: 70%;
}
/*# sourceMappingURL=style.css.map */