なので、390px幅では 紙の中の
と必ず縦に重なる。重なり検査は h1,h2,h3,p,li を無差別に見るため （qa_play.py の OVERLAP_JS）、札の面積比が0.15を超えて即FAILになる。 opacity:0 は checkVisibility({opacityProperty:true}) が「見えていない」と判定するので 検査から外れる。display:none にしないのは aria-live の読み上げを殺さないため。 クラスの付け外しは dyn-extras.js（下のJS）が担当。PCでは重ならないので何もしない */ .dyn-count.is-hushed { opacity: 0; } } /* 伏せる／戻すの効き時間。ここが唯一この部品が持つ「動き」 */ .dyn-count { transition: opacity .3s ease; } /* ============================================================ 見るだけモード（.is-tour）と WebGL不可（.no-3d） 背景の絵が無いので、紙が暗い地の上にぽつんと浮く。 落ち影を弱めて、「暗い紙面に置いた白い紙」に見えるよう整える。 ※ 可読性そのものは紙が不透明なので、この2モードでも一切変わらない ============================================================ */ html.is-tour .gx-station[data-reading] .dyn-read, html.no-3d .gx-station[data-reading] .dyn-read { box-shadow: 10px 10px 0 rgba(216, 35, 42, .92), 0 10px 30px rgba(0, 0, 0, .35); } @media (max-width: 700px) { html.is-tour .gx-station[data-reading] .dyn-read, html.no-3d .gx-station[data-reading] .dyn-read { box-shadow: 6px 6px 0 rgba(216, 35, 42, .92), 0 8px 20px rgba(0, 0, 0, .35); } } /* ============================================================ 動きの逃げ道 この部品が持つ動きは .dyn-count の opacity 遷移ひとつだけ。それを止める。 gx.css:441-445 が既に *, *::before, *::after へ !important で同じことを当てているので 実質は二重の保険だが、「この部品の動きはここで止まる」を1か所で読めるように明示して残す。 止めても札が「消えたまま／出たまま」で固まることはない（opacity が即時に切り替わるだけ） ============================================================ */ @media (prefers-reduced-motion: reduce) { .dyn-count { transition: none !important; } .gx-station[data-reading] .dyn-read, .gx-station[data-reading] .dyn-read * { animation: none !important; transition: none !important; } } /* ========================================================== ポップUI改修 2026-08-31 ── cursor ========================================================== */ /* ══════════════════════════════════════════════════════════════════════════ カーソル「ポップな矢印」v2（2026-08-31 作り直し） 【入れる場所】assets/css/dynamo.css の **23〜27行目を削除して、その位置に貼る**。 .has-3d:not(.is-tour) body { cursor: grab; } .has-3d.is-grabbing body { cursor: grabbing; } .has-3d .gx-hotspot, .has-3d a, .has-3d button { cursor: pointer; } ★末尾に足すのは不可。27行目 `.has-3d .gx-hotspot`(0,2,0) を残すと、 gx.css:424 `.gx-hotspot:disabled`(0,2,0) と同点になり、dynamo.css が後に読まれる ぶん後勝ちして、disabled の印が pointer のままになる。 ブラウザで実測して確認した（見るだけモードで disabled のホットスポット = pointer）。 ※2026-09-01 追記：見つけた印はもう disabled にならない（find.js を直した）。 ここで守るのは「この先の駅」など、本当に押せない部品だけ。 【なぜ作り直したか】 前回は「OSの矢印より見やすい」を狙った細い32pxの矢印で、しゃれてはいるが 参照サイトのポップさが無かった。参照サイトの語彙は 「原色・太い縁・硬い影」。カーソルもその語彙で描き直す。 【描き方の決めごと】 ・40×40（Chromeの上限は128×128）。32pxでは縁を太くすると塗りが痩せる ・縁＝クリーム #F2E8D5 を stroke-width:6 ＋ paint-order:'stroke' で **外側だけに3px**出す（中心揃えだと矢印の尻尾が縁の色で埋まる） ・影＝同じ形をもう1枚 translate(1.8,2.2) して**不透明の墨**で敷く。 ぼかさない＝硬い影。紙のシールに見せる係 ・角は stroke-linejoin='round' で少し丸める。矢じりは太く短く ・原点（hotspot）は矢印の先端 = 5 4。**画像ピクセル基準**なので width/height と viewBox を 40 で揃えてある（ここをずらすと押し位置が全部ずれる） ・data URI の # は %23、< > は %3C %3E にエスケープ済み（生の # はCSSを壊す） ・SVGに width/height を明記（Firefox は viewBox だけだと描かないことがある） 【4つの状態を「色」と「形」の両方で分ける（色覚に頼らせない）】 ふつう（見回す）… 墨の塗り ＝しるし無し つかんでいる … ターコイズの塗り ＝右上にターコイズの太い線2本 押せるものの上 … チェリーの塗り ＝右上に黄色の極太の星 押せない … くすんだ灰の塗り ＝右上にクリームの横棒（＝もう押せません） 【var() の使い方について】 前回の「素のキーワード → var() の2行重ね」は理由づけが誤りだった （変数が未定義でも前の宣言には戻らない）。今回は `var(--x, grab)` の フォールバック引数1つで書く。これなら変数が無くても必ずキーワードに落ちる。 ★変数は必ずこの同じファイルの :root に置くこと。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. 既定は素のキーワード ──────────────────────────────── 触る指しか無い端末（スマホ）はここで止まる。 カーソルが画面に無いので絵を出しても意味が無いが、 **body は auto ではなく grab のまま**にする。 マウスを挿したタブレット等（hover:none だが any-hover:hover）で 「つかめる」合図が消えるのを防ぐため。 */ :root { --dyn-cur-look: grab; --dyn-cur-grab: grabbing; --dyn-cur-pick: pointer; --dyn-cur-off: default; } /* ── 2. 指す道具が1つでもある機械だけ、ポップな矢印に差し替える ── hover ではなく any-hover を見る。ハイブリッド機（指＋マウス）は hover:none と報告することがあるが any-hover:hover なので、ここに入る。 ＝マウスがある人には必ず出る／指だけの人には出ない、を1本の条件で満たす。 */ @media (any-hover: hover) { :root { /* ふつう（見回す）：墨の塗り＋クリームの縁＋硬い墨の影 */ --dyn-cur-look: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' transform='translate(1.8,2.2)' fill='%2316171B' stroke='%2316171B' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' fill='%2316171B' stroke='%23F2E8D5' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 5 4, grab; /* つかんでいる：ターコイズの塗り＋右上に太い線2本（形が変わる） */ --dyn-cur-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' transform='translate(1.8,2.2)' fill='%2316171B' stroke='%2316171B' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3Crect x='25' y='5.4' width='11.5' height='4.4' rx='2.2' fill='%232FBFB0' stroke='%23F2E8D5' stroke-width='2.4' paint-order='stroke'/%3E%3Crect x='28' y='13' width='8.5' height='4.4' rx='2.2' fill='%232FBFB0' stroke='%23F2E8D5' stroke-width='2.4' paint-order='stroke'/%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' fill='%232FBFB0' stroke='%23F2E8D5' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 5 4, grabbing; /* 押せるものの上：チェリーの塗り＋黄色の極太の星（形が変わる） */ --dyn-cur-pick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' transform='translate(1.8,2.2)' fill='%2316171B' stroke='%2316171B' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M30 4 C30.7 8.6 31.9 9.8 36.5 10.5 C31.9 11.2 30.7 12.4 30 17 C29.3 12.4 28.1 11.2 23.5 10.5 C28.1 9.8 29.3 8.6 30 4 Z' fill='%23F5C531' stroke='%2316171B' stroke-width='2.4' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' fill='%23D8232A' stroke='%23F2E8D5' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 5 4, pointer; /* 押せない（見つけ済み・無効）：くすんだ灰＋クリームの横棒（形が変わる） ここをOS標準の矢印に落とすと、遊んでいる最中に急に別世界の矢印が出て興ざめする。 「押せない」も同じ語彙のまま描くほうが、世界が途切れない */ --dyn-cur-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' transform='translate(1.8,2.2)' fill='%2316171B' stroke='%2316171B' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3Crect x='25' y='8' width='12' height='4.6' rx='2.3' fill='%23F2E8D5' stroke='%2316171B' stroke-width='2.4' paint-order='stroke'/%3E%3Cpath d='M5 4 L5 26.6 L11.1 20.9 L15.3 30.2 L19.9 28.1 L15.9 19.3 L23.6 19.3 Z' fill='%237A7C84' stroke='%23F2E8D5' stroke-width='6' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 5 4, default; } } /* ── 3. 動きを減らす設定への逃げ道 ────────────────────────── この矢印はアニメーションを持たない（静止画4枚の差し替えだけ）。 ただし「マウスを動かすたびに形と色が変わる」こと自体を負担に感じる人がいるので、 OS標準のカーソルへ丸ごと戻す。変数を戻すだけなので !important は要らない。 ★2 より**後ろ**に置くこと（どちらも :root(0,1,0) で、後に書いたほうが勝つ）。 ポップな矢印を reduce でも残したいなら、この @media ブロックごと削除すればいい */ @media (prefers-reduced-motion: reduce) { :root { --dyn-cur-look: grab; --dyn-cur-grab: grabbing; --dyn-cur-pick: pointer; --dyn-cur-off: default; } } /* ── 4. 割り当て ────────────────────────────────────────── .gx-stage は pointer-events:none なので、見回しのカーソルは body に出す。 is-tour（見るだけモード）と no-3d には**1つも指定を書かない**。 遊べない画面で「つかめそうな矢印」を出すのは嘘になるので、 gx.css の素の pointer / default にそのまま任せる（実測で確認済み）。 */ /* ふつう：見回す */ .has-3d:not(.is-tour) body { cursor: var(--dyn-cur-look, grab); } /* (0,2,1) */ /* つかんでいる。is-grabbing は assets/js/worlds/dynamo.js が pointerdown/up で html に付け外ししている（160行 add ／182行 remove）。JSの追加は不要 */ html.has-3d.is-grabbing:not(.is-tour) body { cursor: var(--dyn-cur-grab, grabbing); } /* (0,3,2) */ /* 押せるものの上。.gx-hotspot は button なので button で拾える。 .gx-hotspot.is-pinned は本体が pointer-events:none で輪(::before)と札(::after)が 押しを受けるが、疑似要素は親の cursor を継ぐので輪の上でもチェリーになる （::before の計算値も実測で確認済み） */ .has-3d:not(.is-tour) a, .has-3d:not(.is-tour) button { cursor: var(--dyn-cur-pick, pointer); } /* (0,2,1) */ /* ドラッグ中は、押せるものの上を通ってもチェリーに化けない。 （つかんだまま印の上を通ると「押せる」に見えて、指を離すと押されそうで怖い） ★:not(:disabled):not([aria-disabled="true"]) が要。これが無いと、 下の「押せない」より詳細度が高いこの規則が勝ってしまい、 見つけ済みの瓶の上でも grabbing が出る（前回案の不具合。実測で再現した） */ html.has-3d.is-grabbing:not(.is-tour) a, html.has-3d.is-grabbing:not(.is-tour) button:not(:disabled):not([aria-disabled="true"]) { cursor: var(--dyn-cur-grab, grabbing); /* (0,5,2) */ } /* 押せない。 ★2026-09-01 に前提が変わった。find.js は**見つけた印を disabled にしなくなった** （一度開いたシールを押し直しても開かないのはバグ、という内田指摘）。 よって「見つけ済みの印」はここに落ちてこず、pointer のまま＝押せる見た目で正しい。 この規則が残っているのは、本当に押せない部品（この先の駅・送信中のボタンなど）のため。 gx.css:424 `.gx-hotspot:disabled`(0,2,0) より重くして、 かつ**この規則を一番最後に置く**（詳細度と順番の二重で守る） */ html.has-3d:not(.is-tour) button:disabled, html.has-3d:not(.is-tour) [aria-disabled="true"] { cursor: var(--dyn-cur-off, default); } /* (0,3,2) */ /* ========================================================== ポップUI改修 2026-08-31 ── menu ========================================================== */ /* ══════════════════════════════════════════════════════════════════ ポップなハンバーガーメニュー（右上）＋ カウンタの引っ越し ── 第2稿 ────────────────────────────────────────────────────────────── 見た目の方針は初稿のまま：黄色ベタ＋太いインクの縁＋硬い影（ぼかさない）、 開くと黒地＋チェリー縁に反転、パネルはクリームの紙に太い罫。 直したのは**当たり判定と縮退の契約**。詳しくは各ブロックの★印。 ★この稿での一番大きい変更 印（gx-marker）が固定UIをよけられるように、HTML側で メニューボタンとカウンタに data-gx-avoid を付けた。 位置をCSSでずらして逃げるのは**やめた**（画面幅で成否が変わる場当たりになるため）。 ★色は全部その場で測り直した（sRGB相対輝度・WCAG式） 黄 #F5C531 × インク #16171B = 11.01 クリーム #F2E8D5 × インク = 14.74 チェリー #D8232A × クリーム = 4.12（26px＝大きい文字。基準3:1） #3A3B42 × クリーム = 9.17 カウンタの座布団 rgba(12,12,14,.72) が真っ白なパノラマに乗った最悪ケースで クリーム文字 = 6.63 ／ 黄色（全部見つけた状態）= 4.95（どちらもAA 4.5:1を超える） ※初稿の .62 は黄色が 3.42 で落ちる。元の .44 に至ってはクリームでも 2.49 で落ちていた。 ══════════════════════════════════════════════════════════════════ */ /* ── ① カウンタの引っ越し：右上 → 左上（ロゴの真下）───────────── なぜ動かすか：右上はこれからメニューが占める。角ひとつに強い操作を1つだけ置く。 ★不透明にはしない（第2稿で撤回）。 初稿は background を --dyn-ink のベタにしたが、これだと真下に来た印の 輪と札が黒い蓋の下に完全に消える。カウンタは pointer-events:none なので クリックは通ってしまい＝検品はPASS・人間には何も見えない、という一番たちの悪い型になる。 ポップさの正体は「縁と影」であって塗りの不透明度ではないので、 縁を2pxに太らせ、硬い影を足し、地は透ける座布団のまま濃さだけ上げた。 ★pointer-events:none は絶対に外さない（元の規則が生きている。ここでは上書きしない）。 */ .dyn-count { /* ロゴの下端（16 + 1 + 7 + 38 + 6 + 1 = 69px）から7px空けた76px */ top: 76px; left: 16px; right: auto; padding: 6px 13px 5px; border: 2px solid rgba(242, 232, 213, .55); /* 座布団に対して 7.23。太くして輪郭を出す */ border-radius: 999px; background: rgba(12, 12, 14, .72); /* 透ける。白いパノラマ上でクリーム 6.63 */ backdrop-filter: blur(6px); color: var(--dyn-cream); font-size: 14px; line-height: 1.25; /* body の 1.9 だと縦40px超の座布団になる。印を押しのける面積を小さく保つ */ letter-spacing: .14em; box-shadow: 3px 3px 0 rgba(22, 23, 27, .55); /* ← ここがポップの芯。ぼかさない */ } /* 全部見つけたら黄色に反転（座布団の上で 4.95） */ .dyn-count.is-full { border-color: var(--dyn-yellow); color: var(--dyn-yellow); } @media (max-width: 700px) { .dyn-count { top: 76px; left: 12px; font-size: 13px; } } /* 幕が上がるまでは出さない。幕は z40・カウンタは z60 なので、 何もしないと「まだ始まっていないのに 0/9 見つけた」が幕の上に浮く */ html.is-locked .dyn-count { opacity: 0; } /* 全体像（ロゴを押した状態）では絵だけにする */ html.is-overview .dyn-count { opacity: 0; } /* ★見るだけモードでも伏せる（既存の dynamo.css:87 は no-3d しか書いていなかった＝書き漏れ）。 数を数える遊びが無い経路に、数のカウンタだけ残さない */ html.is-tour .dyn-count { display: none; } /* ── ② ハンバーガーボタン ──────────────────────────────────── ★出す条件を**セレクタの詳細度だけ**で決める（並び順に賭けない）。 素の姿は display:none。「JSが動いていて・3Dが立っていて・見るだけモードでない」 ときだけ出す。この条件はパネル側・スクリム側・JS側の isDrawer() と完全に同じ。 ★高さの上限52pxは据え置き。印はこれを data-gx-avoid でよけるようになったが、 固定UIは小さいほど印を押しのける量が減るので、太らせない約束は残す。 */ .dyn-menu__btn { display: none; /* 素の姿＝出さない（押しても何も起きない環境で出さない） */ position: fixed; top: 16px; right: 16px; z-index: 92; align-items: center; gap: 11px; height: 52px; /* 44px以上 */ margin: 0; padding: 0 17px 0 15px; border: 3px solid var(--dyn-ink); border-radius: 15px; background: var(--dyn-yellow); color: var(--dyn-ink); /* 線と文字。11.01 */ --btn-sh: var(--dyn-ink); /* 影の色を1変数にまとめる＝開閉で色を差し替えても focus 規則を書き直さない */ box-shadow: 4px 4px 0 var(--btn-sh); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1), background-color .16s linear, border-color .16s linear; } /* ★遊べる経路だけ出す。(0,4,1) なので、素の規則(0,1,0)に必ず勝つ。 is-tour / no-3d では**一度も match しない**＝固定のチラシが本文の上に残らない （gx.css:292 が tour でロゴを absolute に落とし、dynamo.css:54 が marquee を消すのと同じ約束） */ html.has-js:not(.no-3d):not(.is-tour) .dyn-menu__btn { display: inline-flex; } /* 幕が上がるまでは出さない（幕は z40。ボタンだけ先に浮くと段取りが壊れる） */ html.is-locked .dyn-menu__btn { opacity: 0; visibility: hidden; pointer-events: none; } /* 全体像のあいだは絵だけにする */ html.is-overview .dyn-menu__btn { opacity: 0; visibility: hidden; pointer-events: none; } .dyn-menu__btn:hover, .dyn-menu__btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--btn-sh); } .dyn-menu__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-sh); } /* ★フォーカス輪は二重にする。黄色い面の上に1色置くだけだと、 背後のパノラマが明るいときも暗いときも成立する色が無い。 内側=インクの輪（黄の上で11.01）／外側=クリームの halo（暗いパノラマの上で出る） */ .dyn-menu__btn:focus-visible { outline: 3px solid var(--dyn-ink); outline-offset: 3px; box-shadow: 6px 6px 0 var(--btn-sh), 0 0 0 9px rgba(242, 232, 213, .92); } /* 3本線。currentColor で描くので、開閉の色替えは color 1つで済む */ .dyn-menu__bars { position: relative; width: 26px; height: 18px; flex: none; } .dyn-menu__bars i { position: absolute; left: 0; width: 100%; height: 4px; border-radius: 2px; background: currentColor; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .14s linear; } .dyn-menu__bars i:nth-child(1) { top: 0; } .dyn-menu__bars i:nth-child(2) { top: 7px; } .dyn-menu__bars i:nth-child(3) { top: 14px; } .dyn-menu__word { font-family: var(--dyn-disp); font-size: 20px; line-height: 1; letter-spacing: .14em; padding-top: 2px; /* Bebas は上に余白が寄るので視覚的に中央へ */ } /* 開いているとき：黒地＋クリームの×。赤い縁で「いま開いている」を強く出す */ html.dyn-menu-open .dyn-menu__btn { background: var(--dyn-ink); color: var(--dyn-cream); /* 14.74 */ border-color: var(--dyn-cherry); /* 黒地に対して 3.58（境界線の基準3:1）。3pxを細くしない */ --btn-sh: var(--dyn-cherry); } html.dyn-menu-open .dyn-menu__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.dyn-menu-open .dyn-menu__bars i:nth-child(2) { opacity: 0; } html.dyn-menu-open .dyn-menu__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 700px) { /* 狭い画面では文字を落として正方形に */ .dyn-menu__btn { top: 14px; right: 12px; height: 50px; width: 50px; padding: 0; justify-content: center; border-radius: 14px; } .dyn-menu__word { display: none; } } /* ── ③ 背後の幕（スクリム）──────────────────────────────── 開いている間だけ、後ろのホットスポットを押せなくする。 ★既定は display:none。開く規則も「遊べる経路」限定にしてあるので、 tour/no-3d/JS無効では**一度も出ない**。qa_play が触る場面（メニューは常に閉じている）では DOMに居るだけで一切邪魔をしない。 */ .dyn-menu__scrim { display: none; position: fixed; inset: 0; z-index: 88; background: rgba(14, 15, 18, .74); backdrop-filter: blur(2px); /* ★指でなぞっても背後がスクロールしない。html に overflow:hidden を当てないのは、 見るだけモードの p() が scrollY を読んでいて（gx-state.js:49-52）進行度が凍るため。 背後を止めたいのはポインタだけなので、止めるのもポインタだけにする */ touch-action: none; } html.has-js:not(.no-3d):not(.is-tour).dyn-menu-open .dyn-menu__scrim { display: block; animation: dyn-menu-fade .18s ease both; } /* ── ④ パネル ────────────────────────────────────────────── ★素の姿＝「本文の頭に出る目次」。JS無効でも no-3d でも、これがそのまま読める（DOM-first）。 margin-top:88px は、tour/no-3d でロゴが position:absolute（高さ約70px）になって 真上に乗るため。ここが0だと「みる」と「01 店内」がロゴに覆われる （qa_play が fallback.png として必ず撮る画）。 */ .dyn-menu { display: flex; flex-direction: column; gap: 4px; width: calc(100% - 24px); /* 狭い画面で左右に余白を残す＝横スクロールを作らない */ max-width: 42rem; margin: 88px auto 26px; padding: 18px 20px 16px; border: 3px solid var(--dyn-ink); border-radius: 20px; background: var(--dyn-cream); color: var(--dyn-ink); /* 14.74 */ box-shadow: 6px 6px 0 rgba(22, 23, 27, .55); } /* ★見るだけモードでは目次ごと消す。 tour の HUD はドットが生きている（gx.css は skip と目標文しか伏せていない）ので 章の移動手段はある。遊びの途中で本文の頭に大きな紙が生えるほうが害が大きい。 */ html.is-tour .dyn-menu { display: none; } /* ★遊べる経路だけ、右上から出る引き出しに化ける。(0,4,1) */ html.has-js:not(.no-3d):not(.is-tour) .dyn-menu { position: fixed; z-index: 90; top: 80px; right: 16px; left: auto; width: min(400px, calc(100vw - 32px)); /* 高さは「上端80px＋下に16px」を引いた残り全部。74svh にしていたら 800px の画面で中身620pxに対して器が586pxとなり、最後の行が字の途中で切れた （スクロールはできるが、切れた字が見えるのは事故に見える・2026-09-01 実測） */ max-height: calc(100svh - 96px); overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; margin: 0; box-shadow: 8px 8px 0 rgba(216, 35, 42, .85), 0 24px 60px rgba(0, 0, 0, .5); } /* ★閉じているときだけ隠す。(0,5,1) で、素の規則(0,1,0)にも上の規則にも確実に勝つ。 初稿は「display:none と display:flex を同じ詳細度で書いて後勝ちに賭ける」形だったので、 ブロックを並べ替えた瞬間に既定で開きっぱなしになる（＝検品が全滅する）危うさがあった。 */ html.has-js:not(.no-3d):not(.is-tour):not(.dyn-menu-open) .dyn-menu { display: none; } html.has-js:not(.no-3d):not(.is-tour).dyn-menu-open .dyn-menu { animation: dyn-menu-in .2s cubic-bezier(.2, .9, .3, 1) both; transform-origin: 92% 0; } @keyframes dyn-menu-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes dyn-menu-fade{ from { opacity: 0; } to { opacity: 1; } } /* 小見出し。★h2/h3 は使わない ── qa_play の文字重なり検査（h1,h2,h3,p,li）に 新しい固定要素を持ち込まないため。見出しの格は太いチェリーの罫で作る。 初稿の15pxは囁いていたので18pxまで上げた */ .dyn-menu__cap { margin: 12px 0 6px; padding-bottom: 5px; border-bottom: 3px solid var(--dyn-cherry); font-family: var(--dyn-disp); font-size: 18px; letter-spacing: .20em; line-height: 1; color: var(--dyn-ink); } .dyn-menu__cap:first-child { margin-top: 0; } .dyn-menu__nav { display: flex; flex-direction: column; } /* 行。番号（Bebas・チェリー）＋和文（太字・黒）。触ると面ごと反転する＝ポップの基本。 ★角丸をやめた。初稿は border-radius:10px と border-bottom を併用していたので、 罫の両端が丸みで途切れて「太い罫」に見えなかった。 参照サイトの罫は端まで真っ直ぐ通っている。radius:0＋2pxのインク罫で作り直す。 */ .dyn-menu__item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; /* 44px以上 */ padding: 10px 12px; margin: 0; border: 0; border-bottom: 2px solid var(--dyn-ink); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .14s linear, color .14s linear, box-shadow .14s linear; } .dyn-menu__nav .dyn-menu__item:last-child { border-bottom: 0; } .dyn-menu__no { flex: none; min-width: 2.1em; font-family: var(--dyn-disp); font-size: 26px; line-height: 1; letter-spacing: .04em; color: var(--dyn-cherry); /* 26px＝大きい文字。クリーム地に 4.12（基準3:1）*/ } .dyn-menu__ja { font-size: 1.05rem; font-weight: 700; line-height: 1.3; } /* 反転。★横に動かす代わりに、左端に黄色い背骨を差す。 罫を radius:0 の直線にしたので、行がずれると罫の通りが崩れる。 動かさない演出なので reduced-motion でも同じ見た目が残る */ .dyn-menu__item:hover, .dyn-menu__item:focus-visible { background: var(--dyn-ink); color: var(--dyn-cream); /* 14.74 */ box-shadow: inset 5px 0 0 var(--dyn-yellow); } .dyn-menu__item:hover .dyn-menu__no, .dyn-menu__item:focus-visible .dyn-menu__no { color: var(--dyn-yellow); } /* 黒地に 11.01 */ /* 反転した黒地の上に出る輪なので黄色。外側はクリーム地に接するが、内側の11.01で成立する */ .dyn-menu__item:focus-visible { outline: 3px solid var(--dyn-yellow); outline-offset: -3px; } /* 番号の無い行（読み物・見るだけ・お問い合わせ）は、番号の桁ぶんだけ字下げして揃える */ .dyn-menu__item--sub { padding-left: 14px; } .dyn-menu__item--sub .dyn-menu__ja { font-size: 1rem; } /* ★まだ解錠していない駅の行。 押せば飛べる（HUDのドットと同じで、手前の駅を順に通過して歩く）が、 『01 店内／02 裏のガレージ』という目次の顔で出ている以上、 何が起きるのかを先に言っておく。JS が window.__gx.state() を見て is-ahead を付ける。 */ .dyn-menu__lock { display: none; } .dyn-menu__item.is-ahead .dyn-menu__lock { display: inline-block; margin-left: auto; /* 行の右端へ寄せる */ flex: none; padding: 2px 9px 1px; border: 2px solid var(--dyn-ink); border-radius: 999px; font-family: var(--dyn-disp); font-size: 12px; letter-spacing: .12em; line-height: 1.5; color: #3A3B42; /* クリーム地に 9.17 */ } .dyn-menu__item.is-ahead:hover .dyn-menu__lock, .dyn-menu__item.is-ahead:focus-visible .dyn-menu__lock { border-color: var(--dyn-cream); color: var(--dyn-cream); /* 黒地に 14.74 */ } /* 「見るだけモード」は、もう見るだけの経路に居るときは出さない（押しても意味がない） */ html.is-tour .dyn-menu__tour, html.no-3d .dyn-menu__tour { display: none; } .dyn-menu__foot { margin-top: 12px; padding-top: 10px; border-top: 3px solid var(--dyn-ink); /* 罫を太くして紙の下端を締める */ font-family: var(--dyn-disp); font-size: 13px; letter-spacing: .16em; color: #3A3B42; /* 初稿の #4A4B52（7.14）から 9.17 へ */ } @media (max-width: 700px) { /* 狭い画面：左右いっぱいに広げる。★左右に余白を残して横スクロールを作らない */ html.has-js:not(.no-3d):not(.is-tour) .dyn-menu { top: 72px; right: 12px; left: 12px; width: auto; max-height: calc(100svh - 92px); box-shadow: 6px 6px 0 rgba(216, 35, 42, .85), 0 20px 50px rgba(0, 0, 0, .5); } .dyn-menu__no { font-size: 24px; } } /* ── ⑤ 動きの逃げ道 ────────────────────────────────────── gx.css も reduce で全アニメを殺しているが、この部品だけを他所へ持ち出しても 成立するように、ここにも明示的に書く。 ★3本線が × に変わる transform は残す：あれは「いま開いている」という状態の表示であって 演出ではない。ここまで消すと、開いているのに閉じて見える。 */ @media (prefers-reduced-motion: reduce) { .dyn-menu__btn, .dyn-menu__bars i, .dyn-menu__item { transition: none; } html.has-js:not(.no-3d):not(.is-tour).dyn-menu-open .dyn-menu { animation: none; } html.has-js:not(.no-3d):not(.is-tour).dyn-menu-open .dyn-menu__scrim { animation: none; } .dyn-menu__btn:hover, .dyn-menu__btn:focus-visible { transform: none; } /* 行の反転は transform を使っていない（内側の背骨に置き換えた）ので、 reduce でも「触っているところ」が同じ強さで分かる */ } /* ========================================================== ポップUI改修 2026-08-31 ── 読んでいる間は、遊びの飾りを退かせる ========================================================== ★これが「見づらい」の最後の一手。 常時表示の読み物（#about）に紙のカードを敷いても、**印と札と教えが カードの上に浮いたまま**なので本文が隠れる。 実測：カードを入れた直後でも AA未満が 56.3%（入れる前は 66.8%）と、 ほとんど改善しなかった。原因は地の色ではなく**上に乗っている物**だった。 読み物は「普通に読めるページ」と自分で名乗っている節なので、 そこに居るあいだは遊びの部品が下がる。印は消えるのではなく、 スクロールを戻せばまた出る（DOMは1つも動かしていない）。 */ html.dyn-reading .gx-hotspot.is-pinned { opacity: 0; visibility: hidden; /* 検品の文字重なり検査から外れる（透明なだけだと残る） */ transition: opacity .25s ease, visibility 0s linear .25s; } html.dyn-reading .dyn-teach { display: none; } html.dyn-reading .dyn-marquee { opacity: .25; } @media (prefers-reduced-motion: reduce) { html.dyn-reading .gx-hotspot.is-pinned { transition: none; } } /* ========================================================== ポップUI改修 2026-08-31 ── 統合時に司令塔が直した4点 ========================================================== */ /* ① 読み物の札（.gx-meta）の文字色が、本文の p 規則に食われていた。 `.gx-station[data-reading] .dyn-read p`(0,3,1) が `.gx-station[data-reading] .gx-meta`(0,3,0) に勝ち、**黒い文字が赤い札に乗って**いた。 実測：この札だけ AA未満が 96.2%（中央値 2.02）。他の本文は 0%。 クラスを2度書いて詳細度を上げる（0,4,1）*/ .gx-station[data-reading] .dyn-read p.gx-meta.gx-meta { color: #FFF8EE; } /* ② 見つけ済みの印に、gx.css 418行の琥珀色のピルが箱いっぱいに残っていた。 `.gx-hotspot.is-found`(0,2,0) はボタン本体の background を塗るので、 シールの裏に四角い座布団が出る。印になっているときだけ打ち消す */ .gx-hotspot.is-pinned.is-found, .gx-hotspot.is-pinned.is-chosen { background: none; border-color: transparent; color: transparent; /* ボタンの素の文字は ::before/::after で出し直している */ } /* ③ なぞる帯（注ぐ）が不透明のクリーム板になり、見出しの後半を隠していた。 元の「透ける帯＋インクの縁」に戻す。満量の進み（--q）は残す */ .gx-hotspot.is-pinned[data-marker="drag"]::before { background: linear-gradient(90deg, var(--dyn-yellow) calc(var(--q, 0) * 100%), rgba(242, 232, 213, .20) calc(var(--q, 0) * 100%)); border: 2px solid var(--dyn-ink); } /* 帯の札は折り返させない。gx.css 479行のスマホ用 white-space:normal が生きていると、 高さを固定しているぶん文字が札からはみ出す */ .gx-hotspot.is-pinned[data-marker="drag"]::after { white-space: nowrap; max-width: none; } /* ④ 画面のいちばん下の帯（marquee）に印の札が潜って読めなくなる。 印は position:fixed で浮くので、帯の矩形を避けさせる。 data-gx-avoid は gx-marker.js が読む（2026-08-31 に口を足した） */ /* ========================================================== ポップUI改修 2026-08-31 ── 駅の文字にも板を敷く ========================================================== 読み物にクリームの紙を敷いて 0.4% まで下がったのに、**駅の文字は素のまま**だった。 実測（文字色 対 その下の地・面積重みづけ）： 「01 ／ 店内」＝ AA未満 **100%**（中央値 1.21）／ 見出し＝ AA未満 26.7% gx.css の楕円のベール（rgba(4,6,10,.62)）は、明るい店内には全く足りない。 ★この直しは**明るいテーマ固有**なので gx.css には返さない（夜の見本では起きない）。 */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { max-width: min(38rem, 84vw); padding: 22px 26px 24px; border: 3px solid var(--dyn-ink); border-radius: 20px; background: rgba(18, 19, 23, .88); /* クリームの文字に対して 13:1 台 */ box-shadow: 7px 7px 0 rgba(216, 35, 42, .92), /* 硬い影＝参照サイトの語彙 */ 0 18px 46px rgba(0, 0, 0, .45); } /* 元の楕円のベールは、板を敷いたので要らない（二重に暗くすると絵が死ぬ） */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner::before { display: none; } /* 板の中の文字は、クリームで統一して確実に読ませる */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-meta { color: var(--dyn-yellow); } .has-3d:not(.is-tour) .gx-station:not([data-reading]) h2 { color: var(--dyn-cream); } .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-sub { color: #DDD5C4; } @media (max-width: 700px) { .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { padding: 16px 18px 18px; border-radius: 16px; box-shadow: 5px 5px 0 rgba(216, 35, 42, .92), 0 14px 34px rgba(0, 0, 0, .45); } } /* 広い画面では、文字の板を**左に寄せる**。 参照サイトと同じで、UIは画面の端に置き、真ん中は絵に明け渡す。 板が中央にあると、印が板を避けて上端へ一列に吹き飛び、 **どの物を指しているのか分からなくなる**（2026-08-31 実測）。 左に寄せれば、印は物の上に残ったまま、板とだけすれ違える。 */ /* ★境目は 701px。901px にしていたら、701〜900px の帯だけ板が中央に残り、 印が板の上に乗ったままだった（2026-08-31 ブラウザ実測・790px幅）。 スマホ（≦700px）は板が画面下、それより広ければ左――という2択にする */ @media (min-width: 701px) { .has-3d:not(.is-tour) .gx-station:not([data-reading]) { justify-content: flex-start; } .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { max-width: min(30rem, 52vw); margin: 0; } /* 見回し方の教えは、板と重ならない高さへ下げる */ .dyn-teach { top: 84%; } } /* ========================================================== ポップUI改修 2026-08-31 ── 見回し方の教えを、下端の小さな帯にする ========================================================== 画面の真ん中に大きな文字で出していたので、文字の板と重なって **どちらも読めなくなっていた**（スマホ実測。qa_play は span を見ないので検出されない）。 役目は「ドラッグできる」と一言伝えるだけなので、下端の帯に格下げする。 帯（marquee）の上に置き、暗い座布団に載せて必ず読めるようにする。 */ .dyn-teach { top: auto !important; bottom: 52px; transform: translateX(-50%); padding: 8px 18px 7px; border: 2px solid var(--dyn-ink); border-radius: 999px; background: rgba(18, 19, 23, .88); text-shadow: none; } .dyn-teach__small { font-size: 11px; opacity: .8; } .dyn-teach__big { margin-top: 2px; font-size: clamp(13px, 2.2vw, 16px); letter-spacing: .08em; color: var(--dyn-cream); } .dyn-teach__big::after { width: 54px; margin-top: 7px; } .dyn-teach.is-on { animation: dyn-teach-in .6s .2s both; } @keyframes dyn-teach-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } } @keyframes dyn-teach-out { to { opacity: 0; transform: translateX(-50%) translateY(-8px); } } /* 狭い画面は縦の余白が無い。**1行に収めて**、板の裾と帯のあいだに置く。 実測：板の下端は画面の87%、帯は下40px。あいだは約69px しかないので、 2行（約80px）だと必ずどちらかに触れる */ @media (max-width: 700px) { .dyn-teach { bottom: 46px; } .dyn-teach__small { display: none; } .dyn-teach__big { white-space: nowrap; font-size: 12.5px; margin-top: 0; } .dyn-teach__big::after { display: none; } } /* ========================================================== ポップUI改修 2026-08-31 ── 背の低い画面では板を締める ========================================================== 小さいウィンドウ（実測 582x554）だと、文字の板が画面の 66% を占め、 印の逃げ場が**上下左右どこにも無くなる**。板を締めて場所を空ける。 */ @media (max-height: 700px) and (max-width: 900px) { .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { padding: 13px 15px 15px; } .has-3d:not(.is-tour) .gx-station:not([data-reading]) h2 { font-size: 1.18rem; line-height: 1.42; } .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-sub { display: none; } .gx-hotspot.is-pinned:not([data-marker="drag"]) { --dyn-badge-base: 58px; --dyn-plate-h: 24px; } } /* ========================================================== 2026-09-01 内田の指摘 ── 遊ぶ画面から地の文と平凡なボタンを退ける ========================================================== 「光ってる4つを、見つけてください というカードはいらない」 「裏においてありますとかのカードも同様 せっかくのデザインがかくれてしまう」 「平凡なボタンは削除」「コンテンツは…前面に出さず、クリックしたときなどだけにして」 ★方針：**遊ぶ画面に地の文を置かない。** 押す手がかりは黄色いギザギザのシールだけ。読むものはシールか ひとつだけ残す「読む」シールを押したときに出る。 ★DOMからは消さない。見るだけモード・no-3d・生HTMLでは全文が読める（縮退の約束）。 伏せ方は visibility。opacity:0 だけだと qa_play の文字重なり検査に残る。 ========================================================== */ /* ── 板を取り消す（司令塔が可読性のために入れたものを、指摘どおり外す）── */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* ── 地の文を伏せる（DOMには残す）── */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-meta, .has-3d:not(.is-tour) .gx-station:not([data-reading]) h2, .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-sub { visibility: hidden; } /* ── 本文に残るホットスポットは、遊ぶ画面では出さない ── 画角の外にある印は「振り向いて見つける」のが遊びなので、 平凡なピルで先回りして見せない。 ★ただしキーボードだけの人を締め出さない：フォーカスが当たった時だけ、 画面の下にポップな札として現れる（skip-link と同じ手法）。 */ .has-3d:not(.is-tour) .gx-station .gx-hotspot:not(.is-pinned) { position: absolute; /* ★min-width/min-height を0に戻さないと隠れない。gx.css:88 の `min-width:44px; min-height:44px` が width:1px に勝つので、 44x44 の当たり判定が画面に残り続ける（2026-09-01 実測：可読性の測定で 「冷蔵ケース」が AA未満98.1% として現れて発覚） */ min-width: 0; min-height: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .has-3d:not(.is-tour) .gx-station .gx-hotspot:not(.is-pinned):focus-visible { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); width: auto; height: auto; overflow: visible; clip-path: none; z-index: 74; padding: 10px 20px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-yellow); color: var(--dyn-ink); font-family: var(--dyn-text); font-weight: 700; font-size: .95rem; box-shadow: 4px 4px 0 var(--dyn-cherry); } /* ── 「読む」シール（唯一の平面ボタン）── 中身はクリックしたときだけ出す、という指摘への受け皿。 1駅に1つだけ、左下に置く。他の部品と同じ語彙（原色ベタ・太い縁・硬い影）。 */ .has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-more { display: none; } .has-3d:not(.is-tour) .gx-station.is-live .gx-more { display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 20px; bottom: 96px; z-index: 58; min-height: 44px; margin: 0; padding: 10px 18px 9px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-cream); color: var(--dyn-ink); font-family: var(--dyn-text); font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-decoration: none; box-shadow: 4px 4px 0 var(--dyn-cherry); transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s cubic-bezier(.2,.7,.3,1); } .has-3d:not(.is-tour) .gx-station.is-live .gx-more::before { content: ''; width: 15px; height: 15px; flex: none; border-radius: 3px; background: var(--dyn-cherry); box-shadow: inset 0 0 0 2px var(--dyn-cream); } .has-3d:not(.is-tour) .gx-station.is-live .gx-more:hover, .has-3d:not(.is-tour) .gx-station.is-live .gx-more:focus-visible { background: var(--dyn-yellow); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dyn-cherry); } @media (max-width: 700px) { .has-3d:not(.is-tour) .gx-station.is-live .gx-more { left: 14px; bottom: 86px; font-size: .86rem; } .has-3d:not(.is-tour) .gx-station .gx-hotspot:not(.is-pinned):focus-visible { bottom: 140px; } } @media (prefers-reduced-motion: reduce) { .has-3d:not(.is-tour) .gx-station.is-live .gx-more { transition: none; } } /* ========================================================== スプラッシュ（看板に灯りがともる）2026-09-01 ========================================================== */ /* ========================================================== スプラッシュ 2026-08-31 ── 看板に灯りがともる（幕の作り替え） ========================================================== 内田「まず、スプラッシュスクリーンが欲しいね、ポップな感じで」 「誰のための何のサイトなのか、デザインとコピーでわからせる必要がある」 遊んでいる画面から地の文を全部どけた分、説明が成立する場所はここしか無い。 だから幕は「読み込みの目隠し」ではなく、**店の看板そのもの**にする。 【この節の約束】 ・押して入る札は .gx-gate__enter（gx-core.js:95-96 が click に open() を配線する）。 **絶対に disabled にしない**。qa_play.py:147 が click() するので、 押せない時間があると検品が止まる。待たせるのはJS側で受け止める ・h1 は .gx-gate__title の1つだけ。p / h2 / h3 / li は幕の中に1つも置かない （qa_play の文字重なり検査に固定要素を持ち込まない） ・読み込みの進みは --sign-p（JSが入れる）→ --dyn-load（worlds/dynamo.js が入れる） → 0 の順に落ちる。JSが1行も動かなくても棒は壊れない ・見るだけモード・no-3d・動きを減らす設定では幕を出さない（下の3行） 【色は測った（sRGB相対輝度・WCAG式）】 黄 #F5C531 × インク #16171B = 11.01（OPENの札） クリーム #F2E8D5 × 板の地 #131418 = 14.6 台（見出し・説明） ターコイズ #2FBFB0 × 板の地 = 8.4（SODA STAND） #B0A99C × 板の地 = 7.2（進みの一行） #B9B2A4 × 板の地 = 8.0（ぜんぶ読む） ========================================================== */ /* 見るだけモードでは幕を挟まない（no-3d と reduce は gx.css:359/448 が既に伏せている）。 gx-core.js:109 が open() を呼ぶので実害は無かったが、0.9秒のフェードが一瞬走る */ html.is-tour .gx-gate { display: none; } /* ── 幕そのもの ───────────────────────────────────────── */ .gx-gate.dyn-sign { gap: 0; overflow: hidden; /* 斜光と市松の床がはみ出して横スクロールを作らない */ padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); } /* gx.css:325 の暗い楕円をこの案件の色に差し替える（上にチェリーの灯り、下はインク） */ .gx-gate.dyn-sign::before { background: radial-gradient(120% 90% at 50% 6%, rgba(216, 35, 42, .34), transparent 62%), linear-gradient(180deg, #1E1F25 0%, #0C0D10 100%); } .gx-gate.dyn-sign::after { background: radial-gradient(120% 95% at 50% 44%, rgba(6, 8, 12, .04), rgba(6, 8, 12, .60) 82%); } /* 看板の裏の斜光。看板が灯っている感じを作る係。押せないので pointer-events は殺す */ .dyn-sign__rays { position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(216, 35, 42, .20) 0deg 6deg, transparent 6deg 13deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 34%, transparent 72%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.55) 34%, transparent 72%); animation: dyn-sign-spin 54s linear infinite; } @keyframes dyn-sign-spin { to { transform: rotate(360deg); } } /* 足元の市松（店内の床と同じ柄）。幕と本編を同じ世界にしておく */ .dyn-sign__floor { position: absolute; left: -10vw; right: -10vw; bottom: 0; height: 96px; z-index: -1; pointer-events: none; background: repeating-conic-gradient(var(--dyn-cream) 0% 25%, var(--dyn-ink) 0% 50%) 0 0 / 38px 38px; opacity: .15; -webkit-mask-image: linear-gradient(180deg, transparent, #000 78%); mask-image: linear-gradient(180deg, transparent, #000 78%); } /* ── 看板の箱（この案件の「太いインクの縁＋ぼかさない影」の語彙） ── */ .dyn-sign__board { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(7px, 1.5vh, 14px); width: min(560px, 90vw); padding: clamp(16px, 3vh, 28px) clamp(14px, 4.5vw, 32px) clamp(18px, 3.2vh, 30px); border: 3px solid var(--dyn-ink); border-radius: 22px; background: linear-gradient(180deg, #22232A 0%, #131418 100%); box-shadow: 8px 8px 0 rgba(216, 35, 42, .92), /* ← ポップの芯。ぼかさない */ 0 26px 60px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(242, 232, 213, .16); /* 内側のクリームの罫＝ホーロー看板 */ text-align: center; } /* ── 上の札（EST. 1954 ／ CRAFT SODA）────────────────── 色は dynamo.css:31 の `.gx-gate .gx-meta{color:var(--dyn-yellow)}` が持っている */ .dyn-sign__eyebrow { margin: 0; font-size: clamp(10px, 2.4vw, 12px); letter-spacing: .3em; text-indent: .3em; /* 字送りの分だけ中央がずれるのを戻す */ } /* ── ネオンの文字（灯りがともる本体）─────────────────── role="img" を親に付けてあるので、中の1文字ずつは読み上げに出ない */ .dyn-sign__word { display: flex; flex-wrap: wrap; /* 書体が落ちて幅が伸びたら折り返す（はみ出させない） */ justify-content: center; align-items: baseline; max-width: 100%; line-height: .92; } .dyn-sign__ltr { display: inline-block; font-family: var(--dyn-disp); font-size: clamp(44px, 17vw, 96px); letter-spacing: .05em; /* 消えている管：うっすら在るけど光っていない */ color: rgba(242, 232, 213, .13); -webkit-text-stroke: 1.5px rgba(242, 232, 213, .20); transition: color .35s ease, text-shadow .35s ease, -webkit-text-stroke-color .35s ease; } .dyn-sign__ltr.is-lit { color: var(--dyn-yellow); -webkit-text-stroke-color: var(--dyn-ink); text-shadow: 0 0 10px rgba(245, 197, 49, .75), 0 0 34px rgba(245, 197, 49, .42), 0 0 70px rgba(216, 35, 42, .34); animation: dyn-sign-strike .52s linear; /* 点く瞬間だけ2回またたく */ } @keyframes dyn-sign-strike { 0% { opacity: .18; } 12% { opacity: 1; } 22% { opacity: .22; } 36% { opacity: 1; } 48% { opacity: .55; } 62% { opacity: 1; } 100% { opacity: 1; } } /* SODA STAND ＝ ターコイズの細い管。全部灯ったときに一斉に走る */ .dyn-sign__tube { margin-right: -.4em; /* 字送りの分だけ中央へ戻す */ font-family: var(--dyn-disp); font-size: clamp(12px, 3.4vw, 20px); letter-spacing: .4em; color: rgba(47, 191, 176, .22); transition: color .45s ease, text-shadow .45s ease; } .dyn-sign__tube.is-lit { color: var(--dyn-turq); text-shadow: 0 0 10px rgba(47, 191, 176, .68), 0 0 30px rgba(47, 191, 176, .38); } /* ── 誰のための何のサイトか（ここだけ地の文を許す）───── */ .dyn-sign__title { margin: clamp(2px, .8vh, 8px) 0 0; font-size: clamp(16px, 4.4vw, 25px); line-height: 1.45; color: var(--dyn-cream); } .dyn-sign__lede { display: flex; flex-direction: column; gap: 3px; max-width: 34em; font-size: clamp(11.5px, 3vw, 13.5px); line-height: 1.65; color: #C9C2B4; } /* ── 読み込みの進み ────────────────────────────────── --sign-p（JS）→ --dyn-load（worlds/dynamo.js:88）→ 0 の順に落ちる。 ★JSが1行も動かなくても、パノラマのバイト数だけで棒は伸びる */ .dyn-sign__meter { display: flex; align-items: center; gap: 10px; width: min(300px, 70vw); margin-top: clamp(2px, .8vh, 8px); opacity: 1; transition: opacity .3s ease, height .3s ease, margin .3s ease; } .dyn-sign__bar { flex: 1; height: 9px; border: 2px solid var(--dyn-ink); border-radius: 999px; background: rgba(242, 232, 213, .16); box-shadow: 3px 3px 0 rgba(22, 23, 27, .55); overflow: hidden; } .dyn-sign__bar i { display: block; height: 100%; width: calc(var(--sign-p, var(--dyn-load, 0)) * 100%); background: var(--dyn-yellow); transition: width .25s ease; } .dyn-sign__pct { min-width: 3.4em; text-align: right; font-family: var(--dyn-disp); font-size: 14px; letter-spacing: .08em; color: var(--dyn-yellow); } .dyn-sign__status { min-height: 1.4em; font-size: clamp(11px, 2.8vw, 12.5px); letter-spacing: .06em; color: #B0A99C; } /* 灯りが揃ったら、棒は用済み。畳んで OPEN に場所を譲る */ .gx-gate.dyn-sign.is-ready .dyn-sign__meter { height: 0; margin: 0; opacity: 0; overflow: hidden; } /* ── OPEN の札（＝押して入る。.gx-gate__enter を必ず持つ）── この店の「押せる＝黄色」の語彙をそのまま使う（シールも黄色、メニューも黄色）。 gx.css:334 の透明ピルを丸ごと上書きする（.dyn-sign を足して 0,2,0 で勝つ） */ .dyn-sign .gx-gate__enter { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; min-height: 52px; margin-top: clamp(2px, .8vh, 6px); padding: 10px 34px 9px; border: 3px solid var(--dyn-ink); border-radius: 16px; background: var(--dyn-yellow); color: var(--dyn-ink); letter-spacing: normal; box-shadow: 5px 5px 0 var(--dyn-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s cubic-bezier(.2, .8, .3, 1), opacity .3s ease; } /* gx.css:342 の薄い琥珀のホバーを打ち消す（0,3,0） */ .dyn-sign .gx-gate__enter:hover, .dyn-sign .gx-gate__enter:focus-visible { background: var(--dyn-yellow); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--dyn-ink); } .dyn-sign .gx-gate__enter:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--dyn-ink); } .dyn-sign__open-word { font-family: var(--dyn-disp); font-size: clamp(26px, 7vw, 36px); line-height: .92; letter-spacing: .1em; } .dyn-sign__open-note { font-family: var(--dyn-text); font-weight: 700; font-size: 12px; letter-spacing: .05em; } /* まだ絵が届いていない間。**押せなくはしない**（disabled にすると検品が止まる）。 薄くして「まだ支度中」だけ伝え、押されたらJSが受け取って届いた瞬間に開ける */ .gx-gate.dyn-sign.is-holding .gx-gate__enter { opacity: .42; } .gx-gate.dyn-sign.is-armed .gx-gate__enter { opacity: .72; } /* 灯りが揃った瞬間に跳ねて出る＝店が開く合図。 fill を付けない（forwards にすると、以後 hover の transform が効かなくなる） */ .gx-gate.dyn-sign.is-ready .gx-gate__enter { animation: dyn-sign-pop .5s cubic-bezier(.2, 1.5, .4, 1); } @keyframes dyn-sign-pop { from { transform: scale(.84) translateY(8px); } to { transform: none; } } /* ── 逃げ道（見るだけモードへ）──────────────────────── data-gx-tour は gx-hud.js:48 が拾う（配線不要）。 gx-core.js:97 も拾って幕を開けるので、押せばそのまま読み物に入る */ .dyn-sign .gx-gate__tour { min-height: 44px; padding: 6px 12px; color: #B9B2A4; font-size: 12.5px; letter-spacing: .08em; text-underline-offset: 3px; } .dyn-sign .gx-gate__tour:hover { color: var(--dyn-cream); } /* ── 幕が出ている間は、遊びの飾りを幕の上に出さない ───── .dyn-marquee(z60) と .dyn-teach(z58) は幕(z40)より前に居る。 幕が一瞬だった頃は誰も気づかなかったが、スプラッシュにすると看板の上に載る。 カウンタ(dynamo.css:1325)とメニュー(1363)は既に同じ手当てが入っている */ html.is-locked .dyn-marquee, /* ★opacity では伏せられない。`.dyn-teach.is-on` の keyframes（dyn-teach-in の to{opacity:1}）は **アニメーション由来の値**なので、通常の宣言に必ず勝つ（2026-09-01 検分の指摘）。 幕が出ている間は版面から外す＝display で消す */ html.is-locked .dyn-teach { display: none !important; } /* ── 狭い画面（390x844 実測）────────────────────────── */ @media (max-width: 700px) { .dyn-sign__board { width: min(560px, 92vw); border-radius: 18px; box-shadow: 6px 6px 0 rgba(216, 35, 42, .92), 0 18px 42px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(242, 232, 213, .16); } .dyn-sign__ltr { font-size: clamp(40px, 15vw, 64px); } .dyn-sign__lede { font-size: 12px; } .dyn-sign__floor { height: 68px; } } /* ── 背の低い画面（横向き・小さいウィンドウ）─────────── 看板が縦に伸びて OPEN が画面の外に出るのを防ぐ。削るのは説明の2行目ではなく余白と字の大きさ */ @media (max-height: 620px) { .dyn-sign__board { gap: 6px; padding: 12px 16px 14px; } .dyn-sign__ltr { font-size: clamp(34px, 11vh, 58px); } .dyn-sign__title { font-size: clamp(15px, 3.4vh, 19px); } .dyn-sign__lede { font-size: 11.5px; line-height: 1.5; } .dyn-sign__floor { display: none; } } /* ── 動きを減らす設定への逃げ道 ────────────────────── この設定では gx-tier.js が TIER=0 にし、gx-core.js:37 の staticMode() が幕ごと外す。 ＝実際にはここへ来ないが、**逃げ道は必ず書く**（判定が変わっても看板が点滅しない） */ @media (prefers-reduced-motion: reduce) { .dyn-sign__rays { animation: none; } .dyn-sign__ltr, .dyn-sign__tube, .dyn-sign__bar i, .dyn-sign__meter, .dyn-sign .gx-gate__enter { transition: none !important; animation: none !important; } .gx-gate.dyn-sign.is-ready .gx-gate__enter { animation: none !important; } } /* ========================================================== スプラッシュの地色を、店の赤へ（2026-09-01） ========================================================== 内田の言葉は「ポップな感じで」。看板が灯る筋は良いが、地が黒に寄っていて サイトの他の部品（黄色いシール／クリームの札／赤い吹き出し）から浮いていた。 地をチェリーにし、斜光をクリームにすると、同じ店の入口に見える。 看板の板は暗いまま残す＝ネオンが光って見えるのは、暗い板の上だけなので。 */ .gx-gate.dyn-sign::before { background: radial-gradient(120% 90% at 50% 4%, rgba(245, 197, 49, .30), transparent 56%), linear-gradient(180deg, #E23A34 0%, #C11C24 58%, #8E1219 100%); } .gx-gate.dyn-sign::after { background: radial-gradient(120% 95% at 50% 46%, rgba(90, 8, 12, .00), rgba(90, 8, 12, .42) 84%); } .dyn-sign__rays { background: repeating-conic-gradient(from 0deg, rgba(242, 232, 213, .17) 0deg 6deg, transparent 6deg 13deg); } /* 板の縁をクリームにして、赤地から切り離す */ .dyn-sign__board { border-color: var(--dyn-cream); box-shadow: 9px 9px 0 rgba(22, 23, 27, .92), 0 26px 60px rgba(60, 4, 8, .45); } /* 床の市松は、赤地の上ではクリーム×インクのままで十分に効く */ /* ========================================================== HUD の2つのボタンも、他の部品と同じ語彙にする（2026-09-01） ========================================================== 内田「ボタンがダサすぎ、デザインにあってない」。 「次へ進む」「ぜんぶ読む」は下線つきの素の文字のままで、3Dの上では読めなかった （実測：ぜんぶ読む＝AA未満 73.6%／中央値 3.35）。 目立たせすぎず、しかし必ず読めるように、暗い座布団＋クリームの縁の小さな札にする。 */ .has-3d:not(.is-tour) .gx-hud__skip, .has-3d:not(.is-tour) .gx-hud__tour { padding: 8px 15px 7px; border: 2px solid rgba(242, 232, 213, .55); border-radius: 999px; background: rgba(18, 19, 23, .86); color: var(--dyn-cream); font-family: var(--dyn-text); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-decoration: none; box-shadow: 0 3px 12px rgba(0, 0, 0, .4); } .has-3d:not(.is-tour) .gx-hud__skip:hover, .has-3d:not(.is-tour) .gx-hud__skip:focus-visible, .has-3d:not(.is-tour) .gx-hud__tour:hover, .has-3d:not(.is-tour) .gx-hud__tour:focus-visible { background: var(--dyn-yellow); border-color: var(--dyn-ink); color: var(--dyn-ink); } /* ========================================================== 2026-09-01 内田の指摘 ── 言葉をやめて、矢印で見せる ========================================================== 「済とかはいらなくて」「押したまま左右に動かす、というのも不要」 「ただ矢印で表現して視覚的にわかりやすく」 */ /* ① 見つけた印から「済」の字を外す。 色（黄→くすんだクリーム）と縮み（.82）だけで「済んだ」を出す。 番号は残す＝どれを見つけたかが分かる */ .gx-hotspot.is-pinned.is-found:not([data-marker="drag"])::before { content: attr(data-dyn-no); font-family: var(--dyn-disp); font-size: calc(var(--dyn-badge) * .46); } /* ② 見回し方の言葉をやめて、**矢印だけ**にする。 いままでの2行（どうやって始める？／押したまま、左右に動かす）は版面から外し、 左右に往復する矢印の帯に置き換える。文字を1つも使わない。 */ .dyn-teach__small, .dyn-teach__big { display: none !important; } .dyn-teach { padding: 0; border: 0; background: none; box-shadow: none; } .dyn-teach::before { content: ''; display: block; width: 132px; height: 34px; /* 左右の矢羽根を2つ。SVGなので、どの端末でも同じ形になる */ background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 34'%3E%3Cg fill='none' stroke='%23F2E8D5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 8 L12 17 L26 26'/%3E%3Cpath d='M106 8 L120 17 L106 26'/%3E%3C/g%3E%3Cg fill='none' stroke='%2316171B' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' opacity='.35'%3E%3Cpath d='M26 8 L12 17 L26 26'/%3E%3Cpath d='M106 8 L120 17 L106 26'/%3E%3C/g%3E%3Ccircle cx='66' cy='17' r='11' fill='%23F5C531' stroke='%2316171B' stroke-width='3'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); animation: dyn-teach-swing 1.9s ease-in-out infinite; } /* 黄色い丸（＝指）が左右に往復する。矢羽根は動かさない＝どっちへ動かすかが伝わる */ @keyframes dyn-teach-swing { 0%, 100% { transform: translateX(-13px); } 50% { transform: translateX(13px); } } @media (prefers-reduced-motion: reduce) { .dyn-teach::before { animation: none; } } @media (max-width: 700px) { .dyn-teach { bottom: 52px; } .dyn-teach::before { width: 116px; height: 30px; } } /* ========================================================== 2026-09-01 内田「注ぐのところがバグってます」への直し ========================================================== 症状：帯が**灰色の空箱**に見えていた。 原因：空の部分を rgba(242,232,213,.20) にしていたため、絵の上では くすんだ半透明の板になり、しかも親に濃い drop-shadow を5枚積んでいたので 「壊れた黒い箱」に見えた。満ちる前は何も起きていないように見える。 直し：クリームの実体のある樋（とい）にして、チェリーのソーダが左から満ちる。 中に矢羽根を流して「横になぞる」を**文字なしで**言う。 */ .gx-hotspot.is-pinned[data-marker="drag"] { /* 親の濃い影を薄くする。樋そのものが実体を持つので、影で存在を作らなくていい */ filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); } .gx-hotspot.is-pinned[data-marker="drag"]::before { width: 208px; height: 46px; border: 3px solid var(--dyn-ink); border-radius: 999px; /* ①流れる矢羽根（横になぞる合図）②満ちたぶんのソーダ ③空の樋 の3層。 ①はマスクを使わず、背景の重ね順だけで作る（対応環境を狭めない） */ background-image: repeating-linear-gradient(115deg, rgba(22, 23, 27, .16) 0 10px, rgba(22, 23, 27, 0) 10px 26px), linear-gradient(90deg, var(--dyn-cherry) calc(var(--q, 0) * 100%), rgba(0, 0, 0, 0) calc(var(--q, 0) * 100%)), linear-gradient(180deg, #FFFBF2 0%, var(--dyn-cream) 100%); background-size: 200% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 0 0; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(22, 23, 27, .10); animation: dyn-pour-flow 1.5s linear infinite; } /* 矢羽根だけが流れる（満ちたソーダと樋は動かない） */ @keyframes dyn-pour-flow { to { background-position: -200% 0, 0 0, 0 0; } } /* 満ちたら流れを止めて、金色の縁で「終わった」と言う */ .gx-hotspot.is-pinned.is-found[data-marker="drag"]::before, .gx-hotspot.is-pinned[data-marker="drag"][style*="--q: 1"]::before { animation: none; } /* 札は「注ぐ」だけにする。矢印は帯の中が言っているので二重にしない */ .gx-hotspot.is-pinned[data-marker="drag"]::after { content: attr(data-label); background: var(--dyn-ink); color: var(--dyn-cream); border: 2px solid var(--dyn-cream); font-family: var(--dyn-text); font-weight: 700; font-size: 13px; letter-spacing: .10em; padding: 0 12px; height: 26px; display: grid; place-items: center; white-space: nowrap; max-width: none; } @media (prefers-reduced-motion: reduce) { .gx-hotspot.is-pinned[data-marker="drag"]::before { animation: none; } } @media (max-width: 700px) { .gx-hotspot.is-pinned[data-marker="drag"]::before { width: 176px; height: 42px; } } /* ========================================================== 2026-09-01 内田「押せる場所を全部見せる／クリックしたら開けるように」 ========================================================== カメラの後ろにある印も消さず、画面の端に寄せて出す（gx-marker.js）。 そのまま押せば語りが開く。振り向かないと存在に気づけない、をやめる。 端の印は「あちら側にある」と分かるように、外向きの矢羽根を添えて少し小さくする。 */ .gx-hotspot.is-pinned.is-edge { --dyn-badge-k: .84; } .gx-hotspot.is-pinned.is-edge::after { position: relative; } /* 札の外側に矢羽根。左端の印は左を、右端の印は右を指す */ .gx-hotspot.is-pinned.is-edge[data-edge="left"]::after { content: attr(data-label); } .gx-hotspot.is-pinned.is-edge[data-edge="right"]::after { content: attr(data-label); } /* 端にいることが分かるように、輪をゆっくり呼吸させる（動きを減らす設定では止める） */ .gx-hotspot.is-pinned.is-edge::before { animation: dyn-edge-beat 2.4s ease-in-out infinite; } @keyframes dyn-edge-beat { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.06) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .gx-hotspot.is-pinned.is-edge::before { animation: none; } } /* ========================================================== 窓が出る場所を、常に空けておく（2026-09-01） ========================================================== `gx.css` の窓は `inset: auto 3vw 12vh auto; width: min(400px,88vw); max-height:62svh`。 狭い画面（640px以下）では下からの帯（`inset: auto 0 0 0; max-height:46svh`）。 その footprint と同じ矩形を、見えない枠として置いておく。 opacity:0 なので絵には出ないが、`checkVisibility()` は true を返すので gx-marker の「よけ先」には入る（display:none にすると外れてしまう）。 */ .dyn-docslot { position: fixed; inset: auto 3vw 12vh auto; width: min(400px, 88vw); height: 62svh; opacity: 0; pointer-events: none; z-index: -1; } html.no-3d .dyn-docslot, html.is-tour .dyn-docslot { display: none; } @media (max-width: 640px) { .dyn-docslot { inset: auto 0 0 0; width: auto; height: 46svh; } } /* ========================================================== 2026-09-01 内田「注ぐとき、左右になぞれません」への根治 ========================================================== 原因：印は `pointer-events: none`（透明な箱が他のボタンを飲むのを防ぐため）で、 受けているのは疑似要素だけ。押した瞬間は疑似要素に当たるので pointerdown は入るが、 **`setPointerCapture` は pointer-events:none の要素では取りこぼす**ことがある。 その場合、指が帯から出た瞬間に pointermove が届かなくなり「なぞれない」。 なぞる帯は**帯そのものが実体**なので、透明な箱で他を邪魔する心配がない。 ここだけ素直に要素で受ける。 */ .gx-hotspot.is-pinned[data-marker="drag"] { pointer-events: auto; touch-action: none; /* なぞりでページが動かないように（JS側でも設定済み） */ cursor: ew-resize; } /* ========================================================== 窓をクリームの紙にする＋戻るボタン（2026-09-01） ========================================================== */ /* ========================================================== 2026-09-01 内田「添付のポップアップ形式で、読みやすくして」「戻るボタンも設置」 窓（gx-modal）＝クリームの紙のカードに作り替える ========================================================== 【何をしたか】 いままでの窓は「赤いカード＋左端の市松＋丸い×」だった。 手本にするのは #about（.gx-station[data-reading] .dyn-read）のクリームの紙。 順番も同じにする： 上端の三色帯 → チェリーの丸いピル（白字の小見出し）→ 黒い大見出し → 赤い縦罫＋英字の小見出し＋赤い日本語見出し → 黒い本文 → 戻る 読む場所が2つ（紙と窓）あって別々の顔をしているのが、いちばん読みづらい原因だった。 同じ顔にすれば、どちらも「読むところ」だと一目で分かる。 【触っていないもの】 ・gx-modal.js は1行も変更しない。あちらが作る dialog.gx-modal ＞ .gx-modal__head（.gx-modal__title ＋ .gx-modal__close） ＞ .gx-modal__body という骨格に、色と形だけ着せ直している。 ・幾何（どこに出るか・どこまで大きいか）は既存のまま。 PC の小さい窓＝右下／PC の大きいカード＝中央／スマホ＝下から出る帯。 .dyn-docslot（印のよけ先として版面を占有している空枠）が 62svh／46svh でそのまま効くように、上限の高さを1pxも増やしていない。 【入れる場所】assets/css/dynamo.css の末尾。 ここで上書きする既存の規則は全部これより前にあり、詳細度は同点以上にしてある： .gx-modal / .gx-modal::before / .gx-modal__head::before / .gx-modal__title / .gx-modal__body / .gx-modal__body p / .gx-modal__close / html.gx-doc-big の各種 同点のものは「後に書いたほうが勝つ」で確実に当たる（末尾に置く理由はこれ）。 【コントラスト比（相対輝度から自分で計算し直した値）】 クリーム #F2E8D5 L=0.81395 ／ ink #16171B L=0.00862 ／ 黄 #F5C531 L=0.59567 ターコイズ #2FBFB0 L=0.41001 ／ チェリー #D8232A L=0.15968 本文・大見出し ink on クリーム …… 14.74 : 1 ピルの文字 #FFF8EE on チェリー …… 4.75 : 1（小さい文字なので4.5必須。クリームだと4.12で落ちる） 赤い小見出し #B31C22 on クリーム …… 5.56 : 1（免除に頼らず小文字基準を素で満たす） 英字の小札 #12655C on クリーム …… 5.68 : 1 戻るボタン ink on 黄 …… 11.01 : 1 丸い× ink on ターコイズ …… 7.85 : 1 ========================================================== */ /* ── 紙そのもの ────────────────────────────────────────── 赤 → クリーム。市松の帯を捨てたので左の余白も普通に戻す。 縁は box-shadow の ink 3px（mobile で gx.css が border-width を触るため、 枠を border で持たないのは既存の作りをそのまま踏襲）。 チェリーのベタ影は #about の紙と同じ「10px 10px 0」。 */ .gx-modal { --dyn-doc-r: 22px; background: var(--dyn-cream); color: var(--dyn-ink); padding: 26px 26px 18px; /* 左の市松ぶんの余白（calc）を解く */ box-shadow: 0 0 0 3px var(--dyn-ink), 10px 10px 0 rgba(216, 35, 42, .92), 0 24px 56px rgba(0, 0, 0, .50); } /* ── 上端の三色帯（赤・黄・ターコイズ）────────────────── 市松だった ::before を、そのまま帯に作り替える（新しい要素は足さない）。 left/right/bottom を明示して、前の「左端に縦の帯」の指定を全部打ち消す。 縁は border ではなく影なので、top:0 が紙の実際の上端＝帯が額の中に入らない。 */ .gx-modal::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 12px; border-radius: var(--dyn-doc-r) var(--dyn-doc-r) 0 0; background-color: var(--dyn-cherry); background-image: linear-gradient( 90deg, var(--dyn-cherry) 0 34%, var(--dyn-yellow) 34% 62%, var(--dyn-turq) 62% 100% ); background-size: auto; box-shadow: none; /* 市松のときの内側の線を消す */ } /* ── チェリーの丸いピル（白字の小見出し）──────────────── #about の .gx-meta（札）と同じ役目。CSS の content で出すので、 h1〜h3・p・li は1つも増えない＝ qa_play の文字重なり検査に当事者を持ち込まない。 小さい窓（見つけたときの語り）の既定は「見つけたもの」。 */ .gx-modal__head::before { content: "見つけたもの"; display: inline-block; margin: 0 0 .5em; padding: 6px 15px 5px; background: var(--dyn-cherry); border: 2px solid var(--dyn-ink); border-radius: 999px; color: #FFF8EE; /* チェリー地で 4.75:1 */ font-family: var(--dyn-disp); font-size: .84rem; font-weight: 400; letter-spacing: .1em; line-height: 1.45; text-transform: none; } /* 「くわしく」の大きいカードは、駅の名前をそのまま札にする。 前の版はここが clamp(30px,4.6vw,54px) の巨大な英字だった。打ち消す指定を全部書く。 */ html.gx-doc-big .gx-modal__head::before { content: "ダイナモのこと"; display: inline-block; font-family: var(--dyn-disp); font-size: .9rem; font-weight: 400; line-height: 1.45; letter-spacing: .1em; color: #FFF8EE; text-transform: none; } html.gx-doc-big.doc-stand .gx-modal__head::before { content: "01 ／ 店内"; } html.gx-doc-big.doc-garage .gx-modal__head::before { content: "02 ／ 仕込み場"; } html.gx-doc-big.doc-closing .gx-modal__head::before { content: "03 ／ 注ぐ"; } /* ── 黒い大見出し（gx-modal.js が入れる title）────────── 赤地の白 → クリーム地の ink。書体も Bebas 系から和文の太字（Zen Kaku）へ。 ★display は書かない。title が空のとき gx-modal.js:47 が付ける [hidden] を殺さないため。 */ .gx-modal__title { color: var(--dyn-ink); font-family: var(--dyn-text); font-weight: 700; font-size: clamp(1.2rem, 3.2vw, 1.7rem); letter-spacing: .01em; line-height: 1.45; } html.gx-doc-big .gx-modal__title { margin-top: 0; } /* 前の版の .34em を戻す */ /* ── 本文の器 ────────────────────────────────────────── */ .gx-modal__body { margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(22, 23, 27, .26); /* クリーム地に合う破線 */ scrollbar-color: var(--dyn-cherry) rgba(22, 23, 27, .12); } .gx-modal__body::-webkit-scrollbar-track { background: rgba(22, 23, 27, .12); } .gx-modal__body::-webkit-scrollbar-thumb { background: var(--dyn-cherry); } /* 本文の字。白 → ink。行間は #about の紙と同じ 1.95 で揃える */ .gx-modal__body p { color: var(--dyn-ink); font-weight: 400; font-size: clamp(.95rem, 2.2vw, 1.02rem); line-height: 1.95; word-break: auto-phrase; text-wrap: pretty; } .gx-modal__body strong { color: var(--dyn-ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(245, 197, 49, .62) 62%); } /* ── 赤い縦罫＋英字の小見出し＋赤い日本語見出し ───────── #about の h3[data-en] と同じ形。窓の中では **「くわしく」の #doc-* だけ**がこの h3 を持つ（後述の risks を参照）。 見つけたときの語り（#rv-*）は
1つのままにする。 */ .gx-modal__body h3 { margin: 1.6em 0 .5em; padding-left: .72em; border-left: 6px solid var(--dyn-cherry); font-family: var(--dyn-text); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.22rem); letter-spacing: .02em; line-height: 1.55; color: #B31C22; /* 対クリーム 5.56:1 */ } .gx-modal__body > h3:first-child { margin-top: .15em; } .gx-modal__body h3[data-en]::before { content: attr(data-en); display: block; margin-bottom: .28em; font-family: var(--dyn-disp); font-size: .76rem; font-weight: 400; letter-spacing: .2em; line-height: 1.2; color: #12655C; /* 対クリーム 5.68:1 */ } /* ── 丸い× ────────────────────────────────────────── 位置と大きさは既存のまま。輪だけクリーム → ink にして、クリームの紙から切り離す。 ×は ink、地はターコイズ（7.85:1）。「戻る」ができたので、こちらは補助の役に降ろす。 */ .gx-modal__close { border-color: var(--dyn-ink); background: var(--dyn-turq); color: var(--dyn-ink); box-shadow: 0 4px 0 rgba(22, 23, 27, .55), 0 8px 20px rgba(0, 0, 0, .30); } .gx-modal__close:hover, .gx-modal__close:focus-visible { background: var(--dyn-yellow); /* ink×黄＝11.01:1 */ color: var(--dyn-ink); } .gx-modal__close:focus-visible { outline: 3px solid var(--dyn-ink); outline-offset: 3px; } /* 前の版が本文の末尾に出していた「外を押すと閉じます」は、 下に本物の「戻る」ボタンが立つので消す（同じことを二度言わない）。 */ html.gx-doc-big .gx-modal__body::after { content: none; } /* ── 戻る（窓の下の帯）──────────────────────────────── DOM は dyn-extras.js が1回だけ足す（div ＞ button ＞ span×2）。 h1〜h3・p・li を使っていないので、文字重なり検査の当事者は増えない。 flex:none なので、本文が長くても必ず見えるところに残る。 */ .dyn-docback { flex: none; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(22, 23, 27, .26); } .dyn-docback__btn { display: inline-flex; align-items: center; gap: .5em; max-width: 100%; min-height: 46px; padding: 10px 22px 10px 18px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-yellow); color: var(--dyn-ink); /* ink×黄＝11.01:1 */ font-family: var(--dyn-text); font-weight: 700; font-size: 1rem; letter-spacing: .08em; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 rgba(22, 23, 27, .62); transition: transform .14s cubic-bezier(.2,.7,.3,1), background-color .14s ease, box-shadow .14s ease; } .dyn-docback__btn:hover, .dyn-docback__btn:focus-visible { background: var(--dyn-cream); /* ink×クリーム＝14.74:1 */ transform: translateY(-2px); box-shadow: 0 6px 0 rgba(22, 23, 27, .62); } .dyn-docback__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(22, 23, 27, .62); } .dyn-docback__btn:focus-visible { outline: 3px solid var(--dyn-ink); outline-offset: 3px; } .dyn-docback__arrow { font-size: 1.15em; line-height: 1; } /* ── 狭い画面（下から出る帯のまま。三色帯と戻るは残す）── ★この節より前にある @media (max-width:640px) の .gx-modal 規則（padding・影・角丸）を 打ち消すため、同じ幅の問い合わせをここでもう一度書く。順番で勝たせる。 */ @media (max-width: 640px) { .gx-modal { --dyn-doc-r: 20px; padding: 22px 18px 14px; /* 下から生える帯なので、チェリーのベタ影は画面外に落ちるだけ。付けない */ box-shadow: 0 0 0 3px var(--dyn-ink), 0 -14px 44px rgba(0, 0, 0, .55); } .gx-modal::before { border-radius: var(--dyn-doc-r) var(--dyn-doc-r) 0 0; height: 10px; } .gx-modal__head::before { font-size: .8rem; padding: 5px 13px 4px; } html.gx-doc-big .gx-modal__head::before { font-size: .84rem; } .gx-modal__title { font-size: clamp(1.15rem, 5vw, 1.4rem); } .gx-modal__body h3 { font-size: 1.08rem; margin-top: 1.4em; } .gx-modal__body h3[data-en]::before { font-size: .72rem; } /* 親指で押しやすいよう、戻るは幅いっぱいの1本にする */ .dyn-docback { margin-top: 12px; padding-top: 10px; } .dyn-docback__btn { width: 100%; justify-content: center; padding: 12px 18px; } } /* ── 動きの逃げ道 ─────────────────────────────────── この節が持つ動きは戻るボタンの transform／背景色の遷移だけ。 gx.css:441 が *, *::before, *::after へ !important で同じことを当てているので二重の保険だが、 「この部品の動きはここで止まる」を1か所で読めるように明示して残す。 止めても押せなくならない（見た目が即時に切り替わるだけ）。 */ @media (prefers-reduced-motion: reduce) { .dyn-docback__btn { transition: none; } .dyn-docback__btn:hover, .dyn-docback__btn:focus-visible, .dyn-docback__btn:active { transform: none; } } /* 窓の中の「箱を選ぶ」＝オンラインSHOPへの入口（2026-09-01） 遊ぶ画面に売り込みを出さず、押したときの窓の中だけに置く。 */ .dyn-goshop { margin-top: 1.1em !important; } .gx-modal__body .dyn-shoplink, .dyn-goshop .dyn-shoplink { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px 10px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-yellow); color: var(--dyn-ink); font-family: var(--dyn-text); font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-decoration: none; box-shadow: 4px 4px 0 #B31C22; } .gx-modal__body .dyn-shoplink::after { content: '→'; font-family: var(--dyn-disp); } .gx-modal__body .dyn-shoplink:hover, .gx-modal__body .dyn-shoplink:focus-visible { background: #B31C22; color: #FFF8EE; border-color: var(--dyn-ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dyn-ink); } @media (prefers-reduced-motion: reduce) { .dyn-shoplink { transition: none; } } /* ========================================================== 2026-09-01 内田「常に左上にロゴ／右上のメニューも常時表示」 ========================================================== */ /* メニューは幕の上にも出す。z-index は幕（gx.css の .gx-gate は z-index:90 台）より上へ */ html.is-locked .dyn-menu__btn { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 120; } html.is-locked .gx-logo { z-index: 120; } /* ロゴは「入口にもどる」ボタン。押すと店内の最初の画面へ戻る。 幕が出ている間は押しても意味がないので、そのときだけ押せなくする */ html.is-locked .gx-logo { pointer-events: none; } /* 「いまの続きへ」＝見に戻っているときだけ出る札（2026-09-01） */ .dyn-resume { position: fixed; right: 20px; bottom: 96px; z-index: 60; min-height: 44px; margin: 0; padding: 10px 20px 9px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-yellow); color: var(--dyn-ink); font-family: var(--dyn-text); font-weight: 700; font-size: .92rem; letter-spacing: .04em; box-shadow: 4px 4px 0 #B31C22; cursor: pointer; } .dyn-resume::after { content: ' →'; font-family: var(--dyn-disp); } .dyn-resume:hover, .dyn-resume:focus-visible { background: #B31C22; color: #FFF8EE; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dyn-ink); } .dyn-resume[hidden] { display: none; } html.no-3d .dyn-resume, html.is-tour .dyn-resume { display: none !important; } /* 狭い画面では読む札（bottom:86px、高さ約50px）と上下に分けて押せるようにする。 */ @media (max-width: 700px) { .dyn-resume { right: 14px; bottom: 150px; font-size: .86rem; } } @media (prefers-reduced-motion: reduce) { .dyn-resume { transition: none; } } /* ========================================================== 2026-09-01 ── コンプリート表記をやめる／フッターを枠に入れる ========================================================== 内田「コンプリート！ありがとうございましたは不要」。 gx-state.js:258 が全クリアで objective に 'コンプリート！' を返すので、 出す側（HUDの目標文）を伏せる。JSは触らない。 */ .has-3d:not(.is-tour) .gx-hud__objective { display: none !important; } /* ── フッターを別枠の四角いカードに（読みやすく）── */ .gx-footer { padding: 6svh 5vw 8svh; } .dyn-footcard { max-width: 42rem; margin: 0 auto; padding: 26px 28px 24px; border: 3px solid var(--dyn-ink); border-radius: 18px; background: var(--dyn-cream); box-shadow: 7px 7px 0 #B31C22; text-align: center; } .dyn-footcard .dyn-foot { margin: 0 0 .5em; font-family: var(--dyn-text); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: .06em; color: var(--dyn-ink); } .dyn-footcard .dyn-footline { margin: 0 0 1.1em; padding-bottom: 1em; border-bottom: 2px dashed rgba(22, 23, 27, .28); font-size: .95rem; line-height: 1.9; color: #3A3B42; } .dyn-footcard .gx-meta { margin: 0; font-family: var(--dyn-text); font-size: .82rem; line-height: 1.8; letter-spacing: .02em; color: #4A4B52; } @media (max-width: 700px) { .dyn-footcard { padding: 20px 18px 18px; border-radius: 14px; box-shadow: 5px 5px 0 #B31C22; } } /* ── メニューの「オンラインSHOP」行は、買う場所なので目立たせる ── */ .dyn-menu__item--shop { background: var(--dyn-yellow); } .dyn-menu__item--shop .dyn-menu__no { font-size: 15px; letter-spacing: .10em; color: #B31C22; } .dyn-menu__item--shop:hover, .dyn-menu__item--shop:focus-visible { background: #B31C22; color: #FFF8EE; } .dyn-menu__item--shop:hover .dyn-menu__no, .dyn-menu__item--shop:focus-visible .dyn-menu__no { color: var(--dyn-yellow); } /* ========================================================== 2026-09-01 内田「ロゴは、添付のような画面スタート時のものに差し替えて」 ========================================================== 幕（スプラッシュ）のネオン看板と同じ顔にする。 ・EST. 1954 ／ CRAFT SODA（黄・小さく） ・DYNAMO（黄のネオン・Bebas） ・SODA STAND（ターコイズのネオン） 稲妻のしるしは添付に無いので出さない。押すと入口へ戻る（動きは dyn-extras.js）。 */ .has-3d .gx-logo, /* ★2026-09-01 内田「左上のロゴをもっとかっこよくポップにして」 ネオンの顔（DYNAMO／SODA STAND）は残したまま、この案件の語彙を足す： ・太いインクの縁 ・ぼかさないチェリーの影 ・下端の三色帯 ・びんのラベルと同じ「黄色いまるの中の稲妻」 押した感じも、他のポップな部品と同じように動かす（浮く→沈む）。 */ .gx-logo { top: 14px; left: 14px; display: flex; align-items: center; gap: 11px; padding: 8px 17px 11px 9px; border: 3px solid var(--dyn-ink); border-radius: 17px; background: linear-gradient(180deg, #262832 0%, #121317 100%); /* 内側のクリームの細線＝暗い部屋でも縁が沈まないための保険 */ box-shadow: inset 0 0 0 1px rgba(242, 232, 213, .22), 5px 5px 0 var(--dyn-cherry), 0 14px 30px rgba(0, 0, 0, .52); filter: none; text-align: left; transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s cubic-bezier(.2,.8,.3,1); } /* 下端の三色帯。紙のカードと同じ合図で「同じ店のもの」とつなぐ */ .gx-logo::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 5px; border-radius: 0 0 11px 11px; background: linear-gradient(90deg, var(--dyn-cherry) 0 34%, var(--dyn-yellow) 34% 62%, var(--dyn-turq) 62% 100%); } .gx-logo:hover, .gx-logo:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--dyn-cherry), 0 18px 34px rgba(0, 0, 0, .55); } .gx-logo:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dyn-cherry), 0 8px 18px rgba(0, 0, 0, .5); } /* びんのラベルと同じしるし：黄色いまるの中に、インクの稲妻 */ .gx-logo__mark { display: block; width: 34px; height: 34px; flex: none; } .gx-logo__ring { fill: var(--dyn-yellow); stroke: var(--dyn-ink); stroke-width: 3; } .gx-logo__bolt { fill: var(--dyn-ink); } .gx-logo__bowl { display: none; } .gx-logo__text { display: block; } /* EST. 1954 ／ CRAFT SODA */ .gx-logo__text::before { content: 'EST. 1954 ／ CRAFT SODA'; display: block; margin-bottom: 1px; font-family: var(--dyn-disp); font-size: 9.5px; letter-spacing: .18em; color: var(--dyn-yellow); text-shadow: 0 0 7px rgba(245, 197, 49, .55); } .gx-logo__name { display: block; font-family: var(--dyn-disp); font-size: 25px; letter-spacing: .05em; line-height: 1; color: var(--dyn-yellow); text-shadow: 0 0 3px rgba(255, 240, 190, .95), 0 0 12px rgba(245, 197, 49, .75), 0 0 26px rgba(245, 197, 49, .40); } .gx-logo__sub { display: block; margin-top: 2px; font-family: var(--dyn-disp); font-size: 11px; letter-spacing: .30em; line-height: 1; color: var(--dyn-turq); text-shadow: 0 0 8px rgba(47, 191, 176, .70), 0 0 18px rgba(47, 191, 176, .38); } .gx-logo:hover .gx-logo__name, .gx-logo:focus-visible .gx-logo__name { text-shadow: 0 0 4px rgba(255, 250, 225, 1), 0 0 16px rgba(245, 197, 49, .95), 0 0 34px rgba(245, 197, 49, .55); } @media (max-width: 700px) { .gx-logo { padding: 6px 12px 9px 7px; gap: 8px; border-radius: 14px; box-shadow: 4px 4px 0 var(--dyn-cherry), 0 10px 22px rgba(0,0,0,.5); } .gx-logo::after { border-radius: 0 0 9px 9px; height: 4px; } .gx-logo__mark { width: 27px; height: 27px; } .gx-logo__text::before { font-size: 8px; letter-spacing: .14em; } .gx-logo__name { font-size: 20px; } .gx-logo__sub { font-size: 9px; letter-spacing: .24em; } } /* ============================================================ ポップアップの中に置く商品写真（ソーダの種類）。 窓はクリームの紙なので、写真も同じ語彙（太いインクの縁＋硬いチェリーの影）で 囲って浮かせる。窓の横幅いっぱいに敷き、上の破線からわずかに離す。 ============================================================ */ .gx-modal__body .dyn-revimg { display: block; width: 100%; /* ★商品の写真は**全体を見せる**（2026-09-01 内田「画像が細長くて全体が分からない」）。 元画像は 3:2（900x600）なので、比率どおりに置けば1ミリも切れない。 縦が足りなくなるぶんは、語りの側に data-gx-tall を付けて窓の背を高くして受ける。 ※以前は clamp(104px,19vh,176px) の帯に切っていた。びんの下半分が消えていた。 */ height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: .2em 0 .8em; border: 3px solid var(--dyn-ink); border-radius: 12px; box-shadow: 5px 5px 0 rgba(216, 35, 42, .92); } /* 携帯は窓の高さが 200px 前後しかない。帯をさらに詰めて、本文を窓の中に収める */ @media (max-width: 700px) { .gx-modal__body .dyn-revimg { height: 104px; margin-bottom: .7em; } } /* ============================================================ 引き出しメニューが画面に入り切らないとき（背の低い画面）。 器は画面いっぱいまで伸ばしたうえで、それでも溢れるときは 「続きがある」と分かる手がかりを出す。切れた字だけが見えるのは事故に見える。 ============================================================ */ html.has-js:not(.no-3d):not(.is-tour) .dyn-menu { scrollbar-width: thin; scrollbar-color: var(--dyn-cherry) rgba(22, 23, 27, .12); /* 下端をクリームへ溶かす。器そのものに掛けるので、中身が何行でも効く */ -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.15) 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.15) 100%); } /* 溢れていないときは溶かさない（最後の行が薄くなるのは、ただの劣化） */ html.has-js:not(.no-3d):not(.is-tour) .dyn-menu.is-fit { -webkit-mask-image: none; mask-image: none; } .dyn-menu::-webkit-scrollbar { width: 8px; } .dyn-menu::-webkit-scrollbar-track { background: rgba(22, 23, 27, .12); border-radius: 999px; } .dyn-menu::-webkit-scrollbar-thumb { background: var(--dyn-cherry); border-radius: 999px; } /* 人物の写真は、顔が切れないように上寄りで抜く（商品の帯は 50% 40%）。 話が長いぶん帯は少し低く。窓の本文はスクロールできるので、続きがあることは 下端のぼかしとスクロールバーで知らせる（下の .gx-modal__body の規則） */ /* ★人物も全体を見せる（2026-09-01 内田「作った人の画像も横長なのでちゃんと見せて」）。 帯に切ると、その人が何をしている場面なのかが消える。写真は 3:2 なので比率どおりで切れない。 そのぶん話の分量を詰めて、窓の中に収める。 */ .gx-modal__body .dyn-revimg--person { aspect-ratio: 3 / 2; height: auto; object-position: 50% 50%; /* 話が2段落あるぶん、写真は少しだけ細くして窓に収める。 切るのではなく縮めるので、写っているものは全部見える */ width: 88%; margin-inline: auto; } /* 窓の本文が入り切らないとき、下端をクリームへ溶かして「続きがある」と知らせる。 引き出しメニューと同じ作法（切れた字だけが見えるのは事故に見える）。 溢れていないときは JS が .is-fit を付けるので溶かさない */ .gx-modal__body { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.18) 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.18) 100%); } .gx-modal__body.is-fit { -webkit-mask-image: none; mask-image: none; } /* 写真つきの長い語り（三代目の話）は、窓の背だけ高くする。 中央の大きいカード（gx-doc-big）にはしない＝あちらは膜で背後を殺すので、 遊びの途中に開くと次の印が押せなくなる。ここは高さだけの話。 */ html.gx-doc-tall .gx-modal { /* ★上端は必ずヘッダーの下で止める。88svh まで伸ばしたら窓の上が MENU まで届き、 閉じる×(1178,18-1232,72) が MENU ボタン(1143,16-1264,68) の下敷きになって 押せなくなった（elementFromPoint が dyn-menu__word を返した・2026-09-01 実測）。 高さで足りないぶんは幅で稼ぐ＝1行に入る字数を増やして行数を減らす。 */ max-height: min(760px, calc(100svh - 176px)); width: min(460px, 92vw); } /* ============================================================ スクロールで出てくる説明（#about）に置く写真。 紙（クリーム）の上なので、3Dの上の印と同じ語彙で囲む ＝太いインクの縁＋チェリーのベタ影。切らずに全体を見せる。 ============================================================ */ .dyn-read .dyn-fig { margin: 1.6em 0 2em; } .dyn-read .dyn-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--dyn-ink); border-radius: 14px; box-shadow: 6px 6px 0 rgba(216, 35, 42, .92); } .dyn-read .dyn-fig figcaption { margin-top: .8em; font-size: .9rem; line-height: 1.8; color: var(--dyn-ink); opacity: .82; } /* 飲む場面の3枚組。狭い画面では1列に落とす */ .dyn-read .dyn-scenes { display: grid; gap: clamp(16px, 2.4vw, 24px); margin: 1.5em 0 2em; padding: 0; list-style: none; /* 読み物の段は 620px 前後なので 215px では2列にしか割れず、3枚目だけ次の行に落ちる。 180px なら 3列そろう（180x3 + すきま2つ = 580 ≤ 620）。狭い画面では1列に落ちる */ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .dyn-read .dyn-scenes li { margin: 0; } .dyn-read .dyn-scenes img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--dyn-ink); border-radius: 12px; box-shadow: 5px 5px 0 rgba(216, 35, 42, .92); } .dyn-read .dyn-scenes b { display: block; margin: .9em 0 .25em; font-size: 1rem; color: var(--dyn-cherry-ink, #B31C22); } .dyn-read .dyn-scenes span { display: block; font-size: .9rem; line-height: 1.8; color: var(--dyn-ink); opacity: .85; } /* 全体像モードのとき、gx.css:285 が .gx-logo::after を「もう一度押すと戻ります」の 文字に差し替える。こちらは ::after を三色帯に使っているので、帯のまま保つ。 （この案件のロゴは入口へ戻る係で、全体像モードには入らない） */ html.is-overview .gx-logo::after { content: ''; padding-left: 0; border-left: 0; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 5px; border-radius: 0 0 11px 11px; background: linear-gradient(90deg, var(--dyn-cherry) 0 34%, var(--dyn-yellow) 34% 62%, var(--dyn-turq) 62% 100%); } /* 2026-09-11 操作安定化。押す対象の外形はhover/activeでも同じ場所に保つ。 原色・札・硬い影の返しを残し、境界で出入りを繰り返す移動だけ止める。 */ .gx-logo:hover, .gx-logo:focus-visible, .gx-logo:active, .dyn-menu__btn:hover, .dyn-menu__btn:focus-visible, .dyn-menu__btn:active, .dyn-sign .gx-gate__enter:hover, .dyn-sign .gx-gate__enter:focus-visible, .dyn-sign .gx-gate__enter:active, .gx-modal__close:hover, .gx-modal__close:focus-visible, .gx-modal__close:active, .has-3d .gx-more:hover, .has-3d .gx-more:focus-visible, .has-3d .gx-more:active, .has-3d:not(.is-tour) .gx-station.is-live .gx-more:hover, .has-3d:not(.is-tour) .gx-station.is-live .gx-more:focus-visible, .has-3d:not(.is-tour) .gx-station.is-live .gx-more:active, .dyn-docback__btn:hover, .dyn-docback__btn:focus-visible, .dyn-docback__btn:active, .gx-modal__body .dyn-shoplink:hover, .gx-modal__body .dyn-shoplink:focus-visible, .gx-modal__body .dyn-shoplink:active, .dyn-resume:hover, .dyn-resume:focus-visible, .dyn-resume:active { transform: none; } /* gx.cssのtransform拡大と、このテーマのscale拡大を二重に掛けない。 */ .gx-hotspot.is-pinned:not([data-marker="drag"]):hover::before, .gx-hotspot.is-pinned:not([data-marker="drag"]):focus-visible::before { transform: none; } .gx-hotspot.is-pinned.is-edge:hover::before, .gx-hotspot.is-pinned.is-edge:focus-visible::before { animation-play-state: paused; } /* 2026-09-11 r2: ボタンの全矩形を押せる範囲にする。 ギザギザの谷・シールと札のすきまも同じボタンで、hoverを失わない。 箱の実寸は済み／端／hoverで変えず、縮みと呼吸は装飾だけに掛ける。 */ .gx-hotspot.is-pinned { pointer-events: auto; border-radius: 0; } .gx-hotspot.is-pinned::before, .gx-hotspot.is-pinned::after { pointer-events: none; } .gx-hotspot.is-pinned[data-marker="drag"]:hover::before, .gx-hotspot.is-pinned[data-marker="drag"]:focus-visible::before { transform: none; } /* 矢羽根は札の内側の予約済み余白へ描く。文字を足して箱幅を変えない。 */ .gx-hotspot.is-pinned:not([data-marker="drag"]).is-edge::after { background-repeat: no-repeat; background-size: 6px 10px; } .gx-hotspot.is-pinned:not([data-marker="drag"]).is-edge[data-edge="left"]::after { background-position: 6px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M5 1L1 5l4 4' fill='none' stroke='%2316171b' stroke-width='1.6'/%3E%3C/svg%3E"); } .gx-hotspot.is-pinned:not([data-marker="drag"]).is-edge[data-edge="right"]::after { background-position: right 6px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%2316171b' stroke-width='1.6'/%3E%3C/svg%3E"); } .gx-hotspot.is-pinned:not([data-marker="drag"]).is-edge[data-edge="left"]:is(:hover,:focus-visible)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M5 1L1 5l4 4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); } .gx-hotspot.is-pinned:not([data-marker="drag"]).is-edge[data-edge="right"]:is(:hover,:focus-visible)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); } /* 2026-09-11 r4: 背景の文字選択が次の見回しをnative dragへ変えないようにする。 読み物(data-reading)と静的表示は対象に含めない。 */ html.has-3d:not(.is-tour):not(.no-3d) .gx-station[data-station] { -webkit-user-select: none; user-select: none; } /* 2026-09-11 r5: 表示を伏せた札をクリック・Tab操作にも残さない。 foundのopacityや、大きな窓の子visibility指定よりモード切替を優先する。 visibilityなので外形は保たれ、読む画面から戻った時も札の実寸は変わらない。 */ html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-hotspot, html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-hotspot::before, html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-hotspot::after { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; } html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-station.is-live .gx-more, html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .dyn-resume { visibility: hidden !important; pointer-events: none !important; } /* 透明な親のpointer-eventsを子のauto指定が復活させない。 */ html.is-overview .gx-hud, html.is-overview .gx-hud *, html.is-overview .gx-modal, html.is-overview .gx-modal * { visibility: hidden; pointer-events: none; } @media (max-width: 700px) { html.gx-doc-open .gx-hud, html.gx-doc-open .gx-hud * { visibility: hidden; pointer-events: none; } } /* 3Dの場面だけ縦横の見回しを受ける。読む本文は通常のスクロールを維持する。 */ html.has-3d:not(.is-tour):not(.no-3d) .gx-station[data-station] { touch-action: none; } .gx-station[data-reading], .gx-modal, .gx-modal__body, .dyn-menu, html:is(.is-tour, .no-3d) .gx-station { touch-action: auto; } .dyn-reading-back { position: fixed; left: 14px; bottom: 20px; z-index: 64; max-width: calc(100vw - 28px); min-height: 44px; padding: 10px 18px; border: 3px solid var(--dyn-ink); border-radius: 999px; background: var(--dyn-yellow); color: var(--dyn-ink); font-family: var(--dyn-text); font-size: 16px; font-weight: 700; line-height: 1.5; box-shadow: 4px 4px 0 var(--dyn-cherry); cursor: pointer; touch-action: manipulation; } .dyn-reading-back:hover { background: var(--dyn-cream); } .dyn-reading-back:focus-visible { outline: 3px solid var(--dyn-cherry); outline-offset: 4px; } .dyn-reading-back[hidden], html:not(.dyn-reading) .dyn-reading-back, html:is(.dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro, .is-tour, .no-3d) .dyn-reading-back { display: none; } /* 2026-09-11 r5: 操作と本文の日本語は16px以上。色・シール・罫線はそのまま使う。 ラベルの高さは先に確保し、発見済み/画面端/hoverで外形を変えない。 */ .gx-hotspot.is-pinned:not([data-marker="drag"]) { --dyn-plate-fs: max(16px, 1rem); --dyn-plate-h: max(28px, 1.75rem); } .gx-hotspot.is-pinned[data-marker="drag"]::after { font-size: max(16px, 1rem); height: max(28px, 1.75rem); line-height: 1.25; } .has-3d:not(.is-tour) .gx-station.is-live .gx-more, .dyn-resume, .has-3d:not(.is-tour) .gx-hud__skip, .has-3d:not(.is-tour) .gx-hud__tour, .has-3d:not(.is-tour) .gx-station .gx-hotspot:not(.is-pinned):focus-visible, .gx-hotspot:not(.is-pinned), .dyn-menu__item.is-ahead .dyn-menu__lock, .dyn-menu__foot, .dyn-teach__small, .dyn-teach__big, .dyn-count, .gx-modal__head::before, html.gx-doc-big .gx-modal__head::before, html.gx-doc-big .gx-modal__body::after, .gx-station[data-reading] .gx-meta, .dyn-footcard .dyn-footline, .dyn-footcard .gx-meta, .dyn-read .dyn-fig figcaption, .dyn-read .dyn-scenes span, .dyn-sign__lede, .dyn-sign__status, .dyn-sign__open-note, .dyn-sign .gx-gate__tour { font-size: max(16px, 1rem); } .gx-station[data-reading] .dyn-read p, .gx-modal__body p { font-size: clamp(16px, 2.2vw, 1.02rem); } .dyn-sign__title { font-size: clamp(16px, 4.4vw, 25px); } .dyn-teach { max-width: calc(100vw - 28px); } .dyn-teach__big { white-space: normal; } .dyn-menu__item.is-ahead { flex-wrap: wrap; } .dyn-menu__item.is-ahead .dyn-menu__lock { flex: 1 1 100%; max-width: 100%; margin-left: 0; white-space: normal; overflow-wrap: anywhere; letter-spacing: .04em; } /* 短い画面でも入口の説明と押下先を切らない。 */ .gx-gate.dyn-sign { overflow-y: auto; } .dyn-sign__board { flex-shrink: 0; } @media (max-height: 680px) { .gx-gate.dyn-sign { justify-content: flex-start; padding-block: 20px; } } /* r5 HUD追補: 画面モードを切り替えたら「次へ進む」を含むHUD全体を退避する。 gx-hud > * のpointer-events:autoも明示的に止め、DOM操作状態はmarker側で同期。 */ html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-hud, html:not(.is-tour):not(.no-3d):is(.dyn-reading, .dyn-menu-open, .gx-doc-open, .gx-doc-big, .is-overview, .is-locked, .is-intro) .gx-hud * { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; } /* r5 発見済み札のhover: 背景と文字色を一組で指定し、白字だけ残さない。 */ .gx-hotspot.is-pinned.is-found:not([data-marker="drag"]):is(:hover, :focus-visible)::after { background-color: var(--dyn-cherry-ink, #B31C22); color: #FFFFFF; } /* r5 読み物の幅追補: 16pxの長い日本語ラベルも紙の幅に収める。 auto-phraseの最小内容幅がinline-blockを押し広げる経路をなくし、文字は切らずに折り返す。 */ .gx-station[data-reading] .dyn-read, .gx-modal__body { min-width: 0; } .gx-station[data-reading] .dyn-read :is(h1, h2, h3, h4, p, li, figcaption), .gx-modal__body :is(h1, h2, h3, h4, p, li, figcaption) { min-width: 0; max-inline-size: 100%; white-space: normal; word-break: normal; overflow-wrap: anywhere; } .gx-station[data-reading] .dyn-read p.gx-meta { max-width: 100%; box-sizing: border-box; } /* r5 横向き説明窓: 角から外へ出した×をMENUに重ねない。 低い画面では窓内へ入れ、横並びMENUのある幅では左右に操作用の余白も確保する。 */ @media (min-width: 641px) and (max-height: 500px) { html.gx-doc-big .gx-modal__close { top: 12px; right: 12px; } } @media (min-width: 701px) and (max-height: 500px) { html.gx-doc-big .gx-modal { max-width: calc(100vw - 288px); } } /* r5 説明窓の予約枠廃止: 窓を開いている間は全札を退避する。 無窓の画面まで右側を空ける必要はないので、実在する操作UIだけを避ける。 */ .dyn-docslot { display: none !important; } /* r5 入口ヘッダー余白: 320pxや低い画面でも、看板をロゴ/MENUの下から始める。 看板が画面に収まらない時は入口自身をスクロールして入店ボタンへ進める。 */ @media (max-width: 700px), (max-height: 680px) { .gx-gate.dyn-sign { justify-content: flex-start; padding-top: 110px; padding-bottom: 24px; overflow-y: auto; } } /* 2026-09-16: 番号アイコンだけを表示し、札のぶんの押下領域も残さない。 元のボタン文言は読み上げと説明窓に保持。「注ぐ」の操作帯は別扱い。 */ .gx-hotspot.is-pinned:not([data-marker="drag"]) { gap: 0; min-width: 48px; min-height: 48px; justify-content: center; } .gx-hotspot.is-pinned:not([data-marker="drag"])::after { display: none; content: none; }