@charset "UTF-8";
body {
  caret-color:#FFFFFF;
}
/* ---------- ---------- ---------- ---------- ---------- */
.d_ib {
  display: inline-block !important;
}

.d_b {
  display: block !important;
}

.d_n {
  display: none;
}

/* ---------- ---------- ---------- ---------- ---------- */
.fl_l {
  float: left;
}

.fl_r {
  float: right;
}

/* ---------- ---------- ---------- ---------- ---------- */
.ta_r {
  text-align: right !important;
}

.ta_c {
  text-align: center !important;
}

.ta_l {
  text-align: left !important;
}

/* ---------- ---------- ---------- ---------- ---------- */
.fw_100 {
  font-weight: 100 !important;
}

.fw_200 {
  font-weight: 200 !important;
}

.fw_300 {
  font-weight: 300 !important;
}

.fw_400 {
  font-weight: 400 !important;
}

.fw_500 {
  font-weight: 500 !important;
}

.fw_600 {
  font-weight: 600 !important;
}

.fw_700 {
  font-weight: 700 !important;
}

.fw_800 {
  font-weight: 800 !important;
}

.fw_900 {
  font-weight: 900 !important;
}

.fw_n {
  font-weight: normal !important;
}

.fw_b {
  font-weight: bold !important;
}

/* ---------- ---------- ---------- ---------- ---------- */
.fz_10 {
  font-size: 10px;
}

.fz_11 {
  font-size: 11px;
}

.fz_12 {
  font-size: 12px;
}

.fz_13 {
  font-size: 13px;
}

.fz_14 {
  font-size: 14px;
}

.fz_15 {
  font-size: 15px;
}

.fz_16 {
  font-size: 16px;
}

.fz_17 {
  font-size: 17px;
}

.fz_18 {
  font-size: 18px;
}

.fz_19 {
  font-size: 19px;
}

.fz_20 {
  font-size: 20px;
}

.fz_22 {
  font-size: 22px;
}

.fz_24 {
  font-size: 24px;
}

.fz_26 {
  font-size: 26px;
}

.fz_28 {
  font-size: 28px;
}

.fz_30 {
  font-size: 30px;
}

.fz_32 {
  font-size: 32px;
}

.fz_34 {
  font-size: 34px;
}

.fz_36 {
  font-size: 36px;
}

.fz_38 {
  font-size: 38px;
}

.fz_40 {
  font-size: 40px;
}

.fz_42 {
  font-size: 42px;
}

.fz_44 {
  font-size: 44px;
}

.fz_46 {
  font-size: 46px;
}

.fz_48 {
  font-size: 48px;
}

.fz_50 {
  font-size: 50px;
}

/* ---------- ---------- ---------- ---------- ---------- */
.m_0 {
  margin: 0px !important;
}

.mt_0 {
  margin-top: 0px !important;
}

.mr_0 {
  margin-right: 0px !important;
}

.mb_0 {
  margin-bottom: 0px !important;
}

.ml_0 {
  margin-left: 0px !important;
}

.m_5 {
  margin: 5px !important;
}

.mt_5 {
  margin-top: 5px !important;
}

.mr_5 {
  margin-right: 5px !important;
}

.mb_5 {
  margin-bottom: 5px !important;
}

.ml_5 {
  margin-left: 5px !important;
}

.m_10 {
  margin: 10px !important;
}

.mt_10 {
  margin-top: 10px !important;
}

.mr_10 {
  margin-right: 10px !important;
}

.mb_10 {
  margin-bottom: 10px !important;
}

.ml_10 {
  margin-left: 10px !important;
}

.m_15 {
  margin: 15px !important;
}

.mt_15 {
  margin-top: 15px !important;
}

.mr_15 {
  margin-right: 15px !important;
}

.mb_15 {
  margin-bottom: 15px !important;
}

.ml_15 {
  margin-left: 15px !important;
}

.m_20 {
  margin: 20px !important;
}

.mt_20 {
  margin-top: 20px !important;
}

.mr_20 {
  margin-right: 20px !important;
}

.mb_20 {
  margin-bottom: 20px !important;
}

.ml_20 {
  margin-left: 20px !important;
}

.m_25 {
  margin: 25px !important;
}

.mt_25 {
  margin-top: 25px !important;
}

.mr_25 {
  margin-right: 25px !important;
}

.mb_25 {
  margin-bottom: 25px !important;
}

.ml_25 {
  margin-left: 25px !important;
}

.m_30 {
  margin: 30px !important;
}

.mt_30 {
  margin-top: 30px !important;
}

.mr_30 {
  margin-right: 30px !important;
}

.mb_30 {
  margin-bottom: 30px !important;
}

.ml_30 {
  margin-left: 30px !important;
}

.m_35 {
  margin: 35px !important;
}

.mt_35 {
  margin-top: 35px !important;
}

.mr_35 {
  margin-right: 35px !important;
}

.mb_35 {
  margin-bottom: 35px !important;
}

.ml_35 {
  margin-left: 35px !important;
}

.m_40 {
  margin: 40px !important;
}

.mt_40 {
  margin-top: 40px !important;
}

.mr_40 {
  margin-right: 40px !important;
}

.mb_40 {
  margin-bottom: 40px !important;
}

.ml_40 {
  margin-left: 40px !important;
}

.m_45 {
  margin: 45px !important;
}

.mt_45 {
  margin-top: 45px !important;
}

.mr_45 {
  margin-right: 45px !important;
}

.mb_45 {
  margin-bottom: 45px !important;
}

.ml_45 {
  margin-left: 45px !important;
}

.m_50 {
  margin: 50px !important;
}

.mt_50 {
  margin-top: 50px !important;
}

.mr_50 {
  margin-right: 50px !important;
}

.mb_50 {
  margin-bottom: 50px !important;
}

.ml_50 {
  margin-left: 50px !important;
}

.m_55 {
  margin: 55px !important;
}

.mt_55 {
  margin-top: 55px !important;
}

.mr_55 {
  margin-right: 55px !important;
}

.mb_55 {
  margin-bottom: 55px !important;
}

.ml_55 {
  margin-left: 55px !important;
}

.m_60 {
  margin: 60px !important;
}

.mt_60 {
  margin-top: 60px !important;
}

.mr_60 {
  margin-right: 60px !important;
}

.mb_60 {
  margin-bottom: 60px !important;
}

.ml_60 {
  margin-left: 60px !important;
}

.m_65 {
  margin: 65px !important;
}

.mt_65 {
  margin-top: 65px !important;
}

.mr_65 {
  margin-right: 65px !important;
}

.mb_65 {
  margin-bottom: 65px !important;
}

.ml_65 {
  margin-left: 65px !important;
}

.m_70 {
  margin: 70px !important;
}

.mt_70 {
  margin-top: 70px !important;
}

.mr_70 {
  margin-right: 70px !important;
}

.mb_70 {
  margin-bottom: 70px !important;
}

.ml_70 {
  margin-left: 70px !important;
}

.m_75 {
  margin: 75px !important;
}

.mt_75 {
  margin-top: 75px !important;
}

.mr_75 {
  margin-right: 75px !important;
}

.mb_75 {
  margin-bottom: 75px !important;
}

.ml_75 {
  margin-left: 75px !important;
}

.m_80 {
  margin: 80px !important;
}

.mt_80 {
  margin-top: 80px !important;
}

.mr_80 {
  margin-right: 80px !important;
}

.mb_80 {
  margin-bottom: 80px !important;
}

.ml_80 {
  margin-left: 80px !important;
}

.m_85 {
  margin: 85px !important;
}

.mt_85 {
  margin-top: 85px !important;
}

.mr_85 {
  margin-right: 85px !important;
}

.mb_85 {
  margin-bottom: 85px !important;
}

.ml_85 {
  margin-left: 85px !important;
}

.m_90 {
  margin: 90px !important;
}

.mt_90 {
  margin-top: 90px !important;
}

.mr_90 {
  margin-right: 90px !important;
}

.mb_90 {
  margin-bottom: 90px !important;
}

.ml_90 {
  margin-left: 90px !important;
}

.m_95 {
  margin: 95px !important;
}

.mt_95 {
  margin-top: 95px !important;
}

.mr_95 {
  margin-right: 95px !important;
}

.mb_95 {
  margin-bottom: 95px !important;
}

.ml_95 {
  margin-left: 95px !important;
}

.m_100 {
  margin: 100px !important;
}

.mt_100 {
  margin-top: 100px !important;
}

.mr_100 {
  margin-right: 100px !important;
}

.mb_100 {
  margin-bottom: 100px !important;
}

.ml_100 {
  margin-left: 100px !important;
}

/* ---------- ---------- ---------- ---------- ---------- */
.p_0 {
  padding: 0px !important;
}

.pt_0 {
  padding-top: 0px !important;
}

.pr_0 {
  padding-right: 0px !important;
}

.pb_0 {
  padding-bottom: 0px !important;
}

.pl_0 {
  padding-left: 0px !important;
}

.p_5 {
  padding: 5px !important;
}

.pt_5 {
  padding-top: 5px !important;
}

.pr_5 {
  padding-right: 5px !important;
}

.pb_5 {
  padding-bottom: 5px !important;
}

.pl_5 {
  padding-left: 5px !important;
}

.p_10 {
  padding: 10px !important;
}

.pt_10 {
  padding-top: 10px !important;
}

.pr_10 {
  padding-right: 10px !important;
}

.pb_10 {
  padding-bottom: 10px !important;
}

.pl_10 {
  padding-left: 10px !important;
}

.p_15 {
  padding: 15px !important;
}

.pt_15 {
  padding-top: 15px !important;
}

.pr_15 {
  padding-right: 15px !important;
}

.pb_15 {
  padding-bottom: 15px !important;
}

.pl_15 {
  padding-left: 15px !important;
}

.p_20 {
  padding: 20px !important;
}

.pt_20 {
  padding-top: 20px !important;
}

.pr_20 {
  padding-right: 20px !important;
}

.pb_20 {
  padding-bottom: 20px !important;
}

.pl_20 {
  padding-left: 20px !important;
}

.p_25 {
  padding: 25px !important;
}

.pt_25 {
  padding-top: 25px !important;
}

.pr_25 {
  padding-right: 25px !important;
}

.pb_25 {
  padding-bottom: 25px !important;
}

.pl_25 {
  padding-left: 25px !important;
}

.p_30 {
  padding: 30px !important;
}

.pt_30 {
  padding-top: 30px !important;
}

.pr_30 {
  padding-right: 30px !important;
}

.pb_30 {
  padding-bottom: 30px !important;
}

.pl_30 {
  padding-left: 30px !important;
}

.p_35 {
  padding: 35px !important;
}

.pt_35 {
  padding-top: 35px !important;
}

.pr_35 {
  padding-right: 35px !important;
}

.pb_35 {
  padding-bottom: 35px !important;
}

.pl_35 {
  padding-left: 35px !important;
}

.p_40 {
  padding: 40px !important;
}

.pt_40 {
  padding-top: 40px !important;
}

.pr_40 {
  padding-right: 40px !important;
}

.pb_40 {
  padding-bottom: 40px !important;
}

.pl_40 {
  padding-left: 40px !important;
}

.p_45 {
  padding: 45px !important;
}

.pt_45 {
  padding-top: 45px !important;
}

.pr_45 {
  padding-right: 45px !important;
}

.pb_45 {
  padding-bottom: 45px !important;
}

.pl_45 {
  padding-left: 45px !important;
}

.p_50 {
  padding: 50px !important;
}

.pt_50 {
  padding-top: 50px !important;
}

.pr_50 {
  padding-right: 50px !important;
}

.pb_50 {
  padding-bottom: 50px !important;
}

.pl_50 {
  padding-left: 50px !important;
}

.p_55 {
  padding: 55px !important;
}

.pt_55 {
  padding-top: 55px !important;
}

.pr_55 {
  padding-right: 55px !important;
}

.pb_55 {
  padding-bottom: 55px !important;
}

.pl_55 {
  padding-left: 55px !important;
}

.p_60 {
  padding: 60px !important;
}

.pt_60 {
  padding-top: 60px !important;
}

.pr_60 {
  padding-right: 60px !important;
}

.pb_60 {
  padding-bottom: 60px !important;
}

.pl_60 {
  padding-left: 60px !important;
}

.p_65 {
  padding: 65px !important;
}

.pt_65 {
  padding-top: 65px !important;
}

.pr_65 {
  padding-right: 65px !important;
}

.pb_65 {
  padding-bottom: 65px !important;
}

.pl_65 {
  padding-left: 65px !important;
}

.p_70 {
  padding: 70px !important;
}

.pt_70 {
  padding-top: 70px !important;
}

.pr_70 {
  padding-right: 70px !important;
}

.pb_70 {
  padding-bottom: 70px !important;
}

.pl_70 {
  padding-left: 70px !important;
}

.p_75 {
  padding: 75px !important;
}

.pt_75 {
  padding-top: 75px !important;
}

.pr_75 {
  padding-right: 75px !important;
}

.pb_75 {
  padding-bottom: 75px !important;
}

.pl_75 {
  padding-left: 75px !important;
}

.p_80 {
  padding: 80px !important;
}

.pt_80 {
  padding-top: 80px !important;
}

.pr_80 {
  padding-right: 80px !important;
}

.pb_80 {
  padding-bottom: 80px !important;
}

.pl_80 {
  padding-left: 80px !important;
}

.p_85 {
  padding: 85px !important;
}

.pt_85 {
  padding-top: 85px !important;
}

.pr_85 {
  padding-right: 85px !important;
}

.pb_85 {
  padding-bottom: 85px !important;
}

.pl_85 {
  padding-left: 85px !important;
}

.p_90 {
  padding: 90px !important;
}

.pt_90 {
  padding-top: 90px !important;
}

.pr_90 {
  padding-right: 90px !important;
}

.pb_90 {
  padding-bottom: 90px !important;
}

.pl_90 {
  padding-left: 90px !important;
}

.p_95 {
  padding: 95px !important;
}

.pt_95 {
  padding-top: 95px !important;
}

.pr_95 {
  padding-right: 95px !important;
}

.pb_95 {
  padding-bottom: 95px !important;
}

.pl_95 {
  padding-left: 95px !important;
}

.p_100 {
  padding: 100px !important;
}

.pt_100 {
  padding-top: 100px !important;
}

.pr_100 {
  padding-right: 100px !important;
}

.pb_100 {
  padding-bottom: 100px !important;
}

.pl_100 {
  padding-left: 100px !important;
}

:root {
  background-color: #fff;
  font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.5;
  color: #222222;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
}

body.font-small {
  font-size: .7em;
}

body.font-medium {
  font-size: 1em;
}

body.font-large {
  font-size: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

a {
  color: #222222;
  text-decoration: none;
  transition: color .3s, opacity .3s;
}

a:hover {
  text-decoration: underline;
}

figure,
figcaption {
  margin: 0;
  vertical-align: middle;
}

picture {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

table {
  width: 100%;
  border-collapse: collapse;
}

ul, ol, li {
  list-style: none;
}

.content {
  position: relative;
  box-sizing: content-box;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

#header {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 767px) {
  .header-upper {
    width: 100%;
    height: 55px;
    padding-left: 10px;
  }
  .header-upper-01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.menu {
  position: relative;
  background-color: #fff;
}

.menu .gnavi {
  align-self: center;
}

.menu .gnavi > ul {
  display: flex;
  align-items: stretch;
}

.menu .gnavi > ul > li > a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: transparent;
  padding: 10px 10px 20px;
  transition: 0.3s;
  position: relative;
}

.menu .gnavi > ul > li > a span {
  position: relative;
  font-size: 20px;
}

.menu .gnavi > ul > li > a::before {
  content: '';
  display: block;
  width: 13px;
  height: 7px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Icon_ionic-ios-arrow-down%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.233%22%20height%3D%227.566%22%20viewBox%3D%220%200%2013.233%207.566%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-down-2%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20d%3D%22M12.807%2C16.532l5-5.008a.942.942%2C0%2C0%2C1%2C1.336%2C0%2C.954.954%2C0%2C0%2C1%2C0%2C1.34l-5.67%2C5.673a.944.944%2C0%2C0%2C1-1.3.028l-5.709-5.7A.946.946%2C0%2C0%2C1%2C7.8%2C11.528Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%20fill%3D%22%237b7b7b%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  position: absolute;
  left: calc((100% - 13px) /2);
  bottom: 20px;
}

.menu .gnavi > ul > li > a:after {
  content: '';
  display: block;
  width: calc(100% - 10px);
  border-bottom: 6px solid transparent;
  position: absolute;
  bottom: 5px;
}

.menu .gnavi > ul > li > a:hover, .menu .gnavi > ul > li > a.selected {
/*  color: #0055FF;*/
  color: #007d9a;
  text-decoration: none;
}

.menu .gnavi > ul > li > a:hover:after, .menu .gnavi > ul > li > a.selected:after {
/*  border-bottom: 6px solid #0055FF;*/
  border-bottom: 6px solid #007d9a;
}

.menu .gnavi > ul > li > a:hover:before, .menu .gnavi > ul > li > a.selected:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Icon_ionic-ios-arrow-down%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.233%22%20height%3D%227.566%22%20viewBox%3D%220%200%2013.233%207.566%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-down-2%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20d%3D%22M12.807%2C16.532l5-5.008a.942.942%2C0%2C0%2C1%2C1.336%2C0%2C.954.954%2C0%2C0%2C1%2C0%2C1.34l-5.67%2C5.673a.944.944%2C0%2C0%2C1-1.3.028l-5.709-5.7A.946.946%2C0%2C0%2C1%2C7.8%2C11.528Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%20fill%3D%22%23007d9a%22%2F%3E%3C%2Fsvg%3E");
}

.menu .gnavi > ul > li.no-child > .tabs {
  height: 100%;
  display: block;
}

.menu .gnavi > ul > li.no-child a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  background-color: transparent;
  padding: 10px 10px 20px;
  transition: 0.3s;
  position: relative;
  font-size: 20px;
}

.menu .gnavi > ul > li.no-child a span {
  position: relative;
}

.menu .gnavi > ul > li.no-child a span:after {
  content: '';
  display: block;
  width: 13px;
  height: 7px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Icon_ionic-ios-arrow-down%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.233%22%20height%3D%227.566%22%20viewBox%3D%220%200%2013.233%207.566%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-down-2%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20d%3D%22M12.807%2C16.532l5-5.008a.942.942%2C0%2C0%2C1%2C1.336%2C0%2C.954.954%2C0%2C0%2C1%2C0%2C1.34l-5.67%2C5.673a.944.944%2C0%2C0%2C1-1.3.028l-5.709-5.7A.946.946%2C0%2C0%2C1%2C7.8%2C11.528Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%20fill%3D%22%237b7b7b%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  position: absolute;
  left: calc((100% - 13px) / 2);
  margin-top: 10px;
}

.menu .gnavi > ul > li.no-child a:after {
  content: '';
  display: block;
  width: calc(100% - 10px);
  border-bottom: 6px solid transparent;
  position: absolute;
  bottom: 5px;
}

.menu .gnavi > ul > li.no-child a:hover, .menu .gnavi > ul > li.no-child a.selected {
/*  color: #0055FF;*/
  color: #007d9a;
  text-decoration: none;
}

.menu .gnavi > ul > li.no-child a:hover:after, .menu .gnavi > ul > li.no-child a.selected:after {
/*  border-bottom: 6px solid #0055FF;*/
  border-bottom: 6px solid #007d9a;
}

.menu .gnavi > ul > li.no-child a:hover span:after, .menu .gnavi > ul > li.no-child a.selected span:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Icon_ionic-ios-arrow-down%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.233%22%20height%3D%227.566%22%20viewBox%3D%220%200%2013.233%207.566%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-down-2%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20d%3D%22M12.807%2C16.532l5-5.008a.942.942%2C0%2C0%2C1%2C1.336%2C0%2C.954.954%2C0%2C0%2C1%2C0%2C1.34l-5.67%2C5.673a.944.944%2C0%2C0%2C1-1.3.028l-5.709-5.7A.946.946%2C0%2C0%2C1%2C7.8%2C11.528Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%20fill%3D%22%230055FF%22%2F%3E%3C%2Fsvg%3E");
}

.menu .menu-hamburger {
  flex-basis: 50px;
  align-self: center;
  display: none;
  left: 25px;
  position: relative;
}

.menu-lv02-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.menu-lv02 h2 {
  color: #fff;
}

.menu-lv02 h2 span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
}

.menu-lv02-nav {
  width: 100%;
  display: flex;
}

no-child .menu-lv02-nav {
  display: block;
}

.menu-lv02-nav > li {
  width: 180px;
}

.menu-lv02-nav > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  height: 100%;
  color: #FFF;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}

.menu-lv02-nav > li > a:hover, .menu-lv02-nav > li > a.current {
/**  background: #0055FF;*/
  background: #007d9a;
  text-decoration: none;
}

.menu-lv02-nav > li > a:hover .menu-lv02-image + span:before, .menu-lv02-nav > li > a.current .menu-lv02-image + span:before {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .menu .logo a {
    display: block;
  }
  .menu .gnavi {
    position: fixed;
    top: 55px;
    left: 100vw;
    opacity: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: 0.3s;
  }
  .menu .gnavi.open {
    left: 0;
    opacity: 1;
    background: #004e60;
  }
  .menu .gnavi > ul > li a span:after {
    display: none;
  }
  .menu .gnavi > ul > li a.selected {
    color: #FFF;
  }
  .menu .gnavi > ul > li a:before {
    display: none;
  }
  .menu .gnavi {
    flex-basis: 100%;
    width: 100%;
    height: calc(617 / 667 * 100%);
    min-height: 100vh;
    background-color: #FFF;
    padding-bottom: 100px;
  }
  .menu .gnavi > ul {
    display: block;
    background-color: #004e60;
  }
  .menu .gnavi > ul > li {
    flex-basis: 100%;
    border-bottom: #7E98C8 1px solid;
  }
  .menu .gnavi > ul > li > a {
    position: relative;
    padding: 1rem;
    display: block;
    height: auto;
    text-align: left;
    color: #FFF;
    transition: none;
    padding-right: 50px;
  }
  .menu .gnavi > ul > li > a.dropdown-triger:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 8px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Icon_ionic-ios-arrow-down%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.233%22%20height%3D%227.566%22%20viewBox%3D%220%200%2013.233%207.566%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-down-2%22%20data-name%3D%22Icon%20ionic-ios-arrow-down%22%20d%3D%22M12.807%2C16.532l5-5.008a.942.942%2C0%2C0%2C1%2C1.336%2C0%2C.954.954%2C0%2C0%2C1%2C0%2C1.34l-5.67%2C5.673a.944.944%2C0%2C0%2C1-1.3.028l-5.709-5.7A.946.946%2C0%2C0%2C1%2C7.8%2C11.528Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    left: initial;
    right: 30px;
    bottom: initial;
    top: calc((100% - 8px) / 2);
    border-bottom: none;
    transition: .3s;
  }
  .menu .gnavi > ul > li > a.dropdown-triger.open:after, .menu .gnavi > ul > li > a.dropdown-triger.selected:after {
    transform: rotate(180deg);
  }
  .menu .gnavi > ul > li > a:hover, .menu .gnavi > ul > li > a.select {
    color: #fff;
  }
  .menu .gnavi > ul > li > a:after {
    display: none;
  }
  .menu .gnavi > ul > li.no-child a {
    display: block;
    text-align: left;
    padding: 1rem;
    color: #FFF;
    font-size:1em;
  }
  .menu .gnavi > ul > li.no-child a:after {
    display: none;
  }
  .menu .gnavi > ul > li.no-child a:hover {
    color: #FFF;
  }
  .menu .gnavi > ul > li > a span {
    position: relative;
    font-size: 1em;
  }
  .menu .gnavi-btnarea {
    padding: 25px 0;
    background: #004e60;
  }
  .menu .menu-hamburger {
    display: block;
    padding-right: 2rem;
  }
  .menu-lv02.open {
    background: #425F94;
  }
  .menu-lv02-inner {
    width: 100%;
  }
  .menu-lv02 h2 {
    display: none;
  }
  .menu-lv02-nav {
    margin-top: 0;
    display: block;
  }
  .menu-lv02-nav > li {
    flex-basis: 100%;
    width: 100%;
  }
  .menu-lv02-nav > li > a {
    padding: 15px 20px;
    display: block;
    color: #FFF;
    height: auto;
    text-align: left;
    font-size:1em;
  }
  .menu-lv02-nav > li > a .menu-lv02-image + span:before {
    display: none;
  }
  .menu-lv02-nav > li > a:hover, .menu-lv02-nav > li > a.current {
    background: initial;
  }
  .menu .google-transrate {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid #7E98C8;
    background: #FFF;
  }
}

.dropdown {
  position: relative;
}

.dropdown-detail {
  position: absolute;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  left: 0;
/*  background: #001D54;*/
  background: #004e60;
}

.dropdown .selected + .dropdown-detail {
  visibility: visible;
  z-index: 98;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .dropdown {
    position: static;
  }
  .dropdown-detail {
    position: relative;
    z-index: 0;
    display: none;
    width: 100%;
    left: auto;
    background: #007d9a;
    opacity: 1;
    visibility: visible;
  }
  .dropdown .selected + .dropdown-detail {
    display: block;
  }
}

.language {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.language-switch {
  display: flex;
}

.language-switch a {
  margin-left: 10px;
}

@media only screen and (max-width: 767px) {
  .sticky {
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
    z-index: 9999;
  }
  .sticky.visible {
    width: 100%;
    top: 0;
  }
  .sticky.visible .menu .gnavi > ul > li > a {
    height: 65px;
  }
}

@media only screen and (max-width: 767px) and (max-width: 767px) {
  .sticky.visible .menu .gnavi > ul > li > a {
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .scroll-prevent {
    overflow: hidden;
  }
}

.hamburger {
  position: relative;
  height: 50px;
}

.hamburger-btn {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  border-radius: 0px;
  display: block;
  width: 64px;
  height: 54px;
  transition: 0.3s;
}

.hamburger-border {
  position: relative;
  cursor: pointer;
  width: 60px;
  height:30px;
}

.hamburger-border span::after {
  content:url(../images/icon_menu.svg);
  position: absolute;
/*   transform: translate(-50%, 60%);
  -webkit-transform: translate(-50%, 60%);
  -ms-transform: translate(-50%, 60%);
  color: #ffffff;
  font-size: 0.8rem;
  text-transform: uppercase; */
}

.hamburger-border.active span::after {
  content:url(../images/icon_close.svg);
/*   transform: translate(-50%, 60%);
  -webkit-transform: translate(-50%, 60%);
  -ms-transform: translate(-50%, 60%); */
}

@media only screen and (min-width: 768px) {
  .header-upper {
    padding: 25px 10px 0;
    border-bottom: 2px solid #E7EBF3;
  }
  .header-upper .content-wrap {
    display: flex;
    justify-content: space-between;
/*    background: url("../images/bg_header_pc.png") bottom right no-repeat;
    padding-bottom: 60px;*/
  }
  .header-upper-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .dropdown-wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
  .dropdown-wrap > li {
    flex: 1;
    width: 100%;
  }
  .dropdown-area {
    transition: .3s;
  }
  .dropdown-detail {
    transition: 0.3s;
  }
  .menu .gnavi > ul > li > a {
    min-height: 90px;
  }
}

.content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

@media screen and (min-width: 1220px) {
  .content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}

@media only screen and (max-width: 767px) {
  .content-wrap {
    width: 100%;
    max-width: 100%;
  }
}

.content-inner {
  padding: 0 15px;
}

.content-inner-sec {
  padding: 35px 0;
  border-bottom: 1px solid #7B7B7B;
}

.content-inner-sec.undr-h1 {
  padding-top: 15px;
}

.content-inner-sec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .content-inner {
    padding: 0;
  }
  .content-inner-sec {
    padding: 30px 0 30px 15px;
  }
}

.breadcrumb {
  max-width: 1200px;
  margin: 20px auto 40px;
  display: flex;
}

.breadcrumb li {
  margin-left: 10px;
}

.breadcrumb li:after {
  content: ">";
  display: inline-block;
  margin-left: 10px;
}

.breadcrumb li:last-child:after {
  display: none;
}

@media only screen and (max-width: 767px) {
  .breadcrumb {
    font-size: .875em;
    margin: 10px auto 20px;
  }
}

.update {
  margin-bottom: 20px;
}

.map-area {
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .map-area {
    margin-bottom: 10px;
  }
}

.usage {
  background: #F6F6F6;
  padding: 10px 20px;
  margin-bottom: 25px;
/*  display: flex;*/
  flex-wrap: wrap;
}

.usage li {
/*  width: 33%;
  padding-right: 10px;*/
}

.usage li:last-child {
  padding-right: 0;
}

.usage-02 {
  padding: 20px;
}

.usage.line-multiple {
  padding-bottom: 0;
}

.usage.line-multiple li {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .usage li {
    width: 50%;
  }
  .usage li:last-child {
    margin-bottom: 0;
  }
  .usage-02 {
    display: block;
  }
  .usage-02 li {
    width: 100%;
    margin-bottom: 10px;
  }
  .usage.line-multiple {
    padding: 20px;
  }
  .usage.line-multiple li {
    margin-bottom: 10px;
  }
}

.ac > dt {
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}

.ac > dt:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  width: 14px;
  height: 8px;
  background: url("../images/ic_arrow.svg") no-repeat;
  background-size: contain;
  transition: 0.3s;
}

.ac > dt.active:after {
  transform: rotate(180deg);
}

.pagetop {
  text-indent: -9999px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: block;
  width: 50px;
  height: 50px;
  background: url("../images/btn_page.svg") no-repeat;
}

.anchor-link-01 {
  display: flex;
  margin-bottom: 20px;
}

.anchor-link-01 li {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #7B7B7B;
}

.anchor-link-01 li:last-child {
  border-right: none;
}

.anchor-link-01 li a:after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%228%22%20viewBox%3D%220%200%209%208%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20width%3D%229%22%20height%3D%228%22%20fill%3D%22none%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22ic_anchor_sp%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cg%20transform%3D%22translate(-429%20-1425)%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_2%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%202%22%20d%3D%22M4.5%2C0%2C9%2C8H0Z%22%20transform%3D%22translate(438%201433)%20rotate(180)%22%20fill%3D%22%237b7b7b%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  margin-left: 7px;
}

footer {
  margin-top: 50px;
}

footer .footer-upper {
  padding: 65px 0 30px;
}

footer .footer-bottom {
  padding: 50px 0 10px;
}

footer .footer-link-01 {
  padding-left: 20px;
}

footer .footer-link-01:first-child {
  padding-left: 0;
}

footer .footer-link-01 dt {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.125em;
}

footer .footer-link-01 dd li {
  margin-bottom: 20px;
}

footer .footer-link-02 {
  margin-bottom: 50px;
}

footer .footer-link-02.col-auto li {
  width: auto;
  margin-right: 130px;
}

@media only screen and (max-width: 767px) {
  footer .footer-upper,
  footer .footer-link-02 {
    display: none;
  }
  footer .footer-bottom {
    padding: 10px;
    font-size: .625em;
    text-align: center;
  }
}

.tab-content {
  display: none;
  margin-top: -230px;
  padding-top: 230px;
}

.tab-content.is_show {
  display: block;
}

@media only screen and (max-width: 767px) {
  #top main,
  #other main {
    padding-top: 55px;
  }
}

.content-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .content-wrap {
    padding: 0 10px;
  }
}

@media only screen and (max-width: 767px) {
  .content-wrap {
    width: 100%;
    max-width: 100%;
  }
}

.content-inner {
  padding: 0 15px;
}

.content-inner-sec {
  padding: 35px 0;
  border-bottom: 1px solid #7B7B7B;
}

.content-inner-sec.undr-h1 {
  padding-top: 15px;
}

.content-inner-sec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .content-inner {
    padding: 0;
  }
  .content-inner-sec {
    padding: 30px 0 30px 0px;
  }
}

.breadcrumb {
  max-width: 1200px;
  margin: 20px auto 40px;
  display: flex;
}

.breadcrumb li {
  margin-left: 10px;
}

.breadcrumb li:after {
  content: ">";
  display: inline-block;
  margin-left: 10px;
}

.breadcrumb li:last-child:after {
  display: none;
}

@media only screen and (max-width: 767px) {
  .breadcrumb {
    font-size: .875em;
    margin: 10px auto 20px;
  }
}

.update {
  margin-bottom: 20px;
}

.map-area {
  margin-bottom: 30px;
  overflow-x: auto;
}

@media only screen and (max-width: 767px) {
  .map-area {
    margin-bottom: 10px;
  }
}

.map-img {
  width: 600px;
  height: 610px;
}

@media only screen and (max-width: 767px) {
  .map-img {
    width: 360px;
    height: 370px;
    margin: 0 auto;
  }
}

.map-img img {
  width: initial;
}

.usage {
  background: #F6F6F6;
  padding: 10px 20px;
  margin-bottom: 25px;
/*  display: flex;*/
  flex-wrap: wrap;
}

.usage li {
/*  width: 33%;
  padding-right: 10px;*/
}

.usage li:last-child {
  padding-right: 0;
}

.usage-02 {
  padding: 20px;
}

.usage.line-multiple {
  padding-bottom: 0;
}

.usage.line-multiple li {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .usage li {
    width: 50%;
  }
  .usage li:last-child {
    margin-bottom: 0;
  }
  .usage-02 {
    display: block;
  }
  .usage-02 li {
    width: 100%;
    margin-bottom: 10px;
  }
  .usage.line-multiple {
    padding: 20px;
  }
  .usage.line-multiple li {
    margin-bottom: 10px;
  }
}
.ac {
  float: right;
  margin-top: -610px;
  padding-right: 40px;
}

.ac > dt {
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}

.ac > dt:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  width: 14px;
  height: 8px;
  background: url("../images/ic_arrow.svg") no-repeat;
  background-size: contain;
  transition: 0.3s;
}

.ac > dt.active:after {
  transform: rotate(180deg);
}

.pagetop {
  text-indent: -9999px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: block;
  width: 50px;
  height: 50px;
  background: url("../images/btn_page.svg") no-repeat;
}

.anchor-link-01 {
  display: flex;
  margin-bottom: 20px;
}

.anchor-link-01 li {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #7B7B7B;
}

.anchor-link-01 li:last-child {
  border-right: none;
}

.anchor-link-01 li a:after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%228%22%20viewBox%3D%220%200%209%208%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20width%3D%229%22%20height%3D%228%22%20fill%3D%22none%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22ic_anchor_sp%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cg%20transform%3D%22translate(-429%20-1425)%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_2%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%202%22%20d%3D%22M4.5%2C0%2C9%2C8H0Z%22%20transform%3D%22translate(438%201433)%20rotate(180)%22%20fill%3D%22%237b7b7b%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  margin-left: 7px;
}

footer {
  margin-top: 50px;
}

footer .footer-upper {
  padding: 65px 0 30px;
}

footer .footer-bottom {
  padding: 50px 0 10px;
}

footer .footer-link-01 {
  padding-left: 20px;
}

footer .footer-link-01:first-child {
  padding-left: 0;
}

footer .footer-link-01 dt {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1.125em;
}

footer .footer-link-01 dd li {
  margin-bottom: 20px;
}

footer .footer-link-02 {
  margin-bottom: 50px;
}

footer .footer-link-02.col-auto li {
  width: auto;
  margin-right: 130px;
}

@media only screen and (max-width: 767px) {
  footer .footer-upper,
  footer .footer-link-02 {
    display: none;
  }
  footer .footer-bottom {
    padding: 10px;
    font-size: .625em;
    text-align: center;
  }
}

.tab-content {
  display: none;
  margin-top: -230px;
  padding-top: 230px;
}

.tab-content.is_show {
  display: block;
}

@media only screen and (max-width: 767px) {
  .tab-content {
    margin-top: 0;
    padding-top: 55px !important;
    min-height: calc(100vh - 160px);
  }
}

.iframe-inline {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .iframe-inline {
    width: 100%;
  }
}

article {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

@media only screen and (max-width: 767px) {
  article {
    padding: 0 20px;
  }
}

.icon-tyle-square, .usage .type-level-01:before, .usage .type-level-02:before, .usage .type-level-03:before, .usage .type-level-04:before, .usage .type-level-05:before, .usage .type-level-06:before, .usage .type-level-07:before, .usage .type-level-08:before, .usage .type-level-09:before, .usage .type-level-10:before, .usage .type-level-11:before, .usage .type-level-12:before, .usage .type-level-13:before, .usage .type-level-14:before, .usage .type-level-15:before, .usage .type-level-16:before, .usage .type-level-17:before, .usage .type-level-18:before, .usage .type-level-19:before, .usage .type-level-20:before, .usage .type-level-21:before, .usage .type-level-22:before, .usage .type-level-water-01:before, .usage .type-level-water-02:before, .usage .type-level-water-03:before, .usage .type-level-water-04:before, .usage .type-level-water-05:before, .usage .type-level-water-06:before, .usage .type-level-rain-01:before, .usage .type-level-rain-02:before, .usage .type-level-rain-03:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  margin-right: 10px;
  border: 1px solid #ACACAC;
  flex-shrink: 0;
}

.icon-tyle-triangle, .usage .type-level-tri-01::before, .usage .type-level-tri-02::before, .usage .type-level-tri-03::before, .usage .type-level-tri-04::before, .usage .type-level-tri-05::before, .usage .type-level-tri-06::before, .usage .type-level-rain-tri-01::before, .usage .type-level-rain-tri-02::before, .usage .type-level-rain-tri-03::before, .usage .type-level-rain-tri-04::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  z-index: 1;
  margin: 1px 10px 0 1px;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

@media only screen and (max-width: 767px) {
  .logo {
    width: 160px;
    height: 30px;
  }
  .logo img {
    width: 100%;
  }
}

.ttl-type-01 {
  font-size: 1.87em;
  font-weight: bold;
  color: #183D86;
  padding: 0 0 10px 15px;
  position: relative;
  margin-bottom: 20px;
  margin-top: 20px;
}

.ttl-type-01::before {
  position: absolute;
  left: 0;
  top: .3rem;
  content: "";
  display: block;
  width: 4px;
  height: 30px;
  background: #0055FF;
}

@media only screen and (max-width: 767px) {
  .ttl-type-01 {
    font-size: 1.25em;
    padding-bottom: 0;
  }
  .ttl-type-01::before {
    top: 0;
  }
}

.ttl-type-02 {
  font-size: 1.87em;
  font-weight: bold;
  color: #183D86;
  position: relative;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .ttl-type-02 {
    font-size: 1.25em;
  }
}

.usage .type-icon-01 {
  display: flex;
}

.usage .type-icon-01:before {
  content: '';
  width: 40px;
  height: 46px;
  display: block;
  margin-right: 10px;
  flex-shrink: 0;
}

.usage .type-icon-02 {
  display: flex;
  align-items: center;
}

.usage .type-icon-03 {
  display: flex;
}

.usage .type-icon-04 {
  display: flex;
  position: relative;
}

.usage .type-icon-04:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 28px solid #000000;
  position: absolute;
  z-index: 0;
}

.usage .type-water_level:before {
  background: url("../images/ic_water_level.png") no-repeat;
  background-size: contain;
}

.usage .type-rain_level:before {
  background: url("../images/ic_rain_level.png") no-repeat;
  background-size: contain;
}

.usage .type-level-01:before {
  background: #6EFECD;
}

td .usage .type-level-01 {
  background: #6EFECD;
}

.usage .type-level-02:before {
  background: #FFFD38;
}

.usage .type-level-03:before {
  background: #FDCA45;
}

.usage .type-level-04:before {
  background: #FF0000;
}

.usage .type-level-05:before {
  background: #000;
}

.usage .type-level-06:before {
  background: #AA00AA;
}

.usage .type-level-07:before {
  background: #FF2800;
}

.usage .type-level-08:before {
  background: #D13E32;
}

.usage .type-level-09:before {
  background: #777777;
}

.usage .type-level-10:before {
  background: #F2E700;
}

.usage .type-level-11:before {
  background: #B40068;
}

.usage .type-level-12:before {
  background: #FF9900;
}

.usage .type-level-13:before {
  background: #FFF500;
}

.usage .type-level-14:before {
  background: #0041FF;
}

.usage .type-level-15:before {
  background: #218CFF;
}

.usage .type-level-16:before {
  background: #A0D2FF;
}

.usage .type-level-17:before {
  background: #F2F2FF;
}

.usage .type-level-18:before {
  background: #6C008C;
}

.usage .type-level-19:before {
  background: #E62DFF;
}

.usage .type-level-20:before {
  background: #FF4600;
}

.usage .type-level-21:before {
  background: #FAF500;
}

.usage .type-level-22:before {
  background: #FFF;
}

.usage .type-level-tri-01 {
  position: relative;
}

.usage .type-level-tri-01::before {
  border-top: 26px solid #FF0000;
}

.usage .type-level-tri-02 {
  position: relative;
}

.usage .type-level-tri-02::before {
  border-top: 26px solid #FDCA45;
}

.usage .type-level-tri-03 {
  position: relative;
}

.usage .type-level-tri-03::before {
  border-top: 26px solid #FFFD38;
}

.usage .type-level-tri-04 {
  position: relative;
}

.usage .type-level-tri-04::before {
  border-top: 26px solid #6EFECD;
}

.usage .type-level-tri-05 {
  position: relative;
}

.usage .type-level-tri-05::before {
  border-top: 26px solid #FFFFFF;
}

.usage .type-level-tri-06 {
  position: relative;
}

.usage .type-level-tri-06::before {
  border-top: 26px solid #C3C3C3;
}

.usage .type-level-water-01:before {
  background: #660099;
}

td .usage .type-level-water-01 {
  background: #660099;
}

.usage .type-level-water-02:before {
  background: #FF0000;
}

td .usage .type-level-water-02 {
  background: #FF0000;
}

.usage .type-level-water-03:before {
  background: #FFFD38;
}

td .usage .type-level-water-03 {
  background: #FFFD38;
}

.usage .type-level-water-04:before {
  background: #6EFECD;
}

td .usage .type-level-water-04 {
  background: #6EFECD;
}

.usage .type-level-water-05:before {
  background: #FFFFFF;
}

td .usage .type-level-water-05 {
  background: #FFFFFF;
}

.usage .type-level-water-06:before {
  background: #222222;
}

td .usage .type-level-water-06 {
  background: #222222;
}

.usage .type-level-rain-01:before {
  background: #fa802e;
}

td .usage .type-level-rain-01 {
  background: #fa802e;
}

.usage .type-level-rain-02:before {
  background: #ffd685;
}

td .usage .type-level-rain-02 {
  background: #ffd685;
}

.usage .type-level-rain-03:before {
  background: #FFFFFF;
}

td .usage .type-level-rain-03 {
  background: #FFFFFF;
}

.usage .type-level-rain-04:before {
  background: #C3C3C3;
}

td .usage .type-level-rain-04 {
  background: #C3C3C3;
}

.usage .type-level-rain-tri-01 {
  position: relative;
}

.usage .type-level-rain-tri-01::before {
  border-top: 26px solid #FF6600;
}

.usage .type-level-rain-tri-02 {
  position: relative;
}

.usage .type-level-rain-tri-02::before {
  border-top: 26px solid #FFFD38;
}

.usage .type-level-rain-tri-03 {
  position: relative;
}

.usage .type-level-rain-tri-03::before {
  border-top: 26px solid #FFFFFF;
}

.usage .type-level-rain-tri-04 {
  position: relative;
}

.usage .type-level-rain-tri-04::before {
  border-top: 26px solid #C3C3C3;
}

.usage-cmt {
  padding-top: 5px;
  width: 300px;
}

.usage-cmt dt {
  font-weight: bold;
}

.col-02 {
  display: flex;
  justify-content: space-between;
}

.col-02-item {
  width: 48%;
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 767px) {
  .col-02 {
    display: block;
  }
  .col-02-item {
    width: 100%;
    margin-bottom: 25px;
  }
  .col-02-item:last-child {
    margin-bottom: 0;
  }
}

.col-03 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.col-03 > * {
  width: 32%;
}

@media only screen and (max-width: 767px) {
  .col-03 {
    display: block;
  }
  .col-03 > * {
    width: 100%;
  }
}

.col-auto {
  display: flex;
}

.col-auto > * {
  width: 20%;
}

.col-auto.auto > * {
  width: auto;
}

@media only screen and (max-width: 767px) {
  .col-auto {
    flex-direction: column;
  }
  .col-auto p {
    margin: 0 auto 20px;
  }
}

.table th,
.table td {
  padding: 10px 20px;
  border: 1px solid #ACACAC;
  font-weight: normal;
}

.table thead {
  background: #E8EFFC;
}

@media only screen and (max-width: 767px) {
  .table th,
  .table td {
    padding: 7px 10px;
  }
}

.table a {
  color: #0047D5;
  text-decoration: underline;
}

.table-01 tr td:first-child {
/*   width: 2.5rem;
  text-align: center; */
}

.table-01.thrd-r td:last-child {
  text-align: right;
  width: 15%;
}

.table-02 {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 20px;
}

.table-02 td {
  text-align: center;
  width: 10%;
}

.table-03 td {
  width: 33%;
}

.table-03 .head {
  background: #E8EFFC;
}

.table .type-level-01 {
  background: #6EFECD;
}

.table .type-level-02 {
  background: #FFFD38;
}

.table .type-level-03 {
  background: #FDCA45;
}

.table .type-level-04 {
  background: #FF0000;
}

.table .type-level-05 {
  background: #000;
  color: #FFF;
}

.table .type-level-05 a {
  color: #FFF;
}

.table .type-level-06 {
  background: #AA00AA;
  color: #FFF;
}

.table .type-level-06 a {
  color: #FFF;
}

.table .type-level-07 {
  background: #FF2800;
  color: #FFF;
}

.table .type-level-07 a {
  color: #FFF;
}

.table .type-level-08 {
  background: #D13E32;
  color: #FFF;
}

.table .type-level-08 a {
  color: #FFF;
}

.table .type-level-09 {
  background: #777777;
  color: #FFF;
}

.table .type-level-09 a {
  color: #FFF;
}

.table .type-level-10 {
  background: #F2E700;
}

.table .type-level-11 {
  background: #B40068;
  color: #FFF;
}

.table .type-level-11 a {
  color: #FFF;
}

.table .type-level-12 {
  background: #FF9900;
}

.table .type-level-13 {
  background: #FFF500;
}

.table .type-level-14 {
  background: #0041FF;
  color: #FFF;
}

.table .type-level-14 a {
  color: #FFF;
}

.table .type-level-15 {
  background: #218CFF;
  color: #FFF;
}

.table .type-level-15 a {
  color: #FFF;
}

.table .type-level-16 {
  background: #A0D2FF;
}

.table .type-level-17 {
  background: #F2F2FF;
}

.table .type-level-18 {
  background: #6C008C;
  color: #FFF;
}

.table .type-level-19 {
  background: #E62DFF;
  color: #FFF;
}

.table .type-level-20 {
  background: #FF4600;
  color: #FFF;
}

.table .type-level-21 {
  background: #FAF500;
}

.table .type-level-22 {
  background: #FFF;
}

.table .type-level-water-01 {
  background: #FF0000;
  color: #FFF;
}

.table .type-level-water-01 a {
  color: #FFF;
}

.table .type-level-water-02 {
  background: #FDCA45;
}

.table .type-level-water-03 {
  background: #FFFD38;
}

.table .type-level-water-04 {
  background: #6EFECD;
}

.table .type-level-water-05 {
  background: #FFFFFF;
}

.table .type-level-water-06 {
  background: #C3C3C3;
}

.table .type-level-rain-01 {
  background: #FF6600;
}

.table .type-level-rain-02 {
  background: #FFFD38;
}

.table .type-level-rain-03 {
  background: #FFFFFF;
}

.table.no-number tr td:first-child {
  width: auto;
  text-align: left;
}

.table-shelter tr td {
  text-align: left !important;
}

.table-shelter tr td:first-child {
  width: 70%;
}

.table-sub {
  width: auto;
  margin: 1em auto auto 2em;
}

.table-sub td {
  vertical-align: top;
}

.table-sub td.nowrap {
  white-space: nowrap;
}

.table-sub.tr-m td {
  padding-bottom: 1.2em;
}

.table.line-07 {
  width: 70%;
  table-layout: fixed;
}

.list {
  margin-left: 40px;
}

.list li {
  margin-bottom: 1.5em;
}

.list-type-sq li {
  list-style-type: square;
}

a[target="_blank"]:after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url("../images/ic_newwindow_gray.svg") no-repeat;
  background-size: contain;
  margin-left: 10px;
}

a.txt-link {
  color: #0047D5;
}

a.txt-link:hover {
  text-decoration: underline;
}

strong {
  font-weight: bold;
}

header a[target="_blank"]:after,
footer a[target="_blank"]:after {
  background: url("../images/ic_newwindow.svg") no-repeat;
  background-size: contain;
}

.is-sp {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .is-sp {
    display: block !important;
  }
  .is-pc {
    display: none;
  }
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn.btn_language {
  border: 1px solid #004e60;
  border-radius: 4px;
  padding: 4px 8px;
  color: #004e60;
  text-decoration: none;
  transition: 0.3s;
}

.btn.btn_language:hover, .btn.btn_language.current {
  background: #004e60;
  color: #FFF;
}

.btn.btn-nav-close {
  border-radius: 5px;
  background: #FFF;
  color: #001D54;
  width: 250px;
  padding: 10px;
  margin: 0 auto;
}

.btn.btn-nav-close:hover {
  text-decoration: none;
  background: #E4E4E4;
}

.btn-top {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 120px;
  background: #FFF;
  border-radius: 10px;
  padding: 20px 25px;
  font-size: 1.125em;
  border: 1px solid;
  position: relative;
}

.btn-top::before {
  content: '';
  display: block;
  width: 75px;
  height: 100%;
  flex-shrink: 0;
}

.btn-top:after {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.btn-top:hover {
  background: #E4E4E4;
  text-decoration: none;
}

.btn-top.type-01 {
  border-color: #008162;
  color: #008162;
}

.btn-top.type-01::before {
  background: url("../images/ic_top_btn-01.svg") no-repeat 0 center;
}

.btn-top.type-02 {
  border-color: #008162;
  color: #008162;
}

.btn-top.type-02::before {
  background: url("../images/ic_top_btn-02.svg") no-repeat 0 center;
}

.btn-top.type-03 {
  border-color: #7B7B7B;
  color: #7B7B7B;
}

.btn-top.type-03::before {
  background: url("../images/ic_top_btn-07.svg") no-repeat 0 center;
}

.btn-top.type-04 {
  border-color: #0065FD;
  color: #0065FD;
}

.btn-top.type-04::before {
  background: url("../images/ic_top_btn-04.svg") no-repeat 0 center;
}

.btn-top.type-05 {
  border-color: #9A6700;
  color: #9A6700;
}

.btn-top.type-05::before {
  background: url("../images/ic_top_btn-05.svg") no-repeat 0 center;
}

.btn-top.type-06 {
  border-color: #D14700;
  color: #D14700;
}

.btn-top.type-06::before {
  background: url("../images/ic_top_btn-06.svg") no-repeat 0 center;
}

.btn-top.type-08 {
  border-color: #0065FD;
  color: #0065FD;
}

.btn-top.type-08::before {
  background: url("../images/ic_top_btn-08.svg") no-repeat 0 center;
}

.btn-top.type-09 {
  border-color: #7B7B7B;
  color: #7B7B7B;
}

.btn-top.type-09::before {
  background: url("../images/ic_top_btn-09.svg") no-repeat 0 center;
}

.btn-top.type-10 {
  border-color: #7B7B7B;
  color: #7B7B7B;
}

.btn-top.type-10::before {
  background: url("../images/ic_top_btn-10.svg") no-repeat 0 center;
}

@media only screen and (max-width: 767px) {
  .btn-top {
    min-height: 100px;
    padding: 10px;
  }
  .btn-top:before {
    height: 75px;
  }
}

.border-under {
  border-bottom: 1px solid #183D86;
}

@media only screen and (max-width: 767px) {
  .border-under {
    padding-bottom: 10px;
  }
}
/*
.bg-blue {
  background: #183D86;
  color: #FFF;
}

.bg-blue a {
  color: #FFF;
}

.bg-navy {
  background: #001D54;
  color: #FFF;
}

.bg-navy a {
  color: #FFF;
}
*/
.bg-blue {
  background: #007d9a;
  color: #FFF;
}

.bg-blue a {
  color: #FFF;
}

.bg-navy {
  background: #004e60;
  color: #FFF;
}

.bg-navy a {
  color: #FFF;
}


.list-link {
  margin: 30px 0;
}

.list-link a {
  display: block;
  padding-left: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.864%22%20height%3D%2212.006%22%20viewBox%3D%220%200%206.864%2012.006%22%3E%20%3Cpath%20id%3D%22Icon_ionic-ios-arrow-back.svg%22%20data-name%3D%22Icon%20ionic-ios-arrow-back.svg%22%20d%3D%22M13.32%2C12.195l4.543-4.539a.858.858%2C0%2C1%2C0-1.215-1.212L11.5%2C11.587a.856.856%2C0%2C0%2C0-.025%2C1.183l5.168%2C5.179a.858.858%2C0%2C0%2C0%2C1.215-1.212Z%22%20transform%3D%22translate(18.114%2018.199)%20rotate(180)%22%20fill%3D%22%237b7b7b%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 0 5px;
}

.list-link.m-20 {
  margin: 20px 0;
}

@media only screen and (max-width: 767px) {
  .ul-list-link .list-link {
    margin: 0 0 15px;
  }
  .ul-list-link .list-link:last-child {
    margin-bottom: 15px;
  }
}

.ul-list-link.type-02 .list-link a {
  font-weight: bold;
}

.ul-list-link.type-02 .list-link .list-supplement {
  margin: 10px 0 0 30px;
  font-size: .87em;
}

@media only screen and (max-width: 767px) {
  .ul-list-link.type-02 .list-link .list-supplement {
    color: #7B7B7B;
  }
}

#top .information {
  width: 100%;
  padding: 60px 0;
  background: url("../images/bg_top_main.png") no-repeat top center;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  #top .information {
    padding: 20px 10px;
  }
}

#top .information-wrap {
  background: #FFF;
/*  border-top: 6px solid #777777;*/
}

#top .information-ttl {
  font-size: 1.875em;
  font-weight: bold;
  color: #777777;
  margin-bottom: 25px;
}

#top .information-ttl-area {
  padding-top: 25px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #top .information-ttl {
    margin-bottom: 10px;
    font-size: 1.25em;
  }
  #top .information-ttl-area {
    padding-top: 15px;
  }
}

#top .information-active {
  background: #EB0000;
  color: #FFF;
  font-size: 2.5em;
  line-height: 1;
  font-weight: bold;
  padding: 20px;
  width: 270px;
  margin:5px;
}

#top .information-active::before {
  content: '';
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2237%22%20viewBox%3D%220%200%2042%2037%22%3E%20%3Cg%20id%3D%22ic_alert%22%20transform%3D%22translate(-842.899%20-399.064)%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M19.5%2C0%2C39%2C34H0Z%22%20transform%3D%22translate(844.399%20400.564)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_107%22%20data-name%3D%22%E3%83%91%E3%82%B9%20107%22%20d%3D%22M.3%2C12.475a.4.4%2C0%2C0%2C1%2C.4-.4H2.734a.4.4%2C0%2C0%2C1%2C.4.4V14.49a.4.4%2C0%2C0%2C1-.4.4H.7a.4.4%2C0%2C0%2C1-.4-.4ZM0%2C.577A.555.555%2C0%2C0%2C1%2C.571%2C0h2.29a.555.555%2C0%2C0%2C1%2C.57.578l-.678%2C9.536H.659Z%22%20transform%3D%22translate(861.825%20413.95)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: .7em;
}

@media only screen and (max-width: 767px) {
  #top .information-active {
    padding: 15px 0;
    font-size: 1.25em;
  }
  #top .information-active::before {
    width: 30px;
    height: 26px;
  }
}

#top .information-data {
  padding: 0 30px;
}

#top .information-data li {
  display: flex;
  padding: 30px;
  border-bottom: 1px solid #D1D1D1;
}

#top .information-data li:last-child {
  border-bottom: none;
}

@media only screen and (max-width: 767px) {
  #top .information-data {
    padding: 0 20px;
  }
  #top .information-data li {
    display: block;
    padding: 10px 0 20px;
  }
}

#top .information-date {
  flex-shrink: 0;
  width: 10em;
}

@media only screen and (max-width: 767px) {
  #top .information-date {
    width: 100%;
    margin-bottom: 10px;
  }
}

#top .information-pdf:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: .5em;
  background: url("../images/ic_pdf.svg") no-repeat;
  width: 24px;
  height: 24px;
  background-size: contain;
}

#top footer {
  margin-top: 0;
}

.top-map {
  background: #E8EFFC;
  padding: 45px 0;
}

.top-map-ttl {
  color: #183D86;
  font-size: 1.875em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.top-map-ttl:before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1.875em;
  vertical-align: middle;
  margin-right: .5em;
  background: url("../images/ic_top_mapttl.svg") no-repeat;
  background-size: contain;
}

@media only screen and (max-width: 767px) {
  .top-map {
    padding: 20px 10px;
  }
  .top-map-ttl {
    display: none;
  }
}

.top-map-area {
  position: relative;
}

.top-map-area img {
  width: 100%;
  height: auto;
}

.top-map-area-ul li {
  position: absolute;
}

.top-map-area-ul li#btn-01 {
  top: 50px;
  left: 50px;
}

.top-map-area-ul li#btn-02 {
  top: 10px;
  left: 40%;
}

.top-map-area-ul li#btn-03 {
  top: 25%;
  right: 5%;
}

.top-map-area-ul li#btn-04 {
  bottom: 100px;
  left: 30px;
}

.top-map-area-ul li#btn-05 {
  top: calc((100% - 115px) / 2);
  left: 40%;
}

.top-map-area-ul li#btn-06 {
  bottom: 140px;
  right: 50px;
}

.top-map-area-ul li#btn-07 {
  bottom: 0px;
  left: 40%;
}

@media screen and (max-width: 1200px) {
  .top-map-area-ul li {
    width: 22.5vw;
    height: auto;
  }
}

.top-map-area-ul li a[target="_blank"] {
  position: relative;
}

.top-map-area-ul li a[target="_blank"]:after {
  display: none;
}

@media only screen and (max-width: 767px) {
  .top-map-area {
    display: none;
  }
}

.top-btn-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}

.top-btn-area li {
  width: 32%;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .top-btn-area {
    display: block;
    margin-top: 0;
  }
  .top-btn-area li {
    width: 100%;
  }
  .top-btn-area li:last-child {
    margin-bottom: 0;
  }
}

.top-link {
  background: #DBF3EB;
  padding: 50px 0;
}

.top-link-item {
  width: 48%;
  background: #FFF;
  text-align: center;
  border-radius: 10px;
  padding: 20px 30px 10px;
}

.top-link-item-ttl {
  color: #188665;
  font-size: 1.625em;
  font-weight: bold;
  padding: 10px 0px;
  border: 1px solid #188665;
/*  margin-bottom: 15px;*/
  text-align: center;
  background-color: #fafafa;
}

.top-link-item-ttl::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: .5em;
}

.top-link-item-ttl.type-01:before {
  width: 1.5em;
  height: 1.3em;
  background: url("../images/ic_book.svg") no-repeat;
  background-size: contain;
}

.top-link-item-ttl.type-02:before {
  width: 1.3em;
  height: 1.4em;
  background: url("../images/ic_house.svg") no-repeat;
  background-size: contain;
}

.top-link-item .list-link {
  text-align: left;
  margin-top: 0;
}

@media only screen and (max-width: 767px) {
  .top-link {
    padding: 20px 10px;
  }
  .top-link-item {
    width: 100%;
    margin-bottom: 20px;
  }
  .top-link-item:last-child {
    margin-bottom: 0;
  }
  .top-link-item-ttl {
    font-size: 1.25em;
  }
}

.attention footer {
  margin-top: 30vh;
}

@media only screen and (max-width: 767px) {
  .attention footer {
    margin-top: initial;
  }
}

_:-ms-lang(x)::-ms-backdrop, li {
  list-style: none;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li {
  padding: 0 5px;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li > a {
  width: 100%;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li.no-child > a {
  width: 100%;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li > a::after {
  display: none;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li.no-child > a::after {
  display: none;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li.no-child a:hover:after {
  display: none;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li > a {
  border-bottom: 5px solid transparent;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li > a:hover {
  border-bottom: 5px solid #0055FF;
}

_:-ms-lang(x)::-ms-backdrop, .menu .gnavi > ul > li > a.selected {
  border-bottom: 5px solid #0055FF;
}

_:-ms-lang(x)::-ms-backdrop, .dropdown-wrap {
  padding-bottom: 3px;
}

_:-ms-lang(x)::-ms-backdrop, .dropdown-detail {
  margin-top: 5px;
}

_:-ms-lang(x)::-ms-backdrop, .map-img {
  height: 807px;
}

@media only screen and (max-width: 767px) {
  _:-ms-lang(x)::-ms-backdrop, .map-img {
    height: 260px;
  }
}

_:-ms-lang(x)::-ms-backdrop, .usage .type-icon-04::after {
  top: 0;
  left: 0;
}

.openbtn{
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  background:#fff;
  cursor: pointer;
  width: 50px;
  height:50px;
  border-radius: 5px;
}

/*ボタン内側*/
.openbtn span{
  display: inline-block;
  transition: all .4s;/*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 2px;
  border-radius: 5px;
  background: #001D54;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
  top:13px;
}

.openbtn span:nth-of-type(2) {
  top:19px;
}

.openbtn span:nth-of-type(3) {
  top:25px;
}

.openbtn span:nth-of-type(3)::after {
  content:"menu";
  position: absolute;
  top:5px;
  left:-2px;
  color: #001D54;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.openbtn.active span:nth-of-type(1) {
  top: 14px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 26px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
  content:"close";
  transform: translateY(0) rotate(-45deg);
  top:5px;
  left:4px;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 24px 0 32px 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 1;
    height: 1500px;
    background-color: #f4fbfd;
    background: linear-gradient(180deg, rgba(0,121,151, 0.6), rgba(244, 251, 253, 0.6)),url("../images/backgroundImage.jpg") no-repeat;
    background-position: top;
}

.container {
/*    min-height:300px;*/
    margin:0 auto;
    padding-top:30px;
    width: 1200px;

}

/* 緊急情報 */
#emergencyInfo {
    border: solid 3px #dc143c;
    background: #f7cfcd;
}
#emergencyInfo .headline {
    background: initial;
    border-bottom: none;
}
#emergencyInfo h2 {
    color: #dc143c;
    font-weight: bold;
}
#emergencyInfo .InfoTable {
    background: initial;
    padding: 0 0 4px 4px;
}
#emergencyInfo h3 {
    color: #dc143c;
    font-weight: bold;
    text-indent: 8px;
    margin: 0;
}
#emergencyInfo span {
    font-size: 12px;
    padding: 0 0 0 16px;
    color: #1e50a2;
}

.emergencyBox {
    width: 95%;
    font-size: 24px;
    color: #ffffff;
    padding: 0;
    margin: 0 0 0 12px;
    display: inline-block;
    border-radius: 8px;
}
.alertLevel1 {
    background-color: #3399ff;
    border: solid 3px #3399ff;
}
.alertLevel2 {
    background-color: #e6b422;
    border: solid 3px #e6b422;
}
.alertLevel3 {
    background-color: #e2041b;
    border: solid 3px #e2041b;
}
.alertLevel4 {
    background-color: #660099;
    border: solid 3px #660099;
}
.alertLevel5 {
    background-color: #000000;
    border: solid 3px #000000;
}

/* 警報・注意報 */
#weather-info {
    border: 1px solid #61c2d8;
    height: auto;
    background-color: #ffffff;
    border-radius: 8px;
}

#weather-info a {
    position: relative;
    display: inline-block;
    padding: 0.2em 0.3em;
    text-decoration: none;
    font-size: 15px;
    float: right;
}

#weather-info table {
    width: 97%;
    height: 74%;
    background-color: #ffffff;
    border-collapse: separate;
    text-align: center;
    padding: 10px 0px 0px 16px;
}
#weather-info .warning-label {
    padding: 0 5px;
    margin: 0 5px;
    width:240px;
    height:50px;
    text-align:center;
    padding-top:12px;
}
#weather-info .headline {
/*    background-color: #f4fbfd;*/
}
#weather-info .warning-label.label-normal {
    color: #aaa;
    background-color: #eee;
}
#weather-info .warning-label.label-advisory {
    background-color: #F2E700;
}
#weather-info .warning-label.label-warning {
    background-color: #FF2800;
    color: #ffffff;
}
#weather-info .warning-label.label-special {
    background-color: #0C000C;
    color: #ffffff;
}
#weather-info .warning-label.label-special-takasio {
    background-color: #AA00AA;
    color: #ffffff;
}

/* お知らせ */
#newsInfo {
    border: 1px solid #61c2d8;
    height: auto;
    background-color: #ffffff;
    border-radius: 8px;
}

#news-list table {
    width: 98%;
    height: 74%;
    margin: 10px;
    background-color: #ffffff;
}

#news-list table td {
    padding: 5px;
;
}
#news-list table tr:first-child td {
}
#news-list table tr:last-child td {
}

.NewsRow {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}
.NewsRow a {
    color: #777777;
/*     text-decoration: none; */
}

.notice-text {
    margin-left: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 500px;
}

.left-box {
    float: left;
    width: 590px;
}

.right-box {
    float: right;
    width: 590px;
}

.left-box-map {
    float: left;
    width: 440px;
    padding-top: 10px;
}

.right-box-map {
    float: right;
    width: 600px;
    padding-top: 10px;
}

.headline .LikeButton {
    font-size: 16px;
    border: solid 2px #627295;
    background-color: #DFEFFF;
    border-radius: 6px;
}

.cp_textlink {
    position: relative;
    display: inline-block;
    padding: 1.0em 1.0em;
    text-decoration: none;
    float: right;
    color: #2b66dc;
}
.cp_textlink:after {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    transition: all 0.3s ease;
    opacity: 0;
    border-radius: 10px;
    background-color: #387FFC;
}
.cp_textlink:hover:after {
    bottom: 0;
    height: 100%;
    opacity: 0.3;
}

.rain-water-info, .hinan-info, .hinanjo-info {
    border: 1px solid #61c2d8;
    background-color: #ffffff;
}

.rain-water-info {
    margin-top: 50px;
    height: 230px;
    border-radius: 8px;
}

.hinanjo-info {
    margin-top: 50px;
    border-radius: 8px;
}

.hinanjo-info ul {
    padding: 8px;
}

.hinanjo-info ul li {
    padding: 8px;
    background-color: #ffffff;
}

.hinanjo-info-cnt, .obserb-info-value {
    float: right;
    margin-right: 10px;
}

.hinan-info {
    margin-top: 50px;
    border-radius: 8px;
}

.hinan-info p {
    padding: 8px 4px;
}

.hinan-info ul {
    border-bottom: 1px solid #61c2d8;
    padding: 8px;
}
.hinan-info ul li {
/*    border-bottom: 1px solid #61c2d8;*/
    padding: 8px;
    background-color: #ffffff;
}

.hinan-info ul li:last-child {
    border-bottom: 0px none;
}

.map-select-group:last-child {
    border-top: 1px dashed #808080;
    border-bottom: 1px dashed #808080;
}

.map-select-group h3 {
    display: inline-block;
    padding-top: 5px;
}

.radio-label {
    position: relative;
    vertical-align: middle;
}

.radio-label span {
    display: inline-block;
    padding: 6px 5px;
    vertical-align: middle;
}

.map-data-table {
    width: 35%;
}


.up::after {
    content: " ∧";
    right: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    color: black;
}

.down::after {
    content: " ∨";
    right: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    color: black;
}


.wrap-map-select {
    height: 650px;
}

.weather-data-info {
    min-height: 44px;
    border-radius: 10px;
    background-color: #eee;
    position: relative;
    justify-content: center;
}

.weather-data-info button {
   font-size: 24px;
   margin: 10px 10px;
   width: 96%;
}

.weather-select {
    top: 0;
    right: 4px;
    bottom: 0;
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 16%);
    border-radius: 8px;
    background-color: #fff;
}

.weather-data {
    margin-top: 50px;
    border-radius: 8px;
    border: 1px solid #61c2d8;
}

.weather-data-list {
    width: 100%;
    margin: 0 auto;
    background-color: #fafafa;
    border-radius: 0px 0px 8px 8px;
}

.weather-data-list h2 {
    padding: 5px 0px;
    font-size: 24px;
}

.weather-data-list table {
    width: 100%;
}

.weather-data-list table thead {
    display: table-header-group;
}

.weather-data-list table tr {
    text-align: center;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
}

.weather-data-list table tr th {
    line-height: 1.5rem;
    padding: 5px 0px;
}

.weather-data-list table tr td {
    line-height: 1.5rem;
    padding: 5px 0px;
}

.hidden_row {
    display: none;
    background-color: #f4f9fb;
}

.hidden_row td {
    border-left: hidden;
    border-right: hidden;
    border-top: 1px dashed silver;
    border-bottom: 1px dashed silver;
    padding: 4px 10px;
}

.hidden_raw_table {
   border-collapse: separate;
   border-spacing: 4px;
}

.hidden_raw_table td {
   border: none;
   width: 200px;
   background-color: #ffffff;
   padding: 4px 10px;
}

.hidden_raw_header {
   width:180px;
   background-color: #c6dfe5;
}

.hidden_raw_nosel {
   background-color: #f4f9fb !important;
}

.hinanjo_sts_notclear {
   color: #222222;
   font-weight: bold;
}

.hinanjo_sts_yes {
   color: #00b440;
   font-weight: bold;
}

.hinanjo_sts_part {
   color: #ff5e00;
   font-weight: bold;
}

.hinanjo_sts_no {
   color: #e90000;
   font-weight: bold;
}

.mapInfo {
    float:right;
    max-height: 630px;
    min-height: 480px;
    height: calc(100vh - 120px);
    width: 760px;
    border: 1px solid #aaa;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.shelterInfo {
   position: absolute;
   top: 920px;
   width: 440px;
   height: 240px;
   display: none;
   overflow-y: scroll;
}

.hinajo-detail-table td {
   border: 1px solid silver;
}

.shelter-child td {
   border: none;
}

.headline {
    background-color: #ffffff;
    border-bottom: 1px solid #61c2d8;
    overflow: hidden;
    height: 50px;
    padding-bottom: 40px;
    border-radius: 8px 8px 0px 0px;
}
.headline h2 {
    margin: 4px;
    vertical-align: baseline;
    line-height: 50px;
    text-indent: 8px;
    float: left;
}
.headline .timestamp {
    display: inline-block;
    vertical-align: middle;
    margin: 16px;
    padding-left: 117px;
}

.icon-selected {
    border: 1px solid red!important;
    animation: bbmap-anim-blink 1s ease-in-out infinite alternate
}

.rain-water-info ul li {
    border-bottom: 1px solid #61c2d8;
    padding: 8px;
    background-color: #ffffff;
}

.rain-water-area {
    padding: 5px;
    font-size: 24px;
}

.rain-water-info ul li p {
    padding: 10px;
    margin: 5px;
}

.rain-water-info ul li:last-child {
    border-bottom: 0px none;
}

.hinansya_color1 {
    background-color: #00fa00;
}

.hinansya_color2 {
    background-color: #3cffff;
}

.hinansya_color3 {
    background-color: #faf600;
}

.hinansya_color4 {
    background-color: #fa4600;
}

.icon_context {
    font-size:16px;
    background-color: #fff;
    border: 1px solid #f00;
}

.search_btn {
    width:10%;
    margin: -40px 10px;
    background: #007f9b;
    color: #ffffff;
    height: 40px;
    border-radius: 8px;
    float: right;
}

.sp-button-area {
    width: 100%;
    margin-top: 10px;
}

.sp-button-area button{
    width: 42%;
    border: 1px solid silver;
}

.weather-img {
    width: 75px;
    height: 40px;
}

.hinajo-area {
    padding: 8px 4px;
}

.select {
   width:260px;
   border:1px solid silver;
   appearance: none;
   outline: 0;
   background: #fff;
   background-image: none;
   box-shadow: none;
   text-indent: 0.01px;
   text-overflow: ellipsis; // 文字の省略
   cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.9) 50%),  linear-gradient(135deg, rgba(0,0,0,0.9) 50%, transparent 50%);
    background-size: 10px 10px, 10px 10px;
    background-position: calc(100% - 15px) 40%, calc(100% - 5px) 40%;
    background-repeat: no-repeat;
}

.shelterList {
    height: 631px;
    overflow-y: scroll;
}

#map-legend-button {
    font-size: 14px;
    color: #444;
    background-color: #8FF;
    border-radius: 5px;
    border: 1px solid #005FFF;
    width: 45px;
}

.top-item-ttl {
  color: #007d7c;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #ffffff;
}

.top-item-ttl::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: .2em;
}

.top-item-ttl.type-01::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_top_btn-01.svg") no-repeat;
  background-size: contain;
  margin-bottom: 2px;
}

.top-item-ttl.type-02::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_top_btn-02.svg") no-repeat;
  background-size: contain;
  margin-bottom: 6px;
}

.top-item-ttl.type-04::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_top_btn-04.svg") no-repeat;
  background-size: contain;
}

.top-item-ttl.type-06::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_top_btn-06.svg") no-repeat;
  background-size: contain;
  margin-bottom: 8px;
}

.top-item-ttl.type-08::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_top_btn-08.svg") no-repeat;
  background-size: contain;
  margin-top: 4px;
}

.top-item-ttl.type-09::before {
  width: 1.3em;
  height: 1.1em;
  background: url("../images/ic_notice.svg") no-repeat;
  background-size: contain;
  margin-bottom: 4px;
}

.top-item-ttl.type-10::before {
  width: 1.5em;
  height: 1.3em;
  background: url("../images/ic_kisyoukeihou.svg") no-repeat;
  background-size: contain;
}

.area-name {
   position: absolute;
   font-weight:bold;
   color:#ffffff;
   font-size:18px;
   -webkit-text-stroke: 1px #4f6228;
   text-stroke: 1px #4f6228;
   width:72px;
}

.area-name-s {
   position: absolute;
   font-weight:bold;
   color:#ffffff;
   font-size:18px;
   -webkit-text-stroke: 1px #4f6228;
   text-stroke: 1px #4f6228;
   width:53px;
}

.top_area_btn {
   border: 2px solid #c9d7f4;
   background-color: #f5f7ff;
   color: #1f5ad9;
   text-align: center;
   width: 100px;
   border-radius: 4px;
   height: 36px;
}

.information {
  width: 100%;
  padding: 60px 0;
  background: url("../images/bg_top_main.png") no-repeat top center;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .information {
    padding: 20px 10px;
  }
}

.information-wrap {
  background: #FFF;
  border-radius: 8px;
}

.information-ttl {
  font-size: 1.875em;
  font-weight: bold;
  color: #777777;
  margin-bottom: 25px;
}

.information-ttl-area {
  padding-top: 25px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .information-ttl {
    margin-bottom: 10px;
    font-size: 1.25em;
  }
  .information-ttl-area {
    padding-top: 15px;
  }
}

.information-active {
  background: #EB0000;
  color: #FFF;
  font-size: 34px;
  line-height: 1;
  font-weight: bold;
  padding: 20px;
  width: 240px;
  margin:5px;
  border-radius: 8px 0px 0px 8px;
}

.information-active::before {
  content: '';
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2237%22%20viewBox%3D%220%200%2042%2037%22%3E%20%3Cg%20id%3D%22ic_alert%22%20transform%3D%22translate(-842.899%20-399.064)%22%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M19.5%2C0%2C39%2C34H0Z%22%20transform%3D%22translate(844.399%20400.564)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_107%22%20data-name%3D%22%E3%83%91%E3%82%B9%20107%22%20d%3D%22M.3%2C12.475a.4.4%2C0%2C0%2C1%2C.4-.4H2.734a.4.4%2C0%2C0%2C1%2C.4.4V14.49a.4.4%2C0%2C0%2C1-.4.4H.7a.4.4%2C0%2C0%2C1-.4-.4ZM0%2C.577A.555.555%2C0%2C0%2C1%2C.571%2C0h2.29a.555.555%2C0%2C0%2C1%2C.57.578l-.678%2C9.536H.659Z%22%20transform%3D%22translate(861.825%20413.95)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: .7em;
}

@media only screen and (max-width: 767px) {
  .information-active {
    padding: 15px 0;
    font-size: 1.25em;
  }
  .information-active::before {
    width: 30px;
    height: 26px;
  }
}

.information-data {
  padding: 0 30px;
}

.information-data li {
  display: flex;
  padding: 30px;
  border-bottom: 1px solid #D1D1D1;
}

.information-data li:last-child {
  border-bottom: none;
}

@media only screen and (max-width: 767px) {
  .information-data {
    padding: 0 20px;
  }
  .information-data li {
    display: block;
    padding: 10px 0 20px;
  }
}

.information-date {
  flex-shrink: 0;
  width: 140px;
  padding-left: 20px;
  vertical-align: top;
}

.information-detail {
  flex-shrink: 0;
  width: 800px;
  padding-left: 20px;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 767px) {
  .information-date {
    width: 100%;
    margin-bottom: 10px;
  }
}

.information-pdf:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: .5em;
  background: url("../images/ic_pdf.svg") no-repeat;
  width: 24px;
  height: 24px;
  background-size: contain;
}

.emargencyTable td {
    background-color:#ffffff;
}

.map-select-group label {
    padding-left: 20px;
}

.hatureilevel {
    float:left;
    font-size: 16px;
    padding-top: 7px;
    padding-left: 16px;
}

.hatureilabel5, .hatureilabel3 {
    padding-left: 90px;
}

.hatureilabel4 {
    padding-left: 112px;
}

.emargencyInfo {
	border-collapse: separate;
	margin: 0px 8px;
	table-layout: fixed;
}

.keihatubanner {
    padding-top: 340px;
    margin-top: 20px;
    background-image: url("../images/keihatu_header_pc.jpg");
}

.keihatucategry1 {
    padding-top: 100px;
    background-image: url("../images/keihatu_category1_pc.jpg");
    cursor: pointer;
}

.keihatucategry2 {
    padding-top: 120px;
    background-image: url("../images/keihatu_category2_pc.jpg");
    cursor: pointer;
}

.keihatucategry3 {
    padding-top: 100px;
    background-image: url("../images/keihatu_category3_pc.jpg");
    cursor: pointer;
}

.keihatucategry4 {
    padding-top: 100px;
    background-image: url("../images/keihatu_category4_pc.jpg");
    cursor: pointer;
}

.keihatuList {
    padding: 0px;
}

.map-info-area {
    height:700px;
}

.noalert {
    text-align: left;
}

.observeno {
    width:65px;
    text-align: center;
}

.map-icon {
    float:right;
    width:2.5em;
    height:2.5em;
    margin-bottom: -16px;
    margin-top: -8px;
}

.target-detail-table td {
    border: 1px solid silver;
}

.top-keihatu {
    padding-top: 304px
}

.contentsup{
	cursor: pointer;
}

.contentsdown{
	cursor: pointer;
    background-color: rgba(24,61,134,0.85);
    color: #ffffff;
}

.contentsup::before {
    content: '';
    display: inline-block;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    border-right: 10px solid transparent;
    margin-right: 0.5em;
    transition: all .6s;
    cursor: pointer;
}

.contentsup:hover {
    background-color: rgba(24,61,134,0.85);
    color: #ffffff;
}

.contentsdown::before {
    content: '';
    display: inline-block;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    border-right: 10px solid transparent;
    margin-right: 0.5em;
    transition: all .6s;
    transform: rotate(90deg);
    cursor: pointer;
}

.icon-font {
    position: absolute;
    padding-top: 15px;
    padding-left: 10px;
}

@media only screen and (max-width: 767px) {

    .wrapper {
        height: auto;
        background: linear-gradient(180deg, rgba(0,121,151, 0.6), rgba(244, 251, 253, 0.6));
        background-color: #f4fbfd;
        background-position: top;
    }

    .information-active {
      background: #EB0000;
      color: #FFF;
      font-size: 24px;
      line-height: 1;
      font-weight: bold;
      padding: 10px;
      width: 100px;
      margin: 0px;
      text-align: center;
      border-radius: 8px;
    }

    .information-wrap {
        width: 98%;
        margin: 0px 3px;
    }

    .emargencyInfo {
        margin: 0px;
    }

    .emargencyInfo a {
        padding-left: 20px;
    }

    .headline {
        background-color: #ffffff;
        border-bottom: 2px solid #61c2d8;
        overflow: hidden;
        height: 28px;
        padding-bottom: 40px;
        width: 100%;
    }

    .headline h2 {
        font-size: 20px;
        line-height: 34px;
    }

    .timestamp {
        font-size: 16px;
        float: right;
        margin-top: -10px;
        margin-bottom: 10px;
    }

    .container {
        min-height:80px;
        margin:0 auto;
        padding-top:0px;
        width: 100%;
    }

    #weather-info {
        border: 1px solid #61c2d8;
        height: auto;
        background-color: #ffffff;
        margin: 15px 3px 0px 3px;
        border-radius: 8px;
    }

    .weather-data-info button {
        font-size: 18px;
    }

    .rain-water-info, .hinan-info, .hinanjo-info {
        border-radius: 8px;
        margin: 0px 3px;
    }

    .NewsRow {
        font-size: 16px;
    }

    #newsInfo {
        width: 98%;
        margin: 15px 3px;
        border-radius: 8px;
    }

    #news-list table {
        width: 97%;
        height: 74%;
        margin: 10px;
        background-color: #ffffff;
    }

    #weather-info table {
        word-break: keep-all;
        height: 55%;
    }

    #weather-info table td {
        font-size: 16px;
        padding-left: 0px;
    }

    .rain-water-info {
        margin-top: 15px;
    }

    .hinanjo-info {
        margin-top: 15px;
    }

    .btn-top {
        width: 100%;
    }


    .hinanjo-info-cnt {
        float: right;
        margin-right: -160px;
    }

    .hinan-info {
        margin-top: 15px;
    }

    .collectionAlertDateTime, .weahterDate {
        margin-top: 0px;
        margin-right: 20px;
    }

    .weather-data {
        margin: 15px 3px 0px 3px;
    }

    .weather-data-list {
        width: 100%;
    }

    .weather-img {
        width: 50px;
       height: 30px;
    }

    #top footer {
        margin-top: 750px;
    }

    .wrap-map-select {
        height: auto;
    }

    .map-select-group h3 {
        display: block;
        padding-top: 5px;
    }

    .radio-label {
        position: relative;
        vertical-align: middle;
        padding: 10px;
    }

    .radio-label span {
        display: inline-block;
        padding: 6px 5px;
        vertical-align: middle;
    }

    .map-data-table {
        width: 100%;
    }

    .mapInfo {
        max-height: 100vh;
        min-height: 60vh;
        height: 60vh;
        width: 100%;
        border: 1px solid #aaa;
        box-sizing: border-box;
         position: relative;
        overflow: hidden;
    }

    .shelterList {
        height: 60vh;
    }

    .shelterInfo {
        position: static;
        left: 20px;
        display:none;
    }

    .weather-data-list h2 {
        padding: 5px 0px;
        font-size: 20px;
    }

    .weather-data-list table tr {
        font-size: 16px;
    }

    .cp_textlink {
        position: relative;
        display: inline-block;
        padding: 0.2em 0.3em;
        text-decoration: none;
        font-size: 16px;
        float: right;
        margin-top: 4px;
    }

    .emergencyBox {
        width: 98%;
        font-size: 20px;
        color: #ffffff;
        padding: 0;
        margin: 0px;
        display: inline-block;
        border-radius: 8px;
    }

    .hatureilevel {
        float:left;
        font-size: 16px;
        padding-top: 3px;
        padding-left: 16px;
    }

    .hatureilabel5, .hatureilabel3 {
        padding-left: 20px;
    }

    .hatureilabel4 {
        padding-left: 42px;
    }

    .hinan-info p {
        padding: 8px 4px;
        font-size:16px;
    }

    .hinanjo-info p {
        font-size:16px;
    }

    .rain-water-area {
        padding: 5px;
        font-size: 20px;
    }

    .rain-water-info ul li p {
        font-size: 16px;
    }

    .rain-water-info {
        height: 230px;
    }

    .icon_context {
        font-size:14px;
        background-color: #fff;
        border: 1px solid #f00;
    }

    .hazard-menu span::after {
        content: "\025b2";
    }

    .hazard-menu.active span::after {
        content: "\025bc";
    }

    .ac {
        float: none;
        margin-top: 0px;
    }

    .right-box-map {
        float: none;
        width: 100%;
        padding-top: 10px;
    }

    .left-box-map {
        float: none;
        width: 100%;
        padding-top: 10px;
    }

    #shelterTable {
        font-size: 14px;
    }

    .hidden_row {
        display: none;
        background-color: #ffffff;
    }

    .hidden_raw_table {
        border-collapse: collapse;
        border-spacing: 0px;
    }

    .hidden_raw_table td {
        padding: 4px 10px;
    }

    .hidden_raw_header {
       width:31%;
       background-color: #c6dfe5;
    }

    .hidden_raw_table td {
        width: 33%;
    }

    .keihatubanner {
        padding-top: 230px;
        background-image: url("../images/keihatu_header_sp.jpg");
        background-size: contain;
    }

    .keihatucategry1 {
        padding-top: 50px;
        margin-top: 20px;
        background-image: url("../images/keihatu_category1_sp.jpg");
        background-size: contain;
    }

    .keihatucategry2 {
        padding-top: 65px;
        margin-top: 20px;
        background-image: url("../images/keihatu_category2_sp.jpg");
        background-size: contain;
    }

    .keihatucategry3 {
        padding-top: 50px;
        margin-top: 20px;
        background-image: url("../images/keihatu_category3_sp.jpg");
        background-size: contain;
    }

    .keihatucategry4 {
        padding-top: 50px;
        margin-top: 20px;
        background-image: url("../images/keihatu_category4_sp.jpg");
        background-size: contain;
    }

    .map-info-area {
        height:100%;
    }

    .noalert {
        font-size: 16px;
    }

    .top_area_btn {
        margin-bottom: 10px;
    }

    .area-name {
        font-size:15px;
        width:60px;
    }

    .area-name-s {
        font-size:15px;
        width:48px;
    }

    .search_btn {
       width:94%;
       margin: 0px 10px;
       float: none;
    }

    .top-keihatu {
        padding-top: 219px
    }

    #weather-info .warning-label {
        padding: 0 5px;
        margin: 0 5px;
        width:150px;
        height:50px;
        text-align:center;
        padding-top:12px;
    }

    .top_area_btn {
       width: 96px;
    }

    .contentsdown::before {
        display: inline-table;
    }

    .pl20 {
        padding-left: 20px;
    }

    .notice-text{
        max-width: 300px;
    }
}