.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
/*画像を貼り付ける*/
.tab-label_left {
    background-image: url("./img/土砂崩れ改.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color:white;
}
.tab-label_center {
    background-image: url("./img/洪水改.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color:white;
}
.tab-label_right {
    background-image: url("./img/避難所改.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color:white;
}
/* アクティブなタブ */
.tab-switch_left:checked+.tab-label_left {
    background-color:lightgray;
}
.tab-switch_left:checked+.tab-label_left{
     display: block;
}

.tab-switch_center:checked+.tab-label_center {
    
    background-color:lightgray;
}
.tab-switch_rightcenter:checked+.tab-label_center{
     display: block;
}

.tab-switch_right:checked+.tab-label_right {
    background-color:lightgray;
}
.tab-switch_right:checked+.tab-label_right{
     display: block;
}

/*ボタンの配置*/
#btn_left{
    margin: 0;
    padding: 0;
    width: 33%;
    height: 10%;
    position: fixed;
    left: 0px;
    bottom: 0px;
}
#btn_right{
    margin: 0;
    padding: 0;
    width: 33%;
    height: 10%;
    position: fixed;
    right: 0px;
    bottom: 0px;
}
#btn_center{
    margin: 0;
    padding: 0;
    width: 33%;
    height: 10%;
    position: fixed;
    left: 33.5%;
    bottom: 0px;
}

/*マップの表示*/

#map {
    height: 100%;
  }
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.icon-red { /* icon-redは最初に指定したクラス名 */
    filter: hue-rotate(150deg);
}