@charset "utf-8"

/* 全ページの基本設定 */
body {
  margin: 0;
  padding: 0;
  font-size: 5em;
  background: #ffffff;
}

nav, jeader, footer {
  display: block;
}


#page {
  margin: 0 auto;
  width: 100%;
}


#main {
  margin: 0 auto;
  /* width: 960px; */
  width: 1080px;
  text-align: center; 
}

#footer {
  margin: 0 auto;
  /* width: 960px; */
  width: 1080px;
  text-align: center; 
}

/* メニュー設定 */
#entiremenu {
  list-style-type: none;
  /* width:      960px; *//* メニュー全体の幅 */
  width:      860px; /* メニュー全体の幅 */
  margin:     0 auto;
  padding:    0;
}

.entiremenulist {
  position: relative;
/*  width:    16.66%;
  width:    20.0%; */
  width:    25.0%;
  float:    left;
  margin:   0;
  padding:  0px;
  text-align: center;
  vertical-align: middle;
}

#newmenu {
  list-style-type: none;
  width:      1080px; /* メニュー全体の幅 */
  /* width:      960px; *//* メニュー全体の幅 */
  /* width:      720px; *//* メニュー全体の幅 */
  margin:     0 auto;
  padding:    0;
}

/*** 親要素の設定 ***/
.menulist {
  position: relative;
  width:    16.66%; 
/*  width:    20.0%;
  width:    25.0%; */
  float:    left;
  margin:   0;
  padding:  0px;
  text-align: center;
  vertical-align: middle;
}

.menulist_past {
  position: relative;
  width:    16.66%; 
/*  width:    20.0%;
  width:    25.0%; */
  float:    left; 
  margin:   0;
  padding:  0px;
  text-align: center;
  vertical-align: middle;
}

.menulist_nochild { /* 子をもたない親要素 */
  position: relative;
/*  width:    16.66%; 
  width:    20.0%; */
  width:    25.0%;
  float:    left;
  margin:   0;
  padding:  0px;
  text-align: center;
  vertical-align: middle;
}

/* 親要素のカラー設定 */
.menuentire {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #FF0000; 
}
.menutop {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #0000ff;
}

.menurecent {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ff0000;
}

.menupast {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ff8c00;
}

.menudetail {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ee82ee;
}

.menuabout {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #32cd32;
}

.menutopics {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #7fffd4;
}

.menulink {
  display:  block;
  margin:  0;
  padding: 10px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  1.1em;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ba55d3;
}

/* 子要素のカラー設定 */
.pastchild {
  display:  block;
  margin:  0;
  padding: 5px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  0.8em;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ff8c00;
  text-align: center;
}

.detailchild {
  display:  block;
  margin:  0;
  padding: 5px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  0.8em;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ee82ee;
}

.topicschild {
  display:  block;
  margin:  0;
  padding: 5px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  0.8em;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #7fffd4;
}

.linkchild {
  display:  block;
  margin:  0;
  padding: 5px 0px;
  background: #ffffff;
  color:      #000000;
  font-size:  0.8em;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  border-left-style: solid;
  border-color: #ba55d3;
}



/* 子要素の設定(過去のデータ) */
.menuchild_past {
  overflow: hidden;
  /*width: 100%;*/
  background: #ffffff;
  width: 400px;
  height: 0;
  z-index: 500;
}

/* 子要素の設定 */
.menuchild {
  overflow: hidden;
  background: #ffffff;
  width: 100%;
  height: 0;
  z-index: 500;
}

/* 孫要素の設定 */
.menugrand {
  overflow: hidden;
  background: #ffffff;
  width: 100%;
  height: 0;
  z-index: 500;
}


/* マウスオーバー時の色を指定 */
.menulist:hover > span { background: #fffacd}
.menulist_past:hover > span { background: #fffacd}
.menulist:hover > ul > .menuchild:hover > span { background: #fffacd}
.menulist:hover > ul > .menuchild:hover > ul > .menugrand:hover > span { background: #fffacd}

.entiremenulist:hover > span { background: #fffacd}
.entiremenulist_past:hover > span { background: #fffacd}
.entiremenulist:hover > ul > .menuchild:hover > span { background: #fffacd}
.entiremenulist:hover > ul > .menuchild:hover > ul > .menugrand:hover > span { background: #fffacd}

/* マウスオーバー時にリストを表示に重ねる*/
.menulist:hover > ul {
  list-style: none;
  position: absolute;
  z-index: 500;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.menulist_past:hover > ul {
  list-style: none;
  position: absolute;
  z-index: 500;
  top: 100%;
  left: 0;
  width: 490px;
  height: 200px;
  margin: 0;
  padding: 0;
}

/* マウスオーバーで子要素を表示(過去のデータ) */
.menulist_past:hover > ul > .menuchild_past{
  overflow: visible;
  width: 400px;
  height: 200px;
}

/* マウスオーバーで子要素を表示 */
.menulist:hover > ul > .menuchild{
  overflow: visible;
  width: 100%;
  height: 23px;
}

/* マウスオーバー時に孫要素を表示に重ねる */
.menuchild:hover > ul {
  list-style: none;
  position: absolute;
  z-index: 500;
  top: 23px;
  left: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* マウスオーバーで孫要素を表示 */
.menuchild:hover > ul > .menugrand{
  overflow: visible;
  top: 0;
  width: 100%;
  height: 23px;
}

.entiremenulist:hover > ul {
  list-style: none;
  position: absolute;
  z-index: 500;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* マウスオーバーで子要素を表示 */
.entiremenulist:hover > ul > .menuchild{
  overflow: visible;
  width: 100%;
  height: 23px;
}

#menu    {
    margin:     0 auto;
    padding:    0px;
    position:   relative;
    text-align: center;
}
#menu1    {
    margin:     0 auto;
    width:        720px;      /*　メニュー全体の幅　*/
    background:    #ffffff;   /*　背景色　*/
    text-align:    center;    /*　中央寄せ　*/
    border: 0;
    border-collapse: collapse; /* border間隔 */
}


#li1    {
    position:    absolute;    /* 元の表示に重ねる */
    width:        390px;        /*　リストの幅　*/
    background:    #ffcc99;   /*　背景色　*/
    display:    none;
    top:        1;            /*　表示位置　*/
    left:        40%;
    z-index:    500;          /* 画像や地図の上に表示する */
    border-collapse: collapse;
    visibility: hidden;
}

#li2    {
    position:    absolute;    /* 元の表示に重ねる */
    width:        125px;        /*　リストの幅　*/
    background:    #ffffff;   /*　背景色　*/
    display:    none;
    top:        1;            /*　表示位置　*/
    left:        50%;
    z-index:    500;          /* 画像や地図の上に表示する */
    border-collapse: collapse;
    visibility: hidden;
}

#li3    {
    position:    absolute;    /* 元の表示に重ねる */
    width:        125px;        /*　リストの幅　*/
    background:    #ffffff;   /*　背景色　*/
    display:    none;
    top:        1;            /*　表示位置　*/
    left:        70%;
    z-index:    500;          /* 画像や地図の上に表示する */
    border-collapse: collapse;
    visibility: hidden;
}

#li4    {
    position:    absolute;    /* 元の表示に重ねる */
    width:        125px;        /*　リストの幅　*/
    background:    #ffffff;   /*　背景色　*/
    display:    none;
    top:        1;            /*　表示位置　*/
    left:        80%;
    z-index:    500;          /* 画像や地図の上に表示する */
    border-collapse: collapse;
    visibility: hidden;
}

#movie    {
    position:    absolute;    /* 元の表示に重ねる */
    width:        640px;        /*　リストの幅　*/
    background:    #ffffff;   /*　背景色　*/
    display:    none;
    top:        20%;            /*　表示位置　*/
    left:        40%;
    z-index:    500;          /* 画像や地図の上に表示する */
    border-collapse: collapse;
    visibility: hidden;
}


#ymfont {
  font-size: 0.3em; /* サブメニュー内年月のフォントサイズ */
}


#otherview {
    margin-right: 0%;
    text-align: right;
}

#locationview {
    margin-left: 0%;
    text-align: left;
}


/* 画像の枠を表示しない */
img {
  border: 0;
}


/* 画像切り替えページ(直近1時間/過去画像)のボタン */
.control_button {
  width: 100px;
  height: 40px;
  font-size: 1em;
}

/* タイトル画像表示部分(各ページ共通) */
#titletable {
  margin: 0 auto;
  border: 0;
  width: 100%;
}

#titletable td {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#titletable img {
  width: 860px;
}



/* トップページ下部 */
#foottable {
  margin: 0 auto;
  border: 0;
  width: 100%;
}


/* QL画像/カラーバーを並べて表示(一般向け) */
#qltable {
  /*width: 900px;*/
  border: 0;
  white-space: nowrap;
  table-layout: fixed;
  text-align:center;
  margin:0 auto;
}

#qltable_hover {
  width: 545px;  /* QL画像の幅:490px */
}

#qltable_vcolor {
  width: 90px;   /* カラーバー画像の幅:110px */
}

.front { /* 背景にQL画像を重ねる */
  position: relative;
  right: -55px;
}

/* 縦断面 */
.front_ver_ZE { 
  position: relative;
  right: -90px;
}
/*********************************************/

/* QL画像/カラーバーを並べて表示(ドップラー表示) */
/*
#qltable_hover_doppler {
  max-width: 360px;  /* QL画像の幅:490px 
}
*/

#qltable tbody tr:nth-child(1) #qltable_hover_doppler {
  max-width: 360px;  /* QL画像の幅:490px */
}

#qltable tbody tr:nth-child(2) #qltable_hover_doppler {
  max-width: 70px;  /* QL画像の幅:490px */
}

#qltable_vcolor_doppler {
  max-width: 70px;   /* カラーバー画像の幅:110px */
}

.front_doppler { /* 背景にQL画像を重ねる */
  position: relative;
  right: 360px;
  width: 355px;
}

/* 縦断面を試験的に追加(ドップラー表示のみ) */
.front_ver_doppler_ZE {
  position: relative;
  right: 0px;
  width: 355px;
}

.front_ver_doppler_VD {
  position: relative;
  right: -80px;
  width: 355px;
}

/*月別サマリ*/
#ZE_info #image01 {
  /*background-color: #22e;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#ZE_info #image02 {
  /*background-color: #22e;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#ZE_info #image03 {
  /*background-color: #22e;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#ZE_info #image04 {
  /*background-color: #22e;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#ZE_info #image05 {
  /*background-color: #22e;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*********************************************/

/* GoogleMapsを表示(一般向け) */
#qltable_googlemaps {
  width: 600px;  /* Google Mapsの幅:500px */
}

/* 地図を表示(一般向け) */
#qltable_maps {
  width: 600px;  /* 地図の幅:500px */
}

/* 地図の表示サイズ/重なり制御 */
#map_canvas_ZE {
  width: 500px;
  height: 500px;
  z-index: 100;
}
/*******************************/

/* GoogleMapsを表示(ドップラー表示) */
/*
#qltable_googlemaps_doppler {
  width: 360px;  
}
*/

#qltable tbody tr:nth-child(1) #qltable_googlemaps_doppler {
  max-width: 360px;  /* Google Mapsの幅:500px */
}

#qltable tbody tr:nth-child(1) #qltable_maps_doppler {
  max-width: 360px;  /* 地図の幅:500px */
}

#qltable tbody tr:nth-child(4) #qltable_hover_doppler {
  max-width: 70px;  /* 地図の幅:500px */
}

/* 地図の表示サイズ/重なり制御 */
#map_canvas_ZE_doppler {
  width: 360px;
  height: 360px;
  z-index: 100;
}
#map_canvas_VD_doppler {
  width: 360px;
  height: 360px;
  z-index: 100;
}
/*******************************/

/* 降雨状況サマリの凡例 */
#summary_legend {
  width: 300px;
}

/* datepickerの文字サイズ */
#datepicker {
  font-size: 0.6em;
}

/* datepickerのプルダウンサイズ */
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui.datepicker-year {
  width: auto;
}


/* 画像一覧表示ページ */
#viewtable {
  border-width: 1px;
  border-style: solid;
  width: 720px;
  margin-left: auto;
  margin-right: auto;
}
#viewtable td.col1{
  border-width:1px;
  border-style: solid;
  width:60px;
}
#viewtable td{
  border-width:1px;
  border-style: solid;
  width:110px;
}
#viewtable img{
  width: 135px;
}

/*******************************/

/* 月の降雨サマリ */
.yyyymm {
  font-size: 2.0em;
  font-weight: bold;
}


/*** トピックスの各ページ ***/
/* トピックスの記事全体 */
.article {
  margin: 0 auto;
  width: 900px;   /* メニューと同じ幅 */
  text-align: left; /* 文字は左寄せ */
} 

.article p {
  line-height: 1.2em;
  font-size: 0.9em;
  text-indent: 0em; /* 字下げの設定 */
}

.caption {
  font-size: 0.8em;
}

.article_table {
  text-align: center;
  border: 1px #808080 solid;
  border-collapse: collapse;
}

.event_article {
  margin: 0 auto;
  width: 900px;   /* メニューと同じ幅 */
  text-align: left; /* 文字は左寄せ */
}

.event_title {
  text-align: center; /* 文字は中央 */
}

.event_caption {
  font-size: 0.8em;
  text-align: left;
  padding: 10px;
  margin-bottom: 10px;
  border-style: none;
  width: 450px;
}

/*** jQuery部の設定 ***/
.ui-widget {
  font-family: MS;
}

.ui-widget-content {
  background: #ffffff;

}

/* メニュータブの設定 */
.ui-tabs .ui-tabs-nav a {
  padding: .2em 1em;
}
.ui-tabs .ui-tabs-nav {
  padding: 0 .2em 0;
}
.ui-tabs .ui-tabs-nav li a {
  padding: .2em 1em;
}
.ui-tabs .ui-tabs-nav li {
  margin: 0 .2em 0 0;
}


/*** リンクページ ***/
#location {
  font-weight: bold;
}

.link_main {
  font-size: 1.0em;
  width: 50%;
  margin-left: 25%;
  margin-right: auto;
}

#link_title {
  font-weight: bold;
  display: block;
  text-align: left;
}

.link_main li{
  text-indent: -1.0em;
  margin-left: 3.0em;
  list-style-position: inside;
  text-align: left;
}


/*** お知らせページ ***/
.announce {
  font-size: 0.8em;
  text-align: left;
}