/*--------------------------------------------------------------
  Weather map (日本地図UI)
----------------------------------------------------------------*/
#weather-pref-frame {
  display: block;
  position: relative;
  padding-bottom: 100px;
  margin: 0;
  background: #e7f9ff;
  background: linear-gradient(to bottom, rgb(158, 184, 255), #ffffff);
  padding-top: 20px;
  padding-left: 5px;
  padding-right: 10px;
}
#weather-pref-frame .pref a img {
  border-radius: 5px;
}

#jp_map {
  display: block;
  position: relative;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  max-height: 600px;
  max-width: 1200px;
  list-style-type: none;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#jp_map::before {
  content: "";
  display: block;
  padding: 80% 0 0;
}

#jp_map ul,
#jp_map li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

#jp_map a {
  display: block;
  font-weight: normal;
  text-decoration: none;
  box-sizing: border-box;
  color: #3a3835;
  border: solid #fff 2px;
  float: none;
  font-size: 14px;
  line-height: 1;
  padding: 6px 0;
  text-align: center;
  position: absolute;
  margin: 0;
  text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 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;
}

#jp_map a:hover {
  opacity: 0.85;
  text-decoration: none;
}

#jp_map a span {
  display: block;
  margin: 0 auto;
  padding: 0;
  line-height: 1.1em;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#jp_map .hokkaido a,
#jp_map .tohoku a { background-color: #759ef4; }
#jp_map .kanto a { background-color: #7ecfea; }
#jp_map .chubu a { background-color: #7cdc92; }
#jp_map .tokai a { background-color: #7cdc92; }
#jp_map .hokuriku a { background-color: #c7b2de; }
#jp_map .kansai a { background-color: #ffe966; }
#jp_map .chugoku a { background-color: #ffcc66; }
#jp_map .shikoku a { background-color: #ffbb9c; }
#jp_map .kyushu a,
#jp_map .okinawa a { background-color: #ffbdbd; }

#jp_map li a {
  height: 12%;
  width: 7%;
}

#jp_map li.hokkaido a { top: 0; left: 81%; height: 20%; width: 21%; }
#jp_map li.hokkaido a span { right: 7.5%; }
#jp_map li.hokkaido a::before,
#jp_map li.hokkaido a::after {
  display: block;
  z-index: 1;
  content: "";
  background-color: inherit;
  width: 10%;
  height: 40%;
  right: 100%;
  bottom: 0;
  position: absolute;
}
#jp_map li.hokkaido a::after {
  content: "";
  border: inherit inherit inherit;
  z-index: -1;
}

#jp_map li.aomori a { top: 21%; left: 79%; height: 8%; width: 19%; }
#jp_map li.iwate a { top: 29%; left: 89.5%; height: 8%; width: 10.5%; }
#jp_map li.akita a { top: 29%; left: 79%; height: 8%; width: 10.5%; }
#jp_map li.miyagi a { top: 37%; left: 89.5%; height: 8%; width: 10.5%; }
#jp_map li.yamagata a { top: 37%; left: 79%; height: 8%; width: 10.5%; }
#jp_map li.fukushima a { top: 45%; left: 93%; height: 18%; }
#jp_map li.ibaraki a { top: 63%; left: 93%; height: 18%; }
#jp_map li.tochigi a { top: 57%; left: 86%; }
#jp_map li.gunma a { top: 57%; left: 79%; }
#jp_map li.saitama a { top: 69%; left: 86%; }
#jp_map li.chiba a { top: 81%; left: 93%; height: 17%; }
#jp_map li.tokyo a { top: 81%; left: 86%; }
#jp_map li.kanagawa a { top: 81%; left: 79%; }
#jp_map li.nigata a { top: 45%; left: 79%; width: 14%; }
#jp_map li.toyama a { top: 45%; left: 72%; }
#jp_map li.ishikawa a { top: 45%; left: 65%; height: 17%; }
#jp_map li.fukui a { top: 50%; left: 58%; }
#jp_map li.yamanashi a { top: 69%; left: 79%; }
#jp_map li.nagano a { top: 57%; left: 72%; height: 24%; }
#jp_map li.gifu a { top: 62%; left: 65%; height: 19%; }
#jp_map li.shizuoka a { top: 81%; left: 72%; }
#jp_map li.aichi a { top: 81%; left: 65%; }
#jp_map li.mie a { top: 86%; left: 58%; }
#jp_map li.shiga a { top: 62%; left: 58%; }
#jp_map li.kyoto a { top: 56%; left: 51%; height: 18%; }
#jp_map li.osaka a { top: 74%; left: 51%; }
#jp_map li.hyogo a { top: 53%; left: 44%; height: 24%; }
#jp_map li.nara a { top: 74%; left: 58%; }
#jp_map li.wakayama a { top: 86%; left: 51%; }
#jp_map li.tottori a { top: 53%; left: 37%; }
#jp_map li.shimane a { top: 53%; left: 30%; }
#jp_map li.okayama a { top: 65%; left: 37%; }
#jp_map li.hiroshima a { top: 65%; left: 30%; }
#jp_map li.yamaguchi a { top: 59%; left: 23%; }
#jp_map li.tokushima a { top: 89.5%; left: 36.5%; height: 8%; width: 10.5%; }
#jp_map li.kagawa a { top: 81.5%; left: 36.5%; height: 8%; width: 10.5%; }
#jp_map li.ehime a { top: 81.5%; left: 26%; height: 8%; width: 10.5%; }
#jp_map li.kochi a { top: 89.5%; left: 26%; height: 8%; width: 10.5%; }
#jp_map li.fukuoka a { top: 55%; left: 15%; }
#jp_map li.saga a { top: 55%; left: 8%; }
#jp_map li.nagasaki a { top: 55%; left: 1%; height: 16%; }
#jp_map li.kumamoto a { top: 67%; left: 8%; }
#jp_map li.oita a { top: 67%; left: 15%; }
#jp_map li.miyazaki a { top: 79%; left: 15%; }
#jp_map li.kagoshima a { top: 79%; left: 8%; }
#jp_map li.okinawa a { top: 88%; left: 0; }

@media screen and (max-width: 992px) {
  #jp_map { margin: 16px 0 0; }
  #jp_map::before { padding: 100% 0 0; }
  #jp_map li a { font-size: 12px; border-width: 1px; }
  #jp_map a {
    text-shadow: #fff 1px 0px, #fff -1px 0px, #fff 0px -1px, #fff 1px -1px, #fff -1px -1px, #fff 0px 1px, #fff 1px 1px, #fff -1px 1px;
    border-width: 1px;
    font-size: 12px;
  }
  #jp_map li.tokushima a,
  #jp_map li.kochi a { top: 88%; }
  #jp_map li.kagawa a,
  #jp_map li.ehime a { top: 80%; }
}
@media screen and (max-width: 768px) {
  #jp_map a span { width: 1em; }
  #jp_map li.hokkaido a span,
  #jp_map li.aomori a span,
  #jp_map li.akita a span,
  #jp_map li.iwate a span,
  #jp_map li.yamagata a span,
  #jp_map li.miyagi a span,
  #jp_map li.nigata a span,
  #jp_map li.ehime a span,
  #jp_map li.kagawa a span,
  #jp_map li.kochi a span,
  #jp_map li.tokushima a span { width: auto; }
}
@media screen and (max-width: 400px) {
  #jp_map li a { font-size: 11px; }
}

/*--------------------------------------------------------------
  weather frame (簡易表示)
----------------------------------------------------------------*/
#weather-frame {
  background-color: #ffffff;
}

.pref a img {
  width: 100px;
  height: auto;
  cursor: pointer;
}

.pref p {
  font-size: 20px;
  text-align: center;
}

.state {
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  font-size: 16px;
  border-top: 2px solid #000000;
}
.state h2 {
  margin: 0;
  padding: 0;
  width: 22px;
  background: #EEF0F4;
  border-radius: 0;
}
.state img {
  width: 120px;
  height: auto;
}
.state .forecast {
  padding: 10px;
  width: 40%;
  border-left: 2px solid #000000;
}

#weather-frame table {
  margin: auto;
  margin-top: 100px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  border: 1px solid gray;
  background-color: #fdfeff;
  border-radius: 10px;
}
#weather-frame td {
  position: relative;
  max-width: 200px;
  border: 1px solid gray;
  text-align: center;
  font-size: 8px;
}
#weather-frame tr:nth-child(6n+1) { background-color: #c4e7ff; }
#weather-frame td img { width: 30px; height: auto; }
#weather-frame .red { color: red; }
#weather-frame .blue { color: blue; }
#weather-frame .slide td img { width: 60px; height: auto; }

/*--------------------------------------------------------------
  weatherforecast main frame (詳細スライドモーダル)
----------------------------------------------------------------*/
#weatherforecast-main-frame {
  display: block;
  position: fixed;
  top: 0px;
  padding: 0;
  margin: 0;
  left: -100vw;
  width: 100vw;
  height: 100vh;
  z-index: 3007;
  background-color: #252222;
  transition: left 0.6s ease-in-out;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#weatherforecast-main-frame::-webkit-scrollbar { display: none; }
#weatherforecast-main-frame.active { left: 0; }
#weatherforecast-main-frame .weatherforecast-container {
  display: block;
  position: absolute;
  box-sizing: border-box;
  top: 0px;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255);
}
#weatherforecast-main-frame .weatherforecast-container .navbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
  padding: 1.5rem 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}
#weatherforecast-main-frame .weatherforecast-container .navbar-head svg {
  width: 24px;
  height: 24px;
  fill: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info {
  position: relative;
  overflow-y: scroll;
  width: 100vw;
  height: 100vh;
  margin-top: 10px;
  padding-bottom: 150px;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-pref { text-align: center; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-pref a img {
  display: inline-block;
  margin: auto 0;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today { text-align: center; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-area {
  display: block;
  position: relative;
  height: auto;
  background-color: #ffffff;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-week-area {
  display: block;
  position: relative;
  height: auto;
  background-color: #ffffff;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-week-area td { font-size: 0.7em; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-week-area tbody tr:first-child td { font-size: 1em; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today table {
  width: 100%;
  height: auto;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  border: 0;
  background-color: #fdfeff;
  border-radius: 0;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today td {
  border: 0;
  text-align: center;
  vertical-align: text-top;
  font-size: 1em;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today td p { text-align: center; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today td img {
  display: inline-block;
  width: 100px;
  height: auto;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today tr:nth-child(1) {
  max-width: 100%;
  background-color: #c4e7ff;
  font-size: 1em;
}
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .red { color: red; }
#weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .blue { color: blue; }

#weatherforecast-today-news .forecast-area:nth-of-type(5) { font-size: 12px; }

@media screen and (min-width: 768px) {
  #weatherforecast-main-frame { margin: 0 auto; width: 100vw; }
  #weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-pref a img { margin: auto 0; width: 400px; }
  #weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today td { font-size: 1.5em; }
  #weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-week-area td { font-size: 1.5em; }
  #weatherforecast-main-frame .weatherforecast-container .weatherforecast-info #weatherforecast-today .forecast-week-area tbody tr:first-child td { font-size: 1.5em; }
  #weatherforecast-main-frame .weatherforecast-container #weatherforecast-today-news .forecast-area:nth-of-type(5) { font-size: 1.2em; }
}

#weatherforecast-pref-name {
  color: #ffffff;
  font-size: 1em;
}