/* ===== 商業施設・イベントの hero（採用した案 2-A1「描く枠」・plans/plan_mhero.py・js/plan-mhero.js）: plan-mall.css の hero の上に重ねる =====
   写真・文言・字の位置は plan-mall.css の hero と同じ。1 行目は検知、2 行目は配信の拍で出る（JS がある時だけ隠す。一度出たら消さない）。
   比べた案 1〜5 の見た目は 2026-10-15 に消した */
html:not(.no-js) .p-hero .p-l1:not(.is-on), html:not(.no-js) .p-hero .p-l2:not(.is-on) { opacity: 0; }
html:not(.no-js) .p-hero .p-beat:not(.is-on) { opacity: 0; translate: 0 8px; }
.p-hero .p-beat { transition: opacity 520ms var(--e-out), translate 520ms var(--e-out); }
.p-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* 札（枠の左上に付く。TOP の数字の札と同じ 12px・白地に Violet） */
.p-tag { position: absolute; z-index: 2; left: var(--tx, 35.4%); top: var(--ty, 32.7%); translate: 0 calc(-100% - 10px); display: inline-flex; align-items: center; gap: 8px; padding: 0;
  font: 500 12px/1 var(--a-sans); letter-spacing: .24em; color: rgb(255 255 255 / .9); white-space: pre; text-shadow: 0 0 8px rgb(0 0 0 / .55); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity var(--d-s) var(--e-out); pointer-events: none; }   /* 字だけ（地と角丸なし・しのさん 2026-10-09）。明るい写真の上でも読めるよう、ごく薄い影 */
.p-tag::before { content: ""; width: 4px; height: 4px; background: var(--a-violet-lt); flex: none; }   /* 先頭に Violet の升（TOP の eyebrow の点と同じ語彙） */
.p-tag.is-on { opacity: 1; }
.p-tag.is-in { translate: 12px calc(78px + 12px); }   /* 枠の内側・ヘッダー（78px）の下 */
.p-sign { --x0: 35.4%; --x1: 74.3%; --y0: 32.7%; --y1: 74%; z-index: 1; }
.p-sign i { border-color: rgb(255 255 255 / .6); }   /* 画面の枠の括弧も 60% */   /* 案A の .m-brk--sign は写真が読めたら角を出す（plan-mall.js）。5 案は拍で出すので別の名前 */

/* 案 2: 人の枠と点・右上の数 */
.p-boxes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p-box { position: absolute; }
.p-box i { position: absolute; width: 10px; height: 10px; border: 0 solid rgb(255 255 255 / .92); transition: all 420ms var(--e-io); }
.p-box i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; } .p-box i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.p-box i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .p-box i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.p-box b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: rgb(255 255 255 / .9); opacity: 0; transition: opacity 360ms var(--e-out), background-color 480ms var(--e-out); }
.p-box.is-dot i { opacity: 0; } .p-box.is-dot b { opacity: 1; }
.p-box.is-got b { background: var(--a-violet-lt); }
.p-count { position: absolute; z-index: 2; right: var(--a-gutter); top: calc(78px + 16 * var(--u)); margin: 0; display: flex; align-items: baseline; gap: 10px; color: rgb(255 255 255 / .9); font: 400 12px/1 var(--a-jp); letter-spacing: .08em; opacity: 0; transition: opacity var(--d-s) var(--e-out); }
.p-count b { font: 500 28px/1 var(--a-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.p-count.is-on { opacity: 1; }

/* 案 2-A1〜A3: 四角の枠で読む → すぐカーソル（TOP のカーソルの括弧）→ 点。拍は js（輪郭 460ms → 括弧 300ms → 点）
   A1 描く: 輪郭の線が左上から一周して描かれる ／ A2 絞る: 大きな輪郭が人の大きさまで絞り込む ／ A3 升の網: 写真の升と同じ格子が上から下へ現れ、輪郭が残る */
.p-scan { position: absolute; pointer-events: none; transition: opacity 360ms var(--e-out); }
.p-scan__o { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity 160ms var(--e-in); }
.p-scan__o rect { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.p-scan__m { position: absolute; inset: 0; opacity: 0; transition: opacity 160ms var(--e-in); }
.p-scan i { position: absolute; width: 10px; height: 10px; border: 0 solid rgb(255 255 255 / .6); opacity: 0; transition: opacity 120ms var(--e-out), inset 300ms var(--e-out); }
.p-scan i:nth-of-type(1) { left: 0; top: 0; border-width: 1px 0 0 1px; } .p-scan i:nth-of-type(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.p-scan i:nth-of-type(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .p-scan i:nth-of-type(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.p-scan b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: rgb(255 255 255 / .6); opacity: 0; transition: opacity 240ms var(--e-out), background-color 480ms var(--e-out); }
.p-scan.is-scan .p-scan__o { opacity: 1; transition: none; }
.p-scan--draw .p-scan__o rect { stroke-dashoffset: 100; }
.p-scan--draw.is-scan .p-scan__o rect { stroke-dashoffset: 0; transition: stroke-dashoffset 440ms cubic-bezier(.45,0,.25,1); }
.p-scan--shrink .p-scan__o { transform: scale(1.9); }
.p-scan--shrink.is-scan .p-scan__o { transform: none; transition: transform 440ms var(--e-out), opacity 120ms var(--e-out); }
.p-scan--mesh .p-scan__m { background-image: linear-gradient(to right, rgb(255 255 255 / .42) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / .42) 1px, transparent 1px);
  background-size: var(--c, 48px) var(--c, 48px); background-position: var(--bx, 0) var(--by, 0); clip-path: inset(0 0 100% 0); }
.p-scan--mesh.is-scan .p-scan__m { opacity: 1; clip-path: inset(0); transition: clip-path 440ms var(--e-out), opacity 120ms var(--e-out); }
.p-scan.is-cur .p-scan__o, .p-scan.is-cur .p-scan__m { opacity: 0; transition: opacity 200ms var(--e-in); }
.p-scan.is-cur i { opacity: 1; }
.p-scan.is-dot i { opacity: 0; }
.p-scan.is-dot b { opacity: 1; }
.p-scan.is-got b { background: rgb(201 181 222 / .6); }   /* 線・括弧・点は不透明度 60%（しのさん 2026-10-09「70% → まだ濃くて字とくっついて見える。60% に」） */
.p-scan.is-under i, .p-scan.is-under .p-scan__o, .p-scan.is-under .p-scan__m { display: none; }   /* 字の下の人は点だけ */
.p-scan--sign.is-cur { opacity: 0 !important; }   /* 画面は輪郭の後、括弧（.p-sign）に引き継ぐ */

/* スマホ（写真は横幅いっぱいの 16:9・高さ約 210px でヘッダーが上に重なる）: 札・枠を減らし、数と場所の名前だけ下に */
@media (max-width: 767px) {
  .p-tag { display: none; }
  .p-count { top: auto; bottom: 10px; right: 12px; } .p-count b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html .p-hero .p-l1, html .p-hero .p-l2, html .p-hero .p-beat { opacity: 1 !important; translate: none !important; }
}
.p-box.is-under i { display: none; }   /* 字の下に重なる人は枠を描かず点だけ */