@charset "utf-8";
/*緊急情報*/
#emergency {
	margin-bottom: 20px;
	padding: 20px;
	background: #ffffdf;
	border: 1px solid #3097e0;
}
.alert {border: 2px solid #e81a19 !important;}
#emergency h3 {
	padding-left: 2em;
	color: #1b4668;
	background: url("../img/icon_emergency.png") no-repeat left center / 20px auto;
}
.alert h3{
	color: #e81a19 !important;
	border-color: #e81a19 !important;
	background: url("../img/icon_emergency_att.png") no-repeat left center / 20px auto !important;
}
#emergency h3 small{ margin-left: 1em;}
#emergency p { margin-bottom: 0;}
.alert P {color: #e81a19;}

/*天ヶ瀬ダムの洪水調節状況*/
#flood-control {
	margin-bottom: 20px;
	padding: 20px;
	background: #ffffdf;
	border: 1px solid #3097e0;
}
.alert {border: 2px solid #e81a19 !important;}
#flood-control h3 {
	padding-left: 2em;
	color: #1b4668;
	background: url("../img/icon_emergency.png") no-repeat left center / 20px auto;
}
.alert h3{
	color: #e81a19 !important;
	border-color: #e81a19 !important;
	background: url("../img/icon_emergency_att.png") no-repeat left center / 20px auto !important;
}
#flood-control h3 small{ margin-left: 1em;}
#flood-control p { margin-bottom: 0;}

/*水位・カメラバナー*/
.suiibanner,
.camerabanner{
	display: block;
	width: 100%;
	margin-bottom: 15px;
	padding: 2em 2em 2em 3.5em;
	color: #fff !important;
	font-size: 1.6em;
	font-weight: 700;
	border-radius: 5px;
}
.suiibanner {
	background:  url("../img/icon_suii.png") no-repeat left 10px center, url("../img/icon_wharrow.png") no-repeat right 10px center,#71cd6a;
	background-size:30px auto,16px auto,auto;
}
.camerabanner {
	background:  url("../img/icon_camera.png") no-repeat left 10px center,url("../img/icon_wharrow.png") no-repeat right 10px center,#f97a43;
	background-size:30px auto,16px auto,auto;
}
.suiibanner:hover,
.camerabanner:hover {text-decoration: none !important;}

/*ライブカメラ*/
.liveitem {
	margin: 50px auto;
	counter-reset:nolist;
}
.liveitem li{
	margin-bottom: 30px;
	font-size: 1.5em;
	line-height: 30px;
	position:relative;}
.liveitem li A {
	display: block;
	color: #fff;
	background:#3097e0;
}
.liveitem li A::before { 
	content: counter(nolist); 
	counter-increment:nolist; 
	text-align:center;
	display: inline-block;
	height:32px;
	width: 25px;
	color: #3097e0;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	background: #fff;
	border: 1px  solid #3097e0;
}
.liveitem li A:hover {text-decoration: none;}
.liveitem li A img{
	margin: 0;
	width: 100%;
	max-height: 129px;
}
#livewin {}
#livewin main .container h2 {
	margin-top: 15px;}
#livewin footer {
	width: 100%;
	position: fixed;
	bottom: 0;
}

@media only screen and (max-width:768px) {
#emergency h3 small{ display: block; margin-left: 0;}
.liveitem li{font-size: 1.2em;}
}