@charset "UTF-8";

/* TIDE & WEATHER(波と天気)
-------------------------------------------------------------------*/
.tide_weather {
  width: 936px;
  margin: 0 auto;
  padding: 24px 0 0;
  box-sizing: border-box;
  /*  border: 2px solid #dbddcd;*/
}

/*
.tide_weather h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 6px;
  margin: 0 auto 25px;
}
*/

.tide_weather h3 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.4em;
}

.tide_weather h3 span {
  display: inline-block;
  position: relative;
}

.tide_weather h3 span::before,
.tide_weather h3 span::after {
  content: "";
  width: 30px;
  height: 1px;
  background-color: #525252;
  position: absolute;
  top: 50%;
}

.tide_weather h3 span::before {
  left: -38px;
}

.tide_weather h3 span::after {
  right: -38px;
}


/* 202206追加ボタン（潮見表・タイドグラフの詳細を見る）
-------------------------------------------------------------------*/
.catch_item_tide_detail_action {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 7px 10px 0;
}
.catch_item_tide_detail_action * {
  line-height: 1;
}
.catch_item_tide_detail_action_btn {
}
.catch_item_tide_detail_action_btn a {
  padding: 12px 17px 14px;
  border-radius: 8px;
  display: block;
  border: #000 1px solid;
  text-decoration: none;
}
.catch_item_tide_detail_action_btn span {
  color: #000;
  font-size: 14px;
  position: relative;
  padding: 0 0 0 23px;
  font-weight: bold;
}
.catch_item_tide_detail_action_btn span::before {
  content: "";
  display: block;
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  left: 0;
  top: 1px;
  bottom: 0;
  margin: auto;
  background: #000;
  border-radius: 50%;
}
.catch_item_tide_detail_action_btn span::after {
  content: "";
  display: block;
  position: absolute;
  width: 0.25em;
  height: 0.25em;
  transform: rotate(-135deg);
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  left: 0.3em;
  top: 1px;
  bottom: 0;
  margin: auto;
}

@media print, screen and (min-width: 835px) {
  .catch_item_tide_detail_action_btn a {
    padding: 14px 20px 12px;
  }
  .catch_item_tide_detail_action_btn span {
    font-size: 16px;
    padding: 2px 0 0 25px;
  }
  .catch_item_tide_detail_action_btn span::before {
    width: 18px;
    height: 18px;
  }
}

body.blue .catch_item_tide_detail_action_btn a {
  border-color: #004cba;
}
body.blue .catch_item_tide_detail_action_btn span {
  color: #004cba;
}
body.blue .catch_item_tide_detail_action_btn span::before {
  background: #004cba;
}

body.green .catch_item_tide_detail_action_btn a {
  border-color: #0b795c;
}
body.green .catch_item_tide_detail_action_btn span {
  color: #0b795c;
}
body.green .catch_item_tide_detail_action_btn span::before {
  background: #0b795c;
}

body.black .catch_item_tide_detail_action_btn a {
  border-color: #c0060a;
}
body.black .catch_item_tide_detail_action_btn span {
  color: #c0060a;
}
body.black .catch_item_tide_detail_action_btn span::before {
  background: #c0060a;
}

body.purple .catch_item_tide_detail_action_btn a {
  border-color: #52136a;
}
body.purple .catch_item_tide_detail_action_btn span {
  color: #52136a;
}
body.purple .catch_item_tide_detail_action_btn span::before {
  background: #52136a;
}

/* 当日の潮汐情報
-------------------------------------------------------------------*/
.tide_information {
  float: left;
  width: 410px;
}

.tide_information h3 a {
  text-decoration: none;
  color: inherit;
}

.tide_graph {
  width: 410px;
  height: 238px;
  background: url(../img/choka/tide_graph_bg.png) no-repeat left top;
  position: relative;
  margin: 0 auto;
}

.tide_graph .hit__point {
  text-align: center;
  top: 100px;
  left: 250px;
  z-index: 999;
  position: absolute;
}

.tide_graph ul {
  position: absolute;
  bottom: 10px;
  left: 2px;
  font-size: 0;
}

.tide_graph li {
  display: inline-block;
  vertical-align: bottom;
  width: 4px;
  margin: 0 1px 0 0;
  padding: 0;
}

.tide_graph li img {
  vertical-align: bottom;
}

.tide_graph li:nth-child(3n) {
  margin-right: 3px;
}

.tide_graph_bg {
  padding-left: 3rem;
  padding-bottom: 2rem;
  position: relative;
  transform: scale(0.9);
  transform-origin: left top 0;
}

.tide_graph_bg span {
  position: absolute;
  width: 2.8rem;
  padding-right: 5px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* 当日の気象情報
-------------------------------------------------------------------*/
.weather_information {
  float: right;
  width: 500px;
  word-break: break-all;
}

.weather_information h3 {
  margin-bottom: 11px;
}

.weather_ul {
  text-align: center;
  line-height: 1.2;
  width: 100%;
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.weather_ul li {
  width: 25%;
  height: 91px;
  margin-bottom: 12px;
  padding: 0 5px 3px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}

.weather_ul li div p {
  display: table-cell;
  vertical-align: bottom;
}

.weather_ul li div p:nth-child(1) {
  width: 32px;
  padding: 0 0 1px 0;
}

.weather_ul li div p:nth-child(2) {
  color: #e26f1b;
  font-weight: bold;
  padding: 0 4px 0 0;
  font-size: 13px;
}

.weather_ul_2 {}

.weather_ul_2 li {
  width: 153px;
}

/* 個別調整 */
.weather_ul .temperature p span:nth-child(1) {
  color: #ff4b3e;
}

.weather_ul .temperature p span:nth-child(2) {
  color: #3486d8;
}

.weather_ul .water_temperature p:nth-child(2) {
  color: #27c2c4;
}

.weather_ul .tide p:nth-child(1),
.weather_ul .tide p:nth-child(1),
.weather_ul .wind p:nth-child(1) {
  width: 20px;
}

.weather_ul .sunrise p:nth-child(1),
.weather_ul .moonrise p:nth-child(1) {
  width: 40px;
}

.weather_ul .ebb p:nth-child(1) {
  width: 55px;
}

.weather_ul .sunrise div:nth-child(1) p:nth-child(2),
.weather_ul .moonrise div:nth-child(1) p:nth-child(2) {
  color: #e26f1b;
}

.weather_ul .sunrise div:nth-child(2) p:nth-child(2),
.weather_ul .moonrise div:nth-child(2) p:nth-child(2) {
  color: #6aaff5;
}

/* 背景画像 */
.weather_ul .moon {
  background: url(../img/choka/moon.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather {
  background: url(../img/choka/weather.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .temperature {
  background: url(../img/choka/temperature.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .water_temperature {
  background: url(../img/choka/water_temperature.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .sunrise {
  background: url(../img/choka/sunrise.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moonrise {
  background: url(../img/choka/moonrise.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .tide {
  background: url(../img/choka/tide.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .tide_level {
  background: url(../img/choka/tide_level.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .wave {
  background: url(../img/choka/wave.png) no-repeat center top / 152px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .wind {
  background: url(../img/choka/wind.png) no-repeat center top / 152px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .ebb {
  background: url(../img/choka/ebb.png) no-repeat center top / 152px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

/* 月齢画像 */
.weather_ul .moon.moon_bg00 {
  background: url(../img/choka/moon/00.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg01 {
  background: url(../img/choka/moon/01.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg02 {
  background: url(../img/choka/moon/02.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg03 {
  background: url(../img/choka/moon/03.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg04 {
  background: url(../img/choka/moon/04.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg05 {
  background: url(../img/choka/moon/05.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg06 {
  background: url(../img/choka/moon/06.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg07 {
  background: url(../img/choka/moon/07.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg08 {
  background: url(../img/choka/moon/08.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg09 {
  background: url(../img/choka/moon/09.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg10 {
  background: url(../img/choka/moon/10.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg11 {
  background: url(../img/choka/moon/11.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg12 {
  background: url(../img/choka/moon/12.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg13 {
  background: url(../img/choka/moon/13.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg14 {
  background: url(../img/choka/moon/14.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg15 {
  background: url(../img/choka/moon/15.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg16 {
  background: url(../img/choka/moon/16.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg17 {
  background: url(../img/choka/moon/17.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg18 {
  background: url(../img/choka/moon/18.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg19 {
  background: url(../img/choka/moon/19.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg20 {
  background: url(../img/choka/moon/20.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg21 {
  background: url(../img/choka/moon/21.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg22 {
  background: url(../img/choka/moon/22.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg23 {
  background: url(../img/choka/moon/23.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg24 {
  background: url(../img/choka/moon/24.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg25 {
  background: url(../img/choka/moon/25.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg26 {
  background: url(../img/choka/moon/26.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg27 {
  background: url(../img/choka/moon/27.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg28 {
  background: url(../img/choka/moon/28.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg29 {
  background: url(../img/choka/moon/29.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .moon.moon_bg30 {
  background: url(../img/choka/moon/30.png) no-repeat center 6px / 50px 50px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

/* 天気画像 */
.weather_ul .weather.weather_bg100 {
  background: url(../img/choka/weather/100.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg100N {
  background: url(../img/choka/weather/100N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg101 {
  background: url(../img/choka/weather/101.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg101N {
  background: url(../img/choka/weather/101N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg102 {
  background: url(../img/choka/weather/102.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg102N {
  background: url(../img/choka/weather/102N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg104 {
  background: url(../img/choka/weather/104.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg104N {
  background: url(../img/choka/weather/104N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg110 {
  background: url(../img/choka/weather/110.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg110N {
  background: url(../img/choka/weather/110N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg112 {
  background: url(../img/choka/weather/112.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg112N {
  background: url(../img/choka/weather/112N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg115 {
  background: url(../img/choka/weather/115.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg115N {
  background: url(../img/choka/weather/115N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg200 {
  background: url(../img/choka/weather/200.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg201 {
  background: url(../img/choka/weather/201.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg201N {
  background: url(../img/choka/weather/201N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg202 {
  background: url(../img/choka/weather/202.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg204 {
  background: url(../img/choka/weather/204.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg210 {
  background: url(../img/choka/weather/210.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg210N {
  background: url(../img/choka/weather/210N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg212 {
  background: url(../img/choka/weather/212.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg215 {
  background: url(../img/choka/weather/215.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg300 {
  background: url(../img/choka/weather/300.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg301 {
  background: url(../img/choka/weather/301.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg301N {
  background: url(../img/choka/weather/301N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg302 {
  background: url(../img/choka/weather/302.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg303 {
  background: url(../img/choka/weather/303.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg308 {
  background: url(../img/choka/weather/308.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg311 {
  background: url(../img/choka/weather/311.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg311N {
  background: url(../img/choka/weather/311N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg313 {
  background: url(../img/choka/weather/313.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg314 {
  background: url(../img/choka/weather/314.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg400 {
  background: url(../img/choka/weather/400.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg401 {
  background: url(../img/choka/weather/401.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg401N {
  background: url(../img/choka/weather/401N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg402 {
  background: url(../img/choka/weather/402.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg403 {
  background: url(../img/choka/weather/403.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg406 {
  background: url(../img/choka/weather/406.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg411 {
  background: url(../img/choka/weather/411.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg411N {
  background: url(../img/choka/weather/411N.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg413 {
  background: url(../img/choka/weather/413.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .weather.weather_bg414 {
  background: url(../img/choka/weather/414.png) no-repeat center top / 114px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

/* 満ち引き画像 */
.weather_ul .ebb.ebb_bg00 {
  background: url(../img/choka/ebb00.png) no-repeat center top / 152px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

.weather_ul .ebb.ebb_bg01 {
  background: url(../img/choka/ebb01.png) no-repeat center top / 152px 66px, url(../img/choka/information_line.png) no-repeat right center / 1px 91px;
}

/* =================================================================
		#color variation,
================================================================= */

body.blue .tide_weather h3 {
  color: #004cba;
}

body.blue .tide_weather h3 span::before,
body.blue .tide_weather h3 span::after {
  background-color: #3c72c1;
}

body.green .tide_weather h3 {
  color: #0b795c;
}

body.green .tide_weather h3 span::before,
body.green .tide_weather h3 span::after {
  background-color: #408b77;
}

body.black .tide_weather h3 {
  color: #c0060a;
}

body.black .tide_weather h3 span::before,
body.black .tide_weather h3 span::after {
  background-color: #b14447;
}

body.purple .tide_weather h3 {
  color: #52136a;
}

body.purple .tide_weather h3 span::before,
body.purple .tide_weather h3 span::after {
  background-color: #7b4590;
}


/* iphone6 - X 横 */
@media screen and (max-width: 667px) {

  .main_content {
    max-width: 635px;
    margin: 0 auto;
  }

  .tide_weather {
    width: 100%;
    padding: 0 10px;
  }

  .tide_weather h2 {
    margin-bottom: 10px;
  }

  .tide_weather h3 {
    font-size: 1.1em;
  }

  .tide_information {
    width: 246px;
    float: none;
    margin: 0 auto;
  }

  .weather_information {
    width: 100%;
    float: none;
    margin: 30px auto 0;
  }

  .tide_graph_bg {
    transform: scale(0.95) translateX(-50%);
    transform-origin: center;
  }

  .weather_ul li {
    width: 25%;
  }

  .clearfix:after {
    content: none;
  }

}


/* iphone6 - X 縦 */
@media screen and (max-width: 420px) {

  .main_content {
    max-width: 350px;
  }

  .tide_graph_bg {
    transform: scale(0.65) translateX(-50%);
    margin-top: -60px;
  }

  .weather_information {
    margin-top: -30px;
  }

  .weather_ul li div p:nth-child(2) {
    font-size: 11px;
  }

  .weather_ul .temperature {
    background: url(../img/choka/temperature.png) no-repeat center top / 114px 66px;
  }

  .weather_ul .moonrise {
    background: url(../img/choka/moonrise.png) no-repeat center top / 114px 66px;
  }

  .weather_ul .tide_level {
    background: url(../img/choka/tide_level.png) no-repeat center top / 114px 66px;
  }

  .weather_ul .ebb.ebb_bg01 {
    background: url(../img/choka/ebb01.png) no-repeat center top / 152px 66px;
  }

  .weather_ul li {
    width: 33.33%;
  }

}


/* under iphone5 */
@media screen and (max-width: 290px) {

  .tide_graph_bg {
    transform: scale(0.55) translateX(-50%);
    margin-top: -4.5em;
  }

}