/* © 2026 PassQuest Team (https://passquest.jp). All rights reserved. 無断複製・転載・改変を禁じます。 */ /* ========================================================================= * tap_fix.css — ボタン総点検（2026-09-13）で見つかった * «画面からはみ出す» «押せないのに押せるように見える» を直す * * 【直すもの】 * ③-1 上のボタン列（アイテムボックス・タイマー）が、 * タブレット・スマホ横で画面の右にはみ出して押せない * ③-2 RPGの «やくそう» が、小さいスマホ（幅320）で右にはみ出す * ④ ガチャの «1回引く» がポイント不足で押せないのに、 * 見た目が明るいままで «押しても反応しない» と感じる * * 【元に戻したいとき】 * index.html からこのファイルの の行を消すだけです。 * ========================================================================= */ /* ---- ③-1 上のボタン列 ------------------------------------------------ タブレット（幅768）やスマホ横（幅844）では、上のボタン列が «縮まない» ため、右の «アイテム» と «タイマー» が画面の外へ出て押せませんでした。 この幅のときだけ、ボタンの文字と余白を少しだけ小さくして収めます。 ・スマホ（幅600以下）とパソコン（幅1100超）では何も変わりません ・ヘッダーの高さ（64px）も変えません （問題画面は «固定の高さのヘッダー» を前提にしているため、 高さを変えると下のボタンが隠れてしまいます） */ @media (min-width: 601px) and (max-width: 1100px) { header.app-header { column-gap: 4px; } .header-controls { flex-shrink: 1; min-width: 0; } .header-btn-group { min-width: 0; column-gap: 4px; } .header-btn-group .hdr-btn { font-size: 0.72rem !important; padding-left: 6px !important; padding-right: 6px !important; letter-spacing: 0 !important; } .header-lang-center { flex-shrink: 1; min-width: 0; } .header-lang-center .lt-seg { font-size: 0.72rem !important; padding-left: 6px !important; padding-right: 6px !important; } } /* ※ タブレット縦（幅768）では «LVの表示» と «言語の切り替え» が もともと少し重なっています（このファイルより前からの状態）。 直すにはヘッダーの組み方そのものを変える必要があり、 問題画面の高さにも影響するため、ここでは手を入れていません。 */ /* ---- ③-2 RPGの «やくそう» -------------------------------------------- 名前・LV・やくそう が横1列に並びますが、名前が縮まないため «やくそう» が押し出されていました。名前のほうを縮めます。 */ .rpg-player-namerow { min-width: 0; } .rpg-player-namerow .rpg-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .rpg-player-namerow .rpg-herb-btn { flex: 0 0 auto; } /* ---- ③-3 暗記カードの «⭐覚えた！» ----------------------------------- 小さいスマホ（幅320）で、2つ並んだボタンが入りきらず 右のボタンが画面の外へ出ていました。縮めるようにします。 */ #flashcard-screen button { min-width: 0; max-width: 100%; } /* ---- ④ 押せないボタンは «押せないように» 見せる ----------------------- ガチャの «1回引く» は、ポイントが足りないと押しても何も起きませんが 見た目が明るいままでした。薄くして、指のかたちも変えます。 */ #gc-pull:disabled, #gc-pull[disabled] { opacity: 0.45 !important; filter: grayscale(0.55); cursor: not-allowed; } /* ---- ⑤ トップ画面が指でわずかに «動く» のを止める --------------------- body には下に 50px の余白（padding-bottom）が入っています。 トップ画面は内容がちょうど画面に収まるので、その 50px ぶんだけ «スクロールできる» 状態になっていました。 iPhone でこの 50px を指でずらすと画面全体がわずかに動き、 下に固定されたボタン（プランを選んで／BGM／JP／☰）が ずれて見えていました。 トップ画面（と、その上に開く料金・暗記カードなど）だけ、この余白をやめます。 ほかの画面はもともと «はみ出し 0» なので影響ありません。 */ body.is-title-screen { padding-bottom: 0 !important; } /* ---- ⑥ 過去問の画面が «スクロールできない» のを直す --------------------- 【トモさんのご報告（2026-09-14）】 第30回・介護過程・問63 で、5番目の選択肢が下のバーに隠れていて、 どこを指でなぞっても画面がまったく動かなかった。 【原因】 過去問の画面（#past-exam-screen）は «たて並びの箱（flex）» の中で スクロールする作りです。 iPhone の Safari には、この作りのときだけ «箱の下余白（padding-bottom）を、スクロールできる高さに数えない» という昔からの不具合があります。 そのため実機では 中身の高さ 814px ＋ 下余白 94px → 844px の画面 本来 908 > 844 なので 64px 動くはず 実機 814 < 844 なので «動かない» となり、5番目の選択肢（下端 814px）は バーの上端（776px）より 38px 下 ＝ 隠れたまま出せませんでした。 ・パソコンのブラウザでは下余白を数えるので、ここでは再現しません。 ・1問1答・模擬試験・RPGの画面（#quiz-screen）は «flex ではない» ため この不具合は起きません。実際、ご報告も過去問だけでした。 【直し方】 下の空きを «箱の余白» ではなく «中身の余白» に付け替えます。 中身（#past-exam-quiz-area）はふつうの箱なので、 どのブラウザでも確実に «スクロールできる高さ» に数えられます。 見た目・空きの大きさは1pxも変わりません。 */ @media (max-width: 600px) { /* 箱の下余白は 0 にする（mobile_v1.css の 94px を打ち消す。 打ち消す相手と «同じ強さ» の書き方にそろえてあります） */ html body.pe-quiz #past-exam-screen.app-overlay, html body.pe-quiz #past-exam-screen { padding-bottom: 0 !important; } /* 同じ 94px を «中身» のほうに付け直す（見た目は1pxも変わりません） */ html body.pe-quiz #past-exam-screen > #past-exam-quiz-area { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; } } /* ---- ⑦ 冒険の地図も同じ直し方で ------------------------------------- アプリの中で «たて並びの箱＋スクロール＋下余白» になっていたのは 過去問と «冒険の地図» の2つだけでした（1問1答・模擬試験・問題画面は ふつうの箱なので起きません）。 地図は «まったく動かない» ことは起きませんが、いちばん下まで スクロールしても最後の «復習の祠» が 12〜20px バーに重なります。 同じやり方（下の空きを中身へ付け替え）でそろえます。 */ @media (max-width: 600px) { html body #world-map-screen.app-overlay { padding-bottom: 0 !important; } /* ★ 50px → 84px。ほかの画面（過去問など）と同じ «すき間26px» にそろえる （50pxのままだと、いちばん下まで動かしても最後の «復習の祠» が 8px バーに重なったままでした） */ html body #world-map-screen.app-overlay > .map-grid { padding-bottom: 84px !important; } } /* ※ 年度・科目をえらぶ画面（body に pe-quiz が付いていないとき）は いまのままにしてあります。あちらは中身が画面より十分に高く、 «まったく動かない» ことは起きないためです。 （ただし iPhone では、下余白62pxのぶんだけ «一番下までスクロール しても最後の行が少しバーに重なる» 状態が残ります。 こちらも直せますが、並びの作りが違うので別途ご相談させてください。） */ /* ---- ⑧ 古い iPhone むけの «予備の書き方»（:has() の代わり） ------------- CSS の :has() は iOS 15.4 以降の iPhone でしか効きません。 それより古い iPhone では、ログイン画面の上に下のバーが残る、 アイテムボックスを開いてもヘッダーが消えない、などが起きていました。 js/has_fallback.js が «:has() が使えない端末のときだけ» html に no-has、body に目印（pqh-…）を付けます。 ここのルールは no-has が付いているときしか当たらないので、 いまの iPhone・Android・パソコンには 1px も影響しません。 */ /* ログイン画面が出ている間は、下の言語バーと📣報告を隠す */ html.no-has body.pqh-login #lang-toggle, html.no-has body.pqh-login #feedback-fab { display: none !important; visibility: hidden !important; } html.no-has body.pqh-login #eg-banner { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* 試験ガイドのバナーが出ている間、トップ画面の下に余白をつくる */ html.no-has body.is-title-screen.pqh-eg #title-screen { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* アイテムボックスを開いている間は、上のヘッダーを隠す */ html.no-has body.pqh-wordbank > header.app-header { visibility: hidden !important; pointer-events: none !important; } @media (max-width: 600px) { /* RPGの結果画面が出ている間は、戦闘中の表示を隠す */ html.no-has body.pqh-result #question-card, html.no-has body.pqh-result #quiz-header-info, html.no-has body.pqh-result #quiz-screen .quiz-progress-bar-wrap, html.no-has body.pqh-result #quiz-screen #quiz-progress-bar-wrap, html.no-has body.pqh-result #rpg-enemy-panel, html.no-has body.pqh-result #rpg-player-panel { display: none !important; } /* 1問1答のタイマーが出ている間は、上のボタン列を詰める */ html.no-has body.ichimoni-active.pqh-ichitimer header.app-header .header-btn-group { gap: 2px !important; } html.no-has body.ichimoni-active.pqh-ichitimer header.app-header .header-btn-group #bgm-pick-btn { padding-left: 3px !important; padding-right: 5px !important; } } @media (max-width: 480px) { /* RPGの演出中は、スプライトの静止画を隠す */ html.no-has body.pqh-rpgreact img.rpg-sprite-vid { visibility: hidden !important; } } /* ---- ⑨ 右下の☰が iPhone で «下のバーより低い位置» に出るのを直す --------- 【トモさんのご報告（2026-09-15）】 1問1答の画面で、右下の☰が下の言語バーより下にずれ、 Safariの下のバー（アドレス欄）に半分隠れていた。 【原因】 ☰には «描き直しのときに1フレーム消えるのを防ぐ» ために transform: translateZ(0) / will-change: transform / backface-visibility: hidden が入っていました。この3つは «別のレイヤーとして描く» 指定です。 iPhone の Safari は、こうして別レイヤーになった position:fixed の 部品を «アドレス欄が出ている分も含めた高さ» を基準に置くため、 アドレス欄が出ているあいだ、その分だけ下にずれます。 言語バーにはこの指定が無いので、正しい位置に出ていました。 （数値：☰の下端が、見えている画面の下端より 22px 下） 【直し方】 ☰からこの3つを外し、言語バーと同じ «ふつうの固定» にします。 位置・大きさ・見た目は変わりません（パソコンの :hover の回転も そのまま効きます）。 */ html body #title-menu-trigger.title-menu-trigger, html body .title-menu-trigger { transform: none !important; will-change: auto !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; } /* パソコンで «マウスを乗せたときの回転» はそのまま効かせる */ @media (hover: hover) and (pointer: fine) { html body #title-menu-trigger.title-menu-trigger:hover, html body .title-menu-trigger:hover { transform: scale(1.1) rotate(90deg) !important; } } /* ══════════════════════════════════════════════════════════════════ ⑩ ログイン画面：入力カードが そら・エマ の顔に重なる （2026-09-15・トモさんのご指摘） 【何が起きていたか】 ログイン画面は «カードを上に寄せて、下に そら と エマ を見せる» 作りです（css/rpg_theme.css の #login-modal.modal）。 ところがカードの高さは 381px で固定なので、 ブラウザの窓が縦に短いと、カードの下のふちが 二匹の «顔と帽子» の上に降りてきてしまいます。 【実測】 窓の高さ 918px … カードの下 409px／二匹の頭 485px → すき間 76px（大丈夫） 窓の高さ 618px … カードの下 400px／二匹の頭 327px → 73px 重なる（←これ） ※ 画面の拡大率を上げている場合も、見た目の窓が «縦に短い» のと 同じことになるので、同じ重なりが起きます。 【直し方】 窓が縦に短いときだけ、カードの «すき間» を詰めて背を低くします。 文字や入力らんの大きさは変えていません（小さくすると読みにくいため）。 窓が大きいときは今までどおりです。 ══════════════════════════════════════════════════════════════════ */ /* --- 1段目：窓の高さが 900px 以下（ふつうのノートPCなど） --- */ @media (min-width: 700px) and (max-height: 900px) { html body #login-modal.modal { padding-top: 1.6vh !important; } html body #login-modal .login-modal-panel { padding: 10px 20px 6px !important; } html body #login-modal .login-crown { font-size: 1.25rem !important; } html body #login-modal .login-header { margin-bottom: 4px !important; } html body #login-modal .login-divider { margin: 2px 0 6px !important; } html body #login-modal .login-form { margin-bottom: 4px !important; } } /* --- 2段目：窓の高さが 780px 以下 --- «アカウント情報を入力してください» は、入力らんに Email / Password と 書いてあるので、ここでは隠します。 */ @media (min-width: 700px) and (max-height: 780px) { html body #login-modal .login-subtitle { display: none !important; } html body #login-modal .login-crown { font-size: 1.05rem !important; } html body #login-modal .login-input-group { margin-bottom: 4px !important; } } /* --- 3段目：窓の高さが 700px 以下（かなり短いとき） --- */ @media (min-width: 700px) and (max-height: 700px) { html body #login-modal.modal { padding-top: 1vh !important; } html body #login-modal .login-crown { font-size: 0.95rem !important; } html body #login-modal .login-divider { margin: 0 0 4px !important; } html body #login-modal .login-input { padding-top: 7px !important; padding-bottom: 7px !important; } html body #login-modal .login-submit-btn { padding-top: 8px !important; padding-bottom: 8px !important; } } /* --- 4段目：窓の高さが 610px 以下（とても短いとき） --- ここまで来ると すき間 を詰めるだけでは足りないので、 カードごと少しだけ小さくします（0.88倍）。 */ @media (min-width: 700px) and (max-height: 610px) { html body #login-modal .login-modal-panel { transform: scale(0.88) !important; transform-origin: top center !important; } } /* --- おまけ：ログインカードの下に «|» だけが残っていた件 --- index.html の 2031行目で body.is-title-screen .login-link { display:none } として «パスワードをお忘れですか？» と «新規登録» を隠しているのに、 あいだの区切り «|» だけが残って、意味のない棒に見えていました。 リンクが隠れているときは «|» も一緒に隠します。 */ html body.is-title-screen #login-modal .login-footer-sep { display: none !important; } /* ══════════════════════════════════════════════════════════════════ ⑪ パソコンで «📣 報告» の高さが «☰ メニュー» とそろっていない （2026-09-15・トモさんのご指摘） 【実測（パソコン）】 📣 報告 … 画面の下から 84px、大きさ 48px → 中心は下から 108px ☰ メニュー … 画面の下から 24px、大きさ 56px → 中心は下から 52px ＝ 報告のほうが 56px 高い位置にありました。 【なぜ 84px だったか】 左下にあった開発用の «🔊 音テスト»（下から12px・高さ42px）を よけるための位置でした。音テストは 2026-09-15 に 学習者の画面から消したので、その場所が空きました。 【直し方】 📣 の «中心» を ☰ と同じ «下から52px» にそろえます。 52 − 48/2 = 28px スマホは前から そろっている（報告44／メニュー42）ので触りません。 ══════════════════════════════════════════════════════════════════ */ @media (min-width: 601px) { html body #feedback-fab { bottom: 28px !important; } } /* 開発用の «🔊 音テスト»（?diag=1 のときだけ出ます）は、 📣 報告 と同じ高さになるので、右へずらして並べます。 */ html body #sound-test-btn { left: 70px !important; } /* ══════════════════════════════════════════════════════════════════ ⑫ 料金プラン：«カードのポイントが1» で改行されて読みにくい （2026-09-15・トモさんのご指摘） 日本語は文字と文字のあいだなら «どこでも» 改行されるため、 「カードのポイントが1」 「日300ポイントまで」 のように «1» と «日» が離れてしまっていました。 «1日300ポイントまで» のひとまとまりを、 途中で切らないように指定します（index.html と js/pricing_i18n.js の .pq-nowrap で囲んだ所）。 ※ 入りきらないときは、そのかたまりごと次の行に送られます。 ══════════════════════════════════════════════════════════════════ */ .pq-nowrap { white-space: nowrap !important; } /* --- おまけ：小さい «ゃゅょっ» の前で改行されないようにする --- «カード図鑑・ガチ／ャ（…» のように、小さいカナの前で切れていました。 日本語の «禁則» を きびしい ほうにすると、 小さいカナ・長音「ー」・句読点が行のあたまに来なくなります。 料金プランと、台座（FREE/STANDARD/PREMIUM）の説明だけに効かせます。 */ html body .pricing-card li, html body .pricing-card .plan-target, html body .mode-features li, html body .mode-card .mode-target, html body #mode-detail-modal li { line-break: strict !important; word-break: normal !important; overflow-wrap: anywhere; } /* ═════════════════════════════════════════════════════════════════ ⑩③ テスト公開中の帯：ふりがなが背景と同じ色で見えない （2026-09-16・トモさんのご指摘） 【原因】 css/rpg_theme.css の 216行目に rt { color: #000000; } という «すべてのふりがなを黒にする» 指定があります。 明るい背景用の指定なので、画面ごとに 白や金に 上書きして使われています（#premium-tools-screen rt など）。 新しく作った帯にはその上書きがなかったため、 濃い紫の上に 黒いふりがな → 見えない、となっていました。 【直し方】 帯の中のふりがなを うすい金色（#ffe9a8）にし、黒い影をつけます。 （他の画面と同じやり方です） ═════════════════════════════════════════════════════════════════ */ html body .pq-test-banner rt { color: #ffe9a8 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important; font-weight: 700 !important; } /* 料金プランの画面全体も、ふりがなの色指定がありませんでした。 これからふりがなを増やしても見えなくならないようにしておきます。 （実際の文字が白なので、ふりがなも明るい色が正しい） */ html body #pricing-screen rt { color: #ffe9a8 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important; } /* ただし «金色のボタンの上» だけは文字が濃い色なので、ふりがなも濃い色に */ html body #pricing-screen .cta-button rt, html body #mode-detail-modal .mode-button-v2 rt { color: #4a3306 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; } /* ═════════════════════════════════════════════════════════════════ ⑩④ 料金プランの副題：「さい」だけが次の行に落ちていた （2026-09-16・トモさんのご指摘） 「あなたに最適な修行の道を選んでください」＝20文字。 1.2rem（19.2px）だと 20文字で 384px 必要で、 画面幅 390px のスマホでは あと少し入りませんでした。 画面幅に合わせて 文字の大きさを減らします（幅が広ければ元の 1.2rem）。 英語系・ネパール語など 長い言語は これまでどおり折り返されます。 ═════════════════════════════════════════════════════════════════ */ html body #pricing-screen .subtitle { font-size: clamp(0.80rem, 4.15vw, 1.2rem) !important; line-height: 1.55 !important; padding: 0 4px !important; } /* ═════════════════════════════════════════════════════════════════ ⑩⑤ RPGの敵の名前：日本語の下に小さく母国語を添える （2026-09-16）ワールドマップの地名（.area-name-sub）と同じ見た目。 ═════════════════════════════════════════════════════════════════ */ html body .enemy-name-sub { display: block; font-size: 0.60em; font-weight: 600; line-height: 1.2; margin-top: 3px; opacity: 0.9; letter-spacing: 0; } /* ═════════════════════════════════════════════════════════════════ ⑩⑥ BGMボタンの文字が切れて、となりの «▾» に食い込んで見える （2026-09-16・トモさんのご指摘） 【実測（幅390pxのスマホ）】 #bgm-toggle-btn 幅 48px に対して 中身は 49px → 2px 切れていた 【なぜ】 ヘッダーのボタンは flex: 1 1 auto ＋ overflow: hidden なので、 幅が足りないと文字が切られます。 【直し方】 BGMボタンだけ «縮まない» ようにします。 足りない数px は、ほかのボタン（flex:1 1 auto）が吸収します。 ═════════════════════════════════════════════════════════════════ */ html body header.app-header #bgm-toggle-btn { /* ★はじめ «縮まない» ようにしたところ、320px の画面では ヘッダーがはみ出して となりのボタンと重なりました（実測）。 そこで «縮ませたまま、中身を少し小さくして» 収めます。 */ font-size: 0.72rem !important; letter-spacing: -0.01em !important; padding-left: 2px !important; padding-right: 2px !important; overflow: visible !important; text-overflow: clip !important; } /* となりの «▾»（BGMを選ぶボタン）は 36px の固定幅でした。 せまい画面ではそれが大きすぎて、«♪ OFF» の側が 14px まで つぶれていました（実測・320px）。▾ を細くして場所をゆずります。 押せる範囲は ::after で 前後 4px ずつ広げてあるので、 見た目が細くなっても 押しにくくはなりません。 */ /* いちばん小さい画面（320px）はヘッダーが5つのボタンでいっぱいなので、 文字をひとまわり小さくして «♪ OFF» が入るようにします。 */ @media (max-width: 345px) { html body header.app-header .hdr-btn { font-size: 0.64rem !important; } html body header.app-header #bgm-toggle-btn { font-size: 0.62rem !important; } } @media (max-width: 420px) { html body header.app-header #bgm-pick-btn { flex: 0 0 auto !important; width: 22px !important; min-width: 22px !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ═════════════════════════════════════════════════════════════════ ⑩⑦ テスト公開中の帯：文字が太く見えて読みにくい・ふりがながずれる （2026-09-16・トモさんのご指摘） 【測って分かった原因】 帯 ：太さ 400 ・ふちどり なし 下の項目：太さ 700 ・黒で 4方向にふちどり ふちどりが無いと、白い文字が紫の背景ににじんで 一画ずつの境目が消え、結果として «太く» 見えます。 【直し方】 下の .plan-features li と まったく同じ 太さ・ふちどり・行の高さ にそろえます。 ふりがなは 0.55em に小さくし、 «無 料» のようなすき間を減らします。 ═════════════════════════════════════════════════════════════════ */ /* --- 共通：太さとふりがなの大きさだけそろえます --- */ html body .pq-test-banner, html body .pq-test-banner div { font-weight: 700 !important; } html body .pq-test-banner rt { font-size: 0.55em !important; font-weight: 700 !important; color: #ffe66d !important; text-shadow: rgba(0, 0, 0, .85) 0 0 4px, rgba(0, 0, 0, .9) 0 1px 2px !important; } html body .pq-test-banner > div:last-child { color: rgba(255, 255, 255, .88) !important; } /* --- 料金プランの画面の中：.plan-features li と同じ --- */ html body #pricing-screen .pq-test-banner, html body #pricing-screen .pq-test-banner div { line-height: 1.5 !important; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 4px rgba(0, 0, 0, .8) !important; } /* --- 台座（プランの説明）の中：.mode-features li と同じ --- こちらは «ふちどりなし・やわらかい影» だけです。 ふちどりを付けると、まわりより太く見えてしまいます。 */ html body #mode-detail-content .pq-test-banner, html body #mode-detail-content .pq-test-banner div { line-height: 1.45 !important; text-shadow: rgba(0, 0, 0, .9) 0 1px 4px !important; } html body #mode-detail-content .pq-test-banner { font-size: 0.97em !important; } /* ═════════════════════════════════════════════════════════════════ ⑩⑧ プランの説明（台座）— PCで «タブ» と «説明欄» が離れていた （2026-09-16・トモさんのご指摘） 【実測（幅1440px）】 タブ x=240〜720 説明欄 x=940〜1420 ← 220px も離れ、別々のものに見えていた 【なぜ】 スマホでは «縦に並べて中央ぞろえ» にしていますが、 PCでは flex-direction:row のままなので 横に並んでいました。 【直し方】 PCでもスマホと同じ «タブのすぐ下に説明欄» にそろえます。 幅はどちらも 480px なので、ぴたりと重なります。 ═════════════════════════════════════════════════════════════════ */ @media (min-width: 701px) { html body #mode-detail-modal { flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding-top: 64px !important; padding-bottom: 28px !important; } html body #mode-detail-tabs { margin: 0 auto 12px !important; } html body #mode-detail-modal .mode-detail-panel-wrap { flex: 0 1 auto !important; min-height: 0 !important; max-height: calc(100vh - 170px) !important; overflow-y: auto !important; } html body #mode-detail-modal .mode-detail-panel { max-height: none !important; } } /* ═════════════════════════════════════════════════════════════════ ⑩⑨ テスト公開中の帯：まだ «太くて見えにくい» （2026-09-16・トモさんの2回目のご指摘） 【測って分かったこと】 帯の本文 13.8px ／ 字間 なし ／ 影 rgba(0,0,0,.9) 0 1px 4px まわりの一覧 14.7px ／ 字間 0.3px ／ 影 同じ → 影は同じでした。«小さい字に ほぼ全部ふりがなが付き、 せまい幅で折り返していた» のが本当の原因です。 【直し方】 ① ことばを短くする（js/free_period_ui.js） ② 大きく・行の間を広く・字間を空ける（同上） ③ 影のにじみを 4px → 3px に細める（ここ） ふりがなも、まわりと同じ «やわらかい影» にそろえます。 ═════════════════════════════════════════════════════════════════ */ html body .pq-test-banner, html body .pq-test-banner div { text-shadow: rgba(0, 0, 0, .85) 0 1px 3px !important; } html body .pq-test-banner rt { font-size: 0.55em !important; font-weight: 700 !important; color: #ffe66d !important; text-shadow: rgba(0, 0, 0, .85) 0 0 3px, rgba(0, 0, 0, .9) 0 1px 2px !important; } /* 料金プランの画面も同じにそろえる（前の «黒い4方向ふちどり» は外します） */ html body #pricing-screen .pq-test-banner, html body #pricing-screen .pq-test-banner div { line-height: inherit !important; text-shadow: rgba(0, 0, 0, .85) 0 1px 3px !important; } html body #mode-detail-content .pq-test-banner, html body #mode-detail-content .pq-test-banner div { line-height: inherit !important; } html body #mode-detail-content .pq-test-banner { font-size: 1em !important; } /* ═════════════════════════════════════════════════════════════════ ⑪⓪ パスワードの «目» のボタン（2026-09-16・トモさんのご提案） 入力したパスワードを 見て確かめられるようにします。 とくに外国の方は、見えないまま打つと まちがえやすいためです。 ═════════════════════════════════════════════════════════════════ */ html body #login-modal .login-input-group { position: relative !important; } html body #pq-eye-btn { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; background: none !important; border: none !important; font-size: 1.15rem !important; line-height: 1 !important; padding: 6px !important; cursor: pointer !important; opacity: .75 !important; z-index: 3 !important; } html body #pq-eye-btn:hover { opacity: 1 !important; } html body #login-modal #password-input { padding-right: 46px !important; } /* ═════════════════════════════════════════════════════════════════ ⑪① テスト公開中の帯：«太すぎる» の 本当の原因が分かりました （2026-09-16・トモさんの3回目のご指摘。測って判明） 【実測】 帯の文字 font-family: "Dela Gothic One", cursive ← 見出し用の極太 下の説明・一覧 font-family: "Noto Sans JP", sans-serif ← 本文用 太さ（700）は同じでしたが、«書体そのもの» が違いました。 帯はJSで作っていて font-family を指定していないため、 親（#mode-detail-content）の見出し用フォントを受けついでいたのです。 これまで影を細くしても直らなかったのは、原因が影ではなかったからです。 【直し方】 まわりの本文と «同じ書体» にそろえます。 影も、まわりと同じ «やわらかい影» にそろえます。 ※ 前の ⑩⑨ がきかなかったのは、古い «#mode-detail-content» 付きの 指定のほうが «強かった» ためです。こちらは同じ強さ以上で書きます。 ═════════════════════════════════════════════════════════════════ */ html body .pq-test-banner, html body .pq-test-banner div, html body .pq-test-banner ruby, html body .pq-test-banner rt, html body #mode-detail-content .pq-test-banner, html body #mode-detail-content .pq-test-banner div, html body #mode-detail-content .pq-test-banner ruby, html body #mode-detail-content .pq-test-banner rt, html body #pricing-screen .pq-test-banner, html body #pricing-screen .pq-test-banner div, html body #pricing-screen .pq-test-banner ruby, html body #pricing-screen .pq-test-banner rt { font-family: "Noto Sans JP", sans-serif !important; } html body #mode-detail-content .pq-test-banner, html body #mode-detail-content .pq-test-banner div, html body #pricing-screen .pq-test-banner, html body #pricing-screen .pq-test-banner div { font-weight: 700 !important; text-shadow: rgba(0, 0, 0, .85) 0 1px 3px !important; } html body #mode-detail-content .pq-test-banner rt, html body #pricing-screen .pq-test-banner rt { text-shadow: rgba(0, 0, 0, .85) 0 0 3px, rgba(0, 0, 0, .9) 0 1px 2px !important; } /* ═════════════════════════════════════════════════════════════════ ⑪② «プランを選んで…» のボタンと タブ・説明欄のすき間がせまい （2026-09-16・トモさんのご指摘） 【実測（幅1440px）】 «プランを選んで…» ボタン y= 12〜 60 タブ y= 70〜108 ← すき間 10px しかない 説明欄 y=120〜 【直し方】 上の余白を 64px → 96px、タブと説明欄の間を 12px → 20px にします。 すき間は ボタンの下から 36px、タブの下から 20px になります。 ═════════════════════════════════════════════════════════════════ */ @media (min-width: 701px) { html body #mode-detail-modal { padding-top: 96px !important; } html body #mode-detail-tabs { margin: 0 auto 20px !important; } html body #mode-detail-modal .mode-detail-panel-wrap { max-height: calc(100vh - 210px) !important; } } /* スマホでも タブと説明欄の間を すこしだけ広げます（10px → 14px） */ @media (max-width: 700px) { html body #mode-detail-tabs { margin: 0 auto 14px !important; } }