/* プロローグ */
#story h2 img {
  width: 61.4rem;
}

#mission .map {
  position: relative;
  font-size: 4.8rem;
  overflow: hidden;
  margin-bottom: 3rem;
}

#mission .btn_future {
    position: absolute;
    top: 11rem;
    left: 2rem;
    width: 66rem;
    height: 12rem;
    cursor: pointer;
}

#mission .btn_cosmos {
    position: absolute;
    top: 29rem;
    left: 25rem;
    width: 42rem;
    height: 18rem;
    cursor: pointer;
}

#mission .btn_legend {
    position: absolute;
    top: 47rem;
    left: 3rem;
    width: 60rem;
    height: 13rem;
    cursor: pointer;
}

#mission .lastarea_text {
  width: 60rem;
  margin: 3rem auto;
}
#mission .btn_lastarea {
  width: 60rem;
  margin: 3rem auto;
}

.modal-content {
  line-height: 1.5;
  padding: 8rem 1.5rem 3rem;
}
.modal-content .check,
.modal-content .choice,
.modal-content .key,
.modal-content .keyConfirm,
.modal-content .move {
  display: none;
}
.modal-content .active {
  display: block;
}
.modal-content .check {
  font-size: 6rem;
}
.modal-content .check .area {
  width: 56.5rem;
  margin: 0 auto 3rem;
}

.modal-content .check .btn_choice {
  width: 58rem;
  margin: 10rem auto 0;
}

.modal-content .choice strong {
  color: #D90606;
  font-weight: 700;
}
.modal-content span {
  display: block;
  font-size: 2rem;
}
.modal-content .choice ,
.modal-content .key ,
.modal-content .keyConfirm ,
.modal-content .move {
  padding-top: 5rem;
}
.modal-content .choice .area,
.modal-content .key .area,
.modal-content .keyConfirm .area,
.modal-content .move .area {
  width: 38.5rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
}
.modal-content .key .areaBox,
.modal-content .keyConfirm .areaBox {
  width: 59.5rem;
  color: #fff;
  font-size: 3.6rem;
  letter-spacing: -0.1em;
  border: #1C2955 0.5rem solid;
  margin: 1rem auto;
  box-sizing: border-box;
  padding: 0.5rem 1.5rem 1rem;
  position: relative;
}
.modal-content .key .area1,
.modal-content .keyConfirm .area1 {
  background-color: #C1345F;
}
.modal-content .key .area2,
.modal-content .keyConfirm .area2 {
  background-color: #F0E900;
  color: #20395C;
}
.modal-content .key .area3,
.modal-content .keyConfirm .area3 {
  background-color: #036EB7;
}
.modal-content .key .note {
  font-size: 3.6rem;
}
.modal-content .key .input,
.modal-content .keyConfirm .input {
  width: 100%;
  height: 9rem;
  box-sizing: border-box;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: #1C2955 0.5rem solid;
  appearance: none;
  background: #fff;
  font-size: 4rem;
	line-height: 1;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  margin: 0;
}
.modal-content .key .input::placeholder,
.modal-content .keyConfirm .input::placeholder {
  color: rgba(255, 255, 255, 0.4); /* 白色の40%の不透明度 */
  opacity: 1; /* Firefoxなどで薄くなりすぎるのを防ぐ */
}
.modal-content .key .btn_submit {
  width: 17.1rem;
  height: 12rem;
  box-sizing: border-box;
  border: none;
  appearance: none;
  background: transparent;
  padding: 0;
}
.modal-content .key .error-msg {
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
}
.modal-content .keyConfirm .result-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  padding-top: 0.5em;
}
.modal-content .keyConfirm .result-mark.correct {
  color: #FF0000;
}
.modal-content .keyConfirm .result-mark.incorrect {
  color: #006AFF;
}
.keyConfirm ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.modal-content .move .map {
  width: 56rem;
  margin: 2.5rem auto;
}