@charset "UTF-8";
/**
 * 【公開WEB】
 * 広島県河川情報
 * 概況図 CSS
 *
 * 更新履歴
 * [01] 2020.09.08	M.Obara	警戒レベル配色変更対応：
 *                          【水位アイコン】現時点でイントラ＝旧配色、公開系＝新配色のため、水位アイコンの定義を共通map.cssから分離
 */
/*=======================
	Left Side Contents
	+ 地図  +
  =======================*/
/* 概況図 */
.mapArea {
	height:auto;
	margin-top: 0px;
}
/*=======================
	Right Side Contents
	+ 共通部品 +
  =======================*/
div.infoBox{
	/*top:10px;*/
	width: 445px;
	position: relative;
	margin-left: auto;
	margin-right: 0;
	margin-top: 10px;
}
/* 水位地点詳細のリンク */
.infoBox a{
	color: #2f8709;
}
/* 事務所名 */
.infoBox h3{
	font-size: 16px;
	line-height: 20px;
	border-left-color: #3eb02c;
}
/* -----------------超過一覧・地点詳細タブ */
.infoHeader{
	border-bottom-color:#2f8709;
}
.infoSelect li a,
.infoSelect li span{
	color: #2a5318;
}
.infoSelect li.leftTab{
	background: url(../public_images/menu/info_tabL.png) no-repeat;
}
.infoSelect li.leftTab a:hover,
.infoSelect li.leftTab span:hover{
	background: url(../public_images/menu/info_tabL_hover.png) no-repeat;
}
.infoSelect li.rightTab{
	background: url(../public_images/menu/info_tabR.png) no-repeat;
}
.infoSelect li.rightTab a:hover,
.infoSelect li.rightTab span:hover{
	background: url(../public_images/menu/info_tabR_hover.png) no-repeat;
}
/* selected */
.infoSelect li.leftTab.is-selected{
	background: url(../public_images/menu/info_tabL_on.png) no-repeat;
}
.infoSelect li.rightTab.is-selected{
	background: url(../public_images/menu/info_tabR_on.png) no-repeat;
}
/* disabled */
.infoSelect li.is-disabled span{
	color: #DAD9D9;
}
/*=======================
	Right Side Contents
	+ データ表示 +
  =======================*/
/*------------------------超過地点タイトル*/
.pointHeader{
	border-top:none;
	border-bottom: 3px solid #3eb02c;
	background: #c9eeb9;
	margin: 5px 0 0 0;
	height: 40px;
}
/* 観測所名 */
.pointHeader h4{
	line-height:45px;
}
.pointHeader h4.rainfall{
	width: 180px;
}
p.explain{
	position: absolute;
	left: 100px;
	top: 0px;
	font-size: 12px;
	line-height: 45px;
}
/* 雨量　超過ラベル */
.pointHeader div.rainOverLbl{
	top:0px;
}
/* 単位 */
.pointHeader span.unit{
	float:right;
	font-size:12px;
	margin-top:15px;
}
/* 雨量超過ラベル＠印刷でも丸アイコンが表示できる版 */
.pointHeader div{
	position: relative;
	top:5px;
	left: 0px;
}

/* 水位警報名ラベル */
.pointHeader p.stageAlm-lbl{
	height: 25px;
	padding: 0px 5px;
	line-height:25px;
	vertical-align: inherit;
}
/* 水位地点詳細欄の高さ */
#detail_4 .pointDetail span.data{
	line-height:28px;
}
/* =============================
	Right Side Contents
  	+ 超過一覧  +
   ============================= */
.infoBox div.overBox{
	width: 100%;
	margin: 5px 0 10px 0;
	position: relative;
}
div.overBox .pointHeader{
	height: auto;
}
div.overBox .pointHeader h4{
	height:45px;
	line-height:34px;
}
div.overBox p.explain{
	position: absolute;
	left: 45px;
	top: 12px;
}
.infoBox table{
	margin: 0 auto;
	border:1px solid #90A296;
	box-shadow: 0 2px 0 0 #eff0f1;
	border-spacing: 0;
}
.infoBox th,.infoBox td{
	text-align: center;
	height: 30px;
	border-right:1px solid #90A296;
	border-bottom: none;
	border-top: none;
	letter-spacing: 2px;
}
.infoBox .pointTimelineTbl td{
	text-align: right;
	padding-right: 5px;
}
.infoBox thead th{
	background: #d9ede0;
	border-right:1px solid #90A296;
	border-bottom:1px solid #90A296;
}
.infoBox tbody th{
	background: none;
}
table tr:nth-child(even){
	background: #f6f8fa;
}
/* --------------------------- スピナータブ*/
.infoBox #spinnerTab{
	display:none;/* 初期表示OFF */
	height: 470px;
}
.infoBox #spinnerTab img{
	position: absolute;
	top:50%;
	left:50%;
	margin: -16px 0 0 -16px;
}
.infoBox div#spinnerTab{
	top:0px;
}
/* --------------------------- 超過一覧＠雨量 */
table.rainData{
	width: 100%;
}
table.rainData tbody th{
	text-align: left;
	text-indent: 10px;
	width: 140px;
}
table.rainData tbody td span{
	width: 270px;
	display: block;
	margin: 0 auto;
	height: 18px;
	padding: 2px 0 0 0;
}
table.rainData tbody td span.none{
	background: #b9dce3;
	border:1px solid #b9dce3;
	color: #1c486f;
}
table.rainData tbody td a.none{
	color: #1c486f;
}
/* 雨量第1基準値超過 */
table.rainData tbody td span.rainOverLv1{
	background: #ffd200;
	border:1px solid #eac100;
	color: #000000;
}
table.rainData tbody td span.rainOverLv2{
	background: #fa9f00;
	border:1px solid #f48213;
	color: #000000;
}
table.rainData tbody td span.rainOverLv3{
	background: #e91e00;
	color: #ffffff;
	border:1px solid #d31b00;
}
/* --------------------------- 超過一覧＠水位 */
table.waterData{
	width: 100%;
}
table.waterData th{
	width: 80px;
}
table.waterData tbody th{
	padding: 0 0 0 45px;
	letter-spacing: 1px;
	text-align: left;
}
table.waterData tbody td span{
	width: 270px;
	display: block;
	margin: 0 auto;
	height: 18px;
	padding: 2px 0 0 0;
}
table.waterData tbody td span.count{
	margin-left: 5px;
	display: inline;
}
table.waterData tbody td span.none{
	background: #cbe1f5;
	color: #1c486f;
}
/* stageLv4：氾濫危険 */
table.waterData tbody th.stageLv4{
	background: url(../public_images/common/point_stageLv4.png) no-repeat 10px 3px;
}
table.waterData tbody td span.stageLv4{
	background: #aa00aa; /*[01]*/
	color: #ffffff;
	border:1px solid #9600aa;/*[01]*/
}
table.waterData tbody td a.stageLv4{
	color: #ffffff;
}
/* stageLv3：避難判断 */
table.waterData tbody th.stageLv3{
	background: url(../public_images/common/point_stageLv3.png) no-repeat 10px 3px;
}
table.waterData tbody td span.stageLv3{
	background: #ff2800;/*[01]*/
	border:1px solid #e12800;/*[01]*/
	color: #ffffff;
}
table.waterData tbody td a.stageLv3{
	color: #ffffff;
}
/* stageLv2：氾濫注意 */
table.waterData tbody th.stageLv2{
	background: url(../public_images/common/point_stageLv2.png) no-repeat 10px 3px;
}
table.waterData tbody td span.stageLv2{
	background: #f2e700;/*[01]*/
	border: 1px solid #f2ce00;/*[01]*/
	color: #000000;
}
table.waterData tbody td a.stageLv2{
	color: #000000;
}
/* stageLv1：水防団待機 */
table.waterData tbody th.stageLv1{
	background: url(../public_images/common/point_stageLv1.png) no-repeat 10px 3px;
}
table.waterData tbody td span.stageLv1{
	background: #1172ee;
	border: 1px solid #0f60c7;
	color: #ffffff;
}
table.waterData tbody td a.stageLv1{
	color: #ffffff;
}
/* --------------------------- 超過一覧＠気象 */
table.weatherData{
	width: 100%;
}
table.weatherData th,
table.weatherData td{
	border-bottom:1px solid #90A296;
}
table.weatherData thead th.lastTitle{
	width: 225px;
}
table.weatherData tbody th.town{
	width: 90px;
}
table.weatherData tbody th{
	text-align: left;
	padding: 0 5px;
}
/* 注意警報名 */
table.weatherData tbody td span.warn-lbl{
	display: inline-block;
	text-align: center;
	width: 50px;
	line-height: 22px;
	height: 20px;
	padding-left: 12px;
}
/* 注意警報名：発令なし */
table.weatherData tbody td span.none{
	border: 1px solid #b1c4d8;
	color: #1c486f;
	background: #bbcee1 url(../public_images/common/iconNone.png) no-repeat 10px 5px;
}
/* 注意警報名：特別警報 */
table.weatherData tbody td span.emergency{
	border: 1px solid #0c000c;/*[01]*/
	color: #ffffff;
	background: #0c000c url(../public_images/common/iconEmergecy.png) no-repeat 10px 5px;/*[01]*/
}
/* 注意警報名：警報 */
table.weatherData tbody td span.warning{
	border: 1px solid #e12800;/*[01]*/
	color: #ffffff;
	background: #ff2800 url(../public_images/common/iconWarnning.png) no-repeat 10px 5px;/*[01]*/
}
/* 注意警報名：注意報 */
table.weatherData tbody td span.advisory{
	border: 1px solid #f2ce00;/*[01]*/
	color: #000000;
	background: #f2e700 url(../public_images/common/iconAdvisories.png) no-repeat 10px 5px;/*[01]*/
}
/* 注意警報名：地域開閉 */
table.weatherData tbody th.childrenArea{
	padding: 0 0 0 10px;
}
table.weatherData tbody th.towns{
	padding: 0;
	text-align :center;
	background: #f6f8fa;
}
table.weatherData a.showDetail{
	margin-left: 50px;
}
table.weatherData a.hideDetail{
	display: block;
}
table.weatherData tr.hiddenRow{
	display:none;
}

/*=======================
	infoBox
  =======================*/
p.warningIssueTime{
	position: absolute;
	top: 5px;
	right: 10px;
}

dl.warningLegendArea{
	position: absolute;
	top: 24px;
	right: 10px;
}
dl.warningLegendArea *{
	display: inline;
}
dl.warningLegendArea dt span{
	display:inline-block;
	width: 14px;
	height: 13px;
	vertical-align: middle;
	margin-left: -2px;
	margin-top: -2px;
	margin-right: -3px;
}
dl.warningLegend dd,
dl.warningLegendArea dd{
	padding-top: 2px;
}
/* 注意警報名：特別警報 */
dl.warningLegend span.emergency,
dl.warningLegendArea span.emergency{
	background: url(../public_images/common/icon_ex_Emergecy.png) no-repeat
}
/* 注意警報名：警報 */
dl.warningLegend span.warning,
dl.warningLegendArea span.warning{
	background: url(../public_images/common/icon_ex_Warnning.png) no-repeat
}
/* 注意警報名：注意報 */
dl.warningLegend span.advisory,
dl.warningLegendArea span.advisory{
	background: url(../public_images/common/icon_ex_Advisories.png) no-repeat;
}
/* 注意警報名：なし */
dl.warningLegend span.none,
dl.warningLegendArea span.none{
	background: url(../public_images/common/icon_ex_None.png) no-repeat;
}

/* =============================
	Right Side Contents
  	+ 地点詳細  +
   ============================= */
.infoBox h5{
	background: url(../public_images/common/marker.png) no-repeat 0 2px;
	margin:10px 0 5px 0;
}
.pointGraphBox img{
	margin-bottom: 20px;
}
.linkBox{
	position: relative;
	top: 0px;
	margin-top: 10px;
}
/*-------------------時系列表 mini */
.pointTbl th,
.pointTimelineTbl th {
	height: auto;
	line-height: 2em;
}
.pointTimelineTbl td {
	border-right: none;
	letter-spacing: normal;
	height: auto;
	line-height: 2em;
}
/* --------------------------- 地点詳細＠雨量 */
/* 降雨開始時刻 */
h5 span.rainfall-time{
	font-size:12px;
}
/* --------------------------- 地点詳細＠水位 */
.pointHeader p.lbl{
	margin-left: 60px;
}
.pointDetail ul{
	margin: -10px 0 0 10px;
}
.pointDetail ul li.bdr{
	border-left-color: #BDBEBF;
	border-right-color: #BDBEBF;
}
/* 水位:雨量グラフ 局選択 */
.pointSelect{
	position:absolute;
	top: 10px;
	right:0;
	font-size: 0;
}
.pointSelect li{
	border-right-color:#BDBEBF;
}
	.pointSelect li:first-child{
		border-left-color:#BDBEBF;
	}
.pointSelect li span,
.pointSelect li a {
	color: #2f8709;
}
.pointSelect li.is-selected span{
	color: #2a5318;
	background: #d9ede0;
}
/* カメラ */
.detailBox .cameraBox {
	float: none;
	margin: 15px 0 0 0;
}
/*-------------------関連画面へのリンクボタン */
.linkBox{
	border-top-color: #2f8709;
	border-bottom-color: #2f8709;
	padding-right: 0px;
}
/* =============================
	地域メニューの全県リンク
   ============================= */
.topLink{
	position: absolute;
	top: 10px;
	left: 7px;
	width: 26px;
	height: 26px;
	z-index: 101;
	display: block;
	padding: 5px 1px 0 4px;
	font-size: 10px;
	line-height:20px;
	color: #000;
	background: url(../images/menu/asideText.png) no-repeat;
}
a.topLink:hover{
	background: url(../images/menu/asideText_hover.png) no-repeat;
}

/* =============================
	凡例
   ============================= */
/*概況図凡例の雨量*/
dl.mapUnder dt{
	float: left;
	margin-left:6px;
}
dl.mapUnder dt span.ex-grp-rainfall,
dl.mapUnder dt span.ex-grp-rainfall-forecast{
	/*アイコンなし*/
	width: 7px;
	height: 11px;
	margin-top:3px;
	margin-left:4px;
}

/* =============================
   [01] 公開の水位アイコンのみ新配色に対応させるため、水位アイコン画像をpublic_imagesに移行
   ============================= */
/*水位_通常アイコン*/
div.mapArea .symbol_4_10,div.mapArea .symbol_4_60{width: 17px;height: 13px;}
div.mapArea .symbol_4_10.lv_0_up,div.mapArea .symbol_4_60.lv_0_up{background-image: url(../public_images/icon/map/stageUpLv0.png);}/* 上昇・変化無し */
div.mapArea .symbol_4_10.lv_1_up,div.mapArea .symbol_4_60.lv_1_up{background-image: url(../public_images/icon/map/stageUpLv1.png);}
div.mapArea .symbol_4_10.lv_2_up,div.mapArea .symbol_4_60.lv_2_up{background-image: url(../public_images/icon/map/stageUpLv2.png);}
div.mapArea .symbol_4_10.lv_3_up,div.mapArea .symbol_4_60.lv_3_up{background-image: url(../public_images/icon/map/stageUpLv3.png);}
div.mapArea .symbol_4_10.lv_4_up,div.mapArea .symbol_4_60.lv_4_up{background-image: url(../public_images/icon/map/stageUpLv4.png);}
div.mapArea .symbol_4_10.lv_0_down,div.mapArea .symbol_4_60.lv_0_down{background-image: url(../public_images/icon/map/stageDownLv0.png);}/* 下降 */
div.mapArea .symbol_4_10.lv_1_down,div.mapArea .symbol_4_60.lv_1_down{background-image: url(../public_images/icon/map/stageDownLv1.png);}
div.mapArea .symbol_4_10.lv_2_down,div.mapArea .symbol_4_60.lv_2_down{background-image: url(../public_images/icon/map/stageDownLv2.png);}
div.mapArea .symbol_4_10.lv_3_down,div.mapArea .symbol_4_60.lv_3_down{background-image: url(../public_images/icon/map/stageDownLv3.png);}
div.mapArea .symbol_4_10.lv_4_down,div.mapArea .symbol_4_60.lv_4_down{background-image: url(../public_images/icon/map/stageDownLv4.png);}
div.mapArea .symbol_4_10.lv_-2,div.mapArea .symbol_4_60.lv_-2{background-image: url(../public_images/icon/map/stageLv-2.png);}/*  欠測その他 */
div.mapArea .symbol_4_10.lv_-4,div.mapArea .symbol_4_60.lv_-4{background-image: url(../public_images/icon/map/stageLv-4.png);}/*  閉局・メンテ */

/*水位_強調アイコン*/
div.mapArea .symbol_4_10.is-selected,div.mapArea .symbol_4_60.is-selected{width: 39px;height: 29px;margin-top: -11px;margin-left: -8px;}
div.mapArea .symbol_4_10.lv_0_up.is-selected,div.mapArea .symbol_4_60.lv_0_up.is-selected{background-image: url(../public_images/icon/map/stageUpLv0_on.png);}/* 上昇・変化無し */
div.mapArea .symbol_4_10.lv_1_up.is-selected,div.mapArea .symbol_4_60.lv_1_up.is-selected{background-image: url(../public_images/icon/map/stageUpLv1_on.png);}
div.mapArea .symbol_4_10.lv_2_up.is-selected,div.mapArea .symbol_4_60.lv_2_up.is-selected{background-image: url(../public_images/icon/map/stageUpLv2_on.png);}
div.mapArea .symbol_4_10.lv_3_up.is-selected,div.mapArea .symbol_4_60.lv_3_up.is-selected{background-image: url(../public_images/icon/map/stageUpLv3_on.png);}
div.mapArea .symbol_4_10.lv_4_up.is-selected,div.mapArea .symbol_4_60.lv_4_up.is-selected{background-image: url(../public_images/icon/map/stageUpLv4_on.png);}
div.mapArea .symbol_4_10.lv_0_down.is-selected,div.mapArea .symbol_4_60.lv_0_down.is-selected{background-image: url(../public_images/icon/map/stageDownLv0_on.png);}/* 下降 */
div.mapArea .symbol_4_10.lv_1_down.is-selected,div.mapArea .symbol_4_60.lv_1_down.is-selected{background-image: url(../public_images/icon/map/stageDownLv1_on.png);}
div.mapArea .symbol_4_10.lv_2_down.is-selected,div.mapArea .symbol_4_60.lv_2_down.is-selected{background-image: url(../public_images/icon/map/stageDownLv2_on.png);}
div.mapArea .symbol_4_10.lv_3_down.is-selected,div.mapArea .symbol_4_60.lv_3_down.is-selected{background-image: url(../public_images/icon/map/stageDownLv3_on.png);}
div.mapArea .symbol_4_10.lv_4_down.is-selected,div.mapArea .symbol_4_60.lv_4_down.is-selected{background-image: url(../public_images/icon/map/stageDownLv4_on.png);}
div.mapArea .symbol_4_10.lv_-2.is-selected,div.mapArea .symbol_4_60.lv_-2.is-selected{background-image: url(../public_images/icon/map/stageLv-2_on.png);}/*  欠測その他 */
div.mapArea .symbol_4_10.lv_-4.is-selected,div.mapArea .symbol_4_60.lv_-4.is-selected{background-image: url(../public_images/icon/map/stageLv-4_on.png);}/*  閉局・メンテ */

/*地点詳細：水位：局名タイトル横の超過ラベル*/
p.lbl.stageLv4{		/* 氾濫危険 */
	background: url(../public_images/common/lbl_stageLv4.png) no-repeat;
	color: #fff;
}
p.lbl.stageLv3{		/* 避難判断 */
	background: url(../public_images/common/lbl_stageLv3.png) no-repeat;
	color: #fff;
}
p.lbl.stageLv2{		/* 氾濫注意 */
	background: url(../public_images/common/lbl_stageLv2.png) no-repeat;
	color: #000;
}