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;
}

.road{
    position: absolute;
    top:38vw;
    left:14vw;
}

.eat{
    position: absolute;
    top:75vw;
    left:50vw;
}

.kougakubu{
    position: absolute;
    top:83vw;
    left:57vw;
}

.yamaguchi{
    position: absolute;
    top:106vw;
    left:76vw;
}

.hyakunenn{
    position: absolute;
    top:115vw;
    left:71vw;
}

.tree{
    position: absolute;
    top:129vw;
    left:41vw;
}

.detect{
    width:45vw;
    position: absolute;
    top:175vw;
    left:25vw;
}

.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;
      }