@charset "utf-8";


html{
    /* フッターを下に追いやる為コンテンツの高さを100% */
    height: 100%;
    background: white;
    /* background: black; */
}


body{
    /* border: 8px solid blue; */
    /* box-sizing: border-box; */
    
    /* font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif; */
    font-family: "M PLUS Rounded 1c", sans-serif;

    max-width: 500px;
    min-width: 350px;
    margin: 0 auto;
    
    /* フッターを下に追いやる */
    /* コンテナーボックスにする */
    height: 100%;
    display: flex;
    flex-direction: column;
}



/* ヘッダ */

header{
    /* background: skyblue; */
    margin: 0;
}


.menu-bar{
  z-index: 90;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  margin: 0 auto;
  max-width: 500px;
  min-width: 350px;

  box-sizing: border-box;
  display: flex;
  padding: 0 24px;

  /* background: #ffc0cb; */
  background: #fff;
}


.menu-bar h1{
  margin: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: 64px;
}

.sp-menu{
  margin-left: auto;
}

.sp-menu #open{
  font-size: 32px;
  line-height: 64px;
  cursor: pointer;

  background: none;
  border: none;
  color: #000;
  padding: 0;
}
.sp-menu #open.hide{
  display: none;
}

.overlay{
  z-index: 101;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 500px;
  min-width: 350px;
  margin: 0 auto;

  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  padding: 64px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.overlay #close-screen{
  z-index: -1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  
  background: none;
  /* background: skyblue; */
  opacity: 0;
  border: none;
  padding: 0;
}

.overlay .nav-container{
  position: absolute;
  top: 50%;
  left: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay #close{
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 32px;
  cursor: pointer;
  
  background: none;
  border: none;
  color: #000;
  padding: 0;
}

.overlay .nav-container nav{
  position: absolute;
}


.overlay ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li{
  padding-top: 48px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
}

.overlay li a{
  display: block;
  width: 180px;
  padding: 18px 10px;
  /* background-color: #ff69b4; */
  background-color: #ff1493;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}


.overlay li button{
  display: block;
  width: 100%;
  padding: 18px 10px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;

  border: solid 2px;
  background-color: #fff;
  color: #ff1493;
}

.overlay li a span{
  vertical-align: middle;
  font-size: 16px;
}

.overlay.show li{
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1){
  transition-delay: 0.1s;
}
.overlay.show li:nth-child(2){
  transition-delay: 0.2s;
}
.overlay.show li:nth-child(3){
  transition-delay: 0.3s;
}

.overlay li:last-child{
  margin-top: 88px;
}

.overlay.show{
  opacity: 1;
  pointer-events: auto;
}



.menu-bar+.hero{
  margin-top: 64px;
}

.hero{
  width: 100%;
}

.hero img{
  display: block;
  margin: 0 auto;
}

.menu-bar-space{
  height: 64px;
}












/* メイン */

.container{
    flex: 1;
    width: 100%;
    position: relative;
}


.bg{
  /* position: fixed; */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  max-width: 500px;
  min-width: 350px;
  margin: 0 auto;

  background: #8C5D1F;
  background-image: url("./img/bg.png");
  background-size: 100%;
  z-index: -100;
}

.quiz-bg{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  max-width: 500px;
  min-width: 350px;
  margin: 0 auto;

  background-size: 150px;
  background-position: 20% 20%;
  
  z-index: -100;
}
.bg-under{
  position: fixed;
  bottom: 0;
  height: 30px;
}


.bg0{
  background-image: url("./quiz/img/bg0.png");
}
.bg1{
  background-image: url("./quiz/img/bg1.png");
}
.bg2{
  background-image: url("./quiz/img/bg2.png");
}
.bg3{
  background-image: url("./quiz/img/bg3.png");
}
.bg4{
  background-image: url("./quiz/img/bg4.png");
}


.bg-footer{
  z-index: -90;
  /* コンテナに対するabsolute */
  position: absolute; 
  bottom: 0px;
}















main{
  width: 100%;
  margin: 0;

  padding: 24px 0 36px 0;

  text-align: center;
}



main .tbx{
  background: #FEF3CF;
  width: 70%;
  max-width: 500px;
  margin: 0 auto;
  padding: 24px;
  line-height: 26px;
  font-size: 16px;
  
  border-radius: 8px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}

.story img{
  width: 85%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}



/* スタンプ */

.stamp{
  margin: 24px 0;
}

.stamp-sheet{
  background: #FEF3CF;
  border: solid 6px #FFC524;
  border-radius: 8px;
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;

  padding: 24px;
  margin: 0 auto;
  max-width: 85%;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}

.stamp-box{
  background: white;
  border-radius: 16px;
  /* border: solid 3px blue; */
  /* box-sizing: border-box; */

  width: calc((100% - 14px) / 2);
  aspect-ratio: 1;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.stamp-box img.comp{
  rotate: -20deg;
}
.stamp-box img.nocomp{
  filter: grayscale(1) opacity(0.2);
}










/* 地図 */

.map .map-sheet{
  margin: 32px auto 0 auto;
}

.map .map-sheet img{
  width: 85%;
  border-radius: 8px;
  margin: 0 auto;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}


.quiz-buttons{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.quiz-button-unit{
  padding-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.quiz-pin{
  align-content: center;
  /* border: solid 1px cyan; */
  /* box-sizing: border-box; */
}

.quiz-pin img{
  vertical-align: bottom;
}





.quiz-buttons .button-img{
  margin: 0 auto;
  padding-left: 12px;
}


.debug button {
  width: 70%;
  max-width: 380px;
  margin: 8px auto 0;
  padding: 12px 0;
  background-color: #fff;
  border: solid 1px;
  border-radius: 32px;
  color: #ff1493;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}


/* ルール */
.rule img{
  width: 85%;
  margin: 32px auto 0 auto;
  border-radius: 8px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}




















/* クイズ解放 */

.title{
  max-width: 480px;
  margin: 0 auto;
}

.quiz-open .tbx{
  position: relative;
  border: solid 5px #FFC524;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.2);
}

.quiz-open .tbx.miss{
  filter: grayscale(1);
}

.areaImg img{
  width: 85%;
  border-radius: 10px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.2);
}


/* 
.quiz-open button{
  width: 70%;
  max-width: 380px;
  margin: 8px auto 0;
  padding: 12px 0;
  background-color: #ff8614;
  border: none;
  border-radius: 32px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
*/


.other-ways{
  background: #FEF3CF;
  border: solid 5px #FFC524;
  border-radius: 8px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.2);
  width: 85%;
  margin: 64px auto 64px auto;
  padding: 24px 0;
}
.other-ways p{
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.passcode-box{
  /* background: pink; */
  display: flex;
  flex-direction: row;
  align-content: bottom;

  width: 200px;
  margin: 0 auto;
}

.other-ways form {
  padding-top: 16px;
}
.other-ways .input-text {
  box-sizing: border-box;
  padding: 8px 15px;
  border: 2px solid #2E3C4D;
  border-radius: 8px;
  font-size: 16px;
  
  width: 140px;
  display: block;
}

.other-ways .input-text::placeholder {
  color: #2e3c4d70;
}



img.quizopen{
  width: 85%;
  margin: 0 auto;
}











/* QR */

.qr-container .title img{
  width: 60%;
  aspect-ratio: 2.5;
  object-fit: cover;
}

.qr-txt{
  margin: 12px 0;
}
.qr-txt img{
  width: 75%;
  margin: 0 auto;
}

.qr{
  /* background: pink; */
  width: 75%;
  margin: 0 auto;
}



#loadingMessage {
  text-align: center;
  padding: 40px;
  background-color: #eee;
}

#canvas {
  width: 100%;
}

#noQRFound {
  text-align: center;
}































/* クイズ */

.quiz main{
  padding-top: 0;
}

.quiz .quiz-img img{
  width: 85%;
  margin: 0 auto;
}

.quiz .form-group{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}


.quiz .answer {
  box-sizing: border-box;
  width: 80%;
  padding: 10px 15px;
  border: 2px solid #2E3C4D;
  border-radius: 8px;
  font-size: 16px;
  
  display: block;
  max-width: 380px;
  margin: 0 auto;
}

.quiz .answer::placeholder {
  color: #2e3c4d70;
}














/* ヒント */
.hint-list{
  text-align: left;
  width: 80%;
  max-width: 380px;
  padding: 16px 32px 0px 32px;
  margin: 0 auto;
}

.hint{
  margin: 0 0 8px 0;
  border: solid 3px #FFC524;
  border-radius: 12px;
  background: #fff;
}

.hint dl{
  margin: 0;
}

.hint dt{
  margin: 0;
  padding: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
  font-weight: bold;
  font-size: 18px;
}

.hint.appear dt{
  border-radius: 10px 10px 0 0;
  background: #FEF3CF;
  /* font-weight: normal; */
  /* font-size: 16px; */
}

.hint dt::after{
  content: "+";
  position: absolute;
  top: 8px;
  right: 16px;
  transition: transform 0.3s;
}


.hint dd{
  margin: 0;
  padding: 0 8px 8px 8px;
  display: none;
  border-radius: 0 0 10px 10px;
  font-size: 16px;
}

.hint.appear dd{
  display: block;
  animation: 0.3s fadeIn;
}

.hint.appear dt::after{
  transform: rotate(45deg);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


.hint-img img{
  display: block;
  margin: 24px auto;
}







/* 正誤判定 */

.quiz-judge{
  margin-bottom: 80px;
}

.quiz-judge .quiz-bg.bg0{
  background: linear-gradient(180deg, #002CA9FF 0%, #80808000 100%), url("./quiz/img/bg0.png");
}
.quiz-judge .quiz-bg.bg1{
  background: linear-gradient(180deg, #002CA9FF 0%, #80808000 100%), url("./quiz/img/bg1.png");
}
.quiz-judge .quiz-bg.bg2{
  background: linear-gradient(180deg, #002CA9FF 0%, #80808000 100%), url("./quiz/img/bg2.png");
}
.quiz-judge .quiz-bg.bg3{
  background: linear-gradient(180deg, #002CA9FF 0%, #80808000 100%), url("./quiz/img/bg3.png");
}
.quiz-judge .quiz-bg.bg4{
  background: linear-gradient(180deg, #002CA9FF 0%, #80808000 100%), url("./quiz/img/bg4.png");
}


.quiz-judge .quiz-bg.good{
  background: url("./quiz/img/bg_good.png");
  background-size: cover;
  background-position: top center;
}

.quiz-judge-img{
  max-width: 480px;
  margin: 0 auto;
}


.quiz-stamp{
  max-width: 400px;
  margin: -100px auto 0 auto;
}
.quiz-stamp-get{
  max-width: 400px;
  margin: -64px auto 64px auto;
}

.quiz-explain img{
  width: 85%;
  margin: 0 auto;
}

.quiz-judge p{
  font-size: 24px;
  color: white;
  margin: 0;
}










/* フッター */
footer{
  z-index: 90;
  background-color: #333;
  text-align: center;
  padding: 16px;
}

footer small{
  color: #fff;
  font-size: 12px;
}











/* login.php用 */

.login-body{
  /* background-color: #8C5D1F; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container{
  position: relative;

  background-color: #FEF3CF;
  width: 85%;
  margin: 32px auto;
  padding: 32px 0;
  border-radius: 8px;
  border: solid 6px #FFC524;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}

.login-container .start-buttons{
  padding: 32px;
}




/* 
.login-container h1{
  margin: 0;
  color: #000;
  font-weight: bold;
  font-size: 32px;
}
 */


.login-container .text-img {
  margin: 16px auto 8px auto;
  width: 65%;
}




.login-body .form-group {
  margin-top: 24px;
}

.login-body .form-group label{
  font-weight: bold;
}

.login-body .form-group label small{
  font-weight: normal;
}

.login-body .input-text {
  box-sizing: border-box;
  width: 80%;
  padding: 10px 15px;
  border: 2px solid #2E3C4D;
  border-radius: 8px;
  font-size: 16px;
  
  display: block;
  max-width: 380px;
  margin: 0 auto;
}

.login-body .input-text::placeholder {
  color: #2e3c4d70;
}





.notice-bg{
  background: rgba(255, 255, 0, 0.5);
  border-radius: 8px;
  /* padding-bottom: 4px; */
  /* margin-bottom: 4px; */
}


.notice{
  color: #ff146e;
  font-weight: bold;
  padding-bottom: 4px;
}


.notice-box{
  background: rgba(255, 255, 0, 0.5);
  border-radius: 8px;
  color: #ff146e;
  font-weight: bold;
  font-size: 16px;
  width: 80%;
  margin: 16px auto 0 auto;
  padding: 16px;
}


.note-img img{
  width: 85%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.4);
}






















.button-img{
  position: relative;
  width: fit-content;
  margin: 0 auto;
}


.button-img button{
  background: transparent;
  border: none;
  /* border: solid 1px rgba(255, 0, 0, 1); */
  cursor: pointer; /* カーソルをポインターに変更 */
}


.button-img.margintop{
  margin-top: 16px;
}


.button-img img{
  vertical-align: bottom;
}

.button-img:active{
  opacity: 0.5;
}

.block{
  height: 64px;
}

.backtop{
  position: absolute;
  bottom: 32px;
  width: 100%;
  text-align: center;
  padding-top: 32px;

  display: block;
}

a.link-button{
  /* border: solid 1px red; */
  display: inline-block;
  text-decoration: none;
}

a.link-button img{
  vertical-align: bottom;
  max-width: 100%;
}

a.link-button:active{
  opacity: 0.5;
}


.formButton{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  background: transparent;
  border: none;
  border: solid 1px rgba(255, 0, 0, 1);
  cursor: pointer; /* カーソルをポインターに変更 */
  text-indent: -9999px;  /* 文字を非表示にする */
}


.button-box{
  padding-top: 24px;
}




/* tbx の装飾 */
.tbx-deco{
  margin: 5px;
  background: #A67C52;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.tbx-deco:nth-child(1){
  position: absolute;
  top: 0;
  left: 0;
}
.tbx-deco:nth-child(2){
  position: absolute;
  top: 0;
  right: 0;
}
.tbx-deco:nth-child(3){
  position: absolute;
  bottom: 0;
  left: 0;
}
.tbx-deco:nth-child(4){
  position: absolute;
  bottom: 0;
  right: 0;
}



.qr-notice{
  text-align: center;
  margin: 4px 0;
}
.qr-notice small{
  font-size: 10px;
}

rt{
  transform: translateY(0.6em);
}