/* ストアの見た目（2026-10-30 第2段階）: 空と雲・木の棚・箱入りロボのおもちゃ屋。
   見本（hataraku-robo-store-concept）の style.css → playful.css → full-team.css から必要な規則だけ移植。
   index.html の <style> の後に読み込み、同じ強さの規則を上書きする。色は 紺/クリーム/赤/黄 に統一 */
:root{--ink:#193b62;--ink-soft:#4b6178;--paper:#fff8e5;--wall:#fff8e5;--red:#e64d37;--price:#ffd54e;--price-ink:#193b62;--sky:#bfe6f5;--shadow:rgba(25,59,98,.25)}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:#fff8e5 radial-gradient(#d2bd8130 1.2px,transparent 1.2px) 0 0/15px 15px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ヘッダー */
.announcement{margin:0 -16px;text-align:center;background:#23588c;color:#fff8e9;font-size:11px;font-weight:700;padding:9px 16px;letter-spacing:.12em}
.sign{max-width:none;margin:0 -16px;background:#fff9e9;color:var(--ink);border:0;border-bottom:5px solid var(--ink);border-radius:0;box-shadow:none;padding:12px max(16px,5%);display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;position:relative;z-index:3}
.logo{font-family:var(--font-display);font-size:24px;color:#205786;text-shadow:1px 2px #ffe08b;text-decoration:none;transform:rotate(-2deg);line-height:1.2;white-space:nowrap}
.logo span{display:inline-block;font-size:13px;margin-left:8px;padding:2px 7px;background:var(--red);color:#fff6c8;border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);transform:rotate(4deg);letter-spacing:1px;text-shadow:none}
.logo small{display:block;font-family:var(--font-body);font-weight:900;font-size:10px;letter-spacing:.2em;color:var(--ink);text-shadow:none;margin-top:4px}
.gnav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;font-weight:900}
.gnav a{text-decoration:none}
.gnav a:hover{color:var(--red)}
.cart{background:var(--price);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 4px 0 var(--ink);font-size:13px}
.cart:hover{transform:translateY(-2px)}
.cart b{background:var(--red);color:#fff;border-radius:50%;font-size:14px;min-width:24px;height:24px;line-height:24px;padding:0}
.cart.usecase{background:#fffaf0}

/* ヒーロー（空と雲） */
.hero{margin:0 -16px;display:grid;grid-template-columns:1.1fr 1fr;gap:10px;padding:56px max(16px,6%) 70px;min-height:560px;background:linear-gradient(180deg,#84d2ef,#b9e6f2);position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;background:#ffffffc9;width:160px;height:44px;border-radius:60px;box-shadow:26px -26px 0 -1px #ffffffc9,67px -10px 0 1px #ffffffc9;z-index:-1;animation:cloud-drift 22s ease-in-out infinite alternate}
.hero::before{top:80px;right:12%}
.hero::after{width:100px;height:28px;bottom:90px;left:38%;opacity:.7;animation-delay:-10s}
.hero-copy{position:relative;z-index:2;min-width:0}
.eyebrow{display:inline-block;font-size:10px;font-weight:900;letter-spacing:2px;background:#fff9df;border:2px solid #23588c;padding:7px 12px;transform:rotate(-2deg);box-shadow:3px 3px 0 #23588c}
.eyebrow>span{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px}
.hero h1{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:clamp(34px,4.4vw,60px);line-height:1.4;letter-spacing:-.03em;margin:22px 0 14px;text-shadow:2px 3px 0 #fff8df}
.hero h1 .red{color:var(--red);display:inline-block;position:relative}
.hero h1 .red::after{content:"";position:absolute;height:12px;background:var(--price);bottom:6px;left:-3px;right:-3px;z-index:-1;transform:rotate(-2deg)}
.hero .sub{font-size:14px;font-weight:700;line-height:1.9;margin:0 0 18px;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.primary-link{display:inline-flex;gap:28px;align-items:center;background:var(--red);color:#fff;text-decoration:none;padding:15px 22px;border:2px solid var(--ink);border-radius:12px;box-shadow:4px 5px 0 var(--ink);font-weight:900;font-size:14px;transition:transform .2s,box-shadow .2s}
.primary-link:hover{transform:translate(-1px,-3px);box-shadow:5px 8px 0 var(--ink)}
.play-tools{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.lucky{border:2px solid var(--ink);border-radius:10px;background:#fffaf0;padding:10px 16px;box-shadow:2px 3px 0 var(--ink);color:var(--ink);font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.lucky:hover{background:#fff0a6;transform:rotate(-2deg)}
.motion-toggle{border:0;background:transparent;color:#315674;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;padding:8px;cursor:pointer}
.hero-scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px;min-width:0}
.hero-box{width:235px;transform:rotate(7deg);animation:hero-bob 5s ease-in-out infinite;z-index:3}
.hero-side{position:absolute;width:170px;top:90px;z-index:1;pointer-events:none}
.hero-side.left{left:-4%;transform:rotate(-15deg);animation:side-bob 6s ease-in-out infinite}
.hero-side.right{right:-2%;transform:rotate(16deg);animation:side-bob 6s ease-in-out infinite reverse}
.orbit{position:absolute;left:-10px;top:-20px;z-index:5;color:#204d7c;font-weight:900;font-size:15px;line-height:1.4;transform:rotate(-12deg);letter-spacing:2px}
.orbit b{font-size:20px}
.orbit span{display:inline-block;color:var(--red);font-size:40px;animation:star-turn 14s linear infinite}
.hero-speech{position:absolute;right:4%;top:6px;background:#fffdf1;border:2px solid var(--ink);padding:9px 16px;border-radius:20px 20px 2px 20px;font-weight:900;font-size:13px;z-index:6;transform:rotate(-6deg);animation:speech-bob 4s ease-in-out infinite;max-width:80%}
.mini-stamp{position:absolute;right:-6px;bottom:40px;border:3px dashed #c7762c;border-radius:50%;background:#ffd955;color:#714126;padding:22px 14px;text-align:center;font-size:12px;font-weight:900;transform:rotate(12deg);z-index:5;box-shadow:4px 5px 0 #0001}
.plinth{position:absolute;bottom:0;width:105%;height:62px;border-radius:50%;background:repeating-linear-gradient(0deg,#e2ae6c 0 4px,#eabc7b 5px 20px);box-shadow:0 18px 0 #b87944,0 32px 25px #435c6e33;transform:rotate(-2deg)}
.ticker{margin:0 -16px;height:34px;background:repeating-linear-gradient(90deg,#df4d39 0 38px,#fff9df 38px 76px);box-shadow:0 6px 0 #bf4435;position:relative;z-index:2}

/* 買い方・料金・業種（既存の .howto を明るい札に） */
.howto{background:#fffbed;border:2px solid #2c6285;border-radius:14px;box-shadow:5px 6px 0 #b4cbd3}
.howto .lbl{background:var(--price);border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);transform:rotate(-2deg)}
.howto li b::before{background:var(--red);border-color:var(--ink)}
#howto{margin-top:40px;scroll-margin-top:16px}
.plan{border:2px solid var(--ink);box-shadow:3px 4px 0 #b4cbd3}
.plan .next{background:#e3eff1}
.picker .chips button,.picker form button,.picker form input{border-width:2px}
.picker .chips button{border-color:#c7b785;box-shadow:0 3px 0 #d4c599;border-radius:10px}
.picker .chips button[aria-pressed="true"]{background:#23588c;color:#fff;border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}

/* 売り場の入口 */
.store-top{max-width:1180px;margin:48px auto 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;scroll-margin-top:16px}
.store-top .eyebrow{color:#d94b34;border-color:#d94b34;box-shadow:3px 3px 0 #d94b34}
.store-top h2{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3.2vw,34px);color:#205786;margin:12px 0 0}
.store-top p{margin:0;font-size:13px;font-weight:700;line-height:1.8;color:var(--ink-soft)}
.team-overview{max-width:1180px;margin:14px auto 16px;display:flex;gap:8px 18px;align-items:center;flex-wrap:wrap;background:#fff1c7;border:2px dashed #d0b77b;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:700}
.team-overview strong{font-family:var(--font-display);font-weight:400;font-size:24px;color:var(--red);margin-right:2px}
.aisles{padding:14px 0;border-block:2px dashed #d8c99e}
.aisles button{border:2px solid #c7b785;background:#fffef7;border-radius:10px;box-shadow:0 3px 0 #d4c599;font-size:13px;transition:transform .2s}
.aisles button:hover,.aisles button:focus-visible{transform:translateY(-3px);box-shadow:0 3px 0 #d4c599}

/* 棚: 大きな木の戸棚をやめ、箱ごとに板を渡す */
.shelf-head h2{color:#205786}
.shelf{background:none;box-shadow:none;border-radius:0;padding:14px 4px 0}
.shelf::after{display:none}
.row{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 30px;align-items:stretch}
.product{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:16px;animation:arrive .45s both}
.product:nth-child(2n){animation-delay:.06s}
.product:nth-child(3n){animation-delay:.12s}
.plank{position:relative;height:22px;margin:6px -16px 16px;border-radius:2px;background:linear-gradient(#f5ce91 0 22%,#b7773d 23% 28%,#d8a367 29% 88%,#aa6d37 89%);box-shadow:0 13px 14px #80532225;flex:none}
.plank::before,.plank::after{content:"";position:absolute;top:22px;width:8px;height:11px;background:#b9844e}
.plank::before{left:20%}
.plank::after{right:20%}
.product .pname{font-family:var(--font-body);font-weight:900;font-size:14px;line-height:1.5;color:#25496d;margin:0 0 4px;min-height:3em;word-break:keep-all;overflow-wrap:anywhere}
.product .pjobs{font-size:12px;line-height:1.7;color:#62716d;margin:0 0 12px;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.product .add{margin-top:auto;width:100%;background:#ffdf65;border:2px solid var(--ink);border-radius:9px;box-shadow:0 4px 0 var(--ink);padding:10px 6px;font:inherit;font-size:12px;font-weight:900;color:var(--ink);cursor:pointer;transition:.2s}
.product .add:hover{background:#ffce35;transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.product .add.selected{background:#deedcd;border-color:#5b7d5d;box-shadow:0 4px 0 #5b7d5d}

/* 箱（推しロボの商品パッケージ） */
.box.package{display:block;width:calc(100% - 9px);padding:11px 12px 10px;color:#fffdf5;background:var(--c) radial-gradient(#ffffff35 1px,transparent 1px) 0 0/10px 10px;border:3px solid color-mix(in srgb,var(--c),#143c61 32%);border-radius:9px 9px 3px 3px;box-shadow:9px 5px 0 color-mix(in srgb,var(--c),#143c61 40%),12px 17px 12px #583c2325;transition:transform .3s,filter .3s;flex:none}
.box.package::before{content:"✦ READY TO WORK ✦";position:absolute;top:-15px;left:26%;right:26%;height:15px;background:var(--c);border:2px solid color-mix(in srgb,var(--c),#143c61 32%);border-bottom:0;border-radius:8px 8px 0 0;text-align:center;font-size:6px;font-weight:900;letter-spacing:.5px;padding-top:3px;color:#fffdf5;white-space:nowrap;overflow:hidden}
.box.package::after{content:"TRY ME!";position:absolute;right:-14px;top:52px;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--price);border:2px solid #214f7c;color:#214f7c;font-size:8px;font-weight:900;display:grid;place-items:center;transform:rotate(12deg);box-shadow:2px 3px 0 #193b6222}
.box.package.pick::after{content:"おすすめ";width:auto;height:auto;border-radius:999px;padding:3px 8px;font-family:var(--font-display);font-size:11px;font-weight:400;right:-10px;top:-12px;border:2px solid var(--ink)}
.product .box.package:hover,.product .box.package:focus-visible{transform:translateY(-12px) rotate(-3deg);filter:brightness(1.06);box-shadow:9px 5px 0 color-mix(in srgb,var(--c),#143c61 40%),12px 22px 16px #583c2330}
.box.package .series{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:12px;letter-spacing:.02em;text-shadow:1px 1px 0 #0003}
.box.package .series{white-space:nowrap}
.box.package .series .brand{min-width:0;overflow:hidden}
.box.package .series small{flex:none;font-family:var(--font-body);font-weight:900;font-size:10px;opacity:.95}
.box.package .series i{flex:none;margin-left:auto;font-size:10px;background:#fffdf5;color:var(--ink);border-radius:4px;padding:1px 5px;text-shadow:none}
.box.package .win{display:flex;margin:8px 0 7px;aspect-ratio:210/178;border:6px solid #fff3cf;border-radius:42% 42% 14px 14px;background:radial-gradient(ellipse at 50% 90%,#b7c8b6 0,transparent 45%),repeating-conic-gradient(from 0deg at 50% 70%,#fff5d9 0 15deg,#e9e4c9 15deg 30deg);box-shadow:inset 0 4px 10px #0003,0 2px 0 #0002;align-items:flex-end}
.box.package .win::before{background:linear-gradient(115deg,transparent 50%,#ffffff70 51%,#ffffff20 65%,transparent 66%)}
.box.package .robot-art-host{filter:drop-shadow(0 5px 2px #19395918)}
.box.package .custom{left:6px;bottom:6px;font-size:9px;border-width:2px;color:var(--ink);background:#fffdf5}
.box.package .cname{font-size:clamp(14px,1.5vw,19px);line-height:1.3;color:#fffdf5;text-shadow:1px 2px 0 #0003,0 0 2px color-mix(in srgb,var(--c),#000 30%);white-space:nowrap;overflow:hidden;text-overflow:clip}
.box.package .box-foot{display:flex;justify-content:space-between;gap:4px;font-size:9px;font-weight:900;margin-top:6px;opacity:.9;white-space:nowrap;overflow:hidden}
.box.package.in{outline:4px dashed var(--red);outline-offset:4px}
body.picking .product:has(> .box:not(.pick)){opacity:.35;filter:saturate(.3)}
body.picking .product:has(> .box:not(.pick)):hover{opacity:.8}
body.picking .box:not(.pick){opacity:1;filter:none}

/* 吹き出し */
.talk-bubble{position:absolute;top:-14px;left:0;right:0;text-align:center;pointer-events:none;z-index:4;opacity:0;transform:translateY(8px);transition:.25s}
.talk-bubble span{display:inline-block;max-width:100%;background:#fffef5;border:2px solid var(--ink);border-radius:14px 14px 14px 0;padding:6px 11px;font-size:11px;font-weight:900;color:var(--ink);box-shadow:2px 3px 0 #193b621a}
.product:hover .talk-bubble,.product:focus-within .talk-bubble{opacity:1;transform:translateY(-22px)}

.showcase{margin-top:30px}

/* 仕様書 */
.veil{background:#18271dc0;backdrop-filter:blur(4px)}
.sheet,.form{border:4px solid var(--ink);box-shadow:10px 12px 0 #183b6255;border-radius:18px;animation:dialog-pop .3s}
.sheet .art{background:var(--c) radial-gradient(#ffffff30 1px,transparent 1px) 0 0/10px 10px;border-right:4px solid var(--ink)}
.sheet .art .win{border:6px solid #fff3cf;border-radius:42% 42% 14px 14px;background:radial-gradient(ellipse at 50% 90%,#b7c8b6 0,transparent 45%),repeating-conic-gradient(from 0deg at 50% 70%,#fff5d9 0 15deg,#e9e4c9 15deg 30deg);box-shadow:inset 0 4px 10px #0003;aspect-ratio:210/190}
.sheet .art .greet{align-self:flex-start;background:#fffef5;border:2px solid var(--ink);border-radius:14px 14px 14px 0;padding:6px 12px;font-size:12px;font-weight:900;color:var(--ink);box-shadow:2px 3px 0 #193b621a}
.btn{border-width:2px;box-shadow:3px 4px 0 var(--ink)}
.btn.add{background:#ffdf65}
.close{border-width:2px}
.toast{background:var(--ink);border:2px solid #fff0bb;border-radius:15px;bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.foot{padding-bottom:80px}

@media (max-width:640px){
  .sheet .art{flex-wrap:wrap}
  .sheet .art .greet{flex:1 1 100%}
  .sheet .art>div:last-child{flex:1;min-width:0}
  .sheet .art .cname{font-size:20px}
  .sheet .art .cname + .name{font-size:13px}
}

/* 問い合わせフォームの選んだロボ */
.form .chips span{display:inline-flex;align-items:center;gap:2px;max-width:100%}
.form .chips em{font-style:normal;font-weight:900;color:var(--red)}
.form .chips .rm{border:0;background:none;font:inherit;font-weight:900;color:var(--ink);cursor:pointer;margin-left:4px;padding:0 4px;min-width:24px;min-height:24px}

/* 採用カート（config.js の cart が true のときだけ出る） */
.floating-cart{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:22px;z-index:40;background:var(--price);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:18px;padding:11px 20px;color:var(--ink);display:flex;gap:12px;align-items:center;cursor:pointer;font:inherit;text-align:left}
.floating-cart .basket{font-size:24px}
.floating-cart strong{display:block;font-size:13px}
.floating-cart small{font-size:10px;font-weight:700}
.floating-cart b{background:var(--red);color:#fff;min-width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;font-family:var(--font-display);font-weight:400}
.floating-cart.bump{animation:cart-bump .6s}
.flying-box{position:fixed;z-index:1000;pointer-events:none;margin:0;transform-origin:center}
.confetti-piece{position:fixed;z-index:1001;width:9px;height:15px;pointer-events:none;border-radius:2px}

/* 動きの停止（ボタン）と、OSの「動きを減らす」 */
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important}
body.motion-paused .box,body.motion-paused .primary-link,body.motion-paused .talk-bubble{transition:none}
body.motion-paused .product .box.package:hover{transform:none}

@keyframes hero-bob{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-13px) rotate(3deg)}}
@keyframes side-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes speech-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes star-turn{to{rotate:360deg}}
@keyframes cloud-drift{to{translate:70px 0}}
@keyframes arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes cart-bump{0%,100%{transform:rotate(0)}30%{transform:scale(1.12) rotate(-5deg)}60%{transform:scale(.98) rotate(4deg)}}
@keyframes dialog-pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}

/* タブレット: 3列 */
@media (max-width:950px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:40px}
  .hero-scene{min-height:400px;max-width:520px;width:100%;margin:10px auto 0}
  .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
  .gnav{order:4;flex:1 1 100%}
}
/* スマホ: 2列 */
@media (max-width:650px){
  .announcement{font-size:10px;letter-spacing:.05em}
  .sign{gap:8px 12px}
  .logo{font-size:19px}
  .logo span{font-size:10px}
  .gnav{gap:4px 14px;font-size:12px}
  .cart{font-size:12px;padding:7px 10px}
  .cart.usecase small{display:none}
  .hero{padding:30px 16px 60px}
  .hero h1{font-size:34px}
  .hero .sub{font-size:13px}
  .hero-scene{min-height:360px;transform:scale(.9)}
  .hero-box{width:200px}
  .hero-side{width:135px;top:80px}
  .hero-side.left{left:-6%}
  .hero-side.right{right:-6%}
  .orbit{font-size:10px;left:0;top:-30px}
  .orbit b{font-size:14px}
  .orbit span{font-size:26px}
  .hero-speech{right:0;top:-22px;font-size:11px;padding:7px 11px}
  .mini-stamp{right:-8px;bottom:8px;font-size:10px;padding:16px 9px}
  .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
  .shelf{padding:12px 4px 0}
  .box.package{width:calc(100% - 6px);padding:8px 8px 8px;border-width:2px;box-shadow:6px 4px 0 color-mix(in srgb,var(--c),#143c61 40%)}
  .box.package::after{width:32px;height:32px;font-size:6px;right:-10px;top:44px}
  .box.package::before{font-size:5px}
  .box.package .series{font-size:10px}
  .box.package .series small{font-size:9px}
  .box.package .win{border-width:4px}
  .box.package .custom{font-size:8px}
  .box.package .cname{font-size:clamp(11px,3.6vw,15px)}
  .box.package .box-foot{font-size:7px}
  .plank{margin:6px -12px 14px}
  .product .pname{font-size:12px}
  .product .pjobs{font-size:11px}
  .talk-bubble span{font-size:9px}
  .team-overview{font-size:11px}
  .floating-cart{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;padding:8px 13px;gap:8px;border-radius:14px}
  .floating-cart strong{font-size:11px}
  .floating-cart small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero::before,.hero::after,.hero-box,.hero-side,.hero-speech,.orbit span,.product,.sheet,.form,.floating-cart{animation:none!important}
  .box.package,.talk-bubble,.primary-link{transition:none}
  .product .box.package:hover{transform:none}
}