@charset "UTF-8";
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

/*=======================
	概況図画面用
  =======================*/
.mapBox .symbolSelect {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 148px;
  width: auto;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #9ec0d5;
}

.mapBox .symbolSelect li {
  display: inline-flex;
}

.mapBox .timeMode {
  display: flex;
  position: absolute;
  top: 12px;
  left: 10px;
}

.mapBox img[class*='symbol_'] {
  position: absolute;
}

.mapBox [class*='symbol_'] {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: transparent;
}

.mapBox [class*='symbol_'].is-link {
  cursor: pointer;
}

.mapBox [class*='symbol_'].is-selected {
  z-index: 100;
}

.mapBox .symbol_1 {
  width: 14px;
  height: 14px;
}

.mapBox .symbol_1.Lv0 {
  background-image: url("../../res/img/icon/iconMap_rainfallLv0.png");
}

.mapBox .symbol_1.Lv1 {
  background-image: url("../../res/img/icon/iconMap_rainfallLv1.png");
}

.mapBox .symbol_1.Lv2 {
  background-image: url("../../res/img/icon/iconMap_rainfallLv2.png");
}

.mapBox .symbol_1.Lv3 {
  background-image: url("../../res/img/icon/iconMap_rainfallLv3.png");
}

.mapBox .symbol_1.missing {
  background-image: url("../../res/img/icon/iconMap_rainfall_missing.png");
}

.mapBox .symbol_4 {
  width: 17px;
  height: 12px;
}

.mapBox .symbol_4.Lv0_up {
  background-image: url("../../res/img/icon/iconMap_stageLv0_up.png");
}

.mapBox .symbol_4.Lv0_down {
  background-image: url("../../res/img/icon/iconMap_stageLv0_down.png");
}

.mapBox .symbol_4.Lv1_up {
  background-image: url("../../res/img/icon/iconMap_stageLv1_up.png");
}

.mapBox .symbol_4.Lv1_down {
  background-image: url("../../res/img/icon/iconMap_stageLv1_down.png");
}

.mapBox .symbol_4.Lv2_up {
  background-image: url("../../res/img/icon/iconMap_stageLv2_up.png");
}

.mapBox .symbol_4.Lv2_down {
  background-image: url("../../res/img/icon/iconMap_stageLv2_down.png");
}

.mapBox .symbol_4.Lv3_up {
  background-image: url("../../res/img/icon/iconMap_stageLv3_up.png");
}

.mapBox .symbol_4.Lv3_down {
  background-image: url("../../res/img/icon/iconMap_stageLv3_down.png");
}

.mapBox .symbol_4.Lv4_up {
  background-image: url("../../res/img/icon/iconMap_stageLv4_up.png");
}

.mapBox .symbol_4.Lv4_down {
  background-image: url("../../res/img/icon/iconMap_stageLv4_down.png");
}

.mapBox .symbol_4.Lv8_up {
  background-image: url("../../res/img/icon/iconMap_stageLv8_up.png");
}

.mapBox .symbol_4.Lv8_down {
  background-image: url("../../res/img/icon/iconMap_stageLv8_down.png");
}

.mapBox .symbol_4.missing {
  background-image: url("../../res/img/icon/iconMap_stage_missing.png");
}

.mapBox .symbol_4.NoAlert_up {
  background-image: url("../../res/img/icon/iconMap_stageNoAlert_up.png");
}

.mapBox .symbol_4.NoAlert_down {
  background-image: url("../../res/img/icon/iconMap_stageNoAlert_down.png");
}

.mapBox .symbol_flow {
  width: 12px;
  height: 12px;
}

.mapBox .symbol_flow {
  background-image: url("../../res/img/icon/iconMap_flow.png");
}

.mapBox .symbol_13 {
  width: 8px;
  height: 22px;
  background-position: center;
}

.mapBox .symbol_13 {
  background-image: url("../../res/img/icon/iconMap_kind13.png");
}

.mapBox .symbol_temp {
  width: 10px;
  height: 22px;
  background-position: center;
}

.mapBox .symbol_temp {
  background-image: url("../../res/img/icon/iconMap_temp.png");
}

.mapBox .symbol_temp.missing {
  background-image: url("../../res/img/icon/iconMap_temp_missing.png");
}

.mapBox .symbol_rtemp {
  width: 22px;
  height: 22px;
  background-position: center;
}

.mapBox .symbol_rtemp {
  background-image: url("../../res/img/icon/iconMap_rtemp.png");
}

.mapBox .symbol_rtemp.missing {
  background-image: url("../../res/img/icon/iconMap_rtemp_missing.png");
}

.mapBox .symbol_wspeed {
  width: 18px;
  height: 22px;
  background-position: center;
}

.mapBox .symbol_wspeed {
  background-image: url("../../res/img/icon/iconMap_wspeed.png");
}

.mapBox .symbol_wspeed.missing {
  background-image: url("../../res/img/icon/iconMap_wspeed_missing.png");
}

.mapBox .symbol_wind {
  width: 22px;
  height: 22px;
  background-position: center;
}

.mapBox .symbol_wind.Dir00 {
  background-image: url("../../res/img/icon/iconMap_windDir00.png");
}

.mapBox .symbol_wind.Dir01 {
  background-image: url("../../res/img/icon/iconMap_windDir01.png");
}

.mapBox .symbol_wind.Dir02 {
  background-image: url("../../res/img/icon/iconMap_windDir02.png");
}

.mapBox .symbol_wind.Dir03 {
  background-image: url("../../res/img/icon/iconMap_windDir03.png");
}

.mapBox .symbol_wind.Dir04 {
  background-image: url("../../res/img/icon/iconMap_windDir04.png");
}

.mapBox .symbol_wind.Dir05 {
  background-image: url("../../res/img/icon/iconMap_windDir05.png");
}

.mapBox .symbol_wind.Dir06 {
  background-image: url("../../res/img/icon/iconMap_windDir06.png");
}

.mapBox .symbol_wind.Dir07 {
  background-image: url("../../res/img/icon/iconMap_windDir07.png");
}

.mapBox .symbol_wind.Dir08 {
  background-image: url("../../res/img/icon/iconMap_windDir08.png");
}

.mapBox .symbol_wind.Dir09 {
  background-image: url("../../res/img/icon/iconMap_windDir09.png");
}

.mapBox .symbol_wind.Dir10 {
  background-image: url("../../res/img/icon/iconMap_windDir10.png");
}

.mapBox .symbol_wind.Dir11 {
  background-image: url("../../res/img/icon/iconMap_windDir11.png");
}

.mapBox .symbol_wind.Dir12 {
  background-image: url("../../res/img/icon/iconMap_windDir12.png");
}

.mapBox .symbol_wind.Dir13 {
  background-image: url("../../res/img/icon/iconMap_windDir13.png");
}

.mapBox .symbol_wind.Dir14 {
  background-image: url("../../res/img/icon/iconMap_windDir14.png");
}

.mapBox .symbol_wind.Dir15 {
  background-image: url("../../res/img/icon/iconMap_windDir15.png");
}

.mapBox .symbol_wind.Dir16 {
  background-image: url("../../res/img/icon/iconMap_windDir16.png");
}

.mapBox .symbol_wind.missing {
  background-image: url("../../res/img/icon/iconMap_wind_missing.png");
}

.mapBox .symbol_camera {
  width: 20px;
  height: 17px;
}

.mapBox .symbol_camera.is-selected {
  width: 31px;
  height: 26px;
  margin-left: -5px;
  margin-top: -4px;
}

.mapBox .symbol_camera {
  background-image: url("../../res/img/icon/iconMap_camera.png");
}

.mapBox .symbol_camera.is-selected {
  background-image: url("../../res/img/icon/iconMap_camera_on.png");
}

.mapBox .symbol_camera:hover:not(.is-selected) {
  cursor: pointer;
  opacity: 0.7;
}

.mapBox .explainBox .title {
  width: 100%;
}

.mapBox .explainBox .ctg {
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
}

.mapBox .explainBox .ctg > div {
  width: 100%;
}

.mapBox .explainBox .ctg > div:not(:first-child) {
  border-left: 1px solid #9ec0d5;
}

.mapBox .explainBox .ctg .caption {
  display: block;
  width: 100%;
  text-align: center;
  padding: 3px;
  background-color: #f6fbff;
}

.mapBox .explainBox .ctg .mapLegend {
  display: flex;
  flex-wrap: wrap;
  padding: 3px 5px;
  border-top: 1px dashed #9ec0d5;
}

.mapBox .explainBox .ctg .mapLegend dt {
  width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapBox .explainBox .ctg .mapLegend dt [class*='symbol_'] {
  position: relative;
}

.mapBox .explainBox .ctg .mapLegend dd {
  margin-left: -22px;
  padding-left: 25px;
  width: 50%;
}

.mapBox .explainBox .ctg .caption + .mapLegend {
  border-top: none;
}

.mapBox .mapArea .explainBox {
  position: absolute;
  margin: 10px;
}

.mapBox .mapArea .explainBox.top {
  top: 0;
}

.mapBox .mapArea .explainBox.right {
  right: 0;
}

.mapBox .mapArea .explainBox.bottom {
  bottom: 0;
}

.mapBox .mapArea .explainBox.left {
  left: 0;
}

.mapBox .mapArea .explainBox .ctg {
  flex-direction: column;
}

.mapBox .mapArea .explainBox .ctg > div {
  width: 100%;
}

.mapBox .mapArea .explainBox .ctg > div:not(:first-child) {
  border-left: none;
  border-top: 1px solid #9ec0d5;
}

.mapBox .mapArea .explainBox .ctg .mapLegend {
  display: block;
}

.mapBox .mapArea .explainBox .ctg .mapLegend dt {
  height: 17px;
}

.mapBox .mapArea .explainBox .ctg .mapLegend dd {
  width: 100%;
  margin-left: 0;
  margin-top: -15px;
}

.mapBox .symbolBox {
  position: absolute;
}

.mapBox .symbolBox.temp {
  margin-left: -40px;
}

.mapBox .symbolBox.rtemp {
  margin-left: -26px;
}

.mapBox .symbolBox.wspeed {
  margin-left: 10px;
}

.mapBox .symbolBox.wind {
  margin-left: 28px;
}

.mapBox .symbolBox .dataTbl {
  display: none;
  position: relative;
}

.mapBox .symbolBox .dataTbl.dispOn {
  display: block;
}

.mapBox .symbolBox [class*='symbol_']:hover + .dataTbl {
  display: block;
  top: 15px;
  left: 20px;
  z-index: 1000;
}

.mapBox .mapArea {
  position: relative;
  border: solid 1px #cfd2d4;
  margin: 0 auto;
}

.mapBox .mapArea .map_img {
  border: solid 1px #ffffff;
  box-sizing: content-box;
}

.mapBox .mapInfo {
  position: relative;
  margin: 5px auto;
  font-size: 16px;
}

/*=======================
	マップ画面個別の超過色替え
  =======================*/
/* ---------------------------水位・流量 */
.stageLv0, .colorLbl.ex-stageLv0:before, .explainBox span.ex-stageLv0 {
  background-color: #66CCFF;
  color: #232323;
}

.stageLv1, .colorLbl.ex-stageLv1:before, .explainBox span.ex-stageLv1 {
  background-color: #17A86B;
  color: #ffffff;
}

.stageLv2, .colorLbl.ex-stageLv2:before, .explainBox span.ex-stageLv2 {
  background-color: #F2E700;
  color: #232323;
}

.stageLv3, .colorLbl.ex-stageLv3:before, .explainBox span.ex-stageLv3 {
  background-color: #FF2800;
  color: #ffffff;
}

.stageLv4, .colorLbl.ex-stageLv4:before, .explainBox span.ex-stageLv4 {
  background-color: #AA00AA;
  color: #ffffff;
}

.stageLv8, .colorLbl.ex-stageLv8:before, .explainBox span.ex-stageLv8 {
  background-color: #140014;
  color: #ffffff;
}