@charset "UTF-8";
/**
 * 【神奈川県河川】共通CSS
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2019.03.01 K.Fujimaki	ヘッダーのダム放流アイコン表示のため、グロナビ下と画面タイトル部分のcssを修正
 * 									あわせてグロナビ下部分のダム放流アイコン用cssを追加
 * [02] 2020.03.10 K.Fujimaki	他画面遷移用のボタンのcssを調整
 * [03] 2021.02.25 K.Fujimaki	チェックボックスのcssを調整（元々あったcssは未使用だったので削除）
 * [04] 2021.02.21 K.Fujimaki	水位超過色変更、高潮超過色用css追加、不要css削除
 * ====2024年度リプレース
 * [A-01] 2024.12.30 K.Fujimaki	コメントの修正（潮位・高潮→海岸水位）
 *								海岸水位の超過レベル変更（高潮特別警戒はレベル4ではなく8）
 */
/* ------------------------Common Style */
a{
	color:#005e92;
}
a:hover{
}
/*[03]ラベルとチェックボックスのcssを調整*/
label{
	cursor: pointer;
}
input[type=checkbox]{
	margin:0;
	margin-right: 3px;
}
/*=======================
 	Base layout
  =======================*/
body{
	width:100%;
}
body.publicContents{
	background:url(../images/header/public/gNavi_bg.png) repeat-x;
}
body.cityContents{
	background:url(../images/header/city/gNavi_bg.png) repeat-x;
}
#header{
	position: relative;
	width: 1000px;
	z-index: 100;
	margin: 0 auto;
}
.publicContents #header{
	background:url(../images/header/public/gNavi_bg.png) repeat-x;
}
.cityContents #header{
	background:url(../images/header/city/gNavi_bg.png) repeat-x;
}
#main {
	position: relative;
	top:0;
	width: 1000px;
	margin: 0 auto;
	height: auto;
	min-height: 510px;
	padding-bottom: 0;
}
#contents{
	position: relative;
	top:0;
	left:198px;
	width:780px;
	height: auto;
	display: block;
}
#footer {
	position: relative;
	top:0px;
	width: 1000px;
	margin: 0 auto;
	height: auto;
	/*padding:10px 0;
	border-top:solid 2px #97BFE2;*/
/* 	text-align:center; */
	text-align:left;
	line-height:16px;
}
/*=======================
	Header
	+ Global Navigation
		+ H1
		+ Navi Button
		+ HELP
  =======================*/
#globalNavi{
	position: relative;
	width: 1000px;
	height: 70px;
	margin: 0 auto;
	font-size: 0;
}
/* --------------------- システム名 */
h1{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width: 265px;
	height: 63px;
	overflow: hidden;
}
h1 a{
	display:inline-block;
	width: 100%;
	height: 100%;
}
/* --------------------- ナビメニュー */
#globalNavi ul.naviBtn{
	position: relative;
	top: 0;
	left: 265px;
	width: 743px;
	font-size: 0;
}
#globalNavi ul.naviBtn li {
	display: inline-block;
}
#globalNavi ul.naviBtn li a,
#globalNavi ul.naviBtn li span {
	display: block;
	width: 90px;
	height: 70px;
	background-repeat: no-repeat;
	background-position: left top;
}
/* HOVER */
#globalNavi ul.naviBtn li a:HOVER{
	background-position: left -70px;
}
/* 選択中 */
#globalNavi ul.naviBtn li span{
	background-position: left -140px;
}
/* 個別背景設定＠一般向け */
.publicContents #globalNavi ul.naviBtn li.gNavi_top a,
.publicContents #globalNavi ul.naviBtn li.gNavi_top span{
	background-image: url("../images/header/public/gNavi_top.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_map a,
.publicContents #globalNavi ul.naviBtn li.gNavi_map span{
	background-image: url("../images/header/public/gNavi_map.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_rain a,
.publicContents #globalNavi ul.naviBtn li.gNavi_rain span{
	background-image: url("../images/header/public/gNavi_rain.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_stage a,
.publicContents #globalNavi ul.naviBtn li.gNavi_stage span{
	background-image: url("../images/header/public/gNavi_stage.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_camera a,
.publicContents #globalNavi ul.naviBtn li.gNavi_camera span{
	background-image: url("../images/header/public/gNavi_camera.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_flood a,
.publicContents #globalNavi ul.naviBtn li.gNavi_flood span{
	background-image: url("../images/header/public/gNavi_flood.png");
}
.publicContents #globalNavi ul.naviBtn li.gNavi_over a,
.publicContents #globalNavi ul.naviBtn li.gNavi_over span{
	background-image: url("../images/header/public/gNavi_over.png");
}
/* 個別背景設定＠市町村向け */
.cityContents #globalNavi ul.naviBtn li.gNavi_top a,
.cityContents #globalNavi ul.naviBtn li.gNavi_top span{
	background-image: url("../images/header/city/gNavi_top.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_map a,
.cityContents #globalNavi ul.naviBtn li.gNavi_map span{
	background-image: url("../images/header/city/gNavi_map.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_rain a,
.cityContents #globalNavi ul.naviBtn li.gNavi_rain span{
	background-image: url("../images/header/city/gNavi_rain.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_stage a,
.cityContents #globalNavi ul.naviBtn li.gNavi_stage span{
	background-image: url("../images/header/city/gNavi_stage.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_camera a,
.cityContents #globalNavi ul.naviBtn li.gNavi_camera span{
	background-image: url("../images/header/city/gNavi_camera.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_flood a,
.cityContents #globalNavi ul.naviBtn li.gNavi_flood span{
	background-image: url("../images/header/city/gNavi_flood.png");
}
.cityContents #globalNavi ul.naviBtn li.gNavi_over a,
.cityContents #globalNavi ul.naviBtn li.gNavi_over span{
	background-image: url("../images/header/city/gNavi_over.png");
}
/* --------------------- ヘルプ */
#globalNavi .gNavi_help{
	position: absolute;
	top: 5px;
	right: 20px;
	width: 52px;
	height: 52px;
	display:block;
	background-repeat: no-repeat;
	background-position: left top;
}
.publicContents #globalNavi .gNavi_help{
	background-image: url("../images/header/public/gNavi_help.png");
}
.cityContents #globalNavi .gNavi_help{
	background-image: url("../images/header/city/gNavi_help.png");
}
/* HOVER */
#globalNavi a.gNavi_help:HOVER{
	background-position: left -52px;
}
/* 選択中 */
#globalNavi span.gNavi_help{
	background-position: left -104px;
}
/*=======================
	Header
	+ headerInfo//[01]グロナビ下部分のidを変更
		+ damDischarge//[01]ダム放流アイコン
		+ obsTime
		+ Reload Button
  =======================*/
#headerInfo{/*[01]グロナビ下部分のidを変更*/
	position: relative;
	top:0;
	left:0;
	width: 1000px;
	height: 35px;
	margin: 0 auto;/*[01]サイズ調整*/
}
/* --------------------- [01]ダム放流中アイコン */
#headerInfo .damDischarge{
	position:relative;
	top:2px;
	left:0;
	height:100%;
	width:auto;
	display:inline-block;
}
#headerInfo .damDischarge .damIcon{
	display: inline-block;
	width: 170px;
	height: 30px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: left top;
	color:transparent;
}
#headerInfo .damDischarge .damIcon:hover{
	background-position: left bottom;
}
#headerInfo .damDischarge .damIcon.noDischarge{
	display: none;
}
#headerInfo .damDischarge #discharge_shiroyama{
	background-image: url("../images/header/btn_discharge_shiroyama.png");
}
#headerInfo .damDischarge #discharge_miho{
	background-image: url("../images/header/btn_discharge_miho.png");
}
/* --------------------- 観測時刻 */
#headerInfo .obsTime{/*[01]グロナビ下部分のidを変更*/
	position:absolute;
	top:0;
	right:100px;
	font-size:14px;
	line-height:37px;
	height:100%;
	width:auto;
	display:inline-block;
}
/* --------------------- 更新ボタン */
#headerInfo a.btn_refresh{/*[01]グロナビ下部分のidを変更*/
	position:absolute;
	top:3px;
	right:20px;
	display:inline-block;
	width:74px;
	height:30px;
	font-size:0;
	background-image: url(../images/header/btn_refresh.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#headerInfo a.btn_refresh:HOVER{/*[01]グロナビ下部分のidを変更*/
	background-position: left -30px;
}
/*=========================
	//[01]画面タイトル部分をcontentsの子要素に変更
	contents
		+ titleBar
  =========================*/
#titleBar{
	position: relative;
	top:0;
	left:0;
	width: 100%;/*[01]contentsの子要素用にcss調整*/
	height: 26px;/*[01]contentsの子要素用にcss調整*/
	text-align:left;/*[01]contentsの子要素用にcss調整*/
}
/* --------------------- 画面タイトル */
#titleBar h2{
	position:relative;
	top:0;
	left:0;/*[01]contentsの子要素用にcss調整*/
	width:100%;/*[01]contentsの子要素用にcss調整*/
	font-size:17px;
	line-height:30px;/*[01]contentsの子要素用にcss調整*/
	text-indent:27px;
	height:100%;
	display:inline-block;
	background-repeat: no-repeat;
	background-position: left center;
}
/* 個別背景設定 */
#titleBar h2.title_map{
	background-image: url("../images/header/title_map.png");
}
#titleBar h2.title_rain{
	background-image: url("../images/header/title_rain.png");
}
#titleBar h2.title_stage{
	background-image: url("../images/header/title_stage.png");
}
#titleBar h2.title_camera{
	background-image: url("../images/header/title_camera.png");
}
#titleBar h2.title_flood{
	background-image: url("../images/header/title_flood.png");
}
#titleBar h2.title_over{
	background-image: url("../images/header/title_over.png");
}
#titleBar h2.title_help{
	background-image: url("../images/header/title_help.png");
}
/*=========================
	contents
		+ dataHeaderBox
			+ timeBox
			+ otherContentsBtn
			+ pagerBox
  =========================*/
#dataHeaderBox{
	position:relative;
	margin-bottom: 0;
	height: 28px;
	text-align:right;
	font-size: 0;
}
/* --------------------- 時刻間隔切替え */
#dataHeaderBox .timeBox{
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:200px;
	height: 100%;
	overflow:hidden;
	text-align:left;
}
ul.timeMode{
	position: relative;
	top: 4px;
	left: 4px;
	font-size: 0;
}
ul.timeMode li{
	display: inline-block;
	width: 60px;
	height: 21px;
	background: url(../images/button/btn_timeMode.png) no-repeat -60px top;
}
ul.timeMode li:FIRST-CHILD{
	background-position: left top;
}
ul.timeMode li:LAST-CHILD{
	background-position: right top;
}
ul.timeMode li a,
ul.timeMode li span{
	display: block;
	width:100%;
	height:100%;
	font-size: 12px;
	text-align: center;
	line-height: 21px;
}
/* HOVER */
ul.timeMode li:not([class^="is-"]):HOVER{
	background-position: -60px -21px;
}
ul.timeMode li:not([class^="is-"]):HOVER:FIRST-CHILD{
	background-position: left -21px;
}
ul.timeMode li:not([class^="is-"]):HOVER:LAST-CHILD{
	background-position: right -21px;
}
/* 選択中 */
ul.timeMode li.is-selected{
	background-position: -60px -42px;
}
ul.timeMode li.is-selected:FIRST-CHILD{
	background-position: left -42px;
}
ul.timeMode li.is-selected:LAST-CHILD{
	background-position: right -42px;
}
ul.timeMode li.is-selected span{
	color: #fff;
	cursor: default;
}
/* disabled */
ul.timeMode li.is-disabled{
	background-position: -60px bottom;
}
ul.timeMode li.is-disabled:FIRST-CHILD{
	background-position: left bottom;
}
ul.timeMode li.is-disabled:LAST-CHILD{
	background-position: right bottom;
}
ul.timeMode li.is-disabled span{
	color: #cdcdcd;
	cursor: default;
}
/* --------------------- 他画面種遷移ボタン */
#dataHeaderBox .otherContentsBtn{
	position:relative;
	top:2px;
	right:0;
	vertical-align: top;
	margin-left: 10px;/*[02]*/
}
/* --------------------- 表示ページ変更 */
#dataHeaderBox .pagerBox{
	display:inline-block;
	width:auto;
	height: 100%;
	position:relative;
	top:2px;
	right:0;
	overflow:hidden;
}
#dataHeaderBox .pagerBox button{
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
	vertical-align: top;
	height: 24px;
}
#dataHeaderBox .otherContentsBtn + .pagerBox button{
	margin-left: 10px;/*[02]*/
}
ul.changePage{
	display: inline-block;
	position: relative;
	top: 3px;
	left: 0px;
	width: 160px;
}
ul.changePage li{
	display: inline-block;
	width:48px;
	height:17px;
}
ul.changePage li.pageCount{
	width:40px;
	font-size: 12px;
	line-height: 18px;
	margin: 0 5px;
	padding: 0 3px;
	text-align: right;
	border: solid 1px #c3d0db;
	background-color: #F1F5F7;
	cursor: default;
	vertical-align: text-top;
}
ul.changePage li:not(.pageCount){
	background-repeat: no-repeat;
	background-position: left top;
	height:16px;
	cursor: pointer;
}
ul.changePage li.prevPage{
	background-image: url(../images/button/btn_prevPage.png);
	text-indent: 15px;
	text-align: left;
}
ul.changePage li.nextPage{
	background-image: url(../images/button/btn_nextPage.png);
	text-indent: 6px;
	text-align: left;
}
ul.changePage li:not(.pageCount) a,
ul.changePage li:not(.pageCount) span{
	display: block;
	width:100%;
	height:100%;
	font-size: 0;
}
/* HOVER */
ul.changePage li:not(.pageCount):not(.is-disabled):HOVER{
	background-position: left -17px;
}
/* disabled */
ul.changePage li:not(.pageCount).is-disabled{
	background-position: left bottom;
	cursor: default;
}
/*=========================
	contents
		+ dataBox
  =========================*/
#dataBox{
	position: relative;
	width: 100%;
	height:auto;
}
.dataInfo {
	position: relative;
	width: 100%;
	height: auto;
	text-align:left;
	line-height:16px;
	margin-top:5px;
}
/*=========================
	汎用
  =========================*/
/*h3*/
h3{
	font-size: 14px;
	text-indent:10px;
	letter-spacing: 1px;
	line-height:18px;
	background: url("../images/common/mark_h3.png") no-repeat left center;
	display: block;
}
/* Horizontal Rule */
hr{
	border: none;
	background: #f6f7f8;
	height: 1px;
	border-top: 1px solid #cbd5de;
	border-bottom: solid 2px #f6f7f8;
}
/*----------------------- ボタン汎用 */
.funcBtn{
	min-width: 55px;
	height: 22px;
	line-height: 24px;
	font-size: 12px;
	color: #005e92 !important;
	cursor: pointer;
	background: #ffffff !important;
	background: linear-gradient(#ffffff 10%, #eeeff1 100%) !important;
	background: -webkit-linear-gradient(#ffffff 10%, #eeeff1 100%) !important;
	border-radius: 5px !important;
	border:1px solid #99a6b3 !important;
	margin:0;
	opacity:1 !important;
	filter: alpha(opacity=100) !important;
	text-decoration: none;
	text-align: center;
	padding: 0 5px;
	display: inline-block;
	vertical-align: middle;
}
.funcBtn:hover{
	background: #f3f3f3 !important;
	background: linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
	background: -webkit-linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
}
.funcBtn.is-disabled,
.funcBtn.is-disabled:hover{
	cursor:default;
	color:#b8bdc2 !important;
	border:1px solid #99a6b3 !important;
	background: #dedfe0 !important;

}
/*----------------------- 定数凡例色ラベル */
span.colorLbl{
	display:inline-block;
}
span.colorLbl:before{
	content: "";
	display: inline-block;
	width:6px;
	height: 10px;
	border: 1px solid #fff;
	vertical-align: middle;
}
/*=======================
	color
  =======================*/
/* ---------------------------雨量 */
/* レベル5 */
.rainfallLv5,					/* data 背景 */
.explainBox span.ex-rainfallLv5{/* 凡例, 例) */
	background: #C90000;
}
/* レベル4 */
.rainfallLv4,
.explainBox span.ex-rainfallLv4{
	background: #ED9D00;
}
/* レベル3 */
.rainfallLv3,
.explainBox span.ex-rainfallLv3{
	background: #FFF701;
}
/* レベル2 */
.rainfallLv2,
.explainBox span.ex-rainfallLv2{
	background: #4D00ED;
}
/* レベル1 */
.rainfallLv1,
.explainBox span.ex-rainfallLv1{
	background: #7DF8ED;
}
/* レベル0 */
td.rainfallLv0,
.explainBox span.ex-rainfallLv0{
	background: #fff;
	border: 1px solid #c6ced5;
}
/* ---------------------------予測流域平均 */
/* 予測流域平均雨量 */
td.preBasinAve{
	background: #29ac8c;
}
/* ---------------------------- 共通 */
/* 欠測 */
.missing,
span.missing:before,
.explainBox span.ex-missing{
/* 	background: #B4ACA0; */
}

/* ---------------------------- 水位 */
/* [04]超過色変更 */
/* 氾濫危険 */
th.stageLv4, td.stageLv4,
span.colorLbl.ex-stageLv4:before,
.explainBox span.ex-stageLv4{
	background: #A902A9;
}

/* 避難判断 */
th.stageLv3, td.stageLv3,
span.colorLbl.ex-stageLv3:before,
.explainBox span.ex-stageLv3{
	background: #D70F0F;
}

/* 氾濫注意 */
th.stageLv2, td.stageLv2,
span.colorLbl.ex-stageLv2:before,
.explainBox span.ex-stageLv2{
	background: #FDEA1D;
}

/* 水防団待機 */
th.stageLv1, td.stageLv1,
span.colorLbl.ex-stageLv1:before,
.explainBox span.ex-stageLv1{
	background: #62EAEF;
}
/* ---------------------------- [04]海岸水位 */
/* 特別警戒 */
/*[A-01]レベル4から8に変更*/
th.coastLv8, td.coastLv8,
span.colorLbl.ex-coastLv8:before,
.explainBox span.ex-coastLv8{
	background: #0C000C;
}
/* --------------------------文字色 */
/* [04]超過色変更のため、文字色変更対象のcssクラス修正 */
.rainfallLv5,	/*tdの他にddもあるからね*/
.rainfallLv2,
td.stageLv4,
th.stageLv4,
td.stageLv3,
th.stageLv3,
td.coastLv8,/*[A-01]レベル4から8に変更*/
th.coastLv8{/*[A-01]レベル4から8に変更*/
	color: #fff;
}
/*=======================
	ポップアップモーダル
  =======================*/
.white-popup{
	border-radius: 10px;
	background:#fafcfe;
	width: 700px;
	height: 590px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
/* --------------- 見出し */
.white-popup .popupHeader {
	padding-bottom: 10px;
}
.white-popup h4,.popupHeader h4{
	font-size: 17px;
	margin: 10px 0 10px 10px;
	text-indent:10px;
	letter-spacing: 1px;
	border-left: 6px solid #0086bd;
	line-height: 1em;
	background-image: none;
	display: block;
}
/* --------------- スクロール */
.white-popup .scrollBox{
	max-height: 460px;
	overflow-y: auto;
}
.popupFooter{
	clear:both;/*必要行動指定のfloat解除*/
	text-align: center;
	position: static;
	height:auto;
}
/* popup 閉じるボタン */
.popupFooter .mfp-close{
/* 	position:static; */
	position:relative;
	margin:8px auto;
	width: 77px;
	height: 23px;
	line-height: normal;
	font-size: 12px;
	color: #005e92;
	vertical-align: middle;
	padding: 0;
}
/* --------------- 個別style＠局選択モーダル */
#pointSelectPopup .scrollBox{
	max-height: 480px;
	height: 480px;
}
/* 局選択 */
div.pointSelectBtn,
div.pointSelectBtn a{
	width: 73px;
	height: 24px;
	font-size: 12px;
	vertical-align: middle;
	background: url(../images/button/btn.png) no-repeat;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	color: #005E92;
	line-height: 24px;
	text-decoration: none;
}
/*局選択モーダルの選択ボタン*/
#pointSelectPopup .pointSelectTbl .funcBtn{
	position: absolute;
	top:50%;
	left:5px;
	margin-top: -12px;
}
/*=======================
	エラー画面
  =======================*/
#errContents h2{
	position:relative;
	top:0;
	left:0;
	width:100%;
	font-size:17px;
	line-height:24px;
	font-weight: bold;
	height:100%;
	display:inline-block;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url("../images/header/title_help.png");
	margin: 10px 0;
	padding-left: 27px;
}
#errContents ul{
	margin-left:40px;
	margin-top: 30px;
}
#errContents li{
	color:#000;
	font-size:16px;
	line-height: 30px;
}
#errContents a{
	padding: 0 10px;
	background: url("../images/common/mark_arrow_on.png") no-repeat 0 center;
}
/*=========================
	お知らせ詳細画面
  =========================*/
body.noticeDetail #contents{
	left:0;
	width:980px;
}
body.noticeDetail #titleBar h2{
	left:0;
}
body.noticeDetail #noticeArea{
	font-size: 14px;
	line-height: 17px;
	word-break: break-all;
	margin: 7px 19px 0 19px;
	padding: 15px;
	border: solid 1px #356DB1;
}