body{
    background-image: url(../img_map/map.png);
    background-repeat: no-repeat;
    background-size: 100vw;
    color: white;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size:13px;
}

.all{
    position: relative;
    display: flex;
}

.tap{
    width:8vw;
}

/*hint1のポジション*/
.hint1{
    position: absolute;
    top:81vw;
    left:13vw;
}

/*hint2のポジション*/
.hint2{
    position: absolute;
    top:120vw;
    left:24vw;
}


/*hint3のポジション*/
.hint3{
    position: absolute;
    top:132vw;
    left:23vw;
}

/*information1のポジション*/
.information1{
    position: absolute;
    top:71vw;
    left:27vw;
}

/*information2のポジション*/
.information2{
    position: absolute;
    top:109vw;
    left:16vw;
}

/*information3のポジション*/
.information3{
    position: absolute;
    top:109vw;
    left:33vw;
}

/*推理ボタンについて*/
.detect{
    width:45vw;
    position: absolute;
    top:176vw;
    left:25vw;
}

.button{
    width:20vw;
    position: absolute;
    top:179vw;
    left:7vw;
}

.button:hover {
    opacity: .8;
  }

  
  
  /* モーダルウィンドウ */
  .modal {
    margin:0;
    width:100vw;
    height:100vh;

    /* 位置の調整(真ん中に表示) */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* デフォルトでは非表示にしておく */
    opacity: 0;
    visibility: hidden;
    /* 表示の変化にかかる時間 */
    transform: translate(-500vw,-110vw);
    transition: .9s;

    overflow-y: scroll;
    flex:1;
  }
  

    /* activeクラスのついたモーダルウィンドウ */
    .modal.active {
        opacity: 1;
        visibility: visible;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      
      /* モーダルウィンドウ内の閉じるボタン */
      .modal .close {
        cursor: pointer;
        position: absolute;
        top:180vw;
        left:9vw;
      }

      .modal .backButton{
        width:20vw;
      }

      .modal .backButton:hover{
        opacity: .8;
      }
      

      .modal .questionImg{
        width:90vw;
        position: absolute;
        top:75vw;
        left:5vw;
      }
      .modalBack{
        width:100vw;
      }