/* =========================================================
   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}
}

/* フッターのロゴ：横幅いっぱい → ほどよい大きさで中央に */
.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}