@charset "UTF-8";
/* 田川の気象情報記録 */
html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  background: none;
  font-size: 1.6rem;
}
body a:link #Goto_Top, body a:visited #Goto_Top {
  display: inline-block;
  padding: 8px 8px;
  background-color: #4758ba;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  z-index: 1000;
}
body .container {
  margin: auto;
  max-width: 1000px;
}
body h2.title {
  margin: 30px auto 20px auto;
  color: #005dad;
  text-align: center;
}
body .data-page-ttl {
  text-align: center;
}
body .data-page-ttl h1 {
  padding: 10px;
  margin-bottom: 3rem;
  background-color: #006296;
  color: #fff;
  font-size: 3rem;
}
body .data-page-ttl h1 span {
  display: block;
  font-size: 75%;
}
body .data-page-ttl h1 p:nth-child(3) {
  line-height: 1.4;
}
body .data-page-ttl div.comm1 {
  max-width: 600px;
  width: 90%;
  margin: auto;
  margin-bottom: 1rem;
}
body .data-page-ttl div.comm1 p {
  line-height: 1.4;
}
body .data-page-ttl div.comm1 ul {
  text-align: left;
  counter-reset: li;
}
body .data-page-ttl div.comm1 ul li {
  margin-bottom: 1rem;
  text-indent: -2rem;
  padding-left: 2rem;
}
body .data-page-ttl div.comm1 ul li::before {
  content: counter(li) ". ";
  counter-increment: li;
  font-weight: bold;
  color: #095da5;
}
body .data-page-ttl p.comm-scroll {
  margin: 1rem 0px 0px 0px;
  text-align: center;
  font-size: 1.3rem;
}
body .data-page-ttl ul.凡例 {
  display: block;
  margin: auto;
  margin-bottom: 3rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
}
body .data-page-ttl ul.凡例 li {
  font-size: 1.4rem;
  color: #555;
}
body .data-page-ttl ul.凡例 li:before {
  color: #000;
}
body .weather-header {
  max-width: 600px;
  margin: auto;
}
body .weather-header .header {
  display: table;
  box-shadow: inset -5px -5px 15px #415aa1;
  background-color: #f2f6ff;
}
body .weather-header .header div {
  display: table-cell;
  width: 21%;
}
body .weather-header .header div img {
  width: 100%;
  padding: 13%;
}
body .weather-header .header h1 {
  display: table-cell;
  width: 65%;
  padding: 1.6% 0;
  vertical-align: middle;
  line-height: 1.4;
  font-size: 125%;
  color: #1f5e97;
}
body .weather-header .header h1 span {
  display: block;
  font-size: 120%;
}
body .weather-header .header .end {
  width: 15%;
}
body .weather-header .index {
  margin: 3rem auto;
  display: inline-block;
  width: 95%;
  text-align: left;
}
body .weather-header .index h2 {
  margin-bottom: 3rem;
  text-align: center;
  font-size: 2rem;
  color: #174d8d;
  letter-spacing: 3px;
}
body .weather-header .index h3 {
  display: inline-block;
  padding: 1rem 2rem;
  min-width: 300px;
  margin-left: 0 0 0 1%;
  border-bottom: 1px solid #026f3d;
  background-color: #eaf0ff;
  color: #174d8d;
  font-size: 2.4rem;
  letter-spacing: 1rem;
  background-image: linear-gradient(83.4deg, #3a8dfa 10px, #f00 0%, #f00 15px, #cef9ff 10px);
}
body .weather-header .index h4 {
  font-weight: bold;
  margin-top: 2rem;
  margin: 1rem 0 1rem 2rem;
  padding: 0.5rem;
  line-height: 1.2;
  color: #0a6289;
  font-size: 2.2rem;
}
body .weather-header .index h4 img {
  margin-left: 10px;
  width: 100px;
  border: 1px solid #9eace8;
  box-shadow: 5px 5px 0px #8596be;
}
body .weather-header .index h4 span {
  font-size: 75%;
}
body .weather-header .index p.comm {
  margin: 1rem 0 1rem 2rem;
  font-size: 1.6rem;
  color: #000c96;
}
body .weather-header .index .box {
  margin-bottom: 5rem;
  border: 1px solid #b5b5b5;
  text-align: left;
}
body .weather-header .index ul.item {
  margin-left: 2rem;
  margin-bottom: 1rem;
}
body .weather-header .index ul.item li {
  border: 1px solid #0d5089;
  display: inline-block;
  padding-top: 10px;
  padding: 6px 10px;
  margin: 5px;
  box-shadow: inset -3px -3px 5px #226cc3;
  border-radius: 5px;
  font-size: 2rem;
  color: #0d5da2;
  text-align: center;
}
body .weather-header .index ul.item li span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
}
body .weather-header .index ul.item li .span2 {
  padding: 3px 5px;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.2rem;
}
body .weather-header .index ul.item li .span3 {
  padding: 3px 5px;
  background-color: #065c88;
  border-radius: 3px;
  color: #fff;
  line-height: 1;
  font-size: 1.4rem;
}

#weather-data-index footer, #weather-data-index header#sub-head, #weather-data-index #second-container {
  max-width: 1000px;
  min-width: 320px;
  width: 100%;
  margin: auto;
  text-align: center;
}

h2.page-ttl {
  background-color: #2054a8;
  color: #fff;
  line-height: 1.2em;
  padding: 0.5em 2em 0.5em 2em;
  margin: 5em auto 2em auto;
  border-top: 10px double #fff;
}

#weather-data-typhoon {
  background: none;
}
#weather-data-typhoon .container #typhoon_map .mokuji, #weather-data-typhoon .container #typhoon_map .mokuji-bottom {
  text-align: center;
}
#weather-data-typhoon .container #typhoon_map .mokuji .link, #weather-data-typhoon .container #typhoon_map .mokuji-bottom .link {
  display: inline-block;
  padding: 6px;
  margin: 3px;
  border: 1px solid #55a2fc;
  background-color: #f4fcff;
  box-shadow: inset -3px -3px 10px #97c7ff;
  text-align: center;
  line-height: 1;
  color: #0d538e;
  text-shadow: 0.5px 0px 0px #02176f;
  text-decoration: none;
}
#weather-data-typhoon .container #typhoon_map .mokuji .link span, #weather-data-typhoon .container #typhoon_map .mokuji-bottom .link span {
  font-size: 80%;
}
#weather-data-typhoon .container #typhoon_map .mokuji .link .etc, #weather-data-typhoon .container #typhoon_map .mokuji-bottom .link .etc {
  color: #00f;
}
#weather-data-typhoon .container #typhoon_map .mokuji-bottom {
  margin-bottom: 15rem;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo {
  text-align: center;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo img {
  width: 100%;
  margin: 0;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo h2.nengou {
  font-size: 2rem;
  margin-top: 4rem;
  margin-bottom: 0;
  padding: 0rem;
  color: #f00;
  line-height: 1;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo h2.nengou .h21 {
  color: #ff0000;
  font-size: 80%;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo h2.nengou .h21 .h22 {
  color: #f87c7c;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo p {
  text-align: center;
  line-height: 1;
  font-size: 1.4rem;
  margin: 0;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo .etc {
  display: inline-block;
  color: #fff;
  font-size: 70%;
  background-color: #0a8121;
  padding: 3px 20px;
  border-radius: 10px;
  font-size: 100%;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo .etc a:link, #weather-data-typhoon .container #typhoon_map .typhoon_photo .etc a:visited {
  color: #fff;
}
#weather-data-typhoon .container #typhoon_map .typhoon_photo .wiki {
  font-size: 1.8rem;
  padding-left: 2rem;
}

#rain-20 .英彦山20mm {
  display: inline-block;
  padding: 5px;
  border: 1px solid #b4b4b4;
}
#rain-20 #over-mm {
  margin-bottom: 4rem;
}
#rain-20 #over-mm span {
  display: inline-block;
  padding: 2px 5px;
  margin: 5px;
  border: 1px solid #ddaf92;
  box-shadow: inset -3px -3px 10px #963f08;
}
#rain-20 #over-mm span a:link, #rain-20 #over-mm span a:visited {
  color: #963f08;
  font-weight: bold;
}
#rain-20 #over-mm .mm以上 {
  margin: 2rem;
  font-size: 3rem;
  color: #0b508b;
}
#rain-20 .scroll-x {
  overflow-x: auto;
  overflow-y: auto;
}
#rain-20 .scroll-x::before {
  content: "左右にドラッグ出来ます（スマホ）";
}
#rain-20 .scroll-x .Mdata {
  color: #002543;
}
#rain-20 .scroll-x .rain_table {
  margin: 5px;
  color: #000;
  font-size: 1.3rem;
}
#rain-20 .scroll-x .rain-0 {
  background-color: #fff7b0;
}
#rain-20 .scroll-x .rain-1 {
  background-color: #ffc78c;
}
#rain-20 .scroll-x .rain-2 {
  background-color: #fc4e4e;
  color: #000;
}
#rain-20 .scroll-x .rain-3 {
  background-color: #ee0000;
  color: #fff;
}
#rain-20 .scroll-x .rain-4 {
  background-color: #b32fe6;
  color: #fff;
}
#rain-20 .scroll-x .rain-5 {
  background-color: #7c00b4;
  color: #fff;
}
#rain-20 .scroll-x .rain-6 {
  background-color: #7c00b4;
  color: #fff;
}
#rain-20 .scroll-x .rain-7 {
  background-color: #04388b;
  color: #fff;
}
#rain-20 .scroll-x .rain-8 {
  background-color: #04388b;
  color: #fff;
}
#rain-20 .scroll-x .rain-9 {
  background-color: #000;
  color: #fff;
}
#rain-20 .scroll-x .rain-10, #rain-20 .scroll-x .rain-11 {
  background-color: #000;
  color: #fff;
}
#rain-20 .scroll-x .rain, #rain-20 .scroll-x .rain-0, #rain-20 .scroll-x .rain-1, #rain-20 .scroll-x .rain-2, #rain-20 .scroll-x .rain-3, #rain-20 .scroll-x .rain-4, #rain-20 .scroll-x .rain-5, #rain-20 .scroll-x .rain-6, #rain-20 .scroll-x .rain-7, #rain-20 .scroll-x .rain-8, #rain-20 .scroll-x .rain-9, #rain-20 .scroll-x .rain-10, #rain-20 .scroll-x .rain-11 {
  border: 1px solid #aaa;
  width: 2em;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
}
#rain-20 .scroll-x .year {
  color: #e40404;
  font-weight: bold;
  border: 1px solid #000;
  width: 2em;
  text-align: center;
}
#rain-20 .scroll-x .mm {
  font-weight: bold;
  border: 1px solid #000;
  width: 2em;
  text-align: center;
}
#rain-20 .scroll-x .class-1, #rain-20 .scroll-x .class-2, #rain-20 .scroll-x .class-3, #rain-20 .scroll-x .class-4, #rain-20 .scroll-x .class-5, #rain-20 .scroll-x .class-9, #rain-20 .scroll-x .class-10, #rain-20 .scroll-x .class-11, #rain-20 .scroll-x .class-12 {
  color: #000;
  background-color: #fff;
  border: 1px solid #c7c7c7;
  width: 2em;
  text-align: center;
  padding-top: 5px;
}
#rain-20 .scroll-x .class-6 {
  background-color: #d5ffd5;
  border: 1px solid #c7c7c7;
  width: 2em;
  text-align: center;
  padding-top: 5px;
}
#rain-20 .scroll-x .class-7 {
  background-color: #ffcfcf;
  border: 1px solid #c7c7c7;
  width: 2em;
  text-align: center;
  padding-top: 5px;
}
#rain-20 .scroll-x .class-8 {
  background-color: #cefeef;
  border: 1px solid #c7c7c7;
  width: 2em;
  text-align: center;
  padding-top: 5px;
}
#rain-20 .scroll-x span {
  font-size: 1rem;
  display: block;
}

.weather-graph {
  display: block;
  margin: 0 auto;
  width: 95%;
  margin-bottom: 7rem;
  border: 1px solid rgba(0, 55, 80, 0.14);
}
.weather-graph .subh2 {
  color: #11808e;
  margin-bottom: 0rem;
}
.weather-graph p.comm {
  margin: 0;
  text-align: center;
  font-size: 1.3rem;
}
.weather-graph p.comm .red {
  color: #f4247c;
}
.weather-graph p.comm .blue {
  color: #2267ad;
}
.weather-graph .canvas-box {
  margin: 0 auto;
  border: 0px solid #bec9d6;
}
.weather-graph .canvas-box .chart {
  margin: auto;
}
.weather-graph .canvas-box .canvas {
  position: relative;
}
.weather-graph .reset-button {
  text-align: center;
}
.weather-graph .reset-button p {
  font-size: 1.4rem;
}
.weather-graph .reset-button #reset {
  position: relative;
  padding: 1px 5px;
  border: 1px solid #b57d0c;
  border-radius: 10px;
  box-shadow: inset -3px -3px 10px #d09844;
  color: #982900;
  font-size: 1.4rem;
}
.weather-graph .reset-button #reset::before {
  content: "マウスやピンチで横にズーム出来ます。";
  position: absolute;
  display: block;
  width: 227px;
  bottom: -19px;
  left: -52px;
  font-size: 1.2rem;
  color: #7e5d42;
}

#temperature-graph .tAve {
  color: #f00;
}
#temperature-graph .comm1 {
  max-width: 600px;
  width: 80%;
  margin: auto;
  margin-bottom: 3rem;
}
#temperature-graph .comm1 span {
  width: 20px;
  height: 15px;
  display: inline-block;
  margin: 0 2px;
}
#temperature-graph .comm1 span.f1 {
  background-color: #d30212;
}
#temperature-graph .comm1 span.f2 {
  background-color: #074d89;
}
#temperature-graph .comm1 span.i1 {
  background-color: #fc7690;
}
#temperature-graph .comm1 span.i2 {
  background-color: #6ec7ff;
}

.weather-4graph {
  display: block;
  margin: 0 auto;
  width: 95%;
  margin-bottom: 7rem;
  border: 1px solid rgba(0, 55, 80, 0.14);
}
.weather-4graph .subh2 {
  color: #11808e;
  margin-bottom: 0rem;
}
.weather-4graph .canvas-box {
  margin: 0 auto;
  border: 0px solid #bec9d6;
}
.weather-4graph .canvas-box .chart {
  margin: auto;
}
.weather-4graph .canvas-box .canvas {
  position: relative;
}
.weather-4graph .reset-button {
  text-align: center;
}
.weather-4graph .reset-button p {
  font-size: 1.4rem;
}
.weather-4graph .reset-button #reset {
  position: relative;
  padding: 1px 5px;
  border: 1px solid #b57d0c;
  border-radius: 10px;
  box-shadow: inset -3px -3px 10px #d09844;
  color: #982900;
  font-size: 1.4rem;
}
.weather-4graph .reset-button #reset::before {
  content: "マウスやピンチで横にズーム出来ます。";
  position: absolute;
  display: block;
  width: 227px;
  bottom: -19px;
  left: -52px;
  font-size: 1.2rem;
  color: #7e5d42;
}

#one_day .scrole {
  margin-bottom: 15rem;
}
#one_day .wareki {
  overflow-x: scroll;
}
#one_day .wareki table {
  background-color: #919191;
  font-size: 1.4rem;
  border-collapse: separate;
  border-spacing: 1px;
}
#one_day .wareki table td {
  padding: 5px;
  white-space: nowrap;
  background-color: #fff;
}
#one_day .wareki table td a:link, #one_day .wareki table td a:visited {
  padding: 5px;
  white-space: nowrap;
}
#one_day .one_day_tbl {
  position: relative;
  margin: auto;
  position: relative;
  background-color: #919191;
  font-size: 1.4rem;
  border-collapse: separate;
  border-spacing: 1px;
}
#one_day .one_day_tbl td {
  padding: 5px;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
}
#one_day .one_day_tbl .day12 {
  background-color: #e7f7ff;
}
#one_day .one_day_tbl .day1 {
  background-color: #e3f5ff;
}
#one_day .one_day_tbl .day2 {
  background-color: #c0e9ff;
}
#one_day .one_day_tbl .day3 {
  background-color: #eaffdc;
}
#one_day .one_day_tbl .day4 {
  background-color: #cfffb0;
}
#one_day .one_day_tbl .day5 {
  background-color: #9efa64;
}
#one_day .one_day_tbl .day6 {
  background-color: #fff6f8;
}
#one_day .one_day_tbl .day7 {
  background-color: #ffdfe8;
}
#one_day .one_day_tbl .day8 {
  background-color: #ffb0c5;
}
#one_day .one_day_tbl .day9 {
  background-color: #fdf8e0;
}
#one_day .one_day_tbl .day10 {
  background-color: #fcefb7;
}
#one_day .one_day_tbl .day11 {
  background-color: #fcd467;
}
#one_day .one_day_tbl .outline {
  text-align: left;
  font-weight: normal;
}
#one_day .one_day_tbl .outline span {
  color: #575757;
}
#one_day .one_day_tbl .fixed01 {
  position: sticky;
  top: 0px;
  padding: 10px 10px;
  max-width: 70px;
  color: #000;
  text-align: center;
  background: #aaa;
  white-space: nowrap;
}
#one_day .one_day_tbl .fixed01:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

#rain_0 .main_table {
  text-align: center;
  margin-bottom: 15rem;
}
#rain_0 .main_table .index {
  display: inline-block;
  margin-bottom: 2rem;
  text-align: left;
  line-height: 1;
}
#rain_0 .main_table .index a:link, #rain_0 .main_table .index a:visited {
  display: block;
  padding: 10px;
  border-left: 5px solid #0783b2;
  border-bottom: 1px solid #049bd4;
}
#rain_0 .main_table table.rain0 {
  max-width: 500px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 1px;
  background-color: #9d9999;
}
#rain_0 .main_table table.rain0 th {
  padding: 10px;
  text-align: center;
  background-color: #fff;
  font-weight: bold;
}
#rain_0 .main_table table.rain0 th.date {
  width: 100px;
  background-color: #ffddb4;
}
#rain_0 .main_table table.rain0 th.count {
  width: 80px;
  background-color: #fff6b4;
}
#rain_0 .main_table table.rain0 th.par {
  width: 60%;
  background-color: #b4c2ff;
  text-align: left;
}
#rain_0 .main_table table.rain0 td {
  padding: 5px 5px;
  background-color: #fff;
}
#rain_0 .main_table table.rain0 td.date {
  text-align: right;
  padding-right: 5px;
}
#rain_0 .main_table table.rain0 td.par {
  text-align: left;
  padding-left: 3%;
}

#most_10 .container {
  margin-bottom: 15rem;
}
#most_10 .container h2 {
  display: block;
  max-width: 200px;
  margin: 6rem auto 2rem auto;
  padding: 10px 0px 10px 0px;
  box-shadow: inset -3px -3px 30px #28d69a;
  border-radius: 10px;
  font-size: 3rem;
  color: #008d10;
  letter-spacing: 1rem;
}
#most_10 .container .most {
  margin: 10px;
  text-align: left;
  border: 1px solid #d4d4d4;
  display: inline-block;
  max-width: 520px;
  padding: 10px;
  vertical-align: top;
}
#most_10 .container .most h3 {
  margin: 1rem 0px 2rem 0px;
  text-align: center;
  color: #025dac;
}
#most_10 .container .most p {
  text-align: center;
  margin: 0;
  font-size: 1.4rem;
}
#most_10 .container .most table {
  color: #003572;
}
#most_10 .container .most table tr .td1 {
  padding: 0px 10px;
  text-align: right;
  color: #08801f;
  text-shadow: 1px 0px 0px #08801f;
}
#most_10 .container .most table tr .td6 {
  font-weight: bold;
  text-align: right;
}
#most_10 .container .most table tr .td2 {
  padding: 0px 5px 0 10px;
}
#most_10 .container .most table tr .td3 {
  font-size: 80%;
  padding: 0px 5px 0 0px;
}
#most_10 .container .most table tr .td4 {
  text-align: right;
  padding: 0px 5px 0 0px;
}
#most_10 .container .most table tr .td5 {
  text-align: right;
  padding: 0px 5px 0 0px;
}
#most_10 .container .most table tr td {
  line-height: 1.6;
}
#most_10 .container .most table tr td span {
  font-weight: normal;
  font-size: 90%;
}
#most_10 .container .most table tr td .unit {
  padding-left: 5px;
}