につけたときもじ表のボトムシートが上にはみ出してとじるボタンが押せなくなった。） `backwards` なら始まるまえだけ 0% をあてて、おわれば transform は none にもどるので、fixed はこれまでどおり画面を基準にする。 */ @keyframes kkm-view-in { 0% { opacity: 0; transform: translateY(14px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .kkm-view-in { animation: kkm-view-in .32s cubic-bezier(.22,1,.36,1) backwards; } /* --- ならんで出てくる（カードの段だん見せ） --- --kkm-i に何ばんめかを入れる。1年生が目で追える速さ（60ms きざみ）。 fill-mode を `backwards` にする理由は上とおなじ。 */ @keyframes kkm-stagger-in { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } .kkm-stagger { animation: kkm-stagger-in .38s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--kkm-i, 0) * 60ms); } /* --- 正解の演出 --- ① 朱色の波紋が 1 回ひろがる（墨がにじむイメージ） ② 花丸が描かれる（.kkm-draw が線を引く） ③ 画面ぜんたいがほんのり明るくなるにぎやかにしすぎるとつぎのもんだいに目がもどらないので、ぜんぶ 0.9 秒いないにおさめる。 */ @keyframes kkm-ink-ring { 0% { transform: scale(.2); opacity: .55; } 70% { opacity: .18; } 100% { transform: scale(2.6); opacity: 0; } } .kkm-ink-ring { animation: kkm-ink-ring .78s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--kkm-delay, 0s); } @keyframes kkm-flash { 0% { opacity: 0; } 25% { opacity: .5; } 100% { opacity: 0; } } .kkm-flash { animation: kkm-flash .55s ease-out both; } /* 正解の花丸がどんと出る（はんこより大きく、1 回だけ）。さいごにそっと消えるのがだいじ。出したままだと花丸がこたえをかくしてしまい、「なにが正しかったか」を見そこねる。 */ @keyframes kkm-hanamaru-in { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 25% { transform: scale(1.12) rotate(3deg); opacity: 1; } 35% { transform: scale(.97) rotate(-1deg); } 45% { transform: scale(1) rotate(0deg); opacity: 1; } 72% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(1.25) rotate(0deg); opacity: 0; } } .kkm-hanamaru-in { animation: kkm-hanamaru-in 1.15s cubic-bezier(.3,1.4,.5,1) both; } /* 墨のしぶき（正解のとき花丸からとびちる小さな点） */ @keyframes kkm-speck { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--kkm-dx,0), var(--kkm-dy,0)) scale(1); opacity: 0; } } .kkm-speck { animation: kkm-speck .8s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--kkm-delay, 0s); } /* --- まちがえたとき：やさしく首をふる（しかられている感じにしない） --- */ @keyframes kkm-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2.2deg); } 75% { transform: rotate(2.2deg); } } .kkm-wobble { animation: kkm-wobble .42s ease-in-out both; } /* --- れんぞくせいかい（コンボ）のふだ --- */ @keyframes kkm-combo-in { 0% { transform: scale(.4) translateY(8px); opacity: 0; } 50% { transform: scale(1.18) translateY(0); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .kkm-combo-in { animation: kkm-combo-in .42s cubic-bezier(.3,1.6,.5,1) both; } /* --- したのメニュー：えらんだところがぴょんとはねる --- */ @keyframes kkm-nav-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.14); } 70% { transform: translateY(1px) scale(.97); } 100% { transform: translateY(0) scale(1); } } .kkm-nav-hop { animation: kkm-nav-hop .38s cubic-bezier(.3,1.5,.5,1) both; } /* --- すすみぐあいの帯がのびる --- */ @keyframes kkm-bar-grow { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .kkm-bar-grow { transform-origin: left center; animation: kkm-bar-grow .7s cubic-bezier(.22,1,.36,1) both; } /* --- 「いまこれをやる」をさししめすゆび（そっと上下する） --- */ @keyframes kkm-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .kkm-nudge { animation: kkm-nudge 1.8s ease-in-out infinite; } /* --- ひらく・とじる（もっとみる） --- */ @keyframes kkm-unfold { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } .kkm-unfold { animation: kkm-unfold .28s cubic-bezier(.22,1,.36,1) both; } /* ===================================================================== 背景：国語の教科書の紙面生成りの和紙に、原稿用紙のようなごくうすいマス目を敷く。 ===================================================================== */ .kkm-app-bg { background-color: var(--kkm-paper); background-image: linear-gradient(rgba(179,67,40,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(179,67,40,0.045) 1px, transparent 1px), radial-gradient(circle at 50% 0%, rgba(179,67,40,0.05) 0%, transparent 60%); background-size: 48px 48px, 48px 48px, 100% 320px; background-attachment: fixed; } /* 朱色の見出し罫（セクションの左に立てる縦棒） */ .kkm-heading-rule { border-left: 4px solid var(--kkm-shu); padding-left: 0.5rem; line-height: 1.25; } /* 紙面のカード（白い用紙） */ .kkm-sheet { background: #fff; border: 1px solid var(--kkm-rule); box-shadow: 0 1px 2px rgba(46,42,37,0.05); } /* 背景のマス目より前面にアプリ本体を出す。ここで position まで上書きすると、直下にいる紙吹雪キャンバスやモーダル・トースト（position:fixed）まで巻きぞえで relative になってしまい、画面のなかに居座ってレイアウトを押しつぶす。（Tailwind の .fixed とセレクタの強さが同じなので、CSS の読みこみ順しだいでどちらが勝つか変わる＝こわれやすい。）そのため position を与えるのは実際に並べる 3 つだけにする。 */ /* ⚠️ `:not(.fixed)` を外してはいけない。この 1 行は Tailwind の `.z-[300]` と **おなじ強さ**（クラス 1 つ）で、しかもこのファイルは Tailwind のあとにつながる（tools/build.mjs）。つまりあとがちでこちらが勝ち、`z-[300]` と書いたモーダルまで z-index が 1 になる。

は 2 なので、**モーダルが

のうしろにかくれる**。じっさいに、トロフィーの「ごほうびのはんこずかん」をひらくとうしろの画面（とくべつのユニット一覧など）がモーダルの上にかぶさって出ていた。ならべる 3 つ（nav / main / footer）と下タブは position:relative なので、`position:fixed` のものだけよければならびはこれまでとまったく同じ。 */ .kkm-app-bg > *:not(.fixed) { z-index: 1; } .kkm-app-bg > nav, .kkm-app-bg > main, .kkm-app-bg > footer { position: relative; } /* ⚠️

は下タブより前に置くこと。上の 1 行で

は「かさなりのひとまとまり（stacking context）」になる。すると **その中の position:fixed も、そのまとまりの中でしか前に出られない**。下タブ（.kkm-bottom-nav）は

のあとにあるきょうだいでおなじ z-index なので、あとに書いたほうが勝ち、

の中のモーダルは z-[300] をつけても下タブにかくれる。じっさいに、もじ表のボトムシートの下のほうと、「ことばをつくる」の「ずかんについか」ボタンが下タブのうしろに入って押せなかった。（420×860 のスマホの大きさでさいげんした。）

と下タブはばしょがかさならない（

は overflow:hidden）ので、ここを前に出しても見た目はかわらない。かわるのは「

の中のモーダルが画面ぜんたいをおおえるか」だけ。 */ /* `:not(.fixed)` は上の 1 行とそろえること。そろえないと上の行（クラス 2 つぶんの強さ）に負けて、

まで z-index:1 になり、下タブと同じたかさになる（あとに書いてある下タブが勝って、またかくれる）。 */ .kkm-app-bg > main:not(.fixed) { z-index: 2; } /* 紙吹雪は必ず画面ぜんたいに固定（id 指定なので順序に左右されない） */ #confettiCanvas { position: fixed; inset: 0; z-index: 400; } /* ===================================================================== 端末非依存レイアウト：あらゆる解像度で「かきじゅん」ボタンまで必ず表示する ===================================================================== */ /* ルートは実描画領域(dvh)に正確にフィット（アドレスバー込み）。 100vh だとモバイルのアドレスバーのぶんだけはみ出す。 Tailwind の .h-screen に勝つよう !important。 */ .kkm-app-root { height: 100dvh !important; /* ノッチ／ホームインジケータ（iPhone 等）を避ける安全余白。 PWA スタンドアロン起動時に UI が隠れないようにする。 */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); box-sizing: border-box; } /* キャンバス用：正方形だがコンテナの幅・高さどちらにも絶対にはみ出さない。 container queries で min(横幅, 縦幅) に揃える。 */ .kkm-square-fit-container { container-type: size; } .kkm-square-fit { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); } /* container queries 非対応ブラウザ向けフォールバック */ @supports not (container-type: size) { .kkm-square-fit { width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; } } /* ── 高さ ≤ 820px（タブレット横置きや低解像度ノートPC）── */ @media (max-height: 820px) { .kkm-app-root > nav { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .kkm-app-root > footer { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; } /* メイン領域とプラクティスボードの内側余白を圧縮 */ .kkm-app-root main > .kkm-main-pad { padding: 0.375rem !important; gap: 0.375rem !important; } .kkm-practice-board { padding: 0.5rem !important; } .kkm-practice-board .kkm-board-header { margin-bottom: 0.25rem !important; } /* 見出しは 1 行にたたんであるので、まるだけ小さくしてつめる（文字そのものは小さくしない。読めなくなっては意味がない） */ .kkm-stepper-row li { width: 28px !important; height: 28px !important; } /* ボタン群は必ず見える：マージンと内側パディングを縮小。文字は 16px までしか下げない（13px まで落とすと、せまい画面の子ほど読めないボタンを押すことになる）。 ⚠️ .kkm-primary / .kkm-solid / min-h-[…] は **たかさを直にきめている** ので、padding だけつめてもちぢまない。かならず min-height もいっしょに上書きすること。ここを忘れると、画面のたかさが足りない端末でかきとりのマスだけがつぶれる。（当たり判定は .kkm-btn::before が 52px を確保するので、見た目をつめても指で押せる大きさはのこる。） */ .kkm-practice-buttons { margin-top: 0.375rem !important; gap: 0.375rem !important; } .kkm-practice-buttons > button { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; min-height: 48px !important; font-size: 1rem !important; } .kkm-practice-board > button.kkm-cta-btn { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; margin-top: 0.25rem !important; min-height: 54px !important; font-size: 1.0625rem !important; } } /* ── 高さ ≤ 700px ── */ @media (max-height: 700px) { .kkm-daily-wrap { display: none !important; } .kkm-progress-row { display: none !important; } .kkm-practice-board { padding: 0.375rem !important; } .kkm-app-root > nav h1 { font-size: 1rem !important; } /* ヘッダー・下タブ・ボタンをもうひとまわりつめて、けずったぶんはぜんぶかきとりのマスにまわす。 */ .kkm-app-root > nav .kkm-btn { height: 44px !important; min-height: 44px !important; width: 44px; min-width: 44px; } .kkm-bottom-nav button { min-height: 48px !important; } .kkm-practice-buttons > button { min-height: 44px !important; } .kkm-practice-board > button.kkm-cta-btn { min-height: 48px !important; } .kkm-practice-board .kkm-board-header { margin-bottom: 0.125rem !important; } } /* ── 高さ ≤ 580px（小型 Chromebook、横置き低解像度タブレット）── */ @media (max-height: 580px) { /* ここまでせまいと見出しのまるもおしい。消すのはすすみぐあい（ステップのまる）だけにして、「いまなにをするか」のひとことはのこす。 */ .kkm-stepper-row { display: none !important; } .kkm-app-root > footer { display: none !important; } .kkm-app-root main > .kkm-main-pad { padding: 0.25rem !important; gap: 0.25rem !important; } .kkm-bottom-nav button { min-height: 42px !important; } .kkm-bottom-nav svg { width: 20px !important; height: 20px !important; } /* 「もじをえらぶ」バーもつめる（マスのほうが大事） */ .kkm-main-pad > .shrink-0 > .kkm-solid { min-height: 44px !important; } .kkm-main-pad > .shrink-0 > .w-14 { width: 44px !important; height: 44px !important; } /* たすけての 3 ボタンは、たかさがおしいのでよこ 1 列にもどす */ .kkm-practice-buttons > button { flex-direction: row !important; } /* 見出しの 1 行もつめる（消しはしない。なにをするかがわからなくなる） */ .kkm-board-header { margin-bottom: 0.125rem !important; } .kkm-board-header img { width: 24px !important; height: 24px !important; } .kkm-board-header span { font-size: 1rem !important; } .kkm-practice-board > button.kkm-cta-btn { min-height: 44px !important; } } /* ── たかさ ≤ 580px でよこ幅もせまい（＝小さなスマホ）とき ── たすけての 3 ボタンは絵だけにする。ならびも色も場所もかえないのでどれがどれかはわかるし、よみあげ用の名まえ（aria-label）はのこる。 */ @media (max-height: 580px) and (max-width: 639px) { .kkm-practice-buttons > button { font-size: 0 !important; gap: 0 !important; } .kkm-practice-buttons > button svg { width: 26px !important; height: 26px !important; } } /* ⚠️ 「よこ置きのときは下タブをやめて上のタブにする」はやらないこと。たかさは 48px かせげるが、上のタブは 1024px 以上のよこ幅をあてこんだならびなので、800px ではアプリ名・タブ・右のボタンがかさなって読めなくなる。（実際に 800×480 でかさなった。）かせげるのは 10px たらずで、わりに合わない。下タブはどのたかさでも下タブのままにする。 */ /* ── 究極の安全網：それでも収まらない極小画面では縦スクロール許可 ── */ @media (max-height: 460px) { .kkm-app-root { height: auto !important; min-height: 100dvh; overflow-y: auto !important; } .kkm-app-root > main { overflow: visible !important; } .kkm-app-root .kkm-main-pad { overflow: visible !important; } .kkm-square-fit { width: min(60dvh, 90vw); height: min(60dvh, 90vw); } } /* ===================================================================== 「あたらしいばんがあります」のおしらせ（js/boot.js がつくる）おすまで切りかわらない。書きかけの字が消えるとこまるため。 ===================================================================== */ .kkm-update-toast { position: fixed; left: 50%; transform: translateX(-50%); /* ホームバーのぶんを足して、iPhone で下にかくれないようにする */ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 500; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(92vw, 30rem); padding: 10px 14px; border-radius: 10px; border: 1px solid #93331e; background: #fff; box-shadow: 0 4px 16px rgba(46, 42, 37, .18); font-size: 0.9375rem; } .kkm-update-toast__msg { color: #443f38; font-weight: 600; } /* 白地で 9.1:1 */ .kkm-update-toast__btn { padding: 8px 14px; border-radius: 8px; border: 1px solid #93331e; background: #b34328; /* 白ぬき文字で 5.3:1 */ color: #fff; font-weight: 600; cursor: pointer; } .kkm-update-toast__btn:disabled { opacity: .6; cursor: default; } .kkm-update-toast__later { padding: 8px 10px; border-radius: 8px; border: 1px solid #c3bcae; background: #fff; color: #5c554c; /* 白地で 7.0:1 */ font-weight: 600; cursor: pointer; } /* ===================================================================== 印刷このアプリに印刷して配るための画面は無い。それでも先生が Ctrl+P を押すことはあるので、画面に貼りついているボタンやおしらせが紙に出てしまわないようにしておく。 ===================================================================== */ @media print { @page { size: A4 portrait; margin: 10mm; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; } .no-print, .kkm-update-toast, #confettiCanvas { display: none !important; } .kkm-app-root { height: auto !important; overflow: visible !important; } a[href]::after { content: ""; } /* URL を併記しない */ }