/* ============================================================================ A-amuse v2 外枠（スマホ設計の列・上のバー・下のタブ・背景） 2026-08-03 新規。試作 /proto/ から移植。 ★クラス名に必ず v2- を付ける。 このCSSは Bootstrap が読み込まれているページでも読むので、 .card / .body / .app のような一般名だと**既存の見た目を壊す**。 （実際 Bootstrap には .card があり、台のカードと衝突する） ★画像は /img/v2/。試作は /proto/img/ だったので**移植時に全部書き換えてある**。 ============================================================================ */ :root{ /* スマホ列の幅。高さ基準で決めるので、どの端末でも同じ形になる。 1.9464 は試作で決めた縦横比（play_sw と同じ式）。 */ --v2-appw: min(100vw, calc(100dvh / 1.9464), 760px); --v2-ink:#F3E7DC; /* 文字 */ --v2-muted:#9A8AA0; /* 薄い文字 */ --v2-paper:#150B15; /* 画面の下地 */ --v2-face:#271425; /* カードの面 */ --v2-hair:#3A1E38; /* 罫線 */ --v2-gold:#FFD45E; /* 数字・見出し */ --v2-ok:#12b76a; --v2-busy:#ff2b4d; --v2-wait:#ff9500; --v2-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; /* ★上部バーの数字用（2026-08-03 追加）。 --v2-mono は Consolas / SF Mono などの**コーディング用フォント**で、 金の彫刻の枠に対して明らかに格下だった（ユーザー指摘「枠に数字が負けてます」）。 端末に必ず入っている太いサンセリフを使う。字幅は tabular-nums で揃える。 */ --v2-num:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* ホーム画面の絵。マイページで選んだカードに差し替わる */ --v2-bg: url('/img/v2/bg_home.webp'); --v2-char: url('/img/v2/char_01.webp'); } /* ★横向きにされたときの取りこぼし（2026-08-08 追加）───────────────────────── 上の式は高さを 1.9464 で割って幅を決めている。縦のときは正しいが、 横（844x390 など）にされると 390/1.9464 = 200px となり、 **幅200pxの細い柱**になって画面の76%が黒い余白になっていた。 横のときだけ高さ基準をやめる。iPhone では向きを固定できないので必ず起きる。 ★戻すときはこのブロックを消すだけ。他に影響しない。 */ @media (orientation:landscape) and (max-height:520px){ :root{ --v2-appw: min(100vw, 760px) } } /* ---- 画面全体の並び。PCでは左右に余白（バナー枠）が出る ---- */ .v2-stage{min-height:100dvh;display:flex;justify-content:center;gap:22px; background:#0b0810;overflow-x:hidden} .v2-side{display:none;flex-direction:column;gap:14px;padding:18px 0;width:300px;flex:none} /* ★2026-08-19: 左右のバナー枠を出すのをやめた。 理由: 中身が「バナー枠 300×250」という**仮の文字のまま公開されていた**。 幅1120px以上（PC）でだけ出るのでスマホでは見えず、気づかれずに残っていた。 DMMぱちタウン風の新しい画面（dm-page）は左右の枠を置いていないので、 残っている v2 の画面（ログイン・登録・再設定・規約など）もそれに揃える。 .v2-stage は justify-content:center なので、枠が消えてもスマホ列は中央のまま（実測）。 ★戻し方: 本物のバナーを入れるときは、すぐ下の行のクラス名から「x-」を取る。 ※コメントの中に閉じ記号を書かないこと。書くとそこでコメントが切れ、 直後の指定が丸ごと死ぬ（2026-08-19 に実際にやった）。 */ @media (min-width:1120px){ .x-v2-side{display:flex} } .v2-bnr{width:300px;min-height:250px;border:1.5px dashed #3A1E38;border-radius:12px; display:grid;place-items:center;color:#5A4A58;font-size:12px;font-weight:800;text-align:center} /* ---- スマホ列の本体 ---- */ .v2-app{width:var(--v2-appw);height:100dvh;background:#0d0a18;position:relative; overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.55)} /* ── 画面ごとに字が変わらないようにする（2026-08-04 追加・ユーザー承認）──────────── ★何が起きていたか 台一覧(index2)だけ**旧サイトのCSS一式**（bootstrap_v002 / styles_v002 / aamuse_top ほか計12枚）を 読み込んでいる。そのため body から受け継ぐ字が島やホールの画面と違っていた。 項目 島・ホール 台一覧 文字の大きさ 16px 15px 行の高さ normal 22.5px 書体 システム標準 メイリオ（旧サイトの指定） text-align start left 結果、上部バーの数字が **1.4px 上・2.7px 高い** 位置に出るなど、 v2の枠まわり36か所がずれていた（実測）。タイトルやタブの書体まで違っていた。 ★なぜ「旧CSSを外す」ではなく、ここで打ち消すのか 台一覧のHTMLは Bootstrap の btn / btn-primary / btn-block / card / container を使っている。 旧CSSを外すと**台一覧そのものが崩れる**。 v2の枠の中だけ字を決め直せば、既存を壊さずに全画面をそろえられる。 ★値は inc_head_v2.html の body 指定からの**転記**（目分量で置かない）。 旧CSSは body（要素）で指定しているので、クラス1つのここが必ず勝つ。 */ .v2-app{ font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", "Noto Sans JP","Yu Gothic",Meiryo,sans-serif; font-size:16px; line-height:normal; text-align:start} /* ---- 背景。**画面ぜんぶ**に敷き、この上からバー・本文・タブを重ねる ---- 本文の高さだけに敷くと、バーの外に地色の帯が出て「背景が切れて」見える。 */ .v2-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#0d0a1c} /* ホーム以外の画面では、背景を本文と同じ下地1色にする（写真が上下からのぞくと画面が割れて見える） */ .v2-app:not(.is-home) .v2-bg{background:var(--v2-paper)} .v2-app:not(.is-home) .v2-bg > *{display:none} .v2-bg__img{position:absolute;inset:0;background:var(--v2-bg) center/cover no-repeat; transform-origin:50% 42%;will-change:transform; animation:v2-drift 30s ease-in-out infinite alternate} @keyframes v2-drift{from{transform:scale(1.02)} to{transform:scale(1.10) translateY(-1.4%)}} .v2-bg__img::after{content:"";position:absolute;inset:0; background:radial-gradient(90% 40% at 50% 94%, rgba(0,0,0,.55), transparent 62%)} /* 電飾がゆっくり息をする。位置は絵の明るさを測って決めた（上のドーム＝絵の23%）。 ★動かすのは opacity と transform だけ。filter は使わない（毎フレーム描き直しになる）。 */ .v2-fx{position:absolute;pointer-events:none;will-change:transform,opacity} .v2-fx--glow{inset:0; background: radial-gradient(58% 12% at 50% 23%, rgba(255,206,110,.62), transparent 72%), radial-gradient(20% 25% at 1% 54%, rgba(255,140,225,.48), transparent 72%), radial-gradient(20% 25% at 99% 54%, rgba(140,210,255,.48), transparent 72%); animation:v2-breathe 3.6s ease-in-out infinite alternate} @keyframes v2-breathe{from{opacity:.30} to{opacity:.80}} /* 光の粒。1タイル(220px)ぶん動かすと切れ目なく繋がる */ .v2-fx--dust{left:0;top:0;width:calc(100% + 220px);height:calc(100% + 220px);opacity:.5; background-image: radial-gradient(1.7px 1.7px at 34px 48px, #fff6c8 99%,transparent), radial-gradient(1.2px 1.2px at 148px 96px, #cfe8ff 99%,transparent), radial-gradient(1.5px 1.5px at 88px 176px, #ffd9f2 99%,transparent), radial-gradient(1.1px 1.1px at 196px 32px, #fff 99%,transparent), radial-gradient(1.5px 1.5px at 12px 132px, #ffe9a8 99%,transparent); background-size:220px 220px; animation:v2-dust 26s linear infinite} @keyframes v2-dust{to{transform:translate3d(-220px,-220px,0)}} /* 画面の縁を締める影。**背景と同じ範囲**に敷くこと（本文だけだと境目が線に見える） */ .v2-bg__edge{position:absolute;inset:0;pointer-events:none;z-index:4; border-left:1.5px solid rgba(255,255,255,.10); border-right:1.5px solid rgba(255,255,255,.10); box-shadow:inset 0 0 60px rgba(0,0,0,.5)} /* OS側で「視差効果を減らす」にしている人には動きを止める */ @media (prefers-reduced-motion: reduce){ .v2-bg__img,.v2-fx--glow,.v2-fx--dust{animation:none} .v2-fx--glow{opacity:.5} } /* ============================================================================ 上のバー（4区切り）。絵 bar3_top.webp は 1865x597。 中身の位置は**絵から実測した%**。画面幅が変わっても崩れない。 高さ基準の cqh を使うため container-type:size を付けている。 ============================================================================ */ .v2-hud{flex:none;position:relative;z-index:30;color:#fff; aspect-ratio:1865/597;container-type:size; background:url('/img/v2/bar3_top.webp') center/100% 100% no-repeat} .v2-slot{position:absolute;display:flex;align-items:center;overflow:hidden} .v2-slot .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:900;font-size:clamp(9px,20cqh,17px);text-shadow:0 1px 3px rgba(0,0,0,.9)} /* 数字は等幅。7桁（9,999,999）まで入る幅を確保してある */ /* ★数字の大きさは「7桁が必ず入る」ことから逆算した値。勝手に上げないこと。 枠の幅 = バー幅の26.2%。等幅なので1文字は文字サイズの約0.55倍、 "9,999,999" は9文字 → 必要幅 ≒ 文字サイズ × 4.95。 13.5cqh なら 320px の狭い端末でも収まる（実測で確認済み）。 以前は 21cqh(上限18px) で、402px の端末で**ちょうど0pxの余裕**しかなく、 それより狭い端末では先頭の1桁が切れていた（実機で「1,041,650」→「041,650」）。 */ .v2-slot .num{white-space:nowrap;font-family:var(--v2-mono);font-variant-numeric:tabular-nums; font-weight:800;font-size:clamp(9px,13.5cqh,19px);color:var(--v2-gold); text-shadow:0 1px 3px rgba(0,0,0,.9)} .v2-slot--face { left: 9.3%; top:19.5%; width: 8.7%; height:29.1%} .v2-slot--face .ic{width:100%;height:100%;border-radius:50%; background:url('/img/v2/face_01.webp') center/cover no-repeat} /* ★padding を % にしないこと。 % は「バー全体の幅」に対して効くので、5% と書くと 402px の端末で 20px も食う。 数字の枠は 26.2%（105px）しかないため、20px 食われると7桁が入らず、 右寄せなので**先頭の1桁が切れる**（実機で「1,041,650」→「041,650」になった）。 */ .v2-slot--name { left:19.9%; top:23.0%; width:30.8%; height:21.8%; justify-content:flex-start;padding-left:7px} /* ★Lvの札は絵の中でいちばん小さい。絵どおりの 6.5% だと 320px の端末で内寸20.8pxしかなく、 "Lv.1" が入らない（12pxで24px必要）。 **札の中心（13.65%）を動かさずに幅だけ 8% へ広げた**ので、絵とのズレは出ない。 右隣の経験値バーは 18.9% から始まるため、9.65%+8%=17.65% で重ならない。 */ /* ★2026-08-03 作り直し（ユーザー指摘）。最大レベルは 999。 ■ 何が問題だったか 「Lv.1」で**枠にちょうど収まる（余裕0px）**状態だった。 レベル機能を付けて桁が増えると、そのままはみ出す。実測（402px幅の端末）: Lv.1 24px … ぴったり（余裕0） Lv.99 31px … ★+7px はみ出す Lv.999 38px … ★+14px はみ出す ■ 「枠を広げる」は使えない 背景の絵 bar3_top.webp の窓を実測すると **内側は 111×107px（5.95% × 17.92%）**。 402px の端末では **24×24px しかない**。 しかも**元のCSSの枠（8.0%＝32px）は窓より広かった**ので、 長い文字は金の枠の上にはみ出して乗る状態だった（overflow:hidden は枠までしか効かない）。 窓を広げるには絵を描き直すしかなく、それは別の話。 ■ とった対策（ユーザー判断: 数字だけにする） 1. 「Lv.」を消して**数字だけ**にした → "999" は 22px で 24px の窓に収まる 2. **CSSの枠を絵の窓ぴったりに合わせた**（8.0% → 5.95%） こうすると、万一長い文字が来ても overflow:hidden が窓の内側で切ってくれる。 金の枠の上に文字が乗ることは二度と起きない。 3. 文字を 9.5cqh → 8.6cqh に下げ、3桁でも余裕が出るようにした （"999" が 22px → 20px。窓 24px に対して 4px の余裕） ■ レベル機能を作るときの申し送り 1桁のときに小さく見えるのが気になるなら、PHP側で桁数のクラス （例 .d1 / .d2 / .d3）を付けて文字サイズを変えるとよい。 CSS だけでは文字数を判定できないので、そこは PHP の仕事になる。 */ .v2-slot--lv { left:10.56%; top:60.13%; width:5.95%; height:17.92%;justify-content:center} .v2-slot--lv .txt{font-size:clamp(7px,8.6cqh,13px);color:var(--v2-gold);letter-spacing:0; font-family:var(--v2-mono);font-variant-numeric:tabular-nums} .v2-slot--exp { left:18.9%; top:61.8%; width:32.0%; height:14.8%} .v2-exp{width:100%;height:64%;border-radius:999px;background:rgba(0,0,0,.55);overflow:hidden} .v2-exp i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,#FFC24A,#FFE9A8)} .v2-slot--achip{ left:55.3%; top:22.9%; width: 6.9%; height:21.5%;justify-content:center} .v2-slot--anum { left:63.8%; top:22.9%; width:26.2%; height:22.2%; justify-content:flex-end;padding-right:6px} .v2-slot--cchip{ left:55.3%; top:59.3%; width: 7.0%; height:20.3%;justify-content:center} .v2-slot--cnum { left:63.8%; top:58.5%; width:26.2%; height:21.8%; justify-content:flex-end;padding-right:6px} .v2-chip{font-weight:900;font-size:clamp(8px,18cqh,15px);color:var(--v2-gold); text-shadow:0 1px 3px rgba(0,0,0,.9)} /* 未ログインのとき、名前の枠を「ログイン」ボタンにする */ .v2-slot--name a{color:var(--v2-gold);text-decoration:none;font-weight:900; font-size:clamp(9px,19cqh,16px);text-shadow:0 1px 3px rgba(0,0,0,.9)} /* ══════════════════════════════════════════════════════════════════════════ 新しい上部バー（2026-08-03）— レベルを主役にする作り直し ■ なぜ作り直したか 旧バーはレベルの窓が **24×24px** しかなく、「Lv.999」が 14px はみ出した。 窓は絵に埋め込まれているのでCSSでは広げられず、「Lv.」を消す応急処置しかできなかった。 絵ごと作り直すのが唯一の根本解決だった。 ■ 上の旧指定は消していない この1ブロックを消せば旧バーに戻る。旧バーの画像もサーバーに残してある。 （旧バーはサイトで一番出来のいい部品だったので、退路を残す） ■ 窓の位置は**絵から実測した値**。目分量ではない。 画像生成は座標を指示どおりに描けないので、できた絵を画素で測って合わせている。 採寸: scripts/prep_hud_bar.py 結果: scripts/_hud_bar_report.txt 絵を差し替えたら、必ずこのスクリプトで測り直すこと。 ■ 実測で確かめた効果（402px の端末 / カッコ内は旧バー） バーの高さ 108.6px （129px）… 20px 本文に回る レベルの数字 34.6px （11px）… ★3倍以上 coin の窓 101px → 9桁が 16.7px で収まる（旧は7桁ぶんしかなかった） A coin の窓 104px → 9桁が 17.2px 名前の窓 91.6px （124px）… ★狭くなる。下で文字を小さくして字数を保つ 320px の狭い端末でも レベル27.6px / 9桁13.3px で収まることを確認済み。 ══════════════════════════════════════════════════════════════════════════ */ .v2-hud{ aspect-ratio:1536/415; background-image:url('/img/v2/bar_hud.png')} /* 顔（左の丸窓） */ .v2-slot--face{left: 6.58%; top:43.86%; width: 8.92%; height:32.29%} /* 経験値バー（左上の細い窓）。レベル機能を作るまでは 0% のまま */ .v2-slot--exp { left: 7.49%; top:27.71%; width:31.64%; height: 7.95%} /* 名前（顔の右）。 ★文字を 20cqh → 12cqh に下げる理由 窓が 124px → 91.6px と狭くなった。文字を変えないと入る字数が 7 → 5 に減る。 12cqh（402pxで13px）なら 91.6/13 ≒ 7文字で、**旧バーと同じ字数**を保てる。 */ .v2-slot--name{left:17.12%; top:57.59%; width:22.79%; height:19.28%; justify-content:flex-start;padding-left:6px} .v2-slot--name .txt{font-size:clamp(9px,12cqh,15px)} .v2-slot--name a{font-size:clamp(9px,12cqh,15px)} /* ★レベル（中央の大きな円）。この絵の主役。 円の中に3桁を置く。円の直径の約8割を文字に使えるので 32cqh で 3桁が収まる。 */ .v2-slot--lv{left:41.08%; top:17.35%; width:17.77%; height:66.51%; justify-content:center} .v2-slot--lv .txt{font-size:clamp(14px,32cqh,42px);color:var(--v2-gold);letter-spacing:0; font-family:var(--v2-mono);font-variant-numeric:tabular-nums; text-shadow:0 2px 6px rgba(0,0,0,.95)} /* コインの座（丸）。A・C の文字をやめて、コインの絵を敷く。 */ .v2-slot--cchip{left:60.81%; top:27.95%; width: 6.05%; height:20.96%} .v2-slot--achip{left:60.87%; top:56.87%; width: 5.92%; height:21.69%} .v2-slot--cchip .v2-chip, .v2-slot--achip .v2-chip{ width:100%;height:100%;font-size:0; /* A / C の文字を隠す */ background:center/contain no-repeat} .v2-slot--cchip .v2-chip{background-image:url('/img/v2/coin_c.png')} .v2-slot--achip .v2-chip{background-image:url('/img/v2/coin_a.png')} /* 数字。★上が coin・下が A coin。 A coin で遊んで勝った差玉が coin になるので、coin のほうが増えにくい。 どちらも 9桁（999,999,999）が入る幅にしてある。 14.5cqh は「320px の端末で 11文字が収まる」ことから逆算した値。上げないこと。 */ .v2-slot--cnum{left:68.29%; top:27.95%; width:25.20%; height:20.72%; justify-content:flex-end;padding-right:6px} .v2-slot--anum{left:68.29%; top:57.59%; width:25.91%; height:20.24%; justify-content:flex-end;padding-right:6px} /* ★ここでは大きさを決めない。下の「バーの数字の見た目」の節で、 フォントのときと金の絵のときを**同じ値で**指定している。 以前はここだけ 14.5cqh で、絵のときの 11cqh と違っていたため、 入れ替わる一瞬だけ**数字が大きく見えた**（ユーザー指摘）。 大きさを変えるときは**必ず両方を同じ値に**すること。 */ /* ── バーの数字の見た目（2026-08-03 追加・ユーザー指摘「枠に数字が負けてます」）── 等幅のコーディング用フォントのままだと、彫刻の枠に対して素っ気なく浮いていた。 ★4案を実際のバーに載せて見比べて決めた（記録: この節の下） A 等幅そのまま … 枠に負ける B 太いサンセリフ … 大きく改善するが少し軽い C 金のグラデ … ★失敗。グラデの暗い側が暗い窓に沈んで読めない D セリフ体＋グラデ … ★失敗。暗いうえ字幅が広く**9桁が切れた** E 縁取り強め … ★失敗。一番読めない F 明るい金＋濃い縁取り … **採用**。数字が浮き上がり、枠と同じ格になる G 明るい方向だけのグラデ … Fより眠い H F＋ひとまわり大きく … 力強いが**9桁で余裕1px**。狭い端末で破綻するので不採用 ★縁取りを text-shadow の4方向で作る理由 -webkit-text-stroke だと文字の内側が削れて細く見える。 4方向に1pxずらした影を重ねるほうが、太さを保ったまま輪郭が出る。 最後の 0 2px 4px は下に落とす影（枠から浮かせる）。 ★色を #FFE07A（明るい金）にした理由 枠の金（#FFD45E〜#C98A2A）より**一段明るく**しないと、 金の枠の中で数字が沈む。枠より前に出す必要がある。 */ .v2-hud .num, .v2-hud .v2-slot--lv .txt{ font-family:var(--v2-num); font-weight:900; letter-spacing:-.01em; font-variant-numeric:tabular-nums; /* 桁が変わっても幅が揺れない */ color:#FFE07A; text-shadow: 0 0 1px #3A2408, 1px 1px 0 #3A2408, -1px 1px 0 #3A2408, 1px -1px 0 #3A2408, -1px -1px 0 #3A2408, 0 2px 4px rgba(0,0,0,.85)} /* ── 数字を金の彫刻の画像にする（2026-08-03 追加）───────────────────────── フォントのままだと、彫刻の枠に対して数字だけ平らで「貼った感」が出ていた。 枠と同じ質感で彫った 0〜9・カンマ・スラッシュを1枚の絵にして、1文字ずつ並べる。 ★この指定が効くのは js/digits.js が動いたときだけ（.v2-dnum が付く）。 画像が読めない・JSが動かない場合は**上のフォント指定のまま**出る。壊れない。 ★1文字ぶんの大きさ 絵は 1212×128 で12等分（1文字 101×128）。縦横比 101/128 = 0.789。 文字の高さ(1em)に合わせて幅を決めるので、どの表示サイズでも比が崩れない。 ★数字の幅をすべて同じにする理由 元の絵は「1」が細く「6」が太い（自然な字幅）。そのまま並べると、 値が変わるたびに数字の幅が変わって**桁がガタガタ動く**。 1文字ぶんの枠を同じ幅にして、その中で中央に置く＝等幅にする。 （フォントで tabular-nums を指定していたのと同じ考え方） ★位置を「％」でなく「em」で指定する理由 背景の位置を％にすると、**枠の幅が変わると絵の位置も倍率も変わる**。 カンマだけ枠を狭めたら、絵ごと縮んでしまった。 1コマの幅（.789em）を基準に実寸でずらせば、枠を狭めても絵の大きさは変わらず、 はみ出した分が切り取られるだけになる。 */ /* ── 入れ替わる瞬間を見せない（2026-08-04 追加）─────────────────────────── ユーザー指摘「島から台画面に行く時に一瞬 A coin と coin が動いてます」。 画面が出た直後は**フォント**の数字が描かれ、そのあと js/digits.js が金の絵に差し替える。 フォントの数字は絵より細いので、A coin（9文字）で 52.5px → 83px と**30px 広がる**。 右揃えなので、その分だけ左へ跳ねて見えていた（桁数が多いほど大きく動く＝ だから A coin と coin だけ目立った）。 描き終わるまで隠しておけば、跳ねる瞬間そのものが見えない。 ★visibility なので**場所は取ったまま**＝まわりのものは動かない。 ★class は inc_head*.html のインラインJSが付け、700ms で必ず外れる。 JSが動かない端末では付かない＝今までどおり数字が出る。 */ html.v2-num-wait .v2-hud .num, html.v2-num-wait .v2-hud .v2-slot--lv .txt{visibility:hidden} .v2-dnum{ display:inline-flex;align-items:center; font-size:inherit; /* 大きさは元の文字サイズに従う */ text-shadow:none} /* 影は絵に入っているので消す */ .v2-dnum i{ display:block; flex:none; height:1em; width:.789em; /* 1コマ 101×128 → 101/128 */ background-image:url('/img/v2/digits.png?v=ec289a46'); background-repeat:no-repeat; background-size:9.468em 1em; /* .789em × 12コマ */ background-position:calc(var(--i) * -.789em) 0} /* カンマとスラッシュは字幅が狭い。枠だけ詰めて、絵は中央のまま切り取る。 ずらす量 = (1コマ .789em − 詰めた幅 .40em) ÷ 2 = .195em */ .v2-dnum i.c, .v2-dnum i.s{ width:.40em; background-position:calc(var(--i) * -.789em - .195em) 0} /* ★画像の数字はフォントより**43%幅広**なので、文字サイズを下げ直す。 実測: 1コマ101×128 のうち、字が最大100px を占める（＝詰める余地が無い）。 フォントの数字は約 .55em 幅、画像は .789em 幅。同じサイズでは入らない。 必要な幅の計算（カンマ2つを含む11文字＝999,999,999 の場合） 数字9個 × .789em ＋ カンマ2個 × .40em ＝ 7.90em 窓は 25.2%（402pxの端末で 101px、padding を引いて 95px） → 95 ÷ 7.90 ＝ 12.0px → バー高108.6px なので 11cqh レベルも同じ理由で下げる。3文字 × .789em ＝ 2.37em、窓 71px → 30px → 27cqh。 ★フォント表示のとき（画像が読めないとき）は上の指定のままなので影響しない。 */ /* ★フォントのときと画像のときで**同じ大きさ**にする。 以前はフォント 14.5cqh / 画像 11cqh と違っていたため、 入れ替わる一瞬だけ数字が大きく見えた（ユーザー指摘）。 絵が読めない・JSが動かないときもこの大きさで出るので、見た目が変わらない。 ※画像の数字はフォントより43%幅広いので、画像に合わせて小さいほうへ揃える。 */ .v2-slot--cnum .num, .v2-slot--anum .num, .v2-slot--cnum .v2-dnum, .v2-slot--anum .v2-dnum{font-size:clamp(8px,11cqh,15px)} .v2-hud .v2-slot--lv .txt, .v2-slot--lv .v2-dnum{font-size:clamp(12px,27cqh,36px)} /* ---- 本文。背景より前に出す ---- */ .v2-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; position:relative;z-index:10} .v2-body.nopad{overflow:hidden} .v2-pad{padding-bottom:16px;background:var(--v2-paper);min-height:100%} /* 既存のフォーム画面（お問い合わせ等）を v2 の外枠に入れるとき用。 あちらは白地前提で文字色が濃いので、下地を暗いままにすると読めない。 ★中身は既存のまま。枠だけ v2 にするのが目的。 */ .v2-pad--light{background:#f4f5f8;color:#1b1f2a} .v2-pad--light .v2-foot{border-top-color:#dfe3ea} .v2-pad--light .v2-foot a{color:#5f6a80} .v2-pad--light .v2-foot small{color:#98a1b3} /* ---- 下のタブ（5つ）★2026-08-08 作り直し ─────────────────────────────── これまで: 絵 bar2_bottom.webp（1178x267）の縦横比で高さが決まっていた。 390px 幅で 全高 88.4px。ところが押せるのは中の 43.0px だけで、 上に 27.8px・下に 17.6px の「絵の飾り」が乗っていた（top:31.5% / bottom:19.9%）。 iOS の目安 44pt をわずかに下回り、下の縁が反応しない。 ★画面の高さを一番使いながら、押しやすさは一番低い状態だった。 これから: 絵をやめて CSS で作る。全高 70px・**押せる 56px**。 実測7サイトの下タブは 68/70/70/73/80/84px で、いずれも高さぶん全部が押せる（中央値 70）。 70 = 上の飾り 8 + 押せる 56 + 下の余白 6。safe-area はその外側に足す。 ★戻し方: この節を丸ごと消して、上の「これまで」の4行に戻すだけ。他に影響しない。 ---------------------------------------------------------------------- */ .v2-tabs{flex:none;position:relative;z-index:30; height:calc(70px + env(safe-area-inset-bottom, 0px)); /* ★ホームバーと重ねない */ background:linear-gradient(180deg,#2A1830 0%,#1B0F20 100%); border-top:1px solid rgba(255,212,94,.45); /* ★面ではなく縁で作る（実測サイトの共通点） */ box-shadow:0 -6px 18px rgba(0,0,0,.45)} .v2-tabs__in{position:absolute;left:0;right:0;top:8px;height:56px; display:grid;grid-template-columns:repeat(5,1fr)} .v2-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:none;border:0;color:#C9B6C6;font-size:10px;font-weight:900;cursor:pointer; text-decoration:none;white-space:nowrap;letter-spacing:-.02em} .v2-tab i{width:24px;height:24px;display:block;background:center/contain no-repeat} .v2-tab.on{color:var(--v2-gold);text-shadow:0 0 8px rgba(255,196,0,.7)} .v2-tab:active{transform:scale(.94)} .v2-tab--home i{background-image:url('/img/v2/tab_home.webp')} .v2-tab--mypage i{background-image:url('/img/v2/tab_mypage.webp')} .v2-tab--gacha i{background-image:url('/img/v2/tab_gacha.webp')} .v2-tab--settings i{background-image:url('/img/v2/tab_settings.webp')} .v2-tab--contact i{background-image:url('/img/v2/tab_contact.webp')} /* ---- 見出し（戻るボタン付き） ---- */ /* ★下へスクロールしても、戻るボタンと題を上に貼り付けたままにする（2026-08-06 追加）。 前は下へ送ると戻るボタンが画面外へ消え、戻るのに一番上まで上げる必要があった。 ■ どうやって効いているか スクロールしているのは `.v2-body`（flex:1 / overflow-y:auto）。 その中にある見出しに sticky を付けると、**その器の上端**で止まる。 上のバー（HUD）と下のタブは `.v2-body` の外にあるので、もともと動かない。 ■ ★背景を必ず敷くこと sticky は透明のままだと、下から流れてくる文字が**見出しに重なって透ける**。 器と同じ `--v2-paper` を敷いて、下の文字を隠す。 明るい下地の画面（`.v2-pad--light`）はそちらに合わせる。 ■ ★z-index は 20 同じ器の中の中身（既定 0）より上、下のタブ（30）より下。 チャットの小窓（60）などの、画面全体にかぶせるものより下に居ること。 ■ 効く範囲: `.v2-title` を使っている画面すべて（57画面）。 ここ1か所を消せば、全部まとめて元の動きに戻る。 */ .v2-title{display:flex;align-items:center;gap:8px;padding:12px 13px 6px; position:sticky;top:0;z-index:20;background:var(--v2-paper); /* 下に細い線を1本。貼り付いていることが分かり、文字が触れて見えない */ box-shadow:0 1px 0 rgba(255,255,255,.06)} .v2-pad--light .v2-title{background:#f4f5f8;box-shadow:0 1px 0 rgba(0,0,0,.06)} .v2-title h1{margin:0;font-size:16px;font-weight:900;color:var(--v2-ink)} .v2-title .sub{font-size:11.5px;color:var(--v2-muted);font-weight:700} /* ── 見出しの左右に飾りを置く（2026-08-03 追加）───────────────────────── 「ここから章が始まる」を絵で示す。v2 の47か所すべての見出しに効く。 この1ブロックを消せば、元の文字だけの見出しに戻る。 ★h1 に付ける理由（.v2-title に付けない） .v2-title の中には h1 のほかに ``（小さい補足）が入ることがある。 .v2-title::after にすると、飾りが**補足文のさらに後ろ**に飛んでしまう。 h1 の内側に付ければ、必ず見出しの言葉だけを挟む。 ★向き 元画像は右へ細くなる形。左側はそのまま（細い先が言葉を向く）。 右側は左右反転して、やはり細い先が言葉を向くようにする。 ★大きさ 元画像 192×64（3:1）。見出しの文字が16pxなので、42×14px に抑えて主役を食わない。 */ .v2-title h1::before, .v2-title h1::after{ content:"";display:inline-block;vertical-align:middle; width:42px;height:14px; background:url('/img/v2/title_ornament.png') no-repeat center/contain} .v2-title h1::before{margin-right:7px} .v2-title h1::after{margin-left:7px;transform:scaleX(-1)} .v2-back{width:30px;height:30px;flex:none;border-radius:9px;border:1.5px solid var(--v2-hair); background:var(--v2-face);color:var(--v2-ink);display:grid;place-items:center; font-size:15px;cursor:pointer;text-decoration:none} /* ── 戻るボタンを作り直す（2026-08-03・ユーザー指摘）───────────────────── 27画面すべてで使う、いちばんよく押すボタンなのに使いづらかった。実測: ・**明暗の差 1.11 : 1** … 地色（#150B15）とボタン（#271425）がほぼ同じ色で、 そこにボタンがあると気づけない ・**30×30px** … 指で押す目安 44×44px に足りない ・下の余白 6px … 見出しに詰まっていて押しにくい ★モンストの戻るボタンを参考にした（ユーザー提示）。効いているのは3点: ① 周囲と**明確に違う色**で塗る（あちらは橙の画面に青いボタン） ② **太い白い矢印**。細い記号ではなく、塗りつぶした形 ③ **押せる立体感**（下に影が落ちて、押すと沈む） ★色を青にした理由 A-amuse は金・赤・紫で組んである。同系色で塗ると、どう工夫しても埋もれる。 青はこの配色の**補色側**なので確実に浮く。しかも RB の数字で既に使っている色 （#2b7fff）なので、サイトの中で唐突ではない。 縁は金にして、他の部品と同じ材質に見せる。 ★矢印を CSS で描く理由 最初「‹」の文字を大きくしたが、**フォント任せなので細くて小さいまま**だった。 実測すると、46pxのボタンに対して字は7px幅しかなかった。 四角の2辺だけに枠線を引いて45度回すと、太さも大きさも自分で決められる。 ★この1ブロックを消せば、元の暗い角丸ボタンに戻る。 */ .v2-back{ width:52px;height:44px; /* 指で押す目安 44×44 を満たす */ border:2.5px solid #FFD45E; border-radius:13px; background:linear-gradient(180deg,#4E97FF 0%,#2B72E8 55%,#1A56C4 100%); font-size:0; /* 中の「‹」は隠す。矢印は下で描く */ box-shadow:0 3px 0 #12376F, /* 下に落ちる厚み＝押せそうに見せる */ 0 5px 12px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.38); /* 上のふちの照り */ margin:0 2px 0 0} /* 矢印。四角の左と下だけに線を引いて45度回すと「く」の字になる。 */ .v2-back::before{ content:""; width:13px;height:13px; border-left:4px solid #fff; border-bottom:4px solid #fff; border-radius:2px; transform:rotate(45deg); margin-left:5px; /* 回した分だけ見た目の中心がずれるので戻す */ filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))} /* 押した瞬間に沈める。厚みも減らして、本当に沈んだように見せる。 */ .v2-back:active{ transform:translateY(3px); box-shadow:0 0 0 #12376F,0 2px 5px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.25)} /* 見出しの行に余白を足す。 ★元は padding:12px 13px 6px で、**下が6px しかなかった**。 ボタンが46pxに大きくなるぶん、上下に余裕を持たせないと本文とくっつく。 */ .v2-title{padding:14px 13px 12px;gap:10px} /* ---- フッター（規約などのリンク）---- */ .v2-foot{margin:18px 13px 6px;padding-top:12px;border-top:1px solid var(--v2-hair); display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center} .v2-foot a{color:var(--v2-muted);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap} .v2-foot a:active{color:var(--v2-ink)} .v2-foot small{display:block;width:100%;color:#6B5A69;font-size:10px;margin-top:4px} /* ---- 表示言語の切替え（2026-08-25・5言語対応）---- */ /* ★ここだけは**どの言語でも同じ見た目**になる。 探す人は自分の言語を探すので、名前はその言語で書く （「英語」ではなく English）。訳さない印に data-keep を付けてある。 */ .v2-lang{width:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .v2-lang a{ color:var(--v2-muted);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap; padding:4px 9px;border:1px solid var(--v2-hair);border-radius:999px;line-height:1} .v2-lang a:active{color:var(--v2-ink)} /* いま見ている言語を強調する。data-lang は build.py が言語ごとに差し替える */ .v2-lang[data-lang=ja] a[data-l=ja], .v2-lang[data-lang=en] a[data-l=en], .v2-lang[data-lang=ko] a[data-l=ko], .v2-lang[data-lang=tw] a[data-l=tw], .v2-lang[data-lang=cn] a[data-l=cn]{ color:var(--v2-ink);border-color:var(--v2-ink);cursor:default;pointer-events:none} .v2-pad--light .v2-lang a{color:#5f6a80;border-color:#dfe3ea} /* ---- 注記の箱 ---- */ .v2-note{margin:0 13px 14px;padding:10px 12px;background:#1D0F1C;border:1.5px solid var(--v2-hair); border-radius:11px;font-size:11.5px;line-height:1.75;color:#C9B6C6} .v2-note b{color:var(--v2-ink)} /* ★2026-08-03 拡大縮小を止める（アプリらしくするため・ユーザー指示）。 pan-y = 「縦のスクロールだけ許す」。つまんで拡大・ダブルタップ拡大は許さない。 none にすると**縦スクロールまで止まって**画面が動かなくなるので使わない。 ★pan-x を外した理由（2026-08-03 追加・ユーザー指示） 横になぞると**前の画面に戻ってしまっていた**（iOS Safari の「端から引いて戻る」）。 アプリでは起きない動きで、Webの名残。pan-x を許していると横のなぞりが通ってしまう。 ただし CSS だけでは iOS の戻るジェスチャは止まりきらないので、 head の JS（端から始まった横なぞりを打ち消す）と**2段構え**にしている。 ★横スクロールが要る所だけ pan-x を戻す 特定商取引法などの表は狭い画面で横に流れる。ここまで止めると読めなくなる。 */ html, body { touch-action: pan-y; } .v2-doc table, [style*="overflow-x"], .am-list .pagination { touch-action: pan-x pan-y; } /* ══════════════ 画面ごとスライドするのを止める（2026-08-03）══════════════ 拡大は止めたが、**画面全体を指で動かせてしまう**（上のバーが切れて黒帯が出る）。 これは「ページ自体のスクロール」と、iOSの引っぱると戻るゴムの動き。 ★v2 の画面だけに効かせる。 旧デザインのページ（search.php など22枚）は**ページ自体のスクロールで読む**作りなので、 全体に掛けると読めなくなる。`.v2-stage` がある画面だけを対象にする。 html:has(.v2-stage) … 対応ブラウザ用 html.v2-lock … 古いブラウザ用（head の JS が付ける） ★body を position:fixed にする理由 overflow:hidden だけでは iOS のゴムの動きが止まらない。 固定してしまえば、そもそも動かす余地が無くなる。 */ /* ★2026-08-03 追記: Safari で上下が白くなる件と、下のバーがタブに被る件の対処。 ① html に色を敷く body を position:fixed にすると、**body の背景が画面全体（キャンバス）へ伝わらなくなる**。 その結果、iOS では上のステータスバーの帯と下の余りが**白**になった。 html 自身に色を敷けば、どこが余っても白くならない。 ② 高さを 100svh にする 100% だと「ブラウザのバーが隠れているときの高さ」で計算され、 Safari の下のURLバーが出ている状態では、その下にタブバーが潜り込んで押せなくなる。 svh = **バーが出ている状態の高さ**。常にバーの上に収まる。 ホーム画面から起動したアプリではバーが無いので svh = 画面いっぱい。差は出ない。 dvh（バーの出入りで変わる）は使わない。値が変わるたびに画面がガタつくため。 */ html:has(.v2-stage), html.v2-lock{height:100%;overflow:hidden;overscroll-behavior:none; background:#0b0810} html:has(.v2-stage) body, html.v2-lock body{position:fixed;top:0;left:0;right:0;width:100%; height:100%; /* svh に未対応の古いブラウザ用 */ height:100svh; /* ブラウザのバーが出ていても隠れない高さ */ overflow:hidden;overscroll-behavior:none;background:#0b0810} /* 高さの基準を dvh から「固定した body の100%」に変える。 dvh はアドレスバーの出入りで値が変わり、そのたびに画面がガタつくため。 */ html:has(.v2-stage) .v2-stage, html.v2-lock .v2-stage{min-height:100%;height:100%} html:has(.v2-stage) .v2-app, html.v2-lock .v2-app{height:100%} /* 中の本文だけがスクロールする。 ★`contain` から `none` に変更（2026-08-06・ユーザー指摘）。 ■ 何が違うか contain … 端まで来ても**その先（ページ全体）へスクロールを渡さない**。 ただし**その場での跳ね返り（引っ張ると中身が付いてくる動き）は残る**。 none … 渡さない＋**跳ね返りそのものを起こさない**。 ■ なぜ変えたか 見出しを上に貼り付けた（(126)）あとも、**引っ張ると見出しごと下がって** 上に隙間ができた。貼り付けは「器の上端で止める」仕組みなので、 器の中身がまるごと引っ張られると、貼り付いたものも一緒に動く。 跳ね返りを止めれば、引いても中身が動かない＝見出しも動かない。 ■ 失うもの 一番上でさらに引いたときの「ぷるん」とした手応えが無くなる。 戻るボタンが常に押せることを優先した。 */ .v2-body{overscroll-behavior:none} /* ══════════════════════════════════════════════════════════════════════════ 戻るボタンと見出しプレート（2026-08-03・ユーザー作成の素材に差し替え） 前は CSS だけで青いボタンを描いていたが、ユーザーが素材を用意した。 完成イメージ（BC8902E4）どおり、丸い戻るボタン ＋ 見出しの黒いプレート。 ★プレートが3分割で作られている理由（ユーザーの判断・正しい） 中の黒い部分に入る文字は画面ごとに違う（「設定」「カードBOX」など）。 **横幅が変わる**ので、左端と右端の飾りは原寸のまま、中央だけを伸ばす。 CSS の border-image がちょうどこの仕組み。 ★寸法は絵から実測した値（scripts/prep_backbar.py） plate_title.png … 915×418。左端428px / 中央64px（伸ばす）/ 右端423px ★border-width を高さから逆算する理由 上下のスライスを 0 にしているので、絵は要素の高さに合わせて**縦に伸びる**。 左右の幅を同じ倍率にしないと、端の飾りだけ縦長・横長に歪む。 倍率 = 表示する高さ ÷ 418 高さ52px なら 428×(52/418)=53.2px / 423×(52/418)=52.6px ★この1ブロックを消せば、前の青い角丸ボタン＋飾りに戻る。 ══════════════════════════════════════════════════════════════════════════ */ /* 見出しの飾り（title_ornament）はプレートが役目を引き継ぐので出さない */ .v2-title h1::before, .v2-title h1::after{content:none;display:none} .v2-title{padding:12px 13px;gap:8px;align-items:center} /* ── 戻るボタン ─────────────────────────────────────────────── */ .v2-back{ width:52px;height:52px; /* 指で押す目安 44×44 を超える */ flex:none; border:0;border-radius:0; background:url('/img/v2/btn_back.png?v=2d1ec6f2') center/contain no-repeat; box-shadow:none; font-size:0; /* 中の「‹」は隠す。矢印は絵に入っている */ filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); margin:0} .v2-back::before{content:none;display:none} /* CSSで描いていた矢印を消す */ .v2-back:active{transform:translateY(2px);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))} /* ── 見出しプレート ─────────────────────────────────────────── */ .v2-title h1{ flex:0 1 auto;min-width:0; height:52px; display:flex;align-items:center;justify-content:center; margin:0; padding:0 10px; border-style:solid; border-width:0 52.6px 0 53.2px; /* 高さ52px ÷ 418 の倍率で算出 */ border-image:url('/img/v2/plate_title.png?v=bfd3f0e6') 0 423 0 428 fill stretch; /* ★文字は絵に負けないよう、金の縁取りを付ける（上部バーの数字と同じ考え方） */ font-size:15px;font-weight:900;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; color:#FFE9C9; text-shadow:1px 1px 0 #2A1708,-1px 1px 0 #2A1708,1px -1px 0 #2A1708,-1px -1px 0 #2A1708, 0 2px 4px rgba(0,0,0,.9)}