/* ============ base.css: 全体リセット・html/body/.wrap/.screen等の土台 ============ */ * { box-sizing: border-box; } html, body { touch-action: manipulation; /* ボタン連打時にダブルタップとみなされて画面がズームされるのを防ぐ */ } body { background: var(--bg); color: var(--dw-body-color); font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif; margin: 0; padding: 0; line-height: 1.5; } /* .hero/.dungeon-bg/.battle-bgは全てheight:100vh;height:100dvh;(アドレスバーの表示/非表示で変わる実際の可視領域に追従)なのに対し、.wrapだけ100vh(アドレスバー非表示時の最大値扱い)のままだと、アドレスバー表示中は.wrapの方が.heroより長くなり、その差分だけ下にスクロールできてしまい、何も描画されていないの背景(黒)が見えてしまう不具合があった。同じdvh対応にして揃える */ .wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .screen { display: none; flex-direction: column; flex: 1; position: relative; } /* 画面切り替え時にふわっとフェードインさせる。opacityのみのアニメーションなので position:fixedの子要素(.hero/.dungeon-bg/.battle-bg等)の基準位置には一切影響しない (transformとは異なりopacityはfixed要素の containing block を作らないため安全) */ .screen.active { display: flex; animation: screenFadeIn var(--dw-t-screen) ease-out; } h2 { font-size: 18px; font-weight: 700; margin: 0 0 0.5rem; color: var(--dw-heading-color); }