/* -------- page -------- */
html {
  height: 100%;
}

body {
  height: 100%;
}

#wrapper {
  margin: 0 auto 0 auto;
  width: 1000px;
  height: 100%;
  min-height: 100%;
  background-color: #888;
}

body > #wrapper {
  height: auto;
}

#base {
  background-color: #fff;
}

/* ---- top bg ---- */
body {
  background-repeat: repeat-x;
  background-image: url(../img/common/bg_09hoka.png);
}

body.top_p {
  background-image: url(../img/common/bg_01top.png);
}

body.raincloud_p {
  background-image: url(../img/common/bg_01rain.png);
}

body.obsd_map_p, body.rainfall_p {
  background-image: url(../img/common/bg_04data.png);
}

body.nougyou_p {
  background-image: url(../img/common/bg_05nougyo.png);
}

body.earthquake_p, body.volcano_p, body.typhoon_p {
  background-image: url(../img/common/bg_07bousai.png);
}

body.link_p {
  background-image: url(../img/common/bg_09hoka.png);
}

/* ---- base ---- */
#base {
  background-repeat: repeat-x;
  background-image: url(../img/common/bg_09hoka.png);
}

body.top_p #base {
  background-image: url(../img/common/bg_01top.png);
}

body.raincloud_p #base {
  background-image: url(../img/common/bg_01rain.png);
}

body.obsd_map_p #base, body.rainfall_p #base {
  background-image: url(../img/common/bg_04data.png);
}

body.nougyou_p #base {
  background-image: url(../img/common/bg_05nougyo.png);
}

body.earthquake_p #base, body.volcano_p #base, body.typhoon_p #base {
  background-image: url(../img/common/bg_07bousai.png);
}

body.link_p #base {
  background-image: url(../img/common/bg_09hoka.png);
}

/* ---- contents base ---- */
.c_base {
  margin-top: 10px;
  padding: 0 6px 6px 6px;
  background-color: #e6e6e6;
  border-top: 5px solid gray;
}
.c_base .title {
  padding: 12px 0 12px 8px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.0;
}

/* -------- header -------- */
h1 {
  margin-left: 5px;
  width: 221px;
  height: 105px;
  background-image: url(../img/header/title.png);
  background-size: 100%;
}

#header .title_wrap {
  width: 231px;
  height: 146px;
  float: left;
  background-color: rgba(0, 0, 0, 0.4);
}
#header .title_bg {
  margin-left: 5px;
  width: 221px;
  height: 141px;
  background-image: url(../img/header/bg.png);
  background-size: 100%;
}
#header .datetime {
  margin: 6px 0 0 7px;
  padding-top: 1px;
  width: 207px;
  height: 19px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
#header .raincloud {
  margin: 19px 0 0 10px;
  padding: 6px 0 0 7px;
  width: 129px;
  height: 117px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.0;
  color: #000;
  border-top: 4px solid #67ddea;
  background-color: #e6e6e6;
}
#header .raincloud .image {
  margin-top: 6px;
  width: 122px;
  height: 92px;
}
#header .forecast_wrap {
  margin: 19px 0 0 10px;
  width: 613px;
  height: 91px;
  float: left;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
}
#header .forecast_container {
  width: 1226px;
  position: relative;
  display: none;
}
#header .forecast {
  width: 613px;
  height: 91px;
  float: left;
}
#header .forecast .items li {
  margin-top: 0;
  width: 247px;
  height: 91px;
  float: left;
  background-image: url(../img/common/white.png);
  background-repeat: no-repeat;
  background-position: right 9px;
  background-size: 1px 73px;
}
#header .forecast .items li .title {
  margin: 6px 0 0 19px;
  font-size: 14px;
  color: #fff;
}
#header .forecast .items li .icon {
  margin: 8px 0 0 12px;
  float: left;
}
#header .forecast .items li .icon img {
  width: 65px;
  height: 49px;
}
#header .forecast .items li .info {
  float: left;
}
#header .forecast .items li .weather {
  margin: 14px 0 0 6px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
#header .forecast .items li .max {
  margin-left: 6px;
  padding-right: 14px;
  height: 25px;
  float: left;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.0;
  color: #f00;
  background-image: url(../img/common/white.png);
  background-repeat: no-repeat;
  background-position: right 5px;
  background-size: 1px 17px;
}
#header .forecast .items li .min {
  padding-left: 14px;
  float: left;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.0;
  color: #02c1ff;
}
#header .forecast .to_week_btn {
  margin-left: 494px;
  padding-top: 16px;
  height: 75px;
  cursor: pointer;
}
#header .forecast .to_week_btn .icon {
  text-align: center;
  cursor: pointer;
}
#header .forecast .to_week_btn .label {
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.0;
  color: #fff;
  text-align: center;
}
#header .week_forecast {
  width: 613px;
  height: 91px;
  float: left;
}
#header .week_forecast .items li {
  width: 80px;
  float: left;
  background-image: url(../img/common/white.png);
  background-repeat: no-repeat;
  background-position: right 10px;
  background-size: 1px 73px;
}
#header .week_forecast .items li .date {
  padding-top: 6px;
  font-size: 14px;
  line-height: 1.0;
  color: #fff;
  text-align: center;
}
#header .week_forecast .items li .icon {
  padding-top: 4px;
  height: 33px;
  text-align: center;
}
#header .week_forecast .items li .icon img {
  width: 40px;
  height: 30px;
}
#header .week_forecast .items li .max {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.0;
  color: #f00;
  text-align: center;
}
#header .week_forecast .items li .min {
  padding-top: 3px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.0;
  color: #02c1ff;
  text-align: center;
}
#header .week_forecast .back_btn {
  margin-left: 560px;
  padding-top: 23px;
  height: 68px;
  cursor: pointer;
}
#header .week_forecast .back_btn .icon {
  text-align: center;
  cursor: pointer;
}
#header .week_forecast .back_btn .label {
  margin-top: 12px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.0;
  color: #fff;
  text-align: center;
}
#header .link {
  padding-top: 14px;
  float: right;
}
#header .link .item {
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  float: left;
}
#header .link .item a {
  padding: 6px 11px;
  background-color: #333;
  text-decoration: none;
}
#header .link .item a:link {
  color: #fff;
}
#header .link .item a:visited {
  color: #fff;
}

/* -------- info_area -------- */
#info_area {
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
#info_area .title {
  margin: 18px 0 0 11px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.0;
  color: #fff;
}
#info_area .info {
  margin: 5px 0 5px 8px;
  padding-bottom: 5px;
  width: 918px;
  min-height: 37px;
  float: left;
  background-color: #fff;
}
#info_area .info li {
  margin: 8px 0 0 3px;
}
#info_area .info .genre {
  margin-right: 17px;
  padding-top: 6px;
  width: 85px;
  height: 21px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.0;
  color: #fff;
  text-align: center;
}
#info_area .info .genre1 {
  color: #000000;
  background-color: #FFFF00;
}
#info_area .info .genre2 {
  background-color: #ff2d2d;
}
#info_area .info .genre3 {
  background-color: #ff2d2d;
}
#info_area .info .genre4 {
  background-color: #c302d7;
}
#info_area .info .text {
  float: left;
}
#info_area .info .text .content {
  font-size: 18px;
}
#info_area .info .text .date {
  margin-left: 7px;
  font-size: 12px;
}

/* -------- main menu -------- */
#main_menu {
  margin-top: 10px;
  padding-left: 6px;
  height: 49px;
  background-color: #333;
}
#main_menu .title {
  margin-top: 1px;
  padding: 13px 10px 0 11px;
  height: 34px;
  float: left;
  display: block;
  position: relative;
}
#main_menu .title a {
  text-decoration: none;
}
#main_menu .title a:link {
  color: #fff;
}
#main_menu .title a:visited {
  color: #fff;
}
#main_menu .title .text {
  padding: 0 1px 6px 1px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border-bottom: 4px solid gray;
}
#main_menu .title .top {
  border-bottom-color: #3cee62;
}
#main_menu .title .raincloud {
  border-bottom-color: #67ddea;
}
#main_menu .title .compare_data {
  border-bottom-color: #d14cf2;
}
#main_menu .title .obs_data {
  border-bottom-color: #f24caa;
}
#main_menu .title .nougyou {
  border-bottom-color: #bbec26;
}
#main_menu .title .local_bousai_info {
  border-bottom-color: #ec9f26;
}
#main_menu .title .bousai_info {
  border-bottom-color: #e07652;
}
#main_menu .title .protection {
  border-bottom-color: #ffff00;
}
#main_menu .title .link {
  border-bottom-color: #999;
}
#main_menu .title .how_to_use {
  border-bottom-color: #999;
}
#main_menu .title_selected, #main_menu .title_opened {
  background-color: #006998 !important;
}
#main_menu .title_selected .text, #main_menu .title_opened .text {
  color: #fff !important;
}
#main_menu .items {
  width: auto;
  left: 20px;
  top: 47px;
  position: absolute;
  border: 1px solid #333;
  display: none;
}
#main_menu .items li {
  padding: 6px 5px 6px 5px;
  min-width: 145px;
  white-space: nowrap;
  font-size: 14px;
  color: #fff;
  background-color: #006998;
  border-bottom: 1px solid #333;
}
#main_menu .items li.over {
  background-color: #ff7c2d;
}
#main_menu .items li:last-child {
  border-bottom: none;
}

body.top_p #main_menu .title.top {
  background-color: rgba(255, 255, 255, 0.3);
}
body.top_p #main_menu .title.top .text {
  color: #000;
}

body.raincloud_p #main_menu .title.raincloud {
  background-color: rgba(255, 255, 255, 0.3);
}
body.raincloud_p #main_menu .title.raincloud .text {
  color: #000;
}

body.compare_data_p #main_menu .title.compare_data {
  background-color: rgba(255, 255, 255, 0.3);
}
body.compare_data_p #main_menu .title.compare_data .text {
  color: #000;
}

body.obsd_map_p #main_menu .title.obs_data, body.obsd_table_p #main_menu .title.obs_data, body.temperature_p #main_menu .title.obs_data, body.rainfall_p #main_menu .title.obs_data, body.snow_p #main_menu .title.obs_data, body.obsd_search_p #main_menu .title.obs_data {
  background-color: rgba(255, 255, 255, 0.3);
}
body.obsd_map_p #main_menu .title.obs_data .text, body.obsd_table_p #main_menu .title.obs_data .text, body.temperature_p #main_menu .title.obs_data .text, body.rainfall_p #main_menu .title.obs_data .text, body.snow_p #main_menu .title.obs_data .text, body.obsd_search_p #main_menu .title.obs_data .text {
  color: #000;
}

body.frost_p #main_menu .title.nougyou {
  background-color: rgba(255, 255, 255, 0.3);
}
body.frost_p #main_menu .title.nougyou .text {
  color: #000;
}

body.landslide_p #main_menu .title.local_bousai_info, body.river_level_p #main_menu .title.local_bousai_info {
  background-color: rgba(255, 255, 255, 0.3);
}
body.landslide_p #main_menu .title.local_bousai_info .text, body.river_level_p #main_menu .title.local_bousai_info .text {
  color: #000;
}

body.earthquake_p #main_menu .title.bousai_info, body.volcano_p #main_menu .title.bousai_info, body.typhoon_p #main_menu .title.bousai_info {
  background-color: rgba(255, 255, 255, 0.3);
}
body.earthquake_p #main_menu .title.bousai_info .text, body.volcano_p #main_menu .title.bousai_info .text, body.typhoon_p #main_menu .title.bousai_info .text {
  color: #000;
}

body.link_p #main_menu .title.link {
  background-color: rgba(255, 255, 255, 0.3);
}
body.link_p #main_menu .title.link .text {
  color: #000;
}

body.how_to_use_p #main_menu .title.how_to_use {
  background-color: rgba(255, 255, 255, 0.3);
}
body.how_to_use_p #main_menu .title.how_to_use .text {
  color: #000;
}

/* -------- breadcrumbs -------- */
#breadcrumbs {
  margin: 13px 0 12px 6px;
}
#breadcrumbs li {
  float: left;
  font-size: 12px;
  line-height: 1.0;
}
#breadcrumbs li a {
  text-decoration: none;
}
#breadcrumbs li a:link {
  color: #006998;
}
#breadcrumbs li a:visited {
  color: #006998;
}
#breadcrumbs li .arrow {
  margin: 0 14px 0 7px;
}
#breadcrumbs li .title {
  margin-right: 10px;
}

/* -------- footer -------- */
#footer {
  padding: 10px 19px 0 19px;
}
#footer .links1 li, #footer .links2 li {
  margin-right: 10px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.0;
  color: #fff;
}
#footer .links1 li a, #footer .links2 li a {
  text-decoration: none;
}
#footer .links1 li a:link, #footer .links2 li a:link {
  color: #fff;
}
#footer .links1 li a:visited, #footer .links2 li a:visited {
  color: #fff;
}
#footer .links1 li {
  margin-bottom: 16px;
}
#footer .notice {
  margin-top: 20px;
  padding-top: 12px;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  color: #fff;
  border-top: 1px solid #fff;
}
#footer .copywrite {
  margin-top: 4px;
  padding-bottom: 15px;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  color: #fff;
}

body.top_p #footer .top {
  color: #000;
}
body.top_p #footer .top a:link {
  color: #000;
}
body.top_p #footer .top a:visited {
  color: #000;
}

body.raincloud_p #footer .raincloud {
  color: #000;
}
body.raincloud_p #footer .raincloud a:link {
  color: #000;
}
body.raincloud_p #footer .raincloud a:visited {
  color: #000;
}

body.compare_data_p #footer .compare_data {
  color: #000;
}
body.compare_data_p #footer .compare_data a:link {
  color: #000;
}
body.compare_data_p #footer .compare_data a:visited {
  color: #000;
}

body.obsd_map_p #footer .obs_data, body.obsd_table_p #footer .obs_data, body.rainfall_p #footer .obs_data, body.temperature_p #footer .obs_data, body.snow_p #footer .obs_data, body.obsd_search_p #footer .obs_data {
  color: #000;
}
body.obsd_map_p #footer .obs_data a:link, body.obsd_table_p #footer .obs_data a:link, body.rainfall_p #footer .obs_data a:link, body.temperature_p #footer .obs_data a:link, body.snow_p #footer .obs_data a:link, body.obsd_search_p #footer .obs_data a:link {
  color: #000;
}
body.obsd_map_p #footer .obs_data a:visited, body.obsd_table_p #footer .obs_data a:visited, body.rainfall_p #footer .obs_data a:visited, body.temperature_p #footer .obs_data a:visited, body.snow_p #footer .obs_data a:visited, body.obsd_search_p #footer .obs_data a:visited {
  color: #000;
}

body.frost_p #footer .nougyou {
  color: #000;
}
body.frost_p #footer .nougyou a:link {
  color: #000;
}
body.frost_p #footer .nougyou a:visited {
  color: #000;
}

body.landslide_p #footer .local_bousai_info, body.river_level_p #footer .local_bousai_info, body.warning_p #footer .local_bousai_info, body.damage_p #footer .local_bousai_info {
  color: #000;
}
body.landslide_p #footer .local_bousai_info a:link, body.river_level_p #footer .local_bousai_info a:link, body.warning_p #footer .local_bousai_info a:link, body.damage_p #footer .local_bousai_info a:link {
  color: #000;
}
body.landslide_p #footer .local_bousai_info a:visited, body.river_level_p #footer .local_bousai_info a:visited, body.warning_p #footer .local_bousai_info a:visited, body.damage_p #footer .local_bousai_info a:visited {
  color: #000;
}

body.earthquake_p #footer .bousai_info, body.volcano_p #footer .bousai_info, body.typhoon_p #footer .bousai_info {
  color: #000;
}
body.earthquake_p #footer .bousai_info a:link, body.volcano_p #footer .bousai_info a:link, body.typhoon_p #footer .bousai_info a:link {
  color: #000;
}
body.earthquake_p #footer .bousai_info a:visited, body.volcano_p #footer .bousai_info a:visited, body.typhoon_p #footer .bousai_info a:visited {
  color: #000;
}

body.protection_p #footer .protection {
  color: #000;
}
body.protection_p #footer .protection a:link {
  color: #000;
}
body.protection_p #footer .protection a:visited {
  color: #000;
}

body.link_p #footer .link {
  color: #000;
}
body.link_p #footer .link a:link {
  color: #000;
}
body.link_p #footer .link a:visited {
  color: #000;
}

body.how_to_use_p #footer .how_to_use {
  color: #000;
}
body.how_to_use_p #footer .how_to_use a:link {
  color: #000;
}
body.how_to_use_p #footer .how_to_use a:visited {
  color: #000;
}

body.terms_of_use_p #footer .terms_of_use {
  color: #000;
}
body.terms_of_use_p #footer .terms_of_use a:link {
  color: #000;
}
body.terms_of_use_p #footer .terms_of_use a:visited {
  color: #000;
}

body.inquiry_p #footer .inquiry {
  color: #000;
}
body.inquiry_p #footer .inquiry a:link {
  color: #000;
}
body.inquiry_p #footer .inquiry a:visited {
  color: #000;
}

body.privacy_p #footer .privacy {
  color: #000;
}
body.privacy_p #footer .privacy a:link {
  color: #000;
}
body.privacy_p #footer .privacy a:visited {
  color: #000;
}