@charset "utf-8";
#realtime {}
#realtime .datanav{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#realtime .datanav li { 
	margin:30px 0;
	flex-basis:24%;}
#realtime .datanav li A {
	display: block;
	padding: 1.5em 0.5em;
	font-size: 15px;
	font-size: 1.5rem;
	color: #FFF;
	font-weight: bold;
	background: #c9c9c9;
}
#realtime .datanav li img { margin-right:8px; vertical-align: middle;}
#realtime .datanav li A:hover { opacity: 0.6;}
#realtime .datanav .active {
	background: #2d6a9a;
}
@media screen and (max-width: 768px) {
#realtime .datanav li { margin:20px 0; flex-basis:24.5%; text-align: center;}
#realtime .datanav li A {padding:0.5em 0;font-size: 13px;font-size: 1.3rem;}
#realtime .datanav li img { display: block; margin: 0 auto 0.5em;}
}

#realtime #datamap {position: relative;}
#realtime #datamap img { width: 100%;}
#realtime #datamap .update {
	position: absolute;
	top: 1px;
	left: 1px;
	padding: 0.5em 1.5em;
	font-size: 14px;
	font-size: 1.4rem;
	color: #2d6a9a;
	text-align: center;
	background: rgba(255,255,255,0.5);
}
#realtime #datamap .dataitem { 
	display: block; 
	padding: 3px 5px; 
	font-size: 13px;
	font-size: 1.3rem; 
	font-weight: bold;
	background:#0b3c6d; 
	text-align: center;}
#realtime #datamap .dataitem .name { color: #fff;}
#realtime #datamap .dataitem .data { color: #c3c3c3;}
#realtime #datamap .dataitem .att { color: #fff600;}
#realtime #datamap .dataitem .soon{ color: #ff0000;}
#realtime #datamap .dataitem a:hover { opacity: 0.6;}

#realtime #datamap .liveitem {
	counter-reset:nolist;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#realtime #datamap .liveitem li{
	display: block;
	width: 24.5%;
	margin: 10px 0;
	font-size: 14px;
	font-size: 1.4rem;
	color: #fff;
	background:#0b3c6d;
	float: left;
	position:relative;}
#realtime #datamap .liveitem li::before { 
	content: counter(nolist); 
	counter-increment:nolist; 
	text-align:center;
	display: inline-block;
	height:24px;
	width: 20px;
	color: #0b3c6d;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	background: #fff;
	border: 1px solid #0b3c6d;
}
#realtime #datamap .liveitem img{
	width: 100%;
}

#livecam { width: 100%; box-sizing: border-box;}
#livecam main { padding: 10px;text-align: center;}
#livecam main h1,
#livecam main P {text-align: left;}
#livecam img { width:90%; margin: 0 auto 20px;}
#livecam .close {
	display: block;
	width: 150px;
	margin: 30px auto;
	padding: 0.5em;
	ont-size: 14px;
	font-size: 1.4rem;
	line-height: 1.0;
	color: #fff;
	text-align: center;
	background: #0b3c6d;
	border-radius: 5px;
}
#livecam footer { background: #2d6a9a;}
#livecam footer P { font-size: 12px; font-size: 1.2rem; line-height: 2.1; color: #fff; text-align: center;}

/*データ*/
#realtime #datamap .wl_shimagahara,
#realtime #datamap .wl_iwakura,
#realtime #datamap .wl_asaya,
#realtime #datamap .wl_oouchi,
#realtime #datamap .wl_inako,
#realtime #datamap .wl_igaueno,
#realtime #datamap .wl_araki,
#realtime #datamap .wl_sanagu,
#realtime #datamap .wl_nabari,
#realtime #datamap .wl_abeta,
#realtime #datamap .dam_nunome,
#realtime #datamap .dam_takayama,
#realtime #datamap .dam_muro,
#realtime #datamap .dam_syourenji,
#realtime #datamap .dam_hinachi,
#realtime #datamap .dam_kawakami,
#realtime #datamap .rain_shimagahara,
#realtime #datamap .rain_inako,
#realtime #datamap .rain_sakashita,
#realtime #datamap .rain_aho,
#realtime #datamap .rain_kiryu,
#realtime #datamap .rain_tamataki,
#realtime #datamap .rain_araki,
#realtime #datamap .rain_awa,
#realtime #datamap .rain_tsuge,
#realtime #datamap .rain_harigabesyo,
#realtime #datamap .rain_oyama,
#realtime #datamap .rain_nabari,
#realtime #datamap .rain_haibara,
#realtime #datamap .rain_takai,
#realtime #datamap .rain_iwabana{ position: absolute;}
/*水位*/
#realtime #datamap .wl_shimagahara{top:228px; left: 209px;}
#realtime #datamap .wl_iwakura{ top:175px; left:275px;}
#realtime #datamap .wl_asaya{ top:320px; left:268px;}
#realtime #datamap .wl_oouchi{ top:318px; left:417px;}
#realtime #datamap .wl_inako{ top:382px; left:450px;}
#realtime #datamap .wl_igaueno{ top:121px; left:310px;}
#realtime #datamap .wl_araki{ top:244px; left:471px;}
#realtime #datamap .wl_sanagu{ top:192px; left:455px;}
#realtime #datamap .wl_nabari{ top:514px; left:190px;}
#realtime #datamap .wl_abeta { top:567px; left:158px;}
/*ダム*/
#realtime #datamap .dam_nunome{top:417px; left: 124px;}
#realtime #datamap .dam_takayama{top:230px; left: 176px;}
#realtime #datamap .dam_muro{top:678px; left:169px;}
#realtime #datamap .dam_syourenji{ top:535px; left:262px;}
#realtime #datamap .dam_hinachi{ top:573px; left:390px;}
#realtime #datamap .dam_kawakami{ top:460px; left:500px;}
/*雨量*/
#realtime #datamap .rain_shimagahara{top:210px; left: 242px;}
#realtime #datamap .rain_inako{ top:342px; left:374px;}
#realtime #datamap .rain_sakashita{ top:370px; left:572px;}
#realtime #datamap .rain_aho{ top:423px; left:498px;}
#realtime #datamap .rain_kiryu{ top:502px; left:548px;}
#realtime #datamap .rain_tamataki{ top:38px; left:411px;}
#realtime #datamap .rain_araki{top:207px; left:382px;}
#realtime #datamap .rain_awa{ top:224px; left:555px;}
#realtime #datamap .rain_tsuge{ top:66px; left:534px;}
#realtime #datamap .rain_harigabesyo{ top:529px; left:45px;}
#realtime #datamap .rain_oyama{ top:336px; left:240px;}
#realtime #datamap .rain_nabari{ top:517px; left:189px;}
#realtime #datamap .rain_haibara{ top:687px; left:15px;}
#realtime #datamap .rain_takai{ top:715px; left:211px;}
#realtime #datamap .rain_iwabana{ top:795px; left:239px;}

@media screen and (max-width: 768px) {
#realtime #datamap .dataitem { text-align:left; border-bottom: 1px solid #fff; overflow: hidden;}
#realtime #datamap .dataitem P { padding: 1em 0.5em; display: inherit; box-sizing: border-box;}
#realtime #datamap br { display: none;}
#realtime #datamap .update {padding: 0.3em 1em;	font-size: 12px; font-size: 1.2rem;}
#realtime #datamap .dataitem .name {float: left; }
#realtime #datamap .dataitem .data { text-align: right; float: right;}
	
#realtime #datamap .liveitem {
	counter-reset:nolist;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#realtime #datamap .liveitem li{
	display: block;
	width: 50%;
	margin: 0;
	padding: 5px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.8;
	float: left;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	box-sizing: border-box;}
#realtime #datamap .liveitem li::before { 
	text-align:center;
	display: block;
	height:24px;
	width: 20px;
	margin-right: 5px;
	float: left;
}
#realtime #datamap .liveitem li A { display: block;}
#realtime #datamap .liveitem img{ display: none;}
	
#realtime #datamap .wl_shimagahara,
#realtime #datamap .wl_iwakura,
#realtime #datamap .wl_asaya,
#realtime #datamap .wl_oouchi,
#realtime #datamap .wl_inako,
#realtime #datamap .wl_igaueno,
#realtime #datamap .wl_araki,
#realtime #datamap .wl_sanagu,
#realtime #datamap .wl_nabari,
#realtime #datamap .wl_abeta,
#realtime #datamap .dam_nunome,
#realtime #datamap .dam_takayama,
#realtime #datamap .dam_muro,
#realtime #datamap .dam_syourenji,
#realtime #datamap .dam_hinachi,
#realtime #datamap .dam_kawakami,
#realtime #datamap .rain_shimagahara,
#realtime #datamap .rain_inako,
#realtime #datamap .rain_rain_sakashita,
#realtime #datamap .rain_aho,
#realtime #datamap .rain_kiryu,
#realtime #datamap .rain_tamataki,
#realtime #datamap .rain_araki,
#realtime #datamap .rain_awa,
#realtime #datamap .rain_tsuge,
#realtime #datamap .rain_harigabesyo,
#realtime #datamap .rain_oyama,
#realtime #datamap .rain_nabari,
#realtime #datamap .rain_haibara,
#realtime #datamap .rain_takai,
#realtime #datamap .rain_iwabana{ position:static;}
}