/* DDJ SCROLL HINT — 横スクロールできる表に「横にスライドできます」を初回だけ出す。
   15th（PJ1 台帳 mock/v3）の自作実装を DDJ の意匠に移植したもの。npm 依存なし。

   元をたどると appleple/scroll-hint（MIT）。手のアイコンと、手が左右に滑る
   動き・遅れて出る矢印という見せ方はそこから。15th 版はこの動きを落としていたので、
   本家に合わせて戻してある。
   やめるときはこのフォルダと各 HTML の <link>/<script> を削除。

   HTML は触らない。scroll-hint.js が
     ・表を含む overflow-x:auto のラッパー
     ・[data-ddj-scroll-hint] を付けた要素
   を見つけて、下の要素を自分で差し込む。 */

.ddj-sh-wrap { position: relative; }

/* 左右端の影。スクロールできる向きだけ出る（毎回表示） */
.ddj-sh-wrap::before,
.ddj-sh-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
}
.ddj-sh-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 22, 46, .14), transparent);
}
.ddj-sh-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 22, 46, .14), transparent);
}
.ddj-sh-wrap.is-left-scrollable::before,
.ddj-sh-wrap.is-right-scrollable::after {
  opacity: 1;
  visibility: visible;
}

/* 初回だけ出る手のアイコン */
.ddj-sh-icon-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ddj-sh-icon-wrap[hidden] { display: none; }

.ddj-sh-icon {
  position: absolute;
  top: calc(50% - 44px);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  /* 「横にスライドできます」が 1 行に収まる幅。124px だと「でき／ます」で割れる */
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 26px 18px 12px;   /* 上は矢印のぶん */
  border-radius: 10px;
  /* サイトのネイビーより濃くして、表の上でも沈んで見えるようにする */
  background: rgba(6, 14, 28, .88);
  text-align: center;
  opacity: 0;
  transition: opacity .3s;
}
.ddj-sh-icon-wrap.is-active .ddj-sh-icon { opacity: 1; }

/* 上に出る左右の矢印。手が 2 往復したあと（2.4秒後）に遅れて浮かぶ */
.ddj-sh-icon::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  margin-left: -17px;
  width: 34px;
  height: 12px;
  background: center / contain no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' viewBox='0 0 34 12'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H2M6 2 2 6l4 4'/%3E%3Cpath d='M22 6h10M28 2l4 4-4 4'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity .3s;
  transition-delay: 2.4s;
}
.ddj-sh-icon-wrap.is-active .ddj-sh-icon::after { opacity: 1; }

/* 手のアイコン（インライン SVG / data URI。外部依存を作らない） */
.ddj-sh-icon::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 6px;
  background: center / contain no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='31' viewBox='0 0 25.77 30.52'%3E%3Cpath fill='%23fff' d='M21.33 30.52H7.85A1.55 1.55 0 0 1 6.3 29a12.46 12.46 0 0 0-.63-4.42 25.16 25.16 0 0 0-4.25-5A5 5 0 0 1 0 15.86a3.64 3.64 0 0 1 1.17-2.62 3.63 3.63 0 0 1 5.14.07V3.77a3.77 3.77 0 1 1 7.54 0V8.33a3.35 3.35 0 0 1 1.26 0 3 3 0 0 1 2 1.22 3.5 3.5 0 0 1 2-.06 3.21 3.21 0 0 1 2 1.54 3.74 3.74 0 0 1 3 .47A4.21 4.21 0 0 1 25.74 15c0 .11 0 .27 0 .46a19.26 19.26 0 0 1-.84 7c-.14.38-.36.81-.56 1.22l-.11.22c0 .07-.09.14-.14.21a7.13 7.13 0 0 0-1.17 2.17c-.06.56-.06 2.15-.05 2.71a1.55 1.55 0 0 1-1.54 1.53ZM8.61 28.21h12c0-.71 0-1.71.07-2.23a8.74 8.74 0 0 1 1.59-3.25l.06-.12a10 10 0 0 0 .46-1 16.8 16.8 0 0 0 .7-6.12c0-.23 0-.41 0-.54a2 2 0 0 0-.64-1.52 1.33 1.33 0 0 0-1.55.08 1.13 1.13 0 0 1-1.18.28 1.15 1.15 0 0 1-.78-.94 1.26 1.26 0 0 0-.75-1.11 1 1 0 0 0-1.11.28l-.1.1a1.15 1.15 0 0 1-1.19.29 1.16 1.16 0 0 1-.78-.95c-.09-.68-.21-.77-.7-.87a.82.82 0 0 0-1 .48 1.16 1.16 0 0 1-2.16-.58V3.77a1.46 1.46 0 1 0-2.92 0v7.85l0 4.33a1.17 1.17 0 0 1-.83 1.11 1.15 1.15 0 0 1-1.2-.35l-1-.91c-.47-.42-.73-.66-.84-.77a1.35 1.35 0 0 0-2-.12L2.7 15a1.32 1.32 0 0 0-.39 1A2.57 2.57 0 0 0 3 17.85a27.24 27.24 0 0 1 4.7 5.62 12.63 12.63 0 0 1 .91 4.74Z'/%3E%3C/svg%3E");
}

/* 手が右から左へ滑る。静止画だと「押せる」のか「動かせる」のか伝わらない */
@keyframes ddj-sh-swipe {
  0%   { transform: translateX(34px); opacity: 0; }
  10%  { opacity: 1; }
  50%, 100% { transform: translateX(-34px); opacity: 0; }
}
.ddj-sh-icon-wrap.is-active .ddj-sh-icon::before {
  animation: ddj-sh-swipe 1.2s linear 2;
}

.ddj-sh-text {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  font-weight: 500;
  white-space: nowrap;
}

/* 指で触る画面でだけ意味がある案内なので、細かい操作ができる環境では出さない */
@media (hover: hover) and (pointer: fine) {
  .ddj-sh-icon-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ddj-sh-wrap::before,
  .ddj-sh-wrap::after,
  .ddj-sh-icon { transition: none; }
  /* 動きを止めている人には、手を静止させて矢印をすぐ出す */
  .ddj-sh-icon-wrap.is-active .ddj-sh-icon::before { animation: none; }
  .ddj-sh-icon::after { transition-delay: 0s; }
}