@charset "UTF-8";
/*==========================================================================
基本設定
==========================================================================*/
html, body {
/*  overflow-x: hidden;*/
  position: relative;
}

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

@media screen and (min-width: 700px) {
  html:root {
    background: #f9f9f9;
  }
}

/*--------------------------------------
テキストの設定
--------------------------------------*/
/* 初期設定
- - - - - - - - - - - - - - - - - - - */
/* フォントのバグを削除 */
body {
  -webkit-font-smoothing: antialiased;
}

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

/* 個別の設定
- - - - - - - - - - - - - - - - - - - */
a {
  color: #000;
}
/*
a:hover {
  color: #000;
}

a:visited {
  color: #000;
}
*/
ul li {
  list-style-type: none;
  list-style-position: inside;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*--------------------------------------
表示の設定
--------------------------------------*/
.pt5 {padding-top: 5px !important;}
.pb5 {padding-bottom: 5px !important;}
.plr0 {padding-left: 0 !important; padding-right: 0 !important;}
.plr10 {padding: 0 10px !important;}
.ml5 {margin-left: 5px !important;}
.mr5 {margin-right: 5px !important;}
.puff {margin: 10px;}

/*====================================================================================
タイトル・テキスト類
====================================================================================*/
/*------------------------------------------
タイトル
------------------------------------------*/
.tit-01 {
  font-size: 1rem;
  font-weight: bold;
  padding: 18px 10px;
}

.tit-02 {
  font-size: 1rem;
  font-weight: bold;
  padding: 5px 0;
}

.tit-03 {
  font-weight: bold;
  line-height: 1em;
  padding: 10px;
  margin-bottom: 15px;
}

.tit-03.black {
  color: #fff;
  background: #444;
}

.tit-03.beige {
  color: #000;
  background: #ffffcd;
}

.tit-03.pink {
  color: #000;
  background: #ffd2cc;
}

.tit-03.red {
  color: #fff;
  background: #da0000;
}

.tit-03.orange {
  color: #000;
  background: #ffbe00;
}

.tit-03.yellow {
  color: #000;
  background: #ffff00;
}

/*------------------------------------------
テキスト
------------------------------------------*/
/* 基本的にテキストはこの中に入れる */
.area-txt > *:not(:last-child) {
  margin-bottom: 10px;
}

.area-txt-01 {
  padding: 10px;
}

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

.area-txt-01 figure.col-item img {
  width: 100%;
}

.area-txt-01 .col-item:first-of-type {
  margin-bottom: 05px;
}

.area-txt-01 .col-item:last-of-type {
  margin-bottom: 0;
}

.strong {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.center {
  text-align: center;
}

.small {
  font-size: 0.750em;
}

.high, ul.info-weather.area .temp .high, .holiday, .sun, .sun span {
  color: #ff3333;
}

.low, ul.info-weather.area .temp .low, .sat, .sat span {
  color: #3333ff;
}

.red {
  color: #f00;
}

.notice {
  font-size: 0.75em;
}

/*====================================================================================
イメージ
====================================================================================*/
/*
* img {
  margin-right: 5px;
}
*/

figure img {
  margin-right: 0;
}

/*====================================================================================
フォーム
====================================================================================*/
input[type="text"] {
  width: 100%;
  font-size: 0.750rem;
  padding: 0 5px;
  border: 1px solid #0c419a;
  border-radius: 4px;
}

button {
  color: #fff;
  font-size: 0.750rem;
  font-weight: bold;
  line-height: 1em;
  text-align: center;
  padding: 7px 10px;
  background: #0c419a;
  border-radius: 4px;
}

button img {
  vertical-align: top;
  height: 0.750rem;
}

/*====================================================================================
ボタン
====================================================================================*/
/*------------------------------------------
デザイン
------------------------------------------*/
.more a {
  color: #0c419a;
  padding: 15px;
  display: block;
}

.more a:before {
  content: "…";
}

/* テキスト青、背景白、ボーダー青 */
.btn-01, .btn-06 {
  /* 押せない時 */
}

.btn-01, .btn-06 {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid #0c419a;
  border-radius: 8px;
  text-align: center;
  padding: 10px 0 10px 5px;
  box-shadow: 2px 2px 4px grey;
}

.btn-01 img, .btn-06 img {
  vertical-align: top;
}

.btn-01 a, .btn-06 a {
  display: block;
  color: #0c419a;
  font-size: 20px;
  font-weight: bold;
  line-height: 1em;
}

.btn-01.close, .close.btn-06 {
  border: 1px solid rgba(12, 65, 154, 0.3);
  position: relative;
}

.btn-01.close a, .close.btn-06 a {
  color: rgba(12, 65, 154, 0.3);
}

.btn-01.close:after, .close.btn-06:after {
  content: "";
  display: block;
  width: 100%;
  height: 24px;
  position: absolute;
  top: 0;
}

/* テキスト白、背景緑 */
.btn-02 {
  background: #0c9a0f;
  border-radius: 4px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
}

.btn-02 a {
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  display: block;
  padding: 5px 10px;
}

/* テキスト白、背景青、ボーダー白 */
.btn-03 {
  width: 100%;
  background: #0c419a;
  border: 1px solid #fff;
  border-radius: 8px;
  text-align: center;
  position: relative;
}

.btn-03 > * {
  color: #fff;
  font-weight: bold;
  display: block;
  padding: 5px;
}

/* 再生ボタンのデザイン */
.btn-04 {
  width: 70px;
  text-align: center;
  background: #484848;
  border: 1px solid #fff;
  border-radius: 8px;
}

.btn-04 a {
  color: #fff;
}

.btn-04 > * {
  display: block;
  font-size: 0.750rem;
  font-weight: bold;
  line-height: 1em;
  padding: 5px 10px;
  position: relative;
}

.btn-04 > *:before {
  content: "";
  display: block;
  width: 0px;
  height: 0;
  border: 6px solid transparent;
  border-left: 12px solid #fff;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3px;
}

.btn-04.forward > *:before {
  border: 6px solid transparent;
  border-right: 12px solid #fff;
}

.btn-04.forward > *:after {
  display: none;
}

/* 画面切り替えボタン */
.btn-05 {
  cursor: pointer;
  width: 80px;
  line-height: 1em;
  text-align: center;
  box-sizing: border-box;
  background: #484848;
  border-radius: 2px;
  overflow: hidden;
}

.btn-05 a {
  display: block;
  color: #ababab;
  font-weight: bold;
  padding: 5px 0;
}

.btn-05.act {
  background: #fff;
  position: relative;
}

.btn-05.act:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.btn-05.act a, .btn-05.act > * {
  color: #0c419a;
}
/*
.btn-06 {
  max-width: 100%;
}
*/
.btn-06 .img {
  float: left;
  margin: 5px 0;
}

.btn-06 .txt {
/*  font-size: 1rem;*/
  font-size: 22px;
  display: block;
  line-height: 1.2em;
}

.btn-06 .txt span {
  font-size: 0.75em;
  display: block;
  font-weight: normal;
}

.btn-06 .txt span.sgtk {
  font-size: 0.9em;
  display: unset;
  font-weight: 600;
}

.btn-07, .btn-08, .btn-09, .btn-10 {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid #0c419a;
  border-radius: 8px;
  text-align: center;
  padding: 7px 0;
  color: #0C419A;
  font-weight: bold;
  box-shadow: 2px 2px 4px grey;
  cursor: pointer;
}

.btn-08 {
  color: #fff;
  background: #0C419A;
  box-shadow: none;
}

.btn-09, .btn-10 {
  position: relative;
  border: 1px solid #07c7f2;
  padding: 10px 0;
  background: #cceeff;
}

.btn-09 a {
  color: #0c419a;
}

.btn-09:after, .btn-10:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 8px solid #07c7f2;
  position: absolute;
  margin-top: -19px;
  right: 1px;
}

.btn-10 {
  border: 1px solid #e46767;
}

.btn-10 a {
  color: #0c419a;
}

.btn-10:after {
  border-left: 8px solid #e46767;
}

/* 戻るアロー */
*[class^="btn"].forward > *:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  text-align: center;
  border: 8px solid transparent;
  border-right: 8px solid #fff;
  position: relative;
  left: 50%;
  margin-left: -8px;
}

/* 進むアロー */
*[class^="btn"].next > *:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  text-align: center;
  border: 8px solid transparent;
  border-left: 8px solid #fff;
  position: relative;
  left: 50%;
  margin-right: -8px;
}

/* タブメニュー */
.menu-tab {
  padding-top: 20px;
}

.menu-tab .switch {
  overflow: hidden;
  width: 100%;
  　max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  　margin-bottom: 20px;
}

.menu-tab .switch li {
  float: left;
  width: 32.33%;
  background: #f0f0f0;
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
}

.menu-tab .switch li label {
  font-weight: bold;
  cursor: pointer;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
}

.menu-tab .switch li:not(:last-child) {
  margin-right: 1%;
}

.menu-tab .switch li:last-child {
  width: 33.33%;
}

.menu-tab .switch input[type="radio"] {
  display: none;
}

.menu-tab .switch li.active {
  background: #666666;
}

.menu-tab .switch li.active label {
  color: #fff;
}

.menu-tab div[class^="item-menu"] {
  display: none;
}

.menu-tab *[class^='item-menu'] > *:not(:last-child) {
  margin-bottom: 20px;
}

/*------------------------------------------
グループ
------------------------------------------*/
/* 2コ・横並びボタン */
.btn-list {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.btn-list > * {
  width: 49%;
}

.btn-list > *:first-child {
  float: left;
}

.btn-list > *:last-child {
  float: right;
}

.btn-list02 {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.btn-list02 > * {
  width: 23%;
  float: left;
}

.btn-list02 > *:not(:last-child) {
  margin-right: 2%;
}

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

/* 横並びボタン（地点用） */
.btn-menu {
  overflow: hidden;
}

.btn-menu:not(:last-of-type) {
  margin-bottom: 5px;
}

.btn-menu .btn-01, .btn-menu .btn-06 {
  display: inline-block;
  margin-bottom: 5px;
}

.btn-menu .btn-01 a, .btn-menu .btn-06 a {
  display: inline;
}

.btn-menu.normal .btn-01 a, .btn-menu.normal .btn-06 a {
  font-weight: normal;
}

.box.pb0 .btn-menu {
  margin-top: 5px;
}

/*====================================================================================
リスト
====================================================================================*/
/*------------------------------------------
基本形
------------------------------------------*/
.list-01, .list-02, .list-03, .list-04 {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.list-01 li:not(:last-child), .list-02 li:not(:last-child), .list-03 li:not(:last-child), .list-04 li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.list-01 li, .list-02 li, .list-03 li, .list-04 li {
  overflow: hidden;
}

.list-01 li a, .list-02 li a, .list-03 li a, .list-04 li a {
  display: block;
  overflow: hidden;
  padding: 10px;
}

.list-01 .img, .list-02 .img, .list-03 .img, .list-04 .img {
  float: left;
}

.list-01 .txt, .list-02 .txt, .list-03 .txt, .list-04 .txt {
  padding-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.list-01 .txt span, .list-02 .txt span, .list-03 .txt span, .list-04 .txt span {
  display: block;
}

/*------------------------------------------
画像ありの時（基本サブメニュー用）
------------------------------------------*/
/* オススメ：トピックス */
.list-01 .img {
  width: 30px;
}

.list-01 .img img {
  width: 100%;
}

.list-01 .txt {
  margin-left: 30px;
}

.list-01 .txt .day {
  display: none;
}

.list-01 .strong {
  padding: 5px;
}

/* オススメ：Channel */
.list-02 li a {
  padding: 5px;
}

.list-02 .img {
  width: 50px;
}

.list-02 .img img {
  width: 100%;
}

.list-02 .txt {
  font-weight: bold;
  margin-left: 50px;
}

.list-02 .txt .desc {
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.list-02.col-item .txt {
  font-size: 80%;
}

/* 天気リスト */
ul.info-weather {
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
}

ul.info-weather li {
  display: inline-block;
  text-align: center;
}

ul.info-weather .time {
  font-size: 0.750rem;
  color: #666;
}

ul.info-weather figure img {
  width: 100%;
}

ul.info-weather .temp {
  font-size: 0.875rem;
}

ul.info-weather .high + .low:before, ul.info-weather.area .temp .high + .low:before {
  content: "/";
  color: #333;
}

ul.info-weather li:last-child .time:after {
  content: "時";
}

ul.info-weather li:last-child .temp:after {
  content: "℃";
}

/* 番組表 */
.list-03 {
  max-width: 400px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.list-03 li {
  padding: 10px 5px;
  font-weight: bold;
  position: relative;
}

.list-03 li img {
  position: absolute;
  right: 0;
}

.list-04 .txt {
  font-weight: bold;
  line-height: 1.2em;
  padding: 5px;
}

.list-04 .txt span {
  color: #999;
  display: block;
  font-size: 90%;
  font-weight: normal;
}

.list-04 + .notice {
  margin-top: 15px;
}

/* 横並びリスト */
.list-05 > * {
  display: inline;
  margin-right: 1rem;
  margin-bottom: 5px;
}

/* list-06 */
.list-06 dt {
  color: #4e5c71;
  font-weight: bold;
}

.list-06 dd {
  padding-left: 1em;
}

.list-07 li {
  width: 100%;
  border: 1px solid #ccc;
}

.list-07 li:not(:last-child) {
  border-bottom: 0px;
}

.list-07 li span {
  width: 50%;
  display: inline-block;
  padding: 10px;
}

.list-07 li .sub {
  background: #eee;
  border-right: 1px solid #ccc;
}

.dl-area dd span + span {
  margin-left: 1em;
}

.list-alarm dd {
  margin-bottom: 15px;
}

.list-alarm dd span {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  line-height: 1em;
  padding: 5px 10px;
  border-radius: 2px;
  margin-bottom: 5px;
}

.list-alarm dd span:not(:last-child) {
  margin-right: 5px;
}

.list-alarm dd .yellow {
  background: #ff9501;
}

.list-alarm dd .red {
  background: #e20001;
}

.list-10.btn-01 a {
  text-align: center;
}

.list-10 li {
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #CCCCCC;
}

.list-10 li a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.list-10 .thumb {
  width: 50px;
  height: 50px;
  overflow: hidden;
  float: left;
  margin-right: 10px;
}

.list-10 .thumb img {
  width: 100%;
}

.list-10 .tit {
  font-weight: 600;
}

.list-10 .info {
  color: #999;
}

/*------------------------------------------
エリアリスト（MAPした）
------------------------------------------*/
.area-list, .area-list02 {
  overflow: hidden;
  border-top: 1px solid #ccc;
}

.area-list li, .area-list02 li {
  float: left;
  width: 50%;
  text-align: left;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}

.area-list li a, .area-list02 li a {
  display: block;
  padding: 7px 5px;
}

.area-list .small a, .area-list02 .small a {
  padding: 8px 10px;
}

.area-list li:nth-child(odd), .area-list02 li:nth-child(odd) {
  border-left: none;
}

.area-list li:nth-child(even), .area-list02 li:nth-child(odd) {
  border-right: none;
}

.area-list a, .area-list02 a {
  color: #0c419a;
  font-weight: bold;
}

.area-list02 li {
  width: 100%;
  border-right: 0;
}

.area-list02 img {
  margin-right: 10px;
}

@media screen and (min-width: 700px) {
  .area-list.flex li {
    width: 25%;
    border-collapse: collapse;
    border-bottom: 1px solid #ccc;
  }
  .area-list.flex li:not(:nth-child(4n)) {
    border-right: 1px solid #ccc;
  }
}

#arealist {
  border-top: 1px solid #ccc;
  line-height: 1.6em;
}

.area-list01 {
  width: 100%;
  display: table;
  overflow: hidden;
}

.area-list01 li {
  display: table-cell;
  width: 50%;
  text-align: left;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}

.area-list01 li a {
  display: block;
  padding: 7px 5px;
}

.area-list01 li:nth-child(odd) {
  border-left: none;
}

.area-list01 li:nth-child(even) {
  border-right: none;
}

.area-list01 a {
  color: #0c419a;
  font-weight: bold;
}

.area-list01 li.no-border {
  border: none !important;
}

@media screen and (min-width: 700px) {
  .area-list01.flex li {
    width: 25%;
    border-collapse: collapse;
    border-bottom: 1px solid #ccc;
  }
  .area-list01.flex li:not(:nth-child(4n)) {
    border-right: 1px solid #ccc;
  }
}

/*====================================================================================
コンテンツエリア
====================================================================================*/
/*------------------------------------------
コンテンツボックス
------------------------------------------*/
/* 基本
------------------------------------------*/
article {
  overflow: hidden;
}

/* 白いボックス（大枠） */
.box {
  overflow: hidden;
  background: #fff;
}

#main .box.pb0, #sub .box.pb0, .box.pb0 {
  padding-bottom: 0;
}

/* 2カラム（PCのみ）
------------------------------------------*/
.col-02 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* mainの設定
------------------------------------------*/
/*
#main .box {
  padding-bottom: 30px;
}
*/
#main .item-box:not(:last-child) {
  margin-bottom: 15px;
}

.item-box {
  margin-left: 10px;
  margin-right: 10px;
}

.item-box.bb {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.item-box.bt {
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.item-box.btb {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/*====================================================================================
MAP用
====================================================================================*/
/*------------------------------------------
MAP基本
------------------------------------------*/
.map, .movie {
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

.map .map-box, .movie .map-box {
  position: relative;
}

.map .map-box .info-weather.area, .movie .map-box .info-weather.area {
  position: absolute;
  top: 50%;
  left: 50%;
}

/*------------------------------------------
MAP内パーツ
------------------------------------------*/
ul.info-weather.area li {
  position: absolute;
}

ul.info-weather.area li a {
  display: block;
  width: 38px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #fff;
  border-radius: 4px;
}

ul.info-weather.area figure {
  margin-left: auto;
  margin-right: auto;
}

ul.info-weather.area span {
  display: block;
  font-size: 0.6rem;
  line-height: 110%;
}

ul.info-weather.area .temp span {
  display: inline;
  color: #333;
}

ul.info-weather.area .temp:after {
  display: none;
}

ul.info-weather.area .areapoint {
  color: #000;
}

/* マップ：日付 時刻 */
.map-box .time {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  top: 5px;
  left: 5px;
}

.map-box .time * {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 100%;
  padding: 5px;
}

/*------------------------------------------
MAP下部パーツ
------------------------------------------*/
/* 日付ボタン
------------------------------------------*/
.btn-day {
  overflow: hidden;
}

.btn-day li {
  width: 12.5%;
  float: left;
  text-align: center;
  color: #333;
  line-height: 100%;
  background-color: #bccfef;
}

.btn-day li a {
  display: block;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn-day .active {
  color: #fff;
  font-weight: bold;
  background: #333333;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* エリア
------------------------------------------*/
.map-parts {
  padding: 5px 0;
  background: #333;
}

.map-parts > *:not(:last-child) {
  padding-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
  margin-bottom: 5px;
}

/*====================================================================================
天気予報
====================================================================================*/
/* 横並び天気
------------------------------------------*/
.weather-list {
  text-align: center;
}

.weather-list li {
  display: inline-block;
}

.weather-list li * {
  text-align: center;
  line-height: 1em;
}

.weather-list li:not(:last-child) {
  margin-right: -1px;
}

.weather-list li img {
  margin-right: 0;
}

/*------------------------------------------
テーブル
------------------------------------------*/
/* テーブル01
------------------------------------------*/
table.table-weather01 {
  width: 100%;
  border: 1px solid #ccc;
}

table.table-weather01 * {
  text-align: center;
}

table.table-weather01 thead {
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

table.table-weather01 thead td {
  font-weight: bold;
  font-size: 1rem;
}

table.table-weather01 .high, table.table-weather01 ul.info-weather.area .temp .high, ul.info-weather.area .temp table.table-weather01 .high, table.table-weather01 .low, table.table-weather01 ul.info-weather.area .temp .low, ul.info-weather.area .temp table.table-weather01 .low {
  text-align: left;
  font-size: 0.750rem;
  font-weight: bold;
  display: inline-block;
}

table.table-weather01 .high span, table.table-weather01 ul.info-weather.area .temp .high span, ul.info-weather.area .temp table.table-weather01 .high span, table.table-weather01 .low span, table.table-weather01 ul.info-weather.area .temp .low span, ul.info-weather.area .temp table.table-weather01 .low span {
  font-size: 1.375rem;
}

table.table-weather01 .high span:after, table.table-weather01 ul.info-weather.area .temp .high span:after, ul.info-weather.area .temp table.table-weather01 .high span:after, table.table-weather01 .low span:after, table.table-weather01 ul.info-weather.area .temp .low span:after, ul.info-weather.area .temp table.table-weather01 .low span:after {
  content: "℃";
  font-size: 0.750rem;
}

table.table-weather01 .gray {
  background: #f0f0f0;
}

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

table.table-weather01 tr:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

table.table-weather01 th {
  color: #666;
  font-size: 0.875rem;
  padding: 10px;
  background: #e0e0e0;
}

table.table-weather01 td {
  font-size: 0.750rem;
  padding: 10px 0;
}

/* テーブル02
------------------------------------------*/
.table-weather02, .table-weather03 {
  width: 100%;
  border-top: 1px solid #ccc;
}

.table-weather02 tr, .table-weather03 tr {
  border-bottom: 1px solid #ccc;
}

.table-weather02 td, .table-weather03 td {
  padding: 5px 0;
  text-align: center;
  line-height: 1em;
}

/* テーブル03
------------------------------------------*/
.table-weather03 {
  border-top: none;
}

.table-weather03 tr {
  border-bottom: none;
}

.table-weather03 thead {
  vertical-align: top;
}

.table-weather03 thead td {
  color: #7a7a7a;
}

/* テーブル04
------------------------------------------*/
table.info-weather01 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

table.info-weather01 th, table.info-weather01 td {
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1em;
  padding: 10px 5px;
  border: 1px solid #ccc;
}

table.info-weather01 th span, table.info-weather01 td span {
  margin-left: 0.5em;
  font-size: 0.6888rem;
}

table.info-weather01 th {
  background: #eee;
}

/* テーブル05
------------------------------------------*/
table.info-weather02 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

table.info-weather02.week {
  max-width: 350px;
}

table.info-weather02 th, table.info-weather02 td {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.2em;
  padding: 5px 0;
}

table.info-weather02 thead * {
  color: #666;
  vertical-align: top;
}

table.info-weather02 tbody th {
  color: #fff;
  background: #666;
  padding: 5px 0;
}

table.info-weather02 th.sat {
  background: #3888f5;
}

table.info-weather02 th.san {
  background: #f54d38;
}

table.info-weather02 td.low:before, table.info-weather02 ul.info-weather.area .temp td.low:before, ul.info-weather.area .temp table.info-weather02 td.low:before {
  display: none;
}

/* テーブル06
------------------------------------------*/
table.info-weather03 {
  width: 100%;
}

table.info-weather03 th, table.info-weather03 td {
  color: #333;
  font-size: 0.750rem;
  text-align: center;
  line-height: 1.2em;
  padding: 5px;
  border: 1px solid #fff;
}

table.info-weather03 thead th {
  color: #fff;
  font-weight: bold;
  background: #666666;
}

table.info-weather03 tbody tr {
  background: #efefef;
}

table.info-weather03 tbody tr:nth-child(2n) {
  background: #fff;
}

/* テーブル07
------------------------------------------*/
table.info-weather04 {
  width: 100%;
}

table.info-weather04 thead {
  background-color: #0C419A;
  border: 1px solid #0C419A;
}

table.info-weather04 thead * {
  text-align: center;
  color: #fff;
  font-weight: 600;
  padding: 5px 0;
}

table.info-weather04 tbody * {
  color: #022B74;
}

table.info-weather04 tbody th, table.info-weather04 tbody td {
  font-weight: 600;
  border: 1px solid #CCC;
  padding: 5px;
}

table.info-weather04 tbody th {
  text-align: center;
}

table.info-weather04 tbody th {
  background-color: #F0F0F0;
}

/*====================================================================================
パーツ：レスポンシブ
====================================================================================*/
/* ブレイクポイントの設定 */
/* PCのコンテンツエリアの横幅 */
/* 出しわけ */
.sp {
  display: block;
}

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

.pc {
  display: none;
}

@media screen and (min-width: 700px) {
  .pc {
    display: block;
  }
}

/*====================================================================================
PCの設定
====================================================================================*/
#wrap {
  margin-left: auto;
  margin-right: auto;
}

#wrap #main.col1 {
  margin: 0 auto;
}

@media screen and (min-width: 700px) {
  #wrap #main {
    width: 650px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
  }
}

@media screen and (min-width: 700px) {
  /*==================================================================================== タイトル・テキスト ====================================================================================*/
  .area-txt-01 .small {
    font-size: 1rem;
  }
  .area-txt-01 .small a {
    padding: 5px;
  }
  .area-txt-01 .col-item:first-of-type {
    margin-bottom: 0;
  }
  /*==================================================================================== ボタンの設定 ====================================================================================*/
  .btn-01, .btn-06 {
    max-width: 300px;
  }
  .btn-list-03 {
    width: 570px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
  .btn-list-03 > * {
    width: 280px;
    max-width: 280px;
  }
  .btn-list-03 > *:first-child {
    float: left;
  }
  .btn-list-03 > *:last-child {
    float: right;
  }
  /*==================================================================================== リスト ====================================================================================*/
  .list-01 .txt, .list-02 .txt {
    overflow: visible;
    white-space: normal;
  }
  .list-01 .txt {
    margin-left: 100px;
  }
  .list-01 .txt .day {
    display: block;
    color: #666;
    font-size: 0.750rem;
  }
  .list-03 {
    margin-top: 30px;
  }
  ul.info-weather li {
    width: 10%;
  }
  ul.info-weather figure {
    width: 100%;
  }
  .list-alarm dt {
    width: 7em;
    float: left;
    text-align: right;
  }
  .list-alarm dd {
    max-width: 360px;
    padding-left: 8em;
    margin-bottom: 10px;
  }
  .list-06 dt {
    float: left;
  }
  .list-06 dd {
    padding-left: 11em;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .list-07 {
    overflow: hidden;
  }
  .list-07 > * {
    width: 50%;
  }
  .list-07 > *:nth-child(1n) {
    float: left;
  }
  .list-07 > *:nth-child(2n) {
    float: right;
  }
  /*==================================================================================== テーブル ====================================================================================*/
  /*  */
  .table-weather03 {
    width: 450px;
    margin-right: auto;
    margin-left: auto;
  }
  .table-weather03 td {
    font-size: 1.3rem;
  }
  /* テーブル06 */
  table.info-weather03 {
    width: 100%;
    max-width: 400px;
    margin: auto;
  }
  table.info-weather03 th, table.info-weather03 td {
    font-size: 0.875rem;
  }
  /*==================================================================================== MAP ====================================================================================*/
  /*------------------------------------------ MAP内 ------------------------------------------*/
  .alert-big {
    width: 480px;
    height: 250px;
    margin-top: -125px;
    margin-left: -240px;
  }
  .alert-big * {
    font-size: 2rem;
    padding: 74px 0;
  }
  /*------------------------------------------ MAP下部 ------------------------------------------*/
  .area-list02 li {
    width: 50%;
  }
  /*==================================================================================== ヘッダーの設定 ====================================================================================*/
  header {
    border-top: 0px;
  }
  /*==================================================================================== ヘッダーとコンテンツの間の設定 ====================================================================================*/
  /*------------------------------------------ News ------------------------------------------*/
  #news {
    max-width: 1000px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
  }
  #news p {
    text-align: center;
  }
  table.info-weather01 th, table.info-weather01 td {
    width: 25%;
  }
  /*==================================================================================== コンテンツの設定 ====================================================================================*/
  /*------------------------------------------ wrapの設定 ------------------------------------------*/
/*
  #wrap {
    overflow: hidden;
    max-width: 1000px;
    padding: 2px;
    margin-left: auto;
    margin-right: auto;
  }
  #wrap #main {
    width: 64%;
    float: left;
  }
  #wrap #sub {
    width: 35%;
    float: right;
  }
*/
  /*------------------------------------------ 基本設定 ------------------------------------------*/
  article {
    overflow: visible;
  }
  .box {
/*    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);*/
  }
  .item-box.nega {
    margin-left: 0;
    margin-right: 0;
  }
  .inside {
    max-width: 83%;
    margin-left: auto;
    margin-right: auto;
  }
  .area-txt-01.p30 {
    padding: 30px;
  }
  /*------------------------------------------ サブコンテンツ ------------------------------------------*/
  .list-01 .img {
    width: 100px;
  }
}