﻿/*===============================================
site.css
v1.0.0
Last Updated: 2016-09-27
Author: SAY Computer Inc.

サイト基本設定
------------------------------------------------
【履歴】
v1.0.0 新規作成
------------------------------------------------
【メモ】
基本色：#00a5d1
===============================================*/


/*--------------*/
/* 基本設定
/*--------------*/
html
{
	display: block;
  	zoom: 1; /* IEのみ */
}

body
{
	color: #333333;
	background: #fff;
    font-size: 15px;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    display: block;
  	margin: 0;
  	zoom: 1; /* IEのみ */
  	border-top: 5px solid #00a5d1;
}

head, meta, link, style, script
{
  display: none;
}

div
{
  display: block;
}

h1
{
  display: block;
  margin: 0.67em 0;
  font-size: 2em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h2,
:match(article,aside,nav,section) h1
{
  display: block;
  margin: 0.83em 0;
  font-size: 1.5em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h3,
:match(article,aside,nav,section) :match(article,aside,nav,section) h1
{
  display: block;
  margin: 1em 0;
  font-size: 1.17em;
  font-weight: bold;
  page-break-after: avoid; /* IEのみ */
}

h3
{
	border-bottom: 1px dotted;
	padding: 5px;
	font-weight: normal;
}

p
{
	display: block;
	margin: 0;
	line-height: 1.2;
}

a
{
	color: #3172d1;
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}

ul,ol
{
	display: block;
	margin: 1em 0;
	padding-start: 40px;
	list-style-type: disc;
	list-style-position: outside;
}

li
{
	display: list-item;
}

dl
{
	display:block;
	margin: 1em 0;
}
dt
{
	display: block;
}
dd
{
	display:block;
	margin-left: 40px;
}

img
{
	zoom: 1; /* IEのみ */
}

strong
{
	font-weight: bold;
}

em
{
	font-weight: italic;
}

table
{
	border-collapse: collapse;
	border: solid 2px;
}

th,td
{
	border: solid 1px;
	padding: 0.5em;
}

td
{
	font-size: small;
	vertical-align: middle;
}

/*--------------*/
/* 文字装飾
/*--------------*/
.bold
{
	font-weight: bold;
}

.clear
{
	clear: both;
}

/* 画像の上に文字を乗せる設定 */
.onText
{
	position: relative;
}

.onText-text
{
	position: absolute;
}

.onText .allMap /* 全域地図(Top画面)用 文字設定 */
{
	bottom: 10px;
	right: 5px;
	font-size: 12px;
}

.text-vertical
{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
}

/* ボタン */
.button
{
	display: inline-block;
	border: 2px solid;
	padding: 0.5em 1em;
	border-color: #00a5d1;
	background-color: #fff;
	font-weight: bold;
	color: #073642;
	text-align: center;
	cursor: pointer;
}
.button:hover
{
	background-color: #ccedf6;
	text-decoration: none;
}
.button i.fa
{
	color: #66c9e3;
}

.btn-radius
{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.btn-radiusXrange
{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
    width: 200px;
}

.btn-XrangeSelected
{
	background-color: #ccedf6;
	pointer-events: none;
}

.btn-graph
{	
	height: 25px;
}
.btn-graph a
{
	font-size: small;
}

.btn-grad
{
	color: #fff;
	background: -moz-linear-gradient(top, #00a5d1, #99dbed);
    background: -webkit-gradient(linear, left top, left bottom, from(#00a5d1), to(#99dbed));
    background: -ms-linear-gradient(top, #00a5d1, #99dbed);
}
.btn-grad i.fa
{
	color: #fff;
}
.btn-grad:hover
{
	background: #ccedf6;
}
.btn-grad a
{
	color: #fff;
}

/* グラフ名称 */
h2.graphTitle
{
	font-weight: normal;
	font-size: 1.1em;
	margin: 0.5em 0;
}
h2.graphTitle:before
{
	content: "■";
	font-size: 1.2em;
	color: #00a5d1;
}

/*--------------*/
/* コンテナ(大枠)
/*--------------*/

#border
{
	border-top: solid 5px;
}

#container
{
	background-color: #fff;
	display: table;
	table-layout: fixed;
	margin: 0 auto;
	height: 100%;
}

#menu
{
	display: table-cell;
	width: 260px;
}

#breadcrumbsArea
{
	width: 100%;
}

#contents
{
	display:table-cell;
	width:100%;
	padding:0;
	vertical-align:top;
}
#contents.fillColor /* コンテンツ部 背景全面塗りつぶし */
{
	background-color: #e7edf7;
}

.contentsfixed
{
    display: table-cell;
	width: 100%;
	position: fixed;
	margin-left: 250px;
}

#contents .staticPage /* 静的ページ（枠） */
{
	margin-left: auto;
	margin-right: auto;
	padding: 1.5em;
	background-color: #fff;
	box-shadow: 5px 5px 10px #ccc;
	-moz-box-shadow: 5px 5px 10px #ccc;
	-o-box-shadow: 5px 5px 10px #ccc;
	-ms-box-shadow: 5px 5px 10px #ccc;
}

.contentsfixed .staticPage /* 静的ページ（枠） */
{
	width: 90%;
	margin-top: 1.5em;
	margin-left: auto;
	margin-right: auto;
	padding: 2em;
	box-shadow: 5px 5px 10px #ccc;
	-moz-box-shadow: 5px 5px 10px #ccc;
	-o-box-shadow: 5px 5px 10px #ccc;
	-ms-box-shadow: 5px 5px 10px #ccc;
}

/*--------------*/
/* レイアウト
/*--------------*/
/* イメージボックスレイアウト */
ul.imgBox
{
	list-style-type: none;
}
ul.imgBox li
{
	position: relative;
	display: inline-block;
	width: auto;
}
ul.imgBox div.img
{
	overflow: hidden;
	width: 100%;
	height: 180px;
}
ul.imgBox li img
{
	width: 100%;
}
ul.imgBox dl
{
	position: absolute;
	background: rgba(0,0,0,0.5);
	color: #fff;
	bottom: -1em;
	padding: 0.5em;
}
ul.imgBox dt
{
	margin: 0.5em 0;
	font-weight: bold;
	text-decoration: underline;
}
ul.imgBox dd
{
	margin-left: 0;
	font-size: 0.9em;
}
ul.imgBox p.chartname	/* 図表名称 */
{
	font-size: 0.7em;
	text-align: center;
}

/*--------------*/
/* ヘッダー部
/*--------------*/
header
{
	padding-top: 10px;
}


.logoarea
{
	text-align: center;
	padding-bottom: 10px;
	box-shadow: 0 5px 15px -5px #555;
	-moz-box-shadow: 0 5px 15px -5px #555;
	-o-box-shadow: 0 5px 15px -5px #555;
	-ms-box-shadow: 0 5px 15px -5px #555;
}
.logoarea h1
{
	margin: 0em;
}
.logoarea .wrap
{
	margin-top: 0.5em;
	width: 250px;
	text-align: center;
}

.logoarea-title
{
	display: inline-block;
	font-size: 18px;
	line-height: 1.2;
}
.logoarea-title .row-01
{
	color:black;
}
.logoarea-title .row-02
{
	letter-spacing: 0.15em;
	color:black;
}

.logoarea-logo
{
	margin-top: 0;
}

/*--------------*/
/* フッター部
/*--------------*/
footer
{
	text-align: right;
	border-top: 2px solid #00a5d1;
}
footer #address
{
	padding: 15px 25px;
	margin-bottom: 0px;
	text-align: right;
	font-size: small;
	background-color: #d6ebd6;
}

footer .bold
{
	font-size: 15px;
}

footer #credit
{
	margin-top: 5px;
	font-size: small;
	text-align: center;
	padding: 10px;
}

/*--------------*/
/* メニュー部
/*--------------*/
.boxMenu li
{
	display: block;
	list-style: none;
	width: 100%;
	line-height: 45px;
	border-bottom: 1px solid #b3b3b3;
	cursor: pointer;
}
.boxMenu li a
{
	display: block;
	width: 100%;
	margin-left: 0.5em;
	color: #333;
}
.boxMenu li:hover
{
	background-color: #fdf2d8;
}
.boxMenu li a:hover
{
	font-weight: bold;
	text-decoration: none;
	background-color: #fdf2d8;
}
.boxMenu a.parent-menu:hover
{
	font-weight: normal;
}
.boxMenu li.multi_line /* 複数行メニュー名 */
{
	line-height: 1.5;
}
.boxMenu li.multi_line a.parent-menu
{
	/* 2行目以降字下げ */
	margin-left: 2em;
	text-indent: -1.7em;

	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.boxMenu li.multi_line .fa /* fontawesome */
{
	text-indent: 0;
}
.boxMenu .fa
{
	color: #808080;
}

/* 現在位置 */
.boxMenu .current
{
	color: #00a5d1;
}
.boxMenu .current .fa
{
	color: #00a5d1;
}

/* 子メニュー */
.acdn_menu-child
{
	display: none;
	padding: 0.5em 1em;
	margin: 0;
	background-color: #fdf2d8;
}
.open /* 初期表示時、開いた状態にしておく場合 */
{
	display: block;
}
.acdn_menu-child li
{
	border: none;
	line-height: 1.8;
	margin-left: 0.7em;
	text-indent: -0.7em;
}
.acdn_menu-child li:hover
{
	background-color: #fdf2d8;
}
.acdn_menu-child li a
{
	font-size: 0.85em;
	color: #3172d1;
}
.acdn_menu-child a:before
{
	content: "＞";
	margin-right: 0.65em;
}

.acdn_menu-child .fa
{
	color: #3172d1;
}
.acdn_menu-child .current .fa
{
	color: #00a5d1;
}

.acdn_menu-child  .ac_m-area
{
	color: #555;
}
a.ac_m-area:before
{
	content: none;
}
a.ac_m-area:hover
{
	font-weight: bold;
}

/* 現在のページ */
.currentPage
{
	color: #333!important;
}

#menu_list2
{
	margin: 2em 0 0 1em;
	line-height: 1.4;
	width: 70%;
}

#menu_list2 dd
{
	margin: 0 0 1em 0;
	font-size:12px;
}

#menu_list2 li
{
	list-style-type: none;
}

#menu_list2 table tr td
{
	font-size: 0.7em;
	width: 200px;
}

#menu_list2 table thead
{
	background-color: #D3D3D3;
}

#menu_list2 table
{
	border: 1px;
}

/* 現在のページ */
a.currentPage
{
	font-weight: bold;
}

/*------------------*/
/* パンくずリスト
/*------------------*/
ul.breadcrumbs
{
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	width: 100%;
	font-size: 0.7em;
}
ul.breadcrumbs li
{
	float: left;
	margin: 0 0.5em 0 1em
}
ul.breadcrumbs a
{
	float: left;
	text-decoration: none;
	position: relative;
}
ul.breadcrumbs a:hover
{
	font-weight: bold;
}
ul.breadcrumbs a::after
{
	content: ">";
	text-decoration: none;
	margin-left: 1em;
	color: #ccc;
}
ul.breadcrumbs a:hover::after
{
	text-decoration: none;
}
ul.breadcrumbs .currentDir,
ul.breadcrumbs .currentDir:hover,
ul.breadcrumbs .currentPage,
ul.breadcrumbs .currentPage:hover
{
	color: #333;
	font-weight: bold;
	background: none;
	text-decoration: none;
}
ul.breadcrumbs .currentPage::after
{
	content: none;
}

/*--------------*/
/* コンテンツ部
/*--------------*/

/* テロップ */
.telop
{
	width: 100%;
	height: 30px;
	margin: 0;
	color: #333;
	background-color: #eee;
}
.telop .wrap
{
	width:100%;
	vertical-align: middle;
	height: 30px;
	padding-top: 7px;
}
.telop p
{
	width:100%;
	margin: 0;
}

/* コンテンツタイトル */
#contents-name
{
	width:100%;
	margin-top: 0.5em;
	padding: 5px 0px 5px 0px;
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-color: #00a5d1;
	background-color: #fff;
}
#contents-name p
{
	display: inline-block;
	margin-left: 0.5em;
}
#contents-name .title
{
	font-size: large;
}

/* コンテンツタイトル部の背景 */
.contents-name-bg
{
	background-color: #fff;
	padding-top: 0.1em;
	padding-bottom: 0.65em;
}

/* コンテンツエリア */
#contentsArea
{
	width:100%;
	margin-top: 10px;
	background-color: #e7edf7;
}
#contentsArea.white
{
	background-color: #fff;
}
#contentsArea .wrap
{
	padding: 1em;
}
#contentsArea .map
{
	border: solid 1px;
	padding: 5px;
}
#contentsArea .legend
{
	margin-top: 5px;
	border: solid 1px;
}

/* 解説 */
.explanation
{
	width: 98%;
	margin-top: 50px;
	margin-bottom: 10px;
	margin-left: 0.5em;
	border: solid 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border-color: #999;
}
.explanation .title
{
	border-bottom: solid 1px;
	border-color: #999;
	background: -moz-linear-gradient(bottom, #cfcfcf, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf));
    background: -ms-linear-gradient(bottom, #cfcfcf, #fff);
}
.explanation h2
{
	font-size: large;
	font-weight: normal;
	padding: 10px;
}
.explanation p
{
	font-size: small;
	line-height: 1.5;
	padding: 10px;
}
.explanation .comment
{
	font-size: small;
	line-height: 1.5;
	padding: 10px;
	word-wrap: break-word;
}
.explanation .title .fa
{
	color: #00a5d1;
}

/* データ一覧 */
.dtbl
{
	border-color: #808080;
	margin-bottom: 10px;
}

.dtbl:empty
{
	display:none;
}
.dtbl .dtbl-header span.unit
{
	font-weight: normal;
	font-size: small;
}
.dtbl td.level,td.dataType
{
	text-align: center;
}
/* 測定項目別 */
.dtbl td.low_dose,
td.high_dose,
td.rain_snow,
td.snow_depth,
td.wind_s,
td.temp,
td.valid_dose,
td.sea_water,
td.stack
{
	text-align: right;
}
.dtbl td.rain,
td.wind_d
{
	text-align: center;
}
.dtbl th,td
{
	border-color: #808080;
}
.dtbl th
{
	color: #fff;
	background-color: #92befd;
	font-weight: normal;
}
.dtbl tr:nth-child(even)
{
	background-color: #f2f2f2;
}

/* 測定時刻 */
#currentTime:before
{
	content: "■";
	color: #00a5d1;
}
