@charset "UTF-8";

/*
 * 製品表の横スクロール補助（2026-09-05 新設／2026-10-01 デザイン案 2a に作り替え・njc-table-scroll.js とセット）
 * 仕様の正本＝docs/from-claude-design/製品ページテーブルの矢印ボタン_20261001/README.md
 * .table01 を .njc-hscroll で包み、左右の端に「白のフェード＋緑の輪郭の丸い矢印」を重ねる。
 * 矢印の丸は押せるボタン＝表を横へ送る。フェードの部分はクリックを受けない（pointer-events:none）＝表内のリンクはそのまま押せる。
 * 出し分け（opacity）・フェードの高さ・矢印の縦位置（top）は JS が入れる。
 */
.njc-hscroll {
    position: relative;
}

/* 端のフェード：幅 44px・白 55% → 透明。高さは JS が表（table）の高さに合わせる */
.njc-hscroll__edge {
    position: absolute;
    top: 0;
    width: 44px;
    height: 0;
    z-index: 1; /* 表の固定列（sticky）より上、ページTOPボタン等の固定UIより下 */
    pointer-events: none;
    opacity: 0; /* JS が出すまで隠す（読込直後のちらつき防止） */
    transition: opacity .3s;
}
.njc-hscroll__edge--right {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 70%);
}
.njc-hscroll__edge--left {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 70%);
}

/* 矢印の位置合わせ用の箱：top は JS が「表のうち画面に映っている範囲の縦中央」へ動かす */
.njc-hscroll__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: top .15s ease-out;
    line-height: 0;
}
.njc-hscroll__arrow--right { right: 6px; }
.njc-hscroll__arrow--left { left: 6px; }

/* 円：28px・枠 1.5px #078247・極薄の緑・影なし。押せるボタン（表を横へ送る）。
   押せるのは、その側の矢印が出ている間（.is-on）だけ。指で押しやすいよう、当たりの範囲は円の外へ 8px 広げる。 */
.njc-hscroll__circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #078247;
    background: rgba(7, 130, 71, 0.04);
    cursor: pointer;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
}
.njc-hscroll__edge.is-on .njc-hscroll__circle { pointer-events: auto; }
.njc-hscroll__circle:after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.njc-hscroll__circle:hover { background: rgba(7, 130, 71, 0.14); }
.njc-hscroll__circle:focus-visible { outline: 2px solid #078247; outline-offset: 2px; }
.njc-hscroll__circle svg {
    display: block;
    width: 14px;
    height: 14px;
}