/* ============================================================ ui-soft.css ── 押せるものを「柔らかい札」にする（2026-08-06） ------------------------------------------------------------ 宗道さんの指摘：「影がなくて平面で、非常にエクセル感というかAI感がある」 直角・単色・影なしの面は、表計算の升目とまったく同じ作りなので、 押せる物に見えない。角を丸め／下に一段の沓（くつ）を置き／押すと沈む。 ゲームの画面が押しやすいのはこの三つで、けばけばしい色のせいではない。 ■ 決めごと ・色は一色も増やしていない。地・字の色には一切さわらない。 ここが変えるのは【角】【影】【押したときの沈み】だけ。 ・**幅いっぱいの淡い面に、色の輪郭線を引かない。** 線で囲むと押せる札ではなく「入力欄」に見える（2026-08-06・実物で確認）。 線ではなく、面を持ち上げて押せると言う。 ■ 触らないもの（意図的に外してある） 下部タブバー（.mobile-tab）／各種タブ（.news-tab .cat-tab .filter-tab）／ 丸い小さなボタン（.icon-btn .close-btn .notice-iconbtn .video-play-btn）。 これらは「札」ではないので、浮かせると別物に見える。 ■ 配置は壊れない 使っているのは border-radius と box-shadow だけで、どちらも配置に 影響しない。transform は :active（押している間）だけ。 ■ 直すときは ★このファイル1枚を直せば、当たっている全ページに届く。 ★ただし CSS はキャッシュ優先で配られる。直したら sw.js の CACHE_NAME の版数を必ず上げること（上げないと会員に届かない）。 ■ 読み込む場所 各ページの の【いちばん最後】。先に置くとページ側の指定に負ける。 セレクタの頭の `body` も同じ理由。外さないこと。 ■ 色の変数について 本棚（honbana）以外のページには色のトークン層が無く、色は直書きである。 そのため var(--midori-300, #7cc47a) のように【必ず控えの色】を書いてある。 控えを消すと、他のページで影が消える。 ============================================================ */ /* ---- 一、角と、押したときの動き（押せるもの全部） -------------- */ /* ★.btn-main は 26px の俵形。ここに入れると角が【減って】しまうので入れない。 すでに丸いものは丸いまま（2026-08-06・宗道さんの指定）。 */ body .btn-sub, body .btn-primary, body .btn-secondary, body .btn-regen, body .btn-back-maps, body .btn-save, body .btn-done, body .btn-submit, body .gate-btn-primary, body .gate-btn-secondary, body .plan-gate-btn-primary, body .plan-gate-btn-secondary, body .memo-save, body .notes-save, body .quiz-next, body .btn, body .chip, body .ai-ask-btn, body .kaiki-btn, body .live-zoom-btn, body .souron-link-cta, body .first-steps-cta, body .quiz-choice, body .ob-choice, body .ev-btn, body .qg-btn, body .format-btn, body .copy-btn, body .recommendation, body .resume-hero-cta, body .quiz-today-cta, body .keiko-today-cta, body .kayoi-today-cta, body .hiroma-cta, body .header-cta, body .hero-cta, body .next-cta, body .nd-cta, body .cta-btn, body .schedule-btn, body .att-btn, body .action-btn, body .complete-btn, body .sphere-card .sc-go { border-radius: 0.625rem; transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease; } /* ---- 二、塗りの札（主）。上に淡い光、下に濃い緑の沓 ------------ 緑の地であることが分かっているものだけに当てる。 地の色を知らないものに濃い緑の沓を置くと、浮いて見えるため。 */ body .live-zoom-btn, body .kaiki-btn, body .chip.active { background-image: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 55%); box-shadow: 0 2px 0 var(--midori-900, #1b5e20), 0 3px 10px rgba(45,59,30,0.22); } /* ---- 三、淡い面の札。輪郭線を引かず、沓だけで厚みを出す -------- ★border: none を戻さないこと。ここに線を引くと升目に見える。 */ body .ai-ask-btn, body .recommendation { border: none; box-shadow: 0 2px 0 var(--midori-300, #7cc47a), 0 3px 10px rgba(45,59,30,0.14); } /* ---- 四、そのほかの札（従）。色を持たない沓で、地を選ばない ---- */ body .btn-main, body .btn-sub, body .btn-primary, body .btn-secondary, body .btn-regen, body .btn-back-maps, body .btn-save, body .btn-done, body .btn-submit, body .gate-btn-primary, body .gate-btn-secondary, body .plan-gate-btn-primary, body .plan-gate-btn-secondary, body .memo-save, body .notes-save, body .quiz-next, body .btn, body .chip:not(.active), body .souron-link-cta, body .first-steps-cta, body .quiz-choice, body .ob-choice, body .ev-btn, body .qg-btn, body .format-btn, body .copy-btn, body .resume-hero-cta, body .quiz-today-cta, body .keiko-today-cta, body .kayoi-today-cta, body .hiroma-cta, body .header-cta, body .hero-cta, body .next-cta, body .nd-cta, body .cta-btn, body .schedule-btn, body .att-btn, body .action-btn, body .complete-btn, body .sphere-card .sc-go { box-shadow: 0 2px 0 rgba(45,59,30,0.12), 0 3px 10px rgba(45,59,30,0.12); } /* ---- 五、押した瞬間に沈む ------------------------------------ 指に返事が返るかどうかで、押した確信が変わる。 */ body .btn-main:active, body .btn-sub:active, body .btn-primary:active, body .btn-secondary:active, body .btn-regen:active, body .btn-back-maps:active, body .btn-save:active, body .btn-done:active, body .btn-submit:active, body .gate-btn-primary:active, body .gate-btn-secondary:active, body .plan-gate-btn-primary:active, body .plan-gate-btn-secondary:active, body .memo-save:active, body .notes-save:active, body .quiz-next:active, body .btn:active, body .chip:active, body .ai-ask-btn:active, body .kaiki-btn:active, body .live-zoom-btn:active, body .souron-link-cta:active, body .first-steps-cta:active, body .quiz-choice:active, body .ob-choice:active, body .ev-btn:active, body .qg-btn:active, body .format-btn:active, body .copy-btn:active, body .recommendation:active, body .resume-hero-cta:active, body .quiz-today-cta:active, body .keiko-today-cta:active, body .kayoi-today-cta:active, body .hiroma-cta:active, body .header-cta:active, body .hero-cta:active, body .next-cta:active, body .nd-cta:active, body .cta-btn:active, body .schedule-btn:active, body .att-btn:active, body .action-btn:active, body .complete-btn:active, body .sphere-card .sc-go:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(45,59,30,0.18); } /* ---- 六、押せない札は浮かせない ------------------------------ 浮いていると押せると誤解する。 */ body .btn:disabled, body .chip:disabled, body .ev-btn:disabled, body .quiz-choice:disabled, body .ob-choice:disabled, body .format-btn:disabled, body button:disabled { box-shadow: none; transform: none; }