/* 「見える化システム」2022版 */
* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
/*	border:solid 2px;		 （テスト用）全要素に境界線を表示 */
}

body {
	/* background-image: linear-gradient( 135deg,  #2dcf58 80%, rgba(255, 225, 51,1) 90%); 背景のグラデ */
	/*background-image:linear-gradient(100deg, rgba(178, 224, 245,1) 25%,rgba(255, 255, 153,1) 95%);  裾が黄色*/
	background-image:linear-gradient(100deg, rgba(172, 224, 245,1) 18%,rgba(218, 255, 225,1) 90%);    /*淡色 */
	background-image:linear-gradient(285deg, rgba(0, 128, 225,1) 10%,rgba(218, 255, 225,1) 90%);  /*淡い色 */
	/*  通常のテキストは遊ゴ。OSによって表記揺れあり */
	font-family: "游ゴシック Medium", "游ゴシックMedium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	position: relative;
	margin:0px;
	color: #333;	/* 文字色 */
}

/* main=ヘッダーフッターを除いたbody部分。横幅は８割。（白い部分の外側＝ページタイトルなどがあるところ）*/
	div#main {
	margin: 10px auto; /* ここは必要、余白に関係ない */
	width: 80%;
}

/* 先頭行１文字下げる */
p {
	text-indent : 1em
}

/* 強調する文字（斜体にしない、水色アンダーラインのみ） */
em {
	font-style:normal;
	background: linear-gradient(transparent 70%, #8ed 60%);
}


/* 強く強調する文字（太字＋水色アンダーライン） */
strong {
	font-weight:bold;
	background: linear-gradient(transparent 70%, #8ed 60%);
}

/* 見出しフォントはヒラギノ／メイリオ系 */
h1, h2, h3, h4, h5, h6 {
    font-family:"Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    font-weight:bold;
	color: #06c;
	margin: 1px;
}

a:link, a:visited {
	color:#06c;
	text-decoration:underline;
	padding:2px;
}
a:hover{
	color:#fff;
	background-color: rgba(0,128,187,0.5);
	text-decoration:none;
	padding:2px;
}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited {
	color: #06c;
	text-decoration:none;
	}
h1 a:hover,h2 a:hover {
	color: #fff;
	text-shadow: 0 0 0;
}

hr {
	position: relative;
	height: 2px;
	border-width: 0;
	background-color: #00bcd4;
	background-image: -webkit-linear-gradient(left,
	#00bcd4 0%,#283593 50%,#00bcd4 100%);
	background-image:linear-gradient(90deg, #00bcd4 0%,#283593 50%,#00bcd4 100%);
}



#NAROheader {
/* height: 72px; */
padding-top: 10px;
padding-left:10%;	/* ヘッダ画像（機構のロゴ）とmain部のサイト名の位置を合わせる */
background-color: rgba(255,255,255,0.8);
}

#header {
	margin: 15px 0px;
	padding:25px 10px;
	background-image: url(header_img.png);
	background-size:100%;
	background-position: center;
	height: 100%;
}

#header h1 {
	font-family:"Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
}

/* 記事欄・コンテンツ欄の白枠 （コンテンツ欄のfigure要素に設定するため、.info に加えて .contents　も用意する）*/
.info, .contents {  
	margin: 15px 0px;
	padding: 2% 8%;
	background-color: #fff;
	border-radius: 15px;
	line-height:1.8em;
}

/* お知らせ欄（info）、コンテンツ欄（contents）のh2 */
.info h2, .contents h2 {
	margin: 15px 0 5px;  /* 上 左右 下 */
	padding:10px 5%;
	color: #06c;/*文字色*/
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
	text-align:center;
	/* 背景色 */
	background-color: #cee;
	/* 上下のライン */
	border:rgb(51, 187, 204) 2px;
	border-style: solid none;
}

/* お知らせ欄（info）、コンテンツ欄（contents）のh3 */
.contents h3, .info h3{
	margin: 20px 0 5px;  /* 上 左右 下 */
	padding:10px 5%;
	color: #06c;/*文字色*/
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
	text-align:center;
	/* 背景色 */
	background-color: #cee;
	}


/* インフォメーション内のリスト */
.info ul, .contents ul {
	padding-left:5%;
}

/* スクロールする白枠・トップページ冒頭お知らせ欄（下段）と冷害のサイトマップ欄で使用 */
.info_scroll { 
	overflow-y: scroll;
	height:200px;
	margin: 15px 0px;
	/*padding: 5px 30px;*/
	padding: 2% 4%;
	background-color: #fff;
	border:2px solid rgb(51, 187, 204);
	border-radius: 15px;
/*	box-shadow: 12px 15px 20px #999; */
}


/* トップページ新着情報欄欄 背景色あり・スクロールあり（dl: 説明リスト） */
.news {
	overflow-y: scroll;
	height:200px;
	margin: 15px 0px;
/*	border-bottom: 3px dotted rgb(51, 187, 204);	/* 下の罫線 */
	border-radius: 10px;
	background-color: #cee;
}

/*　新着情報欄（news）のh3 */
.news h3{
	margin: 10px 0 5px;  /* 上 左右 下 */
	padding: 5px 5%;
	color: #06c;/*文字色*/
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
	text-align:center;
	}

.news dl { 
	margin: 10px;
	padding: 3px auto;
	border-bottom: 3px dashed #fff;	/* 下の罫線 */

}
.news dt {
	margin-left: 15px;
	font-style: normal;
	font-weight:bold;
	line-height: 1.2em;
	color: #039; /* 見出しの色 #06C よりも濃い */
}
.news dd {
	padding:10px;
	line-height: 1.4em;
}

/* 目次 */
.mokuji {
	display:inline-block;
	width:20%;
	vertical-align:top;
	margin:30px 1% 10px 2%;
	font-size:0.9em;
}

/* ワンポイントの黄色い枠 */
.point {
	margin: 15px 0px;
	padding: 2% 8%;
	background-color: #ffc;
	border-radius: 15px;
	line-height:1.8em;
}

.point h3, .point h2 {
	color:#06c;
	}

/* ボックス・薄青 */
.box-blue {
	margin: 15px auto;
	padding: 2% 8%;
	background-color: #cee;
	border-radius: 5px;
	font-size: 1em;
	line-height:1.4em;
	width: 70%;
}
/* ボックス・グレー */
.box-gray {
	margin: 15px auto;
	padding: 2% 8%;
	background-color: #eee;
	border-radius: 5px;
	font-size: 1em;
	line-height:1.4em;
	width: 70%;
}

/* ボックス・黄色 */
.box-yellow {
	margin: 15px auto;
	padding: 2% 8%;
	background-color: #ffc;
	border-radius: 5px;
	font-size: 1em;
	line-height:1.4em;
	width: 70%;
}

.box-blue h3, .box-blue h2, .box-gray h2, .box-gray h3, .box-yellow h2, box-yellow h3{
	background-color:rgba(255,255,255,0);
	color:#06c;
	}

/* 年月日などの選択フォームの書式（文字サイズ大きくする）　*/
select, input {
	font-size:1em;
}
.form {
	margin:20px auto;
	display: block;
	text-align: center;
}

/* 表（葉いもちのページで使っている） */
.hyou {
	margin: 20px auto;
	border-collapse: separate;
	border-spacing: 0px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.hyou th{
	padding:4px;
	text-align: left;
	vertical-align: top;
	color: #444;
	background-color: #cee;
	-left: 3px double #999;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.hyou td{
	padding:4px;
	background-color: #fafafa;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* スクロールする枠（トップページのメニュー） */
.table-scroll {
	background-color: #fff;
	margin-bottom: 30px;
	overflow-y : scroll;
	height:500px;
	border: solid 1px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
/*	box-shadow: 12px 12px 12px #1C7570; */
}

/*-------------画像にマウスオーバーで説明文（１） ---------------*/
.contents figure {
	display:inline-block;     /* img_hover だけでなくこれも必要 */
	vertical-align: top;
}
.img-hover {
	width:			225px;
	margin:			20px 10px;
	padding:10px;
	position:		relative;	/* 相対位置指定 */
	box-shadow: 3px 3px 12px #666;
	background: #fff;
	background-image: radial-gradient(#cff 20%, transparent 0), radial-gradient(#ddf 20%, transparent 0);
	background-position: 0 0, 10px 10px;
	background-size: 5px 5px;
}
.img-hover .mask {
	width:			225px;
	height:			225px;
	overflow:	scroll;
	position:		absolute;	/* 絶対位置指定 */
	top:			10px;
	left:			10px; 
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,26,51,0.8);	/* マスクは半透明 */
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}

/* 上の 「.img_hover .mask」 に統合すると枠がずれるため分けている */
.img-hover .description {  
	font-size:		0.8em;
	text-align: 	left;
	padding:		0.5em;
	color:			#fff;
}

.img-hover:hover .mask {
	opacity: 1;	/* マスクを表示する */
	text-decoration:none;
}
.img-hover a:link, a:visited{
	text-decoration:none;
}
.img-hover figcaption {
	font-size:0.8em;
	text-align:center;
	background-color:#eee;
}


/*スクロールする表（未使用） */
.table-scroll h3{
	color:#fff;
}
.table-scroll th{
	width: 20%;
	border-radius:15px;
	background-color: navy;
	color:#fff;
	valign:middle;
}
.table-scroll td{
	border-color:navy;
	border-bottom:solid 1px;
}


/* スクロールしない表（トップページの、各県へのリンクの箇所） */
.table-noscroll{
	background-color: #fff;
	margin-bottom: 30px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
/*	box-shadow: 12px 12px 12px #999; */
}
.table-noscroll h3{
	color:#fff;
}
.table-noscroll th{
	width: 20%;
	border-radius:15px;
	background-color: navy;
	color:#fff;
	valign:middle;
}

.table-noscroll td{
	border-color:navy;
	border-bottom:solid 1px;
}

/* グラフ用 */
.graph{
	position: relative; /* 相対位置指定 */
	width: 47.5%;
	margin: 1%;
	display: inline-block;  /* </div>のあとで改行しない設定 */
	_display: inline;
}

.graph img{
 width:100%;
 box-shadow: 3px 3px 10px #666;
	display: inline-block;
	_display: inline;
}

/* グラフの項目名の帯（大事)*/
.graph h3{
  	width:		100%;
	font-size:	100%;
	text-align:	center;
	top: 0;
	left: 0;
	margin:		0;
	padding:	1px;
	color:		#fff;
	background:	rgba(0,26,80,0.7); /* 帯の透明度 */
	position:	absolute; /* 絶対位置指定 */
	text-shadow: none;	/* .info h3 の指定を無効化 */
	border:none;	/* .info h3 の指定を無効化 */
}

.graph-1{margin-left: 25%;}/* 日平均気温を中央に配置する */

/* フッター */

div#footer {
bottom: 0px;
width:100%;
padding: 10px;
background-color: rgba(0,0,26,0.25);
color:#fff;
margin-top: 10px;
text-align: center;
}

#footer a:link{
	color: #fff;
	text-decoration:none;
	}
#footer a:visited{
	color: #fff;
	text-decoration:none;
	}
#footer a:hover {
	color: #fff; 
/*	background-color: #069; */
	background-color: rgba(204,255,102,0.5);
	}