.icon {
  width: 100%;
    max-width: 50px;
}
.max-label {
    background-color: #ffcccc;
    color: #d80000;
    font-weight: bold;
    padding: 0px;
    text-align: center;
}
.min-label {
    background-color: #cce5ff;
    color: #0059b3;
    font-weight: bold;
    padding: 0px;
    text-align: center;
}
</style>
<style>

html:root {
    --color-def: #303030;
    --color-sun: #FF3000;
    --color-sat: #0060FF;
    --color-sun--dark: #FF6060;
    --color-sat--dark: #60A0FF;
    --color-link: #3569C0;
    --color-border: #DFE4F0;
    --color-bg--gray01: #f9f9f9;
    --color-bg--gray02: #EEF1F8;
    --color-temp--high: #F64D00;
    --color-temp--low: #0075F3;
    --size-pc: 1070px;
    --shadow-base: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    --radius-base: 8px
}

.wTableTime__tbody::-webkit-scrollbar {
    display: none
}

@media screen and (max-width: 830px) {
    .wTableTime__pc {
        display:none!important
    }
}

@media screen and (min-width: 830px) {
    .wTableTime__sp {
        display:none!important
    }
}

@media screen and (max-width: 830px) {
    .wTableTime__title01 {
        padding-left:10px
    }

    .wTableTime__title02 {
        padding-left: 10px
    }
}


@keyframes slideIn {
    0% {
        transform: translateY(100px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
        opacity: 1
    }

    100% {
        transform: translateY(100px);
        opacity: 0;
        display: none
    }
}

.wTableTime {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    /*height: 245px;*/
    border: 1px solid #DFE4F0;
    border-radius: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #f9f9f9
}

.wTableTime * {
  margin: 0;
  padding: 0;
}

.weather-table th {
  font-size: 1em;
  position: sticky;
  top: 0;           /* 上から0pxの位置で固定 */
  z-index: 1;       /* スクロール時に他のセルより前面に出す */
  background-color: #50598d;
}
.weather-table td {
  padding: 0;
}
.weather-table td>p {
  margin-bottom: 0;
  font-weight: bold;
}
.weather-table th, .weather-table td {
    border: 1px solid #ccc;
    /*padding: 10px;*/
    text-align: center;
    font-weight: 700;
}

@media screen and (min-width: 830px) {
    .wTableTime {
        margin-bottom:40px
    }
}

.wTableTime:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,.1)));
    background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.1));
    content: ""
}

.wTableTime__tbody,.wTableTime__thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.wTableTime__thead {
    -webkit-box-shadow: 2px 0 6px 0 rgba(0,0,0,.15);
    z-index: 2;
    position: absolute;
    top: 0;
    /*width: 70px;*/
    width: 50px;
    background: #EEF1F8;
    box-shadow: 2px 0 6px 0 rgba(0,0,0,.15)
}

.wTableTime__thead * {
    font-weight: 700;
    margin: 0;
}

.wTableTime__thead .small {
    font-size: 13px
}

.wTableTime__tbody {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    position: relative;
    flex: 1;
    width: 100%;
    /*margin-left: 70px;*/
    margin-left: 50px;
    overflow-x: scroll;
    font-size: 1em;
    white-space: nowrap;
}

.wTableTime__group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    /*background-color: #fff;*/
}

.wTableTime__group:nth-child(even) {
    background-color: #EEF1F8
}

.wTableTime__group .wTableTime__content {
    /*background-color: #f9f9f9*/
    background-color: #ffffff;
    font-weight: 600;
}

.wTableTime__group:not(:first-child) {
    border-left: 1px solid #DFE4F0
}

.wTableTime__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 1;
    border-top: 1px solid #DFE4F0;
}

.wTableTime__tr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    height: 100%
    margin: 0;
    padding: 0;
}

.wTableTime__tr:not(:last-child) {
    border-right: 1px solid #DFE4F0
}

.wTableTime__td {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 48.6px
}

.wTableTime__td:not(:first-child) {
    border-top: 1px solid #DFE4F0
}

.wTableTime__td .small {
    display: block
}

.wTableTime__td>* {
    line-height: 1em;
    text-align: center
}

.wTableTime__td.date * {
    font-weight: 700
}

.wTableTime__td.sat>* {
    color: var(--color-sat)
}

.wTableTime__td.sun>* {
    color: var(--color-sun)
}

.wTableTime__td.date,.wTableTime__td.time {
    height: 24.5px
}

.wTableTime__thead .wTableTime__td.date,.wTableTime__thead .wTableTime__td.time {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.wTableTime__thead .wTableTime__td {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.wTableTime__tbody .wTableTime__td {
    /*width: 67px;*/
    width: 55px;
    word-break: auto-phrase;
    white-space: normal;
}

.wTableTime__tbody .wTableTime__td.date {
    padding-inline:5px;position: sticky;
    left: 0
}

.wTableTime__tbody .wTableTime__td.date>* {
    font-size: 13px
}

.wTableTime__tbody .wTableTime__td.wind {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.wTableTime .wIcon {
    width: 100%;
    max-width: 50px
}

.wTableTime__thead .wTableTime__td.weather_point,
.wTableTime__tbody .wTableTime__td.weather_point{
    /*height: 50.6px*/
    border-top: none;
}

.wTableTime .wdir {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto 3px;
    margin-right: auto;
    margin-left: auto;
    vertical-align: middle
}

.wTableTime .wdir img {
    width: 100%;
    height: 100%
}

.wTableTime__button01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: right
}

.wTableTime__button01.page-link>* {
    background-color: #EEF1F8;
    color: #3569C0
}

.wTableTime__button01.wTableTime__page-jump>* {
    background-color: #3569C0;
    color: #fff
}

.wTableTime__button01.wTableTime__page-jump .wTableTime__arrow img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.wTableTime__button01>* {
    -webkit-box-align: center;
    -ms-flex-align: center;
    gap: 5px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding: 3px 3px 3px 5px;
    border: 2px solid #fff;
    border-radius: 100px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    font-size: 12px;
    font-weight: 700;
    line-height: 1em
}

@media screen and (max-width: 374px) {
    .wTableTime__button01>* {
        font-size:11px
    }
}

.wTableTime__button01 .wTableTime__arrow {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #fff
    color: black;
}


.wTableTime__buttonArea {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: -35px;
    justify-content: space-between;
    width: 100%;
    /*padding-left: 70px*/
}
[class*=wTableTime__buttonArea]:hover {
    cursor: pointer
}



/* =========================================
   モーダル（jQuery UI Dialog）のリデザイン
   ========================================= */

/* 1. モーダル全体（白ベース、フラット、角丸、影） */
.ui-dialog {
  background: #ffffff !important;
  border: none !important; /* 枠線を消す */
  border-radius: 8px !important; /* 角丸 */
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; /* 柔らかい影 */
  padding: 0 !important;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 2. タイトルバー（シンプル、白背景、テキスト左寄せ） */
.ui-dialog .ui-dialog-titlebar {
  background: #ffffff !important;
  color: #333333 !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important; /* 薄い下線 */
  padding: 15px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.ui-dialog .ui-dialog-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  float: left !important;
}

/* 閉じるボタン（×）のデザイン調整 */
.ui-dialog .ui-dialog-titlebar-close {
  border: none !important;
  background: transparent !important;
  right: 15px !important;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  opacity: 1;
}

/* 3. コンテンツエリア（余白の調整） */
.ui-dialog .ui-dialog-content {
  background: #ffffff !important;
  color: #555555 !important;
  padding: 20px 20px 10px 20px !important;
  font-size: 0.95rem;
}

/* 4. 入力エリア（プルダウンとボタン） */
#area-settings-modal .input-group {
  display: flex;
  gap: 10px; /* 要素間の隙間 */
  margin-bottom: 20px;
}

/* プルダウン（select）のデザイン */
#select-areacd {
  flex-grow: 1; /* 横幅いっぱいに広げる */
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.9rem;
  color: #333;
  transition: border-color 0.2s;
}
#select-areacd:focus {
  border-color: #007bff; /* フォーカス時の色 */
  outline: none;
}

/* 追加ボタン（プライマリカラー、フラット） */
#btn-add-area {
  padding: 8px 16px;
  background-color: #007bff; /* 青ベース */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}
#btn-add-area:hover {
  background-color: #0056b3;
}

/* 5. リストエリア（liのデザイン） */
#area-modal-list {
  border-top: 1px solid #f0f0f0;
}

.modal-area-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}
.modal-area-li:hover {
  background-color: #fafafa; /* ホバー時にわずかに色をつける */
}

/* 先頭固定のテキストスタイル */
.modal-area-li .status-fixed {
  color: #ff9800; /* オレンジ系 */
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 5px;
}

/* 削除ボタン（Outlineデザイン、赤系） */
.btn-delete-area {
  padding: 5px 12px;
  background-color: transparent;
  color: #dc3545; /* 赤 */
  border: 1px solid #dc3545;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.btn-delete-area:hover {
  background-color: #dc3545;
  color: #fff;
}
/* 先頭固定で削除できない時のスタイル */
.btn-delete-area:disabled {
  border-color: #eee;
  color: #ccc;
  cursor: not-allowed;
  background-color: transparent;
}

/* =========================================
   6. 後ろのオーバーレイ（背景のモヤ）を黒色に
   ========================================= */
.ui-widget-overlay {
  background: #000000 !important; /* アンバー（落ち着いた黄色） */
  opacity: 0.6 !important;       /* 透明度を調整（0.0〜1.0） */
}
/* =========================================
   閉じるボタン（右上 ×マーク）の完全フラット化
   ========================================= */
/* jQuery UI標準の古い画像アイコンを非表示にする */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

/* CSSで美しい「×」を描画する */
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important; /* 縦のど真ん中に配置 */
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  font-size: 1.8rem;
  color: #999999;
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s;
}

/* ホバー（マウスオーバー）時に少し濃くする */
.ui-dialog .ui-dialog-titlebar-close:hover::before {
  color: #333333;
}


/* =========================================
   モーダル下部のボタンエリア（ボトムバー）
   ========================================= */
.ui-dialog .ui-dialog-buttonpane {
  background: #f9f9f9 !important; /* 少しだけグレーにして区切る */
  border-top: 1px solid #eeeeee !important;
  padding: 10px 20px !important;
  margin: 0 !important;
}

/* 下部の「閉じる」ボタンのデザイン */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  background: #ffffff !important;
  color: #555555 !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  font-size: 0.9rem !important;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
  background: #f0f0f0 !important;
  border-color: #bbbbbb !important;
  color: #333333 !important;
}

/* リスト全体を掴めるカーソルにする */
.modal-area-li {
  /* （他の既存のCSS） */
  cursor: grab; /* 掴むアイコン */
}

/* ドラッグ中は掴んでいるアイコンにする */
.modal-area-li:active {
  cursor: grabbing;
}

/* 先頭固定の要素は掴めないカーソルにする */
.modal-area-li:first-child {
  cursor: default;
}

/* =========================================
   モーダルのレスポンシブ＆スクロール対応
   ========================================= */

/* モーダルの中身が縦に長くなった場合にスクロールさせる */
#area-settings-modal {
  max-height: 60vh !important;   /* スマホ画面の高さの60%を上限にする */
  overflow-y: auto !important;   /* 縦方向にはみ出たらスクロールバーを表示 */
  overflow-x: hidden !important; /* 横スクロールは念のため隠す */
  box-sizing: border-box;
}

/* スマホ画面（横幅480px以下）の時のデザイン微調整 */
@media screen and (max-width: 480px) {
  /* モーダル内の余白を少し狭めて、画面を広く使う */
  .ui-dialog .ui-dialog-content {
    padding: 15px 10px !important;
  }
  
  /* 入力エリアの隙間を少し詰める */
  #area-settings-modal .input-group {
    gap: 5px;
  }

  /* セレクトボックスの文字を少し小さくして見切れを防ぐ */
  #select-areacd {
    font-size: 0.85rem;
    padding: 6px;
  }

  /* 削除ボタンをスマホでタップしやすいサイズに調整 */
  .btn-delete-area {
    padding: 8px 12px;
    font-size: 0.75rem;
  }
}


        #tabs-container {
      position: relative;
      overflow: hidden; /* 全体の幅を制限 */
    }

    #myarea ul {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto; /* 横スクロールを有効化 */
      overflow-y: hidden;
      scrollbar-width: thin; /* スクロールバーの幅を調整（モダンブラウザ） */
    }

    #myarea ul::-webkit-scrollbar {
      height: 8px; /* スクロールバーの高さ */
    }

    #myarea ul::-webkit-scrollbar-thumb {
      background: #888; /* スクロールバーの色 */
      border-radius: 4px;
    }

    #myarea ul li {
      flex: 0 0 auto; /* 各タブの幅を自動調整 */
    }
    
/* ドラッグハンドルのデザイン（三本線） */
.drag-handle {
  display: inline-block;
  width: 28px;
  cursor: grab;
  color: #999;
  font-size: 1.2rem;
  font-weight: bold;
  user-select: none; /* スマホで長押しした時のテキスト選択を無効化 */
}

/* ハンドルを掴んでいる間 */
.drag-handle:active {
  cursor: grabbing;
  color: #333;
}

/* ★ 重要：リスト全体（li）を掴むカーソルにしていた場合は解除する */
.modal-area-li {
  /* cursor: grab; を削除するか、以下で上書き */
  cursor: default; 
}



/* --- 親要素（画像のコンテナ） --- */
.tooltip-wrapper {
  position: relative; /* ふきだしの基準位置にするため必須 */
  /*display: inline-block;*/
  outline: none; /* タップした時の青い枠線を消す */
}

/* --- ふきだし（説明文）本体 --- */
.tooltip-text {
  position: absolute;
  bottom: 120%; /* 画像の少し上に配置 */
  left: 50%;
  transform: translateX(-50%); /* 左右の中央揃え */
  
  /* 見た目の設定（黒背景に白文字） */
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap; /* テキストを改行させない */
  z-index: 10;
  
  /* 最初は見えないようにしておく */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease; /* ふわっと出すアニメーション */
  pointer-events: none; /* ふきだし自体がタップの邪魔をしないようにする */
}

/* --- 下向きの三角形（しっぽ）を作る --- */
.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}


/* =========================================
   PC用（ホバー機能がある端末）
   マウスオーバー時のみ表示。クリックしても固定されません。
========================================= */
@media (hover: hover) {
  .tooltip-wrapper:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================
   スマホ用（ホバー機能がない端末）
   タップ（フォーカス）時のみ表示。
========================================= */
@media (hover: none) {
  .tooltip-wrapper:focus .tooltip-text {
    opacity: 1;
    visibility: visible;
  }
  .tooltip-wrapper {
    cursor: pointer; /* PCでマウスカーソルを指マークにする */
  }
}