/* ### レイアウト ### */
/* # 003399 -># FF8000 */
/* # 1e90ff -># F5DA81 */

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 #ffffff */
#container {
width: 320px;
margin-left: auto;
margin-right: auto;
background-color: #ececec;
position: relative;
}

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

#header img {
width:320px;
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: #F5DA81;
	width: 100%;}

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

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

.flexboxlegacy .nav li a:hover	{
	background-color: #FF8000;
	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: #FF8000;
	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: #F5DA81;
	color: #ff00ff;}

/* ナビゲーションメニューを均等幅で表示 */
.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: #F5DA81;
	width: 100%;}

.flexboxlegacy .lin {
	font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
	font-size: 14px;
	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: #000000;
	text-align: center;
	text-decoration: none;}

.flexboxlegacy .lin li a:hover	{
	background-color: #FF8000;
	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: 550px;
height: 524px;
position: absolute;
/* clip: rect(150px 338px 395px 135px); */
clip: rect(285px 415px 485px 190px );
top: -275px;
left: -145px;
overflow: hidden;
display: block;
}

/* 画像カット（アメダス1）*/
p.cut21 img {
width: 550px;
height: 500px;
position: absolute;
/* clip: rect(135px 338px 380px 135px); */
clip: rect(265px 415px 460px 190px );
top: -260px;
left: -145px;
margin: auto;
overflow: hidden;
display: block;
}

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


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

p.cut31b img {
width: 550px;
height: 478px;
position: absolute;
top: 0px;
left: 45px;
clip: rect(2px 212px 22px 2px);
overflow: hidden;
display: block;
}


/* 画像カット（ナウキャスト2）*/
p.cut32 img {
width: 550px;
height: 478px;
position: absolute;
top: -168px;
left: -88px;
/* clip: rect(152px 333px 397px 100px); */
clip: rect(200px 360px 430px 130px);

overflow: hidden;
display: block;
}

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

/* 画像カット（降短2）本体 */
p.cut42 img {
width: 550px;
height: 455px;
position: absolute;
top:-171px;
left:-89px;
/* clip:rect(127px 333px 372px 100px); */
clip: rect(200px 360px 430px 130px);

overflow:hidden;
display:block;
}


/* 画像カット（注警報1）*/
p.cut51 img {
width: 100%;
height: auto;
position: absolute;
top: -28px;
left: 2px;
clip: rect(32px 288px 281px 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: 335px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

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

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

/* レーダー・ナウキャストに関するCSS */
#nowcast {
height: 410px;
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: 485px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}

/* アメダスに関するCSS */
#amedas, #dosha {
height: 345px;
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: 36px;
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: 264px;
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: 245px;
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;
}

.ex_text3 {
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_text4 {
height: 30px;
width: auto;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-size: 85%;
font-weight: bold;
position: relative;
top: 265px;
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 */
#annaizu {
height: 335px;
width: auto;
text-align: center;
vertical-align: middle;
padding: 1px;
}


/* アドレスに関する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;
}