@charset "UTF-8";
/**
 * 【公開WEB】
 * 石川県河川情報
 * 概況図 CSS
 * 
 * [変更履歴]
 * ---------------------------------------
 * [01] 2022/06/23	危機管理型水位計の項目見出し追加のためcssを調整
 */
/*=======================
	Left Side Contents
	+ 地図  +
  =======================*/
/* 観測時刻 */
.mapArea .time{
	position:absolute;
	top: 5px;
	left: 5px;
	width:130px;;
	height: 25px;
	padding:0 5px;
	background: #fff;
	border: 1px solid #c3d0db;
	line-height: 26px;
	text-align: center;
}
/* シンボル表示選択 */
.mapArea ul.symbolSelect{
	left: 155px;
}
.mapArea{
	height: 544px;
}
/* 凡例 */
.legendBox{
	height: auto;
}
dl.mapLegend dt{
	margin-left:0px;
	padding-left: 5px;
}
/*雨量*/
.legendBox.rainfall dl.mapLegend{
	width: 191px;
}
.rainfall dl.mapLegend dd{
	float: left;
	width: 73px;
}
/*水位*/
.legendBox.stage dl.mapLegend{
	width: 250px;
}
.stage dl.mapLegend dd{
	float: left;
	width: 103px;
}
.stage dl.mapLegend dd.keikaiL{
	height: 35px;
}
.stage dt.borderT{
	clear:both;
	margin-left:0px;
	padding-left: 5px;
}
.stage .borderT ~ dt,
.stage .borderT ~ dd{
	border-top: 1px dashed #a4b9cb;
	padding-top: 3px;
}
.stage .borderT ~ dt{
	margin-left:0px;
	padding-left: 5px;
}

/*=======================
	Right Side Contents
	+ 共通部品 +
  =======================*/
div.infoBox{
	/*top:10px;*/
	width: 445px;
	position: relative;
	margin-left: auto;
	margin-right: 0;
	margin-top: 10px;
}
/* 事務所名 */
.infoBox h3{
	font-size: 16px;
	line-height: 20px;
}

/*=======================
	Right Side Contents
	+ データ表示 +
  =======================*/
/*------------------------超過地点タイトル*/
.pointHeader{
	border-top:none;
	border-bottom: 3px solid #58aedb;
	margin: 5px 0 0 0;
	height: 40px;
}
/* 観測所名 */
.pointHeader h4{
	font-size: 16px;
	line-height:34px;/*[01]*/
	width: auto;
	height: 40px;
	margin-right: 5px;
}
/*[01]見出し補足コメント*/
.pointHeader p.explain{
	bottom: 0;
}
/* 単位 */
.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;
}
/* =============================
	Right Side Contents
  	+ 超過一覧  +
   ============================= */
.infoBox div.overBox{
	width: 100%;
	margin: 5px 0 10px 0;
	position: relative;
}
.infoBox table{
	margin: 0 auto;
	border:1px solid #c3d0db;
	box-shadow: 0 2px 0 0 #eff0f1;
	border-spacing: 0;
}
.infoBox th,.infoBox td{
	text-align: center;
	height: 30px;
	border-right:1px solid #c3d0db;
	border-bottom: none;
	border-top: none;
	letter-spacing: 2px;
}
.infoBox thead th{
	background: #dde5ec;
	width: 150px;
	border-right:1px solid #c3d0db;
	border-bottom:1px solid #c3d0db;
}
.infoBox tbody th{
	background: none;
}
table tr:nth-child(even){
	background: #f6f8fa;
}
/* --------------------------- 超過一覧＠雨量 */
table.rainData{
	width: 445px;
}
table.rainData tbody td span{
	width: 130px;
	display: block;
	margin: 0 auto;
	height: 18px;
	padding: 2px 0 0 0;
}
table.rainData tbody td a span{
	text-decoration: underline;
}
table.rainData tbody td span.none{
	background: #b9dce3;
	border:1px solid #b9dce3;
	color: #1c486f;
}
/* 雨量50mm超過 */
table.rainData tbody td span.over50mm{
	background: #fa9f00;
	border:1px solid #f48213;
	color: #000000;
}
table.rainData tbody td span.over50mm.past {
	background: #ffc994;
	border:1px solid #fdae68;
	color: #000000;
}
/* 雨量80mm超過 */
table.rainData tbody td span.over80mm{
	background: #e91e00;
	border:1px solid #d31b00;
	color: #ffffff;
}
table.rainData tbody td span.over80mm.past {
	background: #ff8d7e;
	border:1px solid #e87667;
	color: #000000;
}
/* --------------------------- 超過一覧＠水位 */
table.waterData{
	margin: 0;
	width: 445px;
}
/*table.waterData thead th{
	width: auto;
}*/
table.waterData tbody th{
	padding: 0 0 0 30px;
	letter-spacing: 0px;
}
table.waterData tbody td span{
	width: 130px;
	text-align: center;
	display: block;
	margin: 0 auto;
	height: 18px;
	padding: 2px 0 0 0;
	letter-spacing: 0px;
}
table.waterData tbody td a span{
	text-decoration: underline;
}
table.waterData tbody td span.count{
	margin-left: 5px;
	display: inline;
}
table.waterData tbody td span.none{
	background: #cbe1f5;
	color: #1c486f;
}
/* stageLv5：堤防高 */
table.waterData tbody th.stageLv7{
	background: url(../public_images/common/point_stageLv7.png) no-repeat 5px 3px;
}
table.waterData tbody td span.stageLv7{
	background: #0C000C;
	border:1px solid #000000;
	color: #ffffff;
}
table.waterData tbody td span.stageLv7.past{
	background: #877f87;
	border:1px solid #616161;
	color: #ffffff;
}
/* stageLv4：氾濫危険 */
table.waterData tbody th.stageLv4{
	background: url(../public_images/common/point_stageLv4.png) no-repeat 5px 3px;
}
table.waterData tbody td span.stageLv4{
	background: #AA00AA;
	color: #ffffff;
	border:1px solid #870087;
}
table.waterData tbody td span.stageLv4.past{
	background: #d98cd9;
	border:1px solid #c865c8;
	color: #000000;
}
/* stageLv3：避難判断 */
table.waterData tbody th.stageLv3{
	background: url(../public_images/common/point_stageLv3.png) no-repeat 5px 3px;
}
table.waterData tbody td span.stageLv3{
	background: #FF2800;
	border:1px solid #d72200;
	color: #ffffff;
}
table.waterData tbody td span.stageLv3.past{
	background: #fd9a88;
	border:1px solid #fc755d;
	color: #000000;
}
/* stageLv2：氾濫注意 */
table.waterData tbody th.stageLv2{
	background: url(../public_images/common/point_stageLv2.png) no-repeat 5px 3px;
}
table.waterData tbody td span.stageLv2{
	background: #F2E700;
	border: 1px solid #cfc600;
	color: #000000;
}
table.waterData tbody td span.stageLv2.past{
	background: #fcf787;
	border:1px solid #e4de4d;
	color: #000000;
}
/* --------------------------- 超過一覧＠気象 */
table.weatherData{
	width: 445px;
}
table.weatherData th,
table.weatherData td{
	border-bottom:1px solid #c3d0db;
}
table.weatherData thead th.lastTitle{
	width: 290px;
}
table.weatherData tbody th.town{
	width: 70px;
}
table.weatherData tbody th{
	text-align: left;
	padding: 0 5px;
}
/* 注意警報名 */
table.weatherData tbody td span.warn-lbl{
	display: inline-block;
	text-align: center;
	width: 63px;
	line-height: 22px;
	height: 20px;
}
/* 注意警報名：発令なし */
table.weatherData tbody td span.none{
	border: 1px solid #b1c4d8;
	color: #1c486f;
	background: #bbcee1 url(../public_images/common/iconNone.png) no-repeat 3px 5px;
}
/* 注意警報名：特別警報 */
table.weatherData tbody td span.emergency{
	border: 1px solid #000000;
	color: #ffffff;
	background: #0c000c url(../public_images/common/iconEmergecy.png) no-repeat 3px 5px;
}
/* 注意警報名：警報 */
table.weatherData tbody td span.warning{
	border: 1px solid #d31b00;
	color: #ffffff;
	background: #e91e00 url(../public_images/common/iconWarnning.png) no-repeat 3px 5px;
}
/* 注意警報名：注意報 */
table.weatherData tbody td span.advisory{
	border: 1px solid #eac100;
	color: #000000;
	background: #ffd200 url(../public_images/common/iconAdvisories.png) no-repeat 3px 5px;
}
/* 注意警報名：地域開閉 */
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: 65px;
}
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{
	margin:10px 0 5px 0;
}
.pointGraphBox img{
	margin-bottom: 20px;
}
.linkBox{
	position: relative;
	top: 0px;
	margin-top: 10px;
}
/*-------------------時系列表 mini */
.pointTimelineTbl{
	width: 160px;
}
.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;
}
/* --------------------------- 地点詳細＠水位 */
p.lbl{
	width:100px;

}

p.lbl.stageLv7{		/* 堤防高 */
	background:url(../public_images/common/lbl_stageLv7.png) no-repeat;
	width:220px;
}
p.lbl.stageLv4{		/* 氾濫危険 */
	background: url(../public_images/common/lbl_stageLv4.png) no-repeat;
	width:220px;
}
p.lbl.stageLv3{		/* 避難判断 */
	background: url(../public_images/common/lbl_stageLv3.png) no-repeat;
	width:220px;
}
p.lbl.stageLv2{		/* 氾濫注意 */
	background: url(../public_images/common/lbl_stageLv2.png) no-repeat;
}
p.lbl.stageLv1{		/* 水防団 */
	background: url(../public_images/common/lbl_stageLv1.png) no-repeat;
}


.pointDetail{
	margin: 10px 10px 5px 0;
	height: auto;
	width: 310px;
}
.pointDetail ul{
	margin: -10px 0 0 10px;
}
/* 水位:雨量グラフ 局選択 */
.pointSelect{
	position:absolute;
	top: 10px;
	right:0;
	font-size: 0;
}
/* カメラ */
.detailBox .cameraBox {
	float: none;
	margin: 15px 0 0 0;
}
/* =============================
	地域メニューの全県リンク
   ============================= */
.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;
}