/* ===================================================================== おばけ算数 － 見た目（4/5）：ワールドマップ・おとも広場・章マップ --------------------------------------------------------------------- もとは1本の style.css でした。中身は1文字も変えず、行の順番も そのままで 5 本に分けただけです。 ★ CSSは「後に書いたほうが勝つ」ので、index.html の の 並び順を入れ替えないでください。1→2→3→4→5 の順です。 ===================================================================== */ :root{ --css-4-loaded:1; } /* ================= 全体ワールドマップ ================= */ #worldOverlay{z-index:116;align-items:stretch;justify-content:center;padding:0;overflow:hidden; background:#081331;touch-action:none;} #worldBackdrop{position:fixed;inset:-18px;z-index:0;pointer-events:none; background-image:var(--world-overview-img);background-size:cover;background-position:center; filter:blur(18px) brightness(.30) saturate(.72);transform:scale(1.06);} #worldBackdrop::after{content:"";position:absolute;inset:0; background:radial-gradient(ellipse at center,rgba(7,15,42,.08) 20%,rgba(6,10,30,.65) 100%);} #worldPanel{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;} #worldHead{position:absolute;z-index:8;left:0;right:0;top:0; display:flex;align-items:center;justify-content:space-between;gap:8px; padding:max(12px,env(safe-area-inset-top)) 14px 22px; background:linear-gradient(180deg,rgba(5,10,31,.90) 0%,rgba(5,10,31,.52) 58%,rgba(5,10,31,0) 100%); pointer-events:none;} #worldHead h1{margin:0;color:#FFF1C5;font-size:clamp(18px,4.8vw,30px);font-weight:900; white-space:nowrap;text-shadow:0 2px 9px rgba(0,0,0,.9);} #worldHead > span{display:flex;gap:8px;pointer-events:auto;} #worldHead .midBtn{min-height:48px;padding:9px clamp(11px,3vw,18px);font-size:clamp(12px,3.1vw,15px); color:#F5E9C9;background:rgba(59,44,35,.62);border:1px solid rgba(255,220,150,.18); box-shadow:inset 0 1px 0 rgba(255,244,210,.14),0 3px 10px rgba(0,0,0,.35);} #worldCompanionBtn{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.12;} #worldCompanionBtn[hidden]{display:none;} #worldCompanionIcon{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));} #worldCompanionIcon[hidden]{display:none;} #worldScroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;overscroll-behavior-x:contain;} #worldScroll::-webkit-scrollbar{display:none;width:0;height:0;} #worldCanvas{position:relative;height:100%;aspect-ratio:3974 / 1728;flex:none; min-width:230%;background:#091432;} #worldArt{position:absolute;inset:0;background-image:var(--world-overview-img); background-size:100% 100%;background-position:center;background-repeat:no-repeat;pointer-events:none;} .worldSpot{position:absolute;border:0;background:transparent;color:#fff;font-family:inherit; min-width:150px;min-height:116px;padding:0;display:flex;align-items:center;justify-content:center; cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate;} .worldSpot.world01{left:3%;top:13%;width:24%;height:69%;} .worldSpot.world02{left:26%;top:31%;width:25%;height:61%;} .worldGlow{position:absolute;left:50%;top:54%;width:min(62%,210px);aspect-ratio:1;border-radius:50%; transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,198,91,.36) 0%,rgba(104,177,255,.16) 42%,rgba(80,145,255,0) 72%); opacity:.48;z-index:-1;} .worldLabel{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px; padding:8px clamp(18px,4vw,30px);border-radius:18px;color:#FFF4D0;font-weight:900; font-size:clamp(17px,4.6vw,28px);letter-spacing:.04em;white-space:nowrap; border:2px solid rgba(238,188,93,.62); background:linear-gradient(180deg,rgba(83,59,38,.94),rgba(48,35,31,.94)); box-shadow:inset 0 1px 0 rgba(255,243,203,.22),0 5px 14px rgba(0,0,0,.46),0 0 18px rgba(255,193,85,.16); text-shadow:0 2px 3px rgba(0,0,0,.8);transition:transform .15s ease,filter .25s ease,opacity .25s ease;} .worldState{position:absolute;top:calc(50% + 36px);left:50%;transform:translateX(-50%); min-width:8em;color:#E8E5F6;font-size:clamp(11px,2.8vw,15px);font-weight:900; text-shadow:0 2px 5px rgba(0,0,0,.9);white-space:nowrap;} .worldSpot.current .worldGlow{opacity:.92;animation:worldBreathe 3.2s ease-in-out infinite;} .worldSpot.current .worldLabel{animation:worldLabelFloat 3.2s ease-in-out infinite;} .worldSpot.cleared .worldGlow{opacity:.48;background:radial-gradient(circle,rgba(255,201,105,.34) 0%,rgba(255,179,77,0) 70%);} /* 未解放の世界は名前を先に見せず、黒い影と「？」だけにする。 */ .worldMystery{display:none;position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); width:min(64%,220px);aspect-ratio:1.22;border-radius:46% 54% 44% 56% / 55% 44% 56% 45%; place-items:center;background:radial-gradient(ellipse at 48% 42%,#172038 0%,#080B14 58%,rgba(0,0,0,.95) 76%,rgba(0,0,0,0) 78%); filter:drop-shadow(0 8px 13px rgba(0,0,0,.65));z-index:2;pointer-events:none;} .worldMystery i{display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%; color:#F5EBCD;font-style:normal;font-size:clamp(30px,7vw,54px);font-weight:900; background:rgba(38,39,53,.80);border:2px solid rgba(245,235,205,.44); text-shadow:0 3px 5px rgba(0,0,0,.9);box-shadow:0 5px 12px rgba(0,0,0,.46);} .worldSpot.locked .worldMystery{display:grid;} .worldSpot.locked .worldLabel,.worldSpot.locked .worldState{visibility:hidden;} .worldSpot.locked .worldGlow{opacity:.08;background:radial-gradient(circle,rgba(95,103,142,.22) 0%,rgba(20,24,46,0) 70%);} /* 背景に描かれている将来の世界も、解放までは黒い影で伏せる。 */ .worldFuture{position:absolute;z-index:3;border:0;padding:0;background:transparent;color:#F5EBCD; font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;} .worldFuture.world03{left:40.5%;top:10%;width:21%;height:34%;} .worldFuture.world04{left:46%;top:22%;width:31%;height:57%;} .worldFuture.world05{left:70%;top:4%;width:17%;height:29%;} .worldFutureShade{position:absolute;inset:8%;background:rgba(2,4,9,.92); filter:drop-shadow(0 8px 13px rgba(0,0,0,.72));} .world03 .worldFutureShade{inset:18% 2% 16% 2%;clip-path:polygon(2% 48%,13% 38%,27% 37%,36% 23%,43% 24%,48% 9%,54% 19%,62% 16%,67% 27%,82% 31%,96% 45%,89% 61%,64% 70%,31% 67%,8% 58%);} .world04 .worldFutureShade{inset:3%;clip-path:polygon(9% 32%,18% 23%,28% 25%,34% 12%,42% 21%,50% 5%,57% 21%,68% 11%,74% 26%,89% 24%,96% 44%,92% 71%,78% 91%,53% 96%,28% 88%,11% 72%,3% 51%);} .world05 .worldFutureShade{inset:5%;clip-path:polygon(6% 45%,16% 33%,27% 34%,33% 18%,42% 25%,49% 3%,57% 24%,66% 17%,72% 34%,88% 32%,97% 48%,90% 71%,71% 86%,45% 91%,20% 82%,5% 65%);} .worldFutureMark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%; color:#F5EBCD;font-size:clamp(34px,7vw,58px);font-weight:900;line-height:1; background:rgba(29,30,42,.90);border:2px solid rgba(245,235,205,.44); text-shadow:0 3px 5px rgba(0,0,0,.9);box-shadow:0 6px 16px rgba(0,0,0,.56);} .worldFuture:active .worldFutureMark{transform:translate(-50%,-46%) scale(.94);} .worldSpot:active .worldLabel{animation:none;transform:translateY(4px) scale(.96);} @keyframes worldBreathe{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.58}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}} @keyframes worldLabelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} #worldToast{position:fixed;z-index:12;left:50%;bottom:max(8%,env(safe-area-inset-bottom)); transform:translateX(-50%);max-width:min(86vw,430px);padding:12px 20px;border-radius:20px; color:#fff;font-size:clamp(14px,3.7vw,18px);font-weight:900;text-align:center; white-space:pre-line;background:rgba(44,38,77,.95);box-shadow:0 8px 22px rgba(0,0,0,.38);} @media (orientation:landscape){ #worldCanvas{min-width:132%;} .worldSpot{min-width:160px;min-height:100px;} .worldLabel{font-size:clamp(16px,2.2vw,26px);padding:7px 24px;} .worldState{font-size:clamp(11px,1.5vw,14px);} } /* ================= おともを選ぶ「旅立ちの広場」 ================= 救出済みのおばけをカードへ閉じ込めず、広場で遊んでいる姿から選ぶ。 背景におばけは描き込まず、既存のfull画像をHTMLで置く。 */ #companionOverlay{z-index:121;align-items:stretch;justify-content:center;padding:0;overflow:hidden; background:#071632;touch-action:pan-y;} body.companionOpen{touch-action:pan-y;} #companionBackdrop{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--companion-img);background-size:cover;background-position:center 54%;} #companionBackdrop::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(4,10,32,.62) 0%,rgba(4,10,32,.10) 22%,rgba(4,10,32,.05) 67%,rgba(4,10,32,.72) 100%);} #companionPanel{position:relative;z-index:1;width:100%;height:100%;min-height:0; display:flex;flex-direction:column;align-items:center;overflow:hidden;} #companionHead{width:100%;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:max(12px,env(safe-area-inset-top)) 14px 16px; background:linear-gradient(180deg,rgba(5,10,31,.92),rgba(5,10,31,.50) 65%,transparent);} #companionHead h1{margin:0;padding:7px 15px;border-radius:16px; color:#FFF1C5;font-size:clamp(18px,4.8vw,30px);font-weight:900;white-space:nowrap; background:linear-gradient(180deg,rgba(83,59,38,.88),rgba(48,35,31,.88)); border:2px solid rgba(238,188,93,.58);box-shadow:0 5px 14px rgba(0,0,0,.34); text-shadow:0 2px 4px rgba(0,0,0,.78);} #companionHead .midBtn{flex:0 0 auto;min-height:48px;padding:9px clamp(10px,3vw,18px); font-size:clamp(11px,3vw,15px);color:#F5E9C9;background:rgba(59,44,35,.68); border:1px solid rgba(255,220,150,.18);box-shadow:0 4px 10px rgba(0,0,0,.34);} #companionGuide{z-index:3;margin:0;padding:7px 16px;border-radius:999px; color:#FFF4D2;font-size:clamp(14px,3.8vw,19px);font-weight:900;text-align:center; background:rgba(28,28,65,.70);border:1px solid rgba(196,218,255,.24); text-shadow:0 2px 4px rgba(0,0,0,.75);box-shadow:0 4px 12px rgba(0,0,0,.25);} #companionPlayground{position:relative;z-index:2;flex:1;min-height:0;width:min(96vw,1100px); margin:2px auto;overflow-x:hidden;overflow-y:auto;touch-action:pan-y; scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch;} #companionPlayground::-webkit-scrollbar{display:none;width:0;height:0;} /* 1ワールド＝1画面。上へスワイプすると同じ広場の次ページが下から現れる。 */ .companionPage{position:relative;width:100%;height:100%;min-height:100%;overflow:hidden; scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate; /* 同じ旅立ちの広場をページごとにもう一度敷く。 スワイプ中も「背景は固定でおばけだけ入れ替わる」のではなく、 次の広場そのものが下から現れる。 */ background-image: linear-gradient(180deg,rgba(4,10,32,.06),rgba(4,10,32,.12) 70%,rgba(4,10,32,.46)), var(--companion-img); background-size:100% 100%,100vw 100vh; background-position:center,center 54%;background-repeat:no-repeat;} .companionWorldLabel{position:absolute;z-index:4;left:50%;top:1.5%;transform:translateX(-50%); margin:0;padding:4px 13px;border-radius:999px;color:#DDF6FF;font-size:clamp(11px,2.8vw,15px); font-weight:900;white-space:nowrap;background:rgba(15,54,84,.64); border:1px solid rgba(162,224,255,.28);text-shadow:0 2px 4px rgba(0,0,0,.7);} /* 広場の中央を横切る二つの小さな光。各ページで同じ場所が続く印にする */ .companionPage::before,.companionPage::after{content:"";position:absolute;pointer-events:none; width:16px;aspect-ratio:1;border-radius:50%;opacity:.68; background:radial-gradient(circle,#F9FDFF 0 18%,#7DD8FF 30%,rgba(77,151,255,0) 72%); filter:drop-shadow(0 0 9px rgba(100,195,255,.85));animation:companionOrb 4.8s ease-in-out infinite;} .companionPage::before{left:45%;top:46%;} .companionPage::after{left:60%;top:54%;animation-delay:-2.3s;} @keyframes companionOrb{0%,100%{transform:translate(-22px,8px) scale(.8);opacity:.38} 50%{transform:translate(26px,-14px) scale(1.2);opacity:.9}} .companionPerson{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); width:clamp(68px,22vw,104px);min-height:78px;border:0;padding:0;background:transparent; color:#FFF1CE;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate;} .companionPerson::before{content:"";position:absolute;z-index:-1;left:50%;top:43%;width:118%;aspect-ratio:1; transform:translate(-50%,-50%) scale(.72);border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(255,225,137,.92) 0%,rgba(255,192,78,.36) 44%,rgba(255,178,70,0) 72%); transition:opacity .22s,transform .22s;} .companionPerson img{display:block;width:100%;height:auto;max-height:86px;object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.46));pointer-events:none; animation:companionPlayFloat 3.2s ease-in-out infinite;animation-delay:var(--delay);} .companionPage .companionPerson:nth-of-type(3n+2) img{animation-name:companionPlayHop;animation-duration:2.7s;} .companionPage .companionPerson:nth-of-type(3n) img{animation-name:companionPlaySway;animation-duration:3.8s;} .companionPerson .companionName{position:absolute;left:50%;top:calc(100% - 3px);transform:translateX(-50%); min-width:max-content;padding:3px 8px;border-radius:10px;color:#FFF1CF; font-size:clamp(10px,2.7vw,14px);font-weight:900;line-height:1.12;white-space:nowrap; background:rgba(47,35,36,.76);border:1px solid rgba(255,220,150,.25); text-shadow:0 1px 3px rgba(0,0,0,.75);} .companionPerson .companionNow{position:absolute;z-index:3;left:50%;top:-10px;transform:translateX(-50%); padding:2px 7px;border-radius:999px;color:#5A3A00;background:#FFD77A;font-size:10px;font-weight:900; white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.34);} .companionPerson.selected{z-index:5;} .companionPerson.selected::before{opacity:1;transform:translate(-50%,-50%) scale(1.05); animation:companionChoiceGlow 1.5s ease-in-out infinite;} .companionPerson.selected img{animation:companionChosen .72s cubic-bezier(.3,1.4,.5,1) 1; filter:drop-shadow(0 4px 5px rgba(0,0,0,.46)) drop-shadow(0 0 13px rgba(255,216,120,.95));} .companionPerson:active{filter:brightness(1.12);} @keyframes companionPlayFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes companionPlayHop{0%,72%,100%{transform:translateY(0) rotate(0)}82%{transform:translateY(-14px) rotate(-4deg)}90%{transform:translateY(0) rotate(3deg)}} @keyframes companionPlaySway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} @keyframes companionChosen{0%{transform:translateY(0) scale(1)}38%{transform:translateY(-18px) scale(1.13)}70%{transform:translateY(0) scale(.98)}100%{transform:translateY(0) scale(1)}} @keyframes companionChoiceGlow{0%,100%{opacity:.58}50%{opacity:1}} /* 横向きは5体＋4体をまばらに、縦向きは3体×3段へ組み替える */ .companionPage .companionPerson:nth-of-type(1){--x:11%;--y:24%;--delay:-.3s} .companionPage .companionPerson:nth-of-type(2){--x:30%;--y:29%;--delay:-1.4s} .companionPage .companionPerson:nth-of-type(3){--x:50%;--y:17%;--delay:-2.2s} .companionPage .companionPerson:nth-of-type(4){--x:70%;--y:29%;--delay:-.9s} .companionPage .companionPerson:nth-of-type(5){--x:89%;--y:22%;--delay:-1.8s} .companionPage .companionPerson:nth-of-type(6){--x:18%;--y:70%;--delay:-2.6s} .companionPage .companionPerson:nth-of-type(7){--x:39%;--y:76%;--delay:-.6s} .companionPage .companionPerson:nth-of-type(8){--x:63%;--y:68%;--delay:-2.0s} .companionPage .companionPerson:nth-of-type(9){--x:83%;--y:75%;--delay:-1.1s} /* 仲間がまだ少ない新ワールドは、上の端に固めず広場の中央で遊ばせる。 */ .companionPage.count-1 .companionPerson:nth-of-type(1){--x:50%;--y:49%} .companionPage.count-2 .companionPerson:nth-of-type(1){--x:35%;--y:49%} .companionPage.count-2 .companionPerson:nth-of-type(2){--x:65%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(1){--x:20%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(2){--x:50%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(3){--x:80%;--y:49%} .companionPage.count-4 .companionPerson:nth-of-type(1), .companionPage.count-4 .companionPerson:nth-of-type(3){--x:30%} .companionPage.count-4 .companionPerson:nth-of-type(2), .companionPage.count-4 .companionPerson:nth-of-type(4){--x:70%} .companionPage.count-4 .companionPerson:nth-of-type(-n+2){--y:29%} .companionPage.count-4 .companionPerson:nth-of-type(n+3){--y:70%} .companionPage.count-5 .companionPerson:nth-of-type(1){--x:18%;--y:29%} .companionPage.count-5 .companionPerson:nth-of-type(2){--x:50%;--y:23%} .companionPage.count-5 .companionPerson:nth-of-type(3){--x:82%;--y:29%} .companionPage.count-5 .companionPerson:nth-of-type(4){--x:34%;--y:70%} .companionPage.count-5 .companionPerson:nth-of-type(5){--x:66%;--y:70%} .companionPage.count-6 .companionPerson:nth-of-type(1), .companionPage.count-6 .companionPerson:nth-of-type(4){--x:18%} .companionPage.count-6 .companionPerson:nth-of-type(2), .companionPage.count-6 .companionPerson:nth-of-type(5){--x:50%} .companionPage.count-6 .companionPerson:nth-of-type(3), .companionPage.count-6 .companionPerson:nth-of-type(6){--x:82%} .companionPage.count-6 .companionPerson:nth-of-type(-n+3){--y:29%} .companionPage.count-6 .companionPerson:nth-of-type(n+4){--y:70%} .companionNextPlaza{position:absolute;z-index:4;left:50%;bottom:1.5%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:1px;color:#E2F6FF; font-size:clamp(10px,2.5vw,13px);font-weight:900;white-space:nowrap; text-shadow:0 2px 5px rgba(0,0,0,.85);pointer-events:none;} .companionNextPlaza i{display:block;width:18px;height:18px;border-right:4px solid #BDEFFF; border-bottom:4px solid #BDEFFF;transform:rotate(45deg);animation:companionNextBounce 1.4s ease-in-out infinite;} @keyframes companionNextBounce{50%{transform:translateY(5px) rotate(45deg)}} #companionFoot{z-index:6;width:100%;display:flex;align-items:center;justify-content:center;gap:10px; flex-wrap:wrap;padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 12px); background:linear-gradient(0deg,rgba(4,10,31,.90),rgba(4,10,31,.46) 70%,transparent);} #companionChoice{min-width:min(58vw,330px);margin:0;padding:7px 13px;border-radius:14px;text-align:center; color:#FFF1CB;font-size:clamp(13px,3.5vw,17px);font-weight:900; background:rgba(39,32,65,.78);border:1px solid rgba(255,224,155,.22);} #companionConfirm{font-size:clamp(16px,4vw,21px);padding:12px clamp(20px,5vw,34px);} #companionSolo{min-height:46px;padding:9px 16px;color:#E9E7F5;background:rgba(57,55,83,.86); border:1px solid rgba(210,215,242,.24);box-shadow:0 4px 0 rgba(20,18,39,.66);font-size:clamp(12px,3vw,15px);} #companionSolo.picked{color:#5A3A00;background:#FFD77A;border-color:#FFF0B0;box-shadow:0 4px 0 #C89135;} @media (orientation:portrait){ #companionHead h1{font-size:clamp(17px,5vw,23px);padding:6px 10px;} #companionHead .midBtn{max-width:40vw;white-space:normal;line-height:1.15;} #companionPlayground{width:96vw;} .companionPage .companionPerson:nth-of-type(1){--x:17%;--y:20%} .companionPage .companionPerson:nth-of-type(2){--x:50%;--y:16%} .companionPage .companionPerson:nth-of-type(3){--x:83%;--y:21%} .companionPage .companionPerson:nth-of-type(4){--x:20%;--y:48%} .companionPage .companionPerson:nth-of-type(5){--x:50%;--y:42%} .companionPage .companionPerson:nth-of-type(6){--x:80%;--y:48%} .companionPage .companionPerson:nth-of-type(7){--x:17%;--y:76%} .companionPage .companionPerson:nth-of-type(8){--x:50%;--y:70%} .companionPage .companionPerson:nth-of-type(9){--x:83%;--y:76%} .companionPage.count-1 .companionPerson:nth-of-type(1){--x:50%;--y:49%} .companionPage.count-2 .companionPerson:nth-of-type(1){--x:30%;--y:49%} .companionPage.count-2 .companionPerson:nth-of-type(2){--x:70%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(1){--x:18%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(2){--x:50%;--y:49%} .companionPage.count-3 .companionPerson:nth-of-type(3){--x:82%;--y:49%} #companionFoot{gap:7px;padding-top:6px;} #companionChoice{order:-1;flex-basis:86vw;} } @media (orientation:landscape) and (min-width:820px){ .companionPerson{width:clamp(78px,8.2vw,116px);} .companionPerson img{max-height:98px;} #companionGuide{margin-top:-5px;} } @media (orientation:landscape) and (max-height:560px){ #companionHead{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:7px;} #companionHead h1{font-size:19px;padding:5px 10px;} #companionGuide{font-size:13px;padding:4px 12px;} .companionPerson{width:70px;} .companionPerson img{max-height:62px;} .companionPerson .companionName{font-size:10px;padding:2px 6px;} #companionFoot{padding-top:4px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px);} } @media (prefers-reduced-motion:reduce){ .companionPage::before,.companionPage::after,.companionPerson img, .companionPerson.selected::before,.companionNextPlaza i{animation:none;} } /* 水幻郷：横へ広がる章マップ */ #waterMapOverlay{z-index:115;align-items:stretch;justify-content:center;padding:0;overflow:hidden;background:#071634;} #waterMapBackdrop{position:fixed;inset:-18px;z-index:0;pointer-events:none; background-image:var(--map-img-w2);background-size:cover;background-position:center; filter:blur(18px) brightness(.34) saturate(.78);transform:scale(1.07);} #waterMapPanel{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;} #waterMapHead{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center; justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 24px; background:linear-gradient(180deg,rgba(5,17,48,.91),rgba(5,17,48,.52) 58%,transparent);} #waterMapHead h1{margin:0;color:#DDF5FF;font-size:clamp(20px,5vw,30px);font-weight:900; text-shadow:0 2px 9px rgba(0,0,0,.88);white-space:nowrap;flex:0 1 auto;min-width:0;} #waterMapHead .midBtn{min-height:48px;color:#EDF8FF;background:rgba(35,67,92,.68);} #waterMapScroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x; -webkit-overflow-scrolling:touch;scrollbar-width:none;} #waterMapScroll::-webkit-scrollbar{display:none;} #waterMapCanvas{position:relative;height:100%;aspect-ratio:4123 / 1522;min-width:270%; background-image:var(--map-img-w2);background-size:100% 100%;background-repeat:no-repeat;background-position:center;} .waterChapterNode{position:absolute;z-index:4;left:7.2%;top:47%;transform:translate(-50%,-50%); width:clamp(74px,20vw,112px);min-height:clamp(96px,25vw,142px);border:0;background:none; display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 4px; color:#ECFAFF;font-family:inherit;touch-action:manipulation;} .waterChapterNode:active{transform:translate(-50%,-47%) scale(.96);} .waterNodeGlow{position:absolute;z-index:0;left:50%;top:42%;transform:translate(-50%,-50%); width:125%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(106,224,255,.62),rgba(45,132,255,.25) 48%,transparent 72%);} .waterChapterNode.current .waterNodeGlow{animation:waterNodePulse 1.8s ease-in-out infinite;} @keyframes waterNodePulse{50%{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.25)}} .waterGhostFloat{position:relative;z-index:1;display:flex;align-items:center;justify-content:center; animation:ghostIdle 3.2s ease-in-out infinite;animation-delay:-.7s;} .waterChapterNode img{position:relative;z-index:1;width:clamp(52px,15vw,84px);height:clamp(52px,15vw,84px); object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,8,38,.48));} /* 横長で地面に広がる姿なので、丸いあおばけちゃんより表示箱を少し広げる。 */ .waterChapterNode.ch12 img{width:clamp(66px,18vw,102px);height:clamp(58px,16vw,90px);} .waterChapterNode img.silhouette{filter:brightness(0) drop-shadow(0 5px 5px rgba(0,0,0,.34));opacity:.84;} .waterChapterNo{z-index:3;margin-top:3px;} .waterChapterNode.cleared .waterNodeGlow{background:radial-gradient(circle,rgba(255,232,139,.58),rgba(72,188,255,.2) 52%,transparent 74%);} /* 第12章は、石橋の少し手前にある濡れた飛び石へ置く。 */ .waterChapterNode.ch12{left:17.5%;top:55%;} .waterChapterNode.locked .waterNodeGlow{opacity:.24;filter:saturate(.45);} .waterChapterNode.locked{cursor:default;} #waterMapComing{position:absolute;z-index:4;left:18%;bottom:max(7%,env(safe-area-inset-bottom)); transform:translateX(-50%);padding:10px 18px;border-radius:18px;text-align:center; color:#E7F8FF;font-size:clamp(14px,3.6vw,19px);font-weight:900;line-height:1.45; background:rgba(18,48,73,.78);border:1px solid rgba(164,224,255,.35); box-shadow:0 5px 18px rgba(0,0,0,.36);text-shadow:0 2px 5px rgba(0,0,0,.75);} #waterMapComing[hidden]{display:none;} #waterMapComing[data-chapter="12"]{left:47%;} @media (orientation:landscape){ #waterMapCanvas{min-width:155%;}#waterMapComing{left:13%;} .waterChapterNode{left:8.8%;top:49%;width:92px;min-height:122px;} .waterChapterNode.ch12{left:21.5%;top:57%;} #waterMapComing[data-chapter="12"]{left:33%;} } @media (prefers-reduced-motion:reduce){ .worldSpot.current .worldGlow,.worldSpot.current .worldLabel, .waterChapterNode.current .waterNodeGlow{animation:none;} } /* ================= ぼうけんマップ ================= */ #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);} /* 深い森・水幻郷で共通の章マップ操作列。図鑑の隣におとも入口を置く。 */ .chapterMapActions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;} .chapterCompanionBtn{display:flex!important;flex-direction:column;align-items:center;justify-content:center; gap:0;min-width:52px!important;padding:3px 7px!important;line-height:1;font-size:10px!important;} .chapterCompanionBtn[hidden]{display:none!important;} .chapterCompanionBtn img{display:block;width:27px;height:27px;object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.46));} .chapterCompanionBtn img[hidden]{display:none;} #mapClose,#waterMapClose{white-space:normal!important;line-height:1.08;text-align:center;} @media (max-width:520px) and (orientation:portrait){ #mapHead{gap:5px;padding-left:12px;padding-right:10px;} #waterMapHead{gap:5px;padding-left:12px;padding-right:10px;} #mapHead h1,#waterMapHead h1{font-size:clamp(16px,4.2vw,19px);} .chapterMapActions{gap:4px;} #mapHead .midBtn,#waterMapHead .midBtn{min-height:48px;padding:7px 9px;font-size:11px;} #mapClose,#waterMapClose{max-width:96px;padding-left:8px!important;padding-right:8px!important;} } #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:1706 / 6280; background-color:#171233;} /* ===================================================================== マップの拡大（没入感） --------------------------------------------------------------------- transform で見た目だけ拡大すると、スクロールできる距離が変わらないので 「森を進んでいる」感じが出ない。そこで mapRoad の幅そのものを広げる。 aspect-ratio があるため高さも自動で連動し、実際のスクロール距離が伸びる。 はみ出した左右は #mapScroll が左右均等に切り落とす（横スクロールはしない）。 背景・道・灯り・おばけはすべて mapRoad の中の割合で置いているので、 どれだけ拡大しても位置関係はいっさいずれない。 margin-left は -(倍率-1)/2 ＝ ちょうど中央に来る値。 ===================================================================== */ /* 背景の縦横比が 1:2.16 から 1:3.68 に伸びたため、拡大しなくても 1画面に入るおばけは自然に3〜4体まで減っている。 以前と同じ1.4倍だと絵の左右（木立や家）を切りすぎるので控えめにする。 */ /* スマホ縦：1.2倍。左右は (1.2-1)/2 = 10% ずつ均等に切る */ @media (max-width:699px) and (orientation:portrait){ #mapRoad{width:120%;margin-left:-10%;} } /* iPad・横向き：1.06倍にとどめ、切り落としもごくわずかにする */ @media (min-width:700px), (orientation:landscape){ #mapRoad{width:106%;margin-left:-3%;} } /* メイン背景。ここにはぼかしを掛けない（鮮明なまま） */ #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:1.8%; background:linear-gradient(180deg,#171233 0%,rgba(23,18,51,0) 100%);} #mapWorldArt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5%; 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;} /* 絵の暗い区間（提灯の木と池のあいだ／池とあそびばのあいだ）に薄くかける。 縦横比が伸びたので、以前の16%・19%のままだと帯が縦に大きすぎる */ .fogBand.f1{top:30.5%;height:8%;} .fogBand.f2{top:49%;height:10%;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横でも比率が保たれる。 */