@charset "UTF-8";
/**
 * 【神奈川県河川】TOP画面CSS
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2019.03.01 K.Fujimaki	ヘッダーのダム放流アイコン表示のため、レイアウトを調整
 * [02] 2019.03.03 K.Fujimaki	地図下の凡例レイアウトを修正
 * [03] 2019.03.18 K.Fujimaki	モバイル欄のレイアウト崩れを修正
 * [04] 2019.07.02 K.Fujimaki	フッターの最大サイズ指定を追加
 */

#contents{
	left:0;
	min-height: 576px;
	margin-top: -3px;/*[01]サイズ調整*/
	margin-left:-5px;
}
/* フッター */
#footer{
	/*[04]右側に情報エリアがあるので、最大サイズを指定しレイアウトを調整*/
	max-width:770px;
	margin-left:0;
}
/*右側の情報エリア*/
#infoBox{
	position: absolute;
	top:0;
	right:20px;
	display:block;
	width: 195px;
	min-height: 100%;
	height: 100%;
	background: orange;
	background: #fff;
}
/*[02]地図下の凡例のレイアウトを調整*/
.mapExplain{
	padding-bottom: 5px;
	z-index: 10;
}
/*地図アイコンはクリッカブルマップの下に重なるよう調整*/
/*基準値レベルの高いアイコンが上に重なるよう調整*/
div.obsBox.iconLv5{z-index: 15;}
div.obsBox.iconLv4{z-index: 14;}
div.obsBox.iconLv3{z-index: 13;}
div.obsBox.iconLv2{z-index: 12;}
div.obsBox.iconLv1{z-index: 11;}
div.obsBox.iconLv0{z-index: 10;}
div.obsBox.iconLv-1{z-index: 9;}
/*=======================
	クリッカブルマップ
  =======================*/
#clickablMap{
	position:absolute;
	top:0;
	left:0;
	width: 770px;
	height: 490px;
	background: none;
	border: none;
}
/* クリッカブルマップの範囲 */
#clickablMap img,
#clickablMap div#sprite,
#clickablMap div#clickabl_area{
	z-index: 1;
	width: 770px;
	height: 490px;
}
#clickablMap div#clickabl_area{
	z-index: 20;
}
/* 選択可能地域＠hoverで色替え */
.publicContents #clickablMap div#sprite{
	background: url(../images/map/public/01topMap_sprite.png) no-repeat left bottom;
}
.cityContents #clickablMap div#sprite{
	background: url(../images/map/city/01topMap_sprite.png) no-repeat left bottom;
}
/*=========================
	表示切替
  =========================*/
.switchBox{
	position:absolute;
	top: 5px;
	right: 5px;
	width:auto;
	height: auto;
	background-color: #777;
	padding: 3px 5px 0 7px;
	cursor: default;
	z-index: 20;
}
/*「表示切替」ラベル*/
.switchBox span.switchLabel{
	color:#fff;
	width: auto;
	text-align: center;
	line-height: 28px;
	height:30px;
	display: inline-block;
}
.selectAreaBtn,
.selectDataBtn{
	height: 30px;
	font-size: 0;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}
/*市町村選択ボタン*/
.selectAreaBtn{
	width:74px;
	background: url("../images/top/btn_selectArea.png") no-repeat left top;
}
/*データ表示ボタン*/
.selectDataBtn{
	width:82px;
	background: url("../images/top/btn_selectData.png") no-repeat left top;
}
.selectAreaBtn:hover,
.selectDataBtn:hover{
	background-position: left -30px;
}
/*=========================
	時刻操作周り
  =========================*/
/*時刻間隔切替え*/
.timeBox{
	top: 43px;
	z-index: 20;
}
/*=========================
	右側の情報エリア
  =========================*/
.infoArea{
	background-color: #E3EBF6;
	box-sizing: border-box;
	margin-top: 10px;
}
/*タイトル欄*/
.infoArea .infoTitle{
	border-bottom: solid 2px #356DB1;
	font-size: 16px;
	line-height: 28px;
	text-indent: 5px;
	background-color: #fff;
}
.infoArea .infoTitle:BEFORE{
	content: "";
	display: inline-block;
	width: 23px;
	height: 23px;
	background: url("../images/top/title_notice.png") no-repeat left top;
	vertical-align: middle;
	margin-right: 3px;
}
/*お知らせ*/
#info_notice.infoArea .infoTitle:BEFORE{
	background: url("../images/top/title_notice.png") no-repeat left top;
}
/*リンク*/
#info_link.infoArea .infoTitle:BEFORE{
	background: url("../images/top/title_link.png") no-repeat left top;
}
/*モバイル*/
#info_mobile.infoArea .infoTitle:BEFORE{
	background: url("../images/top/title_mobile.png") no-repeat left top;
}
/*内容欄*/
.infoArea .infoContents{
	box-sizing: border-box;
	padding: 7px;
}
.infoArea .infoContents p{
	line-height: 16px;
	word-break: break-all;
	margin-top: 5px;
}
.infoArea .infoContents p:FIRST-CHILD{
	margin-top: 0;
}
.infoArea .infoContents p.mbTile{
	display: inline-block;/*[03]*/
	position: absolute;
	padding-left: 3px;
	line-height: 4;
}
/*リンクのリストマーク*/
.infoArea .infoContents p a:BEFORE{
	content: "";
	display: inline-block;
	width: 6px;
	height: 10px;
	background: url("../images/common/mark_arrow_on.png") no-repeat left top;
	vertical-align: middle;
	margin-right: 3px;
}
/*お知らせ欄個別*/
.infoArea .infoContents p.noticeBox{
	max-height: 160px;
	overflow:hidden;
}