@charset "UTF-8";

/* タイドグラフ */
.tide_graph {
	background:#FFFFFF;

	/* コンテンツ間の余白（top, right, bottom, left） */
	margin: 0px 0px 0px 0px;
	/* 背景の余白（top, right, bottom, left） */
	padding: 15px 0px 0px 0px;
}

div.page{
  width:600px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

div.select_date_wrapper {
  margin: 0px 10px;
  position: relative;
}

div.select_date_wrapper img {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12.6px;
  pointer-events: none;
}

#rev, #next{
  position: relative;
  color: #FFFFFF;
}

#rev .prev_day{
  position: absolute;
  top: 7.5px;
  left: 40px;
  pointer-events: none;
}

#next .next_day{
  position: absolute;
  top: 7.5px;
  right: 40px;
  pointer-events: none;
}

.center{
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#select_date{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: -webkit-center;
  height: 33px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  background: #FD7E39;
  border-radius: 5px;
  width: 150px;
  color: #FFFFFF;
}

div.wave_tide{
  width:600px;
  color:#393939;
}

div.wave_tide2{
  width:600px;
}

div.wave_tide2 .date{
  height: 34px;
  background: #527798;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
}

div#chartdiv{
  width:98%;
  height:250px;
  border:0;
  padding-left:10px;
  position:relative;
  background-repeat: no-repeat;
  margin-top:0;
  margin-left:0;
  margin-right:0;
  margin-bottom:0;
}

.tide_header {
  display: flex;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
}

div.tide_header_left{
  display: inline-block;
  float: left;
  background: #527798;
  color: #FFFFFF;
  border-radius: 3px;
  padding: 3px 5px;
  margin-right: 6px;
}

div.tide_header_right{
  display:inline-block;
  float:right;
}

/**
* 詳細情報テーブル
*/

table.tide_data_table1, table.tide_data_table1_day2{
  background-color: #FFFFFF;
  color: #000000;
  width: 100%;
  border-collapse: collapse;
  vertical-align:top;
  border-spacing: 0px;
  font-size:0.8em;
}

table.tide_data_table1 tr,
table.tide_data_table1_day2 tr{
  height: 30px;
}

table.tide_data_table1 tr:nth-child(odd),
table.tide_data_table1_day2 tr:nth-child(odd){
  background-color: #f2f4f7;
}

table.tide_data_table1 th, table.tide_data_table1_day2 th{
  background-color: #C5DDF4;
  color: #393939;
  font-weight: bold;
  font-size: 1.2em;
  border-width: 0px;
  border-color: #FFFFFF;
  border-style: solid;
  padding: 5px 0;
}

table.tide_data_table1 th.no_border,
table.tide_data_table1_day2 th.no_border{
  border-style: none;
}

table.tide_data_table1 th:last-child,
table.tide_data_table1_day2 th:last-child{
  border-right-style: none;
}

#option_day1,
#option_day2{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 20px;
  width: 100px;
  border:none;
  cursor: pointer;
  border:none;
  cursor: pointer;
  border-radius: 3px;
  background: #527798;
  color: #FFFFFF;
  padding-right: 10px;
  text-align: -webkit-center;
}

.option_col label {
	position: relative;
}

.option_col label::after {
  display: block;
  content: "";
  position: absolute;
  background: url("/img/select_icon.svg") 0 0 no-repeat;
  height: 8px;
  width: 11px;
  z-index: 10;
  margin-top: -14px;
  right: 7px;
  pointer-events: none;
}

table.tide_data_table1 td,
table.tide_data_table1_day2 td{
  text-align: center;
}

table.tide_data_table1 td.tide_arrows,
table.tide_data_table1_day2 td.tide_arrows{
  text-align: left;
}

table.tide_data_table1 td.tide_bottom_table_line_default,
table.tide_data_table1_day2 td.tide_bottom_table_line_default{
  width: 1%;
  background-color: #E3E3E3;
  border-style: none;
}


table.tide_data_table1 td.tide_bottom_table_line_blue,
table.tide_data_table1_day2 td.tide_bottom_table_line_blue{
  background-color: #8AACCB;
}

table.tide_data_table1 td.tide_bottom_table_line_blue.blue_head,
table.tide_data_table1_day2 td.tide_bottom_table_line_blue.blue_head{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

table.tide_data_table1 td.tide_bottom_table_line_blue.blue_tail,
table.tide_data_table1_day2 td.tide_bottom_table_line_blue.blue_tail{
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

table.tide_data_table1 td.tide_arrows,
table.tide_data_table1_day2 td.tide_arrows{
  padding: 0px 5px;
}

table.tide_data_table1 td.tide_hour
table.tide_data_table1_day2 td.tide_hour{
  padding:0px 5px
}

/*
* カラム幅
*/

table.tide_data_table1 td,
table.tide_data_table1_day2 td{
  width: 12%;
}

table.tide_data_table1 th.time_col,
table.tide_data_table1_day2 th.time_col,
table.tide_data_table1 td.time_col,
table.tide_data_table1_day2 td.time_col{
  width: 8%;
}

table.tide_data_table1 th.scale_col,
table.tide_data_table1_day2 th.scale_col,
table.tide_data_table1 td.scale_col,
table.tide_data_table1_day2 td.scale_col{
  width: 1%;
}

table.tide_data_table1 th.tide_col,
table.tide_data_table1_day2 th.tide_col,
table.tide_data_table1 td.tide_col,
table.tide_data_table1_day2 td.tide_col{
  width: 60%;
}

/**
* 日付、日出、日入、満潮、干潮表示テーブル
*/

div.tide_data_table2 {
  display: flex;
  flex-direction: column;
}

div.tide_data_heads{
  display: flex;
  background: #EEF6FE;
}

div.tide_data_heads div{
  text-align: left; 
  margin-left: 35px;
  padding: 4px 0px;
}

div.sunrise-info_head {
  margin-left: 50px;
}

div.tide_datas {
  display: flex;
}

div.tide_datas div {
  margin-left: 35px;
  padding: 5px 0px;
}

div.sunrise-info {
  margin-left: 50px;
}