body{
    background-image: url(../img_map/map.rokko1.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:88vw;
    left:38vw;
}

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


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

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

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

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

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

.button{
  width:20vw;
  position: absolute;
  top:177vw;
  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:70vw;
      left:5vw;
    }

    .modalBack{
      width:100vw;
    }