@charset "UTF-8";
/**
 * 【神奈川県河川】洪水予測画面用CSS
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2019.03.02 K.Fujimaki	洪水予測一覧の放流中画像のcssを追加
 * [02] 2020.03.10 K.Fujimaki	ダム状況図画面のcssを追加
 * [03] 2020.03.12 K.Fujimaki	ダム諸量表の注意書き用cssを追加
 * [04] 2020.03.15 K.Fujimaki	凡例追加のため、洪水予測一覧・ダム諸量表のcssを修正
 * [05] 2024.02.19 K.Fujimaki	相模川6H対応のためcssを調整
 * ====2024年度リプレース
 * [A-01] 2025.03.11 K.Fujimaki	グラフのjs描画変更によるcss調整
 */
/*=========================
	洪水予測一覧画面
  =========================*/
/*模式図背景*/
body.flood_map #dataBox{
	margin-top: 5px;
	height: 560px;
	background-color: #EEEEEE;
	margin-bottom: 55px;/* [04]凡例追加のため */
}
/*[05]相模川6H化のため地図サイズ変更*/
body.flood_map #dataBox.map_c30101{
	height: 630px;
}
body.flood_map #dataBox.map_c30101 img{
	margin-bottom: 70px;
}
/*[01]放流中画像*/
body.flood_map .dischargeImg{
	position: absolute;
	top:0;
	left:0;
	display: inline-block;
	width: 100px;
	height: 87px;
	background:url("../images/common/discharge_water.png") no-repeat center bottom;
}
body.flood_map .dischargeImg.noDischarge{
	display: none;
}
body.flood_map .dischargeImg .text{
	display: inline-block;
	width: 100px;
	height: 30px;
	background: url("../images/common/discharge_text.png") no-repeat center top;
}
body.flood_map #sagamiMap.dischargeImg{/*=城山ダム*/
	top:12px;
	left:334px;
}
body.flood_map #sakawaMap.dischargeImg{/*=三保ダム*/
	top:-7px;
	left:330px;
}

/*データボックス*/
body.flood_map .tableBox{
	width: 200px;
	position: absolute;
}

/* 相模川（城山ダム）のデータBOX位置 */
body.flood_map .tableBox.dam_c30101_1,
body.flood_map .tableBox.dam_p30101_1{
	top:37px;left:10px;
}

body.flood_map .tableBox.stage_c30101_1,
body.flood_map .tableBox.stage_p30101_1{
	top:37px;right:11px;
}
body.flood_map .tableBox.stage_c30101_2,
body.flood_map .tableBox.stage_p30101_2{
	bottom:14px;right:11px;
}

/* 相模川（三保ダム）のデータBOX位置 */
body.flood_map .tableBox.dam_c30102_1,
body.flood_map .tableBox.dam_p30102_1{
	top:16px;left:10px;
}

body.flood_map .tableBox.stage_c30102_1,
body.flood_map .tableBox.stage_p30102_1{
	top:37px;right:11px;
}
body.flood_map .tableBox.stage_c30102_2,
body.flood_map .tableBox.stage_p30102_2{
	bottom:41px;right:11px;
}
body.flood_map .tableBox.stage_c30102_3,
body.flood_map .tableBox.stage_p30102_3{
	bottom:41px;left:10px;
}

body.flood_map .tableBox a{
	width: auto;
	display: inline-block;
	margin-top: 5px;
	margin-left:125px;
	box-sizing: border-box;
}
body.flood_map .timelineTbl tbody td{
	text-align: center;
	border-bottom:solid 1px #6D7D88;
	padding: 4px 4px;
}
/*ダム名称*/
body.flood_map .timelineTbl .damName{
	background-color: #34c478;
	color: #fff;
	font-weight: bold;
	padding: 5px;
	font-size: 14px;
}
/*水位局名称*/
body.flood_map .timelineTbl .stageName{
	background-color: #03a9f4;
	color: #fff;
	font-weight: bold;
	padding: 5px;
	font-size: 14px;
}
/*現在値欄*/
body.flood_map .current td{
	background-color: #f4ff80 !important;
	color: #000;
}
/* 一覧表の予測部分 */
body.flood_map .odd.forecast{
	background: #EEFFFF;
}
body.flood_map .even.forecast{
	background: #CFF3EE;
}
/* [04]凡例 */
body.flood_map .explainBox{
	margin-top:5px;
}
/*=========================
	ダム諸量画面
  =========================*/
/* 他画面種遷移ボタン */
body.flood_dam #dataHeaderBox .otherContentsBtn{
	position:absolute;
	top:0;
	left:130px;
	width: 50px;
}
/* 諸量表 */
body.flood_dam .timelineTbl{
	margin:0 auto;
	width:620px;
	position: relative;/*[03]*/
}
body.flood_dam .timelineTbl thead th{
	padding:10px 0;
}
body.flood_dam .timelineTbl thead th .info{/*[03]注意書き*/
	position: absolute;
	top:12px;
	right:0;
}
body.flood_dam .timelineTbl tbody td{
	padding-right:5px;
}
/* [04]凡例 */
body.flood_dam .explainBox{
	margin:0 auto;
	margin-top:-1px;
	width:618px;
}
/*=========================
	洪水予測詳細画面
  =========================*/
/*グラフタイトル*/
body.flood_stage h3{
	width: 200px;
	display: inline-block;
}
/*観測局名*/
body.flood_stage .obsName{
	display: inline-block;
}
/* 区切り線 */
body.flood_stage ul.graphArea li hr{
	width: 570px;
	text-align:left;
	margin-left:0;
}
/*グラフ横:定数凡例BOX*/
body.flood_stage .explainBox.graph-sideList{
	position: absolute;
	left : 468px;
	top: 0;
}
/* グラフ横の表 */
body.flood_stage .timelineTbl.graph{
	width: 205px;
}
body.flood_stage .timelineTbl.graph thead th{
	padding: 10px 0;
}
/* 一覧表の予測部分 */
body.flood_stage .odd.forecast{
	background: #EEFFFF;
}
body.flood_stage .even.forecast{
	background: #CFF3EE;
}
/* [A-01]予測部分の6データごとの区切り線 */
body.flood_stage .timelineTbl tbody tr.forecast:nth-child(6n){
	border-bottom:none;
}
body.flood_stage .timelineTbl tbody tr.forecast:nth-last-of-type(6n+1){
	border-bottom:solid 1px #6D7D88;
}

/* 一覧表の現在値部分 */
body.flood_stage .timelineTbl.graph tr.current td{
	background-color: #f4ff80;
	border-bottom: solid 2px red;
	color: #000;
}
body.flood_stage .current_line{
	position: absolute;
	top:161px;
	left: 542px;
	padding-right:8px;
	background: url("../images/common/mark_arrow.png") no-repeat right center;
}
/*[05]相模川6H化の個別対応*/
body.flood_stage ul.graphArea.graph_sagami .rainGraphArea{
	height: 146px;
}
/*[A-01]グラフ上部の実況＆予測ラベル*/
body.flood_stage .yohaku{
	height: 16px;
}
body.flood_stage .nowBar{
	position:relative;
	width: 107px;
	height: 17px;
	background-color: #F2F2F2;
	left: 49px;
	top: -2px;
	text-align: center;
	line-height: 18px;
}
body.flood_stage .futureBar{
	position:relative;
	width: 306px;
	height: 17px;
	background-color: #CFF3EE;
	left: 156px;
	top: -19px;
	text-align: center;
	line-height: 18px;
}
body.flood_stage .nowLabel{
	position:absolute;
	color: red;
	left: 145px;
}
body.flood_stage .nowLine{
	position: absolute;
	width: 0;
	height: 225px;
	left: 156px;
	top: 23px;
	border-left: solid 2px #FF0000;
}
body.flood_stage .nowLine.rain{
	top: 23px;
	height: 86px;
}
/*[A-01]相模川6H用のサイズ調整*/
body.flood_stage .graph_sagami .nowBar{
	width: 61px;
	left: 50px;
}
body.flood_stage .graph_sagami .futureBar{
	width: 350px;
	left: 111px;
}
body.flood_stage .graph_sagami .nowLabel{
	left: 99px;
}
body.flood_stage .graph_sagami .nowLine{
	left: 111px;
}

/*=========================
	[02]ダム状況図画面
  =========================*/
body.flood_diagram #dataBox .diagramBox{
	margin-top: 5px;
	background-color: #70d2e8;
	position: relative;
	z-index: 1;
}
/*全体図*/
body.flood_diagram .diagramBox .overImg{
	width: 100%;
	height:386px;
	margin-bottom: -3px;
	z-index: 100;
	background-repeat: no-repeat;
	background-position:center;
	background-size:contain;
}
body.flood_diagram #shiroyamaDiagram .overImg{
	background-image: url("../images/map/03diagram_shiroyama.png");
}
body.flood_diagram #mihoDiagram .overImg{
	background-image: url("../images/map/03diagram_miho.png");
}
/*貯水位の可変部分*/
body.flood_diagram .diagramBox .storageBase{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height:213px;
	background-color:transparent;
}
body.flood_diagram .diagramBox .storageBase .storage,
body.flood_diagram .diagramBox .storageBase .alarmBar{
	position: absolute;
	bottom: 0;
	left: 0;
}
/*貯水位の水面*/
body.flood_diagram .diagramBox .storageBase .storage{
	width: 100%;
	height:0%;
	background: linear-gradient(to bottom, #43acde, #71c2e8);
	z-index: -1;
}
body.flood_diagram .diagramBox .storageBase .storageArrow{
	content: "";
	display: block;
	position: absolute;
	bottom: 0%;
	right: 217px;
	width: 10px;
	height:10px;
	box-sizing: border-box;
	border: 10px solid transparent;
	border-right: 10px solid #0068b7;
	margin-bottom: -10px;
}
/*水面横の値ライン*/
body.flood_diagram .diagramBox .storageBase .alarmBar{
	left:auto;
	right:170px;
	width: 70px;
	height:235px;
	background-repeat: no-repeat;
	background-position:center;
}
body.flood_diagram #shiroyamaDiagram .storageBase .alarmBar{
	background-image: url("../images/symbol/03diagram/alarmBar_shiroyama.png"); 
}
body.flood_diagram #mihoDiagram .storageBase .alarmBar{
	background-image: url("../images/symbol/03diagram/alarmBar_miho.png"); 
}
/*定数表示*/
body.flood_diagram .diagramBox .storageBase .alarmPop{
	position: absolute;
	top:0;
	left:580px;
	background-color: #fff;
	border:solid 1px #6ca5d6;
	text-align: right;
	min-width: 150px;
}
body.flood_diagram .diagramBox .storageBase .alarmPop.alarm_1{/*サーチャージ水位*/
	top:-20px;
}
body.flood_diagram .diagramBox .storageBase .alarmPop.alarm_2{/*常時満水位*/
	top:43px;
}
body.flood_diagram .diagramBox .storageBase .alarmPop.alarm_3{/*予備放流水位*/
	top:105px;
}
body.flood_diagram .diagramBox .storageBase .alarmPop.alarm_4{/*最低水位*/
	top:auto;
	bottom:0;
}
body.flood_diagram .diagramBox .storageBase .alarmPop .item{
	display: block;
	width: 100%;
	text-align: left;
	background-color: #DBEDF8;
	padding: 5px;
	box-sizing: border-box;
}
body.flood_diagram .diagramBox .storageBase .alarmPop .dataStr,
body.flood_diagram .diagramBox .storageBase .alarmPop .unit{
	display: inline-block;
	padding: 5px 0;
}
body.flood_diagram .diagramBox .storageBase .alarmPop .unit{
	min-width: 30px;
	text-align: left;
}
/*データ表示*/
body.flood_diagram .diagramBox .dataPop{
	position: absolute;
	top:0;
	right:260px;
	padding: 5px;
	background-color: #fff;
	border-radius: 4px;
	border:solid 2px #0068b7;
}
body.flood_diagram .diagramBox .dataPop .data{
	display: flex;
	justify-content: space-between;
}
body.flood_diagram .diagramBox .dataPop .dataStr{
	display: block;
	width: 100%;
	text-align: right;
	margin-right:3px; 
}
body.flood_diagram .diagramBox .dataPop .item,
body.flood_diagram .diagramBox .dataPop .unit{
	display: block;
	width: 100%;
}
/*貯水位*/
body.flood_diagram .diagramBox .dataPop.storage{
	top:10px;
	right:10px;
	width: 210px;
	border-radius:0;
	padding:0;
}
body.flood_diagram .diagramBox .dataPop.storage .label{
	background-color: #0068b7;
	padding: 10px;
	color:#fff;
	font-size:16px;
}
body.flood_diagram .diagramBox .dataPop.storage .data{
	padding: 10px;
	font-size:16px;
}
/*流域平均雨量*/
body.flood_diagram .diagramBox .dataPop.basin{
	top:10px;
	right:260px;
	min-width: 140px;
	padding-left: 35px;
	background: #fff url("../images/header/title_rain.png") no-repeat 5px center; 
}
body.flood_diagram .diagramBox .dataPop.basin .data{
	margin-top: 5px;
}
/*流入量*/
body.flood_diagram .diagramBox .dataPop.inflow{
	top:80px;
	right:260px;
	min-width: 140px;
}
body.flood_diagram .diagramBox .dataPop.inflow:after{
	content: "";
	display: block;
	position: absolute;
	bottom: -40px;
	left:0;
	width: 100%;
	height:35px;
	background:url("../images/common/flood_arrow.png") no-repeat center; 
}
/*放流量*/
body.flood_diagram .diagramBox .dataPop.discharge{
	right:auto;
	left:10px;
	min-width: 140px;
}
body.flood_diagram .diagramBox .dataPop.discharge:after{
	content: "";
	display: block;
	position: absolute;
	bottom: -45px;
	left:0;
	width: 100%;
	height:35px;
	background:url("../images/common/flood_arrow.png") no-repeat center; 
}
body.flood_diagram #shiroyamaDiagram .dataPop.discharge{
	top:275px;
}
body.flood_diagram #shiroyamaDiagram .dataPop.discharge:after{
	bottom: -59px;
}
body.flood_diagram #mihoDiagram .dataPop.discharge{
	top:260px;
}
body.flood_diagram #mihoDiagram .dataPop.discharge:after{
	top: -52px;
	background-position: 5px center;
}
/*ダム状況ラベル*/
body.flood_diagram .statusLabel{
	position: absolute;
	top:0;
	left:20px;
	width: 170px;
	height:60px;
	background-repeat: no-repeat;
	background-position:center;
}
body.flood_diagram #shiroyamaDiagram .statusLabel{
	top:85px;
}
body.flood_diagram #mihoDiagram .statusLabel{
	top:30px;
}
body.flood_diagram .statusLabel.damStatusLv0{/*非表示*/
	background-image: none; 
}
body.flood_diagram #shiroyamaDiagram .statusLabel.damStatusLv1{/*発電放流*/
	background-image: url("../images/symbol/03diagram/damStatusLv1_shiroyama.png"); 
}
body.flood_diagram #mihoDiagram .statusLabel.damStatusLv1{/*常用設備放流*/
	background-image: url("../images/symbol/03diagram/damStatusLv1_miho.png"); 
}
body.flood_diagram .statusLabel.damStatusLv2{/*ゲート放流*/
	background-image: url("../images/symbol/03diagram/damStatusLv2.png"); 
}
body.flood_diagram .statusLabel.damStatusLv3{/*予備放流*/
	background-image: url("../images/symbol/03diagram/damStatusLv3.png"); 
}
body.flood_diagram .statusLabel.damStatusLv4{/*洪水調節*/
	background-image: url("../images/symbol/03diagram/damStatusLv4.png"); 
}
body.flood_diagram .statusLabel.damStatusLv5{/*洪水調節*/
	background-image: url("../images/symbol/03diagram/damStatusLv5.png"); 
}
body.flood_diagram .statusLabel.damStatusLv6{/*異常洪水時防災操作*/
	background-image: url("../images/symbol/03diagram/damStatusLv6.png"); 
}
/* 凡例 */
body.flood_diagram .explainBox{
	margin-top:10px;
}
/*ダム状況図の説明*/
body.flood_diagram .diagramInfo{
	margin-top:5px;
	font-size:14px;
	line-height: 20px;
}