@charset "UTF-8";

/* -----------------------------------
    汎用クラス
   ----------------------------------- */
/*html { background-color: #F2F6F5; }*/
body, td, th, h1, h2, h3, h4, h5, h6 { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
body { font-size: 70%; /* 13px */ color: #000;line-height: 1.3;text-align: center;height: 0px; }

strong { font-weight: bold; }
a { text-decoration: none; }
a:link { color: #0050BB;  }
a:visited { color: #800080; }
a:hover { color: #EF5500; transition: all 0.3s linear; }
a:active { color: #F00; }
a:hover img { 
 opacity: 0.6;
   filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
}
a:disabled, a[disabled] { color:#A0A0A0; cursor: default; }
a:disabled:hover, a[disabled]:hover { color:#A0A0A0 !important }

.inlineBlock { display: inline-block !important; }
.block { display: block !important; }
.clear { clear: both; display: block; }
.none { display: none !important; }
.hidden { visibility: hidden; }
.floatRight { float: right; }
.floatLeft { float: left; }


/* --- Clear Fix ------------- */
.clearfix:before, .clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }
.clearfix {overflow: hidden; }


/* 共通 
th,td { border: 1px solid black;  }
th { background-color:Aqua; }
fieldset { border: 1px solid #000000; text-align: left; margin:10px; }


#box1 { vertical-align:top; padding:10px; }
#box1 .paragraph1 { font-weight:bold; font-size:120%; text-align:left; }
#box1 .paragraph2 { text-align:left; margin-top:10px; }
#box1 .paragraph3 { text-align:right; margin:10px 0px 0px 10px; }
*/
    


/* -----------------------------------
   ヘッダー
 * ----------------------------------- */
#topHeader {
	background-color: #0099ff;
	height: 40px;
}
#topHeader > div {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#header {
	background-color: #0050BB;
}
#header > div {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#header h1 {
	width: 375px;
	float: left;
	margin-top: 5px;
	display: block;
}
#header h2 {
    border: solid 2px  ;
    border-color: blue;
    background-color: white;
	width: 75px;
	float:  right;
	display: block;
    margin-top: 5px;
    color: black;
     font-size : medium;
}

/* -----------------------------------
   グローバルナビ
 * ----------------------------------- */
#globalNavi {
	display: table;
	position: relative;
	float: right;
	height: 40px;
}
#globalNavi li {
	font-size: 13px;
	display: table-cell;
	border-left: 1px solid #FFFFFF;
	height: 40px;
	text-align: center;
	vertical-align: middle;
	line-height: 1.2;
}
#globalNavi li a,
#globalNavi li a .selected {
	padding: 0px 0.5em;
	display: block;
	color: #FFFFFF;
}
#globalNavi li a:hover,
#globalNavi li.selected a,
#globalNavi li.selected a:hover {
	color: #FFFFFF;
	background-color: #3333ff;
	display: table-cell;
	height: 40px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

/* ナビゲーション下階層 */
#contents-naviLower {
	display: none;
	border-bottom: 3px solid #3333ff;
	height: 26px;
	background-color: #3333ff;
}
#contents-naviLower > div {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#navi-lower {
	margin-left: auto;
	margin-right: auto;
	height: 26px;
	vertical-align: middle;
	line-height: 28px;
	position: absolute;
	right: 5px;
}
#navi-lower li {
	display: table-cell;
	padding-left: 13px;
	padding-right: 13px;
}
#navi-lower li a {
	display: block;
	text-align: center;
	color: #ffffff;
	height: 26px;
}
#navi-lower li a:visited {
	color: #ffffff;
}
#navi-lower li.active,
#navi-lower li:hover {
	background-color: #ffffff;
}
#navi-lower li.active a,
#navi-lower li a:hover {
	color: #0050BB;
}
#navi-lower li:hover a {
	color: #0050BB;
}
.show-container#contents-naviLower {
	display: block;
}


.table {
    display: table;
    border-collapse: collapse;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    vertical-align: middle;
}

.table--nested {
    display: table; 
    padding: 0px 15px;  
    font-size: 95%; 
}

.table--nested .td {
    padding: 5px;
    border: none;
}

/* 日付時刻 */
.datetime
{
    width: 108px;
    text-align: center;
}

/* 日付 */
.date
{
    width: 80px;
    text-align: center;
}
input[type="text"].date
{
    text-align: left;
}

/* 時刻 */
.time
{
    width: 60px;
    text-align: center;
}

/* -----------------------------------
   左端の切替タブ
 * ----------------------------------- */
#subNavi {
	float: left;
	width: 23px;
	position: absolute;
	left: 0px;
	z-index: 100;
}
#subNavi li {
	margin-bottom: 2px;
}
#subNavi li a {
	height: 8.8em;
	padding: 0.5em 4px;
	color: #FFFFFF;
	line-height: 1.1;
	text-decoration: none;
	display: block;
	vertical-align: middle;
	text-align: center;
	background-color: #2B3645;
	border-radius: 4px 0px 0px 4px;
	padding-top: 0.3em;
}
#subNavi li a:before {
	font-family: 'FontAwesome';
	content: '\f0da';
}

#subNavi li a.link3Character {
	height: 4.5em;
}
#subNavi li a.link4Character {
	height: 5.5em;
}
#subNavi li a.link7Character {
}
#subNavi li.selected a,
#subNavi li a:hover {
	background-color: #3333ff;
	color: #FFFFFF;
}

 /*トップ画像
.top_title
{
     width: 372px;
     height: 30px;


}*/

 .back2{
                background-image: url(Content/Images/g1_back2.png);
            }



 /* -----------------------------------
   左のカラム
 * ----------------------------------- */
#mapControl {
	position: relative;
	float: left;
	width: 250px;
	padding-left: 5px;
}

.column2-1 h2 
{
    font-size:14px;
	background-color: #FFF;
	display: block;
	font-weight: bold;
	border-bottom: 1px solid #666666;
    padding-top: 2px;
    margin-top: 0px;
	margin-bottom: 3px;
	border-left: 6px solid #666666;
	padding-left:10px;
}
	
.column2-1 h2:before {
	font-family: 'FontAwesome';
	font-size: 11px;
	padding-right: 3px;
}
.column2-1 h2 span {
	position: absolute;
	right: 5px;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 1px 3px 0px;
	font-weight: normal;
}

.slider-range-max {
	width: 80px;
	float: left;
	font-size: 11px;
	margin-top: 3px;
	margin-left: 10px;
}



/* 発表状況凡例･地図 */
#happyo-tbl  {
	width: 100%;
	margin-bottom: 10px;
}
#happyo-tbl th,
#happyo-tbl td {
	text-align: center;
	font-size: 16px;
	line-height: 1.2;
}
#happyo-tbl td {
	font-size: 12px;
	text-align: left;
}
#happyo-tbl #happyo-map {
	width: 152px;
}
#happyo-tbl #happyo-map img {
	width: 100%;
}





/* 全て表示／閉じるボタン */
.hirakuContainer {
	margin-top: 3px;
	font-size: 12px;
	border-bottom: 1px dotted #AAAAAA;
	padding-bottom: 5px;
}
.hirakuContainer2 {
	margin-top: 3px;
	font-size: 12px;
	border-bottom: 1px dotted #AAAAAA;
	padding-top: 20px;
}
.hirakuTojiruBtn {
	padding: 2px 3px 0px 2px;
	position: absolute;
	display: block;
	right: 32px;
	top: -3px;
}
.hirakuTojiruBtn2 {
	padding: 2px 3px 0px 2px;
	position: absolute;
	display: block;
	left: 2px;
	top: -3px;
}
.hiraku 
{
	color: #333333;
}
.hiraku:before 
{
    padding-right:3px;
	color: #FFFFFF;
	background-color: #0050BB;
	font-size: 10px;
	border-radius: 3px;
	content: "▼凡例";

}
.tojiru 
{
	color: #333333;
}
.tojiru:before {
	padding-right:3px;
	color: #FFFFFF;
	background-color: #0050BB;
	font-size: 10px;
	border-radius: 3px;
	content: "▲閉じる";
}
.hiraku2 
{
	color: #333333;
}
.hiraku2:before 
{
    padding-right:3px;
	color: #FFFFFF;
	background-color: #0050BB;
	font-size: 10px;
	border-radius: 3px;
	content: "▼表示項目・凡例";

}
.tojiru2:before {
	font-size: 12px;
	content: "▲閉じる";
}
.hirakuTojiruBtn:hover {
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #0050BB;
	cursor: pointer;
}
.hirakuTojiruBtn2:hover {
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #0050BB;
	cursor: pointer;
}

.hirakuContainer-wide {
	font-size: 12px;
}
.hirakuTojiruBtn-wide {
	padding: 4px 7px 2px;
	display: block;
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #333333;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}
.hiraku-wide:before {
	font-size: 13px;
	content: "閉じる▲";
}
.tojiru-wide:before {
	font-size: 13px;
	content: "凡例▼";
}

.hirakuTojiruBtn-wide:hover {
	background-color: #333333;
	cursor: pointer;
}
.komoku {
	display: block;
	float: left;
	color: #FFFFFF;
	margin-right: 2px;
	padding-left: 10px;
	padding-top: 4px;
}
.tbl-hanrei {
	font-size: 12px;
	margin-top: 2px;
}
.tbl-hanrei th {
	vertical-align: middle;
	font-size: 17px;
	line-height: 1;
	text-align: center;
}
.tbl-hanrei td {
	padding-right: 0px;
}

/* -----------------------------------
   凡例
 * ----------------------------------- */
/*大雨特別警報*/
.mark1{
    background-color:#0c000c; 
    border: 1px solid black; 
    color: white;
    font-weight: bold;
}
/*土砂災害警戒情報*/
.mark2 {
    background: repeating-linear-gradient(-45deg, #FF0000, #FF0000 1px, #FFF 0, #FFF 5px);
    border: 1px solid black;
    color: Black;
    font-weight: bold;
 }
/*大雨警報*/
.mark3{
    background-color:#ff2800;
    border: 1px solid black;
    color: white;
    font-weight: bold;
}
/*大雨注意報*/
.mark4{
    background-color:#f2e700; 
    border: 1px solid black; 
    color: Black;
    /*font-weight: bold;*/
}

/* レベル１ */
.level1 { 
    color: Black; 
    background-color:#f2e700; 
}
/* レベル２ */
.level2 { 
    color: white;  
    background-color:#ff2800; 
}
/* レベル３ */
.level3 { 
    color: white;        
    background-color:#aa00aa;
}
/* レベル４ */
.level4 { 
    color: white;  
    background-color:#0c000c; 
}