@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

:root {
    --design-width-sp: 750;
    --vw: 1vw;
}
html {
  font-size: calc(var(--vw) * 100 / var(--design-width-sp) * 10);
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
@media screen and (min-width: 768px) {
    html {
        font-size: calc(10px * (750 / 750));
    }
}


body {
	background: #000;
	color: #fff;
	text-align: center;
  font-size: 3.6rem;
  line-height: 1.75;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  overflow-x: hidden;
}
body::before {
  content: "";
  display: block;
	background: url(../images/background_sky.png?v12) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.5;
}
a{
	outline: none;
	color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  opacity: 0.85;
}

a:focus{
	outline: none;
}

img {
	width: 100%;
	height: auto;
}

#wrap {
	max-width: 750px;
  margin: 0 auto;
	background: #000;
  position: relative;
  z-index: 10;
}


#story {
  color: #20395C;
  background: #F7F5F4;
  position: relative;
  padding-top: 6rem;
}

#story h2{
  margin-bottom: 2rem;
}

#story .story {
  padding: 4rem;
  padding-bottom: 0;
}
#story .story_head img {
  width: 66.4rem;
}

#story .story_foot {
  width: 100%;
  height: 26.8rem;
  background: url(../images/story_bg.png?v12) no-repeat center bottom;
  background-size: 100% auto;
  position: relative;
  bottom: -0.1rem;
}

#story .story_foot img {
  width: 66.4rem;
}
#story p {
  text-align: left;
}

#story .image {
  position: relative;
  margin: 5rem -1.5rem;
}

#story .frame {
  aspect-ratio: 70 / 27.4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-size: 3.8rem;
  color: #fff;
  background: url(../images/frame.png) no-repeat center top;
  background-size: 100% auto;
  position: relative;
}
#story .frame p {
  text-align: center;
}

.message {
  position: relative;
  margin: 5rem -1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.message .icon {
  width: 10rem;
}

.message .voice {
  width: 58rem;
  min-height: 12rem;
  box-sizing: border-box;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #20395C;
  background: #fff;
  padding: 2rem 1.5rem;
}
.message .voice.voice1 {
  border: #8AA3D4 1rem solid;
}
.message .voice.voice2 {
  background: #BAD4FB;
  padding: 3rem 2rem;
}
.message .voice.voice3 {
  border: #E7849A 1rem solid;
}
.message .voice.voice4 {
  border: #E4CE42 1rem solid;
}
.message .voice.voice5 {
  border: #5185C5 1rem solid;
}



#mission {
  padding: 4rem 2.5rem;
}

#mission .column {
  width: 70.2rem;
  margin: 3rem auto 12rem;
  padding-top: 7rem;
  text-align: left;
  background: url(../images/column_bg.png) no-repeat center top;
  background-size: 100% auto;
  position: relative;
}
#mission .column::after {
  content: "";
  display: block;
  width: 70.2rem;
  height: 7.5rem;
  background: url(../images/column_foot.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 99.9%;
}


#mission .column_ttl {
  margin: 0 auto;
  width: 59.2rem;
  background-color: #0B1626;
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-size: 3.8rem;
  text-align: center;
}
#mission .column_icon {
  margin: 1rem auto;
  width: 15.6rem;
}
#mission .column_message {
  margin: 0 auto;
  width: 57.1rem;
  color: #20395C;
  background: #fff;
  padding: 2rem 2rem;
  box-sizing: border-box;
  border-radius: 2rem;
}
#earth #mission .column_message {
  border: #E7849A 1rem solid;
}
#bluering #mission .column_message {
  border: #E4CE42 1rem solid;
}
#star #mission .column_message {
  border: #5185C5 1rem solid;
}



#mission .mission {
  margin: 3rem auto 8rem;
  font-size: 4.8rem;
}

#mission .guide {
  margin: 2rem auto;
}
#mission .map {
  margin: 10rem auto 5rem;
}

#mission .guideText {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
}
#mission .keyword {
  margin: 4rem auto 2rem ;
  width: 60rem;
  height: 15.4rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


#mission .btn_next {
  width: 60rem;
  margin: 5rem auto;
}
#mission .btn_next.clickable {
  cursor: pointer;
}
#mission .btn_next.disabled {
  opacity: 0.5;
}

#mission .answer {
  margin: 5rem auto 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem
}

#mission .answer .input {
  width: 48.6rem;
  height: 12rem;
  box-sizing: border-box;
  padding: 4rem;
  display: flex;
  align-items: center;
  border: none;
  appearance: none;
  background: url(../images/ans_bg.png?v12) no-repeat center center;
  background-size: cover;
  font-size: 4rem;
	line-height: 1;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}
#mission .answer .input::placeholder {
  color: #a8a8a8;
}

#mission .answer .btn_submit {
  width: 17.1rem;
  height: 12rem;
  box-sizing: border-box;
  border: none;
  appearance: none;
  background: transparent;
  padding: 0;
}
#mission .error-msg {
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
}

#mission .hintbtn,
.modal-message .hintbtn {
  margin: 0 auto 2rem;
  text-align: right;
}
#mission .hintbtn img,
.modal-message .hintbtn img {
  width: 12rem;
}


/* モーダル */
.hint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.hint.active {
  display: flex;
}
.modal-overlay > .hint {
  position: absolute;
}
.hintbox {
  background: #fff;
  border: #3ABE9F 1.6rem solid;
  color: #20395C;
  padding: 12rem 2rem 0;
  border-radius: 4rem;
  text-align: center;
  width: 70rem;
  min-height: 75rem;
  max-height: 90svh;
  position: relative;
  box-sizing: border-box;
  font-size: 3.6rem;
  display: flex;
  flex-direction: column;
}
.hint-content {
  overflow-y: auto;
  flex: 1;
  padding: 0 1rem;
}
.hint-ttl {
  margin: 2rem auto;
  cursor: pointer;
  position: relative;
  width: 37rem;
  height: 7.2rem;
  background-color: #76ABDA;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.25);
  border-radius: 3rem;
}
/* .hint-ttl::after {
  content: "▼";
  position: absolute;
  right: 1rem;
}
.hint-ttl.open::after {
  content: "▲";
} */
.hint-text {
  display: none;
  padding-bottom: 3rem;
  text-align: left;
}
.hint-close {
  font-size: 10rem;
  line-height: 1;
  position: absolute;
  right: 1.5rem;
  top: 0.5rem;
}

/* モーダル */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay.active {
  display: flex;
}
.modal-content {
  background: #fff;
  border: #5185C5 2.5rem solid;
  color: #20395C;
  padding: 8rem 3rem 3rem;
  border-radius: 4rem;
  text-align: center;
  width: 70rem;
  min-height: 75rem;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}
.modal-close {
    font-size: 10rem;
    line-height: 1;
    position: absolute;
    right: 1.5rem;
    top: 0.5rem;
}


.btn_choice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.btn_yes ,
.btn_no ,
.btn_route ,
.btn_back ,
.btn_ok ,
.btn_key_next {
  width: 28.4rem;
  height: 7.4rem;
  box-sizing: border-box;
  color: #fff;
  font-size: 3.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999em;
  cursor: pointer;
}
.btn_yes {
  background-color: #C13434;
}
.btn_no {
  background-color: #94A2B3;
}
.btn_ok,
.btn_back,
.btn_key_next {
  margin: 0 auto;
  background-color: #20395C;
}
.btn_route {
  margin: 2.5rem auto;
  width: 30rem;
  background-color: #20395C;
}

/* ルビ共通 */
ruby {
  ruby-align: center;
}
rt {
  font-size: 0.5em;
  line-height: 1;
}

@supports (-webkit-touch-callout: none) {
  rt {
    margin-bottom: -0.5em; 
  }
}