@charset "UTF-8";
/* overwrite base.css */
.container .title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.container .title:before {
  content: "";
  position: relative;
  top: 0.1rem;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.4rem;
  background-color: #43a6c7;
}

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

.container th, .container td {
  padding: 0.2rem 0.4rem;
}

/* ----- コンテンツ ----- */
.container-top {
  position: relative;
  padding: 0 1.0rem;
}

/* ダム紹介 */
.introduction {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 70%;
}

.introduction .dam-info {
  padding: 1.0rem;
  background-color: #fcfcfc;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.introduction .dam-name {
  padding: 0 0.4rem;
  border-bottom: 3px solid #ddd;
  margin-bottom: 0.4rem;
}

.introduction .dam-name .name {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}

.introduction .image, .introduction .detail {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.introduction .detail {
  padding: 0 0.5rem;
  width: 45.0rem;
}

.introduction .description {
  padding-left: 0.5rem;
  text-indent: 1.0rem;
}

.introduction .spec {
  margin-top: 1.0rem;
}

.introduction .spec tr {
  border-bottom: 1px solid #c5c5c5;
}

.introduction .spec th {
  text-align: left;
  padding-left: 0.5rem;
}

.introduction .spec td {
  text-align: right;
  padding-right: 0.5rem;
}

.introduction .next {
  position: absolute;
  top: -2px;
  right: 0.5rem;
}

.introduction .next:after {
  /* 矢印 */
  position: relative;
  display: inline-block;
  top: 1px;
  right: 2px;
  width: 7px;
  border-right: 3px solid #454545;
  border-top: 3px solid #454545;
  border-radius: 2px;
  content: "";
  margin: 0 0 0 5px;
  height: 7px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* ダム諸量 */
.data-list {
  margin-left: 1.5rem;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  top: 0;
  right: 20px;
}

.data-list table tr {
  background-color: white;
}

.data-list table tr:nth-of-type(even) {
  background-color: #ebebeb;
}

.data-list table th, .data-list table td {
  border: 1px solid #9bb3bb;
}

.data-list table th {
  width: 12.0rem;
  text-align: left;
  text-indent: 1em;
}

.data-list table th.indent1 {
  /* text-indentは実装の方で面倒だったらしなくてもいいと思う。 */
  text-indent: 2em;
}

.data-list table td {
  width: 13.0rem;
  text-align: right;
}

.data-list table td .unit {
  display: inline-block;
  width: 5.0rem;
  padding: 0 0.4rem;
}

/* 現在の水位 */
.dam-status {
  position: relative;
  padding: 1.0rem 1.0rem 0 1.0rem;
}

.dam-status .img-wrapper {
  position: relative;
  overflow: hidden;
  width: 960px;
  height: 320px;
}

.dam-status .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
}

.dam-status .water-full {
  position: absolute;
  width: 250px;
  height: 280px;
  left: 0;
  bottom: 15px;
}

.dam-status .water {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #08b2f6;
}

.dam-status .grad {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #80d5f6;
  height: 5%;
}

.dam-status .grad:before {
  content: "";
  width: 100%;
  height: 50%;
  background-color: #c9e9f6;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

.dam-status .grad:after {
  content: "";
  width: 100%;
  height: 50%;
  background-color: #50c7f6;
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
}

/* 2016.12.11 K.Fujimaki 定数欄(.const-label)のcss */
.const-label {
  border: solid #9bb3bb 1px;
  width: auto;
  position: absolute;
  top: 0;
  left: 37.0rem;
  font-size: 0;
  box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.4);
  /* 影を追加 */
}

.const-label .const-name {
  background-color: #dce9ee;
  color: #103d4c;
  font-weight: bold;
  display: inline-block;
  padding: 0.5rem;
  padding-left: 2.0rem;
  width: 13rem;
  font-size: 1.2rem;
}

.const-label .const-value {
  background-color: white;
  display: inline-block;
  padding: 0.5rem 1.0rem;
  font-size: 1.2rem;
}

.const-label .const-value .value {
  display: inline-block;
  padding: 0 0.5rem;
  text-align: right;
  width: 7.0rem;
  font-size: inherit;
}

/* 岩屋ダム模式図 */
.outline-map .img-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* map image's height */
  width: 960px;
}

.outline-map .side-panel {
  margin-left: 0.5rem;
  width: 19.0rem;
  display: inline-block;
}

.outline-map .side-panel .title {
  margin: 0.5rem 0;
  background-color: inherit;
  text-align: inherit;
  color: #43a6c7;
  padding: 0;
  border-bottom: 1px solid #43a6c7;
}

.outline-map .side-panel .title:before {
  content: none;
}

.outline-map .lg-detail {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  border: 1px solid #c5c5c5;
}

.outline-map .lg-detail h4 {
  background-color: #dce9ee;
  height: 2.2rem;
  line-height: 2.2rem;
  padding-left: 0.5rem;
  width: 100%;
}

.outline-map .lg-content dl {
  width: 100%;
  padding: 0.8rem;
}

.outline-map .lg-content dt {
  font-weight: bold;
  color: #43a6c7;
}

.outline-map .lg-content dd {
  text-indent: 1.5rem;
}

.outline-map .lg-content dd + dt {
  margin-top: 0.4rem;
}

.outline-map .mini-table {
  width: 9.0rem;
  position: absolute;
}

.outline-map .mini-table span{
  padding-left: 5px;
}


.outline-map .mini-table.rain {
  width: 14.0rem;
}

.outline-map .mini-table.rain th {
  /*雨量は少し色を変える*/
  background-color: #b3d7fa;
  color: #454545;
}

.outline-map .mini-table td, .outline-map .mini-table th {
  padding: 0.2rem 0.4rem;
  border: 1px solid #9bb3bb;
  width: 80px;
}

.outline-map .mini-table th {
  background-color: #dce9ee;
}

.outline-map .mini-table td {
  background-color: white;
  text-align: right;
}