/* ==========================================================================
   デスクトップの左右の柱
   --------------------------------------------------------------------------
   横に広い画面では、真ん中の 520px を除いて左右が丸ごと空く。
   左にサイトマップ（いまどこにいるか）、右に高島TVの番組一覧を置いて、
   その余白を働かせる。

   ここに書いたものは、すべて幅 1180px 以上のときにだけ効く。
   スマホ・タブレットの見た目には一切さわらない。
   ========================================================================== */

.deskMap,
.deskTv { display: none; }

@media (min-width: 1260px) {
  :root {
    --desk-w: 252px;          /* 柱の幅 */
    /* 本文カラムとのすき間。実績の「↑↓」や政策の「‹ ›」が
       カラムのすぐ外に立っているので、そのぶんを空けて隣に置く。 */
    --desk-gap: 88px;
    --now: #f08a24;           /* いまいる場所を示す橙 */
    --now-soft: rgba(240, 138, 36, .14);
  }

  /* 本文カラムは真ん中に固定されている。柱はその外側に、
     上下のバーの内側で立てる。中身が長いときは柱の中だけで送る。 */
  .deskMap,
  .deskTv {
    position: fixed;
    top: calc(var(--header-h) + 14px);
    bottom: 18px;
    width: var(--desk-w);
    display: flex;
    flex-direction: column;
    z-index: 60;
    color: #dbe6f7;
    font-size: 13.5px;
  }

  .deskMap { left: calc(50% - var(--column) / 2 - var(--desk-gap) - var(--desk-w)); }
  .deskTv { right: calc(50% - var(--column) / 2 - var(--desk-gap) - var(--desk-w)); }

  .deskMap__h,
  .deskTv__h {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0 4px 9px;
    border-bottom: 1px solid rgba(226, 196, 119, .28);
    color: var(--gold-400);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .deskTv__h svg { width: 19px; height: 19px; flex: none; }

  .deskMap__nav,
  .deskTv__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 196, 119, .35) transparent;
    margin: 0;
    padding: 0 4px 4px 0;
    list-style: none;
  }

  .deskMap__nav::-webkit-scrollbar,
  .deskTv__list::-webkit-scrollbar { width: 6px; }
  .deskMap__nav::-webkit-scrollbar-thumb,
  .deskTv__list::-webkit-scrollbar-thumb { background: rgba(226, 196, 119, .32); border-radius: 3px; }

  /* --- 左：サイトマップ ------------------------------------------------ */

  .deskMap__group { margin-bottom: 4px; }

  .deskMap__row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
  }

  .deskMap__link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 4px 10px 12px;
    color: #e6eefc;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px 0 0 10px;
  }

  .deskMap__link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
  .deskMap__link:hover { background: rgba(255, 255, 255, .06); }

  .deskMap__toggle {
    flex: none;
    width: 38px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .07);
    color: #b9c8e2;
    cursor: pointer;
    border-radius: 0 10px 10px 0;
  }

  .deskMap__toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
  .deskMap__toggle:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .deskMap__group.is-open .deskMap__toggle svg { transform: rotate(180deg); }

  /* いまいるページ。橙で光らせる */
  .deskMap__group.is-now .deskMap__row {
    background: var(--now-soft);
    border-color: rgba(240, 138, 36, .5);
  }
  .deskMap__group.is-now .deskMap__link { color: #ffd7ab; }
  .deskMap__group.is-now .deskMap__link svg { opacity: 1; color: var(--now); }

  .deskMap__subs {
    margin: 0;
    padding: 0 0 0 13px;
    list-style: none;
    display: none;
  }

  .deskMap__group.is-open .deskMap__subs { display: block; }

  /* 木の枝に見えるよう、左に縦の線を通す */
  .deskMap__subs { border-left: 1px solid rgba(255, 255, 255, .12); margin: 4px 0 8px 18px; }

  a.deskMap__sub {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    color: #b9c8e2;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 8px;
  }

  a.deskMap__sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, .16);
  }

  a.deskMap__sub:hover { background: rgba(255, 255, 255, .07); color: #e6eefc; }

  .deskMap__no {
    flex: none;
    font-size: 13.5px;
    font-weight: 800;
    color: #7e93b4;
    font-variant-numeric: tabular-nums;
  }

  .deskMap__subLabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* いま見ている項目 */
  a.deskMap__sub.is-now {
    background: var(--now-soft);
    color: #ffd7ab;
  }
  a.deskMap__sub.is-now .deskMap__no { color: var(--now); }
  a.deskMap__sub.is-now::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 1px;
    background: var(--now);
  }

  /* --- 右：高島TV の番組一覧 ------------------------------------------- */

  .deskTv__list { counter-reset: none; }

  .deskTv__item + .deskTv__item { margin-top: 3px; }

  .deskTv__hit {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #cfdcf0;
    text-decoration: none;
    border: 1px solid transparent;
  }

  .deskTv__hit:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); }

  .deskTv__no {
    flex: none;
    width: 22px;
    padding-top: 1px;
    font-family: 'DotGothic16', 'Courier New', monospace;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-500);
    font-variant-numeric: tabular-nums;
  }

  .deskTv__tx { min-width: 0; }

  .deskTv__tx b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #e6eefc;
    /* 番組名は長い。2 行で切って、続きは「…」にする */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .deskTv__tx small {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: #8ea3c2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* いま映っている番組 */
  .deskTv__item.is-now .deskTv__hit {
    background: var(--now-soft);
    border-color: rgba(240, 138, 36, .5);
  }
  .deskTv__item.is-now .deskTv__no { color: var(--now); }
  .deskTv__item.is-now .deskTv__tx b { color: #ffd7ab; }

  /* 高島TV のページにいるときだけ「ON AIR」の印を出す */
  .deskTv.is-live .deskTv__item.is-now .deskTv__no::after {
    content: '●';
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: #e0483a;
    animation: deskBlink 1.6s steps(1, end) infinite;
  }

  @keyframes deskBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

  /* 明るい地のページでは、柱の文字も濃くする */
  .deskMap__link,
  .deskTv__tx b { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

  /* 実績の「↑↓キーでも移動できます」は、この幅では右の柱に届いてしまう。
     送る手だてはサイトマップにもあるので、丸いボタンだけ残して文字は畳む。 */
  .reelHelp__text { display: none; }

  /* JavaScript が無いときは、たたまずに全部見せる */
  .no-js .deskMap__subs { display: block; }
  .no-js .deskMap__toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deskMap__toggle svg,
  .deskTv.is-live .deskTv__item.is-now .deskTv__no::after { transition: none; animation: none; }
}