/* ============================================================================ 画面の向きの案内（共通）。2026-08-09 新規。正本 = docs/ORIENTATION_POLICY.md ■ 何のためか縦と横の両方に対応しようとして、切り替えのたびに画面が崩れていた（ユーザー指摘「切り替えでバグみたいになる」2026-08-09）。 **1画面は1つの向きだけ対応する**ことにして、違う向きのときは中身を描かず案内だけ出す。3Dロビーで既に使っている形をそのまま広げたもの。 ■ 使い方画面のに data-orient="landscape"（横専用）か "portrait"（縦専用）を書く。何も書かなければ今までどおり（どちらでも出る）。判定と class 付けは data/js/orientgate.js が行う。 ■ ★向きは web では強制できない iPhone Safari は screen.orientation.lock() を実装していない。どの端末でも確実に効くのは「案内を出す」ことだけ（ORIENTATION_POLICY.md）。 ============================================================================ */ #orientGate{ position:fixed;inset:0;z-index:9999;display:none; flex-direction:column;align-items:center;justify-content:center;gap:14px; background:linear-gradient(180deg,#5BAFDC 0%,#8FD8FF 55%,#EAF4FF 100%); color:#3A2E4A;text-align:center;padding:24px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} #orientGate .ph{font-size:64px;animation:orientRot 1.6s ease-in-out infinite alternate} #orientGate b{font-size:18px;font-weight:900} #orientGate small{font-size:12px;font-weight:700;color:#4A3208;opacity:.85;line-height:1.6} @keyframes orientRot{from{transform:rotate(0)}to{transform:rotate(90deg)}} /* 向きが合っていないときだけ案内を出し、中身は描かない。 ★display:none ではなく visibility を使わない理由: 中身の描画そのものを止めたい（3Dやグラフが見えない所で動き続けるのを避ける）。 */ body.orient-ng #orientGate{display:flex} body.orient-ng > *:not(#orientGate){display:none !important} /* 動きを減らす設定の人には回転させない */ @media (prefers-reduced-motion:reduce){ #orientGate .ph{animation:none} }