/* ============================================================
   princess2 / アクセス地図＝実測トレース（段1）  2026-09-03
   地図データ © OpenStreetMap contributors（ODbL）
   ホテル座標＝国土地理院 住所検索API（東京都台東区根岸1-2-18）
   生成＝_tools/access_map/{fetch_osm.py,build_svg.py,inject.py}
   戻し方＝各ページの <link ... access-map.css> 1行を外し、
           .access-terrain ブロックを元に差し戻す
   ============================================================ */
[data-access-map]{overflow:hidden;touch-action:pan-y;cursor:grab;background-color:#160c14;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
[data-access-map] *{user-select:none;-webkit-user-select:none}
[data-access-map] ::selection{background:transparent}
[data-access-map] img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
[data-access-map].is-drag{cursor:grabbing}
.am-plane{position:absolute;left:-20%;top:-38%;width:140%;height:176%;
  transform-origin:50% 50%;backface-visibility:hidden;
  transform:perspective(2400px) rotateX(var(--am-pitch,48deg)) rotateZ(var(--am-yaw,0deg))
    scale(var(--am-zoom,1)) translate(var(--am-tx,0%),var(--am-ty,-8%))}
.am-base{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.am-route-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.am-route-glow{fill:none;stroke:#ff6b9a;stroke-width:8;stroke-opacity:.18;stroke-linecap:round;stroke-linejoin:round}
.am-route-line{fill:none;stroke:#ff6b9a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,107,154,.8))}
.am-route-dot circle{fill:#ffe1ea}
.am-route-start{fill:#fff;stroke:#ff6b9a;stroke-width:2.4}
.am-pin-b{fill:#ff6b9a;filter:drop-shadow(0 0 7px rgba(255,107,154,.75))}
.am-pin-d{fill:#fff}
.am-anchor{fill:none;stroke:none}

/* ラベルはSVGのtextでなくHTML層（パースをかけても文字が潰れない） */
.am-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.am-label{position:absolute;left:0;top:0;visibility:hidden;padding:7px 12px 8px;
  border:1px solid rgba(255,255,255,.16);background-color:rgba(24,6,19,.92);white-space:nowrap}
.am-label.is-on{visibility:visible}
.am-label b{display:block;color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.25}
.am-label i{display:block;margin-top:2px;color:#ff6b9a;font-family:Jost,sans-serif;font-size:8px;
  font-style:normal;font-weight:600;letter-spacing:.14em}
.am-credit{position:absolute;left:16px;bottom:14px;z-index:4;margin:0;color:var(--mist);
  font-size:10.5px;letter-spacing:.02em;pointer-events:none}
.am-compass{position:absolute;left:18px;top:18px;z-index:4;display:grid;width:34px;height:34px;
  place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  background-color:rgba(24,12,21,.55);color:rgba(255,255,255,.78);
  font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;pointer-events:none}
.am-compass span{display:block;transform:rotate(var(--am-yaw,0deg))}

/* 経路の描画アニメ（アクセスページのみ。TOPは星空があるので付けない） */
.am-anim .am-route-line,.am-anim .am-route-glow{stroke-dasharray:var(--am-len,1200);stroke-dashoffset:var(--am-len,1200)}
.am-anim .am-route-dot,.am-anim .am-pin,.am-anim .am-route-start{opacity:0}
.am-anim.is-draw .am-route-line,.am-anim.is-draw .am-route-glow{animation:amDraw 1.4s cubic-bezier(.4,.05,.2,1) forwards}
.am-anim.is-draw .am-route-dot,.am-anim.is-draw .am-pin,.am-anim.is-draw .am-route-start{animation:amFade .5s .95s ease-out forwards}
@keyframes amDraw{to{stroke-dashoffset:0}}
@keyframes amFade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .am-anim .am-route-line,.am-anim .am-route-glow{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .am-anim .am-route-dot,.am-anim .am-pin,.am-anim .am-route-start{opacity:1;animation:none}
}

/* アクセスページ用の単独ブロック（TOPは既存 .access-terrain の absolute を使う） */
.am-block{position:relative;margin-top:clamp(30px,4vw,44px);
  width:100vw;left:50%;margin-left:-50vw;max-width:100vw;overflow:hidden}
.am-standalone{position:relative;width:100%;height:clamp(360px,36vw,660px);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.am-standalone::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,8,16,.5) 0,rgba(18,8,16,0) 20%,rgba(18,8,16,0) 74%,rgba(18,8,16,.6))}
.am-standalone .terrain-zoom{position:absolute;z-index:5;right:56px;bottom:18px;display:grid;
  border:1px solid rgba(255,255,255,.6);background-color:rgba(24,12,21,.8);user-select:none}
.am-standalone .terrain-zoom button{display:grid;width:44px;height:44px;place-items:center;border:0;
  color:#fff;background:transparent;font-family:var(--font-en);font-size:22px;cursor:pointer}
.am-standalone .terrain-zoom button+button{border-top:1px solid rgba(255,255,255,.4)}
.am-standalone .terrain-zoom button:hover{color:var(--paper);background-color:#fff}
.am-standalone .am-hint{position:absolute;z-index:4;right:18px;top:18px;margin:0;
  color:rgba(255,255,255,.7);font-family:var(--font-en);font-size:9px;font-weight:500;
  letter-spacing:.2em;pointer-events:none}
.am-cap{margin-top:12px;color:var(--mist);font-size:11.5px;letter-spacing:.04em}

/* アクセスページは左にカードが無いので、経路がビューポート中央に来るよう地図面を平行移動 */
@media(min-width:641px){
  .am-standalone .am-plane{left:-38%;top:-45%;width:176%;height:190%;--am-tx:-12.1%}
  /* ヒントは右上（ラベルの居場所）を空けて、＋−ボタンの左隣へ逃がす */
  .am-standalone .am-hint{right:112px;bottom:26px;top:auto}
}

@media(max-width:640px){
  .am-plane{left:-16%;top:-27%;width:132%;height:154%}
  .am-label{padding:5px 9px 6px}
  .am-label b{font-size:11px}
  .am-label i{font-size:6.5px;letter-spacing:.1em}
  .am-credit{left:12px;bottom:10px;font-size:9.5px}
  .am-compass{left:12px;top:12px;width:28px;height:28px;font-size:9.5px}
  .am-standalone{height:min(78vw,360px)}
  .am-standalone .am-plane{left:-30%;top:-40%;width:160%;height:180%;--am-tx:-10%}
  .am-standalone .terrain-zoom{right:12px;bottom:12px}
  .am-standalone .terrain-zoom button{width:38px;height:38px;font-size:18px}
}

/* ============================================================
   段3 広域（日暮里・鶯谷・上野・浅草）  2026-09-06
   広域＝日暮里・鶯谷・上野・浅草＋ホテル（JR山手線／東京メトロ銀座線をレールに沿って強調）
   徒歩ルート＝段1の実測トレース（無改変）
   地図データ © OpenStreetMap contributors（ODbL）
   生成＝_tools/access_map/{fetch_osm_wide.py,build_svg_wide.py,inject_wide.py}
   戻し方＝この節を削除し、両ページの [data-access-map] の中身を段2の
           1plane構成（.am-plane 1枚＋徒歩ルートのラベル5枚）へ戻す
   ============================================================ */
.am-stage{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transform-origin:50% 50%;will-change:opacity,transform;
  transition:opacity .7s cubic-bezier(.4,.05,.2,1),transform .7s cubic-bezier(.4,.05,.2,1),visibility 0s .7s}
.am-stage.is-on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .7s cubic-bezier(.4,.05,.2,1),transform .7s cubic-bezier(.4,.05,.2,1),visibility 0s 0s}
@media(prefers-reduced-motion:reduce){.am-stage{transition:none}.am-stage.is-on{transition:none}}

/* 広域の強調経路（JR＝実線／銀座線＝地下なので破線のまま） */
.amw-glow{fill:none;stroke:#ff6b9a;stroke-width:9;stroke-opacity:.20;stroke-linecap:round;stroke-linejoin:round}
.amw-line{fill:none;stroke:#ff6b9a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,107,154,.8))}
.amw-line.amw-sub,.amw-glow.amw-sub{stroke-dasharray:9 6}
.amw-link{fill:none;stroke:#ff6b9a;stroke-opacity:.55;stroke-width:1.6;stroke-dasharray:3 3}
.amw-st{fill:#fff;stroke:#ff6b9a;stroke-width:2.4}

/* 浅草からタクシー（車道・2026-09-06 追補）
   JR＝ピンク実線／銀座線＝ピンク破線 と見分けがつく第3の書式＝薄いピンク寄りの白の実線。
   発光は上の .amw-line の半分。中間の折れ点に小丸は付けない（レールと区別）
   経路＝OSMの車道上を oneway 尊重の Dijkstra（馬道通り→言問通り） */
.am-taxi-line{fill:none;stroke:#ffd6e3;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(255,107,154,.5))}

/* 広域の面＝tune_wide.py の実測（台形4隅のカバー ≧ +18px を保ちつつ
   「箱の中に見えている広域SVGの範囲」を最大化し、各段の可視域の重心を
   SVG(500,337) に揃えた値）。徒歩ルートの面（段1・段2）は無改変 */
@media(max-width:640px){
  .access .am-plane--wide{--am-tx:-3%;--am-ty:0%}
  .am-standalone .am-plane--wide{left:-14%;top:-25%;width:128%;height:150%;--am-tx:-4%;--am-ty:0%}
}
@media(min-width:641px) and (max-width:1080px){
  .access .am-plane--wide{--am-ty:0%}
  .am-standalone .am-plane--wide{left:-10%;top:-30%;width:120%;height:160%;--am-tx:0%;--am-ty:0%}
  /* access は徒歩ルートのホテルが箱の上に出てしまう幅があるので下げる */
  .am-standalone .am-plane--detail{--am-ty:-4%}
}
@media(min-width:1081px){
  .am-standalone .am-plane--wide{left:-15%;top:-42.5%;width:130%;height:185%;--am-tx:0%;--am-ty:-5%}
}
/* TOP の PC は本文カード（540px固定）が地図に重なるので、広域は内容をカードの右へ寄せる。
   面を先に横へ広げてから寄せる＝台形カバーを落とさずに寄せられる（grid_pc_wide.py で総当り実測） */
@media(min-width:1081px) and (max-width:1439px){
  .access .am-plane--wide{left:-52.5%;top:-38%;width:205%;height:176%;--am-tx:14%;--am-ty:-13.5%}
}
@media(min-width:1440px){
  .access .am-plane--wide{left:-50%;top:-38%;width:200%;height:176%;--am-tx:13%;--am-ty:-13.5%}
}

/* 段階の切替チップ（＋−ボタンの真上） */
.am-level{position:absolute;z-index:5;right:18px;bottom:118px;display:grid;
  border:1px solid rgba(255,255,255,.6);background-color:rgba(24,12,21,.8);user-select:none}
.am-level button{display:block;min-width:112px;height:46px;padding:0 14px;border:0;
  color:rgba(255,255,255,.8);background-color:transparent;
  font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;line-height:1;cursor:pointer;text-align:center}
/* 文言＋英字ルビ（地図ラベルと同じ作り） */
.am-level button b{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.am-level button i{display:block;margin-top:3px;color:#ff6b9a;font-family:Jost,sans-serif;font-size:8px;
  font-style:normal;font-weight:600;letter-spacing:.14em;line-height:1}
.am-level button[aria-pressed="true"] i{color:rgba(255,255,255,.9)}
.am-level button+button{border-top:1px solid rgba(255,255,255,.4)}
.am-level button[aria-pressed="true"]{color:#fff;background-color:#ff6b9a}
.am-standalone .am-level{right:56px;bottom:118px}
/* PCは右端の固定帯（.sidetab）があるのでチップをその左へ */
@media(min-width:1081px){
  .am-level{right:74px;bottom:118px}
  .am-standalone .am-level{right:112px;bottom:118px}
  /* ＋−もチップと右端を揃えて固定帯の左へ（2026-09-06 関谷さん指摘「拡大縮小がかさなる」） */
  /* ＋−は段階チップ（広域／徒歩ルート）の上に置く＝地図の下端に置くと画面外で見切れる
     （2026-09-06 関谷さん指摘「+-ボタンは広域の上が良い 見切れる」）
     チップ＝bottom:118px・高さ94px（英字ルビ付き）→ その上端212px＋余白10px */
  .access .terrain-zoom{right:74px;bottom:222px}
  /* DRAG TO EXPLORE も帯に触れていたので＋−の左へ（1081pxで4px重なっていた） */
  .access .access-hint{right:134px}
}
@media(max-width:640px){
  .am-level{right:18px;bottom:118px}
  .am-level button{min-width:100px;height:42px;padding:0 10px;font-size:11px}
  .am-level button b{font-size:11px}
  .am-level button i{font-size:7px;letter-spacing:.1em}
  .am-standalone .am-level{right:12px;bottom:100px}
}
/* kenpin 2026-10-13＋監査 C-5：地図の文字は全幅で13px以上（地図ラベル・段階チップ・コンソールN・クレジット・操作ヒント）。英字ルビは全幅で出さない */
.am-label i,.am-level button i{display:none}
.am-level button b{font-size:13px}
.am-compass,.am-credit,.am-standalone .am-hint{font-size:13px}
.am-standalone .am-hint{letter-spacing:.08em}
@media(max-width:640px){
  .am-label b,.am-level button b{font-size:13px}
  .am-compass,.am-credit{font-size:13px}
}
@media(max-width:600px){
  .am-credit{right:64px;line-height:1.3}
}
/* 641〜1279px は クレジットと操作ヒントが同じ下端に並ぶ＝ヒントを2行・クレジットはヒントの左までで折り返す（文言は不変） */
@media(min-width:601px) and (max-width:1279px){
  .am-standalone .am-hint{max-width:150px;line-height:1.35;text-align:right}
  .am-credit{right:242px;line-height:1.3}
}