.s-table-scroll {
  --table-scroll-min-width: 120rem;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
  overflow-x: visible;
}
.s-table-scroll > table th,
.s-table-scroll > table td {
  line-height: 1.45;
  border-inline-end: 1px solid #e3d9d9 !important;
}
.s-table-scroll__hint {
  display: none;
  position: absolute;
  top: 50%;
  right: .5rem;
  z-index: 6;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 68%, transparent);
  color: var(--color-white, #fff);
  font-size: 1.35rem;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .s-table-scroll {
    --table-scroll-gutter: var(--container-padding, 1rem);
    width: calc(100% - (var(--table-scroll-gutter) * 2));
    margin-inline: var(--table-scroll-gutter);
    padding-inline: 0;
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .s-table-scroll > table {
    /* 6列前後の比較表を読みやすく保ち、親要素に横スクロールを発生させる */
    min-width: var(--table-scroll-min-width);
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }
  .s-table-scroll > table tr > :first-child {
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    white-space: normal;
  }
  .s-table-scroll > table thead th {
    max-width: 25vw;
    height: 3.4rem;
    padding-block: .55rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .s-table-scroll.is-scrollable:not(.is-interacted) .s-table-scroll__hint { display: flex; }
  .s-table-scroll.is-scrollable:not(.is-interacted) .s-table-scroll__hint > span { animation: s-table-scroll-nudge 1.2s ease-in-out infinite alternate; font-weight: 700; }
  .s-table-scroll { padding-bottom: var(--space-xs); background: linear-gradient(90deg, transparent 0 92%, color-mix(in srgb, var(--color-primary) 18%, transparent) 100%); }
}

/* 横幅variant：ブロックのラッパーclassで選択 */
/* 価格表ブロックの「スマートフォンでの表示 → 横スクロール」で選ぶ段階。
   料金表は2〜8列と幅が広く、比較表向けの120remでは列が少ない表が間延びする。
   自由入力にしないのはインラインstyleを避けるため（CSS規約）。 */
.s-table-scroll--w-48 { --table-scroll-min-width: 48rem; }
.s-table-scroll--w-56 { --table-scroll-min-width: 56rem; }
.s-table-scroll--w-64 { --table-scroll-min-width: 64rem; }
.s-table-scroll--w-72 { --table-scroll-min-width: 72rem; }
.s-table-scroll--w-90 { --table-scroll-min-width: 90rem; }
.s-table-scroll--w-120 { --table-scroll-min-width: 120rem; }

.s-table-scroll--compact { --table-scroll-min-width: 72rem; }
.s-table-scroll--schedule { --table-scroll-min-width: 90rem; }
.s-table-scroll--wide { --table-scroll-min-width: 120rem; }

/* 固定位置variant（既定は1行目・1列目） */
.s-table-scroll--sticky-row-2 > table thead th { position: static; }
.s-table-scroll--sticky-row-2 > table tr:nth-child(2) > * {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--color-white);
}
.s-table-scroll--sticky-col-2 > table tr > :first-child { position: static; }
.s-table-scroll--sticky-col-2 > table tr > :nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--color-white);
}
@keyframes s-table-scroll-nudge {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

/* 横スクロール中も見出し行・項目列を固定 */
.s-table-scroll > table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: inherit;
}
.s-table-scroll > table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-white) !important;
  background-clip: padding-box;
  overflow: hidden !important;
  clip-path: inset(0);
  box-shadow: 4px 0 0 var(--color-white);
}
.s-table-scroll > table thead tr > :first-child { z-index: 6; background: var(--color-table-header-light, #c0c0c0) !important; }
.s-table-scroll > table { isolation: isolate; }