@charset "utf-8";
/* CSS Document */

body{
	text-align:center
}

.red {color:red}
.font1 {font-family:"MS 明朝"}

.content
{
	/*width:  640px;*/
	width:  640px;
	height: 800px;
	list-style: none;
}
.content.typhoon
{
	height: 1100px;
}
.content.warning
{
	height: auto;
}

.content iframe
{
	/*width: 620px;*/
	width: 640px;
	height: 800px;
}
.login_menu
{
	width: 930px;
	height: 260px;
	margin-left: 10px;
}
.login_area
{
	display: inline-block;
	text-align: center;
	width: 300px;
	height: 240px;
	background-color: #d1dfe4;
        border-radius: 5px;
}
.login_area ul
{
	list-style: none;
	text-align: center;
	margin-top: 25px;
}
.login_area li
{
	width: 300px;
        border-radius: 5px;
}
li.login_label
{
	text-align: left;
	height: 16px;
	margin-top: 4px;
	padding-left: 30px;
	color: #777777;
	font-size: 12px;
}
.login_area input
{
	height: 30px;
	width: 240px;
	font-size: 18px;
}
li#login_button
{
	width: 240px;
	height: 40px;
	margin-top:18px;
	margin-left: 30px;
	font-size: 18px;
	font-weight: 500;
	background-color: #006699;
	color: #ffffff;
	line-height: 45px;
}
li#login_error
{
	margin-top: 5px;
	margin-left: 30px;
	width: 240px;
	height: 40px;
	font-size: 12px;
	color: #ff0000;
}

.info_menu
{
	margin-top:30px;
}

.pref_menu{

}

.s_pref{
	margin:20px auto;
	background-color:#a5cede;
}

.s_pref td{
	width:82px;
	height:42px;
	background:url(../images/button/nor_pref.png);
	text-align:center;
	font-size:14px;
	color:#333;
}

.s_pref td.slct_pref{
	background-image:url(../images/button/pd_pref.png);
	color:#fff;
}
.s_pref td#all{
	background-image:url(../images/button/all_pref.png);
}
.s_pref td#all.slct_pref{
	background-image:url(../images/button/pd_all_pref.png);
	color:#fff;
}

.r_menu {
	margin:0 auto;
	text-align:center;
}

.pref_menu2 {
}

.s_pref2{
	margin:10px auto;
	background-color:#a5cede;
}

.s_pref2 td{
	width:68px;
	height:42px;
	background:url(../images/button/nor_pref2.png) no-repeat;
	text-align:center;
	font-size:14px;
	font-color:#333;
}

.s_pref2 td.slct_pref{
	background-image:url(../images/button/pd_pref2.png);
	color:#fff;
}
.s_pref2 td.all_pref{
	background-image:url(../images/button/all_pref2.png);
}
.s_pref2 td.slct_all_pref{
	background-image:url(../images/button/pd_all_pref2.png);
	color:#fff;
}

.t_block{
	text-align:left;
	height:20px;
	font-color:#333;
	font-size:12px;
/*	margin:0 0 5px 0; */
	padding:0 3px 0 0;
}

.block{
	background-color:#fff;
}

.s_point{
	padding:0 30px 10px 50px;
}

.s_date{
	padding:0 30px 10px 0;
}

.s_date form{
        font-size:14px;
        font-family: "メイリオ";
	text-align:center;
}

.map{
	margin-left: 70px;
	text-align:center;
	position: relative;
	width: 500px;
	height: 500px;
}
.map img.base{
	position: absolute;
}
.map img.over{
	position: relative;
}
.map canvas
{
	position: absolute;
	left: 0;
	top: 0;
	background-color: transparent;
}

.popup_label
{
	position: absolute;
	display: none;
	vertical-align: middle;
	line-height: 20px;
	left: 0;
	top:0;
	width: 80px;
	height: 20px;
        font-size:12px;
	font-weight: 600;
        font-family: "メイリオ";
	color: #000000;
	background: #EEE;
	border-top: 3px solid #dddddd;
	border-left: 3px solid #dddddd;
	border-right: 3px solid #bbbbbb;
	border-bottom: 3px solid #bbbbbb;
	color:#111111;

}

/*
.map2{
	height:1000px;
	text-align:center;
}
*/

.message{
	margin:15px 10px 10px 20px;
	padding:10px 10px 20px 10px;
}

.ex{
	margin:0 auto;
	text-align:center;
}
div.point_menu
{
}
div.point_menu ul
{
	list-style: none;
	
}
div.point_menu li
{
	vertical-align: middle;
	display: table-cell;
	padding-right: 5px;
	width:80px;
	height:42px;
	background:url(../images/button/nor_pref.png) no-repeat;
	text-align:center;
	font-size:14px;
	font-color:#333;
}
div.point_menu li.slct_point
{
	background-image:url(../images/button/pd_pref.png);
	color:#fff;
}
div.point_menu li.inactive
{
	background-image:url(../images/button/inactive_pref.png);
	color:#fff;
}


#pointcast_area
{
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	font-size:14px;
	font-family: "メイリオ";
}
#pointcast_area ul
{
	list-style: none;
}
#pointcast_area li
{
	vertical-align: middle;
}

/* 予報種別選択エリア */
.kind_index
{
	padding-left:60px;
}

.kind_index li
{
	display: table-cell;
	width: 230px;
	height: 40px;
}

.kind_index span
{
	display: inline-block;
	padding-top: 6px;
	border: #ffbf7f solid;
	width: 200px;
	height: 30px;
	font-size: 18px;
	font-weight: 600;
	color: #ffbf7f;
	background: #ffffff;
}
.kind_index span.slct_area
{
	background: #ffbf7f;
	color: #ffffff;
}
.kind_index span.inactive
{
	background: #dddddd;
	color: #ffffff;
	border: #aaaaaa solid;
}


/* 予報表示エリア */
.graph_area
{
	width: 560px;
	height: 452px;
	margin-left: 40px;
	font-size: 0;
}

.graph_area
{
	display: none;
}
.graph_area.slct_area
{
	display: block;
}

.date_index ul
{
	margin-left: 60px;
	padding: 0;
}

.date_index li
{
	display: table-cell;
	color:#999999;
	background: #effeff;
	font-weight: 600;
	font-size: 14px;
	border-left: 2px solid #cccccc;
	border-top: 2px solid #cccccc;
}

.date_index.daily li
{
	width: 164px;
	height: 35px;
}

.date_index.weekly li
{
	margin-right: 5px;
	width: 69px;
	height: 35px;
}

.date_index li.slct_date
{
	border-top: 2px solid #ffbf7f;
	border-left: 2px solid #ffbf7f;
	color:#ffffff;
	background: #ffbf7f;
}
.date_index li.str_label
{
	font-size: 16px;
}
.date_index li.right_end
{
	width:0;
	margin-left: 2px solid #cccccc;
}


.label_index
{
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 60px;
	height: 446px;
	background: #eeeeee;
}
.label_index ul
{
	padding: 0;
	margin: 0;
}
.label_index li
{
	display: table-cell;
	width: 57px;
	border-left: 2px #999999 solid;
	border-right: 1px #999999 solid;
	font-size: 14px;
}

li.index_date
{
	height: 30px;
	border-top: 2px #999999 solid;
}
li.index_mark
{
	height: 45px;
	border-top: 1px #cccccc solid;
}
li.index_time
{
	height: 30px;
	border-top: 1px #cccccc solid;
}
li.index_temp
{
	height: 150px;
	border-top: 1px #cccccc solid;
}
li.index_rain
{
	height: 30px;
	border-top: 1px #cccccc solid;
}
li.index_humd
{
	height: 30px;
	border-top: 1px #cccccc solid;
}
li.index_drct
{
	height: 48px;
	border-top: 1px #cccccc solid;
}
li.index_wind
{
	height: 24px;
	border-top: 1px #cccccc solid;
}
li.index_grain
{
	height: 270px;
	border-top: 1px #cccccc solid;
}
li.index_train
{
	height: 30px;
	border-top: 1px #cccccc solid;
}
li.index_arain
{
	height: 30px;
	border-top: 1px #cccccc solid;
	border-bottom: 2px #999999 solid;
}
li.index_pres
{
	height: 30px;
	border-top: 1px #cccccc solid;
	border-bottom: 2px #999999 solid;
}

.data_area
{
	display: inline-block;
}

.graph
{
	position: relative;
	display: inline-block;
	width: 498px;
	height: 446px;
	background: #ffffff;
	overflow: auto;
}

.graph ul
{
	padding: 0;
}
.graph li
{
	display: table-cell;
	color: #555555;
	font-size: 14px;
}
.graph.daily ul
{	
	width: 2946px;
}
.graph.daily li
{
}

.graph.daily li.date
{
/*	width: 975px;*/
	height: 30px;
	border-top: 2px solid #999999;
	border-left:1px solid #cccccc;
	font-weight: 600;
}

.graph.daily li.mark
{
	width: 183px;
	height: 45px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.mark span
{
	font-weight: 500;
}

.graph.daily li.time
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.temp
{
	width: 2946px;
	height: 150px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.rain
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.humd
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.wind
{
	width: 60px;
	height: 24px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.daily li.drct
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}
.graph.daily li.drct_cap
{
	width: 60px;
	height: 18px;
	border-left:1px solid #cccccc;
	font-size: 12px;
}
.graph.daily li.pres
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

/*ここからbasinCast用*/
.graph.daily li.grain
{
        width: 2946px;
        height: 270px;
        border-top: 1px solid #cccccc;
        border-left:1px solid #cccccc;
}

.graph.daily li.train
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}
.graph.daily li.arain
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}
/*ここまでbasinCast用*/

.graph.daily li.right_end
{
	border-right:2px solid #999999;
}
.graph.daily li.bottom_end
{
	border-bottom:2px solid #999999;
}

.graph.daily li.day_left
{
	border-left:2px solid #999999;
}



.graph.weekly ul
{	
	width: 1717px;
}
.graph.weekly li
{
}

.graph.weekly li.date
{
	width: 243px;
	height: 30px;
	border-top: 2px solid #999999;
	border-left:1px solid #cccccc;
	font-weight: 600;
}

.graph.weekly li.mark
{
	width: 243px;
	height: 45px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.mark span
{
	font-weight: 500;
}

.graph.weekly li.time
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.temp
{
	width: 1713px;
	height: 150px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.rain
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.humd
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.wind
{
	width: 60px;
	height: 24px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.drct
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}
.graph.weekly li.drct_cap
{
	width: 60px;
	height: 18px;
	border-left:1px solid #cccccc;
	font-size: 12px;
}
.graph.weekly li.pres
{
	width: 60px;
	height: 30px;
	border-top: 1px solid #cccccc;
	border-left:1px solid #cccccc;
}

.graph.weekly li.right_end
{
	border-right:2px solid #999999;
}

.graph.weekly li.bottom_end
{
	border-bottom:2px solid #999999;
}

.graph.weekly li.day_left
{
	border-left:2px solid #999999;
}

.day_selected
{
	background: #ffeddb;
}

/* 時間経過半透明カバー */
.past_cover
{
	position: absolute;
	top: 79px;
	left: 2px;
	width: 0px;
	height: 348px;
	background:white;
	opacity: 0.50;
	filter:alpha(opacity=50);
}
/* 時間経過半透明カバー(流域平均予測雨量用) */
.past_cover.basin
{
	position: absolute;
	top: 33px;
	left: 2px;
	width: 0px;
	height: 363px;
	background:white;
	opacity: 0.50;
	filter:alpha(opacity=50);
}

/* データが内場合のカバー */
#nodata
{
	position: absolute;
	top: 0;
	left: 0;
	width: 1717px;
	height: 400px;
	background:black;
	opacity: 0.30;
	filter:alpha(opacity=30);
}
#nodata p
{
	position: absolute;
	top: 180px;
	left: 50%;
	height: 30px;
	width: 300px;
	color: white;
	font-size: 14px;
}

/* 台風影響情報*/
/*　地図変更ボタン */
div.typhoon_ctrl
{
	display: block;
	text-align: center;
	height: 40px;
	width: 500px;
	margin-left: 70px;
	margin-bottom: 5px;
}
div.typhoon_ctrl span
{
	display: inline-block;
	width: 60px;
	height: 30px;
	margin: 10px;
}
.typhoon_ctrl button
{
	width: 60px;
	height: 25px;
}

/* 地図描画部 */
.typhoon_map
{
	position: absolute;
}
img.typhoon_legend
{
	position: absolute;
	display: none;
	bottom: 0;
	right: 0;
	border: 1px #999999 solid;
}
.typhoon_map button
{
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 60px;
	height: 25px;
}

/* 台風選択セレクトボックス */
div.typhoon_slct
{
	width: 500px;
	height: 30px;
	margin-left: 70px;
	margin-top: 20px;
	text-align: left;
}
div.typhoon_slct select
{
	width: 200px;
	height: 30px;
}

/* 台風接近情報 */
div.typhoon_approach
{
	width: 500px;
	margin-left: 70px;
	margin-top: 10px;
	text-align: left;
}

div.typhoon_approach ul
{
	margin: 0;
	padding: 0;
}
div.typhoon_approach li
{
	display: inline-block;
	width: 500px;
	height: 30px;
}

div.typhoon_approach span
{
	display: inline-block;
	vertical-align: middle;
	height: 30px;
	line-height: 30px;
        font-size: 14px;
        font-family: "メイリオ";
	border-top: 1px #999999 solid;
	border-left: 1px #999999 solid;
}

div.typhoon_approach span.bottom
{
	border-bottom: 1px #999999 solid
}
div.typhoon_approach span.right
{
	border-right: 1px #999999 solid
}

span.typhoon_app_label
{
	padding-left: 10px;
	width: 160px;
	background: #ffffff;
}
span.typhoon_app_label.top
{
	padding-left: 0px;
	width: 170px;
	text-align: center;
	background: #ffe2c6;
	color: #666666;
	font-weight: 600;
}
span.typhoon_app_index

{
	width: 120px;
	text-align: center;
	background: #ffe2c6;
	color: #666666;
	font-weight: 600;
}
span.typhoon_app_data_l
{
	width: 241px;
	text-align: center;
	background: #ffffff;
}
span.typhoon_app_data
{
	width: 120px;
	text-align: center;
	background: #ffffff;
}

/* 台風詳細情報 */
div.typhoon_param
{
        width: 430px;
	height: 280px;
        margin-left: 70px;
        margin-top: 20px;
        text-align: left;
	overflow: auto;
}


div.typhoon_param ul
{
        list-style: none;
        margin: 0;
        padding: 0;
}
div.typhoon_param li
{
        display: inline-block;
        width: 421px;
        height: 20px;
}

div.typhoon_param span
{
        display: inline-block;
        vertical-align: middle;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: "メイリオ";
        border-top: 1px #999999 solid;
        border-left: 1px #999999 solid;
}

div.typhoon_param span.bottom
{
        border-bottom: 1px #999999 solid
}
div.typhoon_param span.typhoon_param_data
{
        border-right: 1px #999999 solid
}

span.typhoon_param_index
{
	padding-left: 20px;
	width: 390px;
	background: #ffe2c6;
}
span.typhoon_param_label
{
	padding-left: 10px;
	width: 160px;
	background: #ffffff;
}
span.typhoon_param_data
{
	padding-left: 10px;
	width: 230px;
	background: #ffffff;
}

.nav
{
	min-height: 550px;
}