@charset "UTF-8";
/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ エリア 
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
/*====================================================================================
基本エリア
====================================================================================*/
html, body {
  overflow-x: hidden;
  position: relative;
}

html:root {
  background-color: #f0f3f6;
}

@media screen and (max-width: 770px) {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 770px) {
  .sp {
    display: none;
  }
}

/*====================================================================================
ヘッダー
====================================================================================*/
#header {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.33);
  margin-bottom: 15px;
}

.header__item {
  display: table-cell;
  vertical-align: middle;
}

/*------------------------------------------
ロゴ
------------------------------------------*/
.wni-logo {
  width: 180px;
}

/*------------------------------------------
サイト名前
------------------------------------------*/
.siteName {
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

/*====================================================================================
フッター
====================================================================================*/
#footer > * {
  margin-top: 15px;
}

.copy {
  color: #666666;
  text-align: center;
  line-height: 1em;
  padding: 15px 0;
  background-color: #fff;
}

/*====================================================================================
コンテンツ
====================================================================================*/
@media screen and (min-width: 770px) {
  #content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    max-width: 1024px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
  }
  #main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  #sub {
    width: 320px;
    margin-left: 20px;
  }
  .contentBox {
    margin-top: 10px;
  }
  .contentBox .list-pan {
    margin-bottom: 20px;
  }
}

.contentBox {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------------
ブロック
------------------------------------------*/
.block {
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 15px;
}

.block.clear {
  background-color: transparent;
  box-shadow: none;
}

/*
.block:not(:last-child) {
  margin-bottom: 15px;
}
*/

.block > *:not(:last-child) {
  margin-bottom: 20px;
}

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

.block__lv03:not(:last-child) {
  margin-bottom: 15px;
}

.inner {
  padding: 10px;
}

.inner.pTB10 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.contentInner {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.pTB10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pB0 {
  padding-bottom: 0px;
}

/*------------------------------------------
wrap
------------------------------------------*/
.wrap--middle {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------------
col-2
------------------------------------------*/
*[class*="col-"] .col__item:not(:last-child) {
  margin-right: 15px;
}

*[class*="col-"] .col__item > *:not(:last-child) {
  margin-bottom: 10px;
}

@media screen and (max-width: 770px) {
  *[class*="col-"] .col__item:not(:last-child) {
    margin-right: 0px;
  }
}

@media screen and (min-width: 770px) {
  .col-2--pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .col-2--pc .col__item {
    width: 50%;
  }
  .col-2--pc .col__item:not(:last-child) {
    margin-right: 15px;
  }
  .col-2--pc .col__item > *:not(:last-child) {
    margin-bottom: 10px;
  }
  .col-2--pc .col__item.c100 {
    width: 100%;
  }
  .col-2--pc .col__item.c95 {
    width: 95%;
  }
  .col-2--pc .col__item.c90 {
    width: 90%;
  }
  .col-2--pc .col__item.c85 {
    width: 85%;
  }
  .col-2--pc .col__item.c80 {
    width: 80%;
  }
  .col-2--pc .col__item.c75 {
    width: 75%;
  }
  .col-2--pc .col__item.c70 {
    width: 70%;
  }
  .col-2--pc .col__item.c65 {
    width: 65%;
  }
  .col-2--pc .col__item.c60 {
    width: 60%;
  }
  .col-2--pc .col__item.c55 {
    width: 55%;
  }
  .col-2--pc .col__item.c50 {
    width: 50%;
  }
  .col-2--pc .col__item.c45 {
    width: 45%;
  }
  .col-2--pc .col__item.c40 {
    width: 40%;
  }
  .col-2--pc .col__item.c35 {
    width: 35%;
  }
  .col-2--pc .col__item.c30 {
    width: 30%;
  }
  .col-2--pc .col__item.c25 {
    width: 25%;
  }
  .col-2--pc .col__item.c20 {
    width: 20%;
  }
  .col-2--pc .col__item.c15 {
    width: 15%;
  }
  .col-2--pc .col__item.c10 {
    width: 10%;
  }
}

/*====================================================================================
検索
====================================================================================*/
/*------------------------------------------
ツール / 履歴
------------------------------------------*/
.global-info {
  width: 100%;
  max-width: 1024px;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

.global-info > * {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}

.global-info__tit {
  width: 18px;
}

.global-info > *:not(:last-child) {
  margin-right: 5px;
}

/*------------------------------------------
  ツール（検索地点 / 現在地）
  ------------------------------------------*/
.global-tool__item {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 5px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.global-tool__item:not(:last-child) {
  margin-right: 5px;
}

.global-tool__icon {
  width: 26px;
  height: 26px;
  margin-left: auto;
  margin-right: auto;
}

.global-tool__txt {
  color: #3569C0;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1em;
  margin-top: 3px;
}

/*------------------------------------------
  履歴
  ------------------------------------------*/
.global-history {
  padding-bottom: 3px;
}

.global-history > * {
  display: inline-block;
}

.global-history__item {
  width: 150px;
  padding: 5px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.global-history__item:not(:last-child) {
  margin-right: 5px;
}

.global-history__item > * {
  vertical-align: middle;
}

.global-history__icon {
  display: inline-block;
  width: 52px;
}

.global-history__txt {
  display: inline-block;
}

.global-history__txt * {
  font-size: 12px;
  font-weight: 600;
}

.global-history__area {
  width: 84px;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*------------------------------------------
  検索ボックス
  ------------------------------------------*/
.global-search {
  max-width: 1024px;
  padding: 10px;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.search-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.search-box .form-txt {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.search-box > *:not(:last-child) {
  margin-right: 4px;
}

.search-box .line {
  width: 1px;
  background-color: #ccc;
}

.form-txt {
  width: calc(100% - 60px);
  font-size: 16px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  line-height: 1em;
}

.form-txt::-webkit-input-placeholder {
  line-height: 23px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.form-txt:-ms-input-placeholder {
  line-height: 23px;
  transform: scale(0.9);
}

.form-txt::placeholder {
  line-height: 23px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.form-submit {
  padding: 2px 0;
  width: 46px;
  display: block;
  color: #3569C0;
  font-weight: 600;
  border: 1px solid #3569C0;
  border-radius: 2px;
}

.form-submit__icon {
  display: block;
  width: 24px;
  margin-left: auto;
  margin-right: auto;
}

.form-submit__text {
  display: block;
  font-size: 11px;
  line-height: 1em;
}

.form-submit.yellow {
  background-color: #FFFFE0;
}

/* Ver.02
  ------------------------------------------*/
.global-search.ver02 {
  width: 100%;
  display: table;
  table-layout: fixed;
}

.global-search.ver02 > * {
  display: table-cell;
  vertical-align: middle;
}

.global-search.ver02 .search-box {
  width: auto;
  padding-right: 10px;
}

.global-search.ver02 .global-tool {
  width: 100px;
}

.global-search.ver02 .global-tool__item {
  width: auto;
  height: auto;
  display: block;
  box-shadow: none;
  border: 1px solid #3569C0;
  text-align: center;
}

.global-search.ver02 .global-tool__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.global-search.ver02 .global-tool__icon img {
  vertical-align: top;
}

.global-search.ver02 .global-tool__txt {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}

@media screen and (max-width: 600px) {
  .global-search.ver02 .global-tool__icon {
    display: block;
    width: 18px;
    height: 18px;
  }
  .global-search.ver02 .form-txt, .global-search.ver02 .form-submit {
    height: 42px;
  }
  .global-search.ver02 .global-tool {
    width: 70px;
  }
  .global-search.ver02 .global-tool__txt {
    display: block;
    font-size: 10px;
  }
}

/*====================================================================================
メイン
====================================================================================*/
/*------------------------------------------
フラッシュ
------------------------------------------*/
.banner_mws {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #cfddf4;
  padding: 6px;
}

.thumb_mws {
  width: 65px;
  height: 45px;
  margin-right: 4px;
}

.thumb_mws:last-child {
  margin-right: 10px;
}

a.txtbtn_go, a.txtbtn_close {
  display: inline-block;
  border: 1px solid #0c419a;
  border-radius: 20px;
  padding: 4px;
  background-color: #fff;
  color: #0c419a;
  font-size: 13px;
  line-height: 13px;
}

a.txtbtn_go::before {
  display: inline-block;
  content: " ";
  width: 13px;
  height: 13px;
  background-image: url(https://smtgvs.weathernews.jp/onebox/img/icon_txtbtn_go.png);
  background-size: contain;
  margin-right: 1px;
  vertical-align: bottom;
}

a.txtbtn_close::before {
  display: inline-block;
  content: " ";
  width: 13px;
  height: 13px;
  background-image: url(https://smtgvs.weathernews.jp/onebox/img/icon_txtbtn_close.png);
  background-size: contain;
  margin-right: 1px;
  vertical-align: bottom;
}

/*====================================================================================
空写真
====================================================================================*/
*[class*="soraPhotoList--type"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

*[class*="soraPhotoList--type"] .soraPhotoList__item {
  width: 33.3%;
  height: auto;
  position: relative;
}

*[class*="soraPhotoList--type"] .soraPhotoList__item:before {
  content: "";
  display: block;
  padding-top: 100%;
}

*[class*="soraPhotoList--type"] .soraPhotoList__item .thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

*[class*="soraPhotoList--type"] .soraPhotoList__item img {
  max-width: 100%;
  /*height: 100%;*/
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

*[class*="soraPhotoList--type"] .soraPhotoList__time {
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 1em;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  left: 50%;
  bottom: 2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*------------------------------------------
タイプ01
------------------------------------------*/
.soraPhotoList--type01 .soraPhotoList__item:not(:first-child) {
  margin-left: 5px;
}

@media screen and (max-width: 770px) {
  .soraPhotoList--type01 .soraPhotoList__item {
    width: 25%;
  }
}

/*------------------------------------------
タイプ02
------------------------------------------*/
.soraPhotoList--type02 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (min-width: 770px) {
  .soraPhotoList--type02 {
    padding: 0px 30px 30px;
  }
  .soraPhotoList--type02 .soraPhotoList__item {
    width: 23%;
    margin: 1%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.13);
  }
  .soraPhotoList--type02 .soraPhotoList__time {
    font-size: 14px;
    padding: 10px 25px;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
  }
}

.banner_mws a + a {
  margin-left: 5px;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ サブ
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
/*====================================================================================
検索結果
====================================================================================*/
.topics_item {
  display: block;
  border-top: 1px solid #f0f0f0;
}

.topics_item > * {
  color: #3569C0;
  font-weight: 600;
  display: block;
  padding: 8px 10px;
}

/*====================================================================================
パンくずリスト
====================================================================================*/
.list-pan {
  padding: 0 10px;
  margin-bottom: 5px;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.list-pan__item {
  display: inline-block;
}

.list-pan__item:not(:last-child):not(:nth-last-child(2)):after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: .35em solid transparent;
  border-right: 0em;
  border-left: .35em solid #999;
  vertical-align: baseline;
  margin-left: .35em;
  margin-right: .35em;
}

.list-pan__item:last-child {
  margin-left :15px;
}

.list-pan__item * {
  text-decoration: underline;
  font-weight: 600;
}

.list-pan__item a {
  color: #3569C0;
}

/*====================================================================================
ニュース
====================================================================================*/
.list-news__item {
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #ccc;
  position: relative;
}

.list-news .inner {
  width: 100%;
  display: table;
  table-layout: fixed;
  padding: 0;
}

.list-news .inner > * {
  display: table-cell;
  vertical-align: middle;
}

.list-news__item a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.list-news__tit {
  font-weight: 600;
}

.list-news__img {
  width: 80px;
  height: 60px;
  position: relative;
}

.list-news__img img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.list-news__info {
  position: relative;
}

.list-news__info * {
  font-size: 12px;
  color: #999999;
}

.list-news__info .pr {
  position: absolute;
  right: 0;
}

.list-news__info .new {
  color: #fff;
  font-size: 10px;
  padding: 2.5px 5px;
  background-color: #00CCFF;
  border-radius: 50px;
  vertical-align: baseline;
}

.list-news__cont {
  padding-left: 10px;
}

.list-news__txt {
  padding: 10px 0;
  text-align: center;
}

.list-news__txt * {
  color: #2E5EB2;
  text-decoration: underline;
  font-weight: 600;
}

/*====================================================================================
おすすめメニュー
====================================================================================*/
.osusumeMenu__item {
  border-bottom: 1px solid #ccc;
  position: relative;
}

.osusumeMenu__item a {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}

.osusumeMenu__item .inner {
  width: 100%;
  display: table;
  table-layout: fixed;
  position: relative;
}

.osusumeMenu__item .inner > * {
  vertical-align: middle;
  display: table-cell;
}

.osusumeMenu__icon {
  width: 50px;
}

.osusumeMenu__icon img {
  width: 100%;
}

.osusumeMenu__content {
  padding-left: 15px;
}

.osusumeMenu__content *:not(.osusumeMenu__title) {
  color: #666;
  font-size: 12px;
}

.osusumeMenu__title {
  font-size: 16px;
  font-weight: 600;
}

/*====================================================================================
メニューアイコン・天気予報
====================================================================================*/
.list-menu, .list-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.list-menu__item, .list-area__item {
  width: 50%;
  border: 1px solid #ccc;
  border-bottom: none;
}

.list-menu__item:nth-child(odd), .list-area__item:nth-child(odd) {
  border-left: none;
}

.list-menu__item:nth-child(even), .list-area__item:nth-child(even) {
  border-left: none;
  border-right: none;
}

.list-menu.odd li:nth-last-child(2), .list-area.odd li:nth-last-child(2) {
  border-bottom: 1px solid #ccc;
}

.list-menu.odd li:last-child, .list-area.odd li:last-child {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.list-menu.even li:nth-last-child(2), .list-menu.even li:last-child, .list-area.even li:nth-last-child(2), .list-area.even li:last-child {
  border-bottom: 1px solid #ccc;
}

.list-area a {
  padding: 5px;
}

.list-menu a {
  padding: 5px 0;
}

.list-menu a, .list-area a {
  color: #3569C0;
  display: block;
}

.list-menu.--main a, .list-area.--main a {
  padding: 10px;
}

/*====================================================================================
メニューアイコン
====================================================================================*/
.list-menu .ico {
  width: 18px;
  display: inline-block;
  visibility: baseline;
  margin: 0 .25em
}

.list-menu .ico img {
  width: 100%;
}

/*====================================================================================
コピーライト
====================================================================================*/
.copy {
  color: #666666;
  text-align: center;
  line-height: 1em;
  padding: 15px 0;
  background-color: #fff;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ パーツ
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
/*====================================================================================
基本エリア
====================================================================================*/
h1, h2, h3, h4, h5, h6, p, a, 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-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  font-weight: 300;
  letter-spacing: 0;
  list-style-type: none;
  word-wrap: break-word;
}

img {
  width: 100%;
}

/*====================================================================================
タイトル
====================================================================================*/
.tit-01 {
  font-size: 18px;
  font-weight: 600;
}

.tit-02 {
  font-weight: 600;
}

.tit-03 {
  color: #fff;
  font-weight: 600;
  background-color: #333;
  line-height: 1em;
  padding: 7.5px 10px;
  position: relative;
}

.tit-03 .legend {
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  line-height: 1em;
  border: 1px solid #fff;
  padding: 3px 4px;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tit-page {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.tit-page .ver01 {
  color: #666666;
  display: block;
  line-height: 1em;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
}

/*====================================================================================
  テキスト
  ====================================================================================*/
.plr10 {
  padding-left: 10px;
  padding-right: 10px;
}

.sun, .txt-h {
  color: #FF3333 !important;
}

.sat, .txt-l {
  color: #3333FF !important;
}

.comment {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
}

.comment * {
  color: #4B4B4B;
}

.comment > *:not(:last-child) {
  margin-bottom: 10px;
}

.textRight {
  text-align: right;
}

.textLink {
  color: #3569C0;
  font-weight: 600;
  position: relative;
  text-decoration: underline;
}

.textLink + .textLink { /* 2020.08.17 */
  margin-left: 1.5em;
}

.textLink:before { /* 2020.08.17 */
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: .5em solid transparent;
  border-left: .75em solid #3569C0;
  border-right: none;
  transform: translateY(2px);
  margin-right: 5px;
}

/*====================================================================================
  ボタン
  ====================================================================================*/
.btn {
  width: 100%;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  background-color: #438FEC;
  border-radius: 4px;
  box-shadow: 0px 2px 3px 0px rgba(0,0,0, .5);  /* 2020.08.20 */
}

.btn > * {
  display: block;
  color: #fff;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 0;
  position: relative;
}

.btn > *:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: .35em solid transparent;
  border-left-color: #fff;
  border-right: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.btn.--more > *:after {
  border: .25em solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

.btn.--blue {
  background-color: #3569C0;
}

.btn.--blue > * {
  color: #fff;
}

.btn.--blue > *:after {
  border-left-color: #fff;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ トップページ
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
/*====================================================================================
お知らせ
====================================================================================*/
.index__alarm {
  padding: 10px;
  background-color: #FAFAFA;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.index__alarm * {
  color: #006DF0;
  font-weight: 600;
  text-decoration: underline;
}

.index__alarm .ico {
  width: 18px;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 5px;
}

.index__alarm .ico img {
  width: 100%;
}

/*====================================================================================
ページ・タイトル
====================================================================================*/
.index__tit {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

/*====================================================================================
ページ・タブ
====================================================================================*/
.index__tab {
  text-align: right;
}

.index__tab li {
  display: inline-block;
  background-color: #D1E2FF;
}

.index__tab li > * {
  display: block;
  color: #3569C0;
  line-height: 1em;
  font-weight: 600;
  padding: 5px;
  position: relative;
  font-size: 16px;
}

.index__tab li > *:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: .25em solid transparent;
  border-left: .25em solid #3569C0;
  border-right: 0;
  vertical-align: baseline;
  margin-left: 5px;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/*====================================================================================
現在の天気（2日）
====================================================================================*/
.weather-2day {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.weather-2day__day {
  font-size: 18px;
  font-weight: 600;
  line-height: 1em;
  text-align: center;
  padding: 5px;
  background-color: #E0E0E0;
}

.weather-2day .content {
  display: table;
  table-layout: fixed;
  margin-top: 5px;
}

.weather-2day .content > * {
  display: table-cell;
  vertical-align: top;
}

.weather-2day__item:not(:last-child) {
  margin-bottom: 20px;
}

.weather-2day__icon {
  width: 100px;
}

.weather-2day__icon img {
  width: 100%;
}

.weather-2day__temp {
  width: 100%;
  display: table;
  table-layout: fixed;
}

.weather-2day__temp > * {
  display: table-cell;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  vertical-align: top;
}

.weather-2day__temp > * span {
  font-size: 12px;
  vertical-align: top;
  margin-right: 2.5px;
}

.weather-2day__cont {
  padding-left: 10px;
}

.weather-2day__rainy {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin-top: 5px;
}

.weather-2day__rainy > * {
  vertical-align: top;
  display: table-cell;
}

.weather-2day__rainy .tit {
  width: 5em;
}

.weather-2day__rainy p {
  font-size: 12px;
  font-weight: 600;
  padding-right: 5px;
}

.weather-2day__rainy table {
  width: 100%;
}

.weather-2day__rainy table th, .weather-2day__rainy table td {
  text-align: center;
}

.weather-2day__rainy table th {
  color: #4B4B4B;
  font-size: 12px;
  background-color: #F0F0F0;
}

.weather-2day__rainy table td {
  font-weight: 600;
}

/*====================================================================================
現在の天気
====================================================================================*/
.weather-now {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: table;
  table-layout: fixed;
}

.weather-now > * {
  display: table-cell;
  vertical-align: top;
}

.weather-now__thumb {
  position: relative;
}

.weather-now__info {
  position: relative;
  margin-bottom: 5px;
}

.weather-now .btn {
  width: auto;
  right: 0;
  top: 3px;
  display: inline-block;
  position: absolute;
  border-radius: 2px;
}

.weather-now .btn > * {
  text-align: left;
  font-size: 10px;
  padding: 3px 13px 3px 3px;
}

.weather-now .btn > *:after {
  right: 5px;
}

.weather-now .btn02 {
  width: 100%;
  max-width: 375px;
  margin: 10px auto 0;
  background-color: #438FEC;
  border-radius: 4px;
  box-shadow: 0px 2px 3px 0px rgba(0,0,0, .5); /* 2020.08.20 */
}

.weather-now .btn02 .icon {
  width: 1.45em;
  vertical-align: sub;
  margin-right: 5px;
}

.weather-now .btn02 > * {
  display: block;
  color: #fff;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 0;
  position: relative;
}

.weather-now__img {
  width: 190px;
  position: relative;
  display: block;
  border: 1px solid #0c419a;
}

@media screen and (max-width: 770px) {
  .weather-now__img {
    width: 125px;
  }
}

.weather-now__img .time {
  color: #fff;
  font-size: 12px;
  line-height: 1em;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  top: 5px;
  left: 5px;
}

.weather-now__img img {
  width: 100%;
}

.weather-now__cont {
  width: 100%;
  padding-left: 10px;
}

.weather-now__ul {
  margin-top: 10px;
}

.weather-now__ul .switch_temp {
  width: 34px;
  height: 20px;
  vertical-align: sub;
  line-height: 0px;
  margin-left: 15px;
}

.weather-now__ul li {
  border-bottom: 1px solid #eee;
}

.weather-now__ul li:not(:last-child) {
  margin-bottom: 5px;
}

.weather-now__ul li .tit {
  width: 3em;
  display: inline-block;
}

.weather-now__ul li .btn {
  top: -2px;
}

.weather-now__ul li .btn img {
  width: 24px;
}

.timeStamp {
  color: #fff;
  line-height: 1em;
  font-weight: 300;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.soraPhotoList--type01 .timeStamp {
  font-size: 1.1rem;
  padding: 2.5px 5px;
}

.soraPhotoList--type02 .timeStamp {
  font-size: 1.6rem;
  padding: 10px 15px;
}

@media screen and (max-width: 770px) {
  .soraPhotoList--type02 .timeStamp {
    font-size: 1.1rem;
    padding: 2.5px 5px;
  }
}

/*====================================================================================
SNSシェア
====================================================================================*/
#sharing {
  overflow: hidden;
  max-width: 450px;
  min-width: 270px;
  line-height: 1;
  padding: 5px 20px;
  margin: 0 auto;
  background-color: #fff;
}

#sharing.pc_sns {
  display: none;
}

#sharing.sp_sns {
  display: block;
}

.sns-share li {
  float: left;
  padding: 5px;
  width: 25%;
  list-style-type: none;
}

.sns-share li a {
  display: block;
  height: 60px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.sns-share li a, .sns-share li a:link, .sns-share li a:visited {
  text-decoration: none;
  position: relative;
}

.sns-share li a:hover, .sns-share li a:active {
  opacity: 0.8;
}

/*------------------------------------------
Twitter & Facebook
------------------------------------------*/
.sns-share .twitter a, .sns-share .facebook a {
  padding: 7px;
}

/* カウント
------------------------------------------*/
.sns-share .twitter .count,
.sns-share .facebook .count {
  font-size: 12px;
  border-radius: 3px;
  line-height: 1em;
  margin-top: 1px;
}

/*------------------------------------------
Twitter
------------------------------------------*/
.sns-share .twitter a {
  background-color: #01a7e1;
}

.sns-share .twitter a div {
  font-size: 12px;
  line-height: 1.4;
  display: block;
}

.sns-share .twitter svg {
  width: 25px;
  height: 25px;
}

.sns-share .twitter .count {
  background-color: #007db1;
  box-shadow: 1px 1px 1px 0 rgba(0, 47, 63, 0.2) inset;
}

/*------------------------------------------
Facebook
------------------------------------------*/
.sns-share .facebook svg {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.sns-share .facebook a {
  background-color: #3c599d;
}

.sns-share .facebook .count {
  background-color: #1b2f72;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 21px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/*------------------------------------------
LINE
------------------------------------------*/
.sns-share .line a {
  padding: 2px;
  background-color: #00c300;
}

.sns-share .line svg {
  width: 35px;
  height: 35px;
}

.sns-share .line a div {
  display: block;
  font-size: 14px;
  line-height: 0.3;
}

/*------------------------------------------
メール
------------------------------------------*/
.sns-share .mail a {
  padding: 7px;
  background-color: #666666;
}

.sns-share .mail svg {
  width: 24px;
  height: 24px;
}

.sns-share .mail a div {
  display: block;
}

@media only screen and (min-width: 952px) {
  .sns-share .facebook .count {
    display: block;
    height: 21px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .sns-share .twitter a div {
    display: block;
  }
  .sns-share .line a div {
    display: block;
    font-size: 14px;
    line-height: 0.3;
  }
  .sns-share .twitter .count,
  .sns-share .facebook .count {
    margin-top: 1px;
  }
}

@media only screen and (max-width: 760px) {
  .sns-share {
    background: #fff;
    max-width: 400px;
  }
  .sns-share:last-child {
    margin-bottom: 0;
  }
  .sns-share .twitter a div {
    display: none;
  }
  .sns-share .twitter a {
    height: 25px;
  }
  .sns-share .twitter svg,
  .sns-share .facebook svg,
  .sns-share .mail svg {
    width: 15px !important;
    height: 15px !important;
  }
  .sns-share .line svg {
    width: 23px !important;
    height: 23px !important;
  }
  .sns-share .twitter a,
  .sns-share .facebook a,
  .sns-share .mail a {
    padding: 5px !important;
  }
  .sns-share .line a {
    padding: 1px !important;
  }
  .sns-share .facebook a {
    height: 25px;
  }
  .sns-share .facebook .count {
    display: none;
  }
  .sns-share li {
    position: relative;
  }
  .sns-share svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .sns-share .line a div {
    display: none;
  }
  .sns-share .line a {
    height: 25px;
  }
  .sns-share .mail a div {
    display: none;
  }
  .sns-share .mail a {
    height: 25px;
  }
}

@media only screen and (max-width: 571px) {
  #sharing {
    padding-left: 15%;
    padding-right: 15%;
  }
  .sns-share .facebook svg {
    margin-left: 0;
  }
  .sns-share .facebook .count {
    display: none;
  }
}

@media only screen and (max-width: 376px) {
  #sharing {
    padding-left: 10%;
    padding-right: 10%;
  }
  .sns-share .facebook svg {
    margin-left: 0;
  }
  .sns-share .facebook .count {
    display: none;
  }
}

@media only screen and (max-width: 320px) {
  .sns-share .facebook svg {
    margin-left: 0;
  }
  .sns-share .facebook .count {
    display: none;
  }
}

/*====================================================================================
時間天気
====================================================================================*/
.weather-day {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.weather-day__group {
  position: relative;
}

.weather-day__day {
  padding: 5px;
  background-color: #E0E0E0;
  position: relative;
  border-bottom: 1px solid #ccc;
}

.weather-day__day > * {
  font-weight: 600;
}

.weather-day__head, .weather-day__item {
  width: 100%;
  display: table;
  table-layout: fixed;
  padding: 5px 0;
}

.weather-day__head > *, .weather-day__item > * {
  display: table-cell;
  line-height: 1.25em;
  text-align: center;
}

.weather-day__head {
  background-color: #F0F0F0;
}

.weather-day__head > * {
  font-weight: 600;
  vertical-align: middle;
}

.weather-day__info {
  padding: 5px 0;
  background-color: #FFFCCC;
  border-bottom: 1px solid #eee;
}

.weather-day__info * {
  text-align: center;
  line-height: 1em;
  vertical-align: baseline;
}

.weather-day__info .ico {
  display: inline-block;
  width: 16px;
  vertical-align: middle;
}

.weather-day__info .ico img {
  width: 100%;
}

.weather-day__item {
  border-bottom: 1px solid #eee;
}

.weather-day__item > * {
  vertical-align: middle;
}

.weather-day__option {
  color: #3569C0;
  font-size: 12px;
  line-height: 1em;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.weather-day__option:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: .35em solid transparent;
  border-left-color: #3569C0;
  border-right: 0;
  margin-left: 5px;
}

.weather-day__btn {
  width: 100%;
  padding: 25px 10px;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white, white, white);
  background: linear-gradient(rgba(255, 255, 255, 0), white, white, white);
  position: absolute;
  bottom: 0;
}

.weather-day__icon {
  text-align: center;
}

.weather-day__icon img {
  width: 50px;
}

.weather-day__body + .textRight { /* 2020.08.17 */
  margin-top: 15px;
}

/*====================================================================================
10日天気
====================================================================================*/
.weather-10day {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.weather-10day__head, .weather-10day__item {
  width: 100%;
  display: table;
  table-layout: fixed;
  padding: 5px 0;
}

.weather-10day__head > *, .weather-10day__item > * {
  display: table-cell;
  line-height: 1.25em;
  text-align: center;
}

.weather-10day__icon {
  text-align: center;
}

.weather-10day__icon img {
  width: 50px;
}

.weather-10day__head {
  background-color: #F0F0F0;
}

.weather-10day__head > * {
  font-weight: 600;
  vertical-align: middle;
}

.weather-10day__item {
  border-bottom: 1px solid #eee;
}

.weather-10day__item > * {
  vertical-align: middle;
}

/*====================================================================================
週間天気
====================================================================================*/
.weather-weekly {
  width: 100%;
  max-width: 500px;
  display: table;
  table-layout: fixed;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.weather-weekly > * {
  display: table-cell;
}

.weather-weekly * {
  text-align: center;
  line-height: 1.35em;
}

.weather-weekly__item {
  border: 1px solid #eee;
}

.weather-weekly__day {
  line-height: 1em;
  font-weight: 600;
  padding: 5px 0;
}

.weather-weekly__txt {
  padding: 5px 0;
}

.weather-weekly__txt * {
  font-weight: 600;
}

/*====================================================================================
YouTube
====================================================================================*/
.youtube {
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.youtube__info {
  padding: 10px 0;
}

.youtube__info * {
  color: #3569C0;
}

.youtube__cont {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube__cont iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*====================================================================================
観測値
====================================================================================*/
.obs-data {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.obs-data > *:not(:last-child) {
  margin-bottom: 15px;
}

.obs-data__buttons {
  width: 100%;
  display: table;
  table-layout: fixed;
  background-color: #F0F0F0;
  border-radius: 8px;
}

.obs-data__buttons > * {
  color: #606060;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1em;
  text-align: center;
  display: table-cell;
  position: relative;
  padding: 8px 0;
}


.obs-data__buttons span {
  position: relative;
  z-index: 2;
}

.obs-data__buttons > *:not(:last-child):before {
  content: "";
  display: block;
  width: 1px;
  height: 50%;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.obs-data__buttons > *.selected {
  color: #fff;
}

.obs-data__buttons > *.selected:after {
  content: "";
  display: block;
  width: 105%;
  height: 125%;
  background-color: #438FEC;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);
}


.obs-data .obs-data__graph div {
  display: none;
}

.obs-data .obs-data__graph div:first-child {
  display: block;
}

.obs-data > .obs-data__table {
  width: 100%;
  margin-bottom: 0; /* 2020.08.17 */
}

.obs-data > .obs-data__table + .btn {
  position: relative;
  max-width: auto;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none; /* 2020.08.20 */
}

.obs-data > .obs-data__table + .btn > * {
  width: 100%;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  background-color: #438FEC;
  border-radius: 4px;
  z-index: 1;
  box-shadow: 0px 2px 3px 0px rgba(0,0,0, .5);  /* 2020.08.20 */
}

.obs-data > .obs-data__table + .btn:after {
  content: "";
  display: block;
  position: absolute;
  width: 450px;
  height: 30px;
  background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75), rgba(255,255,255,1));
  position: absolute;
  left: 50%;
  bottom : 34px;
  z-index: 0;
  transform: translateX(-50%);
}

.obs-data__table thead {
  background-color: #666666;
}

.obs-data__table thead td {
  padding: 5px 0;
  border: 1px solid #fff;
}

.obs-data__table thead * {
  color: #fff;
  text-align: center;
  line-height: 1.25em;
}

.obs-data__table thead * p {
  font-size: 12px;
}

.obs-data__table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.obs-data__table tbody td {
  text-align: center;
  border: 1px solid #eee;
  padding: 5px 0;
}

/*------------------------------------------
forecast
------------------------------------------*/
.map-forecast {
  position: relative;
}

.map-forecast__time {
  color: #fff;
  font-weight: 600;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}

.map-forecast__week {
  width: 100%;
  display: table;
  table-layout: fixed;
  background-color: #bfcfec;
}

.map-forecast__week > * {
  display: table-cell;
  text-align: center;
  padding: 10px 0;
  line-height: 1em;
  position: relative;
}

.map-forecast__week > *.act {
  color: #fff;
  font-weight: 600;
  background-color: #333333;
}

.map-forecast__week > *.act:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
  position: absolute;
  left: 50%;
  top: -5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*------------------------------------------
radar
------------------------------------------*/
.map-radar {
  position: relative;
}

.map-radar__time {
  width: 90px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  display: block;
  line-height: 1em;
  padding: 4px 0;
  background-color: rgba(0, 0, 0, 0.65);
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.map-radar__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #333333;
}

.map-radar__legend li {
  line-height: 1em;
}

.map-radar__legend .item {
  width: 15px;
  height: 15px;
  margin: 7.5px;
  border: 1px solid #fff;
}

.map-radar__legend .item.--lv01 {
  background-color: #ffffff;
}

.map-radar__legend .item.--lv02 {
  background-color: #00dcea;
}

.map-radar__legend .item.--lv03 {
  background-color: #0c05ba;
}

.map-radar__legend .item.--lv04 {
  background-color: #fff100;
}

.map-radar__legend .item.--lv05 {
  background-color: #f40002;
}

.map-radar__legend .name {
  color: #fff;
}

.map-radar__slider {
  padding: 10px 0;
  overflow: hidden;
  background-color: #333333;
}

.map-radar__slider .input-range {
  display: block;
  height: 4px;
  width: 300px;
  margin: auto;
  position: relative;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: initial;
}

.map-radar__slider .input-range:before, .map-radar__slider .input-range:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  z-index: 0;
}

.map-radar__slider .input-range:before {
  background-color: #d8d8d8;
  left: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.map-radar__slider .input-range:after {
  background-color: #ff9900;
  right: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.map-radar__slider .input-range input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  display: block;
  outline: none;
}

.map-radar__slider .input-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  border: none;
  width: 20px;
  height: 20px;
  display: block;
  background-color: #0043df;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  top: -8px;
  z-index: 1;
}

.map-radar__legend + .map-radar__slider {
  position: relative;
}

.map-radar__legend + .map-radar__slider:before {
  content: "";
  display: block;
  width: 95%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.map-radar .slider__time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.map-radar .slider__time li {
  color: #fff;
  text-align: center;
  font-size: 14px;
  position: relative;
  padding-top: 7px;
  position: relative;
}

.map-radar .slider__time li:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
  position: absolute;
  top: 2px;
  left: 50%;
}

@media screen and (max-width: 320px) {
  .map-radar .slider__time li.past:after {
    left: 0;
  }
  .map-radar .slider__time li.future:after {
    left: auto;
    right: 0;
  }
}

.map-radar .slider__time li.past {
  left: -24px;
}

.map-radar .slider__time li.past:after {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.map-radar .slider__time li.current:after {
  display: none;
}

.map-radar .slider__time li.future {
  left: auto;
  right: -24px;
}

.map-radar .slider__time li.future:after {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*------------------------------------------
warn
------------------------------------------*/
.map-warn {
  position: relative;
}

.map-warn__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #333333;
}

.map-warn__legend li {
  line-height: 1em;
}

.map-warn__legend .item {
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
  margin: 7.5px 2px;
}

.map-warn__legend .item:before {
  content: "";
  display: inline-block;
  vertical-align: baseline;
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.map-warn__legend .item.--lv01:before {
  background-color: #ffffff;
}

.map-warn__legend .item.--lv02:before {
  background-color: #00dcea;
}

.map-warn__legend .item.--lv03:before {
  background-color: #0c05ba;
}

.map-warn__legend .item.--lv04:before {
  background-color: #fff100;
}

.map-warn__legend .item.--lv05:before {
  background-color: #f40002;
}

@media screen and (max-width: 320px) {
  .map-warn__legend .item {
    font-size: 12px;
  }
  .map-warn__legend .item:before {
    width: 10px;
    height: 10px;
    top: 0;
  }
}

.warn-list .tit-03 {
  margin-bottom: 15px;
}

.warn-list__item {
  width: 100%;
  display: table;
  table-layout: fixed;
  border: 1px solid #ccc;
}

.warn-list__item > * {
  display: table-cell;
  vertical-align: middle;
}

.warn-list__item:not(:last-child) {
  border-bottom: 0;
}

.warn-list__tit {
  width: 8em;
  color: #3569C0;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  background-color: #F0F0FF;
  border-right: 1px solid #CCCCCC;
  padding: 10px 0;
}

.warn-list__list {
  padding: 0 1em;
}

.warn-list__list > * {
  display: inline-block;
  line-height: 1em;
}

.warn-list__list.--pl0 {
  padding: 0;
}

.warn-list__icon {
  font-weight: 600;
  background-color: #efefef;
  padding: 5px 15px;
  border-radius: 2px;
}

.warn-list__icon.--note {
  background-color: #F0BA19;
}

.warn-list__icon.--alarm {
  background-color: #D90201;
  color: #fff;
}

.warn-table {
  max-width: 375px;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.warn-table > *:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.warn-table__day, .warn-table__time, .warn-table__cont {
  width: 100%;
  display: table;
  table-layout: fixed;
}

.warn-table__day > *, .warn-table__time > *, .warn-table__cont > * {
  display: table-cell;
  text-align: center;
}

.warn-table__day > *:not(:last-child), .warn-table__time > *:not(:last-child), .warn-table__cont > *:not(:last-child) {
  border-right: 1px solid #ccc;
}

.warn-table__day > *.--tit, .warn-table__time > *.--tit, .warn-table__cont > *.--tit {
  font-weight: 600;
  width: 20%;
}

.warn-table__day {
  background-color: #E0E0E0;
}

.warn-table__day__item {
  font-weight: 600;
}

.warn-table__time {
  background-color: #F0F0F0;
}

.warn-table .--note {
  background-color: #F0BA19;
}

.warn-table .--alarm {
  background-color: #D90201;
}

.warn-table .--warning {
  background-color: #5F00BD;
}

.warn-table .--block1 {
  width: 10%;
}

.warn-table .--block2 {
  width: 20%;
}

.warn-table .--block3 {
  width: 30%;
}

.warn-table .--block4 {
  width: 40%;
}

.warn-table .--block5 {
  width: 50%;
}

.warn-table .--block6 {
  width: 60%;
}

.warn-table .--block7 {
  width: 70%;
}

.warn-table .--block8 {
  width: 80%;
}

/*------------------------------------------
LiveCam
------------------------------------------*/
.map-livecam > *:not(:last-child) {
  border-bottom: 1px solid #999999;
}

.map-livecam__area, .map-livecam__playback {
  padding: 5px 0;
  background-color: #333333;
}

.map-livecam__area *, .map-livecam__playback * {
  color: #fff;
}

.map-livecam__area {
  text-align: center;
}

.map-livecam__playback {
  padding: 10px 0;
  text-align: center;
}

.map-livecam__playback__btn {
  display: inline-block;
  width: 65px;
  line-height: 1em;
  text-align: center;
  background-color: #0DB381;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 5px 0;
  position: relative;
}

.map-livecam__playback__btn:before {
  content: "";
  display: inline-block;
  width: 0px;
  height: 0px;
  border: .45em solid transparent;
  border-left: .65em solid #fff;
  border-right: 0;
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin-right: 5px;
}

.map-livecam__playback__info {
  display: inline-block;
  background-color: #06170E;
  width: 65px;
  text-align: center;
  line-height: 1em;
  padding: 5px 0;
  border-radius: 2px;
}

.map-livecam__playback > *:not(:last-child) {
  margin-right: 5 px;
}

.livecam-table {
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FAFAFA;
  border: 1px solid #979797;
}

.livecam-table__tit {
  padding: 5px;
  background-color: #F0F0F0;
  border-bottom: 1px solid #979797;
}

.livecam-table__tit * {
  font-weight: 600;
}

.livecam-table__cont {
  padding: 5px 5px 10px;
}

.livecam-table__cont__item {
  width: 49%;
  display: inline-block;
  font-weight: 600;
  margin-top: 5px;
  border-bottom: 1px solid #ccc;
}

.livecam-table__cont__item .tit {
  width: 3.5em;
  display: inline-block;
}

.list-link {
  text-align: center;
}

.list-link li {
  font-size: .8rem;
  display: inline;
}

.list-link li a {
  color: #0c419a;
}

.list-link li:not(:last-child) {
  padding: 0;
  margin: 0 !important;
}

.list-link > :not(:last-child):after {
  content: "|";
  font-weight: 300;
  margin-left: .35em;
  margin-right: .35em;
  opacity: .2;
}

/*====================================================================================
.arealist
====================================================================================*/
#arealist {
  margin-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
  margin-top: 10px;
}

.arealist dl {
  display: table;
  overflow: hidden;
  padding-bottom: 10px;
  font-size: 0;
}

.arealist dl > * {
  display: table-cell;
}

.arealist dt {
  width: 64px;
  font-weight: normal;
  text-align: center;
  padding-right: 10px;
}

.arealist dt > * {
  display: block;
  border: 1px solid #86afe4;
}

.arealist dd {
  line-height: 24px;
}

.arealist dd a {
  display: inline-block;
}

.arealist dd > *:not(:last-child) {
  margin-right: 5px;
}

.arealist a {
  color: #00f;
}

#top_link {
  background-color: #fff;
  border: 1px solid #cc0000;
  border-radius: 8px;
  margin-bottom: 15px;
}

#top_link .index__tit {
  color: #c00;
}

#top_link .top_link__btn {
  display: inline-block;
}

#top_link .top_link__btn > * {
  display: block;
  color: #fff;
  background-color: #3569C0;
  line-height: 1em;
  font-weight: 600;
  padding: 5px;
  position: relative;
  font-size: 14px;
  border-radius: 2px;
}

#top_link .top_link__btn > *:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: .25em solid transparent;
  border-left: .25em solid #fff;
  border-right: 0;
  vertical-align: baseline;
  margin-left: 5px;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

#main > #top_link {
  padding-bottom: 0;
  margin-left: 10px;
  margin-right: 10px;
}

#main #top_link .inner {
  width: 100%;
  display: table;
}

#main #top_link .inner > * {
  display: table-cell;
  vertical-align: middle;
}

#main #top_link .images {
  width: 100px;
}

#main #top_link img {
  width: 100%;
}

#main #top_link .content {
  text-align: right;
  padding-left: 10px;
}

#main #top_link .index__tit {
  text-align: left;
}

#main #top_link .top_link__btn {
  margin-left: auto;
}

#sub #top_link .images {
  margin-bottom: 10px;
}

#sub #top_link .content {
  text-align: center;
}

.switchTab {
  width: 100%;
  max-width: 510px;
  display: table;
  table-layout: fixed;
  background-color: #F0F0F0;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.switchTab > * {
    color: #606060;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1em;
    text-align: center;
    display: table-cell;
    position: relative;
    padding: 8px 0;
}

.switchTab span {
  position: relative;
  z-index: 2;
}

.switchTab > *:not(:last-child):before {
  content: "";
  display: block;
  width: 1px;
  height: 50%;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.switchTab > *.act {
  color: #fff;
}

.switchTab > *.act:after {
  content: "";
  display: block;
  width: 105%;
  height: 125%;
  background-color: #438FEC;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);
}

.switchContent__item {
  display: none;
}

.switchContent__item.act {
  display: block;
}

.ad img {
  width: 100%;
}

/* 2020.0818 */
#main {
  transition: .45s;
  opacity: 1;
}

#main.act {
  transition: .45s;
  opacity: .5;
}
#card_neighbor {
  transition: .45s;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
}

#card_neighbor.act {
  transition: .45s;
  box-shadow: 0px 2px 8px 1px rgba(112,216,216,1);
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ バナー
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
.bannerArea {
  max-width: 1024px;
  margin: 10px;
}

@media screen and (min-width: 770px) {
  .bannerArea {
    margin-left: auto;
    margin-right: auto;
  }
}

/*====================================================================================

====================================================================================*/
.banner {
  max-width: 684px;
  background-color: #fff !important;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 376px) {
  .banner {
    width: auto;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
  }
}

@media screen and (min-width: 770px) {
  .banner br {
    display: none;
  }
}
/*====================================================================================
インナー
====================================================================================*/
.banner .inner {
  width: 100%;
  padding-right: 35px;
  display: table;
  position: relative;
}

.banner .inner:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left: 10px solid #ccc;
  border-right: none;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  background: transparent !important;
}

.banner .inner > * {
  display: table-cell;
  vertical-align: top;
}

@media screen and (max-width: 374px) {
  .banner .inner {
    padding-right: 15px;
  }

  .banner .inner:after {
    border-width: 6px;
    right: 5px;
  }
}

/*====================================================================================
アイコン
====================================================================================*/
.banner__icon, .banner__icon img {
  width : 70px;
  height: 70px;
}

.banner__icon img {
  object-fit: cover;
}

@media screen and (max-width: 374px) {
  .banner__icon, .banner__icon img {
    width : 55px;
    height: 55px;
  }  
}

@media screen and (min-width: 770px) {
  .banner__icon, .banner__icon img {
    width : 50px;
    height: 50px;
  }  
}

/*====================================================================================
コンテント
====================================================================================*/
.banner__content {
  width: 100%;
  padding-left: 10px;
}

/*====================================================================================
タイトル
====================================================================================*/
.banner__title {
  width: 100%;
  line-height: 1.3em;
  font-weight: 600;
  margin-bottom: 5px;
}


.banner__title > * {
  color: #fff;
  display: inline-block;
  padding: 5px;
}

@media screen and (max-width: 374px) {
  .banner__title {
    font-size: 13px;
  }
}

/*====================================================================================
テキスト
====================================================================================*/
.banner__text {
  font-size: 15px;
  font-weight: 600;
  color: #303030;
}

@media screen and (max-width: 374px) {
  .banner__text {
    font-size: 13px;
  }
}

/*====================================================================================
台風
====================================================================================*/
/*------------------------------------------
ノーマル
------------------------------------------*/
.banner, .banner .inner:after, .banner__title > * {
  border-color     : #880254;
  border-left-color: #880254;
  background-color : #880254;
}

/*------------------------------------------
台風
------------------------------------------*/
.banner.typhoon, .banner.typhoon .inner:after, .banner.typhoon .banner__title > * {
  border-color     : #C00000;
  border-left-color: #C00000;
  background-color : #C00000;
}

/*▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼
▼ マップ
▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼*/
/*====================================================================================
スイッチ
====================================================================================*/
.map { margin-left: 0; margin-right: 0; position: relative; }
.map .map-box { position: relative;}
.map-box figure { position: relative; }

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

.mapswicthArea > *:not(:last-child) {
  margin-bottom: 15px;
}

.mapswitchTab {
  display: table;
  width: 100%;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.03);
  table-layout: fixed;
}

.mapswitchTab > * {
  display: table-cell;
  position: relative;
  padding: 10px 10px;
  background: none;
  line-height: 1em;
  text-align: center;
}

.mapswitchTab > *:not(:last-child) {
  border: none;
}

.mapswitchTab > *:not(:last-child):before {
  -webkit-transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 60%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  content: "";
}

.mapswitchTab > *.act {
  font-weight: 600;
}

.mapswitchTab > *.act:after {
  -webkit-transform: translate(-50%, -50%);
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 120%;
  transform: translate(-50%, -50%);
  border: 2px solid #3569C0;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  content: "";
}

.mapswitchTab .text {
  z-index: 2;
  position: relative;
}

.mapswitchTab .week {
  display: block;
  z-index: 1;
  position: relative;
  line-height: 1em;
}

.mapswitchContent__item > *:not(:last-child) {
  margin-bottom: 10px;
}

.mapswitchContent__comment {
  padding-top: 15px;
}

.mapswitchContent__comment > *:not(:last-child) {
  margin-bottom: 10px;
}