/* senba ピクセル要素（2026/10/31 ドラフト）
   素材：10_素材・クリエイティブ/ピクセル画_1.jpg を1ドット単位に起こしたもの（img/pixel/）
   - .px-guide  … トップの「ビルをのぞく」：街並みの絵＋階ごとのホットスポット＋RPG風のメッセージ窓
   - .px-map    … フロア別ページの「いまここ」マップ（建物だけ）
   - .px-river  … フッターの上を流れる川と舟
   - .px-ico    … 1F/2F/3F のドットアイコン */
:root{
  --px-ink:#1F2B45;       /* 絵の夜景の紺 */
  --px-water:#2E4A7A;     /* 川 */
  --px-cream:#F5F3ED;
  --px-sky1:#F5F3ED; --px-sky2:#F3E7D6; --px-sky3:#EFD9BD;
  --px-sel:#F1C75B;       /* 選択中の黄 */
  --px-font:"DotGothic16","Zen Kaku Gothic New",monospace;
}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.px-font{font-family:var(--px-font);letter-spacing:.06em}
.px-ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em;image-rendering:pixelated}

/* 角ばった枠（ドットの段々） */
.px-box{position:relative;background:var(--px-ink);color:#fff;
  box-shadow:0 -4px 0 0 var(--px-ink),0 4px 0 0 var(--px-ink),-4px 0 0 0 var(--px-ink),4px 0 0 0 var(--px-ink),
             inset 0 0 0 3px #fff,inset 0 0 0 6px var(--px-ink)}

/* ───── トップ：ビルをのぞく ───── */
.px-guide{background:
  linear-gradient(180deg,var(--px-sky1) 0 30%,var(--px-sky2) 30% 52%,var(--px-sky3) 52% 100%);
  padding:clamp(56px,7vw,88px) 0 0;overflow:hidden}
.px-guide .head{margin-bottom:clamp(8px,2vw,24px)}
.px-guide .head .lead{max-width:40em}
.px-viewport{position:relative;overflow:hidden}
.px-stage{position:relative;width:max(100%,640px);max-width:1680px;aspect-ratio:240/98;
  margin-left:clamp(calc(100% - max(100%,640px)),calc((100% - max(100%,640px))/2),0px)}
@media(min-width:1680px){.px-stage{margin:0 auto}}
.px-stage>.scene{position:absolute;inset:0;width:100%;height:100%}
/* 舟：左の川をゆっくり行き来する */
.px-stage .boat{position:absolute;width:calc(23/240*100%);top:calc(81/98*100%);left:2%;animation:px-boat 46s ease-in-out infinite alternate}
@keyframes px-boat{0%{left:2%}100%{left:47%}}
.px-stage .boat img{width:100%;animation:px-bob 2.4s steps(2) infinite}
@keyframes px-bob{50%{transform:translateY(calc(100%/9))}}
/* 階のホットスポット（建物：横56〜148、縦 3F 0〜22／2F 22〜43／1F 43〜68） */
.px-hot{position:absolute;left:calc(56/240*100%);width:calc(92/240*100%);display:block;outline:none}
.px-hot.f3{top:0;height:calc(22/98*100%)}
.px-hot.f2{top:calc(22/98*100%);height:calc(21/98*100%)}
.px-hot.f1{top:calc(43/98*100%);height:calc(25/98*100%)}
.px-hot::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s steps(2);
  background:repeating-linear-gradient(90deg,var(--px-sel) 0 8px,transparent 8px 16px) top/100% 4px no-repeat,
             repeating-linear-gradient(90deg,var(--px-sel) 0 8px,transparent 8px 16px) bottom/100% 4px no-repeat,
             repeating-linear-gradient(0deg,var(--px-sel) 0 8px,transparent 8px 16px) left/4px 100% no-repeat,
             repeating-linear-gradient(0deg,var(--px-sel) 0 8px,transparent 8px 16px) right/4px 100% no-repeat,
             rgba(241,199,91,.18)}
.px-hot:hover::after,.px-hot:focus-visible::after,.px-hot.on::after{opacity:1}
.px-hot .tag{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--px-font);font-size:clamp(.72rem,1.1vw,.95rem);background:var(--px-ink);color:#fff;padding:.15em .6em;
  box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px #fff}
.px-hot .tag::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--px-ink);border-left-width:7px}
.px-hot:hover .tag,.px-hot:focus-visible .tag,.px-hot.on .tag{background:var(--px-sel);color:var(--px-ink);box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-ink)}
/* 吹き出し（案内のおじさん） */
.px-say{position:absolute;left:calc(176/240*100%);bottom:calc(53/98*100%);max-width:22%;
  font-family:var(--px-font);font-size:clamp(.72rem,1.05vw,.92rem);line-height:1.6;background:#fff;color:var(--px-ink);padding:.6em .9em;
  box-shadow:0 0 0 3px var(--px-ink),6px 6px 0 0 rgba(31,43,69,.25)}
.px-say::after{content:"";position:absolute;left:10px;top:100%;width:12px;height:12px;background:
  linear-gradient(var(--px-ink),var(--px-ink)) 0 0/12px 3px no-repeat,
  linear-gradient(var(--px-ink),var(--px-ink)) 0 0/3px 12px no-repeat,
  linear-gradient(#fff,#fff) 3px 0/9px 3px no-repeat}
/* メッセージ窓＋コマンド（RPG風） */
.px-window{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,3vw,40px);padding:22px 28px;margin:0 auto;max-width:980px;font-family:var(--px-font);font-size:1rem;line-height:1.85}
.px-dock{background:var(--px-water);padding:0}
.px-guide{padding-top:clamp(24px,4vw,48px)}
.floor .row .mini img{width:96px;height:auto;display:block;image-rendering:pixelated;position:relative;z-index:1}
@media(max-width:520px){.floor .row .mini img{width:84px}}
.px-dock .wrap{transform:translateY(-14px)}
.px-msg{min-height:5.6em;position:relative}
.px-msg .who{display:inline-block;color:var(--px-sel);margin-bottom:.2em}
.px-msg .cur{display:inline-block;margin-left:.3em;animation:px-blink 1s steps(2) infinite;color:var(--px-sel)}
@keyframes px-blink{50%{opacity:0}}
.px-cmd{list-style:none;display:grid;gap:4px;align-content:center}
.px-cmd a{display:flex;align-items:center;gap:.55em;padding:.2em .4em .2em 1.4em;position:relative;color:#fff}
.px-cmd a::before{content:"▶";position:absolute;left:0;font-size:.8em;color:var(--px-sel);opacity:0}
.px-cmd a:hover::before,.px-cmd a:focus-visible::before,.px-cmd a.on::before{opacity:1;animation:px-blink 1s steps(2) infinite}
.px-cmd a:hover,.px-cmd a:focus-visible,.px-cmd a.on{color:var(--px-sel);outline:none}
.px-cmd small{opacity:.7;font-size:.78em;margin-left:auto;white-space:nowrap}

/* ───── フロア別ページ：いまここマップ ───── */
.px-map-wrap{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:24px}
.px-map{position:relative;width:100%;aspect-ratio:97/68}
.px-map>img{position:absolute;inset:0;width:100%;height:100%}
.px-map .px-hot{left:calc(2/97*100%);width:calc(92/97*100%)}
.px-map .px-hot.f3{top:0;height:calc(22/68*100%)}
.px-map .px-hot.f2{top:calc(22/68*100%);height:calc(21/68*100%)}
.px-map .px-hot.f1{top:calc(43/68*100%);height:calc(25/68*100%)}
.px-map .px-hot .tag{right:6px;font-size:.78rem}
.px-map .px-hot .tag::after{display:none}
.px-map .px-hot:not(.here):not(:hover):not(:focus-visible) .tag .nm{display:none}
.px-map .px-hot.here::after{opacity:1;animation:px-blink 1.2s steps(2) infinite}
.px-map .px-hot.here .tag{background:var(--px-sel);color:var(--px-ink);box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-ink)}
.px-map .px-hot.here .tag::before{content:"いまここ ";}
.px-map-wrap .others{margin-top:0}

/* ───── フッターの川 ───── */
.px-river{position:relative;height:64px;background:url(../img/pixel/river_tile.png) 0 0/auto 64px repeat-x;image-rendering:pixelated;overflow:hidden}
.px-river .boat{position:absolute;top:28px;height:36px;left:-100px;animation:px-cross 70s linear infinite}
.px-river .boat img{height:100%;width:auto;animation:px-bob 2.4s steps(2) infinite}
@keyframes px-cross{to{left:calc(100% + 100px)}}

/* ドット文字のバッジ */
.px-pill{font-family:var(--px-font)!important;letter-spacing:.08em!important}

@media(max-width:760px){
  .px-say{display:none}
  .px-hot .tag{font-size:.66rem;right:auto;left:4px}
  .px-hot .tag::after{display:none}
  .px-window{grid-template-columns:1fr;padding:18px 20px;font-size:.92rem}
  .px-dock .wrap{transform:translateY(-8px)}
  .px-map-wrap{grid-template-columns:1fr}
  .px-map{max-width:320px}
  .px-map .px-hot .tag .nm{display:none}
  .px-river{height:48px;background-size:auto 48px}
  .px-river .boat{top:21px;height:27px}
}
@media(max-width:520px){
  .floors .px-ico{display:none}
}
@media(prefers-reduced-motion:reduce){
  .px-stage .boat,.px-stage .boat img,.px-river .boat,.px-river .boat img,.px-msg .cur,.px-cmd a::before,.px-map .px-hot.here::after{animation:none}
  .px-river .boat{left:20%}
}