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

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

#main .block {
  background-color: #fff;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.25);
}

#main > *:not(:last-child) {
  padding-bottom: 20px;
}

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

@media screen and (min-width: 770px) {
  #main > *:not(:last-child) {
    padding-bottom: 30px;
  }
  #main  > .--mb0:not(:last-child) {
    padding-bottom: 0px;
  }
}

#sub {
  padding-bottom: 30px;
  margin-top: 30px;
  background-color: #fff;
}

#sub > *:not(:last-child) {
  margin-bottom: 25px;
}

#sub, .global-search {
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.inner {
  padding: 10px;
}

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

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

.pB10 {
  padding-bottom: 10px;
}

.pB0 {
  padding-bottom: 0px;
}

@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 {
    width: calc(100% - 340px);
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  #sub {
    width: 320px;
    margin-top: 0;
    margin-left: 20px;
  }
}

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

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

/*====================================================================================
ヘッダー
====================================================================================*/
.header__bar {
  padding: 10px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.33);
}

/*------------------------------------------
ロゴ
------------------------------------------*/
.wni-logo {
  width: 180px;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------------
ツール / 履歴
------------------------------------------*/
.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;
  margin-top: 5px;
}

.search-box {
  width: 100%;
  font-size: 0;
}

.search-box > * {
  display: inline-block;
  vertical-align: middle;
}

.form-submit {
  height: 33px;
}

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

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

.form-submit {
  width: 55px;
  color: #3569C0;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #3569C0;
  line-height: 1em;
  padding: 0px 10px;
  background-color: #fff;
  border-radius: 4px;
  margin-left: 5px;
}

/* 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: flex;
    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;
}

.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;
}

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

.list-pan__item:not(:last-child):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 * {
  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;
}

.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 {
  margin-top: 20px;
  text-align: center;
}

.list-news__txt * {
  color: #2E5EB2;
  text-decoration: underline;
  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-menu a, .list-area a {
  color: #3569C0;
  display: block;
  padding: 5px;
}

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

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

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

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

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

.list-pan {
  max-width: 1024px;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

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

.list-pan__item:not(:last-child):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 * {
  font-weight: 600;
}

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

.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%;
}

/*====================================================================================
テキスト
====================================================================================*/
.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;
}

/*====================================================================================
タイトル
====================================================================================*/
.tit-01 {
  font-weight: 600;
  padding: 5px;
  border: 1px solid #0C419A;
  border-left-width: 5px;
  border-right: 0;
}

.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;
}

/*====================================================================================
ボタン
====================================================================================*/
.btn {
  width: 100%;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  background-color: #d1e2ff;
  border-radius: 4px;
}

.btn > * {
  display: block;
  color: #0c419a;
  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: #0c419c;
  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: #0c419c;
  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__thumb .btn {
  width: 2.5em;
  right: 0;
  bottom: 30px;
  position: absolute;
  border-radius: 2px;
}

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

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

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

.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__cont * {
  font-weight: 600;
}

.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;
}

/*====================================================================================
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%;
        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: 450px;
  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: 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;
}

/*====================================================================================
10日天気
====================================================================================*/
.weather-10day {
  max-width: 450px;
  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: 450px;
  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: 450px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
}

.youtube__info {
  padding: 10px;
}

.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;
  border-collapse: collapse;
}

.obs-data__buttons > * {
  display: table-cell;
  width: 25%;
  color: #666666;
  font-weight: 600;
  font-size: 14px;
  line-height: 1em;
  text-align: center;
  padding: 10px 0;
  background: linear-gradient(#EEEEEE, #D8D8D8);
  border: 1px solid #A7A7A7;
}

.obs-data__buttons > *.selected {
  color: #fff;
  background: linear-gradient(#0D4094, #3F70C2);
}

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

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

.obs-data__table {
  width: 100%;
}

.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;
}