/* ============================================
   横スクロールテーブル + scroll-hint 連携（TablePress版）
   .js-scrollable ラッパーに当てて使用
   ============================================ */

/* scroll-hint アイコンをテーブル上部に固定 */
.js-scrollable .scroll-hint-icon {
  top: 150px !important;           /* テーブル上部から40pxの位置 */
  left: calc(50% - 60px) !important; /* 横は元の中央指定をキープ */
}

/* ラッパー：横スクロール領域化 */
.js-scrollable {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
  max-width: 100%;
  margin-block: 1.5rem;
}

/* TablePress本体：余裕を持たせる */
.js-scrollable .tablepress {
  min-width: 720px;        /* この幅を下回らない＝SPで横スクロール発動 */
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}

/* セル余白・基本書式 */
.js-scrollable .tablepress th,
.js-scrollable .tablepress td {
  padding: 0.875rem 1rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

/* ヘッダー行 */
.js-scrollable .tablepress thead th {
  background-color: #f0f9f9;
  font-weight: 600;
  border-bottom: 2px solid var(--teal, #1aa1a3);
}

/* 「内容」列（3列目）は折り返し許可 */
.js-scrollable .tablepress td.column-3 {
  white-space: normal;
  min-width: 280px;
  max-width: 480px;
  line-height: 1.6;
}

/* スクロールバー装飾 */
.js-scrollable::-webkit-scrollbar {
  height: 6px;
}
.js-scrollable::-webkit-scrollbar-thumb {
  background: rgba(26, 161, 163, 0.4);
  border-radius: 3px;
}