@charset "utf-8"; /* ===================================================================== おばけ算数 － 見た目（CSS） --------------------------------------------------------------------- index.html から切り出したものです。中身は一切変えていません。 並び順も詳細度もそのままなので、後ろにあるものほど強く効きます。 順番を入れ替えると表示が崩れます。 このファイルは index.html と同じ場所（リポジトリ直下）に置いてください。 url('assets/...') はこのCSSの場所を基準に解決されるため、 置き場所を変えると画像が読めなくなります。 構成 前半 … 全画面共通・タイトル・プレー画面・マップ・図鑑 後半 … 第10章（区切り章）専用。前半を上書きするので必ず後ろに置く ===================================================================== */ :root{ --sky-top:#3E3566; --sky-mid:#6C5FA7; --sky-low:#B79BC9; --horizon:#F7CFA0; --grass:#7FBF6A; --grass-dark:#4F8F45; /* お皿＝木のおぼん。板の札や地図の木枠と同じ木の世界にそろえる */ --plate:#F6E7C8; --plate-rim:#C9A971; --plate-wood:#9A7440; --plate-deep:#7A5A31; --btn:#FFB03A; --btn-shadow:#D68A1E; --ink:#4A3F66; /* オープニングの1枚絵。横向き用と、スマホ縦用の縦長版 */ --title-img:url('assets/title_bg.webp'); --title-img-tall:url('assets/title_bg_tall.webp'); --map-img:url('assets/map_bg_world01_deep_forest.webp'); --zukan-img:url('assets/zukan_bg.webp'); /* プレー中の森の背景（ステージ進行で切り替える） */ --stage-bg-1:url('assets/stage_bg_1.webp'); --stage-bg-2:url('assets/stage_bg_2.webp'); --stage-bg-3:url('assets/stage_bg_3.webp'); --stage-bg:none; } *{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;} html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#3A3168;} /* 端末によっては押した後の枠線が細い線として残るため消しておく */ button:focus{outline:none;} button:focus-visible{outline:3px solid rgba(255,226,142,.9);outline-offset:2px;} body{ font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif; color:var(--ink); touch-action:none; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 40%,var(--sky-low) 66%,var(--horizon) 78%,var(--grass) 78%,var(--grass-dark) 100%); transition:background 1.2s; } body[data-stage="2"]{--sky-top:#4A4278;--sky-mid:#8878BC;} body[data-stage="3"]{--sky-top:#5B5490;--sky-mid:#A793D2;--sky-low:#DCC4E0;} #stage{position:fixed;inset:0;overflow:hidden; --apple:62px; --btn-size:86px; --ghost-w:min(42vw,190px); --line-fs:clamp(15px,4vw,19px); --num-fs:clamp(34px,10vw,44px);} /* ===================================================================== プレー中の森の背景 --------------------------------------------------------------------- おばけ・相棒・問題文・お皿は、すべてこの上の別レイヤーに置いている。 背景の絵にはおばけを描き込まないこと。 切り替えは JS の STAGE_BACKGROUNDS（面の範囲→ファイル）だけで管理する。 ===================================================================== */ #stageBg{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--stage-bg);background-size:cover; background-position:center 42%;background-repeat:no-repeat; opacity:0;transition:opacity .6s; /* 夜の色みへの補正。強さは面ごとに JS から差し替える */ filter:saturate(var(--bg-sat,.75)) brightness(var(--bg-bright,.9)) contrast(1.06); isolation:isolate;} /* ← 下の夜幕が背景の中だけで効くようにする（UIは暗くしない） */ body.hasStageBg #stageBg{opacity:1;} /* ---- 夜幕（背景の中だけ）-------------------------------------------- 単純な黒ではなく、青紺を「乗算」で重ねている。乗算は暗いところほど 強く沈み、明るいところは残るので、ランタンの暖色の灯りが消えずに 相対的に浮き上がる。中央をうすく、外側を濃くして周辺減光も兼ねる。 強さ（--night-strength）は面ごとに変える。 -------------------------------------------------------------------- */ #stageBg::before{content:"";position:absolute;inset:0; mix-blend-mode:multiply;opacity:var(--night-strength,.4); background:radial-gradient(128% 82% at 50% 44%, rgba(150,172,214,1) 0%, rgba(96,116,172,1) 46%, rgba(44,56,102,1) 100%);} /* 文字とおばけが背景に負けないよう、うっすら幕をかける */ #stageBg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(14,12,32,.26) 0%, rgba(14,12,32,.06) 28%, rgba(14,12,32,.04) 64%, rgba(14,12,32,.24) 100%);} /* 森の絵と重なると邪魔になる飾りは隠す */ body.hasStageBg #tree, body.hasStageBg .star{display:none;} /* 背景が濃いので、おばけの輪郭を強めて浮き上がらせる */ body.hasStageBg #ghostImgs{filter:drop-shadow(0 12px 18px rgba(10,6,26,.6)) drop-shadow(0 0 3px rgba(255,255,255,.35));} .star{position:absolute;border-radius:50%;background:#FFF3C9;animation:twinkle 3s ease-in-out infinite;} @keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}} /* ---------- lanterns (progress) ---------- */ .lan svg{width:100%;height:100%;display:block;} .lanGlass{fill:#4A4270;transition:fill .6s;} .lan.on .lanGlass{fill:#FFD86B;} .lan.on{filter:drop-shadow(0 0 12px rgba(255,216,107,.9));animation:lanPop .6s ease-out;} @keyframes lanPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}} /* ---------- ghost ---------- */ @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} #ghostWrap.excited{animation:hop .42s ease-in-out 2;} @keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}} #ghostWrap.tilt{animation:tilt .6s ease-in-out 2;} @keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(7deg)}} #ghostImgs{position:relative;width:100%;aspect-ratio:1/1; filter:drop-shadow(0 10px 14px rgba(30,20,60,.35));} /* 各状態の見え方はJSからCSS変数として流し込む（キャラごとの分岐はCSSに書かない） */ .gimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;pointer-events:none; --bright:1; --sat:1; --gscale:1; --gy:0px; --glow:0px; --alpha:1; --sway:0px; --swayS:1; --swayB:1; --swayD:5s; --glowc:rgba(255,255,255,0); transition:opacity .8s ease; animation:ghostSway var(--swayD) ease-in-out infinite; will-change:transform, filter;} #ghostImgs[data-stage="0"] .g0, #ghostImgs[data-stage="1"] .g1, #ghostImgs[data-stage="2"] .g2, #ghostImgs[data-stage="3"] .g3{opacity:var(--alpha);} @keyframes ghostSway{ 0%,100%{ transform:translateY(var(--gy)) scale(var(--gscale)); filter:brightness(var(--bright)) saturate(var(--sat)) drop-shadow(0 0 var(--glow) var(--glowc)); } 50% { transform:translateY(calc(var(--gy) - var(--sway))) scale(calc(var(--gscale) * var(--swayS))); filter:brightness(calc(var(--bright) * var(--swayB))) saturate(var(--sat)) drop-shadow(0 0 calc(var(--glow) * 1.3) var(--glowc)); } } /* ===================================================================== 盤面レイアウト（統合版） --------------------------------------------------------------------- #playArea は常に画面中央に「1つの箱」として配置する（left:50%+ transform:translateX(-50%)を常にセットで維持し、左右非対称に ズラす時も必ずtransformを揃えて書く。これが崩れると中心がズレる）。 縦持ち：#playArea を縦のFlexboxにして、おばけ→問題文→お皿の順に積む。 横持ち：#playArea をCSS Gridにして、左列＝おばけ（縦方向に中央寄せで 2行分を占有）、右列＝問題文とお皿を縦に並べる。おばけをposition:absolute で箱の外に逃がす方式は、箱自体もposition:absoluteだと入れ子の基準点が 狂うため使わない。 ===================================================================== */ #playArea{position:absolute;left:50%;top:2%;transform:translateX(-50%);z-index:8; width:min(96vw,600px);height:66%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(12px,3vw,24px);pointer-events:none;} #promptText{width:100%;text-align:center; display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;} .pline{font-weight:900;color:var(--ink);line-height:1.35; font-size:clamp(19px,5.4vw,26px); background:rgba(255,252,246,.93);border-radius:16px;padding:5px 14px; box-shadow:0 3px 0 rgba(60,45,110,.13);align-self:center;} .pline2{font-size:clamp(20px,5.8vw,28px);} /* ===================================================================== プレー画面 v2（いまは第1章だけ。body.playV2 が付いたときだけ効く） ===================================================================== */ /* ---- B. 問題文は白い2段カードではなく、おばけが話す1つの吹き出し ---- */ body.playV2 .pbubble{position:relative;font-weight:900;color:var(--ink); line-height:1.3;font-size:clamp(20px,5.6vw,27px); background:rgba(255,252,246,.95);border-radius:20px;padding:9px 20px; box-shadow:0 4px 0 rgba(60,45,110,.14), 0 8px 18px rgba(20,12,40,.22); max-width:min(86vw,460px);text-align:center;} /* おばけが話しているように見せる短い尻尾。上向き（おばけは吹き出しの上にいる） */ body.playV2 .pbubble::after{content:"";position:absolute;top:-9px;left:50%; transform:translateX(-50%); border-left:11px solid transparent;border-right:11px solid transparent; border-bottom:11px solid rgba(255,252,246,.95);} body.playV2 #promptText{gap:0;} /* ---- A. お皿を約72%へ。立体感と影も弱めて、お皿だけが目立たないようにする ---- */ body.playV2 #stage.lay-one .plate{max-width:min(58vw,262px);height:min(22vw,110px);} body.playV2 #stage.lay-two .plate{max-width:min(33vw,182px);height:min(25vw,124px);} body.playV2 .plate{ box-shadow: inset 0 0 0 3px rgba(154,116,64,.45), inset 0 2px 0 rgba(255,248,228,.6), inset 0 -6px 10px rgba(122,90,49,.22), 0 6px 0 var(--plate-wood), 0 8px 0 var(--plate-deep), 0 12px 15px rgba(20,12,4,.32);} body.playV2 .plate.hot{ box-shadow: inset 0 0 0 3px rgba(154,116,64,.45), inset 0 2px 0 rgba(255,248,228,.6), 0 0 0 5px rgba(255,238,160,.9), 0 6px 0 var(--plate-wood), 0 8px 0 var(--plate-deep), 0 12px 16px rgba(20,12,4,.32);} /* おばけと操作対象の距離を近づけ、同じ場面の中にいるように見せる */ body.playV2 #plateWrap{padding-top:clamp(8px,2vw,14px);} body.playV2 #playArea{gap:clamp(6px,1.8vw,14px);} /* 操作領域の後ろだけを柔らかく暗くして、りんごを見やすくする */ body.playV2 #zoneSource::before{content:"";position:absolute;inset:-6% -4%; z-index:-1;pointer-events:none;border-radius:44%; background:radial-gradient(ellipse at 50% 50%, rgba(16,10,34,.42) 0%, rgba(16,10,34,.22) 52%, rgba(16,10,34,0) 78%);} /* ---- E. りんごを置くたびの、おばけの小さな反応 ---- */ /* 置くほど少しだけ明るくなる灯り。画像そのものには触れないので、 既存の4状態（weak/awake/restored/full）の見た目と競合しない */ #stepGlow{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); width:96%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle, rgba(255,236,180,.55) 0%, rgba(255,214,120,0) 66%); opacity:0;transition:opacity .45s ease;} body.playV2 #stepGlow{opacity:calc(var(--stepLit,0) * .85);} /* 置いた瞬間の、ごく小さな上下。大声で褒めない */ @keyframes ghostStep{ 0%{transform:translateY(0)} 42%{transform:translateY(-6px)} 100%{transform:translateY(0)} } @keyframes ghostWait{ /* 最後の1個の前だけ、少し期待した反応 */ 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-9px) scale(1.035)} 100%{transform:translateY(0) scale(1)} } body.playV2 #ghostWrap.stepReact{animation:ghostStep .42s ease-out;} body.playV2 #ghostWrap.stepReact.lastOne{animation:ghostWait .58s ease-out;} @media (prefers-reduced-motion:reduce){ body.playV2 #ghostWrap.stepReact, body.playV2 #ghostWrap.stepReact.lastOne{animation:none;} } #plateWrap{width:100%;display:flex;gap:min(4vw,26px); justify-content:center;align-items:flex-start; padding-top:clamp(20px,5vw,26px); pointer-events:auto;} .plate{position:relative;flex:1 1 0;max-width:min(78vw,360px); height:min(30vw,150px);border-radius:50%; /* 上から：光のあたり／木目／おぼんの地色 */ background: radial-gradient(ellipse at 50% 26%, rgba(255,250,236,.85) 0%, rgba(255,250,236,0) 58%), repeating-linear-gradient(178deg, rgba(150,116,66,.13) 0 1px, rgba(0,0,0,0) 1px 7px, rgba(150,116,66,.07) 7px 8px, rgba(0,0,0,0) 8px 15px), radial-gradient(ellipse at 50% 34%, var(--plate) 58%, var(--plate-rim) 100%); /* ふちの立ち上がりと、おぼんの厚み */ box-shadow: inset 0 0 0 4px rgba(154,116,64,.55), inset 0 3px 0 rgba(255,248,228,.75), inset 0 -9px 14px rgba(122,90,49,.30), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 18px 22px rgba(20,12,4,.45); transition:box-shadow .18s, filter .18s;} #stage.lay-one .plate{max-width:min(78vw,360px);} #stage.lay-two .plate{max-width:min(44vw,250px);height:min(34vw,170px);} .plate.hot{filter:brightness(1.06); box-shadow: inset 0 0 0 4px rgba(154,116,64,.55), inset 0 3px 0 rgba(255,248,228,.75), 0 0 0 6px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 18px 24px rgba(20,12,4,.45);} .plate.flash{animation:plateFlash .6s ease-in-out 2;} @keyframes plateFlash{ 0%,100%{box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 20px rgba(20,12,4,.42)} 50% {box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 0 0 8px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 24px rgba(20,12,4,.42)}} /* 触れないお皿は、木の色を沈ませる */ .plate.locked{ background: repeating-linear-gradient(178deg, rgba(120,96,60,.12) 0 1px, rgba(0,0,0,0) 1px 7px), radial-gradient(ellipse at 50% 34%, #E3D6BC 58%, #BCA582 100%); filter:saturate(.7) brightness(.96);} .zlabel{position:absolute;left:50%;top:clamp(-24px,-5vw,-20px);transform:translateX(-50%); font-size:clamp(13px,3.6vw,17px);font-weight:900;color:#FFF3D6; text-shadow:0 2px 4px rgba(30,20,60,.6);white-space:nowrap;} .zcount{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%); font-size:clamp(14px,3.8vw,18px);font-weight:900;color:var(--ink); background:rgba(255,252,246,.94);border-radius:12px;padding:2px 11px; box-shadow:0 2px 0 rgba(60,45,110,.14);white-space:nowrap;} #zoneSource{position:absolute;left:3%;right:3%;top:70%;height:22%;z-index:1;} #lanterns{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:16px;} .lan{width:34px;height:42px;position:relative;} #bookBtn{position:absolute;right:4%;top:12px;z-index:76; width:clamp(48px,11vw,58px);height:clamp(48px,11vw,58px);border:none;border-radius:50%; background:rgba(255,249,239,.92);box-shadow:0 4px 0 rgba(60,45,110,.25); display:flex;align-items:center;justify-content:center;padding:0;} #ghostWrap{width:var(--ghost-w);max-width:100%;flex:0 0 auto; animation:bob 3.4s ease-in-out infinite;} #teaser{position:fixed;right:8%;bottom:18%;z-index:95;width:110px;opacity:0; transition:opacity 1s, transform 1s;transform:translateY(30px);pointer-events:none;} #line{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:65; background:rgba(255,255,255,.92);border-radius:20px;padding:8px 18px; font-weight:700;font-size:var(--line-fs);white-space:nowrap;color:var(--ink); box-shadow:0 4px 0 rgba(60,45,110,.12);opacity:0;transition:opacity .3s;pointer-events:none;} #line.show{opacity:1;} /* ---- タブレット縦：全体を大きく ---- */ @media (min-width:700px) and (orientation:portrait){ #lanterns{gap:26px;top:26px;} .lan{width:52px;height:64px;} #teaser{width:180px;bottom:20%;} #bookBtn{width:70px;height:70px;top:22px;} #playArea{top:2%;height:62%;gap:22px;width:min(90vw,780px);} .pline{font-size:clamp(26px,3.4vw,34px);padding:8px 22px;border-radius:22px;} .pline2{font-size:clamp(27px,3.6vw,36px);} #plateWrap{gap:36px;padding-top:34px;} #stage.lay-two .plate{max-width:min(40vw,340px);height:min(22vw,190px);} #stage.lay-one .plate{max-width:min(62vw,520px);height:min(17vw,160px);} #zoneSource{left:7%;right:7%;top:68%;height:23%;} .zcount{font-size:22px;bottom:-32px;padding:3px 14px;} .zlabel{font-size:22px;top:-32px;} } /* ---- 横向き：CSS Gridで左＝おばけ、右＝問題文とお皿の2列にする ---- */ @media (orientation:landscape) and (min-width:820px){ #stage{--apple:82px; --btn-size:112px; --ghost-w:min(24vw,240px); --line-fs:clamp(20px,2.4vw,28px); --num-fs:clamp(46px,5vw,64px);} #lanterns{left:50%;top:5%;gap:22px;} .lan{width:46px;height:57px;} #tree{height:22%;} #treeCrown{width:min(70vw,700px);} #line{bottom:2%;} #teaser{right:5%;bottom:24%;width:150px;} #bookBtn{width:62px;height:62px;right:2.5%;} #playArea{ /* 箱全体は常に画面中央に固定する（left:50%とtransformは崩さない）。 下の置き場(#zoneSource)と重ならないよう、縦の占有を抑えておく */ top:6%;height:56%; width:min(88vw,760px); display:grid; grid-template-columns:minmax(150px,32%) 1fr; grid-template-rows:1fr auto; align-items:center; column-gap:clamp(16px,3vw,32px); row-gap:10px; } #ghostWrap{grid-column:1;grid-row:1 / span 2;justify-self:center;align-self:center;} #promptText{grid-column:2;grid-row:1;align-self:end;} #plateWrap{grid-column:2;grid-row:2;align-self:start;padding-top:20px;} .pline{font-size:clamp(20px,2.3vw,28px);} #stage.lay-two .plate{max-width:min(21vw,220px);height:min(15vw,150px);} #stage.lay-one .plate{max-width:min(40vw,400px);height:min(13vw,130px);} /* playAreaの下端(top+height=62%)より確実に下から始める */ #zoneSource{left:34%;right:4%;top:68%;height:28%;} } /* ---- 小型スマホ縦：はみ出しを防ぐ ---- */ @media (max-width:360px){ #lanterns{gap:11px;} .lan{width:29px;height:36px;} #line{font-size:14px;padding:7px 14px;} .pline{font-size:17px;padding:4px 10px;} #stage.lay-two .plate{height:min(44vw,165px);} #zoneSource{top:71%;height:21%;} } /* ---- 縦が短い画面（アプリ内ブラウザ・小型端末） ---- */ @media (max-height:820px) and (orientation:portrait){ #stage{--ghost-w:min(34vw,150px);} #playArea{top:1%;height:68%;gap:clamp(8px,2vw,14px);} .pline{font-size:clamp(17px,4.8vw,22px);padding:4px 12px;border-radius:14px;} .pline2{font-size:clamp(18px,5.0vw,23px);} #plateWrap{padding-top:17px;} #stage.lay-one .plate{height:min(26vw,125px);} #stage.lay-two .plate{height:min(30vw,134px);} .zcount{bottom:-21px;font-size:14px;padding:2px 9px;} .zlabel{top:-18px;font-size:14px;} } /* ---- 横向きで縦が狭い場合（スマートフォン横持ち） ---- */ @media (orientation:landscape) and (max-height:520px){ #stage{--ghost-w:min(20vw,150px); --apple:56px; --btn-size:84px;} #playArea{top:4%;height:88%;width:min(92vw,640px);column-gap:14px;row-gap:6px;} .pline{font-size:clamp(15px,2vw,20px);padding:3px 10px;} .pline2{font-size:clamp(16px,2.1vw,21px);} #stage.lay-one .plate{max-width:min(36vw,300px);height:min(11vw,100px);} #stage.lay-two .plate{max-width:min(19vw,170px);height:min(12vw,106px);} .zcount{bottom:-18px;font-size:12px;} .zlabel{top:-16px;font-size:12px;} #zoneSource{left:32%;right:4%;top:60%;height:34%;} } /* ===== v008: 予告・バナー・行・キラキラの基本CSS（メディアクエリより前） ===== */ #teaser.show{opacity:1;transform:translateY(0);animation:teaseBob 2.6s ease-in-out infinite 1s;} @keyframes teaseBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} #teaser svg,#teaser img{width:100%;display:block;filter:drop-shadow(0 0 16px rgba(120,220,255,.6));} #teaser img.auto-sil{ filter:brightness(0) drop-shadow(0 0 14px rgba(140,220,255,.55)); opacity:.9; } #teaserQ{position:absolute;top:-26px;left:50%;transform:translateX(-50%); font-size:34px;font-weight:900;color:#8FE3FF;text-shadow:0 0 14px rgba(140,230,255,.8);} #teaserImg{width:100%;} #banner{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:22px; background:rgba(40,30,80,.5);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .45s;} #banner.show{opacity:1;pointer-events:auto;} #bannerCard{padding:40px 30px 36px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:14px; max-width:90vw;min-width:min(80vw,300px); transform:scale(.7);transition:transform .45s cubic-bezier(.3,1.5,.5,1); /* --- 古びた木の板（実素材の1枚絵）--------------------------------- ふちが欠けた形なので、四角い影は付けられない。 box-shadow ではなく filter:drop-shadow を使うと、絵の形どおりに影が落ちる。 画像は assets/card-plank.webp（透過webp） */ /* 下地の色は置かない。置くと、欠けたふちの透過部分まで塗ってしまう */ background:url('assets/card-plank.webp') no-repeat center/100% 100%; border-radius:0; box-shadow:none; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); min-height:min(28vh,210px); justify-content:center; } #banner.show #bannerCard{transform:scale(1);} #bannerIcon{font-size:52px;} #bannerTitle{font-size:25px;font-weight:900;color:#3F3218; text-shadow:0 1px 0 rgba(255,246,224,.7);} #bannerSub{font-size:15px;font-weight:700;color:#6B5637;} #line.show{opacity:1;} .spark{position:absolute;z-index:55;font-size:26px;pointer-events:none;animation:sparkFly 1.1s ease-out forwards;} @keyframes sparkFly{0%{opacity:1;transform:translate(0,0) scale(.6) rotate(0)} 100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.35) rotate(140deg)}} @media (prefers-reduced-motion: reduce){ .gimg{animation:none;} } @keyframes flash{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} /* ---------- plate ---------- */ #tree{position:absolute;left:0;right:0;bottom:0;height:29%;z-index:1;} #treeCrown{position:absolute;left:50%;bottom:-10%;transform:translateX(-50%); width:min(96vw,450px);height:110%; background:radial-gradient(ellipse at 50% 100%,#4F8F45 0%,#63A554 55%,#79B865 100%); border-radius:50% 50% 0 0;box-shadow:inset 0 14px 24px rgba(255,255,255,.16);} @keyframes applePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} #teaserQ{position:absolute;top:-26px;left:50%;transform:translateX(-50%); font-size:34px;font-weight:900;color:#8FE3FF;text-shadow:0 0 14px rgba(140,230,255,.8);} .overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; background:rgba(45,35,85,.6);backdrop-filter:blur(3px);transition:opacity .4s;} .overlay.hidden{opacity:0;pointer-events:none;} .card{padding:46px 30px 42px;display:flex;flex-direction:column; align-items:center;gap:16px;max-width:92vw;min-width:min(84vw,320px);text-align:center; /* --- 古びた木の板（実素材の1枚絵）--------------------------------- ふちが欠けた形なので、四角い影は付けられない。 box-shadow ではなく filter:drop-shadow を使うと、絵の形どおりに影が落ちる。 画像は assets/card-plank.webp（透過webp） */ /* 下地の色は置かない。置くと、欠けたふちの透過部分まで塗ってしまう */ background:url('assets/card-plank.webp') no-repeat center/100% 100%; border-radius:0; box-shadow:none; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); min-height:min(34vh,290px); justify-content:center; } .card h1{font-size:26px;font-weight:900;color:#3F3218; text-shadow:0 1px 0 rgba(255,246,224,.7);} .card p{font-size:15px;font-weight:700;color:#6B5637;line-height:1.7;} /* 板の上でも読めるよう、図鑑の番号だけ色を合わせる */ .card .zno{color:#7A6242;} .bigBtn{border:none;border-radius:40px;background:var(--btn);box-shadow:0 7px 0 var(--btn-shadow); font-family:inherit;font-weight:900;font-size:clamp(18px,5vw,23px);color:#5A3A00; padding:15px clamp(20px,7vw,42px);white-space:nowrap; transition:transform .1s, box-shadow .1s;} .bigBtn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--btn-shadow);} #miniGhost{width:105px;} #endGhost{width:110px;} #endGhost img{width:100%;display:block;} #miniGhost img{width:100%;display:block;filter:brightness(.75) saturate(.85);animation:bobSmall 2.6s ease-in-out infinite;} @keyframes bobSmall{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* ================= レスポンシブ ================= */ /* タブレット縦：全体を大きく、余白を広げる */ @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;} .bigBtn{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;} .bigBtn{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;} .midBtn{border:none;border-radius:30px;background:#EFE6D2;box-shadow:0 5px 0 #CBBFA4; font-family:inherit;font-weight:900;font-size:17px;color:#5A4A2A;padding:12px 22px; min-height:48px;transition:transform .1s, box-shadow .1s;} .midBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #CBBFA4;} .midBtn.subBtn{background:#E3DCEF;box-shadow:0 5px 0 #B9AECF;color:#5A4E78;font-size:15px;} #bookBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,45,110,.25);} #bookBtn svg{width:62%;height:62%;} /* ---- v0.11: ゲーム中からマップへ戻るボタン（ずかんボタンの左どなり） ---- */ #mapBtn{position:absolute;left:4%;top:12px;z-index:76; width:clamp(48px,11vw,58px);height:clamp(48px,11vw,58px);border:none;border-radius:50%; background:rgba(255,249,239,.92);box-shadow:0 4px 0 rgba(60,45,110,.25); display:flex;align-items:center;justify-content:center;padding:0;} #mapBtn svg{width:62%;height:62%;} #mapBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(60,45,110,.25);} @media (min-width:700px) and (orientation:portrait){ #mapBtn{width:70px;height:70px;top:22px;font-size:26px;} } @media (orientation:landscape) and (min-width:820px){ #mapBtn{width:62px;height:62px;left:2.5%;} } /* ===================================================================== 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;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;} #startBtn{position:static;width:auto;height:auto;border:none; font-size:23px;color:#5A3A00;border-radius:40px;padding:15px 42px; background:var(--btn);box-shadow:0 7px 0 var(--btn-shadow);animation:none; font-family:inherit;font-weight:900; -webkit-tap-highlight-color:transparent;cursor:pointer;} #startBtn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--btn-shadow);} /* ---- ここから下は「絵が読めたとき」だけ ---- */ #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;} #startOverlay.artReady #titleFallback{display:none;} #startOverlay.artReady #startBtn{position:absolute;left:35%;top:46.3%;width:30%;height:13.2%; background:transparent;box-shadow:none;padding:0;border-radius:999px; font-size:0;color:transparent; animation:titleBtnPulse 2.4s ease-in-out infinite;} #startOverlay.artReady #startBtn:active{background:rgba(255,255,255,.30); animation:none;transform:none;box-shadow:none;} @keyframes titleBtnPulse{ 0%,100%{box-shadow:0 0 10px 1px rgba(255,226,142,0);} 50% {box-shadow:0 0 28px 9px rgba(255,226,142,.55);}} #titleSubBtns{position:fixed;left:0;right:0;z-index:3;gap:10px; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);} #titleSubBtns .midBtn{font-size:14px;padding:9px 16px;min-height:40px;opacity:.94;} @media (min-width:700px){ #titleSubBtns .midBtn{font-size:17px;padding:12px 22px;min-height:48px;} } /* --------------------------------------------------------------------- 縦画面（スマホ）は縦長版の絵を画面いっぱいに敷く。 絵は 852:1847。画面より大きく引き伸ばして、はみ出た分は切る。 縦長版が見つからない時は hasTall が付かないので、上の横長＋contain の表示のまま（＝真っ暗にはならない）。 ボタン位置は縦長版での座標（x198〜650 / y921〜1033）から算出。 --------------------------------------------------------------------- */ #startOverlay{overflow:hidden;} @media (orientation:portrait){ #startOverlay.artReady.hasTall{background-image:var(--title-img-tall);background-size:cover;} #startOverlay.artReady.hasTall::before{display:none;} #startOverlay.artReady.hasTall #titleArt{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); aspect-ratio:852/1847; width:max(100vw, calc(100dvh * 852 / 1847)); max-height:none;height:auto; background-image:var(--title-img-tall); background-size:100% 100%;} #startOverlay.artReady.hasTall #startBtn{left:23.2%;top:49.8%;width:53.1%;height:6.1%;} } @media (min-width:700px) and (orientation:portrait){ } @media (orientation:landscape) and (min-width:820px){ } /* --- 図鑑 --- */ /* ===================================================================== おばけ図鑑 --------------------------------------------------------------------- 背景は本の1枚絵（1086:1448）。絵の中の空きマスは 5列×3行＝1ページ15体で、 そのマスの上にちょうど重なるようにボタンを並べている。 マスの位置は元画像の座標から算出した％で指定している： 横 …… 1マス目の中心x=227、マスの間隔=156.75 縦 …… 1行目の中心y=546、行の間隔=181 絵を描き直したら、この％も測り直すこと。 おばけは絵に描き込まず、必ずHTML側で並べる（増えてもページが増えるだけ）。 ===================================================================== */ #zukanOverlay{z-index:120;align-items:center;justify-content:center;padding:0; overflow:hidden;touch-action:none;} #zukanBackdrop{position:fixed;inset:0;z-index:0;background:#191233; background-image:var(--zukan-img);background-size:cover;background-position:center;} #zukanBackdrop::after{content:"";position:absolute;inset:0; backdrop-filter:blur(26px) brightness(.5);background:rgba(15,11,34,.35);} #zukanBook{position:relative;z-index:1;aspect-ratio:1086/1448; width:min(100vw, calc(100dvh * 1086 / 1448)); background-image:var(--zukan-img);background-size:contain; background-position:center;background-repeat:no-repeat; overflow:hidden;} /* 横向きの広い画面（iPad横など）では、本を高さいっぱいより大きく表示して 左右の余白を減らす。本の外周は装飾なので、上下が少しはみ出て切れても おばけのマス（中央寄り）には影響しない。 */ @media (orientation:landscape) and (min-aspect-ratio:5/4){ #zukanBook{ height:min(132dvh, calc(94vw * 1448 / 1086)); width:calc(min(132dvh, calc(94vw * 1448 / 1086)) * 1086 / 1448); aspect-ratio:auto;} } /* ページ全体。左右スワイプでめくる */ #zukanPages{position:absolute;left:13.68%;top:31.46%;width:72.2%;height:37.5%;} /* 5列。1ページ最大15体（5×3）。おばけが増えるほど行が埋まる */ .zPage{position:absolute;inset:0;display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:calc(100% / 3); align-content:start;} /* 本の絵に印刷されている空きマスを、紙と同じ色で隠す。 おばけは上の行から順に並ぶので、埋まっていない下の行ほど濃く隠す。 縦方向のグラデーションにすることで、大きい画面（iPad）でも 下の空きマスが透けないようにする。 15体そろったら不要になるので、そのときはこの1ブロックを消すだけでよい。 */ #zPageVeil{position:absolute;inset:-4% -4% -8%;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(231,185,134,0) 0%, rgba(231,185,134,0) 30%, rgba(231,185,134,.55) 40%, rgba(231,185,134,.97) 52%, rgba(231,185,134,.99) 100%);} /* ---- ページめくり ---------------------------------------------------- ページの上を「紙」が弧を描いて通りすぎ、その裏で中身が入れ替わる。 紙が通過しきる前に次のページを出すと、めくった下から新しい面が あらわれたように見える。時間は0.42秒。 --------------------------------------------------------------------- */ #zukanPages{perspective:1400px;} .zPage{backface-visibility:hidden;} .zPage.fadeOut{animation:zFadeOut .16s ease-in forwards;} .zPage.fadeIn {animation:zFadeIn .22s ease-out;} @keyframes zFadeOut{to{opacity:0;}} @keyframes zFadeIn{from{opacity:0;}} /* めくれる紙。ページ枠より少し大きくして、紙のふちが見えるようにする */ #zSheet{position:absolute;left:-6%;top:-9%;width:112%;height:120%; z-index:4;pointer-events:none;opacity:0;border-radius:5px 16px 16px 5px; background:linear-gradient(105deg,#F6EAD0 0%,#FBF3E2 38%,#F1E3C6 72%,#E4D2AE 100%); box-shadow:-8px 6px 22px rgba(40,25,10,.42), inset 0 0 34px rgba(190,160,110,.35); transform-origin:left center;transform-style:preserve-3d; will-change:transform,opacity;} #zSheet::after{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(105deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%, rgba(90,60,20,.16) 82%,rgba(70,45,15,.3) 100%);} #zSheet.flipNext{animation:zFlipNext .42s cubic-bezier(.4,.02,.35,1) forwards;} #zSheet.flipPrev{animation:zFlipPrev .42s cubic-bezier(.4,.02,.35,1) forwards;} @keyframes zFlipNext{ /* 右から左へ、右ふちを持ち上げてめくる */ 0% {opacity:0; transform:rotateY(0deg);} 12% {opacity:1; transform:rotateY(-14deg);} 100%{opacity:1; transform:rotateY(-168deg);} } @keyframes zFlipPrev{ /* 左から右へ（もどる時） */ 0% {opacity:1; transform:rotateY(-168deg);} 88% {opacity:1; transform:rotateY(-14deg);} 100%{opacity:0; transform:rotateY(0deg);} } #zSheet.flipPrev{transform-origin:left center;} /* めくっている間、下のページに紙の影が落ちる */ #zShade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0; background:linear-gradient(100deg,rgba(40,25,10,.34) 0%,rgba(40,25,10,.10) 45%,transparent 72%);} #zShade.on{animation:zShade .42s ease-out forwards;} @keyframes zShade{0%{opacity:.9}70%{opacity:.35}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ #zSheet,#zShade{display:none;} } /* 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:74%;height:auto;max-height:62%;object-fit:contain;} .zslot.locked img{filter:brightness(0);opacity:.42;} .zslot:not(.locked):active{transform:scale(.92);} .zq{font-size:clamp(17px,4.6vw,26px);font-weight:900;color:rgba(120,102,80,.45);line-height:1;} .zname{font-size:clamp(9px,2.5vw,13px);font-weight:900;color:#5A4A2A;line-height:1.1; text-align:center;margin-top:1px;} .newBadge{position:absolute;top:-2px;right:-2px;background:#FF6B81;color:#fff; font-size:9px;font-weight:900;padding:2px 6px;border-radius:9px;letter-spacing:.4px; box-shadow:0 2px 5px rgba(0,0,0,.35);} .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)}} /* ページ送り */ #zPrev,#zNext{position:absolute;top:52%;z-index:3;width:clamp(48px,12vw,62px); height:clamp(48px,12vw,62px);border:none;border-radius:50%;padding:0; background:rgba(255,249,239,.94);box-shadow:0 4px 0 rgba(50,32,10,.35); font-family:inherit;font-weight:900;font-size:clamp(20px,5vw,26px);color:#5A4A2A;} #zPrev{left:1.5%;} #zNext{right:1.5%;} #zPrev:active,#zNext:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(50,32,10,.35);} #zPrev[disabled],#zNext[disabled]{opacity:.28;} /* ページ番号・もどるボタンは本の外（画面基準）に固定する。 本を大きくしても画面の外に出ないようにするため。 */ #zPageNo{position:fixed;left:50%;z-index:118;transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 74px); 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; box-shadow:0 6px 0 rgba(40,25,10,.4);} #zukanToast{position:absolute;left:50%;top:76%;transform:translateX(-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:11px;padding:3px 9px;} #endGhost img{width:110px;display:block;} /* ================= v008 盤面（1〜2枚のお皿） ================= */ /* おばけ・問題文・お皿を縦に積む。行数や画面比が変わっても重ならない */ .plate.hot{filter:brightness(1.06); box-shadow: inset 0 0 0 4px rgba(154,116,64,.55), inset 0 3px 0 rgba(255,248,228,.75), 0 0 0 6px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 18px 24px rgba(20,12,4,.45);} .plate.flash{animation:plateFlash .6s ease-in-out 2;} #zoneSource.flash{animation:plateFlash .6s ease-in-out 2;border-radius:24px;} @keyframes plateFlash{ 0%,100%{box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 20px rgba(20,12,4,.42)} 50% {box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 0 0 8px rgba(255,238,160,.95), 0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 24px rgba(20,12,4,.42)}} /* 触れないお皿は、木の色を沈ませる */ .plate.locked{ background: repeating-linear-gradient(178deg, rgba(120,96,60,.12) 0 1px, rgba(0,0,0,0) 1px 7px), radial-gradient(ellipse at 50% 34%, #E3D6BC 58%, #BCA582 100%); filter:saturate(.7) brightness(.96);} #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;} @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;} } /* ================= ぼうけんマップ ================= */ #mapOverlay{z-index:115;touch-action:pan-y;align-items:stretch;justify-content:center;padding:2dvh 0;overflow:hidden;} /* 画面いっぱいに敷く土台。ここには絵を直接置かず、 内側の #mapFar が「暗くぼかした遠景の森」を受け持つ。 iPadで中央マップの左右に出る余白は、この遠景で埋まる。 */ #mapBackdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; background: radial-gradient(120% 70% at 50% 0%, #221a49 0%, #171233 55%, #120E28 100%), #120E28;} /* 遠景の森。中央のマップより暗く・ぼかし・少し拡大し、ゆっくり動く。 iOS Safari で不具合の出やすい background-attachment:fixed は使わず、 transform だけで動かす（合成レイヤーのまま動くので軽い）。 */ #mapFar{position:absolute;left:50%;top:50%; width:112%;height:112%;transform:translate(-50%,-50%) translate3d(0,0,0); background-image:var(--map-img); background-size:cover;background-position:center top;background-repeat:no-repeat; filter:blur(16px) brightness(.30) saturate(.72); opacity:.9;will-change:transform;} /* 遠景と中央マップの境目をやわらげ、四角い画像枠に見えないようにする */ #mapBackdrop::after{content:"";position:absolute;inset:0; background: radial-gradient(120% 78% at 50% 46%, rgba(18,14,42,0) 34%, rgba(18,14,42,.55) 100%), linear-gradient(180deg,rgba(18,14,42,.42) 0%,rgba(18,14,42,0) 24%,rgba(18,14,42,0) 76%,rgba(18,14,42,.50) 100%);} /* スマホでは背景・道・おばけをほぼ画面幅いっぱいに広げる（マップ本体の枠だけを広げ、 mapPanel自体を拡大しない＝ヘッダーは巻き込まない）。ヘッダーは #mapHead 側の 独立したpaddingで安全域を保つ。iPad以上では別途上限を設ける（下の @media）。 */ #mapPanel{position:relative;z-index:1; width:100%;margin:0 auto;max-height:96dvh;background:transparent; border-radius:0;padding:10px 0 6px;display:flex;flex-direction:column;gap:8px; box-shadow:none;} #mapHead{display:flex;align-items:center;justify-content:space-between; gap:clamp(6px,2vw,10px);padding:0 16px;flex-wrap:nowrap;} /* 見出しもボタンも折り返さない。狭い画面では字と余白を詰めて1行に収める */ #mapHead h1{font-size:clamp(16px,4.3vw,28px);font-weight:900;color:#FFF3C9; text-shadow:0 2px 8px rgba(0,0,0,.85);white-space:nowrap;flex:0 1 auto;min-width:0;} #mapHead > span{flex:0 0 auto;} /* ヘッダーの「ずかん」「もどる」は、木札のように控えめにする。 タップ領域は48px以上を必ず確保する（見た目だけ小さくし、当たり判定は縮めない） */ #mapHead .midBtn{white-space:nowrap;font-size:clamp(12px,3.2vw,15px); padding:9px clamp(11px,3.2vw,18px);min-height:48px; background:rgba(70,52,30,.40);box-shadow:inset 0 1px 0 rgba(255,238,205,.18),0 2px 6px rgba(0,0,0,.35); color:#F3E7C8;opacity:.86;backdrop-filter:blur(1px);} #mapHead .midBtn:active{background:rgba(70,52,30,.55);box-shadow:inset 0 1px 0 rgba(255,238,205,.14);} #mapScroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; touch-action:pan-y;flex:1;min-height:0; width:100%;scrollbar-width:none;-ms-overflow-style:none;} #mapScroll::-webkit-scrollbar{display:none;width:0;height:0;} /* iPad以上（横幅700px〜）では、中央マップに上限を設けて少し余白を持たせる。 残る左右は #mapFar の遠景で自然に埋まる。 */ @media (min-width:700px){ #mapPanel{width:min(92vw,960px); padding:12px 14px 8px;} } /* マップ本体。背景の絵とまったく同じ縦横比（853:1844）にして、 地点・道・絵が同じ座標系に乗るようにする。 絵そのものは子要素 #mapWorldArt が持つ（弱いパララックスで少しだけ動かすため）。 絵が読めないときは背景色の濃紺がそのまま出る（黒画面にしない）。 レイヤー順： 遠景(#mapFar) → メイン背景(#mapWorldArt) → 環境(#mapEnv) → 道(#mapTrailSvg) → おばけ(.mapRow) → ヘッダー */ #mapRoad{position:relative;padding:0;width:100%; aspect-ratio:853 / 1844; background-color:#171233;} /* ===================================================================== マップの拡大（没入感） --------------------------------------------------------------------- transform で見た目だけ拡大すると、スクロールできる距離が変わらないので 「森を進んでいる」感じが出ない。そこで mapRoad の幅そのものを広げる。 aspect-ratio があるため高さも自動で連動し、実際のスクロール距離が伸びる。 はみ出した左右は #mapScroll が左右均等に切り落とす（横スクロールはしない）。 背景・道・灯り・おばけはすべて mapRoad の中の割合で置いているので、 どれだけ拡大しても位置関係はいっさいずれない。 margin-left は -(倍率-1)/2 ＝ ちょうど中央に来る値。 ===================================================================== */ /* スマホ縦：1.4倍。左右は (1.4-1)/2 = 20% ずつ均等に切る */ @media (max-width:699px) and (orientation:portrait){ #mapRoad{width:140%;margin-left:-20%;} } /* iPad・横向き：拡大は1.12倍にとどめ、切り落としも控えめにする */ @media (min-width:700px), (orientation:landscape){ #mapRoad{width:112%;margin-left:-6%;} } /* メイン背景。ここにはぼかしを掛けない（鮮明なまま） */ #mapWorldArt{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--map-img); background-size:100% auto; background-position:top center; background-repeat:no-repeat; background-color:#171233; will-change:transform;} /* 絵の上端・下端を土台の濃紺へなじませる。 パララックスで数px上下しても、境目が線に見えないようにするため */ #mapWorldArt::before{content:"";position:absolute;left:0;right:0;top:0;height:5%; background:linear-gradient(180deg,#171233 0%,rgba(23,18,51,0) 100%);} #mapWorldArt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4%; background:linear-gradient(0deg,#120E28 0%,rgba(18,14,40,0) 100%);} /* 環境レイヤー：薄い霧と小さな青い鬼火。背景とおばけの間に置く。 スクロールしたときに初めて奥行きに気づく程度の薄さにとどめる。 */ #mapEnv{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; will-change:transform;} .fogBand{position:absolute;left:-8%;right:-8%;border-radius:50%; background:radial-gradient(ellipse at 50% 50%, rgba(190,200,235,.11) 0%, rgba(180,192,230,.05) 46%, rgba(180,192,230,0) 72%); animation:fogDrift 26s ease-in-out infinite;} .fogBand.f1{top:29%;height:16%;} .fogBand.f2{top:58%;height:19%;animation-duration:34s;animation-delay:-11s;opacity:.85;} @keyframes fogDrift{ 0%,100%{ transform:translate3d(-2.5%,0,0); } 50% { transform:translate3d(2.5%,0,0); } } /* 小さな青い鬼火。キャラクターの顔に重ならないよう、道寄りの位置に置く */ .wisp{position:absolute;width:5px;height:5px;border-radius:50%; background:radial-gradient(circle, rgba(190,235,255,.9) 0%, rgba(110,180,255,.35) 48%, rgba(110,180,255,0) 100%); animation:wispDrift 9s ease-in-out infinite;} @keyframes wispDrift{ 0%,100%{ transform:translate3d(0,0,0); opacity:.10; } 35% { transform:translate3d(6px,-16px,0); opacity:.62; } 70% { transform:translate3d(-5px,-27px,0);opacity:.18; } } /* ---- おばけとおばけをつなぐ道（SVGでジグザグに描く） ---- おばけは左右交互に並ぶので、その中心を順につないだ曲線を引く。 trailBase＝まだ通っていない道（うっすら点線） trailDone＝クリアして通れるようになった道（光る） */ #mapTrailSvg{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible;} /* 道は石畳。おばけとおばけを直線でつなぐので、並びがそのままジグザグになる。 ・未通過の石 … 暗くて沈んでいる ・通った石 … あたたかい灯りをためて光る（1枚ずつ順番にともる） */ /* 道は石畳だけで表す。線は引かない。 （太い線に blur をかけると iOS Safari で黒い帯として描かれるため、 にじませる光そのものを廃止した。石ごとの光で十分見える） */ #trailBase{display:none;} #trailDone{display:none;} #trailGlow{display:none;} /* 道の長さを測るためだけのパス。指定がないと既定の黒で塗りつぶされ、 ジグザグの内側が黒い塊になる。display:none にすると長さが測れなくなるので、 塗りと線を消して残しておく */ #trailMeasure{fill:none;stroke:none;pointer-events:none;} /* 道の石。背景に描かれた中央の道と競り合わないよう、 未通過は森の影へ沈ませ、通過済みも淡い琥珀にとどめる（キャラより目立たせない）。 */ .stone{ fill:#2E2A4F; stroke:none; opacity:.26; transition:fill .45s ease, opacity .45s ease, filter .45s ease; } .stone.on{ fill:#E6C68E; opacity:.62; filter:drop-shadow(0 0 3px rgba(255,206,110,.42)); /* 通過済みの区間だけ、たまに光が手前から奥へ流れる。 石ごとの遅延（--fd）は道を作るときに一度だけ入れるので、 スクロール中に計算は走らない。未解放の石には .on が付かないため、 光がその先へ進むことはない。 */ animation:stoneFlow 5.6s ease-in-out infinite; animation-delay:var(--fd,0s); } @keyframes stoneFlow{ 0%, 84%, 100%{ opacity:.62; filter:drop-shadow(0 0 3px rgba(255,206,110,.42)); } 91% { opacity:.92; filter:drop-shadow(0 0 5px rgba(255,214,130,.70)); } } @media (prefers-reduced-motion:reduce){ .stone{ transition-duration:.01s; } .stone.on{ animation:none; } } /* エリア見出しとボス表記は廃止。一続きの森を進む一本道にする */ /* 地点は「マップ本体に対する割合」で置く。固定ピクセルを使わないので、 iPhone・iPad・横向きのどれでも背景の絵と同じ場所に乗る。 位置は renderMap() が style.left / style.top に % で入れる。 */ .mapRow{position:absolute;z-index:1;transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center;} /* 地点＝おばけが景色の中に直接立っている状態。木枠カード・白カードは使わない。 タップ領域だけを十分な大きさで確保する（見た目は透明、当たり判定は維持）。 大きさはマップ本体の幅（--mw）を基準にするので、iPhoneでもiPadでも 背景の絵と同じ比率で乗る。 */ .mapNode{position:relative;border:none;background:none;font-family:inherit; /* 見た目は小さくしても、タップ判定は必ず48px以上を確保する */ width:clamp(64px, calc(var(--mw,380px) * .26), 150px); min-height:clamp(64px, calc(var(--mw,380px) * .26), 150px); display:flex;flex-direction:column;align-items:center;justify-content:flex-end; padding:0 0 4px;-webkit-tap-highlight-color:transparent; transition:transform .12s ease, filter .12s ease;} /* 押せることが分かる、やわらかい沈み込み */ .mapNode:active{transform:translateY(3px) scale(.965);} /* 背景になじむ淡い光暈。状態ごとに色と強さだけ変える */ .mapGlow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%); width:135%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle, var(--glow-c,rgba(160,150,200,.16)) 0%, rgba(160,150,200,0) 68%); opacity:.6;transition:opacity .4s ease;} /* 足もとの薄い楕円。地面に立っているように見せる。 未解放では影と霧、救出済みでは弱い温かな光になる（下の状態別指定で色が変わる） */ .mapNode::after{content:"";position:absolute;z-index:0;left:50%;bottom:6px; transform:translateX(-50%);width:58%;height:13px;border-radius:50%; background:radial-gradient(ellipse, var(--foot,rgba(0,0,0,.42)) 0%, rgba(0,0,0,0) 74%); transition:background .45s ease;} /* おばけの待機動作。画像そのものではなく専用のラッパーを動かすので、 mapView のインライン transform や、がしゃさんの配置と competing しない。 ボタン（タップ領域）は動かさないので、押す位置はずれない。 */ .ghostFloat{position:relative;z-index:1;display:flex;align-items:center;justify-content:center; animation:ghostIdle var(--idleDur,3.2s) ease-in-out infinite; animation-delay:var(--idleDelay,0s);} @keyframes ghostIdle{ 0%,100%{ transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-3px,0); } } .mapNode .ghostImg{position:relative;z-index:1; /* --sizeK は状態ごとの奥行き表現。現在地=1、救出済み=.78、未解放=.68。 transform ではなく寸法で変えるので、mapView のインライン transform とも 待機動作のラッパーとも競合しない。 */ width:calc(clamp(48px, calc(var(--mw,380px) * .140), 95px) * var(--sizeK,1)); height:calc(clamp(48px, calc(var(--mw,380px) * .140), 95px) * var(--sizeK,1)); object-fit:contain; /* 影は弱める。背景から浮かせず、森の中にいるように見せる */ filter:drop-shadow(0 4px 4px rgba(0,0,0,.30));} /* クリアするまでは中身を見せない（まっ黒なかげ） */ .mapNode .ghostImg.silhouette{filter:brightness(0) drop-shadow(0 5px 5px rgba(0,0,0,.3));opacity:.84;} /* ---- 章番号＝道端の小さな木札。数字は読みやすいまま、板として背景になじませる ---- */ .mapNo{position:relative;z-index:2;margin-top:3px; min-width:25px;height:21px;padding:0 6px; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:900;color:#3B2A16;letter-spacing:.02em; /* 木目を重ねた小さな板。上辺だけ角を落として札らしくする */ background: repeating-linear-gradient(92deg, rgba(255,240,210,.16) 0 1px, rgba(90,58,26,.14) 1px 3px, rgba(0,0,0,0) 3px 6px), linear-gradient(180deg,#C9A46E 0%,#AE8752 52%,#8E6B3C 100%); border-radius:3px 3px 5px 5px; box-shadow:inset 0 1px 0 rgba(255,240,215,.5), inset 0 -1px 0 rgba(60,38,16,.4), 0 2px 4px rgba(0,0,0,.45); text-shadow:0 1px 0 rgba(255,238,206,.45); transform:rotate(-2deg);} /* 札を吊るす細い紐。板が宙に浮いて見えないようにする */ .mapNo::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%); width:1px;height:6px;background:rgba(80,58,32,.75);} /* ---- 救出済みの灯り＝小さな鬼火。絵文字は使わずCSSで描く ---- 赤ではなく琥珀色。キャラクターに重ならないよう、地点の左右どちらかの外側へ置く。 */ .mapLantern{position:absolute;z-index:2;top:26%; width:10px;height:13px;border-radius:50% 50% 46% 46%;pointer-events:none; background:radial-gradient(ellipse at 50% 62%, #FFF3CE 0%, #FFD98C 34%, rgba(255,186,92,.62) 62%, rgba(255,170,70,0) 100%); box-shadow:0 0 8px rgba(255,198,110,.7), 0 0 18px rgba(255,178,80,.35); animation:emberFloat 3.4s ease-in-out infinite;} /* 全地点で同じ位置に並べず、おばけが立っている側に合わせて外へ逃がす */ .mapNode.sideL .mapLantern{ right:2%; } .mapNode.sideR .mapLantern{ left:2%; } @keyframes emberFloat{ 0%,100%{ transform:translateY(0) scale(1); opacity:.85; } 50% { transform:translateY(-5px) scale(1.08); opacity:1; } } /* 救出済みだけに漂う、控えめな光の粒 */ .mapMotes{position:absolute;inset:0;z-index:1;pointer-events:none;} .mapMotes i{position:absolute;width:3px;height:3px;border-radius:50%; background:radial-gradient(circle, rgba(255,240,200,.95) 0%, rgba(255,200,110,0) 100%); animation:moteDrift 6s ease-in-out infinite;} .mapMotes i:nth-child(1){ left:22%; top:52%; animation-delay:-.7s; } .mapMotes i:nth-child(2){ left:74%; top:38%; animation-delay:-3.1s; animation-duration:7.2s; } .mapMotes i:nth-child(3){ left:50%; top:70%; animation-delay:-4.6s; animation-duration:5.3s; } @keyframes moteDrift{ 0%,100%{ transform:translate(0,0); opacity:.15; } 40% { transform:translate(4px,-11px); opacity:.85; } 72% { transform:translate(-3px,-17px);opacity:.3; } } .mapHere{position:absolute;z-index:3;top:-9px;left:50%;transform:translateX(-50%); background:#FF9C33;color:#fff;font-size:11px;font-weight:900; padding:3px 10px;border-radius:11px;white-space:nowrap;box-shadow:0 2px 0 #D97C15;} /* ---- 状態ごとの「奥行き」---- 全員を同じ大きさ・同じ明るさにしない。現在地だけが少し手前に見え、 救出済みは静かに、まだ行けない先のおばけは森の奥に沈んで見えるようにする。 */ /* 救出済み … 基準の78%。通常色のおばけ＋足もとの弱い温かな光＋小さな鬼火 */ .mapNode.cleared{ --sizeK:.78; --foot:rgba(255,196,110,.26); } .mapNode.cleared .mapGlow{ --glow-c:rgba(255,206,110,.22); opacity:.5; } .mapNode.cleared .ghostImg{ filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)); } /* 現在地 … 基準100%。足もとと周囲が温かな光でゆっくり明滅する（点滅させない） */ .mapNode.current{ --sizeK:1; --foot:rgba(255,200,110,.44); } .mapNode.current .mapGlow{ --glow-c:rgba(255,196,92,.40); opacity:.8; animation:mapBreathe 3s ease-in-out infinite; } /* 未解放 … 基準の68%。足もとは薄い霧と影。灯りはなく、いちばん奥に見せる */ .mapNode.locked{ --sizeK:.68; --foot:rgba(96,86,150,.34); filter:saturate(.5) brightness(.72); } .mapNode.locked .mapGlow{ --glow-c:rgba(120,100,210,.20); opacity:.42; } .mapNode.locked .ghostImg{ filter:brightness(0) drop-shadow(0 3px 4px rgba(0,0,0,.22)); } @keyframes mapBreathe{ 0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(1);} 50% {opacity:.95; transform:translate(-50%,-50%) scale(1.09);} } @media (prefers-reduced-motion:reduce){ .mapNode.current .mapGlow{ animation:none; opacity:.9; } .mapLantern{ animation:none; } .mapMotes i{ animation:none; opacity:.6; } /* パララックスと環境の動きも止める。止めても位置は正しく、操作もできる */ .ghostFloat{ animation:none; } .fogBand{ animation:none; } .wisp{ animation:none; opacity:.35; } #mapWorldArt, #mapEnv, #mapFar{ transform:none !important; } #mapFar{ transform:translate(-50%,-50%) !important; } } #mapToast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%); background:rgba(74,63,102,.94);color:#fff;font-weight:700;font-size:16px;text-align:center; padding:12px 22px;border-radius:20px;z-index:6;line-height:1.6;} /* 端末ごとの固定ピクセル指定は置かない。地点の大きさは マップ本体の幅（--mw）から計算するので、iPad縦・iPad横でも比率が保たれる。 */ /* ===================================================================== ここから下は 第10章（区切り章）専用スタイル （元は index.html の