/* ===================================================================== おばけ算数 － 見た目（3/5）：タイトル・図鑑・ヒントの演出 --------------------------------------------------------------------- もとは1本の style.css でした。中身は1文字も変えず、行の順番も そのままで 5 本に分けただけです。 ★ CSSは「後に書いたほうが勝つ」ので、index.html の の 並び順を入れ替えないでください。1→2→3→4→5 の順です。 ===================================================================== */ :root{ --css-3-loaded:1; } /* ================= レスポンシブ ================= */ /* タブレット縦：全体を大きく、余白を広げる */ @media (min-width:700px) and (orientation:portrait){ #stage{--apple:96px; --btn-size:118px; --ghost-w:min(28vw,260px); --line-fs:clamp(22px,3vw,30px); --num-fs:clamp(52px,7vw,70px);} .card{padding:64px 48px 56px;} .card h1{font-size:38px;} .card p{font-size:21px;} .tagPrimary{font-size:31px;padding:20px 58px;} #bannerTitle{font-size:36px;} #bannerSub{font-size:21px;} #bannerIcon{font-size:74px;} #miniGhost{width:150px;} #endGhost{width:160px;} } /* 横向き（タブレット横・スマホ横）：左におばけ、右に問題 */ @media (orientation:landscape) and (min-width:820px){ #stage{--apple:82px; --btn-size:112px; --ghost-w:min(26vw,300px); --line-fs:clamp(20px,2.4vw,28px); --num-fs:clamp(46px,5vw,64px);} #tree{height:22%;} #treeCrown{width:min(70vw,700px);} .card{padding:38px 40px;} .card h1{font-size:32px;} .card p{font-size:19px;} .tagPrimary{font-size:27px;padding:17px 50px;} } /* 小型スマホ縦：はみ出しを防ぐ */ @media (max-width:360px){ #stage{--apple:52px; --btn-size:74px; --ghost-w:min(44vw,160px);} } /* ================= v007: タイトル・図鑑・完了画面 ================= */ .btnRow{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;} /* 二次ボタンは共通コンポーネント（style-base.css の .markTag .tagFlat）へ移した。 旧 .midBtn / .midBtn.subBtn の丸いピル型はもう使わない */ #bookBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,45,110,.25);} #bookBtn svg{width:62%;height:62%;} /* ---- v0.11: ゲーム中からマップへ戻るボタン（ずかんボタンの左どなり） ---- */ /* 見た目は共通の .markTag（style-base.css）が持つ。ここは置き場所だけを決める。 札は上から垂れるので、画面の上端へ寄せる。 */ #mapBtn{position:absolute;left:4%;top:0;z-index:76;} @media (min-width:700px) and (orientation:portrait){ #mapBtn{--tag-w:clamp(66px,9vw,82px);} } @media (orientation:landscape) and (min-width:820px){ #mapBtn{left:2.5%;--tag-w:clamp(62px,6vw,76px);} } /* ===================================================================== v0.11: オープニング画面（1枚絵を全画面で使う） --------------------------------------------------------------------- 絵の縦横比は 1536:1024（3:2）。どの端末でも絵全体が切れずに入るよう、 中央は「contain」で表示し、余白は同じ絵をぼかして敷いて埋める。 「はじめる」は絵の中に描かれているので、その位置に透明ボタンを重ねる。 ボタン位置は元画像の座標（x540〜1000 / y475〜608）から算出した％。 絵を差し替えたらこの％も測り直すこと。 ===================================================================== */ #miniGhost[hidden]{display:none;} /* --------------------------------------------------------------------- タイトル画面の考え方（重要） --------------------------------------------------------------------- はじめる ボタンは、絵の中に描かれたボタンの上に透明な当たり判定を 重ねる作りだった。そのため絵が出ないと、見えないボタンだけが残り、 真っ暗な画面で操作できなくなる事故が起きた。 そこで既定と例外を入れ替えた。 既定 … 文字のタイトル＋色つきのボタン（必ず見える） 絵が読めたら … JS が artReady を付けて、絵のレイアウトへ切り替える 絵が届かない・遅い・名前が違う、のどれであっても遊べる状態から始まる。 --------------------------------------------------------------------- */ #startOverlay{padding:0;background:#2B2450;backdrop-filter:none;background-image:none;} #startOverlay::before{content:'';position:absolute;inset:0;display:none; backdrop-filter:blur(30px) brightness(.55);} #titleArt{position:relative;z-index:1; aspect-ratio:1536/1024; width:min(100%, calc(100dvh * 1536 / 1024)); max-height:100dvh; background-image:none; background-size:contain;background-position:center;background-repeat:no-repeat; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;} #titleFallback{display:block;margin:0;text-align:center; font-size:clamp(34px,9vw,52px);font-weight:900;color:#FFF3C9; text-shadow:0 4px 0 rgba(0,0,0,.25);letter-spacing:.04em;} #titleFallback small{display:block;font-size:.4em; color:#C9BCEA;margin-top:10px;font-weight:700;} /* 「はじめる」も共通の積み木と同じ作り。ふち1本＋木口の面で、 絵の上でも文字だけの画面でも輪郭が残る */ #startBtn{position:static;width:auto;height:auto;border:none; min-height:64px; font-size:clamp(20px,5.4vw,25px);color:#5A3A00; border-radius:var(--t-radius-m,18px);padding:8px clamp(26px,7vw,44px); background:linear-gradient(180deg,var(--t-lantern-300,#FFD77A) 0%,var(--btn) 38%); box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 6px 0 var(--btn-shadow), 0 10px 14px rgba(8,5,20,.44); animation:none; font-family:inherit;font-weight:900; -webkit-tap-highlight-color:transparent;cursor:pointer; transition:transform var(--t-dur-press,90ms) var(--t-ease-standard,ease), box-shadow var(--t-dur-press,90ms) var(--t-ease-standard,ease);} #startBtn:active{transform:translateY(6px); box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 0 0 var(--btn-shadow), 0 2px 5px rgba(8,5,20,.5);} /* ---- ここから下は「絵が読めたとき」だけ ---- */ #startOverlay.artReady{background:#1A1533; background-image:var(--title-img);background-size:cover;background-position:center;} #startOverlay.artReady::before{display:block;} #startOverlay.artReady #titleArt{background-image:var(--title-img);display:block;} /* 文字ロゴは絵の中にあるので、見出しは見た目から外す。 読み上げと文書構造のためにDOMには残す（display:none にしない）。 */ #startOverlay.artReady #titleFallback{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} #startOverlay.artReady #titleFallback small{display:none;} /* 「はじめる」は絵に焼き込まず、いつも見えるHTMLのボタンのまま置く。 絵の上でも色・文字・影を消さない。位置だけを絵の門の内側へ合わせる。 top は #titleArt（＝絵の枠）に対する割合なので、回転・リサイズでも追従する。 */ #startOverlay.artReady #startBtn{position:absolute;left:50%;top:50%; transform:translateX(-50%); width:auto;height:auto;min-height:64px; display:inline-flex;align-items:center;justify-content:center; font-size:clamp(22px,2.4vw,34px);padding:.5em 1.6em; border-radius:var(--t-radius-m,18px); color:#5A3A00; background:linear-gradient(180deg,var(--t-lantern-300,#FFD77A) 0%,var(--btn) 38%); animation:titleBtnPulse 2.4s ease-in-out infinite;} #startOverlay.artReady #startBtn:active{ transform:translate(-50%,6px);animation:none; box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 0 0 var(--btn-shadow), 0 2px 5px rgba(8,5,20,.5);} /* 押せる場所だと分かるように、絵の上でだけ光を足す。下の影は消さない */ @keyframes titleBtnPulse{ 0%,100%{box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 6px 0 var(--btn-shadow), 0 10px 14px rgba(8,5,20,.44), 0 0 10px 1px rgba(255,226,142,0);} 50% {box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 6px 0 var(--btn-shadow), 0 10px 14px rgba(8,5,20,.44), 0 0 30px 10px rgba(255,226,142,.55);}} @media (prefers-reduced-motion: reduce){ #startOverlay.artReady #startBtn{animation:none; box-shadow:inset 0 0 0 3px var(--t-lantern-700,#9A5B10), 0 6px 0 var(--btn-shadow), 0 10px 14px rgba(8,5,20,.44), 0 0 22px 7px rgba(255,226,142,.45);}} /* ====================================================================== タイトルの飾り：ゆれる火の玉と、たまに横切るコウモリ 絵の上に重ねるだけ。pointer-events:none なので「はじめる」は普通に押せる。 絵が読めなかったとき（artReady なし）は出さない。 「算数おばけ」v1.0.0 の絵にも光は描き込まれているが、その上へ ゆらめく火の玉とときどき横切るコウモリを重ねる（作者指示 2026-09-03）。 火の玉の座標は現行のたて絵・よこ絵の両方で暗い場所を選び直してある。 ====================================================================== */ #titleFx{position:absolute;inset:0;z-index:2;pointer-events:none; overflow:hidden;} /* ---- 火の玉 ---- 絵に描かれている青い炎のそばに、動く光をそっと重ねる。 位置はたて向きの絵で実測。よこ向きの絵でも暗い場所に来るように選んである。 */ #titleFx .tFlame{position:absolute; width:var(--w);aspect-ratio:1; left:var(--x);top:var(--y); transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 60%, rgba(232,248,255,.95) 0%, rgba(140,205,255,.72) 30%, rgba(80,150,255,.34) 56%, rgba(60,120,255,0) 74%); animation:tFlameFloat var(--d) ease-in-out infinite; animation-delay:var(--dl);} @keyframes tFlameFloat{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.50; } 28% { transform:translate(-49%,-58%) scale(1.14); opacity:.95; } 58% { transform:translate(-52%,-64%) scale(.92); opacity:.66; } 80% { transform:translate(-50%,-55%) scale(1.04); opacity:.82; } } /* ---- コウモリ ---- 3層に分けて、横に進む・上下にゆれる・羽ばたく をそれぞれ担当させる。 1つの要素にまとめると transform が競合して羽ばたきが消える。 */ #titleFx .tBat{position:absolute;top:var(--y);width:var(--w); animation:tBatFly var(--d) linear forwards;} #titleFx .tBat.rl{animation-name:tBatFlyRL;} #titleFx .tBat > i{display:block; animation:tBatBob calc(var(--d)/5) ease-in-out infinite;} #titleFx .tBat.rl > i{transform:scaleX(-1);} /* 夜空が濃い紺なので、同系色だと影として読めない。ほぼ黒まで落とす。 */ #titleFx .tBat svg{display:block;width:100%;height:auto; fill:#05040D;opacity:.88; animation:tBatFlap var(--f) ease-in-out infinite;} @keyframes tBatFlap{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.42);}} @keyframes tBatBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9%);}} #titleFx .tBat.rl > i{animation-name:tBatBobRL;} @keyframes tBatBobRL{0%,100%{transform:scaleX(-1) translateY(0);} 50% {transform:scaleX(-1) translateY(-9%);}} @keyframes tBatFly {0%{left:-16%;opacity:0;} 9%,90%{opacity:1;} 100%{left:114%;opacity:0;}} @keyframes tBatFlyRL{0%{left:114%;opacity:0;} 9%,90%{opacity:1;} 100%{left:-16%;opacity:0;}} /* 動きを減らす設定の端末では、飾りを止める */ @media (prefers-reduced-motion: reduce){ #titleFx .tFlame{animation:none;opacity:.6;} #titleFx .tBat{display:none;} } /* #titleArt の外（#startOverlay 直下）へ移したので、position:fixed の基準が 絵の枠ではなく画面になる。縦画面では絵の枠に transform が掛かるため、 中に置いていると絵の下端が基準になり、画面の外へ出る端末があった。 bottom はこれまでどおり safe-area の内側へ 14px。 */ #titleSubBtns{position:fixed;left:0;right:0;z-index:3;gap:10px; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);} #titleSubBtns .markTag{font-size:15px;padding:9px 18px;min-height:52px;opacity:.96;} @media (min-width:700px){ #titleSubBtns .markTag{font-size:18px;padding:12px 24px;min-height:56px;} } /* タイトルの縦画面では、左下の「せってい」を右上へ逃がす。 下段の札は画面中央にそろえる決まりで、2枚出たときの幅は 302px 固定。 せっていは左端から 62px を占めるので、中央ぞろえを保ったまま逃げ場を 作るには画面幅が 446px 必要で、対象のスマホ縦（360〜430px）では どうやっても「おばけずかん」に重なる。第10章・合成画面で先に採った 「左下の帯と重ねず、空いている上の帯へ置く」やり方に合わせる。 大きさ（clamp(50px,11vw,60px)）と押したときの動きは変えていない。 iPad横は下段まで 325px 空いていて重ならないので、左下のまま。 :has() が無い端末では左下のままになるだけで、押せなくはならない。 */ @media (orientation:portrait){ body:has(#startOverlay:not(.hidden)) #settingsBtn{ top:max(12px,env(safe-area-inset-top,0px)); right:max(12px,env(safe-area-inset-right,0px)); left:auto;bottom:auto;} } /* --------------------------------------------------------------------- 縦画面（スマホ）は縦長版の絵を画面いっぱいに敷く。 絵は 941:1672（スマホ縦版v2）。画面より大きく引き伸ばして、はみ出た分は切る。 縦長版が見つからない時は hasTall が付かないので、上の横長＋contain の表示のまま（＝真っ暗にはならない）。 ボタンは門の内側、ロゴの下と帽子のおばけの上のあいだへ置く。 --------------------------------------------------------------------- */ #startOverlay{overflow:hidden;} @media (orientation:portrait){ #startOverlay.artReady.hasTall{background-image:var(--title-img-tall);background-size:cover;} #startOverlay.artReady.hasTall::before{display:none;} /* 絵の高さ。width と aspect-ratio から決まる値と同じものを計算で持っておく */ #startOverlay.artReady.hasTall #titleArt{ --art-h:max(calc(100vw * 1672 / 941), 100dvh); position:absolute;left:50%;transform:translateX(-50%); /* はみ出た分は上の空から切る。まず絵の下端を画面の下端へそろえ、 それだとロゴが画面の上へ出てしまう画面でだけ、ロゴの上に14px残る所で止める。 0.215 は絵の中でロゴの一番上（板の上の小さいおばけ）が始まる位置の割合。 こうすると、下の帽子のおばけと2本の道が切れない。 */ top:max(calc(100dvh - var(--art-h)), calc(14px - var(--art-h) * 0.215)); aspect-ratio:941/1672; width:max(100vw, calc(100dvh * 941 / 1672)); max-height:none;height:auto; background-image:var(--title-img-tall); background-size:100% 100%;} #startOverlay.artReady.hasTall #startBtn{ top:52%;font-size:clamp(20px,5.8vw,30px);} } @media (min-width:700px) and (orientation:portrait){ } @media (orientation:landscape) and (min-width:820px){ } /* --- 図鑑 --- */ /* ===================================================================== おばけ図鑑（承認素材 v1.0.1 ／ 3層構成） --------------------------------------------------------------------- 素材は2026-08-20承認の1枚絵を、描き足しなしで3層へ分離したもの。 room → paper → book の順に重ねると承認画像へ画素単位で戻る。 したがって3層は必ず同じ矩形へ置き、層ごとに拡大率も位置も変えない。 CSSのscaleで近づける調整は行わない。 #zukanCanvas … 承認画像と同じ縦横比の枠。画面内へ収める #zukanRoom … 部屋。動かない #zukanStage … 紙と中身（.zLeaf）がめくれる場所 #zukanFrame … 本枠とタイトル札。紙より前面。動かない マスの位置は承認画像から実測した％。1マスずつの座標は持たず、 通常9枠はCSS Gridが割り付ける。章名・キャラクター名の分岐は作らない。 絵を差し替えたら、この％を測り直すこと。 ===================================================================== */ #zukanOverlay{z-index:120;align-items:center;justify-content:center;padding:0; overflow:hidden;touch-action:none;background:var(--zk-void); /* ---- スマホ縦（承認画像 853×1844）の実測値 ---- */ --zk-void:#040414; /* 画面が承認画像より横長の時の地色 */ --zk-w:853; --zk-h:1844; --zk-grid-l:13.36%; --zk-grid-t:24.37%; /* 通常9枠 x 114.0–735.4 / y 449.4–1183.1 */ --zk-grid-w:72.85%; --zk-grid-h:39.79%; --zk-grid-gx:3.34%; --zk-grid-gy:5.64%; /* 列20.8px・段41.4px */ --zk-sp-l:13.56%; --zk-sp-t:65.56%; /* 特別枠 x 115.7–733.2 / y 1209.0–1513.7 */ --zk-sp-w:72.39%; --zk-sp-h:16.52%; --zk-hinge:18.66%;} /* 紙の上端＝めくりの回転軸 y=344 */ @media (orientation:landscape){ #zukanOverlay{ /* ---- iPad横（承認画像 1448×1086）の実測値 ---- */ --zk-void:#020211; --zk-w:1448; --zk-h:1086; --zk-grid-l:13.00%; --zk-grid-t:26.06%; /* x 188.2–833.1 / y 283.0–880.3 */ --zk-grid-w:44.54%; --zk-grid-h:55.00%; --zk-grid-gx:3.09%; --zk-grid-gy:3.45%; /* 列19.9px・段20.6px */ --zk-sp-l:60.20%; --zk-sp-t:26.15%; /* x 871.7–1301.0 / y 284.0–880.9 */ --zk-sp-w:29.65%; --zk-sp-h:54.96%; --zk-hinge:16.94%;} /* 紙の上端 y=184 */ } /* 承認画像と同じ縦横比の枠。画面へ収めるので本の全体が必ず見える。 3層はこの枠の中で inset:0 に置き、background-size:100% 100% で 完全に一致させる（cover/contain だと層ごとに端数がずれる）。 */ #zukanCanvas{position:relative;z-index:1; aspect-ratio:var(--zk-w) / var(--zk-h); width:min(100vw, calc(100dvh * var(--zk-w) / var(--zk-h)));} #zukanRoom,#zukanStage,#zukanFrame{position:absolute;inset:0;} #zukanRoom {z-index:0;background-image:var(--zk-room); background-size:100% 100%;background-repeat:no-repeat;} #zukanFrame{z-index:3;background-image:var(--zk-book); background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;} /* ---- ページめくり（下端から上へ）--------------------------------- 紙と中身を一体（.zLeaf）で回す。回転軸は紙の上端。 次のワールドの面は先に下（.under）へ置いてあるので、 めくった紙の下から本物の次ページが現れる。 めくっている紙は、遠近法で手前へ来る下端が左右へ広がる。何もしないと iPad横で紙が部屋の壁を越え、画面の外まではみ出して、めくり中の名前が 画面端で切れる（実測：140ms で左右±437px、330ms で±825px）。 2026-08-21 の承認済み仕様により、#zukanOverlay へ data-leaf-clip="on" を 付けて紙を本の絵の中へ収める。スマホ縦はキャンバスが画面いっぱいのため この指定でも見え方は変わらない（画素差ゼロを確認済み）。 章・キャラクター固有の分岐は作らない。 ------------------------------------------------------------------- */ #zukanStage{z-index:1;perspective:1100px;overflow:visible;} #zukanOverlay[data-leaf-clip="on"] #zukanStage{overflow:hidden;} .zLeaf{position:absolute;inset:0;transform-origin:center var(--zk-hinge); will-change:transform,opacity;} .zLeaf.under{z-index:1;} .zLeaf.over {z-index:3;} .zPaper{position:absolute;inset:0;background-image:var(--zk-paper); background-size:100% 100%;background-repeat:no-repeat;} /* rotateXは正の角度で下端が手前へ持ち上がる。0.46秒。 90度を過ぎるあたりで消えるので、紙の裏面は見えない。 */ .zLeaf.turnUp {animation:zLeafUp .46s cubic-bezier(.4,.02,.35,1) forwards;} .zLeaf.turnDown{animation:zLeafDown .46s cubic-bezier(.4,.02,.35,1) forwards;} @keyframes zLeafUp{ 0% {transform:rotateX(0deg); opacity:1;} 60% {transform:rotateX(66deg); opacity:1;} 100%{transform:rotateX(104deg); opacity:0;} } @keyframes zLeafDown{ 0% {transform:rotateX(104deg); opacity:0;} 40% {transform:rotateX(66deg); opacity:1;} 100%{transform:rotateX(0deg); opacity:1;} } /* めくっている間、下の面へ紙の影が落ちる */ #zShade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(40,25,10,.34) 0%,rgba(40,25,10,.10) 46%,transparent 74%);} #zShade.on{animation:zShade .46s ease-out forwards;} @keyframes zShade{0%{opacity:.85}70%{opacity:.30}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .zLeaf.turnUp {animation:none;opacity:0;} .zLeaf.turnDown{animation:none;opacity:1;} #zShade{display:none;} } /* ---- 紙面の中身。印刷された枠の実測位置へ重ねる ---- */ /* minmax(0,1fr) にしないと、名前が2行になったマスの min-content が効いて 行が押し広げられ、印刷された枠から中身がずれる。枠は絵に入っているので、 マスの大きさは常に紙面の実測値どおりに固定する。 */ .zGrid{position:absolute;left:var(--zk-grid-l);top:var(--zk-grid-t); width:var(--zk-grid-w);height:var(--zk-grid-h); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); column-gap:var(--zk-grid-gx);row-gap:var(--zk-grid-gy);} .zSpecial{position:absolute;left:var(--zk-sp-l);top:var(--zk-sp-t); width:var(--zk-sp-w);height:var(--zk-sp-h); display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);} /* 1マス。印刷枠いっぱいを押せるようにして、小さい指でも当たるようにする */ .zslot{position:relative;border:none;background:transparent;padding:0;font-family:inherit; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; -webkit-tap-highlight-color:transparent;} .zslot img{width:84%;height:auto;max-height:50%;object-fit:contain; flex:0 1 auto;min-height:0;} .zSpecial .zslot img{max-height:60%;} @media (orientation:landscape){ .zslot img{max-height:58%;} .zSpecial .zslot img{max-height:64%;} } /* スマホを横にすると1マスが低くなる。名前2行ぶんの高さを先に確保する */ @media (orientation:landscape) and (max-height:520px){ .zslot img{max-height:42%;} .zSpecial .zslot img{max-height:56%;} } .zslot:not(.locked):active{transform:scale(.92);} /* まだ会っていないマスは「？」。印刷枠は絵に入っているので枠は描かない */ .zq{font-size:clamp(22px,6vw,34px);font-weight:900;color:rgba(120,102,80,.45);line-height:1;} .zSpecial .zq{font-size:clamp(30px,8vw,46px);} /* 図鑑の名前。救出完了画面の .zname とは分けてある（共有すると片方の調整が もう片方へ出てしまうため）。 正式名は必ず全部出す。行数で切らず、字を詰めもしない。 大きさは「マスの幅」だけで決める共通式にした。おばけごとの例外は作らない。 ・vw基準だと画面が狭いほど下限18pxに張り付き、長い名前が入りきらずに 省略されていた。マスの幅（cqw）を基準にすると、マスが小さい端末では 字も一緒に小さくなり、名前が枠の中へ収まる。 ・上限20px：iPad横のマス幅で、いちばん長い正式名（7字）が1行に収まる大きさ。 ・下限16px：デザイントークンの child_text_absolute_min_px。 1行に収めるには7字で12px程度まで落とす必要があり、これは下限を割るため、 小さくするのではなく2行へ折り返して全部見せる。 ・16pxになるのは、縦向きで画面幅がおよそ388px未満の端末（iPhone SE・8・ mini級）と、スマホを横にした場合。child_name_and_action_min_px:18 を 2px下回るが、名前は省略も欠けもしていないため、2026-08-21 の承認済み 仕様により許容する。版面（マスの実測％）は変更しない。 cqw に対応しない古い端末では、直前の18px指定がそのまま効く。 */ .zslot{container-type:inline-size;} /* 名前の大きさをマスの幅から決めるため */ .zkname{font-size:18px;} .zkname{font-size:clamp(16px, 20.5cqw, 20px); font-weight:900;color:#5A4A2A;line-height:1.15; text-align:center;margin-top:1px;max-width:100%;padding:0 2px;letter-spacing:-.01em; /* 2行になるときの折り返し位置は禁則にしたがう。どこでも切ってよい指定だと 「おばけち／ゃん」のように小書きの字が行頭へ来て読めなくなる。 */ word-break:normal;line-break:strict;overflow-wrap:normal;flex:0 0 auto;} /* 救出完了画面（#compGhostCard）が使う名前。図鑑からは参照しない */ .zname{font-size:clamp(18px,4.4vw,22px);font-weight:900;color:#5A4A2A;line-height:1.2; text-align:center;margin-top:1px; max-width:100%;padding:0 3px;letter-spacing:-.01em; overflow-wrap:anywhere; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;flex:0 0 auto;} .newBadge{position:absolute;top:-2px;right:-2px;background:#FF6B81;color:#fff; font-size:12px;font-weight:900;padding:2px 7px;border-radius:10px;letter-spacing:.3px; box-shadow:0 2px 5px rgba(0,0,0,.35);} /* v71：図鑑へのお迎えは設計書11.2「世界の祝い」に該当し、 上限の指定がないため据え置き（1.22倍・往復1回）。 */ .zslot.pop{animation:zpop 1.1s cubic-bezier(.3,1.5,.5,1);} @keyframes zpop{0%{transform:scale(.4)}45%{transform:scale(1.22)}70%{transform:scale(.96)}100%{transform:scale(1)}} .zslot.shine::before{content:"";position:absolute;inset:-8%;border-radius:50%; background:radial-gradient(circle,rgba(255,238,170,.95) 0%,rgba(255,214,110,.5) 45%,transparent 72%); animation:zshine 1.4s ease-out 2;pointer-events:none;} @keyframes zshine{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.35)}} /* ---- 画面に固定する操作。本の絵の上に文字や器を焼き込まないため、 ページ送り・ページ番号・もどるは、すべて画面基準で下に置く ---- */ /* ページ送りは「▲ 1/2 ▼」の1行にまとめ、もどるボタンの上へ置く。 左下の設定ボタンと重ならない位置にするため、下の段には置かない。 */ #zPageNav{position:fixed;left:50%;z-index:118;transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 72px); display:flex;align-items:center;gap:14px;} #zPageNav[hidden]{display:none;} /* ページ送りは小さな札。丸い白ボタンはやめ、他の札と同じ紙と枠にする */ #zPrev,#zNext{width:clamp(48px,12vw,56px);height:clamp(48px,12vw,56px); padding:0;font-size:clamp(19px,5vw,24px);} #zPrev[disabled],#zNext[disabled]{opacity:.42;} #zPageNo{white-space:nowrap;font-size:clamp(13px,3.4vw,17px);font-weight:900;color:#FFF3C9; background:rgba(40,28,66,.78);padding:4px 16px;border-radius:14px; text-shadow:0 1px 4px rgba(0,0,0,.6);} #zukanClose{position:fixed;left:50%;z-index:118;transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); min-height:52px;font-size:clamp(16px,4.2vw,19px);padding:13px 34px;} #zukanToast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4; background:rgba(74,63,102,.94);color:#fff;font-weight:700;font-size:15px;text-align:center; padding:11px 20px;border-radius:20px;line-height:1.6;white-space:nowrap;} #zukanDetail{z-index:130;} #detailImg img{width:min(46vw,190px);height:min(46vw,190px);object-fit:contain;} #detailDesc{white-space:pre-line;line-height:1.9;} #detailStage{font-size:14px;font-weight:900;color:#fff;background:#6C5FA7; padding:4px 14px;border-radius:13px;display:inline-block;} .zno{font-size:13px;font-weight:700;color:#9A8FBB;} /* --- 救出完了カード --- */ #compGhostCard .zcard{position:relative;background:#FFF9EF;border-radius:22px; padding:16px 26px;display:flex;flex-direction:column;align-items:center;gap:5px; box-shadow:0 6px 0 rgba(40,25,10,.15);pointer-events:none;} #compGhostCard .zcard img{width:min(38vw,150px);height:min(38vw,150px);object-fit:contain;} #compGhostCard .zname{font-size:20px;color:var(--ink);} #compGhostCard .newBadge{top:9px;right:11px;font-size:13px;padding:3px 10px;} #endGhost img{width:110px;display:block;} /* ================= v008 盤面（1〜2枚のお皿） ================= */ /* おばけ・問題文・お皿を縦に積む。行数や画面比が変わっても重ならない */ /* お皿の合図と「触れない」状態は style-play.css の共通木皿側で持つ。 ここにあった旧CSS皿むけの box-shadow / 木目背景は、あとから読み込まれる ぶん共通木皿の見た目に勝ってしまうため撤去した。 お皿を使わない #zoneSource の点滅だけをここへ残す。 */ /* 置き場（お皿ではない四角い領域）の点滅は、これまでどおり枠の光で出す。 共通木皿の plateFlash は素材の形に沿った光なので、ここでは使えない。 */ #zoneSource.flash{animation:zoneFlash .6s ease-in-out 2;border-radius:24px;} @keyframes zoneFlash{ 0%,100%{box-shadow:0 0 0 0 rgba(255,238,160,0)} 50% {box-shadow:0 0 0 8px rgba(255,238,160,.95)}} #plateWrap.hide{opacity:0;transition:opacity .4s;pointer-events:none;} #playArea.hide{opacity:0;transition:opacity .4s;} .item{position:absolute;z-index:10;touch-action:none;will-change:transform; width:62px;height:62px; transition:left .18s ease, top .18s ease, width .18s, height .18s;} .item svg,.item img{width:100%;height:100%;display:block;object-fit:contain; filter:drop-shadow(0 4px 5px rgba(20,40,10,.4));pointer-events:none;transition:transform .15s;} .item.fixed{opacity:.95;} .item.fixed::after{content:"";position:absolute;inset:0;} .item.dragging{z-index:50;transition:none;} .item.dragging svg,.item.dragging img{transform:scale(1.14); filter:drop-shadow(0 12px 10px rgba(20,40,10,.45)) brightness(1.05);} .item.wiggle svg,.item.wiggle img{animation:itemWiggle .5s ease-in-out 2;} /* ====================================================================== ヒントの演出（段階1〜3） 段階1：静かに光らせるだけ（数は教えない） 段階2：目標の側を強めに光らせる（既存の .flash を使う） 段階3：最初の1個だけ、行き先へ向かって動いて戻る（移動はしない） ====================================================================== */ /* 段階1：動かせる物。ふわっと明るくなるだけで、跳ねたりはしない */ .item.canMove{animation:itemCanMove 1.5s ease-in-out 1;} @keyframes itemCanMove{ 0%,100%{ filter:none; transform:translate(0,0); } 45% { filter:brightness(1.22) drop-shadow(0 0 9px rgba(255,244,214,.85)); transform:translateY(-3%); } } /* 段階1：置ける場所。.flash より弱く、ゆっくり明滅する */ .plate.softGlow, #zoneSource.softGlow{animation:zoneSoftGlow 1.7s ease-in-out 1;} @keyframes zoneSoftGlow{ 0%,100%{ box-shadow:inherit; filter:none; } 50% { filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,240,205,.55)); } } /* 段階3：行き先へ向かって出て、戻ってくる。最後まで運ばないのが大事 */ .item.demoMove{ z-index:40; animation:itemDemoMove 1.5s cubic-bezier(.35,.9,.4,1) 1; } @keyframes itemDemoMove{ 0% { transform:translate(0,0) scale(1); } 38% { transform:translate(var(--demoX,0), var(--demoY,0)) scale(1.07); } 62% { transform:translate(var(--demoX,0), var(--demoY,0)) scale(1.07); } 100%{ transform:translate(0,0) scale(1); } } /* 動きを減らす設定では、移動の実演をやめて明るさの変化だけにする */ @media (prefers-reduced-motion:reduce){ .item.demoMove{ animation:itemCanMove 1.2s ease-in-out 1; } .item.canMove{ animation:none; filter:brightness(1.2); } } @keyframes itemWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}} .item.eaten{transition:left .29s ease-in, top .29s ease-in;} .item.eaten svg,.item.eaten img{transition:transform .29s ease-in,opacity .29s;transform:scale(.1);opacity:0;} /* タブレット縦 */ @media (min-width:700px) and (orientation:portrait){ } /* 横向き：左におばけ、右に問題 */ @media (orientation:landscape) and (min-width:820px){ } /* 小型スマホ縦 */ @media (max-width:360px){ } /* 縦が短い画面（アプリ内ブラウザ・小型端末）：全体を詰める */ @media (max-height:820px) and (orientation:portrait){ #stage{--ghost-w:min(34vw,150px);} } /* 横向きで縦が狭い場合（スマートフォン横持ち）：さらに詰める */ @media (orientation:landscape) and (max-height:520px){ #stage{--ghost-w:min(20vw,190px); --apple:56px; --btn-size:84px;} }