/* =====================================================================
   V さんのかくれんぼ — フッターの大きなロゴの「V」の後ろから V さんが覗き、押すと雲の吹き出しの中で 20 秒の動画が流れる。
   動きは vsan-peek.js。手順書は HANDOFF.md。クラス名はすべて vsan- で始める（サイトの a- r- sb- と重ねない）。
   ===================================================================== */

/* 舞台：ロゴの箱を上に 50・左右に 40・下に 30（ロゴの座標 332.92×60）広げた範囲。位置と大きさは JS が入れる。
   V さんは字の後ろに置く（z-index 0。ロゴの svg は recruit.css で z-index 1、走査線のキャンバス .a-foot__cv--all も 1 で svg より後ろの要素）。
   前は字の形のマスクで V さんを切り抜いていたが、字の縁とマスクの縁が両方半透明になって下の白が透け、V の周りに白い線が出た。
   拡大するとマスクが粗く描かれ、線が太く見えた（しのさん 2026-10-23「V の周りに白い線が出るのはなぜ？」）。字の後ろに置けば縁は 1 回だけ描かれる。
   押したあとは .is-front で字と走査線より前（z-index 3）に出る */
.vsan-stage { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vsan-stage.is-front { z-index: 3; overflow: visible; }
/* 隠れている間は描かない。キーボードで選んだ時だけ枠を見せるために残す（visibility: hidden だと Tab で選べなくなる） */
.vsan-stage.is-hid .vsan:not(:focus-visible) { opacity: 0; }
.vsan { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.vsan:focus-visible { outline: 2px solid #512376; outline-offset: 3px; }
/* 指の端末では、押せる範囲を V さんの真ん中から 44px 四方まで広げる（見た目は変えない。スマホの V さんは約 30px で押しにくかった・2026-10-24 QA）。
   字の上は前に重なるロゴの svg が受けるので、広がるのは字の無い所だけ。隠れている間は .vsan ごと反応しない（vsan-peek.js の apply） */
@media (hover: none), (pointer: coarse) {
  .vsan::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
.vsan__body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.vsan__body img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.vsan__eyes { position: absolute; inset: 0; transform-origin: 50% 57%; }
.vsan__pupil { position: absolute; border-radius: 50%; background: #1A191E; }

/* 吹き出し：丸（モコモコ）と角丸の四角を重ねた雲。先に紫で太く描き、上から白で塗る＝外側の輪郭だけが残る。
   動画は雲の外形で切り抜き（#vsan-clip）、余白なしで雲いっぱいに出す。
   画面のいちばん手前の層（showModal）は使わない：採用ページの独自カーソル（#cur, z-index 1000）が隠れるため。z-index 950 で出す */
.vsan-bub { position: fixed; inset: auto; z-index: 950; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; color: #222; }
.vsan-bub__cloud { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(60, 25, 95, .18)); }
.vsan-bub__cloud .s * { fill: #512376; stroke: #512376; stroke-width: 5; }
.vsan-bub__cloud .f * { fill: #FFFFFF; }
.vsan-bub video { position: absolute; display: block; max-width: none; object-fit: cover; background: #FFFFFF; opacity: 0; clip-path: url(#vsan-clip); }
:where(html:not(.has-cur)) .vsan-bub video { cursor: pointer; }
/* 閉じる：紫の × だけ（しのさん 2026-10-23「close ボタンのデザインが複雑なので、紫のバツだけにして」）。押せる範囲は 36px のまま */
.vsan-bub__x { position: absolute; width: 36px; height: 36px; border: 0; padding: 0; background: none; color: #512376; cursor: pointer; opacity: 0; display: grid; place-items: center; }
.vsan-bub__x svg { display: block; width: 20px; height: 20px; overflow: visible; }
.vsan-bub__x:focus-visible { outline: 2px solid #512376; outline-offset: 3px; }