@charset "UTF-8";

/*+==========================================================+
目次
101. clear-both set
102. align set
103. block level float left right set
104. margin set
105. padding set
106. width set
107. background
108. font
109. display
110. List
111. Table
112. Box
113. Headline
999. other
+=========================================================+*/

/*+==========================================================+
 101. clear-both set
+=========================================================+*/
.clr { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 0px; height: 0px; }
.clr5 { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 5px; height: 5px; }
.clr10 { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 10px; height: 10px; }
.clr15 { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 15px; height: 15px; }
.clr20 { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 20px; height: 20px; }
.clr25 { margin: 0; padding: 0; clear: both; font-size: 0; line-height: 25px; height: 25px; }

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/*+==========================================================+
 102. align
+=========================================================+*/
.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.top{ vertical-align:top;}
.middle{ vertical-align:middle;}
.bottom{ vertical-align:bottom;}


/*+==========================================================+
 103. block level float left right set
+=========================================================+*/
.fltL { display:block; float: left; }
.fltR { display:block; float: right; }

/* 画像左右指定 */
.imgL { float: left; margin-right:5px; }
.imgR { float: right; margin-left:5px; }


/*+==========================================================+
 104. margin set
+=========================================================+*/
.m50 { margin: 50px; }
.m30 { margin: 30px; }
.m20 { margin: 20px; }
.m15 { margin: 15px; }
.m10 { margin: 10px; }
.m5 { margin: 5px; }
.mT50 { margin-top: 50px; }
.mT30 { margin-top: 30px; }
.mT20 { margin-top: 20px; }
.mT15 { margin-top: 15px; }
.mT10 { margin-top: 10px; }
.mT5 { margin-top: 5px; }
.mR50 { margin-right: 50px; }
.mR30 { margin-right: 30px; }
.mR20 { margin-right: 20px; }
.mR15 { margin-right: 15px; }
.mR10 { margin-right: 10px; }
.mR5 { margin-right: 5px; }
.mB50 { margin-bottom: 50px; }
.mB30 { margin-bottom: 20px; }
.mB20 { margin-bottom: 20px; }
.mB15 { margin-bottom: 15px; }
.mB10 { margin-bottom: 10px; }
.mB5 { margin-bottom: 5px; }
.mL50 { margin-left: 50px; }
.mL30 { margin-left: 30px; }
.mL20 { margin-left: 20px; }
.mL15 { margin-left: 15px; }
.mL10 { margin-left: 10px; }
.mL5 { margin-left: 5px; }

.m_auto { margin:0 auto; }

/*+==========================================================+
 105. padding set
+=========================================================+*/
.p50 { padding:50px; }
.p30 { padding:30px; }
.p20 { padding:20px; }
.p15 { padding:15px; }
.p10 { padding:10px; }
.p5 { padding:5px; }
.pT50 { padding-top:50px; }
.pT30 { padding-top:30px; }
.pT20 { padding-top:20px; }
.pT10 { padding-top:10px; }
.pT5 { padding-top:5px; }
.pB50 { padding-bottom:50px; }
.pB30 { padding-bottom:30px; }
.pB20 { padding-bottom:20px; }
.pB10 { padding-bottom:10px; }
.pB5 { padding-bottom:5px; }
.pR10 { padding-right:10px; }
.pR5 { padding-right:5px; }
.pL5 { padding-left:5px; }

/*+==========================================================+
 106. width set
+=========================================================+*/
.w190 { width:190px;}
.w232 { width:232px;}
.w350 { width:350px;}

.w480 { width:480px;}
.w580 { width:580px;}
.w690 { width:690px;}
.w720 { width:720px;}
.w760 { width:760px;}

.w100per{width:100%;}
.w95per{width:95%;}
.w90per{width:90%;}
.w80per{width:80%;}
.w70per{width:70%;}
.w60per{width:60%;}
.w50per{width:50%;}
.w45per{width:45%;}
.w40per{width:40%;}
.w30per{width:30%;}
.w20per{width:20%;}
.w10per{width:10%;}
.w5per{width:5%;}

/*+==========================================================+
 106. background
+=========================================================+*/
/* white gray
---------------------------------------------------------- */
/*.bg_000 { background:#000; color:#fff; }*/
.bg_333 { background:#333; color:#fff; }
.bg_666 { background:#666; color:#fff; }
.bg_999 { background:#999; color:#fff; }
.bg_ccc { background:#ccc; }
.bg_ddd { background:#ddd; }
.bg_fff { background:#fff; }

/* ドット背景
---------------------------------------------------------- */
.bg_dotted01 {
	background-image:url(/images/bg_dotted01.gif) ;
}
.bg_dotted02 {
	background-image:url(/images/bg_dotted02.gif) ;
}


/*+==========================================================+
 107. font
+=========================================================+*/
/* font size
---------------------------------------------------------- */
.tx_11px { font-size:11px; }
.tx_12px { font-size:12px; }
.tx_14px { font-size:14px; }
.tx_16px { font-size:16px; }
.tx_18px { font-size:18px; }
.tx_20px { font-size:20px; }

.small{ font-size:84%; }
.large{ font-size:115%; }


/* font color
---------------------------------------------------------- */
.tx_red { color:#f00; }
.tx_blue { color:#1994da; }
.tx_yellow { color:#fc0}
.tx_black { color:#000; }
.tx_white { color:#fff; }

.bold{ font-weight:bold; }
.normal{ font-weight:normal; }

/*+==========================================================+
 109. display
+=========================================================+*/
.block{ display:block;}
.none{ display:none;}


/*+==========================================================+
 110. List
+=========================================================+*/
/* .list01 アイコンなしリスト
---------------------------------------------------------- */
.list01 li{
	margin-bottom:10px;
}

/* .list02 アイコンなしリスト横並び
---------------------------------------------------------- */
.list02 li {
	float:left;
	margin-right:5px;
	margin-bottom:10px;
}

.list02:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* .list_arrow01 三角アイコン付きリスト
---------------------------------------------------------- */
.list_arrow01{
	margin-bottom:15px;
}
.list_arrow01 li {
	padding-left:20px;
	background:url(/images/arrow_right.gif) no-repeat center left;
}

/* .list_arrow02 三角アイコン付きリスト横並び
---------------------------------------------------------- */
.list_arrow02{
	margin-bottom:15px;
}
.list_arrow02 li {
	display:inline;
	margin-right:5px;
	padding-left:20px;
	background:url(/images/arrow_right.gif) no-repeat center left;
}

/* .list_blank blankアイコン付きリスト
---------------------------------------------------------- */
.list_blank{
	margin-bottom:15px;
}
.list_blank li {
        border-bottom:1px solid #4DBADE;
	padding-left:20px;
	background:url(/images/ico_blank.gif) no-repeat center left;
}

/* .list_hanrei カメラ映像表示ページ用凡例リスト
---------------------------------------------------------- */
.list_hanrei{
	width:140px;
	padding:3px;
	background-image:url(/images/bg_dotted01.gif) ;
	font-size:12px;
}
.list_hanrei li img{
	margin-right:3px;
	vertical-align:middle;
}


/*+==========================================================+
 111. Table
+=========================================================+*/
/*table00 枠なしテーブル
---------------------------------------------------------- */
.table00 th,.table00 td{ padding:5px 4px; }

/*table01 白枠テーブル
---------------------------------------------------------- */
.table01 th, .table01 td{
	padding:5px;
	border:solid 1px #fff;
}

/*デフォルト・奇数行背景色指定*/
.table01 th {
	background:#1994da;
	color:#fff;
}
.table01 tr.odd th { background:#e33878; }
.table01 td, .table01 tr.odd td { background:#e9f2f9; }

/*偶数行背景色指定*/
.table01 tr.even th { background:#e96093; }
.table01 tr.even td { background:#d4e6f3; }

.table01 td img{
	vertical-align:middle;
	margin-right:3px;
}




/*+==========================================================+
 112. Box
+=========================================================+*/
/* box720
---------------------------------------------------------- */
.box720{
	clear:both;
	width:720px;
	margin:0 auto;
}
.box800 {
    clear: both;
    width: 800px;
    margin: 0 auto;
}
/* whiteBox
---------------------------------------------------------- */
.whiteBox {
	padding:10px;
	background:#fff;
	color:#000;
}

/*+==========================================================+
 113. Headline
+=========================================================+*/
/* 下線付きドット背景タイトル */
.title01 {
	margin-bottom:10px;
	padding:10px 8px;
	background:url(/images/bg_dotted01.gif);
	border-bottom:2px solid #1994da;
	color:#1994da;
}

/*カメラアイコン*/
.ico_camera{
	background:url(/images/ico_camera.gif) left center no-repeat;
	padding:5px 0 5px 50px;
}

/* 水色背景+左黄色アイコン付きタイトル */
.title02 {
	margin-bottom:10px;
	padding:5px 5px 5px 15px;
	background:#0068b3 url(/images/title02.gif) 5px 50% no-repeat;
	color:#fff;
}

/* 水色背景タイトル（カメラ映像表示画面タイトル） */
.title03 {
	margin-bottom:0;
	padding:5px;
	background:#1994da;
	color:#fff;
}

/* 下線付きタイトル */
.title04 {
	margin-bottom:10px;
	padding:5px;
	border-bottom:2px solid #1994da;
}

/*+==========================================================+
 999. Other
+=========================================================+*/
/* 折返しさせないタグ */
.nowrap{ white-space:nowrap; }

/* 区切り線 */
hr {
	height:0;
	margin:15px 0 10px 0;
	padding:0;
	border:0;
	border-top:1px solid #c5e1ef;
}

/* 戻るリンク */
.arrow_back{
	padding-left:20px;
	background:url(/images/arrow_left.gif) no-repeat center left;
}

/* ボタンリンク */
.button{
	display:block;
	overflow:hidden;
	padding:10px 5px;
	background: url(/images/bg_button_off.gif) repeat-x center left;
	text-align:center;
	line-height:1.1;
	border-top:solid 1px #8ed6eb;
	border-left:solid 1px #8ed6eb;
	border-bottom:solid 1px #2b84c3;
	border-right:solid 1px #2b84c3;
	text-decoration:none;
	color:#fff;
}
.button:hover{
	color:#fff;
	background: url(/images/bg_button_hover.gif) repeat-x center left;
}

/* 画像トリミング指定（カメラ映像表示画面 平常時の画像・国土交通省XバンドMPレーダ雨量情報） */
.trimming{
	width: 350px;
	height: 262px;
	overflow: hidden;
}