@charset "UTF-8";
/**
 * 広島県河川情報
 * 共通CSS
 */
/* ------------------------Common Style */
body{
	width:100%;
	height:100%;
	font-family:"メイリオ", Meiryo,"MS Pゴシック",sans-serif;
	font-size:12px;
	color:#000;
}
/* aside menu なし */
body.nonAside{
	background: none;
}

a{
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6,th{
	font-weight:normal;
}
table{
	border: 1px solid #a4b9cb;
}
table th{
	background: #dde5ec;
	text-align: center;
	border: 1px solid #a4b9cb;
}
table td{
	border-left: 1px solid #a4b9cb;
	border-bottom: 1px solid #a4b9cb;
}
/* default:borderはCalendarには付けない */
table.selectArea,
table.selectArea th,
table.selectArea td
/*	table#calendar-header,
	table#calendar*/ {
	border:none;
}

.odd{
	background: #fff;
}
.even{
	background: #eaedee;
}

button{
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	background: transparent;
}

/*=======================
 	Base layout
  =======================*/
#header{
	position: relative;
	min-width: 1280px;
	width:100%;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	z-index: 100;
	background: url(../images/common/glonaviBg.png) repeat-x;
}
#main {
	min-width: 1280px;
	width: 1280px;
	margin: 0 auto;
	height: 100%;
	position: relative;
	min-height: 600px;
}

/*=======================
	Header
	+ Global Navigation
	+ News
  =======================*/
.globalNavi{
	position: relative;
	width: 1280px;
	height: 32px;
	background: linear-gradient(#ffffff 10%, #f3f5f7 100%);
	background: -webkit-linear-gradient(#ffffff 10%, #f3f5f7 100%);
	border-bottom: 1px solid #bac2c9;
	margin: 0 auto;
}
/* system title */
h1 a{
	display:block;
	color: #000;
	letter-spacing: 1px;
	font-size: 14px;
	width: 146px;
	height: 28px;
	padding: 3px 0 0 62px;
	background: url(../images/common/prefLogo.png) no-repeat 13px 2px;
}

.globalNavi ul li{
	float: left;
}
.globalNavi ul li a:hover{
	color: #2b5d8b;
}

/* ---------------------グロナビ左 */
ul.naviBtn{
	position: absolute;
	top: 0;
	left: 208px;
	border-right: 1px solid #bac2c9;
}

.naviBtn li a,
.naviBtn li span {
	display: block;
	width: 96px;
	height: 25px;
	padding: 7px 0 0 0;
	color: #000;
	line-height:20px;
	text-align: center;
	border-left: 1px solid #fff;
}
	.naviBtn li a:before,
	.naviBtn li span:before {
		content:url(../images/menu/gnavi_marker.png);
		margin-right:4px;
	}

.naviBtn div {
	background: linear-gradient(#fff 10%, #ecf2f7 100%);
	background: -webkit-linear-gradient(#fff 10%, #ecf2f7 100%);
	border-left: 1px solid #bac2c9;
}

/* 選択中 */
.naviBtn div.is-selected{
	background: #cde0ef;
	background: linear-gradient(#d9e8f5 10%, #cde0ef 100%);
	background: -webkit-linear-gradient(#d9e8f5 10%, #cde0ef 100%);
	border-left: 1px solid #bac2c9;
}
.naviBtn div.is-selected a,
.naviBtn div.is-selected span{
	color: #2b5d8b;
	border-left: 1px solid #d3e4f2;
}

/* ---------------------グロナビ右 */
ul.naviLink{
	position: absolute;
	top: 7px;
	right: 10px;
}
.naviLink a{
	display:block;
	height: 21px;
	padding: 0 7px 0 4px;
	margin: 0 2px;
	color: #000;
	text-align: right;
	line-height:20px;
}

/* 土砂災害情報 */
/*.naviLink li.sabo a{
	width: 94px;
	border-right: 1px solid #bac2c9;
}
.naviLink li.sabo a:before{
	content: url(../images/menu/icon_sabo.png);
	position: absolute;
	top: 2px;
	left:8px;
}*/
/* ヘルプ */
.naviLink li.help a{
	width: 94px;
	background: url(../images/menu/icon_help.png) no-repeat 4px 0px;
	width: 20px;
}
.naviLink li.help a:HOVER{
	background-image: url(../images/menu/icon_help_on.png);
}
/* ---------------------緊急新着情報 */
.headerNews{
	position: relative;
	width: 1280px;
	height: 27px;
	z-index: 100;
	background: #fff;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	margin: 0 auto;
	box-shadow:none;
}

/*情報あり*/
p.newsLogo{
	float: left;
	width: 90px;
	height: 22px;
	text-align: center;
	letter-spacing: 1px;
	line-height:22px;
	color: #fff;
	background: url(../images/common/newsLogo.png) no-repeat;
	margin: 2px 15px 3px 5px;
}
/*情報なし*/
p.newsLogo_no{
	float: left;
	width: 90px;
	height: 22px;
	text-align: center;
	letter-spacing: 1px;
	line-height:22px;
	color: #fff;
	background: url(../images/common/newsLogo_no.png) no-repeat;
	margin: 2px 15px 3px 5px;
}


span.newsRain{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 0px;
	background: url(../images/common/icon_rainfall.png) no-repeat;
	cursor: pointer;
}
span.newsRain:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 0px;
	background: url(../images/common/icon_rainfall_hover.png) no-repeat;
}
span.newsWarning{
	float: left;
	display:block;
	width: 22px;
	height: 20px;
	margin:4px 2px 2px 4px;
	background: url(../images/common/icon_warning.png) no-repeat;
	cursor: pointer;
}
span.newsWarning:hover{
	float: left;
	display:block;
	width: 22px;
	height: 20px;
	margin:4px 2px 2px 4px;
	background: url(../images/common/icon_warning_hover.png) no-repeat;
}
span.newsStage{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_stage.png) no-repeat;
	cursor: pointer;
}
span.newsStage:hover{
	float: left;
	display:block;
	width: 22px;
	height: 22px;
	margin:2px 2px 3px 4px;
	background: url(../images/common/icon_stage_hover.png) no-repeat;
}
span.newsKouzui{
	float: left;
	display:block;
	width: 66px;
	height: 22px;
	margin:3px 2px 2px 2px;
	background: url(../images/common/icon_kouzui.png) no-repeat;
	cursor: pointer;
}
span.newsKouzui:hover{
	float: left;
	display:block;
	width: 66px;
	height: 22px;
	margin:3px 2px 2px 2px;
	background: url(../images/common/icon_kouzui_hover.png) no-repeat;
}
span.newsSuibou{
	float: left;
	display:block;
	width: 66px;
	height: 22px;
	margin:3px 2px 2px 2px;
	background: url(../images/common/icon_suibou.png) no-repeat;
	cursor: pointer;
}
span.newsSuibou:hover{
	float: left;
	display:block;
	width: 66px;
	height: 22px;
	margin:3px 2px 2px 2px;
	background: url(../images/common/icon_suibou_hover.png) no-repeat;
}
/* link - Icon */
.headerNews img{
	margin:2px 2px 0 0;
	cursor: pointer;
	vertical-align: bottom;
}
/*.headerNews span{
	cursor: default;
	line-height: 18px;
	margin:0 0 0 5px;
}*/

.headerNews span.comment{
	position: absolute;
	cursor: default;
	line-height: 18px;
	margin: 6px 0px 3px 9px;
}

/* 最新観測日時 */
p.obsTime{
	position: absolute;
	top: 9px;
	right: 26px;
}

/*=========================
	コンテンツ レイアウト base
  =========================*/
.contents{
	position: relative;
	margin-left: 100px;
	width:auto;
}

.dataHeaderBox,	/* 画面タイトル＋時刻操作部 */
.dataBox		/* データ表示部 */
{
	position: relative;
	margin:5px 0 5px 10px;
	background: #fff;
	width: 1160px;
	height:auto;
}

.dataBox a{
	color: #1f4d77;
	text-decoration: underline;
}
.dataBox h4 a{
	margin-left:5px;
}
/* 局名タイトル */
.dataBox h4{
	background: url(../images/common/marker.png) no-repeat 0 5px;
	font-size: 13px;
	text-indent: 12px;
	line-height: normal;
	min-width:100px;
	display:inline-block;	/* 後ろに情報がつながる場合に */
}

/* aside menu なし向け (帳票・水防FAX) */
.contents-wide{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.contents-wide .dataHeaderBox,
.contents-wide .dataBox{
	width: 950px;
	height:auto;
}

/*=======================
	contents
	共通メニュー・操作部
  =======================*/
/* Base */
div.dataMenuBox{
	position: relative;
	width: 100%;
	height: 28px;
	border-bottom: 2px solid #006cb1;
	background: #c1c7cb;
}

/* ----------------データ種選択メニュー  */
ul.dataSelect{
	position: absolute;
	top: 6px;
	left: 5px;
}
.dataSelect li{
	float: left;
	margin-right:1px;
}
.dataSelect li a,
.dataSelect li span{
	display: block;
	min-width: 80px;
	height: 21px;
	color: #1c486f;
	text-align: center;
	line-height:22px;
	padding: 0 4px;
	background: #f3f7fa;
	border-top:#fff solid 1px;
}
	.dataSelect li a:hover{
		background: #d9e5ee;
		border-top:1px solid #d9e5ee;
	}
.dataSelect li span{
	cursor: default;
}
/* first tab */
.dataSelect li:first-child{
	background: url(../images/menu/dataMenu_tabL.png) no-repeat left top;
}
.dataSelect li:first-child a{
	background: #f3f7fa;
	margin: 0 0 0 5px;
}
.dataSelect li:first-child:hover{
	background: url(../images/menu/dataMenu_tabL_hover.png) no-repeat left top;
}
.dataSelect li:first-child a:hover{
	background: #d9e5ee;
}

/* last tab */
.dataSelect li.lastTab{
	background: url(../images/menu/dataMenu_tabR.png) no-repeat right top;
}
.dataSelect li.lastTab a,
.dataSelect li.lastTab span{
	background: #f3f7fa;
	margin: 0 5px 0 0;
}
.dataSelect li.lastTab:hover{
	background: url(../images/menu/dataMenu_tabR_hover.png) no-repeat right top;
}
.dataSelect li.lastTab a:hover{
	background: #d9e5ee;
}

/* selected tab */
.dataSelect li.is-selected{
	background: #006cb1;
}
.dataSelect li.is-selected a,
.dataSelect li.is-selected span{
	color: #fff;
	background: #006cb1;
	border-top: #2692d7 solid 1px;
}
.dataSelect li.is-selected a:hover{
	background: #006cb1;
}
/* selected first tab */
.dataSelect li.is-selected:first-child,
.dataSelect li.is-selected:first-child:hover{
	background: url(../images/menu/dataMenu_tabL_on.png) no-repeat left top;
}
.dataSelect li.is-selected:first-child a,
.dataSelect li.is-selected:first-child:hover > a,
.dataSelect li.is-selected:first-child span{
	color: #fff;
	background: #006cb1;
	margin: 0 0 0 5px;
}

/* selected last tab */
.dataSelect li.lastTab.is-selected,
.dataSelect li.lastTab.is-selected:hover{
	background: url(../images/menu/dataMenu_tabR_on.png) no-repeat right top;
}
.dataSelect li.lastTab.is-selected a,
.dataSelect li.lastTab.is-selected:hover > a,
.dataSelect li.lastTab.is-selected:span{
	color: #fff;
	background: #006cb1;
	margin: 0 5px 0 0;
}

/* disabled tab */
.dataSelect li.is-disabled span{
	color: #b2c6d4;
	cursor: default;
	background: #d9e5ee;
	border-top:1px solid #d9e5ee;
}
.dataSelect li.is-disabled:first-child{
	background: url(../images/menu/dataMenu_tabL_hover.png) no-repeat left top;
}
.dataSelect li.is-disabled:first-child span{
	color: #b2c6d4;
	background: #d9e5ee;
	margin: 0 0 0 5px;
}
.dataSelect li.lastTab.is-disabled{
	background: url(../images/menu/dataMenu_tabR_hover.png) no-repeat right top;
}

/* データ種選択メニュー ゆとりあり */
.dataSelect.wideType li a{
	min-width: 150px;
}

/* -------------------画面選択メニュー */
/* dispMenu非表示 */
div.contents.noneDispMenu div.dispMenuBox{
	visibility : hidden;
	height: 7px;
}
/* Base */
.dispMenuBox{
	position:relative;
	width: 100%;
	height: 27px;
/*	background:#fff;*/
}

ul.dispSelect{
	position: absolute;
	top: 4px;
	left: 5px;
	line-height: 17px;
}
.dispSelect li{
	float: left;
	border-right:1px solid #d9e7ed;
	width: 120px;
	text-align: center;
}
	.dispSelect li:first-child{
		border-left:1px solid #d9e7ed;
	}
.dispSelect li.is-selected{
	padding: 0 2px;
	width: 116px;
}
.dispSelect li a,
.dispSelect li span{
	display: block;
	width: 100%;
	color: #1c486f;
}
.dispSelect li.is-selected a,
.dispSelect li.is-selected span{
	background: #d9e7ed;
	cursor: default;
}

/* 画面選択メニュー ゆとりあり */
.dispSelect.wideType li a{
	min-width: 160px;
}

/* データメニュー影 */
.tabMenuBorder{
	position: absolute;
	top: 24px;
	left: -1px;
	width: 100%;
	height: 2px;
	background: #f6f7f8;
	border-top:1px solid #c3d0db;
	z-index: -2;
}

/* 画面タイトル */
h2{
	height:20px;
	text-indent:20px;
	line-height: 20px;
	font-size: 15px;
	letter-spacing: 1px;
	background: url(../images/common/iconH2.png) no-repeat left center;
}

/*=======================
	ページ送り戻し・局選択
  =======================*/
.pagerBox{
	position: absolute;
	top: 0px;
	right: 0px;
	height:24px;
	font-size: 11px;
	margin-top: -4px;
}

.pagerBox span.pages{
	display:inline-block;
	width: 50px;
	height: 18px;
	text-align: right;
	line-height:20px;
	vertical-align: middle;
	background: url(../images/button/bgTimeBox.png) repeat-x;
	border: 1px solid #c3d0db;
	margin-bottom: 1px;
	padding-right: 2px;
	margin-top: 3px;
}
/*局選択モーダルの選択ボタン*/
#pointSelectPopup button.pointSelect,
#pointSelectPopup span.pointSelect{
	width: 73px;
	height: 24px;
	font-size: 12px;
	color: #005E92;
	vertical-align: middle;
	background: url(../images/button/btn.png) no-repeat;
	position: absolute;
	top:50%;
	left:5px;
	margin-top: -12px;
}
#pointSelectPopup span.pointSelect{
	line-height: 25px;
	cursor: pointer;
}
/************************/
button.prevPage,
button.nextPage{
	width: 48px;
	height: 17px;
	font-size: 11px;
	vertical-align: middle;
}
/* 前ページ */
button.prevPage{
	color: #1c486f;
	padding:0 0 0 6px;
	background: url(../images/button/prevPage.png) no-repeat;
}
button.prevPage:hover{
	background: url(../images/button/prevPage_hover.png) no-repeat;
}
button.prevPage.is-disabled{
	color: #a1a0a0;
	cursor: default;
	background: url(../images/button/prevPage_disabled.png) no-repeat;
}

/* 次ページ */
button.nextPage{
	padding:0 6px 0 0;
	color: #1c486f;
	background: url(../images/button/nextPage.png) no-repeat;
}
button.nextPage:hover{
	background: url(../images/button/nextPage_hover.png) no-repeat;
}
button.nextPage.is-disabled{
	color: #a1a0a0;
	cursor: default;
	background: url(../images/button/nextPage_disabled.png) no-repeat;
}

/*=======================
	時刻操作部
  =======================*/
.timeBox{
	/*width: 865px;*/
	box-sizing: border-box;	/*!!*/
	width:100%;
	height: 28px;
	margin: 4px 0 0 0;
	background: url(../images/button/bgTimeBox.png) repeat-x;
	border: 1px solid #c3d0db;
}
/* 日時指定 */
.timeSet{
	min-width:200px;
	height:21px;
	display: inline-block;
	vertical-align: top;
	padding:0 7px;
	margin:3px 0 0 0;
}
.timeSet span{
	margin:0 5px 0 5px;
	line-height:21px;
}

/* Calendarボタん */
button.calendar{
	width: 26px;
	height:21px;
	vertical-align: top;
}

.timeBox ul{
	position: relative;
	display: inline-block;
	height: 24px;
	margin: 0 5px 0 5px;
	padding: 3px 0 0 10px;
	border-left: 1px solid #c3d0db;
}
.timeBox ul li{
	float: left;
}

ul.timeChange{
	padding-left:28px;
}
/* 時計 icon */
ul.timeChange:before{
	content:url(../images/button/icon_timeClock.png);
	position: absolute;
	top: 6px;
	left:6px;
}
/* 時刻送り戻し */
.timeChange button{
	height:20px;
	color: #005E92;
	background: url(../images/button/timeBtn_intra.png) no-repeat 0% 0%;
}
.timeChange button:HOVER{
	color:#66b6d7;
}
.timeChange button.is-disabled,
.timeChange button.is-disabled:HOVER{
	color:#cdcdcd;
	cursor: default;
}
.timeChange button.back01{
	width:79px;
	background-position: 0px 0px;
	padding:0 0 0 14px;
}
.timeChange button.back01:hover{
	background-position: 0px -21px;
}
.timeChange button.back01.is-disabled{
	background-position: 0px -63px;
}
.timeChange button.back02{
	width:74px;
	background-position: -79px 0px;
	padding:0 0 0 10px;
}
.timeChange button.back02:hover{
	background-position: -79px -21px;
}
.timeChange button.back02.is-disabled{
	background-position: -79px -63px;
}
.timeChange button.forward03{
	width:74px;
	background-position: -153px 0px;
	padding:0 10px 0 0;
}
.timeChange button.forward03:hover{
	background-position: -153px -21px;
}
.timeChange button.forward03.is-disabled{
	background-position: -153px -63px;
}
.timeChange button.forward04{
	width:74px;
	background-position: -227px 0px;
	padding:0 10px 0 0;
}
.timeChange button.forward04:hover{
	background-position: -227px -21px;
}
.timeChange button.forward04.is-disabled{
	background-position: -227px -63px;
}
.timeChange button.latest05{
	width:72px;
	background-position: -301px 0px;
	padding:0 10px 2px 0;
}
.timeChange button.latest05:hover{
	background-position: -301px -21px;
}
.timeChange button.latest05.is-disabled{
	background-position: -301px -63px;
}

/* 時間幅切替 */
.timeMode button{
	width:54px;
	height:20px;
	color: #005E92;
	background: url(../images/button/timeMode.png) no-repeat 0% 0%;
}
.timeMode button:HOVER{
	color:#66b6d7;
}
.timeMode button.is-selected,
.timeMode button.is-selected:HOVER{
	color: #fff;
	cursor: default;
}
button.switch01 {
	background-position: 0px 0px;
}
button.switch02 {
	background-position: -54px 0px;
}
button.switch01:hover {
	background-position: 0px -21px;
}
button.switch02:hover {
	background-position: -54px -21px;
}
button.switch01.is-selected {
	background-position: 0px -42px;
}
button.switch02.is-selected {
	background-position: -54px -42px;
}

/* 潮位　TP切替 */
.tpBox{
	position: relative;
	display: inline-block;
	height: 22px;
	margin: 0 5px 0 5px;
	padding: 3px 0 0 10px;
/* 	border-left: 1px solid #c3d0db; */
}
.tpBox ul li{
	float: left;
}


/* ============================
	スライダー
   ============================*/
/* スライダーボタン */
.timeSlider button{
	height:21px;
	color: #005E92;
	background: url(../images/button/timeSlider.png) no-repeat 0% 0%;
}
/*再生*/
.timeSlider button.play01{
	width:35px;
	background-position: 0px 0px;
}
.timeSlider button.play01:hover{
	background-position: 0px -21px;
}
.timeSlider button.play01.is-disabled{
	background-position: 0px -63px;
	cursor: default;
}
/*一時停止*/
.timeSlider button.pause02{
	width:35px;
	background-position: -35px 0px;
}
.timeSlider button.pause02:hover{
	background-position: -35px -21px;
}
.timeSlider button.pause02.is-disabled{
	background-position: -35px -63px;
	cursor: default;
}
/*現在(予測のみ使用)*/
.timeSlider button.now06{
	width:25px;
	background-position: -70px 0px;
}
.timeSlider button.now06:hover{
	background-position: -70px -21px;
}
.timeSlider button.now06.is-disabled{
	background-position: -70px -63px;
	cursor: default;
}
/*巻き戻し*/
.timeSlider button.rew03{
	width:25px;
	background-position: -95px 0px;
}
.timeSlider button.rew03:hover{
	background-position: -95px -21px;
}
.timeSlider button.rew03.is-disabled{
	background-position: -95px -63px;
	cursor: default;
}
/*早送り*/
.timeSlider button.ff04{
	width:25px;
	background-position: -120px 0px;
}
.timeSlider button.ff04:hover{
	background-position: -120px -21px;
}
.timeSlider button.ff04.is-disabled{
	background-position: -120px -63px;
	cursor: default;
}
/*最新*/
.timeSlider button.skip05{
	width:25px;
	background-position: -145px 0px;
}
.timeSlider button.skip05:hover{
	background-position: -145px -21px;
}
.timeSlider button.skip05.is-disabled{
	background-position: -145px -63px;
	cursor: default;
}

/* ============================
	共通部品
   ============================*/
/* Horizontal Layout box */
.hrzBox {
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5-7*/
    /zoom: 1; /*for ie5-7*/
	width: auto;
	height: auto;
	vertical-align: top;
}
/* Horizontal Rule */
hr{
	border: none;
	background: #f6f7f8;
	height: 1px;
	border-top: 1px solid #cbd5de;
	border-bottom: solid 2px #f6f7f8;
}
/* 避難勧告対象市町 */
p.announce{
	margin: 15px 0;
	color: red;
	font-size: 15px;
}
/*----------------------- ボタン汎用 */
.funcBtn{
	min-width: 65px;
	min-height: 24px;
	line-height: normal;
	font-size: 12px;
	color: #005e92 !important;
	cursor: pointer;
	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;

}
.funcBtn:hover{
	background: linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
	background: -webkit-linear-gradient(#f3f3f3 10%, #c6c7ca 100%) !important;
}
.funcBtn.is-disabled,
.funcBtn.is-disabled:hover{
	color:#b8bdc2 !important;
	border:1px solid #99a6b3 !important;
	background: #dedfe0 !important;
	cursor: default;
}
/*----------------------- チェックボックス */
input[type="checkbox"]{
	z-index:-1;
	position: relative;
	top: 0px;
	left: 10px;
	width: 1px;
}
/* default */
label.disp-checkbox{
	background-image: url(../images/common/chkBox_off.png);
	background-repeat: no-repeat;
	background-position: 7px 1px;
	cursor: pointer;
	margin: 0 4px 0 -2px;
	font-size: 12px;
	z-index: 10;
}
/* checked */
label.is-checkboxOn{
	background-image: url(../images/common/chkBox_on.png);
}
@-moz-document url-prefix() {/*firefox対応*/
	input[type="checkbox"] {
		opacity: 0;
	}
	label.disp-checkbox span.dummy{
		font-size: 5px;
	}
}

/*=======================
	color
  =======================*/
/* 表内 定数凡例色ラベル */
span.colorLbl:before{
	content: "";
	display: inline-block;
	width:6px;
	height: 10px;
	border: 1px solid #fff;
	vertical-align:top;
}
span.inner{
	display: inline-block;
/*	width:90px;*/
	width:80%;
}

/* [flag3] 	flagNo 連動色定義 			*/
/* ------------------------------------ */
/* ■ 赤 */
td.dtBgLv5,							/* データ背景 Lv5 */
.explainBox span.ex-dtBgLv5,		/* 凡例 Lv5 */
/*---------------*/
td.dtBgDam10Lv3,					/* 貯水位) Lv3 サーチャージ */
td.dtBgDam50Lv1,					/* 流入量) Lv1 洪水量 */
.explainBox span.ex-dtBgDam10Lv3,
.explainBox span.ex-dtBgDam50Lv1,
/*---------------*/
td.dtBgStageLv4,					/* 水位) Lv4 氾濫危険 */
.colorLbl.ex-dtBgStageLv4:before,	/* 水位) Lv4 氾濫危険 table header 凡例 */
.explainBox span.ex-dtBgStageLv4,	/* 水位) Lv4 氾濫危険 凡例 */
td.overRate div.dtBgStageLv4,
/*---------------*/
td.dtBgTideLv2,						/* 潮位) Lv2 警戒潮位 */
.explainBox span.ex-dtBgTideLv2		/* 潮位) Lv2 警戒潮位 凡例 */
{
	background: #e91e00;
}

/* ■ 橙 */
td.dtBgLv4,
.explainBox span.ex-dtBgLv4,
/*---------------*/
td.dtBgDam10Lv2,					/* 貯水位) Lv2 ただし書き */
.explainBox span.ex-dtBgDam10Lv2,
/*---------------*/
td.dtBgStageLv3,					/* 水位) Lv3 避難判断  */
.colorLbl.ex-dtBgStageLv3:before,
.explainBox span.ex-dtBgStageLv3,
td.overRate div.dtBgStageLv3
{
	background: #fa9f00;
}

/* ■ 黄 */
td.dtBgLv3,
.explainBox span.ex-dtBgLv3,
/*---------------*/
td.dtBgStageLv2,					/* 水位) Lv2 氾濫注意 */
.colorLbl.ex-dtBgStageLv2:before,
.explainBox span.ex-dtBgStageLv2,
td.overRate div.dtBgStageLv2,
/*---------------*/
td.dtBgTideLv1,						/* 潮位) Lv1 注意潮位 */
.explainBox span.ex-dtBgTideLv1

{
	background: #ffd200;
}

/* ■ 青 */
td.dtBgLv2,
.explainBox span.ex-dtBgLv2,
/*---------------*/
td.dtBgDam10Lv1,					/* 貯水位) Lv1 常時満水位 */
.explainBox span.ex-dtBgDam10Lv1,
/*---------------*/
td.dtBgStageLv1,					/* 水位) Lv1 水防団待機  */
.colorLbl.ex-dtBgStageLv1:before,
.explainBox span.ex-dtBgStageLv1,
td.overRate div.dtBgStageLv1
{
	background: #1172ee;
}

/* ■ 水色 */
td.dtBgLv1,
.explainBox span.ex-dtBgLv1
{
	background: #45cbe3;
}

/* ■ 白(無色) --- 平常 */
.explainBox span.ex-dtBgLv0
{
	background: #fff;
	border: 1px solid #c6ced5;
}

/* [flag1] 無効*/
/* ------------------------------------ */
/* ■ 灰色  */
td.dtBgLv-2,					/* -2:欠測 */
.explainBox span.ex-dtBgLv-2,
td.dtBgLv-4,					/* -4:閉局 */
.explainBox span.ex-dtBgLv-4,
td.dtBgStageLv-2,
td.dtBgStageLv-4,
td.dtBgTideLv-2,
td.dtBgTideLv-4,
td.dtBgDamLv-2,
td.dtBgDamLv-4
{
	background: #a7a7a7;
}

/* --------------------------文字色 */
td.dtBgLv5,
td.dtBgLv2,
td.dtBgDam10Lv3,
td.dtBgDam10Lv1,
td.dtBgDam50Lv1,
span.ex-dtBgLv5,	/*例*/
span.ex-dtBgLv2,
td.dtBgStageLv4,
td.dtBgStageLv1,
td.dtBgTideLv2
{
	color: #fff;
}

/* ---------------------------extra */
/* level連動flagNoで対応しない場合はコチラ */
/* 超過して赤 */
span.ex-over,
td.over,
dd.over{
	background: #e91e00;
	color: #fff;
}
/* 注意:黄 */
td.dtBg-alert,
.explainBox span.ex-dtBg-alert{
	background: #ffd200;
}
/* 警戒:赤 */
td.dtBg-warning,
.explainBox span.ex-dtBg-warning{
	background: #e91e00;
	color: #fff;
}

/*=======================
	凡例
  =======================*/
/* base */
.explainBox{
	border: 1px solid #a4b9cb;
	font-size:11px;
	line-height:15px;
	height:auto;
	margin-top:25px;
}
.explainBox h6{
	width: 100%;
	height: 17px;
	font-size: 13px;
	text-align: center;
	line-height:17px;
	background: #e5eaee;
}

/* 区切り線-下部 */
.explainBox hr{
	border-bottom: 1px solid #a4b9cb;
	border-top-width: 0;
}
/* 区切り線-縦-説明の右につける */
.explainBox .borderR{
	border-right: 1px solid #a4b9cb;
	min-height: 30px;
}

/*---------------------- カテゴリわけ */
.explainBox div.ctg{
	clear:both;
	margin:auto 0;
	height: 17px;
}
.explainBox .ctg:first-child{
	margin-top: 7px;	/* 縦位置の調整 */
}

/* カテゴリタイトル */
.explainBox .ctg p{
	min-width:60px;
	float: left;
	margin-left:10px;
	text-align:center;	/*おためし。 */
	display:inline-block;
}
.explainBox .ctg.wide p{
	min-width:100px;	/* long.Ver. */
}
.explainBox .ctg p:after{
	content:":";
	float:right;
}

/*------------------------ 凡例リスト*/
.explainBox dl{
	display:inline-block;
}

/* title p なし 左右バージョン*/
.explainBox.typeB dl:first-child{
	margin-left:25px;	/* 左横調整 */
}
.explainBox.typeB dl.dispLegend{
	margin-top:7px;	/* 縦位置調整 */
}
/*----------------*/
.explainBox dl dd,
.explainBox dl dt{
	float: left;
	height: 15px;

	margin-bottom:2px;
}
/* 改行箇所を指定したい */
.explainBox dl dt.break{
	clear:both;
}
.explainBox dl dt span{
	margin-top:2px;		/*graphもあるから*/
}
/* ---------------------- 色凡例 */
dl.colorLegend{
	margin-left:3px;
}
dl.colorLegend dt{
	width:6px;
	text-align:center;
}
dl.colorLegend dt span{
	min-width: 6px;
	height: 11px;	/*空だから*/
	display: inline-block;
}
dl.colorLegend dd{
	min-width:92px;
	text-indent:5px;
	margin-right:5px;
}
/* 長いダム定数名に対応 */
dl.colorLegend dd.wideLv2{
	min-width:160px;
}
dl.colorLegend dd.wideLv3{
	min-width:130px;
}
/* ------------------データ表現凡例*/
dl.dispLegend{
	margin-left: 60px;
}
dl.dispLegend dt{
	width:40px;
	text-align: center;
}
dl.dispLegend dd{
	min-width:75px;
	color: #365b81;
}
/* ----------------------説明と例 */
/*値が超越した場合、背景色が変わります*/
.example{
	margin:7px 12px 5px;
}
.example p span{
	display: inline-block;
	width: 27px;
	height: 14px;
	text-align: center;
}
/*=======================
	ポップアップモーダル
  =======================*/
.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;
}

/*=======================
	カレンダー用のモーダル
  =======================*/
.iframe-contents{
	border-radius: 10px;
	padding: 5px;
}

/*=======================
	エラー画面
  =======================*/
div.errContents h2{
	color:#000;
	margin: 20px 0px 0px 20px;
	font-size:16px;
	line-height: 24px;
	font-weight: bold;
}
div.errContents ul{
	margin-top:15px;
	margin-left:40px;
}
div.errContents li{
	color:#000;
	font-size:16px;
	line-height: 24px;
}
div.errContents a{
	color:#005c82;
	cursor:pointer;
	text-decoration: underline;
	padding-left:20px;
	background: url("../images/common/linkMarker.png") no-repeat 0 center;
}

/*=======================
	ログイン画面
  =======================*/
.loginBox{
	position: relative;
	margin: 150px auto 0;
	width:447px;
	height:298px;
	background: url(../images/common/login_image.png) no-repeat;
	border: solid 1px #DEDFE0;
}
.loginBox p.loginSystem{
	width:100%;
	margin:5px auto;
	text-align:center;
	height:40px;
	line-height:42px;
	font-size:20px;
}
.loginBox p.loginTitle{
	width:280px;
	margin:20px auto 0px 165px;
	text-align: left;
	height:45px;
	line-height:50px;
	font-size:18px;
}
.loginBox .inputArea{
	position: absolute;
	top:120px;
	left:0px;
	width:100%;
	height:178px;
}
.loginBox .inputArea input[type="text"],
.loginBox .inputArea input[type="password"]{
	width:200px;
	float:right;
}
.loginBox label{
	font-size:15px;
	line-height:20px;
}
.loginBox p{
	width:300px;
	margin:13px auto;
	text-align:center;
}
.loginBox .funcBtnBox{
	position: absolute;
	bottom:10px;
	width: 100%;
	height: 30px;
	margin: 15px auto 0 auto;
	text-align: center;
	clear:both;
}
.loginBox .funcBtnBox .funcBtn{
	min-width:84px;
	min-height:26px;
	margin: 0 10px;
}
/*=======================
	リンク画面共通(2015.06.13小原)
  =======================*/
 .linkBoxArea{
	position: relative;
	/*display: inline-block;*/
	 display: flex;
}

.linkBox{
	display: inline-block;
	padding-right: 20px;
}

.linkImgBox{
	position: relative;
	height: 350px;
	width: 300px;
	border: 1px solid #a4b9cb;
	padding: 10px;
	font-size: 13px;
}
.linkImgBox img{
	height: 230px;
	width: 280px;
	border: 1px solid #a4b9cb;
}