/* カンプ提案キット（scripts/mockup/kit/proposal-index.css）— 先方向けの一覧（index.html）だけで読む。本番には持ち込まない。
   ★sync.mjs が各サイトの mockups/ へ写す。直すなら元を直して写し直す。
   一覧の案の画像（.plan .shot）は、マウスを乗せると自動で下へ流れていた＝速くて目がまわる（2026-10-01 ユーザー指示）
   → 自動では流さず、画像の上でマウスホイールを回すと自分の速さで上下に見られる形にした（proposal-index.js と対）。
   ★マウスのある端末だけ（hover: hover かつ pointer: fine）。スマホ・タブレットは今までどおり（画像の上を指でなぞるとページが動く）。
   ★画像の端まで来たら、そのままページが動く（overscroll-behavior は既定のまま＝ホイールを閉じ込めない）。
   一覧の <style> の後に読む（自動で流す指定 transform を !important で打ち消す）。 */
.shot-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .plan .shot { overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; }
  .plan .shot img, .plan .shot:hover img { transform: none !important; transition: none !important; }
  .shot-wrap { position: relative; }
  .shot-hint {
    display: flex; align-items: center; gap: 7px;
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    padding: 7px 13px 7px 11px; border-radius: 999px;
    background: rgba(20, 22, 30, .78); color: #fff;
    font: 700 12px/1 'Noto Sans JP', sans-serif; letter-spacing: .06em;
    pointer-events: none; opacity: 0; transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .shot-hint svg { width: 12px; height: 16px; flex: none; }
  .shot-wrap:hover .shot-hint { opacity: 1; transform: none; }
  .shot-wrap.is-scrolled .shot-hint { opacity: 0; }
}