@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
}

#mapbox {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

.mbx-common {
  position: relative;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 600px;
  height: 600px;
}

.tab-group{
  display: flex;
  justify-content: left;
  width: 600px;
  border-bottom: none;
  font-weight: bold;
  margin-bottom: auto;
}

.tab{
  flex-grow: 1;
  padding:5px;
  list-style:none;
  border:solid 1px #CCC;
  text-align:center;
  cursor:pointer;
  background-color: #e0ffff;
}

.panel-groups{
  height:100px;
  border:solid 1px #CCC;
  border-top:none;
  background:#eee;
}

.panel{ /*非表示にさせます*/
  display:none;
}

.tab.is-active{  /*tabを上書きして発火させます*/
  background:#F00;
  color:#FFF;
  transition: all 0.2s ease-out;
}

.panel.is-show{ /*panelを上書きしてこれだけ表示させます*/
  display:block;
}