html,body,main {
    height: 100%;
    margin: 0;
    padding: 0;
    /* display: block; */
}

#mapid {
    height: calc(100% - 50px);
    width: 100%;
    margin:0;
    padding:0;
    display: block;
}

.nav {
    width: 100%;
    height: 46px;
    margin:0;
    padding:0;
}
.nowrap {
    white-space: nowrap
}

.nav_titlebar {
    font-family: "ＭＳ ゴシック",sans-serif;
    font-size: 30px;

    background: #d2d6f1;
    background-color: #d2d6f1;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
    border-right-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-top-color: #d2d6f1;
	border-bottom-color: #a6b0f3;
	border-left-color: #d2d6f1;
	border-right-color: #d2d6f1;

    width: calc(100% - 4px);
    margin:0;

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
}

#formSerch {
    /* margin: 10px,10px,10px,10px; */
    width: 100%;
    height: 50px;
    padding: 0px 0px 0px 0px;
    display: -webkit-flex;
    display: flex;
    /* -webkit-align-items: center; 縦方向中央揃え（Safari用） */
    /* align-items: center; 縦方向中央揃え */
}

#SerchText {
    height: 80%;
    width: 80%;
}

#SerchButton {
    height: 80%;
    width: 70px;
}

#nav_button {
    margin: 0 20px 0 auto;
    padding: 10px 10px 10px 10px;
    width: 100px;
    height: 40px;
    white-space: nowrap;

    border: none;
    background: #d2d6f1;

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}

#nav_button:hover{
    background: #a6b0f3;
}

#nav_button:active{
    background: #7485f0;
}

.menu_text{
    padding: 0px 0px 0px 5px;
}

.SerchResult{
    width: 100%;
    height: 50px;
    cursor: pointer;
}

.SerchResult:hover{
    background: #dadada;
}

#legend_main{
    position: absolute;
    right: 5px;
    top: 130px;
    z-index: 500;
    width: 300px; height: 349.5px;
    margin:5px; padding:10px; border-radius: 5px;  border:2px solid darkgray;
    background-color:white;
    align-content: center;
    text-align: center;
    display : block;
}

#legend_box{
    position: absolute;
    right: 5px;
    top: 130px;
    z-index: 500;
    width: 20px; height: 20px;
    margin:5px; padding:5px; border-radius: 5px;  border:2px solid darkgray;
    background-color:white;
    align-content: center;
    text-align: center;
    display : none;
}

#invisible_area{
    position: absolute;
    position: absolute;
    right: 50px;
    top: 55px;
    z-index: 500;
    width: 150px; height: 40px;
    margin:5px; padding:10px; border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;  border:2px solid darkgray;
    background-color:white;
    align-content: center;
    text-align: center;
    display : block;
}