@charset "UTF-8";
/*------------------------------------------
基本フォント設定
------------------------------------------*/
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, dt, dd, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure {
  color: #000;
  font-size: 16px;
  font-weight: 300;
  font-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  text-align: left;
  line-height: 24px;
  letter-spacing: 0;
  list-style-type: none;
  word-wrap: break-word;
}

/* リンクテキスト
------------------------------------------*/
a {
  color: #000;
}

.small {
  font-size: 14px;
  line-height: 1.5em;
}

.thin {
  opacity: .75;
}

/*------------------------------------------
基本エリア
------------------------------------------*/
.marineFish .item-box.plr0 {
  margin-left: 0;
  margin-right: 0;
}

.marineFish .mb0 {
  margin-bottom: 0 !important;
}

.marineFish .inner {
  padding: 10px;
}

/*------------------------------------------
タイトル
------------------------------------------*/
.marineFish .tit_vol01 {
  color: #4D73A4;
  line-height: 1em;
  border-top: 1px solid #4D73A4;
  border-bottom: 1px solid #4D73A4;
}

.marineFish .tit_vol01 span {
  display: block;
  border-left: 3px solid #4D73A4;
  padding-left: 5px;
  margin: 5px 0 5px 5px;
}

/*------------------------------------------
ボタン
------------------------------------------*/
.marineFish .btn_vol01 {
  background-color: #0C419A;
  border-radius: 4px;
}

.marineFish .btn_vol01 > * {
  display: block;
  color: #fff;
  font-weight: 600;
  line-height: 1em;
  text-align: center;
  padding: 15px 0;
}

.marineFish .btn_vol02 {
  width: 100%;
  text-align: center;
  border: 1px solid #0C419A;
  border-radius: 3px;
}

.marineFish .btn_vol02 > * {
  display: block;
  color: #0C419A;
  line-height: 1em;
  padding: 5px 0;
}

.marineFish .btn_vol02:not(:last-of-type) {
  margin-bottom: 10px;
}

.marineFish .btn_vol03 {
  width: 150px;
  height: 40px;
  background-color: #fff;
}

.marineFish .btn_vol03 > * {
  color: #0C419A;
  display: block;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}

/*------------------------------------------
スイッチ
------------------------------------------*/
/* タブメニュー
------------------------------------------*/
.marineFish .switchCont-switch {
  width: 100%;
  display: table;
  table-layout: fixed;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
}

.marineFish .switchCont-switch > * {
  display: table-cell;
  color: #0C419A;
  font-weight: 600;
  text-align: center;
  line-height: 1em;
  padding: 10px 0;
  border: 1px solid #0C419A;
  background-color: #fff;
  transition: .1s ease-in;
  cursor: pointer;
}

.marineFish .switchCont-switch > *:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.marineFish .switchCont-switch > *:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.marineFish .switchCont-switch > *.act {
  color: #fff;
  background-color: #0C419A;
  transition: .1s ease-out;
  cursor: default;
}

.marineFish .switchCont-content .item.hidden {
  display: none;
}

.marineFish .switchCont-content .item2 {
  display: none;
}

.marineFish .switchCont-content .item2.show {
  display: block;
}

/* 日付変更
------------------------------------------*/
.marineFish .switchDay {
  width: 100%;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  position: relative;
  display: table;
  table-layout: fixed;
}

.marineFish .switchDay .cont {
  display: table-cell;
  color: #0C419A;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2em;
  font-size: 16px;
}

.marineFish .switchDay .switch {
  width: 80px;
  height: 40px;
  background-color: #0C419A;
  border-radius: 3px;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.marineFish .switchDay .switch:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 50%;
  margin-left: -5px;
}

.marineFish .switchDay .switch.prev {
  left: 0;
}

.marineFish .switchDay .switch.prev:before {
  border-right-color: #fff;
  border-left: 0;
}

.marineFish .switchDay .switch.next {
  right: 0;
}

.marineFish .switchDay .switch.next:before {
  border-left-color: #fff;
  border-right: 0;
}

.marineFish .switchDay .switch.last {
  opacity: .3;
  transition: .1s ease-out;
  cursor: default;
}

/*------------------------------------------
リスト
------------------------------------------*/
.marineFish .list_vol01 li {
  border-bottom: 1px solid #ccc;
}

.marineFish .list_vol01 li > * {
  display: block;
  padding: 10px;
  font-weight: 600;
}

@media screen and (min-width: 700px) {
  .marineFish .list_vol01 {
    border-top: 1px solid #ccc;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
  }
  .marineFish .list_vol01 > * {
    width: 50%;
    float: left;
  }
  .marineFish .list_vol01 > *:nth-child(odd) {
    border-right: 1px solid #ccc;
  }
  .marineFish .list_vol01 li > * {
    color: #0C41FF;
  }
}

/*------------------------------------------
テーブル
------------------------------------------*/
.marineFish .tWeather_vol01, .marineFish .tWeather_vol02 {
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.marineFish .tWeather_vol01 thead, .marineFish .tWeather_vol02 thead {
  border-bottom: 1px solid #CCCCCC;
}

.marineFish .tWeather_vol01 thead td, .marineFish .tWeather_vol01 thead th, .marineFish .tWeather_vol02 thead td, .marineFish .tWeather_vol02 thead th {
  color: #666666;
  font-size: 14px;
  line-height: 1em;
  text-align: center;
  padding: 5px 0;
}

.marineFish .tWeather_vol01 tbody tr, .marineFish .tWeather_vol02 tbody tr {
  border-bottom: 1px solid #ccc;
}

.marineFish .rowmask {
  width: 100%;
  position: relative;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 45%);
}

.marineFish .rowmask.srf {
  height: 50px;
  top: -50px;
}

.marineFish .rowmask.mrf {
  height: 80px;
  top: -80px;
}

.marineFish .tWeather_vol01 tbody th, .marineFish .tWeather_vol01 tbody td, .marineFish .tWeather_vol02 tbody th, .marineFish .tWeather_vol02 tbody td {
  font-size: 15px;
  text-align: center;
}

.marineFish .tWeather_vol01 tbody th, .marineFish .tWeather_vol02 tbody th {
  font-weight: 600;
  line-height: 1em;
  padding: 5px 0;
  background-color: #F0F0F0;
}

.marineFish .tWeather_vol01 tbody td, .marineFish .tWeather_vol02 tbody td {
  line-height: 1.2em;
  padding: 5px 0;
}

.marineFish .tWeather_vol01 .em, .marineFish .tWeather_vol02 .em {
  font-weight: 600;
}

.marineFish .tWeather_vol01 .big, .marineFish .tWeather_vol02 .big {
  font-size: 20px;
}

.marineFish .tWeather_vol01 .ico img, .marineFish .tWeather_vol02 .ico img {
  width: 18px;
  height: 16px;
  position: relative;
  top: -2px;
}

.marineFish .tWeather_vol01 .ico img.wave-ico {
  margin-right: 1px;
}

.marineFish .tWeather_vol01 .temp img, .marineFish .tWeather_vol02 .temp img {
  height: 38px;
}

.marineFish .tWeather_vol01 dl, .marineFish .tWeather_vol02 dl {
  clear: both;
  overflow: hidden;
}

.marineFish .tWeather_vol01 dl > *, .marineFish .tWeather_vol02 dl > * {
  line-height: 1.2em;
}

.marineFish .tWeather_vol01 dl > *:nth-child(odd), .marineFish .tWeather_vol02 dl > *:nth-child(odd) {
  width: 2.5em;
  font-weight: 600;
  float: left;
}

@media screen and (min-width: 450px) {
  .marineFish .tWeather_vol01 dl > *:nth-child(odd), .marineFish .tWeather_vol02 dl > *:nth-child(odd) {
    margin-left: 50px;
  }
}

.marineFish .tWeather_vol01 .st01, .marineFish .tWeather_vol02 .st01 {
  font-size: 14px;
  text-align: center;
  line-height: 1.2em;
  margin-top: 5px;
}

.marineFish .tWeather_vol01 .st01 .h, .marineFish .tWeather_vol02 .st01 .h {
  color: #CC0000;
}

.marineFish .tWeather_vol01 .st01 .l, .marineFish .tWeather_vol02 .st01 .l {
  color: #0000CC;
}

.marineFish .info_area {
  position: relative;
  top: -20px;
}

.marineFish .info_area.mrf {
  top: -50px;
}

.marineFish .info_area .txt {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4em;
  width: 300px;
  margin: 0 auto 10px;
}

.marineFish .info_area .btn {
  display: block;
  font-size: 16px;
  font-weight:bold;
  text-align: center;
  width:300px;
  margin:0 auto;
  padding: 10px 4px;
  color: #fff;
  background-color: #0c419a;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.5);
}

.marineFish .appendix.mrf {
  position: relative;
  top: -25px;
}

/*------------------------------------------
メインインフォ
------------------------------------------*/
/* マップ
------------------------------------------*/
.mainArea.map {
  background-color: #AACCEE;
}

.mainArea.map > .map-box.wtmp_bg {
  background-color: #333;
}

.mainArea.map .info {
/*  padding: 5px 10px;*/
  padding: 0 10px 5px;
}

.mainArea.map .info > *:not(:last-child) {
  margin-bottom: 5px;
}

.mainArea.map > .cont {
  position: relative;
  border-bottom: 1px solid #fff;
}

#map_illust {
  width: 100px;
  height: 77px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: 0;
}

.yurari {
  -webkit-animation: yurari-yacht 3s ease-in-out;
  animation: yurari-yacht 3s ease-in-out;
}

@-webkit-keyframes yurari-yacht {
  0%   { -webkit-transform: rotate(0deg) translate(0%, 0%); }
  25%  { -webkit-transform: rotate(3deg) translate(0%, -5%); }
  75%  { -webkit-transform: rotate(-12deg) translate(0%, 15%); }
  100% { -webkit-transform: rotate(0deg) translate(0%, 0%); }
}

@keyframes yurari-yacht {
  0%   { transform: rotate(0deg) translate(0%, 0%); }
  25%  { transform: rotate(3deg) translate(0%, -5%); }
  75%  { transform: rotate(-12deg) translate(0%, 15%); }
  100% { transform: rotate(0deg) translate(0%, 0%); }
}

.purun {
  -webkit-animation: purun-fish 0.8s linear 0s 1;
  animation: purun-fish 0.8s linear 0s 1;
}

@-webkit-keyframes purun-fish {
  0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes purun-fish {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.mainArea.map .legend_vol01 {
  display: block;
  text-align: center;
}
.mainArea.map .legend_vol01 > * {
  display: inline-block;
}

.mainArea.map .legend_vol01 .tit {
  width: 70px;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}

.mainArea.map .legend_vol01 .cont {
  line-height: 1em;
}

.mainArea.map .legend_vol01 .cont li {
  font-size: 12px;
  display: inline-block;
  line-height: 1em;
}

.mainArea.map .legend_vol01 .cont .ico {
  display: inline-block;
  width: 21px;
  height: 19px;
  margin-right: 5px;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

.mainArea.map .legend_vol01 .cont .ico img {
  width: 25px;
  height: 19px;
}

.mainArea.map .legend_vol02 .item {
  text-align: center;
}

.mainArea.map .time {
  color: #fff;
  line-height: 1em;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.65);
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 4px;
}

@media screen and (max-width: 380px) {
  .mainArea.map .time {
    padding: 5px 10px;
  }
}

.mainArea.map .bg img {
  width: 100%;
}

a#map_highlight {
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 8px;
  -webkit-border-radius: 8px;
}

img#basemap.wtmpbase {
  z-index: 2;
  position: relative;
}

/* 波の情報とか
------------------------------------------*/
.mainArea.info {
  position: relative;
  background-color: #1497FF;
  overflow: hidden;
}

.mainArea.info .cont {
  position: relative;
  z-index: 99;
}

.mainArea.info .item {
  padding: 15px 10px;
  max-width: 395px;
  margin-left: auto;
  margin-right: auto;
}

.mainArea.info .item * {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

@media screen and (max-width: 370px) {
  .mainArea.info .item * {
    font-size: 14px;
  }
}

.mainArea.info .item.top {
  height: 100px;
}

.mainArea.info .item.bottom {
  height: 126px;
  position: relative;
}

.mainArea.info:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 126px;
  background-color: #006CBC;
  bottom: 0;
}

.mainArea.info:before {
  content: "";
  width: 375px;
  height: 220px;
  position: absolute;
  top: 2px;
  z-index: 9;
  right: 50%;
  margin-right: -187.5px;
}

.mainArea.info.marine:before {
  background-image: url("//smtgvs.weathernews.jp/s/marine/img/marine_bg.svg");
}

.mainArea.info.fishing:before {
  background-image: url("//smtgvs.weathernews.jp/s/marine/img/fishing_bg.svg");
}

@media screen and (max-width: 370px) {
  .mainArea.info:before {
    margin-right: -160px;
  }
}

.marineFish .mainArea.info .btn_vol03 {
  width: 190px;
  border-radius: 2px;
}

.marineFish .mainArea.info .btn_vol03:not(:last-child) {
  margin-bottom: 5px;
}

.marineFish .mainArea.info .btn_vol03 img {
  width: 32px;
}

@media screen and (max-width: 370px) {
  .marineFish .mainArea.info .btn_vol03 {
    width: 160px;
  }
  .marineFish .mainArea.info .btn_vol03 * {
    font-size: 13px;
  }
  .marineFish .mainArea.info .btn_vol03 * img {
    width: 24px;
  }
}

.mainArea.info .floatBttom {
  position: absolute;
  bottom: 10px;
  width: 375px;
  right: 50%;
  margin-right: -187.5px;
}

.mainArea.info .floatBttom > * {
  margin-left: auto;
}

@media screen and (max-width: 370px) {
  .mainArea.info .floatBttom {
    width: 320px;
    margin-right: -150px;
  }
}

.mainArea.info .area {
  font-size: 27px;
  margin-bottom: 7.5px;
  text-shadow: 0px 0px 10px #006cbc;
}

@media screen and (max-width: 320px) {
  .mainArea.info .area {
    font-size: 24px;
  }
}

.mainArea.info dl {
  overflow: hidden;
}

.mainArea.info dl dt {
  width: 2em;
  float: left;
}

.mainArea.info dl dd:before, .mainArea.info p.wave span:before {
  content: "：";
}

a.marinetop-link {
  height: 30px;
  line-height: 2em;
  font-size: 15px;
  padding: 0 10px;
}

a.marinetop-link img {
  background-color: #aaccee;
  width: 30px;
  height: 30px;
  float: left;
}

/* シミュレーションマップ凡例
------------------------------------------*/
.marine-legend {
  width: 100%;
}
.marine-legend ul {
  display: table;
  table-layout: fixed;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
}
.marine-legend ul.wave {
  padding-left: 22px;
}
.marine-legend ul.wind {
  padding-left: 28px;
}
.marine-legend ul.hidden {
  display: none;
}
.marine-legend ul li {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  padding: 2px 0 0;
  color: #fff;
  font-weight: 600;
  line-height: 1.3em;
}
.marine-legend ul.wave li,
.marine-legend ul.wind li {
  width: 31px;
}
.marine-legend ul.wave li.narrow,
.marine-legend ul.wind li.narrow {
  width: 23px;
}
.marine-legend ul.wave li.wide,
.marine-legend ul.wind li.wide {
  width: 40px;
}
.marine-legend img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.marine-legend img.wave, .marine-legend img.wind {
  width: 218px;
  height: 6px;
}

.marine-legend img.wtmp {
  width: 239px;
  height: 26px;
  position: relative;
  left: 10px;
}

footer .btn-01:not(:last-child) {
  margin-bottom: 10px;
}

/*------------------------------------------
/* 近くの灯台
------------------------------------------*/
.lighthouse .item {
  padding: 20px 10px;
}

.lighthouse .inner {
  padding: 10px 20px;
}

.lighthouse .table {
  width: 100%;
}

.lighthouse .table .obs_val {
  font-weight: bold;
}

.lighthouse .table .unit {
  font-weight: normal;
  font-size: 90%;
}

.lighthouse .table th, .lighthouse .table td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}

.lighthouse .table th {
  width: 30%;
  text-align: center;
  background-color: #FAFAFA;
}

/* データなし
------------------------------------------*/
.marineFish .no-data {
  margin: 20px auto 30px;
}

.marineFish .no-data p {
  padding: 15px 10px;
  color: #000;
  font-size: 15px;
  text-align: center;
  line-height: 1.7em;
}