@charset "UTF-8";

/*---------------------------------------------
	フォント
  ---------------------------------------------*/
@import url("../plugins/font-awesome/css/font-awesome.min.css");


/*---------------------------------------------
	reset
  ---------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
  font-style: inherit;
  font-weight: inherit
}
del, ins {
  text-decoration: none
}
li {
  list-style: none
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
q:before, q:after {
  content: ''
}
abbr, acronym {
  border: 0;
  font-variant: normal
}
sup {
  vertical-align: baseline
}
sub {
  vertical-align: baseline
}
legend {
  color: #000
}
input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit
}
input, button, textarea, select {
  *font-size: 100%
}
body {
  font-size: 13px
}
select, input, button, textarea, button {
  font: 99%
}
table {
  font-size: inherit;
  font: 100%
}
pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%
}
body, td, th, h1, h2, h3, h4, h5, h6 {
  font-family: メイリオ, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif !important;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
    font-size: 82%;
    color: #000;
    line-height: 1.4;
    text-align: left;
    font-feature-settings: "palt";
    background-color: #FFFFFF;
}
strong {
  font-size: 16px;
  font-weight: bold
}
a {
  text-decoration: none !important;
}
a:link {
  color: #00f
}
a:visited {
  color: #800080
}
a:hover {
  color: #f60;
    transition: all .3s linear
}
a:active {
  color: #f00
}
caption {
  padding-right: 10px;
  text-align: right
}
@media print {
  body {
    height: auto;
    -webkit-print-color-adjust: exact;
    color-adjust: exact
  }
}
@-moz-document url-prefix() {
  select {
    border: 1px solid #8f8f9d;
    border-radius: 2px;
    background-color: white;
  }
  select:hover {
    border-color: #676774;
  }
}
.clear {
  clear: both;
  display: block
}
.hidden {visibility: hidden}
.none {display: none}
.inline-block, .inlineBlock {
  display: inline-block !important;
  zoom: 1
}
.block {display: block !important}
.clearfix:after {
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
  content: "."
}
.clearfix {overflow: hidden}
* html .clearfix {
  height: 1%;
  overflow: visible
}
.text-small {font-size: 11px !important}
.text-large {font-size: 116% !important}
.text-14px {font-size: 14px !important}
.text-13px {font-size: 13px !important}
.text-bold {font-weight: bold !important}
.text-normal {font-weight: normal !important}
.text-super {
  font-size: 8px;
  vertical-align: text-top;
  text-align: center !important
}
.text-left {text-align: left !important}
.text-center {text-align: center !important}
.text-right {text-align: right !important}
.text-justify {
  text-align: justify !important;
  text-justify: inter-ideograph !important
}
.text-top {vertical-align: top !important}
.text-middle {vertical-align: middle !important}
.text-bottom {vertical-align: bottom !important}
.nowrap {white-space: nowrap}

.text-indent-1em {margin-left: 1em}
.text-indent-1em-head-0em {
  margin-left: 1em;
  text-indent: -1em
}
.flex-start {justify-content: flex-start}
.flex-center {justify-content: center}
.flex-end {justify-content: flex-end}
.align-items {align-items: center}
.block-half {width: 49%}
.block-small {width: 30%}
.block-wide {width: 65%}
.block-85per {width: 85%}
.block-13per {width: 13%}

.ime-active {ime-mode: active}
.ime-inactive {ime-mode: inactive}
.ime-disabled {ime-mode: disabled}

span.text-sup {
  font-size: 75%;
  position: relative;
  top: -.1em;
  vertical-align: top
}

.mt-0px {margin-top: 0 !important}
.mt-3px {margin-top: 3px !important}
.mt-5px {margin-top: 5px !important}
.mt-8px {margin-top: 8px !important}
.mt-10px {margin-top: 10px !important}
.mt-15px {margin-top: 15px !important}
.mt-20px {margin-top: 20px !important}
.mt-25px {margin-top: 20px !important}
.mt-30px {margin-top: 30px !important}
.mt-40px {margin-top: 40px !important}
.mt-50px {margin-top: 50px !important}
.mt-60px {margin-top: 60px !important}
.mt-70px {margin-top: 70px !important}
.mb-0px {margin-bottom: 0 !important}
.mb-5px {margin-bottom: 5px !important}
.mb-10px {margin-bottom: 10px !important}
.mb-15px {margin-bottom: 15px !important}
.mb-20px {margin-bottom: 20px !important}
.mb-30px {margin-bottom: 30px !important}
.mb-40px {margin-bottom: 40px !important}
.mb-50px {margin-bottom: 50px !important}
.mb-70px {margin-bottom: 70px !important}
.ml-0px {margin-left: 0 !important}
.ml-5px {margin-left: 5px !important}
.ml-10px {margin-left: 10px !important}
.ml-20px {margin-left: 20px !important}
.ml-30px {margin-left: 30px !important}
.ml-50px {margin-left: 50px !important}
.ml-auto {
  margin-left: auto !important;
  margin-right: 0 !important
}
.mr-2px {margin-right: 2px !important}
.mr-10px {margin-right: 10px !important}
.mr-20px {margin-right: 20px !important}
.mr-30px {margin-right: 30px !important}
.mr-50px {margin-right: 50px !important}
.mtmb-5px {
  margin-top: 5px !important;
  margin-bottom: 5px !important
}
.mtmb-10px {
  margin-top: 10px !important;
  margin-bottom: 10px !important
}
.mtmb-15px {
  margin-top: 15px !important;
  margin-bottom: 15px !important
}
.mtmb-20px {
  margin-top: 20px !important;
  margin-bottom: 20px !important
}
.mtmb-30px {
  margin-top: 30px !important;
  margin-bottom: 30px !important
}
.mlmr-auto {
  margin-left: auto !important;
  margin-right: auto !important
}
.pl-5px {padding-left: 5px !important}
.pl-10px {padding-left: 10px !important}
.pl-20px {padding-left: 20px !important}
.pr-2px {padding-right: 2px !important}
.pr-10px {padding-right: 10px !important}
.pr-20px {padding-right: 20px !important}
.pt-0px {padding-top: 0 !important}
.pt-15px {padding-top: 15px !important}
.pb-10px {padding-bottom: 10px !important}
.pb-15px {padding-bottom: 15px !important}

.width-1em {width: 1em !important}
.width-2em {width: 2em !important}
.width-3em {width: 3em !important}
.width-4em {width: 4em !important}
.width-5em {width: 5em !important}
.width-6em {width: 6em !important}
.width-7em { width: 7em !important}
.width-8em {width: 8em !important}
.width-10em {width: 10em !important}
.width-11em {width: 11em !important}
.width-12em {width: 12em !important}
.width-15em {width: 15em !important}
.width-20em {width: 20em !important}
.width-25em {width: 25em !important}
.width-30em {width: 30em !important}
.width-40em {width: 40em !important}
.width-50em {width: 50em !important}
.width-auto {width: auto !important}
.width-98per {width: 98% !important}
.width-100per {width: 100% !important}
.width-15px {width: 15px !important}
.width-200px {width: 200px !important}
.width-300px {width: 300px !important}
.boxHeight500px {height: 500px !important}

.text-white {color: #fff !important}
.text-red {color: #f00 !important}
.text-blue {color: #00f !important}
.text-light-blue {color: #0ff !important}
.text-yellow {color: #ff0 !important}
.text-dark-yellow {color: #990 !important}
.text-pink {color: #f0f !important}
.text-orange {color: #f60 !important}
.text-green {color: #0f0 !important}
.text-gray {color: #898989 !important}
.bg-red {background-color: #f00}
.bg-pink {background-color: #f0f}
.bg-orange {background-color: #f90}
.bg-yellow {background-color: #ff0}
.bg-gray {background-color: #eee}
.bg-dark-purple {
  color: #fff;
  background-color: #73a
}

.br-pc{display: inline !important}
.br-sp{display: none !important} 
@media screen and (max-width: 768px) {
.br-pc{display: none !important}
.br-sp{display: inline !important}	 
}

input {
  padding: 2px;
  margin-right: 2px;
  margin-left: 2px
}
input, select, label {
  vertical-align: middle
}
input[type="button"] {
  padding: 0 5px
}
input.hg-15px[type="text"]{
    padding: 0;
    line-height: 28px;
    height: 15px;
}

/* -----------------------------------
    メニュー
   ----------------------------------- */
header {
    background-color: #306366;
    height: 35px;
    min-width: 1024px;
    margin: auto
}
h1 a {
    display: flex;
    align-items: center;
    font-size: 22px;
    padding-left: 5px;
    font-weight: bold;
    color: #FFFFFF !important;
}
h1 a span.h1-sub {
    background-color: #fff;
    color: #306366;
    font-size: 15px;
    line-height: 1;
    width: 50px;
    text-align: center;
    margin-left: 5px;
    padding: 2px;
} 
nav{
    width: 1024px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    height: 35px
}  
nav#nav-wide{width: 100%}
nav#nav-1350{
    width: 100%;
    max-width: 1350px
}
#navigation{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 35px;
}    
nav:not(#responsive) #navigation li {
    display: flex
}
nav:not(#responsive) #navigation li a {
    color: #fff;
    line-height: 1.2;
    padding: .3em .5em .3em .5em;
    text-align: center;
    height: 35px;
    border-left: 1px solid #ffffff;
    display: flex;
    align-items: center;
    box-sizing: border-box
}
nav:not(#responsive) #navigation li a:hover,
nav:not(#responsive) #navigation li.active {
    background-color: #fff;
    color: #306366
}
nav:not(#responsive) #navigation li a:hover a,
nav:not(#responsive) #navigation li.active a {
    color: #306366
}	


/* -----------------------------------
	カラム
   ----------------------------------- */
#wrapper {
    width: 980px;
    padding-bottom: 20px;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-ideograph;
}
#mainContents,
#MainContents {
  padding-top: 10px
}
#mainContents a img,
#MainContents a img {
  transition: all .3s linear
}
#mainContents a:hover img,
#MainContents a:hover img {
  opacity: .7
}
#wrapper-fix {
  margin: 10px auto 0;
  padding-bottom: 50px;
  width: 1024px;
  display: block
}
#container-main-inner {
  width: 98%;
  min-width: 900px;
  margin: 10px auto 0
}
.container-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}
.container-flex-left {
    display: flex;
    flex-wrap: wrap
}
.dateset-container-flex {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.dateset-container-flex li {
    margin-right: 5px;
    padding-right: 5px;
    line-height: 1.8;
    border-right: 1px solid #cccccc;
}
.dateset-container-flex li:last-child{
    margin-right: 0px;
    padding-right: 0px;
    border-right:none}
.dateset-container-flex li a {
  display: inline-block
}

.flex-align-stretch{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch
}

/* -----------------------------------
	見出し
   ----------------------------------- */
.h2-map{
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    font-size: 16px;
    margin-bottom: 5px;
}
.h2-map:before {
    font-family: 'FontAwesome';
    content: "\f002";
    padding-right: 2px;
}
h3.h3 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}
h4 {
  font-size: 14px;
 /* font-weight: bold;*/
  margin-bottom: 5px;
}

.text-indent {
  padding-left: 1em !important;
  text-indent: -1em !important
}

.list-number {
  counter-reset: number 0;
  margin-top: 10px;
  width: calc(100% - 40px)
}
.list-number li {
  padding-left: 1.5em;
  text-indent: -1.5em
}
.list-number li:before {
  counter-increment: number 1;
  content: counter(number) " . "
}

/* -----------------------------------
	テーブル
   ----------------------------------- */
table a {
  line-height: 1.2;
  text-decoration: underline;
  display: block
}
.table-td-left,
.table-td-center,
.table-td-doshatozencho,
.table-td-right,
.table-td-justify {
  width: 100%;
  margin-bottom: 10px
}
.table-td-left tr:hover,
.table-td-center tr:hover,
.table-td-doshatozencho tr:hover,
.table-td-right tr:hover,
.table-td-justify tr:hover {
  background-color: #f7f7f7
}
.table-td-left th,
.table-td-left td,
.table-td-center th,
.table-td-center td,
.table-td-doshatozencho th,
.table-td-doshatozencho td,
.table-td-right th,
.table-td-right td,
.table-td-justify th,
.table-td-justify td {
  padding: 3px 2px 1px;
  border: 1px solid #ccc;
  font-weight: normal;
  line-height: 1.2;
  text-align: left
}
.table-td-left th,
.table-td-center th,
.table-td-doshatozencho th,
.table-td-right th,
.table-td-justify th {
    font-size: 100%;
    text-align: center;
    background-color: #d5e8e8;
}
.table-td-left td,
.table-td-center td,
.table-td-doshatozencho td,
.table-td-right td,
.table-td-justify td {
  padding: 3px 3px 2px;
  font-size: 100%;
  line-height: 1.2;
  text-align: left
}
.table-td-center td {text-align: center}
.table-td-doshatozencho td {text-align: left}
.table-td-right td {text-align: right}
.table-td-justify td {
  text-align: justify;
  text-justify: inter-ideograph
}
td.no-border-right{
  width: 10%;
  text-align: center
}
th.table-text-left,
td.table-text-left {
  text-align: left !important
}
th.table-text-center,
td.table-text-center {
  text-align: center !important
}
th.table-text-right,
td.table-text-right {
  text-align: right !important
}
th.table-text-justify,
td.table-text-justify {
  text-align: justify;
  text-justify: inter-ideograph
}
.tbl-hanrei {
  position: relative;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3
}
.tbl-hanrei th,
.tbl-hanrei td {
  padding: 1px 5px
}
.tbl-hanrei caption {
  border-bottom: 1px solid #000;
  margin-bottom: 5px;
  caption-side: top;
  font-weight: bold;
  text-align: left
}
.tbl-hanrei caption span {
  display: inline-block;
  position: absolute;
  right: 0;
  top: -5px
}
.tbl-scroll {
  height: 200px;
  overflow-y: scroll
}
.tbl-noBorder td,
.tbl-noBorder th {
  border: none !important
}
th.no-border,
td.no-border {
  border: none !important
}
th.no-border-side,
td.no-border-side {
  border-right-style: none !important;
  border-left-style: none !important
}
th.no-border-left,
td.no-border-left {
  border-left-style: none !important
}
th.no-border-right,
td.no-border-right {
  border-right-style: none !important
}
.tbl-frame th {
  padding: 2px;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  background-color: #f7f1f1;
  vertical-align: middle
}
.tbl-frame td {
  padding: 2px;
  font-size: 100%;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle
}
.tbl th, .tbl td {
  vertical-align: top;
  padding-right: 2px
}
.tbl-highlight tr:hover > td {
  background-color: #d9d9d9 !important
}
.tbl-indent td {
  padding-left: 1em !important;
  text-indent: -1em !important
}

/* -----------------------------------
	ボタン
   ----------------------------------- */
a.btn {
  padding: 4px 8px 3px;
  margin-right: 1px;
  margin-left: 1px;
  color: #fff;
  line-height: 1.2;
  display: inline-block;
  text-align: center;
  background-color: #306366;
  border-radius: 4px;
  font-weight: normal !important
}
a.btn:hover {
  background-color: #f60;
  color: #fff
}
a.btn-small {
  padding: 1px 5px
}
a.btn-cancel {
  background-color: #d2d2d2;
  color: #000 !important
}
a.btn-cancel:hover {color: #fff !important}
a.btn-disabled,
a.btn-disabled:hover,
a.btn-disabled:visited {
  background-color: #aaa;
  color: #fff;
  cursor: auto
}

a.link-external:before {
  font-family: 'FontAwesome';
  content: "\f14c";
  padding-right: 3px
}
a.link-pdf:before {
  font-family: 'FontAwesome';
  content: "\f1c1";
  padding-right: 3px
}
a.btn-search:before {
  font-family: 'FontAwesome';
  content: "\f002";
  padding-right: 3px
}
a.btn-excel:before {
  font-family: 'FontAwesome';
  content: "\f1c3";
  padding-right: 3px
}
a.btn-print:before {
  font-family: 'FontAwesome';
  content: "\f02f";
  padding-right: 3px
}
.icon-download:before {
  font-family: 'FontAwesome';
  content: "";
  padding: 1px 3px;
  background-color: #00f;
  color: #fff;
  border-radius: 3px;
  margin-right: 5px
}
a.btn-csv {
  content: "";
  background-image: url("../images/common/icon-csv.svg");
  background-repeat: no-repeat;
  background-size: 12px auto;
  padding-left: 1.7em;
  background-position: 6px center
}

/* -----------------------------------
   ツール類
   ----------------------------------- */
.icon-back a:before,
.icon-next a:before {
    font-size: 18px;
    font-family: 'FontAwesome';
    content: "\f0d9";
    background-color: #306366;
    height: 18px;
    width: 18px;
    line-height: 18px;
    border-radius: 3px;
    display: inline-block;
    color: #ffffff;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
}
.icon-next a:before {content: "\f0da";}
.icon-back a:hover:before,
.icon-next a:hover:before{
	background-color: #f60;
	color: #ffffff;
}

.display-time {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.display-time:after {
    font-family: 'FontAwesome';
    content: "\f073";
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
}
.display-time input {
  width: 150px !important;
  height: 20px !important;
  box-sizing: border-box
}

/* -----------------------------------
   開閉
   ----------------------------------- */
.accbox {
  margin-top: 20px
}
.accbox label {
  display: block;
  background-color: #306366;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  position: relative;
  color: #fff;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  padding-left: 10px
}
.accbox label:hover {
  background-color: #306366
}
.accbox label:after {
  content: "開く"
}
.cssacc:checked + label:after {
  content: "閉じる"
}
.accbox label:before {
  font-family: 'FontAwesome';
  content: "\f078";
  position: absolute;
  right: 15px;
  top: 50%;
  color: #fff;
  font-size: 1.4em;
  line-height: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-indent: 0
}
.cssacc:checked + label:before {
  transform: rotate(180deg)
}
.accbox input {
  display: none
}
.accbox .accshow {
  height: 0;
  margin-bottom: 10px;
  overflow-y: hidden;
  text-align: left;
  -webkit-transition: all .3s ease;
  transition: all .3s ease
}
.cssacc:checked + label + .accshow {
  height: auto;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  padding-top: 10px
}
.accshow ul {
  position: relative
}
.accshow .block-half {
  width: 49.5%
}


/* -----------------------------------
   ページャー
   ----------------------------------- */
.pager {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px
}

/* -----------------------------------
   アンカーリンク
   ----------------------------------- */
.link-anchor{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;
}
.link-anchor li a{
	display: block;
	margin-right: 1.5em;
	text-align: center
}
.link-anchor li a:before{
	font-family: 'FontAwesome';
	content: "\f078";
	padding-right: 3px;
}

/* -----------------------------------
    凡例
   ----------------------------------- */
.pic-hanrei {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: -3px;
    border: 1px solid #000;
    vertical-align: text-top;
}
.pic-hanrei-circle {
  border-radius: 50% !important
}
.oame-tokubetsu {
  background-color: rgba(12, 0, 12, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.dosya-keikai-jikkyou {
  background-color: rgba(108, 0, 140, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.dosya-keikai {
  background-color: rgba(170, 0, 170, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.oame-keihou {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.oame-chui {
  background-color: rgba(242, 231, 0, 1) !important;
  color: rgba(0, 0, 0, 1) !important
}

.risk-a1-12 {
  background-color: rgba(242, 231, 0, 1) !important;
  color: rgba(0, 0, 0, 1) !important
}
.risk-a1-22 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-a1-32 {
  background-color: rgba(170, 0, 170, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-a1-44 {
  background-color: rgba(12, 0, 12, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-c1-02 {
  background-color: rgba(217, 217, 217, 1) !important;
  color: rgba(0, 0, 0, 1) !important
}
.risk-c1-12 {
  background-color: rgba(242, 231, 0, 1) !important;
  color: rgba(0, 0, 0, 1) !important
}
.risk-c1-22 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-c1-32 {
  background-color: rgba(170, 0, 170, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-c1-34 {
  background-color: rgba(108, 0, 140, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-c1-44 {
  background-color: rgba(12, 0, 12, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-level-1 {
  background-color: rgba(242, 231, 0, 1) !important;
  color: rgba(0, 0, 0, 1) !important
}
.risk-level-2 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.risk-level-3 {
  background-color: rgba(60, 0, 90, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh10-20 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh10-15 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh10-10 {
  background-color: rgba(255, 153, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh10-5 {background-color: rgba(250, 245, 0, 1) !important}
.hanrei-mesh10-1 {background-color: rgba(160, 210, 255, 1) !important}
.hanrei-mesh10-0 {background-color: rgba(242, 242, 255, 1) !important}
.hanrei-mesh60-80 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh60-50 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh60-30 {
  background-color: rgba(255, 153, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh60-20 {background-color: rgba(250, 245, 0, 1) !important}
.hanrei-mesh60-10 {
  background-color: rgba(0, 65, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh60-5 {
  background-color: rgba(33, 140, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-mesh60-1 {background-color: rgba(160, 210, 255, 1) !important}
.hanrei-mesh60-0 {background-color: rgba(242, 242, 255, 1) !important}
.hanrei-mesh60-none {background-color: rgba(184, 184, 184, 1) !important}
.hanrei-mesh60-kessoku {background-color: rgba(184, 184, 184, 1) !important}
.hanrei-soil-300 {
  background-color: rgba(100, 0, 50, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-200 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-150 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-100 {
  background-color: rgba(255, 153, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-90 {background-color: rgba(250, 245, 0, 1) !important}
.hanrei-soil-80 {background-color: rgba(153, 255, 0, 1) !important}
.hanrei-soil-70 {
  background-color: rgba(0, 65, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-50 {
  background-color: rgba(33, 140, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-soil-30 {background-color: rgba(160, 210, 255, 1) !important}
.hanrei-soil-0 {background-color: rgba(242, 242, 255, 1) !important}

.hanrei-keikai-d-r {
  background-color: rgba(252, 140, 94, 1) !important;
  border: 2px solid rgba(242, 70, 66, 1)
}
.hanrei-keikai-d-y {
  background-color: rgba(252, 252, 140, 1) !important;
  border: 2px solid rgba(65, 85, 133, 1)
}
.hanrei-keikai-k-r {
  background-color: rgba(253, 188, 180, 1) !important;
  border: 2px solid rgba(229, 54, 172, 1)
}
.hanrei-keikai-k-y {
  background-color: rgba(253, 253, 141, 1) !important;
  border: 2px solid rgba(101, 146, 82, 1)
}
.hanrei-keikai-j-r {
  background-color: rgba(242, 135, 135, 1) !important;
  border: 2px solid rgba(150, 48, 48, 1)
}
.hanrei-keikai-j-y {
  background-color: rgba(252, 252, 140, 1) !important;
  border: 2px solid rgba(213, 106, 60, 1)
}

.hanrei-kiken_d {
  background-color: rgba(255, 142, 29, .2) !important;
  border: 2px solid rgba(0, 0, 0, 1)
}
.hanrei-kiken_dk {
  background-color: rgba(255, 0, 255, .2) !important;
  border: 2px solid rgba(0, 0, 0, 1)
}
.hanrei-kiken_k {
  background-color: rgba(51, 51, 255, .2) !important;
  border: 2px solid rgba(0, 0, 0, 1)
}
.hanrei-kiken_j {
  background-color: rgba(153, 50, 50, .2) !important;
  border: 2px solid rgba(0, 0, 0, 1)
}

.hanrei-sabo_s {border: 2px solid rgba(255, 0, 255, 1)}
.hanrei-sabo_k {border: 2px solid rgba(51, 51, 255, 1)}
.hanrei-sabo_j{border: 2px solid rgba(153, 50, 50, 1)}

.hanrei-obs-rain-10m-20 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-10m-15 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-10m-10 {
  background-color: rgba(255, 153, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-10m-5 {
  background-color: rgba(250, 245, 0, 1) !important
}
.hanrei-obs-rain-10m-1 {
  background-color: rgba(160, 210, 255, 1) !important
}
.hanrei-obs-rain-10m-0 {
  background-color: rgba(242, 242, 255, 1) !important
}
.hanrei-obs-rain-01h-80 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-01h-50 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-01h-30 {
  background-color: rgba(255, 153, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-01h-20 {
  background-color: rgba(250, 245, 0, 1) !important
}
.hanrei-obs-rain-01h-10 {
  background-color: rgba(0, 65, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-01h-5 {
  background-color: rgba(33, 140, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-01h-1 {
  background-color: rgba(160, 210, 255, 1) !important
}
.hanrei-obs-rain-01h-0 {
  background-color: rgba(242, 242, 255, 1) !important
}

.hanrei-obs-rain-sum-400 {
  background-color: rgba(180, 0, 104, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-sum-300 {
  background-color: rgba(255, 40, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-sum-200 {
  background-color: rgba(250, 245, 0, 1) !important
}
.hanrei-obs-rain-sum-100 {
  background-color: rgba(0, 65, 255, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-sum-1 {
  background-color: rgba(160, 210, 255, 1) !important
}
.hanrei-obs-rain-sum-0 {
  background-color: rgba(255, 255, 255, 1) !important
}
.hanrei-obs-rain-miss {
  background-color: rgba(184, 184, 184, 1)
}

.hanrei-raingraph-now {
  background-color: rgba(183, 222, 232, 1) !important
}
.hanrei-raingraph-1h {
  background-color: rgba(247, 150, 70, 1) !important
}
.hanrei-raingraph-2h {
  background-color: rgba(228, 108, 10, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-raingraph-3h {
  background-color: rgba(152, 72, 7, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-tp {
  background-color: rgba(12, 0, 12, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-cl {
  background-color: rgba(255, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-kp {
  background-color: rgba(255, 102, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important
}
.hanrei-cp {
  background-color: rgba(255, 255, 110, 1) !important
}
.hanrei-snake-now, .hanrei-snake-now:before, .hanrei-snake-now:after {
  background-color: rgba(1, 28, 244, 1) !important
}
.hanrei-snake-1h, .hanrei-snake-1h:after {
  background-color: rgba(234, 163, 125, 1) !important
}
.hanrei-snake-2h, .hanrei-snake-2h:after {
  background-color: rgba(189, 87, 40, 1) !important
}
.hanrei-snake-3h, .hanrei-snake-3h:after {
  background-color: rgba(135, 59, 26, 1) !important
}
.hanrei-rainbar-now {
  background-color: rgba(183, 222, 232, 1) !important
}
.hanrei-rainbar-1h {
  background-color: rgba(247, 150, 70, 1) !important
}
.hanrei-rainbar-2h {
  background-color: rgba(228, 108, 10, 1) !important
}
.hanrei-rainbar-3h {background-color: rgba(152, 72, 7, 1) !important}
.hanrei-rainbar-ruika{background-color: rgba(48, 99, 102, 1) !important}
.hanrei-rainbar-soil {
  background-color: rgba(84, 48, 46, 1) !important
}
.hanrei-snake-sankou {
  background-color: rgba(151, 151, 151, 1) !important
}
.hanrei-rainbar-soil2 {
  background-color: rgba(160, 185, 102, 1) !important
}
.hanrei-rainbar-soil-sankou {
  border-top: 2px dotted rgba(84, 48, 46, 1) !important
}
.hanrei-rainbar-soil2-sankou {
  border-top: 2px dotted rgba(160, 185, 102, 1) !important
}
.contour-1-lv8, .contour-1-lv8-label, .contour-1-lv7, .contour-1-lv7-label {
  display: none
}
.contour-1-lv6 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-1-lv6-label:after {
  content: '20-'
}
.contour-1-lv5 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-1-lv5-label:after {
  content: '15-20'
}
.contour-1-lv4 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-1-lv4-label:after {
  content: '10-15'
}
.contour-1-lv3 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-1-lv3-label:after {
  content: '5-10'
}
.contour-1-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-1-lv2-label:after {
  content: '1-5'
}
.contour-1-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-1-lv1-label:after {
  content: '0-1'
}
.contour-2-lv8 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-2-lv8-label:after {
  content: '80-'
}
.contour-2-lv7 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-2-lv7-label:after {
  content: '50-80'
}
.contour-2-lv6 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-2-lv6-label:after {
  content: '30-50'
}
.contour-2-lv5 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-2-lv5-label:after {
  content: '20-30'
}
.contour-2-lv4 {
  background-color: #0041ff !important;
  color: #fff !important
}
.contour-2-lv4-label:after {
  content: '10-20'
}
.contour-2-lv3 {
  background-color: #218cff !important;
  color: #000 !important
}
.contour-2-lv3-label:after {
  content: '5-10'
}
.contour-2-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-2-lv2-label:after {
  content: '1-5'
}
.contour-2-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-2-lv1-label:after {
  content: '0-1'
}
.contour-3-lv8 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-3-lv8-label:after {
  content: '150-'
}
.contour-3-lv7 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-3-lv7-label:after {
  content: '100-150'
}
.contour-3-lv6 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-3-lv6-label:after {
  content: '50-100'
}
.contour-3-lv5 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-3-lv5-label:after {
  content: '30-50'
}
.contour-3-lv4 {
  background-color: #0041ff !important;
  color: #fff !important
}
.contour-3-lv4-label:after {
  content: '20-30'
}
.contour-3-lv3 {
  background-color: #218cff !important;
  color: #000 !important
}
.contour-3-lv3-label:after {
  content: '10-20'
}
.contour-3-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-3-lv2-label:after {
  content: '5-10'
}
.contour-3-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-3-lv1-label:after {
  content: '0-5'
}
.contour-4-lv8 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-4-lv8-label:after {
  content: '300-'
}
.contour-4-lv7 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-4-lv7-label:after {
  content: '250-300'
}
.contour-4-lv6 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-4-lv6-label:after {
  content: '200-250'
}
.contour-4-lv5 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-4-lv5-label:after {
  content: '150-200'
}
.contour-4-lv4 {
  background-color: #0041ff !important;
  color: #fff !important
}
.contour-4-lv4-label:after {
  content: '100-150'
}
.contour-4-lv3 {
  background-color: #218cff !important;
  color: #000 !important
}
.contour-4-lv3-label:after {
  content: '50-100'
}
.contour-4-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-4-lv2-label:after {
  content: '10-50'
}
.contour-4-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-4-lv1-label:after {
  content: '0-10'
}
.contour-5-lv8 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-5-lv8-label:after {
  content: '500-'
}
.contour-5-lv7 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-5-lv7-label:after {
  content: '400-500'
}
.contour-5-lv6 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-5-lv6-label:after {
  content: '300-400'
}
.contour-5-lv5 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-5-lv5-label:after {
  content: '200-300'
}
.contour-5-lv4 {
  background-color: #0041ff !important;
  color: #fff !important
}
.contour-5-lv4-label:after {
  content: '100-200'
}
.contour-5-lv3 {
  background-color: #218cff !important;
  color: #000 !important
}
.contour-5-lv3-label:after {
  content: '50-100'
}
.contour-5-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-5-lv2-label:after {
  content: '10-50'
}
.contour-5-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-5-lv1-label:after {
  content: '0-10'
}
.contour-6-lv8 {
  background-color: #b40068 !important;
  color: #000 !important
}
.contour-6-lv8-label:after {
  content: '700-'
}
.contour-6-lv7 {
  background-color: #ff2800 !important;
  color: #000 !important
}
.contour-6-lv7-label:after {
  content: '600-700'
}
.contour-6-lv6 {
  background-color: #f90 !important;
  color: #fff !important
}
.contour-6-lv6-label:after {
  content: '500-600'
}
.contour-6-lv5 {
  background-color: #faf500 !important;
  color: #fff !important
}
.contour-6-lv5-label:after {
  content: '400-500'
}
.contour-6-lv4 {
  background-color: #0041ff !important;
  color: #fff !important
}
.contour-6-lv4-label:after {
  content: '300-400'
}
.contour-6-lv3 {
  background-color: #218cff !important;
  color: #000 !important
}
.contour-6-lv3-label:after {
  content: '200-300'
}
.contour-6-lv2 {
  background-color: #a0d2ff !important;
  color: #000 !important
}
.contour-6-lv2-label:after {
  content: '100-200'
}
.contour-6-lv1 {
  background-color: #f2f2ff !important;
  color: #000 !important
}
.contour-6-lv1-label:after {
  content: '0-100'
}
.contour-uni-label:after {
  content: '（mm）'
}

.over-tp { background-color: rgb(12,0,12) !important; color: #FFFFFF; }
.over-cl { background-color: rgb(170,0,170) !important; color: #FFFFFF; }
.over-kp { background-color: rgb(255,40,0) !important; color: #FFFFFF; }
.over-cp { background-color: rgb(242,231,0) !important; color: #000000; }
.snake-now,
.snake-now::before,
.snake-now::after{ background-color: rgb(0,0,255); color: #FFFFFF !important; }
.data-fore1,
.data-fore1::before,
.data-fore1::after{ background-color: rgb(245,159,118); color: #FFFFFF !important; }
.data-fore2,
.data-fore2::before,
.data-fore2::after{ background-color: rgb(203,81, 15); color: #FFFFFF !important; }
.data-fore3,
.data-fore3::before,
.data-fore3::after  { background-color: rgb(145,54,11); color: #FFFFFF !important; }
.hanrei_rainfall_00h{background-color: rgba(183,222,232, 1) !important;}
.hanrei_rainfall_01h{background-color: rgba(247,150,70, 1) !important;}
.hanrei_rainfall_02h{background-color: rgba(228,108,10, 1) !important;}
.hanrei_rainfall_03h{background-color: rgba(152,72,7, 1) !important;}
.hanrei_rainfall_soil{background-color: rgba(89,45,45, 1) !important;}

.bar20px { display: inline-block; margin-right: 3px; padding: 0; height: 6px; width: 20px; }
.bar20px-wide { display: inline-block; margin-right: 3px; padding: 0; height: 10px; width: 20px; }
.line12px { display: inline-block; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 12px; }
.line20px { display: inline-block; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.linebox20px{ display: inline-block; position: relative; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.linebox20px::after { display: inline-block; position: absolute; top: -2px; left: 14px; padding: 0; height: 6px; width:  6px; content: ""; }
.boxlinebox20px         { display: inline-block; position: relative; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.boxlinebox20px::before { display: inline-block; position: absolute; top: -2px; left:  0px; padding: 0; height: 6px; width:  6px; content: ""; }
.boxlinebox20px::after  { display: inline-block; position: absolute; top: -2px; left: 14px; padding: 0; height: 6px; width:  6px; content: ""; }


/* -----------------------------------
    クロノロジー
   ----------------------------------- */
.chro-container li{
    margin-bottom: 6px;
    line-height: 1.2;
    font-size: 13px;
    text-align: left;
}
.chro-container li label{
    margin: 0px 1px 0px 5px;
    padding: 0 1px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
}
.chro-lv-down-icon:after {
    font-family: 'FontAwesome';
    content: "\f01a";
    margin-left: -2px;
    background-color: #FFFFFF;
    color: #000000;
    padding: 0 3px 0 1px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}