@charset "utf-8";
/* ------------------------------------------------------------------
   横スクロールする表で、左端の項目名列を固定表示する
     table … class="sticky-table"
     セル  … class="stickycol"（左端の列は stickycol-first を併記）
             2列目以降は style="left: ○○px" で位置を指定
   ------------------------------------------------------------------ */

/* border-collapse:collapse では罫線が「表」のレイヤーに描かれるため、
   固定したセルと一緒に動かず、スクロールすると縦罫線が消えてしまう。
   そのため罫線モデルを separate に切り替え、各セルが自分の罫線を持つようにする。
   二重線にならないよう、罫線は各セルの「右」と「下」だけに持たせ、
   表の左端は固定列の左罫線、上端は表自身の罫線で補う。 */
.page-container table.sticky-table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #BBA;
}
.page-container table.sticky-table th,
.page-container table.sticky-table td {
  border-width: 0 1px 1px 0;
}
.page-container table.sticky-table th.stickycol-first,
.page-container table.sticky-table td.stickycol-first {
  border-left-width: 1px;
}

/* 固定する列 */
.page-container table th.stickycol,
.page-container table td.stickycol {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}
/* 背景が透明だと、下をスクロールする本文が透けるため既定色を明示する */
.page-container table th.stickycol {
  background-color: #FFFAF2;
}
.page-container table td.stickycol {
  background-color: #FFFFFF;
}

/* 固定ブロックの右端に、スクロール中であることが分かる影を出す */
.page-container table th.stickycol-end::after,
.page-container table td.stickycol-end::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  bottom: -1px;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
}