/* ============================================================
   ページ右側に重ねて表示する、透明のスクロールバー
   (黒い半透明のレール + 白い半透明のつまみ)
   ※ マウスなどで操作するPC向けです。スマホは、標準の表示のままです。
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  /* 標準のスクロールバーを隠して、代わりに下の自作バーを重ねて表示する */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }

  .rj-scroll {
    position: fixed;
    top: 0;               /* 実際の位置は scrollbar.js がヘッダーの下に合わせます */
    right: 0;
    bottom: 0;
    width: 14px;
    z-index: 90;          /* ヘッダー(100)より下、ページ本文より上 */
    background: rgba(0, 0, 0, .42);
    border-left: 1px solid rgba(255, 255, 255, .12);
    touch-action: none;
    transition: width .15s, background .15s;
  }
  .rj-scroll:hover, .rj-scroll.is-drag { width: 18px; background: rgba(0, 0, 0, .55); }
  .rj-scroll[hidden] { display: none; }

  .rj-scroll-thumb {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    min-height: 44px;
    background: rgba(255, 255, 255, .62);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
    cursor: grab;
    transition: background .15s;
  }
  .rj-scroll:hover .rj-scroll-thumb { background: rgba(255, 255, 255, .8); }
  .rj-scroll.is-drag .rj-scroll-thumb { background: rgba(255, 255, 255, .95); cursor: grabbing; }
}

/* スマホ・タッチ操作の端末では表示しない */
@media not all and (hover: hover) and (pointer: fine) {
  .rj-scroll { display: none; }
}