@charset "UTF-8";
/**
 * 【神奈川県河川】地図画面CSS
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2019.03.03 K.Fujimaki	地図下の凡例レイアウトを大幅修正
 * [02] 2020.03.12 K.Fujimaki	ダムは予測ではなく現況ダム局を表示するようにしたので、クラス名を修正
 * [03] 2021.02.25 K.Fujimaki	地図アイコンON/OFFのUIのcssを追加
 * ====2024年度リプレース
 * [A-01] 2024.12.30 K.Fujimaki	コメントの修正（潮位・高潮→海岸水位）
 *								   データ種別・項目番号を新システム用に変更
 */
/*=========================
	地図画面共通
  =========================*/
#dataBox{
	padding-top: 3px;
}
#mapArea{
	position:relative;
	top:0;
	left:0;
	width:770px;
	height:490px;
	margin: 0 auto 0 auto;
/* 	overflow: hidden; */
}
#mapArea img.map{
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
}

/*エリア名*/
#mapArea .areaName{
	background-color: #EEE;
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 3px 5px;
	border: solid 1px #777;
}
/*観測局名*/
#mapArea .obsName{
	background-color: #EEE;
	color: #000;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px;
	font-size: 10px;
	z-index:-1;
}
#mapArea .obsName.dispOff{/*[03]表示OFF用のcss*/
	display: none;
}
/*=========================
	時刻操作周り
  =========================*/
/*時刻間隔切替え*/
.timeBox{
	position:absolute;
	top: 5px;
	left: 645px;
	width:120px;
	height: auto;
}
/*「雨量表示切替」ラベル*/
.timeBox span.timeLabel{
	background-color: #356DB1;
	color:#fff;
	width: 100%;
	text-align: center;
	line-height: 18px;
	height:18px;
	display: inline-block;
}
ul.timeMode{
	top:1px;
	left: 0;
	margin:0 auto;
	width:120px;
}
/*=========================
	凡例
 * [01]海岸水位とダムを追加したのでタグ構成を含めレイアウトを組みなおし
  =========================*/
.mapExplain{
	font-size: 0;
	width: 770px;
	margin:0 auto;
	display: table
}
.explainBox{
	display: table-cell;
	padding-bottom: 3px;
	border-left-width:0px;
}
.explainBox:first-child{
	border-left-width:1px;
}
.explainBox h6{
	width: 100%;
	height:auto;
	line-height:14px;
	position:relative;
	writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-o-writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	margin-bottom: 3px;
}
.explainBox dt{
	margin: 0 5px;
	height: 17px;
	overflow: hidden;
}
.explainBox dd{
	float:none;
	height: auto;
	line-height: 17px;
	padding-left: 27px;
	width: 100%;
	box-sizing: border-box;
}
.explainBox .colorLegend{
	margin: 0;
}

/*=========================
	データボックス＋シンボルアイコン
  =========================*/
#mapArea .obsBox{
	position:absolute;
	top:0;
	left:0;
	display: block;
}
#mapArea .obsBox.dispOff{/*[03]表示OFF用のcss*/
	display: none;
}
#mapArea .obsBox a.dataLink{/*読み上げ用なので見えないようにする*/
	font-size:0;
}
#mapArea .obsBox .dataPop{
	display:none;
	position: absolute;
	top:0;
	left:0;
	border:solid 1px #6ca5d6;
	background-color: #fff;
	width: 160px;
	z-index: 100;
	font-size: 0;
}
/*データ種別ごとにアイコンサイズが違うので、表示位置を調整*/
#mapArea .obsBox.boxKind_1 .dataPop{left:19px;}/*雨量*/
#mapArea .obsBox.boxKind_4 .dataPop{left:22px;}/*水位*/
#mapArea .obsBox.boxKind_30 .dataPop{top:-30px; left:25px;}/*カメラ*/
#mapArea .obsBox.boxKind_7 .dataPop{left:22px;}/*[02]ダム*/
#mapArea .obsBox.boxKind_112 .dataPop{left:22px;}/*[A-01]海岸*/
/*カメラ画像のサイズ指定*/
#mapArea .obsBox.boxKind_30 .dataPop img{
	height: 120px;
	width: 160px;
	display: block;
}
/*hover時だけ表示*/
#mapArea .obsBox .dataLink:HOVER + .dataPop{
	display: block;
}
/*BOXの局名*/
#mapArea .obsBox .dataPop .name{
	text-align: center;
	width: 100%;
	font-weight: bold;
	display: block;
	padding: 5px 0;
	font-size: 16px;
	line-height: 18px;
}
/*BOXのデータ*/
#mapArea .obsBox .dataPop .dispData{
	width: 100%;
	background-color: #DBEDF8;
	display: block;
	border: solid 2px #fff;
	box-sizing: border-box;
	font-size: 14px;
	padding: 4px 0 2px 0;
}
#mapArea .obsBox .dataPop .dispData + .dispData{
	margin-top: -2px;
}
#mapArea .obsBox .dataPop .dispData .item{
	width: 65px;
	display: inline-block;
	text-align: center;
}
#mapArea .obsBox .dataPop .dispData .data{
	width: 85px;
	display: inline-block;
	text-align: right;
}

/*=========================
	[03]アイコンON/OFFのUI
  =========================*/
#mapIconSetting{
	font-size:0;
	height:auto;
	width:770px;
	background-color: #fff;
	position: relative;
	border: 1px solid #6D7D88;
	margin: 0 auto;
	box-sizing: border-box;
}
/* ---------------------- title */
#mapIconSetting h6{
	width: auto;
	font-size: 13px;
	text-align:center;
	background-color: #356DB1;
	color:#fff;
	display: inline-block;
	padding: 0 10px;
	line-height: 22px;
	vertical-align: middle;
}
#mapIconSetting label{
	font-size: 13px;
	padding-left: 10px;
	vertical-align: middle;
}