/* ### レイアウト ### */

html {
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
}

/* ボディに関するCSS */
body {
color: #000000;
font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
font-size: 100%;
text-align: center;
margin: 0;
padding: 0;
background-color: #dcdcdc;
}

/* コンテナ（レイアウト全体）に関するCSS */
#container {
width: 320px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
position: relative;
}

/* ヘッダーに関するCSS */
#header {
width: auto;
margin: 0 0 2px;
padding: 0;
}

#header img {
width:300px;
vertical-align:bottom;
}

#content {
width: auto;
float: none;
}

/* 1ナビゲーションメニュー（flexboxlegacy） */
.flexboxlegacy .nav ul {
	display: -webkit-box;
	display: -moz-box;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #1e90ff;
	width: 100%;}

.flexboxlegacy .nav {
	font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight:bold;
	border-bottom: solid 1px #ffffff;}

.flexboxlegacy .nav li a {
	display: block;
	width: 100%;
	padding: 9px 0;
	color: #ffffff;
	text-align: center;
	text-decoration: none;}

.flexboxlegacy .nav li a:hover	{
	background-color: #00b4b4;
	color: #ffffff;}

/* ナビゲーションメニューを均等幅で表示 */
.flexboxlegacy .nav li	{
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	border-right: solid 1px #ffffff;}

.flexboxlegacy .nav li:last-child
	{border-right: none;}


/* 2ナビゲーションメニュー */
.flexboxlegacy dt ul {
	display: -webkit-box;
	display: -moz-box;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #3f9877;
	width: 100%;}

.flexboxlegacy dt {
	font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight:bold; 
	border-bottom: solid 1px #ffffff;
	border-left: solid 1px #ffffff;
	border-right: solid 1px #ffffff;}

.flexboxlegacy dt li a {
	display: block;
	width: 100%;
	padding: 12 0px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;}

.flexboxlegacy dt a:hover {
	background-color: #c06788;
	color: #ffffff;}

/* ナビゲーションメニューを均等幅で表示 */
.flexboxlegacy dt li {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;}

.flexboxlegacy dt li:last-child {
	border-right: none;}

/* ナビゲーションメニューのコンパクト化 */
.no-flexboxlegacy .nav li a {
	width: auto;
	padding: 5px 8px;}


/* 3ナビゲーションメニュー（flexboxlegacy） */
.flexboxlegacy .lin ul {
	display: -webkit-box;
	display: -moz-box;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #1e90ff;
	width: 100%;}

.flexboxlegacy .lin {
	font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight:bold;
	border-bottom: solid 1px #ffffff;
	border-left: solid 1px #ffffff;
	border-right: solid 1px #ffffff;}

.flexboxlegacy .lin li a {
	display: block;
	width: 100%;
	padding: 9px 0;
	color: #ffffff;
	text-align: center;
	text-decoration: none;}

.flexboxlegacy .lin li a:hover	{
	background-color: #003399;
	color: #ffffff;}

/* ナビゲーションメニューを均等幅で表示 */
.flexboxlegacy .lin li	{
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	border-right: solid 1px #ffffff;}

.flexboxlegacy .lin li:last-child
	{border-right: none;}

/* ナビゲーションメニューのコンパクト化 */
.no-flexboxlegacy .lin li a {
	width: auto;
	padding: 5px 8px;}

/* メモ欄に関するCSS */
.memo {
width: auto;
height: 28px;
font-size: 100%;
margin: 0px 0px 0px 0px;
text-align: center;
vertical-align: middle;
}

.memo input{
border: 1px solid #0850b2;
font-size: 100%;
width: 95%;
margin: 1px 0px 0px 0px;
text-align: center;
vertical-align: middle;
}

/* 画像に関するCSS */
.gazou {
width: auto;
margin: 2px;
position: relative;
top: 0;
left: 0;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

.gazou2 {
width: 320px;
margin: 0px;
position: relative;
top: 0;
left: 0;
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
}

.gazou_j {
width: auto; height:auto;
margin: 0 auto;
display:block;
}

/* 画像カット（天気予報と気温予報）*/
p.cut img {
width: 380px;
height: 380px;
position: absolute;
clip: rect(20px 296px 290px 6px);;
top: -20px;
left: 5px;
overflow: hidden;
display: block;
}

/* 画像カット（アメダス1）*/
p.cut21 img {
width: 400px;   
height: 400px;  
position: absolute;
clip: rect(4px 285px 310px 3px);
top: 0px;
left: 10px;
margin: auto;
overflow: hidden;
display: block;
}

/* 画像カット（アメダス2）*/
p.cut22 img {
width: 400px;   
height: auto;  
margin: auto;
height: 40px;
position: relative;
top: 38px;
display: block;
/*left: 60px;
overflow: hidden;*/
}

/* 画像カット（ナウキャスト1）時刻欄*/
p.cut31 img {
width: 550px;
height: 478px;
position: absolute;
top: 0px;
left: 54px;
clip: rect(2px 212px 22px 2px);
overflow: hidden;
display: block;
}

/* 画像カット（ナウキャスト2）*/
p.cut32 img {
width: 550px;
height: 478px;
position: absolute;
top: -75px;
left: -55px;
clip: rect(102px 333px 357px 90px);
overflow: hidden;
display: block;
}

/* 画像カット（降短1）*/
p.cut41 img {
width: 550px;
height: 455px;
position: absolute;
top: -1px;
left: 34px;
clip: rect(2px 246px 22px 2px);
overflow: hidden;
display: block;
}

/* 画像カット（降短2）*/
p.cut42 img {
width: 550px;
height: 455px;
position: absolute;
top:-63px;
left:-39px;
clip:rect(92px 313px 332px 80px);
overflow:hidden;
display:block;
}

/* 画像カット（注警報1）*/
p.cut51 img {
width: 100%;
height: auto;
position: absolute;
top: -28px;
left: 2px;
clip: rect(29px 288px 273px 24px);
overflow:hidden;
display:block;
}

/* 画像カット（注警報2）*/
p.cut52 img {
width: 205px;
height: 25px;
margin: auto;
position: relative;
top: 274px;
display: block;
/*left: 60px;
overflow: hidden;*/
}

/* 画像カット（メッシュ1）*/
p.cut61 img {
width: 550px;
height: 500px;
position: absolute;
top: 0px;
left: -200px;
clip: rect(2px 422px 22px 237px);
overflow: hidden;
display: block;
}

/* 画像カット（メッシュ2）*/
p.cut62 img {
width: 550px;
height: 500px;
position: absolute;
top: -106px;
left: -114px;
clip: rect(132px 374px 392px 113px);
overflow: hidden;
display: block;
}

/* 画像（時系列予報）*/
p.jikeiretsu_pict img {
width: 315px;
height: 195px;
margin: 2 auto;
}

/* 画像（紫外線情報）*/
p.uv_pict img {
width: 292px;
height: 200px;
margin: 2 auto;
}

/* 画像（土砂災害警戒判定メッシュ情報）*/
p.dosha img {
width: 275px;
height: 309px;
margin: 2 auto;
position: absolute;
top: -4px;
left: 20px;
clip: rect(0px 275px 263px 0px);
overflow: hidden;
display: block;
}

/* 天気予報に関するCSS */
#yohou {
height: 358px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* 気温予報に関するCSS */
#temp {
height: 368px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* 解析雨量・降水短時間予報に関するCSS */
#kotan {
height: 410px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* レーダー・ナウキャストに関するCSS */
#nowcast {
height: 440px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* メッシュに関するCSS */
#mesh {
height: 390px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* 注警報に関するCSS */
#warning {
height: 510px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* アメダスに関するCSS */
#amedas, #dosha {
height: 383px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* 時系列に関するCSS */
#jikeiretsu, #livecamera{
height: 303px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* 警報級の可能性に関するCSS */
#possibility {
height: 70px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* リンクに関するCSS */
#link {
width: auto;
text-align: left;
font-size: 120%;
line-height: 1.3;
}

/* 凡例に関するCSS */
.ex {
height: 40px;
text-align: center;
vertical-align: middle;
}

.ex_ra {
width: 215px;
height :25px;
position: relative;
top: 269px;
margin: auto;
display: block;
/*
left: 50px;
overflow: hidden;
*/
}

.ex_text {
height: 30px;
width: auto;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-size: 85%;
font-weight: bold;
position: relative;
top: 274px;
left: 0px;
overflow:hidden;
display: block;
}

.ex_text2 {
height: 30px;
width: auto;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-size: 85%;
font-weight: bold;
position: relative;
top: 5px;
left: 0px;
overflow: hidden;
display: block;
}

.red {
color: #ff0000;
font-weight: bold;
}

.blue {
color: #0000ff;
font-weight: bold;
}

.yellow {
color: #ffff00;
font-weight: bold;
}

.orange {
color: #ffaa00;
font-weight: bold;
}

.purple {
color: #c800ff;
font-weight: bold;
}

.green {
color: #92c162;
font-weight: bold;
}

.gray {
color: #c8c8cb;
font-weight: bold;
}

/* 記事の見出しのコンパクト化 */
.date	{float: none;
	font-size: 12px;
	line-height: 2.5;
	display: inline;
	padding: 3px 10px;
	border-radius: 5px;}

.date span	{font-size: 12px;
	display: inline;}

#content h2	{font-size: 24px;}

/* アドレスに関するCSS */
#address {
width: auto;
text-align: left;
font-size: 85%;
line-height: 1.3;
margin: 0px;
padding: 4px;
}

#address a {
color: #0033ff;
}

#address a:hover {
color: #ff1493;
}

/* フッターに関するCSS */
#footer, #preface {
clear: both;
width: auto;
margin: 0;
font-size: 85%;
text-align: center;
}

#footer a {
color: #0033ff;
}

#footer a:hover {
color: #ff1493;
}

#footer span.counter{
background-color: #000000;
color: #ffffff;
font-weight: 600;
font-family: sans-serif;
}