@charset "utf-8";

  /* --- ここからがタイムゾーン機能のCSS --- */
  /* 日本時間を囲む要素のスタイル */
  .jst-time {
    border-bottom: 1px dashed #666; /* ヒントがあることを示す破線 */
    cursor: help;                   /* カーソルを「？」マークに */
    position: relative;             /* ツールチップの基準位置 */
    display: inline-block;
    color: #004445;
    font-weight: bold;
    transition: background-color 0.2s;
  }
  
  .jst-time:hover {
    background-color: #eef;
  }
  /* ツールチップ本体（黒い吹き出し） */
  .jst-time::after {
    content: attr(data-local);      /* JSでセットされたテキストを表示 */
    position: absolute;
    bottom: 140%;                   /* 文字の少し上に表示 */
    left: 50%;
    transform: translateX(-50%);    /* 中央揃え */
    
    background-color: #2c7873;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    white-space: nowrap;            /* 改行させない */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    /* アニメーション用設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, bottom 0.2s;
    pointer-events: none;           /* ツールチップ自体はクリック不可にする */
    z-index: 100;
  }
  /* ツールチップの「▼」矢印部分 */
  .jst-time::before {
    content: "";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;         /* 黒い三角を作る */
    /* アニメーション用設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, bottom 0.2s;
    pointer-events: none;
  }
  /* ホバー時の表示状態 */
  .jst-time:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 125%; /* ふわっと浮き上がる演出 */
  }
  .jst-time:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: 105%; /* 矢印も追従 */
  }