/* =========================================================
   KuNerAsb — Playground
   クマが主役のポップ × ゲームの仕掛け。
   色：クリーム×黒に、食う(黄)・寝る(青)・遊ぶ(赤)の差し色。
   ========================================================= */
:root{
 --paper:#f7f1e3;--paper-2:#efe6d2;--ink:#1a1a1a;--muted:#5e5a52;
 --red:#ff5b3a;--yellow:#ffcf3f;--blue:#8fb0ff;--mint:#8fd9b6;--pink:#ffb6c9;
 --scene:var(--red);
 --line:2.5px solid var(--ink);--shadow:5px 5px 0 var(--ink);--shadow-sm:3px 3px 0 var(--ink);
 --radius:22px;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
 --en:'Bricolage Grotesque','Zen Maru Gothic',sans-serif;
 --jp:'Zen Maru Gothic','Noto Sans JP',sans-serif;
 --body:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
 --pixel:'DotGothic16',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.9 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
::selection{background:var(--yellow)}
:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:10px;z-index:200;background:var(--paper);padding:10px 14px;border:var(--line)}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.pixel{font-family:var(--pixel);letter-spacing:.06em}
.en{font-family:var(--en)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.desktop{display:inline}

/* ---------- 起動画面 ---------- */
.boot{position:fixed;inset:0;z-index:300;background:var(--ink);color:var(--paper);display:grid;place-items:center;text-align:center;transition:clip-path .8s var(--ease)}
.boot.is-done{clip-path:circle(0 at 50% 50%);pointer-events:none}
.boot .bear{width:150px;margin:0 auto 26px;animation:boot-bob 1s ease-in-out infinite}
.boot .bear .ink{fill:var(--paper)}.boot .bear .paper{fill:var(--ink)}
.boot p{font-family:var(--pixel);font-size:20px;letter-spacing:.2em;animation:blink-text 1s steps(2) infinite}
.boot small{display:block;font-family:var(--pixel);font-size:11px;opacity:.5;margin-top:14px;letter-spacing:.15em}
@keyframes boot-bob{50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes blink-text{50%{opacity:0}}

/* ---------- カーソル ---------- */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--ink);border-radius:50%;pointer-events:none;z-index:250;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s;mix-blend-mode:multiply;display:none}
.cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--yellow)}
.cursor.is-down{transform:scale(.8)}
@media(pointer:fine){.cursor{display:block}}

/* ---------- ヘッダー ---------- */
.site-header{position:fixed;top:14px;left:14px;right:14px;z-index:100;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 20px;background:var(--paper);border:var(--line);border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.site-header.is-hidden{transform:translateY(-130%)}
.site-header .brand{width:128px;flex-shrink:0}
.site-header nav{display:flex;gap:4px;margin-left:auto}
.site-header nav a{font-family:var(--en);font-weight:600;font-size:13px;padding:8px 13px;border-radius:999px;transition:background .2s,transform .2s var(--spring)}
.site-header nav a:hover{background:var(--yellow);transform:rotate(-4deg)}
.hud{display:flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:13px;background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 14px;white-space:nowrap}
.hud b{font-weight:400;color:var(--yellow);min-width:4ch;text-align:right;display:inline-block}
.hud.is-bump b{animation:score-bump .45s var(--spring)}
@keyframes score-bump{40%{transform:scale(1.5);color:var(--red)}}
.btn-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--jp);font-weight:700;font-size:13px;padding:10px 18px;background:var(--red);color:var(--paper);border:var(--line);border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s var(--spring),box-shadow .2s}
.btn-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn-cta:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.menu-btn{display:none;border:var(--line);background:var(--yellow);border-radius:999px;padding:8px 14px;font-family:var(--en);font-weight:700;font-size:12px;box-shadow:var(--shadow-sm)}

/* ---------- メニュー（ステージ選択） ---------- */
.stage-menu{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--paper);padding:100px 6vw 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:center;clip-path:circle(0 at calc(100% - 60px) 40px);transition:clip-path .7s var(--ease);visibility:hidden}
.stage-menu.is-open{clip-path:circle(150% at calc(100% - 60px) 40px);visibility:visible}
.stage-menu .bear{width:min(340px,70%);animation:boot-bob 2.4s ease-in-out infinite}
.stage-menu .bear .ink{fill:var(--paper)}.stage-menu .bear .paper{fill:var(--ink)}
.stage-menu h2{font-family:var(--pixel);font-size:14px;letter-spacing:.2em;color:var(--yellow);margin-bottom:18px}
.stage-menu ol{list-style:none;margin:0;padding:0;counter-reset:st}
.stage-menu li a{display:flex;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px dashed #f7f1e355;font-family:var(--en);font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.1;transition:color .2s,padding .3s var(--ease)}
.stage-menu li a::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--pixel);font-size:12px;color:#f7f1e388}
.stage-menu li a small{font-family:var(--jp);font-size:12px;font-weight:500;color:#f7f1e3aa}
.stage-menu li a:hover{color:var(--yellow);padding-left:16px}
.stage-menu li a:hover::after{content:'◀';font-size:20px;color:var(--red);margin-left:auto}
.menu-close{position:absolute;top:24px;right:24px;border:2px solid var(--paper);background:none;color:var(--paper);border-radius:999px;padding:8px 16px;font-family:var(--pixel)}

/* ---------- 共通：セクション見出し ---------- */
section{position:relative}
.sec{padding:130px 0}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:12px;letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:8px;transform:rotate(-2deg)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--scene,var(--red));display:inline-block}
.sec-head{display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:end;margin-bottom:64px}
.sec-head h2,.h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,3.8vw,58px);line-height:1.32;letter-spacing:-.01em;margin-top:22px}
.sec-head p,.lead{font-size:15px;line-height:2.1;color:#34322e}
.mark{position:relative;white-space:nowrap;z-index:0}
.mark::after{content:'';position:absolute;left:-4px;right:-4px;bottom:.08em;height:.38em;background:var(--yellow);z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .3s}
.is-in .mark::after,.mark.is-in::after{transform:scaleX(1)}
.mark.red::after{background:var(--pink)}
.mark.blue::after{background:var(--blue)}

/* 文字が跳ねて出る */
.split .ch{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;transition:transform .7s var(--spring),opacity .4s}
.split.is-in .ch{transform:none;opacity:1}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- ステッカー・写真 ---------- */
.sticker-photo{position:relative;margin:0;border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--paper-2);transform:rotate(var(--rot,-1.5deg));transition:transform .5s var(--spring)}
.sticker-photo:hover{transform:rotate(0) scale(1.015)}
.sticker-photo img{width:100%;height:100%;object-fit:cover}
.sticker-photo figcaption{position:absolute;left:14px;bottom:14px;font-family:var(--pixel);font-size:11px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:4px 10px}
.tape{position:absolute;width:110px;height:30px;background:#fff6;border:1px solid #0001;top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);backdrop-filter:blur(1px);z-index:2}

/* ---------- マーキー ---------- */
.marquee{overflow:hidden;border-block:var(--line);background:var(--red);color:var(--paper);padding:18px 0;transform:rotate(-2deg);margin:-10px -20px;position:relative;z-index:3}
.marquee.light{background:var(--yellow);color:var(--ink);transform:rotate(1.5deg)}
.marquee-track{display:flex;width:max-content;font-family:var(--en);font-weight:800;font-size:clamp(34px,5.4vw,78px);line-height:1;letter-spacing:-.02em;white-space:nowrap;transform:translate3d(var(--mx,0),0,0)}
.marquee-track span{padding-right:.6em}
.marquee-track em{font-style:italic;font-weight:400;-webkit-text-stroke:2px currentColor;color:transparent}

/* =========================================================
   HERO
   ========================================================= */
.hero{min-height:100svh;padding:120px 0 40px;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);transition:background .8s var(--ease)}
.hero[data-mood=eat]{--scene:var(--yellow);background:#fbecc0}
.hero[data-mood=rest]{--scene:var(--blue);background:#dfe6f7}
.hero[data-mood=play]{--scene:var(--red);background:var(--paper)}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg .dots{position:absolute;inset:0;background-image:radial-gradient(#1a1a1a22 1.2px,transparent 1.2px);background-size:22px 22px}
.hero-word{position:absolute;right:-2vw;bottom:-4vw;font-family:var(--en);font-weight:800;font-size:clamp(150px,26vw,420px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px #1a1a1a1c;transition:opacity .4s}
.float-items{position:absolute;inset:0}
.float-items span{position:absolute;font-family:var(--en);font-weight:800;color:var(--ink);opacity:.9;animation:drift var(--d,9s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--dx,20px),var(--dy,-30px)) rotate(var(--dr,20deg))}}
.hero-grid{position:relative;flex:1;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:3vw}
.hero-copy{position:relative;z-index:2}
.hero-copy .kicker{display:inline-block;font-family:var(--pixel);font-size:12px;letter-spacing:.14em;margin:18px 0 18px}
.hero h1{font-family:var(--en);font-weight:800;font-size:clamp(52px,7.4vw,122px);line-height:.95;letter-spacing:-.045em;margin-bottom:28px}
.hero h1 .line{display:block;overflow:hidden;padding:.04em 0 .1em}
.hero h1 .accent{color:var(--scene);transition:color .6s;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.hero-sub{font-family:var(--jp);font-weight:700;font-size:clamp(15px,1.4vw,19px);line-height:1.9;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-game{display:inline-flex;align-items:center;gap:12px;font-family:var(--pixel);font-size:15px;letter-spacing:.08em;padding:14px 24px;background:var(--ink);color:var(--paper);border:var(--line);border-radius:14px;box-shadow:5px 5px 0 var(--scene),5px 5px 0 2.5px var(--ink);transition:transform .15s,box-shadow .15s}
.btn-game:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--scene),7px 7px 0 2.5px var(--ink)}
.btn-game:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--scene)}
.btn-game .tri{animation:tri-nudge .8s steps(2) infinite}
@keyframes tri-nudge{50%{transform:translateX(4px)}}
.btn-ghost{font-family:var(--jp);font-weight:700;font-size:14px;padding:13px 20px;border:var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-sm);transition:transform .2s var(--spring)}
.btn-ghost:hover{transform:rotate(-3deg) translateY(-2px)}

/* クマのステージ */
.stage{position:relative;justify-self:center;width:min(500px,100%);aspect-ratio:1;display:grid;place-items:center}
.stage-disc{position:absolute;inset:6%;border-radius:50%;background:var(--scene);border:var(--line);box-shadow:8px 8px 0 var(--ink);transition:background .6s var(--ease)}
.stage-ring{position:absolute;inset:-2%;border:2px dashed var(--ink);border-radius:50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bear-btn{position:relative;z-index:2;width:72%;background:none;border:0;padding:0;transform:translate(var(--bx,0),var(--by,0)) rotate(var(--br,0deg));transition:transform .5s var(--ease);-webkit-tap-highlight-color:transparent}
.bear{width:100%;overflow:visible}
.bear .ink{fill:var(--ink)}.bear .paper{fill:var(--paper)}
.bear-btn .bear-body{transform-origin:50% 90%;transform-box:fill-box;animation:bear-idle 3.6s ease-in-out infinite}
@keyframes bear-idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.bear-btn.is-pop .bear-body{animation:bear-pop .6s var(--spring)}
@keyframes bear-pop{30%{transform:scale(.88,1.12) rotate(-6deg)}60%{transform:scale(1.1,.92) rotate(5deg)}}
.bear-eyes{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .15s linear}
.bear .eye{transform-box:fill-box;transform-origin:center;animation:eye-blink 4.2s infinite}
@keyframes eye-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bear-pom{transform-box:fill-box;transform-origin:20% 20%;animation:pom-wobble 2.2s ease-in-out infinite}
@keyframes pom-wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.bear-rice{transform-box:fill-box;transform-origin:50% 100%}
.bear-buttons{transform-box:fill-box;transform-origin:center}
.stage[data-mood=eat] .bear-rice{animation:rice-hop .5s ease-in-out infinite alternate}
@keyframes rice-hop{to{transform:translateY(-30px) scale(1.06)}}
.stage[data-mood=play] .bear-buttons{animation:btn-press .35s steps(2) infinite}
@keyframes btn-press{50%{transform:scale(.8)}}
.stage[data-mood=rest] .bear .eye{animation:none;transform:scaleY(.08)}
.stage[data-mood=rest] .bear-body{animation:bear-sleep 4s ease-in-out infinite}
@keyframes bear-sleep{0%,100%{transform:rotate(-8deg) scale(.98)}50%{transform:rotate(-8deg) scale(1.02)}}
.stage[data-mood=rest] .bear-eyes{transform:none}
.zzz{position:absolute;right:8%;top:6%;z-index:3;font-family:var(--en);font-weight:800;font-size:44px;opacity:0;pointer-events:none}
.stage[data-mood=rest] .zzz{opacity:1}
.zzz span{display:inline-block;animation:dream 2.4s ease-in-out infinite}
.zzz span:nth-child(2){font-size:.75em;animation-delay:.4s}.zzz span:nth-child(3){font-size:.55em;animation-delay:.8s}
@keyframes dream{0%{transform:translate(0,10px);opacity:0}40%{opacity:1}100%{transform:translate(18px,-40px);opacity:0}}
.speech{position:absolute;z-index:4;left:-6%;top:4%;max-width:240px;background:var(--paper);border:var(--line);border-radius:18px 18px 18px 4px;box-shadow:var(--shadow-sm);padding:12px 16px;font-family:var(--jp);font-weight:700;font-size:13px;line-height:1.7;transform:rotate(-4deg);transition:transform .35s var(--spring)}
.speech.is-pop{animation:speech-pop .45s var(--spring)}
@keyframes speech-pop{0%{transform:rotate(-4deg) scale(.6)}100%{transform:rotate(-4deg) scale(1)}}
.mood-switch{position:absolute;z-index:4;bottom:-2%;left:50%;transform:translateX(-50%) rotate(-2deg);display:flex;gap:6px;background:var(--paper);border:var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow-sm)}
.mood-switch button{white-space:nowrap;border:0;background:none;border-radius:999px;padding:9px 16px;font-family:var(--jp);font-weight:700;font-size:15px;display:flex;align-items:baseline;gap:6px;transition:background .25s,transform .25s var(--spring)}
.mood-switch button small{font-family:var(--pixel);font-size:9px;letter-spacing:.08em}
.mood-switch button:hover{transform:translateY(-3px)}
.mood-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.particle{position:absolute;z-index:5;left:50%;top:45%;pointer-events:none;font-family:var(--en);font-weight:800;font-size:28px;animation:burst .9s ease-out forwards}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) rotate(var(--pr)) scale(1.1);opacity:0}}
.plus{position:absolute;z-index:6;font-family:var(--pixel);font-size:18px;color:var(--red);-webkit-text-stroke:.5px var(--ink);pointer-events:none;animation:plus-up .9s ease-out forwards}
@keyframes plus-up{to{transform:translateY(-60px);opacity:0}}

/* 投げられるステッカー */
.stickers{position:absolute;inset:0;z-index:3;pointer-events:none}
.stk{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;font-family:var(--en);font-weight:800;border:var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;will-change:transform}
.stk:active{cursor:grabbing}
.stk.is-drag{box-shadow:8px 8px 0 var(--ink)}
.stk-circle{width:84px;height:84px;border-radius:50%;background:var(--yellow);font-size:13px;text-align:center;line-height:1.1}
.stk-pill{padding:8px 16px;border-radius:999px;background:var(--pink);font-size:16px}
.stk-star{width:76px;height:76px;border:0;box-shadow:none;font-size:70px;line-height:1;color:var(--red);-webkit-text-stroke:2.5px var(--ink);filter:drop-shadow(3px 3px 0 var(--ink))}
.stk-rect{padding:10px 14px;border-radius:12px;background:var(--blue);font-family:var(--pixel);font-size:13px;font-weight:400}
.stk-hint{position:absolute;z-index:3;left:4%;bottom:90px;font-family:var(--pixel);font-size:11px;color:var(--muted);transform:rotate(-3deg)}

.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;font-family:var(--pixel);font-size:12px}
.hero-foot a{display:flex;align-items:center;gap:10px}
.hero-foot a b{display:inline-block;animation:bounce-y 1.2s ease-in-out infinite}
@keyframes bounce-y{50%{transform:translateY(6px)}}

/* =========================================================
   BRAND STORY
   ========================================================= */
.brand-story .sec-head h2{font-size:clamp(30px,3.8vw,56px)}
.brand-photo{aspect-ratio:23/10;--rot:1.2deg;margin-bottom:110px}
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:900px}
.char-card{position:relative;border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 30px;background:var(--c);min-height:380px;display:flex;flex-direction:column;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d;transition:transform .15s linear,box-shadow .3s}
.char-card:nth-child(1){--c:var(--yellow)}.char-card:nth-child(2){--c:var(--blue)}.char-card:nth-child(3){--c:var(--red);color:var(--ink)}
.char-card:hover{box-shadow:10px 10px 0 var(--ink)}
.char-top{display:flex;justify-content:space-between;font-family:var(--pixel);font-size:12px}
.char-art{flex:1;display:grid;place-items:center;min-height:170px}
.char-art svg{width:130px;height:130px;overflow:visible}
.char-card h3{font-family:var(--jp);font-weight:900;font-size:48px;line-height:1;display:flex;align-items:baseline;gap:12px}
.char-card h3 small{font-family:var(--en);font-size:15px;font-weight:800;letter-spacing:.06em}
.char-card p{font-weight:500;margin-top:14px}
.char-stat{display:flex;gap:4px;margin-top:16px}
.char-stat i{flex:1;height:10px;border:2px solid var(--ink);border-radius:3px;background:var(--paper)}
.char-stat i.on{background:var(--ink)}
.art-bowl .steam{animation:steam 2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.art-bowl .steam:nth-of-type(2){animation-delay:.5s}
@keyframes steam{0%,100%{transform:translateY(0) scaleY(1);opacity:.9}50%{transform:translateY(-10px) scaleY(1.2);opacity:.4}}
.art-moon{animation:moon 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes moon{50%{transform:rotate(-14deg)}}
.art-star{animation:spin 8s linear infinite;transform-box:fill-box;transform-origin:center}
.chars-note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;margin:64px auto 0;width:fit-content;max-width:100%;padding:22px 34px;background:var(--ink);color:var(--paper);border-radius:999px;box-shadow:6px 6px 0 var(--red);rotate:-1.5deg;font-family:var(--jp);font-weight:900;font-size:clamp(20px,2.6vw,34px);line-height:1.3}
.chars-note .cn-eq{color:var(--yellow)}
.chars-note .cn-w{display:inline-block;color:var(--ink);border:2.5px solid var(--paper);border-radius:14px;padding:4px 14px;transition:transform .3s var(--spring)}
.chars-note .cn-w.y{background:var(--yellow);transform:rotate(-4deg)}.chars-note .cn-w.b{background:var(--blue);transform:rotate(3deg)}.chars-note .cn-w.r{background:var(--red);transform:rotate(-2deg)}
.chars-note .cn-w:hover{transform:rotate(0) scale(1.12)}
.chars-note .cn-dot{color:#f7f1e366}

/* =========================================================
   BUSINESS（スキルツリー）
   ========================================================= */
.business{background:var(--ink);color:var(--paper)}
.business .tag{background:var(--yellow);color:var(--ink)}
.business .sec-head p{color:#f7f1e3cc}
.tree{position:relative}
.tree-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tree-lines path{fill:none;stroke:var(--yellow);stroke-width:3;stroke-dasharray:8 8;stroke-linecap:round}
.tree-lines .flow{stroke-dasharray:8 8;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.tree-core{display:flex;justify-content:center;margin-bottom:110px}
.tree-kids{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.flip{display:block;position:relative;perspective:1200px;border:0;background:none;padding:0;text-align:left;width:100%;min-height:340px}
.tree-core .flip{width:min(620px,100%);min-height:300px}
.flip-inner{display:block;position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--line);border-color:var(--paper);border-radius:var(--radius);padding:26px 28px;display:flex;flex-direction:column;background:var(--c,var(--paper));color:var(--ink);box-shadow:6px 6px 0 var(--paper)}
.face.back{transform:rotateY(180deg);background:var(--paper)}
.flip:hover .face.front{transform:translateY(-6px) rotate(-1deg);transition:transform .3s var(--spring)}
.f-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--pixel);font-size:12px;gap:10px}
.f-top .lvl{background:var(--ink);color:var(--paper);border-radius:6px;padding:3px 8px}
.f-icon{flex:1;display:grid;place-items:center;min-height:110px}
.f-icon svg{width:96px;height:96px;overflow:visible}
.face strong{display:block;font-family:var(--en);font-weight:800;font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.03em}
.face .jp{display:block;font-family:var(--jp);font-weight:700;font-size:14px;margin-top:8px}
.face .hint{margin-top:16px;padding-top:12px;border-top:2px dashed var(--ink);font-family:var(--pixel);font-size:11px;display:flex;justify-content:space-between}
.face.back h3{font-family:var(--jp);font-weight:900;font-size:21px;line-height:1.6;margin:14px 0 12px}
.face.back p{font-size:13.5px;line-height:2}
.face.back .hint{margin-top:auto}
.flip[data-c=core]{--c:var(--red)}.flip[data-c=brand]{--c:var(--pink)}.flip[data-c=commerce]{--c:var(--yellow)}.flip[data-c=media]{--c:var(--blue)}
.core-badge{position:absolute;z-index:3;top:-18px;right:24px;background:var(--yellow);color:var(--ink);border:var(--line);border-radius:999px;font-family:var(--pixel);font-size:12px;padding:6px 12px;transform:rotate(6deg)}
.tree-note{text-align:center;font-family:var(--pixel);font-size:12px;color:#f7f1e399;margin-top:40px}

/* =========================================================
   CONSULTING
   ========================================================= */
.consult-photo{aspect-ratio:21/9;margin-bottom:70px}
.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.skill{position:relative;border:var(--line);border-radius:var(--radius);background:var(--paper);padding:24px 22px 26px;box-shadow:var(--shadow-sm);transition:transform .3s var(--spring),box-shadow .3s,background .3s}
.skill:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--ink);background:var(--yellow)}
.skill .no{font-family:var(--pixel);font-size:12px;display:flex;justify-content:space-between}
.skill .ico{width:54px;height:54px;border:var(--line);border-radius:14px;display:grid;place-items:center;margin:18px 0;background:var(--paper);font-family:var(--en);font-weight:800;font-size:24px;transition:transform .5s var(--spring)}
.skill:hover .ico{transform:rotate(360deg)}
.skill h3{font-family:var(--jp);font-weight:900;font-size:20px;line-height:1.5;margin-bottom:10px}
.skill p{font-size:13.5px;line-height:2}

/* FIELD NOTES */
.notes{background:var(--blue);border-block:var(--line);padding:110px 0}
.notes-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center}
.notes h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,3.8vw,56px);line-height:1.45;margin:22px 0 22px}
.notes .type::after{content:'▍';animation:blink-text .8s steps(2) infinite;margin-left:2px}
.notes .type.is-done::after{content:''}
.notes p{font-weight:500}
.polaroid{background:var(--paper);border:var(--line);border-radius:10px;padding:14px 14px 50px;box-shadow:var(--shadow);transform:rotate(3deg);position:relative;transition:transform .5s var(--spring)}
.polaroid:hover{transform:rotate(-1deg) scale(1.02)}
.polaroid img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;border:2px solid var(--ink);border-radius:4px}
.polaroid figcaption{position:absolute;left:18px;bottom:14px;font-family:var(--pixel);font-size:12px}

/* =========================================================
   PROCESS（ステージ）
   ========================================================= */
.stages{position:relative;list-style:none;margin:0;padding:0 0 0 90px}
.stages::before{content:'';position:absolute;left:36px;top:10px;bottom:10px;border-left:3px dashed var(--ink)}
.stage-runner{position:absolute;left:8px;top:0;width:60px;z-index:3;transform:translateY(var(--ry,0px));transition:transform .15s linear}
.stage-runner .bear .ink{fill:var(--ink)}.stage-runner .bear .paper{fill:var(--paper)}
.stage-runner .bear{animation:runner-walk .5s ease-in-out infinite alternate}
@keyframes runner-walk{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.stage-item{position:relative;margin-bottom:28px}
.stage-item::before{content:'';position:absolute;left:-63px;top:28px;width:20px;height:20px;border:var(--line);border-radius:50%;background:var(--paper);transition:background .3s}
.stage-item.is-clear::before{background:var(--red)}
.stage-card{border:var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);padding:26px 30px;display:grid;grid-template-columns:240px 1fr;gap:30px;transition:transform .3s var(--spring),box-shadow .3s}
.stage-item:hover .stage-card{transform:translateX(8px);box-shadow:var(--shadow)}
.stage-no{font-family:var(--pixel);font-size:13px;letter-spacing:.08em;color:var(--red)}
.stage-card h3{font-family:var(--jp);font-weight:900;font-size:clamp(30px,3vw,42px);line-height:1.2;margin:8px 0 6px;white-space:nowrap}
.stage-card .meta{font-family:var(--pixel);font-size:11px;color:var(--muted)}
.stage-card .q{font-family:var(--jp);font-weight:700;font-size:17px;line-height:1.7;margin-bottom:8px}
.stage-card p{font-size:14px}
.loot{margin-top:14px;padding:12px 14px;border:2px dashed var(--ink);border-radius:12px;background:var(--paper-2);font-size:13px;line-height:1.8}
.loot b{display:inline-block;font-family:var(--pixel);font-weight:400;font-size:11px;background:var(--ink);color:var(--yellow);border-radius:6px;padding:2px 8px;margin-right:10px}
.clear-stamp{position:absolute;right:22px;top:-14px;font-family:var(--pixel);font-size:16px;color:var(--red);border:3px solid var(--red);border-radius:10px;padding:4px 12px;background:var(--paper);transform:rotate(10deg) scale(0);transition:transform .45s var(--spring)}
.stage-item.is-clear .clear-stamp{transform:rotate(10deg) scale(1)}
.process-foot{margin-top:40px;font-weight:500;text-align:center}

/* =========================================================
   BRANDING / COMMERCE / MEDIA
   ========================================================= */
.tint{background:var(--paper-2);border-block:var(--line)}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}
.split-2.rev{grid-template-columns:.8fr 1.2fr}
.split-2 .sticker-photo{aspect-ratio:4/3}
.split-2 .tall{aspect-ratio:4/5;--rot:2deg}
.blist{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:12px}
.blist li{border:var(--line);border-radius:16px;padding:16px 20px;background:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;transition:transform .3s var(--spring),background .3s}
.blist li:hover{transform:translateX(10px) rotate(-1deg);background:var(--pink)}
.blist li span{font-family:var(--pixel);font-size:11px;grid-column:1/-1}
.blist li strong{font-family:var(--jp);font-weight:700;font-size:16px;grid-column:1/-1}
.eyebrow{font-family:var(--pixel);font-size:12px;letter-spacing:.06em;color:var(--muted);display:block;margin-top:20px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.chip{border:var(--line);border-radius:18px;padding:16px 18px;background:var(--c);box-shadow:var(--shadow-sm);animation:bob 4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.chip:nth-child(1){--c:var(--pink)}.chip:nth-child(2){--c:var(--mint);--dl:.6s}.chip:nth-child(3){--c:var(--yellow);--dl:1.2s}.chip:nth-child(4){--c:var(--blue);--dl:1.8s}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}
.chip span{font-family:var(--pixel);font-size:11px;display:block}
.chip strong{font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.6;display:block;margin-top:4px}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.app{border:var(--line);border-radius:28px;background:var(--paper);box-shadow:var(--shadow);padding:22px;transition:transform .35s var(--spring)}
.app:hover{transform:translateY(-10px) rotate(2deg)}
.app-ico{width:64px;height:64px;border:var(--line);border-radius:18px;display:grid;place-items:center;background:var(--c);margin-bottom:18px;font-size:28px;font-family:var(--en);font-weight:800;position:relative;overflow:hidden}
.app:nth-child(1){--c:var(--yellow)}.app:nth-child(2){--c:var(--pink)}.app:nth-child(3){--c:var(--mint)}.app:nth-child(4){--c:var(--blue)}
.app-ico .bar{position:absolute;left:8px;right:8px;bottom:8px;height:5px;border-radius:3px;background:#1a1a1a33;overflow:hidden}
.app-ico .bar::after{content:'';position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:progress 2.4s linear infinite}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.app span{font-family:var(--pixel);font-size:11px;color:var(--muted)}
.app h3{font-family:var(--en);font-weight:800;font-size:24px;line-height:1.2;margin:4px 0 10px;letter-spacing:-.02em}
.app p{font-size:13.5px;line-height:2}

/* =========================================================
   KuNerAsb EDIT（夜）
   ========================================================= */
.night{background:#151830;color:var(--paper);overflow:hidden}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:3px;height:3px;background:var(--paper);border-radius:50%;animation:twinkle var(--t,3s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes twinkle{50%{opacity:.15;transform:scale(.5)}}
.night .tag{background:var(--yellow);color:var(--ink)}
.night .h2{color:var(--paper)}
.night .mark::after{background:#5a4fcf}
.night-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:6%;align-items:center}
.night p.lead{color:#f7f1e3d9}
.ticket{display:inline-flex;margin-top:36px;color:var(--ink);filter:drop-shadow(5px 5px 0 #000)}
.ticket>div{background:var(--yellow);padding:16px 22px;border-radius:14px 0 0 14px}
.ticket>div+div{background:var(--paper);border-radius:0 14px 14px 0;border-left:3px dashed var(--ink);display:grid;place-items:center;font-size:28px}
.ticket span{font-family:var(--pixel);font-size:11px;display:block}
.ticket strong{font-family:var(--en);font-weight:800;font-size:20px}
.night .sticker-photo{border-color:var(--paper);box-shadow:8px 8px 0 #000;aspect-ratio:3/2;--rot:2deg}
.moon{position:absolute;right:6%;top:60px;width:70px;height:70px;border-radius:50%;box-shadow:-16px 10px 0 0 var(--yellow);transform:rotate(-20deg);animation:moon 6s ease-in-out infinite}

/* =========================================================
   PRINCIPLE
   ========================================================= */
.principle{background:var(--paper);isolation:isolate;overflow:hidden}
.principle::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#1a1a1a26 1.4px,transparent 1.4px);background-size:24px 24px;z-index:-1}
.principle::after{content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:var(--mint);border:var(--line);z-index:-1;animation:spin 30s linear infinite}
.neutral-title{font-family:var(--en);font-weight:800;font-size:clamp(54px,9vw,150px);line-height:.95;letter-spacing:-.05em;margin:22px 0 30px}
.neutral-title .w{display:inline-block;transition:transform .35s var(--spring),color .2s}
.neutral-title .w:hover{transform:translateY(-14px) rotate(-8deg);color:var(--red)}
.neutral-title em{font-style:normal;-webkit-text-stroke:3px var(--ink);color:transparent;display:inline-block}
.neutral-title em .w:hover{color:var(--yellow);-webkit-text-stroke:3px var(--ink)}
.principle .lead{max-width:640px}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.rule{border:var(--line);border-radius:var(--radius);background:var(--paper);padding:22px;box-shadow:var(--shadow-sm);transition:transform .35s var(--spring),background .3s}
.rule:nth-child(odd){transform:rotate(-1.5deg)}.rule:nth-child(even){transform:rotate(1.5deg)}
.rule:hover{transform:rotate(0) translateY(-8px);background:var(--mint)}
.rule span{font-family:var(--pixel);font-size:11px;display:block;margin-bottom:14px}
.rule strong{font-family:var(--jp);font-weight:900;font-size:19px;line-height:1.6}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--red);border-top:var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:6%;align-items:start}
.contact .h2{color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.contact .tag{background:var(--paper);color:var(--ink)}
.contact .lead{color:var(--ink);font-weight:500;margin-top:24px}
.contact-note{margin-top:26px;font-size:12.5px;line-height:1.9}
.contact-note a,.agree a{text-decoration:underline;text-underline-offset:3px}
.continue{margin-top:34px;font-family:var(--pixel);font-size:14px;letter-spacing:.1em}
.continue b{font-weight:400;display:inline-block;min-width:2ch;animation:blink-text 1s steps(2) infinite}
.form{background:var(--paper);border:var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:30px;display:grid;gap:18px}
.form label{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--jp);font-weight:700;font-size:14px}
.form label .req{font-family:var(--pixel);font-weight:400;font-size:10px;background:var(--red);color:var(--paper);border-radius:5px;padding:1px 6px;margin-left:6px}
.form input:not([type=checkbox]),.form textarea,.form select{width:100%;border:var(--line);border-radius:14px;background:var(--paper);padding:13px 15px;font-family:var(--body);font-size:16px;font-weight:400;transition:box-shadow .2s,transform .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;box-shadow:4px 4px 0 var(--yellow),4px 4px 0 2.5px var(--ink);transform:translate(-2px,-2px)}
.form textarea{resize:vertical;min-height:140px}
.form label>input:not([type=checkbox]),.form label>textarea,.form label>select{flex-basis:100%}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.form label.agree{display:flex;align-items:center;gap:10px;font-weight:500;font-size:13px}
.agree input{width:22px;height:22px;accent-color:var(--ink);margin:0}
.send{justify-self:start;border:var(--line);background:var(--ink);color:var(--paper);border-radius:16px;padding:16px 30px;font-family:var(--pixel);font-size:17px;letter-spacing:.1em;box-shadow:5px 5px 0 var(--yellow),5px 5px 0 2.5px var(--ink);transition:transform .15s,box-shadow .15s}
.send:hover{transform:translate(-2px,-2px)}
.send:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.send:disabled{opacity:.6;cursor:wait}
.form-status{min-height:24px;font-size:13.5px;font-weight:700}
.form-status[data-kind=ok]{color:#1d7a46}
.form-status[data-kind=error]{color:#b3261e}
.confetti{position:fixed;top:-20px;z-index:260;width:10px;height:16px;pointer-events:none;animation:fall var(--t,2.4s) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--x,0),110vh) rotate(var(--r,720deg))}}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:120px 0 30px}
.peek{position:absolute;top:-2px;left:50%;width:150px;transform:translateX(-50%) translateY(-62%);transition:transform .5s var(--spring)}
.peek .bear .ink{fill:var(--ink)}.peek .bear .paper{fill:var(--paper)}
.site-footer:hover .peek{transform:translateX(-50%) translateY(-72%) rotate(-6deg)}
.foot-word{width:100%;filter:invert(1);opacity:.95}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px dashed #f7f1e355;font-size:12.5px}
.foot-row nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-row nav a:hover{color:var(--yellow)}
.foot-meta{font-family:var(--pixel);font-size:11px;color:#f7f1e3aa;display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.motion-toggle{background:none;border:2px solid #f7f1e366;color:var(--paper);border-radius:999px;padding:6px 14px;font-family:var(--pixel);font-size:11px}

/* 実績トースト */
.toasts{position:fixed;left:18px;bottom:18px;z-index:120;display:grid;justify-items:start;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border:2px solid var(--paper);outline:2.5px solid var(--ink);border-radius:14px;padding:10px 16px 10px 12px;font-family:var(--jp);font-weight:700;font-size:13px;animation:toast-in .5s var(--spring),toast-out .4s ease-in 2.6s forwards}
.toast .t-ico{width:30px;height:30px;border-radius:8px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-family:var(--pixel);font-size:14px}
.toast small{display:block;font-family:var(--pixel);font-weight:400;font-size:10px;color:var(--yellow)}
@keyframes toast-in{from{transform:translateX(-120%)}}
@keyframes toast-out{to{transform:translateX(-120%);opacity:0}}
.progress{position:fixed;left:0;top:0;height:5px;width:100%;z-index:110;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}

/* =========================================================
   下層ページ
   ========================================================= */
.page-hero{padding:150px 0 60px}
.page-hero .crumb{font-family:var(--pixel);font-size:12px;color:var(--muted)}
.page-hero h1{font-family:var(--en);font-weight:800;font-size:clamp(60px,10vw,150px);line-height:.95;letter-spacing:-.05em;margin:18px 0 8px}
.page-hero p{font-family:var(--jp);font-weight:700}
.profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:6%;align-items:start;padding-bottom:120px}
.profile .bear-card{border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--yellow);padding:40px;transform:rotate(-2deg)}
.profile .bear-card p{font-family:var(--jp);font-weight:700;margin-top:20px;text-align:center}
.profile dl{margin:0;border:var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);overflow:hidden}
.profile dl div{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:20px 26px;border-bottom:2px dashed #1a1a1a33}
.profile dl div:last-child{border-bottom:0}
.profile dt{font-family:var(--pixel);font-size:12px;color:var(--muted);padding-top:3px}
.profile dd{margin:0;font-weight:500}
.profile dd a{text-decoration:underline}
.doc{max-width:860px;padding-bottom:120px}
.doc h2{font-family:var(--jp);font-weight:900;font-size:20px;margin:44px 0 10px}
.doc p,.doc li{font-size:15px;line-height:2.1}
.doc ul{padding-left:1.3em}
.doc a{text-decoration:underline}
.doc .date{font-family:var(--pixel);font-size:12px;color:var(--muted);margin-top:50px}
.back-links{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:110px}


/* ---------- 場面イラスト（写真の代わり） ---------- */
/* イラストは描いた縦横比のまま表示する（画面幅で切り抜かない） */
.sticker-photo.scene,.polaroid-art.scene{aspect-ratio:auto!important}
.scene svg.art{display:block;width:100%;height:auto}
.polaroid-art{border:2px solid var(--ink);border-radius:4px;overflow:hidden}
.scene .draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 3s var(--ease) infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
.scene .bob{animation:bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scene .bob2{animation-delay:-1s}.scene .bob3{animation-delay:-2s}
.scene .sway{animation:sway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes sway{50%{transform:rotate(4deg)}}
.scene .note{transform-box:fill-box;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.scene .note2{animation-delay:-1.5s}.scene .note3{animation-delay:-3s}
.scene .bear-g{animation:bearbob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bearbob{50%{transform:translateY(-8px) rotate(2deg)}}
.scene .steam{animation:steam 2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.scene .bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow 2.4s var(--spring) infinite alternate}
.scene .bar:nth-of-type(2){animation-delay:.2s}.scene .bar:nth-of-type(3){animation-delay:.4s}.scene .bar:nth-of-type(4){animation-delay:.6s}
@keyframes grow{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.scene .walker{animation:walk 16s linear infinite}
@keyframes walk{from{transform:translateX(-170px)}to{transform:translateX(1170px)}}
.scene .walk-bob{animation:walkbob .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes walkbob{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-10px) rotate(5deg)}}
.scene .drift{animation:drift-x 9s ease-in-out infinite alternate}
.scene .drift2{animation-duration:12s}
@keyframes drift-x{to{transform:translateX(60px)}}
.scene .spin-slow{animation:spin 20s linear infinite;transform-box:fill-box;transform-origin:center}
.scene .fan{animation:fan 3s ease-in-out infinite alternate;transform-box:view-box;transform-origin:0 0}
@keyframes fan{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.scene .wiggle{animation:wiggle .6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:10% 90%}
@keyframes wiggle{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.scene .puff{animation:puff 2.2s ease-out infinite}
@keyframes puff{from{opacity:0;transform:translate(-10px,10px)}40%{opacity:1}to{opacity:0;transform:translate(10px,-10px)}}
.scene .swing{animation:swing 2.6s ease-in-out infinite alternate;transform-box:view-box;transform-origin:0 0}
@keyframes swing{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.scene .flicker{animation:flicker .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flicker{from{transform:scale(.9,1.05) rotate(-3deg)}to{transform:scale(1.05,.95) rotate(3deg)}}
.scene .bulbs circle{animation:twinkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scene .bulbs circle:nth-child(even){animation-delay:-.8s}

/* =========================================================
   動きを止める / 視差の少ない設定
   ========================================================= */
.no-motion *,.no-motion *::before,.no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.no-motion .split .ch,.no-motion .reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 .split .ch,.reveal{opacity:1!important;transform:none!important}
 .boot{display:none}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:1020px){
 .site-header nav{display:none}
 .menu-btn{display:inline-block}
 .hero-grid{grid-template-columns:1fr}
 .stage{width:min(420px,88%);margin-top:30px}
 .skills,.apps,.rules{grid-template-columns:repeat(2,1fr)}
 .chars{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
 .tree-kids{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
 .tree-core{margin-bottom:60px}
 .stage-card{grid-template-columns:1fr;gap:10px}
}
@media(max-width:720px){
 body{font-size:14px}
 .wrap{width:calc(100% - 32px)}
 .site-header{top:10px;left:10px;right:10px;padding:8px 8px 8px 16px;gap:8px}
 .site-header .brand{width:104px}
 .site-header .btn-cta{display:none}
 .hud{font-size:11px;padding:6px 10px}
 .sec{padding:90px 0}
 .sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
 .hero{padding-top:100px}
 .hero h1{font-size:clamp(44px,13vw,64px)}
 .hero-sub{font-size:15px}
 .btn-game{font-size:13px;padding:12px 18px}
 .speech{left:-2%;top:-4%;font-size:12px;max-width:190px}
 .mood-switch button{padding:8px 11px;font-size:14px}
 .stk-circle{width:66px;height:66px;font-size:11px}
 .stk-star{font-size:54px;width:60px;height:60px}
 .stk-hint{display:none}
 .principle::after{width:200px;height:200px;right:-90px;top:-90px}
 .scene figcaption{font-size:9px;padding:2px 7px;left:8px;bottom:8px}
 .float-items span{opacity:.3}
 .stk{scale:.82}
 .brand-story .sec-head h2{font-size:clamp(23px,6.6vw,30px)}
 .speech{top:-10%}
 .hero-foot{font-size:10px;flex-wrap:wrap}
 .hero-foot>span:last-child{display:none}
 .marquee{padding:12px 0}
 .brand-photo{aspect-ratio:16/10;margin-bottom:70px}
 .char-card{min-height:0}
 .char-card h3{font-size:40px}
 .flip,.tree-core .flip{min-height:330px}
 .skills,.apps,.rules,.chips{grid-template-columns:1fr}
 .notes{padding:80px 0}
 .notes-grid,.split-2,.split-2.rev,.night-grid,.contact-grid,.profile{grid-template-columns:1fr;gap:40px}
 .consult-photo{aspect-ratio:16/10;margin-bottom:46px}
 .stages{padding-left:58px}
 .stages::before{left:20px}
 .stage-runner{left:-2px;width:44px}
 .stage-item::before{left:-47px}
 .stage-card{padding:22px}
 .stage-card h3{font-size:30px}
 .clear-stamp{font-size:13px;right:12px}
 .stage-menu{grid-template-columns:1fr;padding-top:90px;align-content:start}
 .stage-menu .bear{display:none}
 .form{padding:22px}
 .profile dl div{grid-template-columns:1fr;gap:4px}
 .page-hero{padding-top:120px}
 .toasts{left:10px;right:10px;bottom:10px}
 .desktop{display:none}
}

/* =========================================================
   v5 追加分（v1 の site.css の上に重ねる）
   ========================================================= */
.pixel{font-family:'DotGothic16',monospace;letter-spacing:.06em}
.press{font-family:'Press Start 2P',monospace}

/* ---------- 起動：ロゴタイプが1文字ずつ落ちて弾む → クマ登場 → 円が縮んで本編へ ---------- */
.boot{display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:clip-path 1s var(--ease)}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px)}
.boot-word{order:2;width:min(380px,72vw)}
.boot-logo{display:block;width:100%;height:auto;overflow:visible}
.boot-logo .ch{transform-box:fill-box;transform-origin:50% 100%;transform:translate(var(--dx),-110vh) rotate(var(--r));animation:ch-drop 1.25s var(--d) forwards}
/* 重力で加速して落ち → 着地でつぶれ → 跳ね返り → 小さく揺れて止まる */
@keyframes ch-drop{
 0%{transform:translate(var(--dx),-110vh) rotate(var(--r));animation-timing-function:cubic-bezier(.5,0,.9,.4)}
 46%{transform:translate(0,0) rotate(calc(var(--r) * -.35)) scale(1,1);animation-timing-function:ease-out}
 54%{transform:translate(0,0) rotate(calc(var(--r) * -.2)) scale(1.1,.84);animation-timing-function:ease-out}
 67%{transform:translate(0,-16%) rotate(calc(var(--r) * .3)) scale(.96,1.05);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
 77%{transform:translate(0,0) rotate(calc(var(--r) * -.15)) scale(1.05,.93);animation-timing-function:ease-out}
 85%{transform:translate(0,-4%) rotate(calc(var(--r) * .08)) scale(.99,1.01);animation-timing-function:ease-in}
 92%{transform:translate(0,0) rotate(calc(var(--r) * -.04)) scale(1.01,.99)}
 100%{transform:none}
}
.boot-orb{order:1;position:relative;width:min(180px,42vw);aspect-ratio:1452/1610}
.boot-mark{position:absolute;inset:0;width:100%;transform:scale(0);animation:mark-poyon .9s 2s forwards}
@keyframes mark-poyon{ /* 傾けずに、真ん中からぽよーんと大きくなって止まる */
 0%{transform:scale(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 40%{transform:scale(1.18,1.12);animation-timing-function:ease-in-out}
 58%{transform:scale(.9,.94);animation-timing-function:ease-in-out}
 74%{transform:scale(1.06,1.03);animation-timing-function:ease-in-out}
 88%{transform:scale(.98,.99)}
 100%{transform:none}
}
.boot-bar{order:4;width:min(240px,56vw);height:6px;margin-top:-10px;border-radius:6px;background:#1a1a1a1f;overflow:hidden}
.boot-bar i{display:block;height:100%;width:100%;background:var(--ink);border-radius:6px;transform:scaleX(var(--p,0));transform-origin:left}
.boot-count{order:3;font-family:'DotGothic16',monospace;font-size:14px;letter-spacing:.08em;color:var(--muted)}
.boot.is-done{clip-path:circle(0 at 50% 50%)}

/* ---------- 上のバー・下に浮かぶメニュー ---------- */
.topbar{position:fixed;top:14px;left:14px;right:14px;z-index:100;display:flex;align-items:center;gap:14px;pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar .brand{width:128px;background:var(--paper);border:var(--line);border-radius:999px;padding:10px 18px;box-shadow:var(--shadow-sm);box-sizing:content-box}
.topbar .hud{margin-left:auto}
.dock{position:fixed;left:50%;bottom:18px;z-index:110;display:flex;align-items:center;gap:6px;transform:translateX(-50%) skewX(-8deg);background:var(--ink);color:var(--paper);border:2.5px solid var(--paper);outline:2.5px solid var(--ink);border-radius:14px;padding:6px;box-shadow:6px 6px 0 var(--red)}
.dock>*{transform:skewX(8deg)}
.dock-menu{display:flex;align-items:center;gap:10px;background:var(--yellow);color:var(--ink);border:0;border-radius:10px;padding:10px 16px;font-family:'Press Start 2P',monospace;font-size:11px}
.dock-menu:hover{background:var(--red);color:var(--paper)}
.dpad{position:relative;width:18px;height:18px}
.dpad i{position:absolute;background:currentColor;border-radius:2px}
.dpad i:first-child{left:6px;top:0;width:6px;height:18px}.dpad i:last-child{top:6px;left:0;width:18px;height:6px}
.dock-now{min-width:150px;text-align:center;font-family:'Press Start 2P',monospace;font-size:10px;padding:0 10px;white-space:nowrap}
.dock-now.flash{animation:dock-flash .5s steps(2) 2}
@keyframes dock-flash{50%{color:var(--yellow)}}
.dock-up{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--paper);color:var(--ink);font-size:12px}

/* ---------- HERO：タウン ---------- */
.hero{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr auto;align-items:center;gap:0 2vw;padding:110px 3.5vw 30px;min-height:100svh;background:var(--yellow);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#1a1a1a1f 1.3px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.hero[data-mood=eat]{background:#ffe08a}.hero[data-mood=rest]{background:#c8d6ff}.hero[data-mood=play]{background:var(--yellow)}
.hero-copy{position:relative;z-index:3}
.hero .kicker{display:block;font-size:12px;margin:16px 0}
.hero h1{font-family:var(--en);font-weight:800;font-size:clamp(48px,6.4vw,108px);line-height:.92;letter-spacing:-.045em;margin-bottom:24px;color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink)}
.h1-line{display:block;transform:translateY(40px);opacity:0;animation:h1-in .9s var(--spring) forwards;animation-delay:calc(var(--n,0) * .12s + .2s)}
.h1-line:nth-child(2){--n:1}.h1-line:nth-child(3){--n:2}.h1-line:nth-child(4){--n:3}
@keyframes h1-in{to{transform:none;opacity:1}}
.hero h1 em{font-style:normal;color:var(--red)}
.hero[data-mood=eat] h1 em{color:#ff9f1c}.hero[data-mood=rest] h1 em{color:#5b7cff}
.hero-sub{font-family:var(--jp);font-weight:700;font-size:17px;line-height:1.9;margin-bottom:26px}
.hero .moods{display:inline-flex;gap:6px;margin-top:26px;background:var(--paper);border:var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow-sm)}
.hero .moods button{border:0;background:none;border-radius:999px;padding:8px 14px;font-family:var(--jp);font-weight:700;font-size:15px;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hero .moods button small{font-family:'DotGothic16',monospace;font-size:10px}
.hero .moods button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mood-line{font-family:var(--jp);font-weight:700;font-size:14px;margin-top:12px;min-height:1.8em}
.town{position:relative;z-index:2}
.town-inner{position:relative}
.town-svg{display:block;width:100%;height:auto;overflow:visible}
.town-svg .bld{transition:transform .5s var(--spring)}
.town-svg .cloud{animation:cloud-drift 16s ease-in-out infinite alternate}
.town-svg .c2{animation-duration:22s}.town-svg .c3{animation-duration:19s}
@keyframes cloud-drift{to{transform:translateX(70px)}}
.town-svg .tree{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3s ease-in-out infinite}
.town-svg .blinker{animation:twinkle 1s steps(2) infinite}
.town-svg .sign{transform-box:fill-box;transform-origin:50% 100%;animation:bob 3s ease-in-out infinite}
.town-svg .moon{transform-box:fill-box;transform-origin:center;animation:moon 6s ease-in-out infinite}
.town-svg .win{transition:fill .4s}
.hero[data-mood=rest] .town-svg .win{fill:#ffe08a}
.town-bear{position:absolute;width:56px;height:61px;left:0;top:0;transform:translate(calc(var(--tx,50) * 1% - 50%),calc(var(--ty,50) * 1% - 100%));image-rendering:pixelated;pointer-events:none;z-index:2}
.town-inner .town-bear{left:var(--lx,50%);top:var(--ly,50%);transform:translate(-50%,-92%) scaleX(var(--dir,1))}
.pin{position:absolute;z-index:4;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;animation:pin-bob 2.4s ease-in-out infinite}
.pin:nth-of-type(2){animation-delay:-.6s}.pin:nth-of-type(3){animation-delay:-1.2s}.pin:nth-of-type(4){animation-delay:-1.8s}
@keyframes pin-bob{50%{transform:translate(-50%,calc(-100% - 10px))}}
.pin-head{width:46px;height:46px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:var(--red);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--en);font-weight:800;font-size:20px;color:var(--paper)}
.pin-head>*{transform:rotate(45deg)}
.pin-core .pin-head{background:var(--ink)}.pin-brand .pin-head{background:var(--pink);color:var(--ink)}.pin-commerce .pin-head{background:var(--mint);color:var(--ink)}.pin-media .pin-head{background:var(--blue);color:var(--ink)}
.pin-label{font-family:'Press Start 2P',monospace;font-size:9px;background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:4px 7px;white-space:nowrap}
.pin:hover .pin-head{transform:rotate(-45deg) scale(1.15)}
.pin:hover{animation-play-state:paused}
.town-hint{text-align:center;font-size:12px;margin-top:-10px}
.hero-foot{grid-column:1/-1;position:relative;z-index:3;display:flex;justify-content:space-between;gap:20px;font-family:'DotGothic16',monospace;font-size:12px;border-top:2.5px solid var(--ink);padding-top:14px;margin-top:10px}
.hero-foot a b{display:inline-block;animation:bounce-y 1.2s ease-in-out infinite}

/* ---------- 宣言：重なって流れる英字 ＋ 色づく文章 ---------- */
.manifesto{position:relative;height:240vh;background:var(--paper)}
.mf-sticky{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.kinetic{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1vh;pointer-events:none}
.kw{display:block;white-space:nowrap;font-family:var(--en);font-weight:800;font-size:clamp(70px,13vw,220px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px #1a1a1a1c;transform:translateX(var(--kx,0px))}
.kw:nth-child(odd){-webkit-text-stroke-color:#ff5b3a33}
.mf-body{position:relative;z-index:2;max-width:980px}
.mf-body h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,3.8vw,58px);line-height:1.35;margin:18px 0 30px}
.paint{font-family:var(--jp);font-weight:900;font-size:clamp(20px,2.3vw,34px);line-height:1.75;margin-bottom:14px}
.paint .pc{color:#1a1a1a2b;transition:color .25s}
.paint .pc.on{color:var(--ink)}
.paint .pc.hl{color:var(--red)}

/* ---------- 横に流れるパノラマ ---------- */
.pano{position:relative;height:420vh;background:var(--mint)}
.pano-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pano-sticky::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#1a1a1a1a 1.3px,transparent 1.3px);background-size:22px 22px}
.pano-track{position:relative;display:flex;align-items:center;gap:60px;padding:0 8vw;width:max-content;transform:translate3d(var(--px,0px),0,0);will-change:transform}
.pano-intro{width:min(440px,80vw)}
.pano-big{font-family:var(--jp);font-weight:900;font-size:clamp(60px,8vw,120px);line-height:1.1;margin:16px 0;-webkit-text-stroke:3px var(--ink);color:var(--paper);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink)}
.pano-arrow{font-size:14px;animation:tri-nudge .8s steps(2) infinite}
.pano-walk{width:min(820px,84vw);--rot:-1.5deg}
.pano-card{width:min(420px,78vw);min-height:520px;border:var(--line);border-radius:28px;box-shadow:8px 8px 0 var(--ink);padding:26px 28px 30px;display:flex;flex-direction:column;transform:rotate(var(--r,0deg));transition:transform .5s var(--spring)}
.pano-card:hover{transform:rotate(0) translateY(-10px)}
.pano-card.c-eat{background:var(--yellow);--r:-2deg}.pano-card.c-rest{background:var(--blue);--r:1.5deg}.pano-card.c-play{background:var(--red);--r:-1deg}
.pc-top{display:flex;justify-content:space-between;font-family:'DotGothic16',monospace;font-size:13px}
.pc-top .syl{font-family:'Press Start 2P',monospace;font-size:14px}
.pc-art{flex:1;display:grid;place-items:center}
.pc-big{font-family:var(--jp);font-weight:900;font-size:150px;line-height:1;color:var(--paper);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:8px 8px 0 var(--ink);display:inline-block;animation:wobble 3s ease-in-out infinite}
.c-rest .pc-big{animation-duration:5s}.c-play .pc-big{animation-duration:1.4s}
@keyframes wobble{50%{transform:rotate(-6deg) scale(1.05)}}
.pano-card h3{font-family:var(--jp);font-weight:900;font-size:42px;line-height:1;display:flex;align-items:baseline;gap:12px}
.pano-card h3 small{font-family:var(--en);font-size:15px}
.pano-card p{font-weight:700;margin-top:12px}
.pano-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;width:min(560px,84vw);padding:24px 30px;background:var(--ink);color:var(--paper);border-radius:32px;box-shadow:6px 6px 0 var(--red);rotate:-2deg;font-family:var(--jp);font-weight:900;font-size:clamp(24px,2.8vw,40px);line-height:1.3}
.pano-name .cn-eq{color:var(--yellow)}
.pano-name .cn-w{color:var(--ink);border:2.5px solid var(--paper);border-radius:14px;padding:4px 14px}
.pano-name .y{background:var(--yellow)}.pano-name .b{background:var(--blue)}.pano-name .r{background:var(--red)}
.pano-name .cn-dot{color:#f7f1e366}
.pano-ground{position:absolute;left:0;right:0;bottom:0;height:70px;background:#8a5a3b;border-top:var(--line);background-image:linear-gradient(90deg,#1a1a1a33 2px,transparent 2px);background-size:46px 100%;background-position:var(--gx,0) 0}
.pano-bear{position:absolute;left:var(--bx,10%);bottom:66px;width:64px;height:70px;image-rendering:pixelated;transform:translateY(var(--by,0px))}

/* ---------- 事業カード（押すとモーダル） ---------- */
.bcard{display:flex;flex-direction:column;gap:10px;text-align:left;width:100%;min-height:300px;background:var(--c,var(--paper));color:var(--ink);border:2.5px solid var(--paper);border-radius:var(--radius);box-shadow:6px 6px 0 var(--paper);padding:24px 26px;transition:transform .35s var(--spring),box-shadow .35s}
.bcard:hover{transform:translate(-4px,-6px) rotate(-1deg);box-shadow:12px 12px 0 var(--paper)}
.bcard[data-c=core]{--c:var(--red)}.bcard[data-c=brand]{--c:var(--pink)}.bcard[data-c=commerce]{--c:var(--yellow)}.bcard[data-c=media]{--c:var(--blue)}
.tree-core .bcard{width:min(620px,100%)}
.b-top{display:flex;justify-content:space-between;gap:12px;font-family:'DotGothic16',monospace;font-size:12px}
.b-top .lvl{background:var(--ink);color:var(--paper);border-radius:6px;padding:2px 8px}
.b-icon{align-self:center;width:84px;height:84px;margin:8px 0;display:grid;place-items:center;border:var(--line);border-radius:22px;background:var(--paper);font-family:var(--en);font-weight:800;font-size:36px;transition:transform .5s var(--spring)}
.bcard:hover .b-icon{transform:rotate(-12deg) scale(1.1)}
.bcard strong{font-family:var(--en);font-weight:800;font-size:clamp(28px,2.8vw,42px);line-height:1;letter-spacing:-.03em}
.b-short{font-family:var(--jp);font-weight:700;font-size:14px;line-height:1.8}
.b-open{margin-top:auto;padding-top:12px;border-top:2px dashed var(--ink);font-family:'Press Start 2P',monospace;font-size:10px;text-align:right}

/* ---------- モーダル ---------- */
.modal{width:min(1080px,94vw);max-height:92dvh;padding:0;border:var(--line);border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:12px 12px 0 var(--ink);overflow:auto}
.modal::backdrop{background:#1a1a1acc;backdrop-filter:blur(6px)}
.modal[open]{animation:modal-pop .55s var(--spring)}
@keyframes modal-pop{from{transform:translateY(60px) scale(.9) rotate(-2deg);opacity:0}}
.modal-close{position:sticky;top:14px;float:right;margin:14px 14px 0 0;z-index:3;border:var(--line);background:var(--yellow);border-radius:999px;padding:8px 16px;font-family:'Press Start 2P',monospace;font-size:10px;box-shadow:var(--shadow-sm)}
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:0;clear:both}
.m-art{border-right:var(--line);background:var(--c,var(--yellow));display:grid;place-items:center;padding:30px}
.m-art svg.art{border:var(--line);border-radius:18px;box-shadow:var(--shadow);background:var(--paper)}
.m-core{--c:var(--red)}.m-brand{--c:var(--pink)}.m-commerce{--c:var(--yellow)}.m-media{--c:var(--blue)}
.m-copy{padding:20px 34px 34px}
.m-label{font-family:'DotGothic16',monospace;font-size:13px}
.m-title{font-family:var(--en);font-weight:800;font-size:clamp(36px,4vw,60px);line-height:1;letter-spacing:-.04em;margin:12px 0 14px}
.m-short{font-weight:700}
.m-back{margin-top:22px;padding:18px 20px;border:2px dashed var(--ink);border-radius:18px;background:#fff8}
.m-blabel{font-family:'DotGothic16',monospace;font-size:12px;color:var(--muted)}
.m-back h3{font-family:var(--jp);font-weight:900;font-size:21px;line-height:1.6;margin:6px 0 8px}
.m-back p{font-size:14px;line-height:2}
.m-cta{margin-top:24px}
.modal-pager{display:flex;justify-content:space-between;align-items:center;border-top:var(--line);padding:14px 22px}
.modal-pager button{border:0;background:none;font-family:'Press Start 2P',monospace;font-size:10px;padding:8px}
.modal-pager button:hover{color:var(--red)}
.modal-body.turn{animation:turn .45s var(--ease)}
@keyframes turn{from{opacity:0;transform:translateX(40px)}}

/* ---------- 進め方：定規とカウンター ---------- */
.process{padding:130px 0 120px;background:var(--paper)}
.pr-head{margin-bottom:50px}
.pr-head h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,3.8vw,58px);line-height:1.32;margin:18px 0 18px}
.pr-body{display:grid;grid-template-columns:.8fr 1.2fr;gap:5%}
.pr-sticky{position:sticky;top:110px}
.pr-count{display:flex;align-items:baseline;gap:10px;font-family:'Press Start 2P',monospace}
.pr-count small{font-size:12px}
.pr-count b{font-weight:400;font-size:clamp(70px,8vw,120px);line-height:1;color:var(--red);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink)}
.pr-count span{font-size:14px;color:var(--muted)}
.pr-count b.is-count-flip{animation:count-flip .4s steps(3)}
@keyframes count-flip{0%{transform:translateY(-20px);opacity:0}}
.pr-dur{font-size:14px;margin:16px 0 26px}
.ruler{position:relative;height:110px;border-bottom:var(--line)}
.ticks{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;justify-content:space-between}
.ticks i{width:2px;height:14px;background:var(--ink);align-self:flex-end}
.ticks i:nth-child(10n+1){height:36px}.ticks i:nth-child(5n+1){height:24px}
.ruler-fill{position:absolute;left:0;bottom:-2.5px;height:8px;width:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--rf,0))}
.ruler-bear{position:absolute;left:0;bottom:38px;width:58px;height:63px;image-rendering:pixelated;transform:translateX(calc(var(--rx,0) * (100cqw - 58px)))}
.ruler{container-type:inline-size}
.pcards{list-style:none;margin:0;padding:0}
.pcard{position:sticky;top:calc(110px + var(--i) * 18px);margin-bottom:60px;border:var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);padding:26px 30px;transform:rotate(calc((var(--i) - 2) * .6deg))}
.pcard:nth-child(2){background:#fff4cf}.pcard:nth-child(3){background:#e4ecff}.pcard:nth-child(4){background:#ffe4ea}.pcard:nth-child(5){background:#dff5ea}
.pc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.st-no{font-family:'Press Start 2P',monospace;font-size:11px;background:var(--ink);color:var(--paper);padding:5px 8px;border-radius:6px}
.pcard h3{font-family:var(--jp);font-weight:900;font-size:34px}
.pcard .meta{font-family:'DotGothic16',monospace;font-size:12px;color:var(--muted)}
.pcard .q{font-family:var(--jp);font-weight:700;font-size:17px;margin-bottom:6px}
.pcard p{font-size:14px}
.pcard.is-clear .clear-stamp{transform:rotate(10deg) scale(1)}
.process-foot{margin-top:20px;font-weight:500;text-align:center}

/* ---------- 判断基準：ゆらぐ同心円 ---------- */
.principle{background:var(--paper);overflow:hidden}
.principle::before,.principle::after{display:none}
.rings{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.principle .wrap{position:relative;z-index:1}

/* ---------- お問い合わせ：回る文字の輪 ---------- */
.talk{position:relative;width:220px;height:220px;margin-top:30px}
.talk-ring{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);animation:spin 14s linear infinite;font-family:var(--jp);font-weight:900;font-size:17px;fill:var(--ink)}
.talk-core{position:absolute;inset:44px;border-radius:50%;background:var(--paper);border:var(--line);display:grid;place-items:center;padding:20px;box-shadow:var(--shadow-sm)}
.talk-core svg{width:100%;animation:boot-bob 2s ease-in-out infinite}

/* ---------- フッター：地面を歩くドットのクマ ---------- */
.thanks{text-align:center;font-size:16px;color:var(--yellow);margin-top:24px;animation:blink-text 1.4s steps(2) infinite}
.foot-ground{position:relative;height:110px;margin-top:40px}
.foot-ground::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;background:#8a5a3b;border-top:2.5px solid var(--paper);background-image:linear-gradient(90deg,#1a1a1a55 2px,transparent 2px);background-size:40px 100%}
.foot-bear{position:absolute;bottom:38px;left:0;width:60px;height:65px;image-rendering:pixelated;animation:foot-walk 18s linear infinite}
@keyframes foot-walk{from{transform:translateX(-70px)}to{transform:translateX(100vw)}}
.site-footer{padding-bottom:0}
.toasts{bottom:90px}

/* 動きを止める */
.no-motion .h1-line{opacity:1;transform:none}
.no-motion .boot-logo .ch{transform:none;animation:none}.no-motion .boot-mark{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.h1-line{opacity:1;transform:none}}

@media(max-width:1020px){
 .hero{grid-template-columns:1fr;padding-top:100px}
 .town{margin-top:20px}
 .pr-body{grid-template-columns:1fr}
 .pr-sticky{position:static;margin-bottom:30px}
 .pcard{position:relative;top:auto}
 .modal-body{grid-template-columns:1fr}
 .m-art{border-right:0;border-bottom:var(--line)}
}
@media(max-width:720px){
 .topbar .brand{width:96px;padding:8px 14px}
 .topbar .btn-cta{display:none}
 .hero{padding:90px 16px 24px}
 .hero h1{font-size:clamp(40px,12vw,60px);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}
 .hero .moods button{padding:7px 10px;font-size:14px}
 .pin-head{width:34px;height:34px;font-size:15px}
 .pin-label{font-size:7px;padding:3px 5px}
 .town-bear{width:38px;height:41px}
 .hero-foot{flex-direction:column;gap:6px}
 .hero-foot>span:last-child{display:none}
 .manifesto{height:200vh}
 .mf-body h2{font-size:clamp(23px,6.6vw,30px)}
 .paint{font-size:clamp(17px,4.8vw,22px)}
 .kw{font-size:clamp(56px,20vw,110px)}
 .pano{height:520vh}
 .pano-card{min-height:440px}
 .pc-big{font-size:110px}
 .pano-track{gap:34px}
 .dock{bottom:12px}
 .dock-now{min-width:90px;font-size:8px}
 .dock-menu{padding:9px 12px;font-size:9px}
 .m-copy{padding:16px 20px 24px}
 .modal-close{margin:10px 10px 0 0}
 .talk{width:170px;height:170px}
 .talk-core{inset:34px}
}

/* 上の帯は v1 と同じ（ナビ付きの横長の帯）。スマホではナビを隠し、下のメニューバーを使う */
.site-header .brand{width:128px}
.site-header .brand{margin-right:auto} /* ロゴ以外は右寄せ（ナビが隠れる幅でも） */

/* 場面イラストの動き（v1と共通） */
/* ---------- 場面イラスト（写真の代わり） ---------- */
/* イラストは描いた縦横比のまま表示する（画面幅で切り抜かない） */
.sticker-photo.scene,.polaroid-art.scene{aspect-ratio:auto!important}
:is(.scene,.art) svg.art{display:block;width:100%;height:auto}
.polaroid-art{border:2px solid var(--ink);border-radius:4px;overflow:hidden}
:is(.scene,.art) .draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 3s var(--ease) infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
:is(.scene,.art) .bob{animation:bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
:is(.scene,.art) .bob2{animation-delay:-1s}:is(.scene,.art) .bob3{animation-delay:-2s}
:is(.scene,.art) .sway{animation:sway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes sway{50%{transform:rotate(4deg)}}
:is(.scene,.art) .note{transform-box:fill-box;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
:is(.scene,.art) .note2{animation-delay:-1.5s}:is(.scene,.art) .note3{animation-delay:-3s}
:is(.scene,.art) .bear-g{animation:bearbob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bearbob{50%{transform:translateY(-8px) rotate(2deg)}}
:is(.scene,.art) .steam{animation:steam 2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
:is(.scene,.art) .bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow 2.4s var(--spring) infinite alternate}
:is(.scene,.art) .bar:nth-of-type(2){animation-delay:.2s}:is(.scene,.art) .bar:nth-of-type(3){animation-delay:.4s}:is(.scene,.art) .bar:nth-of-type(4){animation-delay:.6s}
@keyframes grow{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
:is(.scene,.art) .walker{animation:walk 16s linear infinite}
@keyframes walk{from{transform:translateX(-170px)}to{transform:translateX(1170px)}}
:is(.scene,.art) .walk-bob{animation:walkbob .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes walkbob{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-10px) rotate(5deg)}}
:is(.scene,.art) .drift{animation:drift-x 9s ease-in-out infinite alternate}
:is(.scene,.art) .drift2{animation-duration:12s}
@keyframes drift-x{to{transform:translateX(60px)}}
:is(.scene,.art) .spin-slow{animation:spin 20s linear infinite;transform-box:fill-box;transform-origin:center}
:is(.scene,.art) .fan{animation:fan 3s ease-in-out infinite alternate;transform-box:view-box;transform-origin:0 0}
@keyframes fan{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
:is(.scene,.art) .wiggle{animation:wiggle .6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:10% 90%}
@keyframes wiggle{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
:is(.scene,.art) .puff{animation:puff 2.2s ease-out infinite}
@keyframes puff{from{opacity:0;transform:translate(-10px,10px)}40%{opacity:1}to{opacity:0;transform:translate(10px,-10px)}}
:is(.scene,.art) .swing{animation:swing 2.6s ease-in-out infinite alternate;transform-box:view-box;transform-origin:0 0}
@keyframes swing{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
:is(.scene,.art) .flicker{animation:flicker .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flicker{from{transform:scale(.9,1.05) rotate(-3deg)}to{transform:scale(1.05,.95) rotate(3deg)}}
:is(.scene,.art) .bulbs circle{animation:twinkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
:is(.scene,.art) .bulbs circle:nth-child(even){animation-delay:-.8s}

@keyframes steam{0%,100%{transform:translateY(0) scaleY(1);opacity:.9}50%{transform:translateY(-10px) scaleY(1.2);opacity:.4}}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes twinkle{50%{opacity:.15;transform:scale(.5)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* v5a：最初は v1 の大きなクマ。スクロールでカメラが引き、クマが街に溶け込む */
.hero.hero-zoom{display:block;height:260vh;min-height:0;padding:0;overflow:visible}
.hz-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr auto;align-items:center;gap:0 2vw;padding:100px 3.5vw 24px;overflow:hidden}
.hz-sticky .hero-foot{grid-column:1/-1}
.hz-scene{position:relative;aspect-ratio:1200/800;z-index:2}
.hz-scene .town{position:absolute;inset:0;opacity:var(--town-o,0);transform:scale(var(--town-s,1.4));transform-origin:50% 62%}
.hz-scene .town-hint{opacity:var(--pin-o,0)}
.hz-scene .pin{opacity:var(--pin-o,0);visibility:var(--pin-v,hidden)}
.hz-scene .town-bear{opacity:var(--tb-o,0)}
.hz-scene .stage{position:absolute;left:50%;top:50%;width:min(470px,78%);margin:0;z-index:3;transform:translate(-50%,-50%) translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));opacity:var(--st-o,1);pointer-events:var(--st-pe,auto)}
.hz-hint{position:absolute;left:0;right:0;bottom:-8px;text-align:center;font-size:13px;opacity:var(--hint-o,1);z-index:4}
.hz-hint::after{content:' ↓';display:inline-block;animation:bounce-y 1.2s ease-in-out infinite}
@media(max-width:1020px){.hz-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-top:86px;gap:0}.hz-sticky .hero-copy .moods,.hz-sticky .mood-line,.hz-sticky .kicker{display:none}.hz-sticky h1{font-size:clamp(36px,9vw,64px)}.hz-scene{width:100%}}
@media(max-width:720px){.hz-sticky .hero-sub{font-size:14px;margin-bottom:14px}.hz-sticky .hero-actions{display:none}.hz-scene .stage{width:66%}}

/* ---- 背景・色は v1 と同じ ---- */
.hero.hero-zoom,.hero.hero-zoom[data-mood=play]{background:var(--paper)}
.hero.hero-zoom[data-mood=eat]{background:#fbecc0}
.hero.hero-zoom[data-mood=rest]{background:#dfe6f7}
.hero.hero-zoom::before{display:none}
.hero-zoom h1{color:var(--ink);-webkit-text-stroke:0;text-shadow:none;letter-spacing:-.045em}
.hero-zoom h1 em{color:var(--scene);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;transition:color .6s}
.hz-sticky .hero-bg{opacity:var(--bg-o,1)}
.hz-sticky .stickers{opacity:var(--bg-o,1);visibility:var(--stk-v,visible)}
.hz-sticky>*:not(.hero-bg):not(.stickers){position:relative;z-index:2}
.hz-sticky .stickers{z-index:3}
.hz-sticky .hz-scene{z-index:2}
@media(max-width:720px){.hz-sticky .stk-pill,.hz-sticky .stk-rect,.hz-sticky .stk-circle{display:none}}

/* ---- 配置も v1 と同じ：左に大きな見出し、右に大きなクマ、クマの下に 食う・寝る・遊ぶ ---- */
.hz-sticky{grid-template-columns:1.05fr 1fr;gap:0 3vw;padding:120px max(24px,calc((100vw - 1240px) / 2)) 40px}
.hero-zoom h1{font-size:clamp(52px,7.4vw,122px);line-height:.95;margin-bottom:28px}
.hero-zoom .hero-copy .moods,.hero-zoom .mood-line{display:none}
.hero-zoom .hero-sub{font-size:clamp(15px,1.4vw,19px);margin-bottom:34px}
.hz-scene .stage{width:min(500px,86%)}
.hz-scene .stage .mood-switch{opacity:var(--bg-o,1)}
.hz-sticky .hero-foot{border-top:0;padding-top:0;font-family:var(--pixel);font-size:12px}
@media(max-width:1020px){.hz-sticky{padding-top:96px}.hero-zoom h1{font-size:clamp(40px,10.5vw,64px)}}
@media(max-width:1020px){.hz-sticky{grid-template-columns:1fr;gap:0}}
@media(max-width:720px){.hz-scene .stage{width:62%}.hz-scene .stage .mood-switch{transform:translateX(-50%) rotate(-2deg) scale(.82);transform-origin:50% 100%}.hz-hint{bottom:-34px}}
/* タブレット（1列になる幅）は 2行：Where insight / becomes direction. */
@media(min-width:721px) and (max-width:1020px){
.hero-zoom h1{display:flex;flex-wrap:wrap;font-size:clamp(56px,8.4vw,84px)}
.hero-zoom h1::before{content:'';flex-basis:100%;height:0;order:2}
.hero-zoom h1 .h1-line:nth-child(-n+2){order:1}
.hero-zoom h1 .h1-line:nth-child(n+3){order:3}
.hero-zoom h1 .h1-line:nth-child(odd){margin-right:.24em}
.hz-scene .stage{width:min(420px,50%)}
.hz-sticky{padding-bottom:110px}
}
/* スマホ：4行の見出しを横幅いっぱいに。クマも大きくして、すき間を詰める */
@media(max-width:720px){
.hz-sticky{grid-template-rows:auto 1fr;padding-bottom:84px}
.hz-sticky .hero-foot{display:none}
.hero-zoom h1{font-size:min(20vw,8svh,96px);line-height:.92;margin-bottom:20px}
.hz-scene .stage{width:clamp(170px,calc(100svh - 590px),80%)}
.hz-hint{display:none}
}
/* 街を大きめに：シーンごと広げる（中の位置は % なのでずれない）。クマの大きさは元のまま */
.hz-scene{width:118%;justify-self:center}
@media(max-width:1020px){.hz-scene{width:112%}}
@media(max-width:720px){.hz-scene{width:128%;align-self:start;margin-top:14px}.hz-scene .stage{width:clamp(133px,calc((100svh - 590px) / 1.28),62.5%)}}
/* スマホ・タブレット：画面いっぱいの固定セクションは中身を上寄せに（縦に長い画面で入り口に大きな空きが出ないように） */
@media(max-width:1020px){
.manifesto{height:auto} /* 止めずに普通に流す（文章が短く、止めると下に大きな空きが出るため）。色づきはスクロールに合わせて進む */
.mf-sticky{position:relative;top:auto;height:auto;align-items:start;padding:72px 0 40px}

}
@media(max-width:720px){.toast{padding:7px 12px 7px 9px;font-size:12px;gap:9px}.toast .t-ico{width:24px;height:24px;font-size:12px}}
/* タブレット：最初の画面が下のメニューバーに潜らないように（下の一行と SCROLL の案内は出さない・街は横幅いっぱいまで） */
@media(min-width:721px) and (max-width:1020px){
.hz-sticky .hero-foot,.hz-hint{display:none}
.hz-sticky{padding-bottom:84px}
.hz-scene{width:100%}
.hz-scene .stage{width:min(420px,56%)}
}
/* 「SCROLL ↓ で、クマの街へ」は下の SCROLL TO EXPLORE と重複し、食う・寝る・遊ぶ に重なるので出さない */
.hz-hint{display:none}
/* セクションの上下の余白を詰める（隣り合うセクションの中身の間が空きすぎないように） */
.sec{padding:104px 0}
.process{padding:104px 0 96px}
@media(max-width:720px){.sec{padding:72px 0}.process{padding:72px 0}.notes{padding:64px 0}}
/* 進め方のカード：重なったときに下のカードの見出し行（STAGE と題名）がまるごと見えるように、ずらし幅を広げる */
@media(min-width:1021px){.pcard{top:calc(110px + var(--i) * 78px)}.pcards{padding-bottom:90px}.pcard:last-child{margin-bottom:0}}
/* v1 のスマホ用 scale はステッカーの位置まで縮めてしまうので打ち消す（大きさは v1 側で小さくしてある） */
@media(max-width:720px){.stk{scale:none}}
/* 進め方：縦のすき間を % にすると1列のとき計算がずれ、空きすぎ＋カードが下の文に重なるので固定値に */
.pr-body{row-gap:24px}
/* 縦に長いスマホ：最初の画面は見出しと絵のかたまりを上下の真ん中に、パノラマはカードと大きな文字を画面の高さに合わせて大きく */
@media(max-width:720px){
.hz-sticky{grid-template-rows:auto auto;align-content:center}
.mf-sticky{padding-bottom:32px}
}
/* ウェルネス商品：1列のときはブランド事業と同じく、文章の下にイラスト */
@media(max-width:1020px){.split-2.rev>figure{order:2}}
@media(min-width:721px) and (max-width:1020px){.split-2.rev{grid-template-columns:1fr 1fr}}
@media(max-width:1020px){.hz-scene .town-hint{display:none}} /* スマホ・タブレットは通知（HINT）で出す */
/* パノラマ：入ってきたときにミントの空きが出ないよう、中身は上寄せ（ヘッダーの下から） */
.pano-sticky{justify-content:flex-start;padding-top:104px}
@media(max-width:720px){.pano-card{width:min(300px,76vw);min-height:380px;padding:22px 22px 24px}.pc-big{font-size:92px}} /* スマホのカードは小さめ */
/* 進め方（スマホ・タブレット）：v1 と同じ見せ方。大きな STAGE 数字と定規はやめ、左の点線の上をクマが進む */
.pc-runner{display:none}
@media(max-width:1020px){
.pr-side{display:none}
.pr-body{position:relative}
.pcards{position:relative;padding-left:90px}
.pcards::before{content:'';position:absolute;left:36px;top:10px;bottom:10px;border-left:3px dashed var(--ink)}
.pcard{margin-bottom:28px}
.pcard::before{content:'';position:absolute;left:-63px;top:28px;width:20px;height:20px;border:var(--line);border-radius:50%;background:var(--paper);transition:background .3s}
.pcard.is-clear::before{background:var(--red)}
.pc-runner{display:block;position:absolute;left:12px;top:0;width:52px;height:56px;image-rendering:pixelated;z-index:3;transition:transform .15s linear}
}
@media(max-width:720px){
.pcards{padding-left:58px}
.pcards::before{left:20px}
.pcard::before{left:-47px}
.pcard{padding:22px}
.pc-runner{left:-2px;width:44px;height:48px}
}
/* スマホ：パノラマは止めずに流し、カードは横にスワイプ。地面とクマはカードの下 */
@media(max-width:720px){
.pano{height:auto}
.pano-sticky{position:relative;height:auto;overflow:visible;padding:64px 0 0}
.pano-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 34px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pano-track::-webkit-scrollbar{display:none}
.pano-track>*{flex-shrink:0;scroll-snap-align:start}
.pano-ground{position:relative}
.pano-arrow{font-size:0}.pano-arrow::after{content:'SWIPE →';font-size:14px}
}
@media(min-width:721px) and (max-width:1020px){.hz-sticky{grid-template-rows:auto auto;align-content:center}} /* タブレット：見出しと絵を上下の真ん中に（下に空きを作らない） */
/* 背の低いスマホ（iPhone SE など）：クマが小さくなるので、吹き出しは出さずクマを見せる */
@media(max-width:720px) and (max-height:720px){.hz-scene .speech{display:none}}
@media(max-width:720px){.hz-scene .stage{max-width:78vw}}
/* 斜めの帯：傾けた分だけ端が下がり、上のセクションとの間に地の色がのぞくので、上下に深めに重ねる */
.marquee{margin-block:calc(-10px - 2.2vw)}
@media(max-width:720px){.site-header .brand{width:104px}}
/* 事業のツリー：タブレットは PC と同じ（上に1枚、点線で3つに分かれて下に3枚） */
@media(min-width:721px) and (max-width:1020px){
.tree-core{margin-bottom:90px}
.tree-kids{grid-template-columns:repeat(3,1fr);gap:16px;max-width:none}
.tree-kids .bcard{min-height:260px;padding:18px 16px}
.tree-kids .b-top{flex-direction:column;align-items:flex-start;gap:6px;font-size:11px}
.tree-kids .bcard strong{font-size:24px}
.tree-kids .b-short{font-size:13px}
.tree-kids .b-icon{width:64px;height:64px;font-size:28px}
}
/* スマホ：同じ形を小さく。下の3つは横並びの小さなカード（くわしい説明は押すと開く） */
@media(max-width:720px){
.tree-core{margin-bottom:64px}
.tree-core .bcard{min-height:0;padding:18px 18px 16px;gap:8px}
.tree-core .b-icon{width:60px;height:60px;font-size:26px;margin:2px 0}
.tree-kids{grid-template-columns:repeat(3,1fr);gap:10px;max-width:none}
.tree-kids .bcard{min-height:0;padding:14px 8px 12px;gap:8px;align-items:center;text-align:center;border-radius:16px;box-shadow:4px 4px 0 var(--paper)}
.tree-kids .b-top,.tree-kids .b-short{display:none}
.tree-kids .b-icon{width:46px;height:46px;font-size:20px;border-radius:14px;margin:0}
.tree-kids .bcard strong{font-size:15px;line-height:1.15;letter-spacing:-.02em}
.tree-kids .b-open{width:100%;text-align:center;padding-top:8px;font-size:8px}
}

/* フッターのロゴ：横幅いっぱい → ほどよい大きさで中央に */
.site-footer .foot-word{display:block;width:min(440px,72%);margin-inline:auto}
/* ヘッダー：ロゴ以外は右寄せ（スコア表示を外したので、ナビが隠れる幅でも右に寄せる） */
.site-header .brand{margin-right:auto}
/* スマホ・タブレットのヘッダー：ハンバーガー（三本線）。トップと下層ページで共通 */
.site-header .hamburger{width:46px;height:46px;padding:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.site-header .hamburger i{display:block;width:20px;height:3px;border-radius:3px;background:var(--ink)}
@media(max-width:1020px){.site-header .hamburger{display:flex}}
@media(max-width:720px){.site-header .hamburger{width:42px;height:42px}}
.lost-note{font-family:var(--jp);font-weight:700;font-size:16px;line-height:2;margin:10px 0 40px}