/* ============================================================
   BlockHotspot（画像ホットスポット）公開側スタイル（常時読込・自己完結）
   1枚の画像に説明ピンを x%/y% で絶対配置し、ホバー/フォーカス/タップで吹き出しを表示する。
   吹き出しの開閉は :hover / :focus-within のCSSだけで完結（JS無効環境でも動作）。
   ピン位置・吹き出しの向き反転(--bkhs-tx/--bkhs-ty)はCSSカスタムプロパティで一元管理し、
   端の座標(x<16 / x>84 / y<20)のときだけ block.ctp 側で修飾クラスを付与して画面外へのはみ出しを防ぐ。
   ============================================================ */
.bkhs-root{ max-width:100%; box-sizing:border-box; }
.bkhs-root *{ box-sizing:border-box; }

.bkhs-hint{ border:2px dashed #c7ced4; border-radius:12px; background:#f7f8fa; padding:18px 16px; text-align:center; color:#5f6b76; font-size:13px; font-weight:700; line-height:1.8; }
.bkhs-editnote{ margin-top:10px; text-align:center; color:#8a5000; font-size:12px; font-weight:700; }

/* 画像枠。ratio=auto は画像本来の比率のまま、それ以外は指定比率にトリミング(object-fit:cover)する */
.bkhs-frame{ position:relative; width:100%; overflow:hidden; border-radius:14px; background:#e9ebee; line-height:0; }
/* 画像の高さ崩れ対策: テーマの `.bk-block-content img{height:auto!important}` と衝突しないよう明示しておく */
.bkhs-frame img{ max-width:100%; height:auto; display:block; width:100%; }

.bkhs-frame.bkhs-ratio-16-9{ aspect-ratio:16/9; }
.bkhs-frame.bkhs-ratio-4-3{ aspect-ratio:4/3; }
.bkhs-frame.bkhs-ratio-1-1{ aspect-ratio:1/1; }
/* 固定比率のときだけ画像をフレームいっぱいに敷き詰める（テーマ側 !important に勝つ必要があるため自分側も !important） */
.bkhs-frame.bkhs-ratio-16-9 .bkhs-img,
.bkhs-frame.bkhs-ratio-4-3 .bkhs-img,
.bkhs-frame.bkhs-ratio-1-1 .bkhs-img{ position:absolute; inset:0; width:100%; height:100%!important; object-fit:cover; }

/* ピン本体 */
.bkhs-point{ position:absolute; transform:translate(-50%,-50%); z-index:2; }
.bkhs-pin{ position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:-7px; padding:0; border:none; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bkhs-dot-only .bkhs-pin{ width:26px; height:26px; margin:-6px; }

.bkhs-pin-dot{ position:relative; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--bkhs-c, var(--tm-brand, #e21d7a)); color:#fff; font-size:11.5px; font-weight:800; line-height:1; letter-spacing:-.02em; box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.92); transition:transform .16s ease, box-shadow .16s ease; }
.bkhs-has-text .bkhs-pin-dot{ width:26px; height:26px; font-size:12px; }
.bkhs-dot-only .bkhs-pin-dot{ width:13px; height:13px; }

.bkhs-pin:hover .bkhs-pin-dot,
.bkhs-pin:focus-visible .bkhs-pin-dot{ transform:scale(1.15); box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.98); }
.bkhs-pin:focus-visible{ outline:none; }
.bkhs-pin:focus-visible .bkhs-pin-dot{ outline:3px solid #fff; outline-offset:1px; }

/* pulse スタイル: 波紋アニメ（reduced-motion 尊重） */
.bkhs-ring{ position:absolute; inset:0; margin:auto; width:13px; height:13px; border-radius:50%; background:var(--bkhs-c, var(--tm-brand, #e21d7a)); opacity:.6; animation:bkhs-pulse 1.9s ease-out infinite; pointer-events:none; }
@keyframes bkhs-pulse{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .bkhs-ring{ animation:none; opacity:.3; }
}

/* 吹き出し（デフォルトはピンの真上中央。端に近い座標では block.ctp が修飾クラスを付与して反転させる） */
.bkhs-tip{
  position:absolute; left:50%; bottom:100%; margin-bottom:10px;
  --bkhs-tx:-50%; --bkhs-ty:-8px; --bkhs-s:.94;
  transform:translate(var(--bkhs-tx), var(--bkhs-ty)) scale(var(--bkhs-s));
  width:max-content; min-width:170px; max-width:260px;
  background:#1f2430; color:#fff; padding:12px 14px; border-radius:10px;
  font-size:13px; line-height:1.65; text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:6;
}
.bkhs-tip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:#1f2430; }
.bkhs-tip-title{ display:block; font-size:13.5px; font-weight:800; margin:0 0 4px; }
.bkhs-tip-body{ margin:0; font-size:12.5px; color:#e4e6ec; word-break:break-word; }

.bkhs-tip-edge-l{ left:0; --bkhs-tx:0; }
.bkhs-tip-edge-l::after{ left:16px; transform:translateX(0); }
.bkhs-tip-edge-r{ left:auto; right:0; --bkhs-tx:0; }
.bkhs-tip-edge-r::after{ left:auto; right:16px; transform:translateX(0); }
.bkhs-tip-below{ bottom:auto; top:100%; margin-bottom:0; margin-top:10px; --bkhs-ty:8px; }
.bkhs-tip-below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#1f2430; }

/* 表示トリガー: ホバー / キーボードフォーカス / タップ(block.js が付与する .bkhs-open) */
.bkhs-point:hover .bkhs-tip,
.bkhs-point:focus-within .bkhs-tip,
.bkhs-point.bkhs-open .bkhs-tip{
  opacity:1; visibility:visible; pointer-events:auto;
  --bkhs-ty:0; --bkhs-s:1;
}

@media (max-width:480px){
  .bkhs-tip{ max-width:200px; min-width:140px; font-size:12.5px; padding:10px 12px; }
  .bkhs-tip-title{ font-size:13px; }
  .bkhs-tip-body{ font-size:12px; }
}