@keyframes block-scroll-hint {
  0% {
    --before_clip-path: polygon(
      50% 90%,
      10% 50%,
      30% 50%,
      30% 10%,
      70% 10%,
      70% 50%,
      90% 50%
    );
    --before_inset-block: auto 0;
    --before_place-self: end auto;
  }
  25%,
  75% {
    --before_clip-path: polygon(
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%
    );
  }
  100% {
    --before_clip-path: polygon(
      50% 10%,
      90% 50%,
      70% 50%,
      70% 90%,
      30% 90%,
      30% 50%,
      10% 50%
    );
    --before_inset-block: 0 auto;
    --before_place-self: start auto;
  }
}
@keyframes inline-scroll-hint {
  0% {
    /* ＞ 右向き */
    --after_clip-path: polygon(
      20% 0%,
      80% 50%,
      20% 100%
    );
    --after_inset-inline: auto 0;
    --after_place-self: auto end;
  }
  25%, 75% {
    /* 消えるとき（中央に縮小） */
    --after_clip-path: polygon(
      50% 50%,
      50% 50%,
      50% 50%
    );
  }
  100% {
    /* ＜ 左向き */
    --after_clip-path: polygon(
      80% 0%,
      20% 50%,
      80% 100%
    );
    --after_inset-inline: 0 auto;
    --after_place-self: auto start;
  }
}


@keyframes block-scroll-opacity {
  0%, 100% { opacity: 1; }   /* 表示 */
  25%, 75% { opacity: 0; }   /* 透明にする */
}

@keyframes inline-scroll-opacity {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}




[class*="__table__"] {
  & {
    --before_clip-path: inset(50%);
    --before_inset-block: auto 0;
    --before_place-self: end auto;
    --after_clip-path: inset(50%);
    --after_inset-inline: auto 0;
    --after_place-self: auto end;
    --border-style: solid;
    --border-width: 1px;
    --border-color: color-mix(in srgb, var(--worb), var(--borw) 20%);
    --padding: 0.5rem;
    animation: block-scroll-hint, inline-scroll-hint;
    animation-timeline: scroll(block self), scroll(inline self);
    border: var(--border-style) var(--border-width) var(--border-color);
    border-radius: 2px;
    display: grid;
    grid: auto / 100% auto;
    margin: 0;
    xmax-block-size: 100dvb;
    max-inline-size: 100%;
    overflow: auto;
    resize: both;
  }
  &::before,
  &::after {
    xbackground: currentcolor;
    block-size: 2rem;
    content: "";
    inline-size: 2rem;
    overflow: hidden;
    position: sticky;
    transition: clip-path 0.25s;
    z-index: 1;
    opacity: 60%;
    background-color: rgb(77, 114, 156);

  }
  &::before {
    clip-path: var(--before_clip-path);
    grid-area: 1 / 1 / -1 / 2;
    place-self: var(--before_place-self);
    inset-block: var(--before_inset-block);
    inset-inline: calc(50% - 1rem);
  }
  &::after {
    clip-path: var(--after_clip-path);
    grid-area: 1 / 1 / -1 / -1;
    place-self: var(--after_place-self);
    inset-block: calc(50% - 1rem);
    inset-inline: var(--after_inset-inline);
  }
  &:dir(rtl)::after {
    rotate: y 180deg;
  }
  & > table {
    --table-layout: auto;
    border: hidden;
    border-collapse: collapse;
    grid-area: 1 / 1 / -1 / -1;
    inline-size: 60rem;
    min-inline-size: 100%;
    table-layout: var(--table-layout);
  }
  & > table > caption {
    border-block-end: var(--border-style) var(--border-width)
      var(--border-color);
    padding: var(--padding);
    text-align: inherit;
  }
  & > table > * > tr > * {
    border: var(--border-style) var(--border-width) var(--border-color);
    padding: var(--padding);
    text-align: inherit;
  }
}
.__table__diagonal-line > table > * > tr > :empty { /* 空のテーブルセルに斜線を入れるオプション */
  background-image: linear-gradient(
    to left bottom,
    transparent calc(50% - 0.75px),
    var(--border-color) calc(50% - 0.25px) calc(50% + 0.25px),
    transparent calc(50% + 0.75px)
  );
}