@charset "Shift-JIS";

/*
 * 水位グラフCSSファイル
 */
/* -------------------------------------------------------------------------- */

/* 表示領域 */
div#disp {
  width: 860px;
  height: 630px;
  font-size: 12pt;
  border: 1px solid gray;
  margin: 10px 5px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* サブタイトル */
div#subtitle {
  width: 857px;
  height: 36px;
  font-size: 18px;
  border: 1px solid black;
  background-color: #ccffff;
  display:table-cell;
  vertical-align: middle;
}

/* 左側エリア */
div#leftarea {
  width: 522px;
  height: 486px;
  display: block;
  vertical-align: top;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 右側エリア */
div#rightarea {
  width: 300px;
  height: 475px;
  display: inline-block;
  vertical-align: top;
}

/* グラフ */
div#graph {
  position: relative;
  top: 26px;
  left: 0px;
  width: 488px;
  height: 125px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  margin: 0px 0px 10px 0px;
  z-index: 1;
}
#graph svg {
  width: 488px;
  height: 125px;
}

/* グラフタイトル*/
div#graph_title {
  position: relative;
  top: -130px;
  left: 0px;
  margin: 10px 0px 0px 0px;
  padding-top: 2px;
  background-color: #99ffcc;
  border: 1px solid black;
  width: 488px;
  height: 23px;
  text-align: center;
  z-index: 2;
}

/* 河川堤防 */
div#graph_max {
  position: relative;
  top: -130px;
  left: 4px;
  width: 52px;
  font-size: 75%;
  font-weight: bold;
  color: #333333;
  z-index: 2;
}

/* 設定水位 */
div#graph_min {
  position: relative;
  top: -48px;
  left: 3px;
  width: 74px;
  font-size: 75%;
  font-weight: bold;
  color: #1EB964;
  z-index: 2;
}

/* グラフ時間軸目盛 */
div#graph_axis {
  position: relative;
  top: -43px;
  left: 28px;
  width: 456px;
  height: 30px;
  margin-left: 38px;
  z-index: 2;
}

/* 時間軸目盛文字列 */
div#graph_axis span {
  font-size: 60%;
  display: inline-block;
  width: 32px;
  height: 30px;
  text-align: center;
  vertical-align: top;
  margin-right: 25px;
}

/* グラフ時間軸目盛 */
div#graph_axis_y {
  position: relative;
  top: -147px;
  left: 44px;
  width: 36px;
  height: 0px;
  z-index: 2;
}

/* 時間軸目盛文字列 */
div#graph_axis_y div {
  font-size: 60%;
  width: 32px;
  height: 18px;
  text-align: right;
  vertical-align: top;
}

/* グラフ設定水位の線 */
.c3-ygrid-line.grid-min line {
    stroke: #1EB964;
    stroke-width: 3px;
    stroke-dasharray: 15 10;
}

/* グラフy軸の線 */
.c3-ygrid-line.y-line line {
    stroke-dasharray: 3 3;
}

/* グラフの線 */
path.c3-line {
  stroke-width: 3px;
}

/* グラフの点 */
circle.c3-circle {
  stroke: steelblue;
  stroke-width: 2px;
  fill: white !important;
}

/* ツールチップ位置 */
.c3-tooltip-container {
  left: 108px !important;
}

/* 断面図エリア */
div#danmen {
  width: 460px;
  height: 260px;
  display: inline-block;
  vertical-align: top;
  margin: 5px 15px 10px 0px;
}

/* 断面図画像 */
div#danmen img#r_img {
  position: relative;
  top: -36px;
  left: 0px;
  z-index: 2;
}

/* 水位背景 */
div#r_back {
  position:relative;
  top: -243px;
  left: 70px;
  width: 370px;
  height: 112px;
  overflow: hidden;
  z-index: 1;
}

/* 水位 */
div#r_max {
  position: relative;
  top: 112px;
  left: 0px;
  width: 370px;
  height: 112px;
  background-color: #ccffff;
  z-index: 1;
}

/* 観測開始水位より下の部分*/
div#r_base {
  position:relative;
  top: -243px;
  left: 70px;
  width: 370px;
  height: 19px;
  z-index: 1;
}

/* 危険度水位エリア */
div#river_bar {
  position: relative;
  top: -41px;
  left: 0px;
  width: 85px;
  height: 260px;
  display: inline-block;
  vertical-align: top;
}

/* 水位危険度画像 */
div#river_bar img#bar_img {
  position: relative;
  top: 10px;
  left: 0px;
}

/* 水位危険度レベル背景 */
div#bar_back {
  position:relative;
  top: -186px;
  left: 17px;
  width: 53px;
  height: 124px;
  overflow: hidden;
  border-bottom: 1px solid black;
}

/* 水位危険度レベル */
div#bar_river {
  position: relative;
  top: 125px;
  left: 16px;
  width: 20px;
  height: 123px;
  border: 1px solid black;
  background-color: #ccffff;
}
img.picture{
  display: block;
  margin: 5px auto;
}

/* 説明文 */
div#info {
  width: 860px;
  font-size: 12pt;
}
div#info .red {
  color: red;
}

/* 小さい表示用------------------- */

/* 左側エリア（小） */
div#leftareaSmall {
  width: 356px;
  height: 375px;
  display: block;
  vertical-align: top;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* グラフ外側（小） */
div#graph_outerSmall {
  position: relative;
  top: 28px;
  left: 0px;
  width: 354px;
  height: 90px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  margin: 0px 0px 10px 0px;
  z-index: 1;
}

/* グラフ（小） */
div#graphSmall {
  width: 488px;
  height: 125px;
}
#graphSmall svg {
  width: 488px;
  height: 125px;
  transform: scale(0.72);
  transform-origin: left top;
}

/* グラフタイトル（小）*/
div#graph_titleSmall {
  position: relative;
  top: -95px;
  left: 0px;
  margin: 10px 0px 0px 0px;
  padding-top: 2px;
  background-color: #99ffcc;
  border: 1px solid black;
  width: 354px;
  height: 23px;
  text-align: center;
  z-index: 2;
}

/* 河川堤防 */
div#graph_maxSmall {
  position: relative;
  top: -96px;
  left: -3px;
  width: 52px;
  font-size: 55%;
  font-weight: bold;
  color: #333333;
  z-index: 2;
  transform: scale(0.8);
}

/* 設定水位（小） */
div#graph_minSmall {
  position: relative;
  top: -32px;
  left: 3px;
  width: 74px;
  font-size: 55%;
  font-weight: bold;
  color: #1EB964;
  z-index: 2;
}

/* グラフ時間軸目盛（小） */
div#graph_axisSmall {
  position: relative;
  top: -32px;
  left: 0px;
  width: 319px;
  height: 30px;
  margin-left: 38px;
  z-index: 2;
}

/* 時間軸目盛文字列（小） */
div#graph_axisSmall span {
  font-size: 60%;
  display: inline-block;
  width: 32px;
  height: 30px;
  text-align: center;
  vertical-align: top;
  margin-right: 9px;
}

/* グラフ時間軸目盛（小） */
div#graph_axis_ySmall {
  position: relative;
  top: -108px;
  left: 24px;
  width: 36px;
  height: 0px;
  z-index: 2;
}

/* 時間軸目盛文字列（小） */
div#graph_axis_ySmall div {
  font-size: 55%;
  width: 32px;
  height: 13px;
  text-align: right;
  vertical-align: top;
  transform: scale(0.8);
}

/* 断面図エリア（小） */
div#danmenSmall {
  width: 460px;
  height: 260px;
  display: inline-block;
  vertical-align: top;
  margin: 5px 0px 10px 0px;
  
  transform: scale(0.72);
  transform-origin: left top;
}

/* 断面図画像（小） */
div#danmenSmall img#r_imgSmall {
  position: relative;
  top: -36px;
  left: 0px;
  z-index: 2;
}

/* 水位背景 */
div#r_backSmall {
  position:relative;
  top: -243px;
  left: 70px;
  width: 370px;
  height: 112px;
  overflow: hidden;
  z-index: 1;
}

/* 水位 */
div#r_maxSmall {
  position: relative;
  top: 112px;
  left: 0px;
  width: 370px;
  height: 112px;
  background-color: #ccffff;
  z-index: 1;
}

/* 観測開始水位より下の部分*/
div#r_baseSmall {
  position:relative;
  top: -243px;
  left: 70px;
  width: 370px;
  height: 19px;
  z-index: 1;
}