@charset "UTF-8";
/**
 * 【公開WEB】
 * 広島県河川情報
 * TOP画面CSS
 *
 * 更新履歴
 * [01] 2020.09.08	M.Obara	警戒レベル配色変更対応：
 * ===
 * [A-01] 2022.02.15	QRコード画像変更によるレイアウト調整（https対応）
 */
/* -----------------------common.css@override */
.contents{
	width: 1280px;
	margin-left: 0;
	padding-left: 0;
	padding-top: 0;
	min-height:0px;
}
div.dataBox{
	width: 100%;
	position: relative;
}
/* 概況図 */
div.mapBox{
	min-height:544px;
	width: 835px;
}
div.mapBox.top img.nameImg{
	position: absolute;
	top:0;
	left:0;
	margin:0;
	width: 835px;
	height:620px;
	z-index:1;
}
.mapArea {
	width: 100%;
	height:auto;
	min-height:544px;
	margin-top: 0px;
}
/*スピナー*/
.dataBox #spinnerBox{
	top:0px;
}
/*凡例*/
dl.mapLegend dd{
	width: 165px;
}
div.dam dl.mapLegend dd{
	width: 169px;
}

/* 超過一覧 */
div.infoBox{
	width: 430px;
}
.pointHeader{
	height: auto;
}
.pointHeader h4{
	height:45px;
	line-height:34px;
}
p.explain{
	position: absolute;
	left: 45px;
	top: 12px;
}
/*雨量超過一覧*/
table.rainData tbody th{
	width: 134px;
}
/*気象注警報*/
table.weatherData a.showDetail{
	margin-left: 50px;
}
div.wetherArea{
	width: 100px;
	display: inline-block;
}

/* フッター */
div.footer{
	margin-top: 20px;
}
/*=======================
	mapBox
  =======================*/
p.mapCaution{
	font-size: 12px;
	position: absolute;
	top: 35px;
	left: 5px;
}
p.mapCaution:BEFORE{
	content: "※";
}
/*=======================
	infoBox
  =======================*/
div.stageImgBox{
	position: absolute;
	top: 1px;
	right: 0px;
	width: 113px;
	height: 151px;
}
p.warningIssueTime{
	position: absolute;
	top: 5px;
	right: 10px;
}
dl.warningLegend{
	position: absolute;
	top: 24px;
	right: 10px;
}
dl.warningLegend *{
	display: inline;
}
dl.warningLegend dt span{
	display:inline-block;
	width: 14px;
	height: 13px;
	vertical-align: middle;
	margin-left: 2px;
	margin-top: -2px;
}

/*=======================
	helpBoxL,helpBoxR
  =======================*/
div.helpBoxL{
	width: 835px;
	position: relative;
	top: 0;
	left: 0;
}
div.helpBoxR{
	width: 430px;
	position: relative;
	margin-left: auto;
	margin-right: 0;
}
div.helpBoxL h4,
div.helpBoxR h4{
	width: 100%;
	font-size: 18px;
	background: url(../public_images/common/top_helpBoxLine.png) repeat-x bottom;
	height: 48px;
	line-height: 48px;
	margin-top: 10px;
}
div.helpBoxL h4 span{
	display:inline-block;
	width: 48px;
	height: 43px;
	vertical-align: middle;
	margin-top: -7px;
}
/* -----------------------お知らせ */
div.helpBoxL h4 span.notice{
	background: url(../public_images/common/top_notice.png) no-repeat left 7px;
}
ul.notice li{
	font-size: 13px;
	line-height: 19px;
	margin: 10px 0;
	padding-left: 20px;
	background: url(../public_images/common/listMarker.png) no-repeat left 3px;
}
ul.notice li.none{
	background: none;
}
/*リンク*/
ul.noticeUrl li{
	padding:0 0 0 20px;
	font-size: 13px;
	line-height: 18px;
	background: url(../public_images/common/linkMarker.png) no-repeat;
}

/* -----------------------川と防災について */
div.helpBoxL h4 span.story{
	background: url(../public_images/common/top_story.png) no-repeat left 3px;
}
ul.story{
	display: inline-block;
	width: 249px;
}
ul.story li{
	font-size: 13px;
	line-height: 19px;
	margin: 10px 0 0 0;
	padding-left: 20px;
	background: url(../public_images/common/linkMarker.png) no-repeat left 4px;
}
/* -----------------------モバイル */
div.helpBoxL h4 span.mobile{
	background: url(../public_images/common/top_mobile.png) no-repeat left 3px;
}
ul.mobile {
	margin-top:10px;
	position: relative;
	height: 95px;
	margin-bottom:10px;
}
/*メール登録*/
ul.mobileRegist {
	margin-top:10px;
	position: relative;
	height: 300px;
	margin-bottom:10px;
}
/*QRコード（基本）*/
ul.mobile li.qrImg,
ul.mobileRegist li.qrImg{
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	padding :4px;
	background-color: #fff;
	border: 2px solid #DAD9D9;
	display: flex;				/*[A-01]*/
	justify-content: center;		/*[A-01]*/
	align-items: center;			/*[A-01]*/
}
/*QRコード（スマホ）*/
ul.mobile li.qrImg.sp{
	width: 100px;
	height: 100px;
	padding: 0px;
}
ul.mobile li.title,
ul.mobileRegist li.title{
	position: relative;
	top: 25px;
	left: 110px;
	font-size: 13px;
}
ul.mobile li.title span,
ul.mobileRegist li.title span{
	font-size: 12px;
	color: #787878;
	padding-left: 15px;
}
ul.mobile li.link,
ul.mobileRegist li.link{
	position: relative;
	top: 25px;
	left: 110px;
	font-size: 13px;
	line-height: 19px;
	padding-left: 20px;
	background: url(../public_images/common/linkMarker.png) no-repeat left 4px;
	width: 370px;
}

ul.mobileRegist li.guide{
	position: relative;
	top: 25px;
	left: 110px;
	font-size: 12px;
	margin-top:10px;
}

div.mobileGuide{
	margin-left:100px;
	background:#29f11f
}

/* -----------------------各種防災情報 */
div.linkDiv{
	width: 430px;
	float: left;
}

ul.linkList li.title_hidari{
	font-size: 13px;
	line-height: 19px;
	margin: 10px 0 0 0;
	padding-left: 20px;
	background: url(../public_images/common/linkMarker.png) no-repeat left 4px;
	display: inline-block;
	width: 160px;
}
ul.linkList li.title_migi{
	font-size: 13px;
	line-height: 19px;
	margin: 10px 0 0 0;
	padding-left: 20px;
	background: url(../public_images/common/linkMarker.png) no-repeat left 4px;
	display: inline-block;
}
ul.linkList li{
	padding-left: 20px;
}
div.goLink{
	font-size: 13px;
	line-height: 19px;
	margin: 10px 0 0 0;
	width: 420px;
	text-align: right;
}

/* -----------------------洪水に関する警戒レベル相当情報 */
.keikaiLv5{
	background-color: #0c000c; /*[01]*/
	border: solid 1px #0c000c; /*[01]*/
	color: #fff;
	text-decoration: underline;
}
.keikaiLv4{
	background-color: #aa00aa; /*[01]*/
	border: solid 1px #9600aa; /*[01]*/
	color: #fff;
	font-size: 13px;
	text-decoration: underline;
}
.keikaiLv3{
	background-color: #ff2800; /*[01]*/
	border: solid 1px #e12800; /*[01]*/
	color: #fff;
	text-decoration: underline;
}
.keikaiLv2{
	background-color: #f2e700; /*[01]*/
	border: solid 1px #f2ce00; /*[01]*/
	color: #000;
	text-decoration: underline;
}

.keikai_Tbl{
	width: 100%;
}
.keikai_Tbl th{
	padding: 0px;
	text-align: center;
}
.keikai_Tbl td span{
	display: inline-block;
	width: 90%;
}
.keikai_Tbl td span.none{
	background: #cbe1f5;
/* 	border: 1px solid #b9dce3; */
	color: #1c486f;
	text-decoration: underline;
}