/* アイテムショップ（2026-11-07 shop.html）。スマホ（390px）が先・PC は2段。暗い夜の展示場に、珍しさの色（ふつう・レア・スーパーレア・伝説）で光る札 */
.sh-page{background:#f3f1ea}
.sh-page{--ink:#1d2423;--gold:#ffcf4a;--pink:#ff5a8a;--t-normal:#7f9c8f;--t-rare:#3b8ff0;--t-super:#a259ff;--t-legend:#f5b301}
.sh-lock{overflow:hidden}
.sh-main{display:block}
.sh-wrap{max-width:1080px;margin:0 auto;padding:0 16px 32px}

/* ヒーロー */
.sh-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 30% 20%,#3a2a6b 0%,#1b1533 45%,#0d0b18 100%)}
.sh-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 35% at 28% 58%,rgba(255,180,60,.35),transparent 70%),repeating-conic-gradient(from 0deg at 28% 62%,rgba(255,255,255,.05) 0 6deg,transparent 6deg 18deg);pointer-events:none}
.sh-hero-in{position:relative;max-width:1080px;margin:0 auto;padding:calc(58px + env(safe-area-inset-top,0px)) 16px 22px;display:grid;gap:8px} /* 上の帯（hub.css の .h-top は重ねて置く）の分を空ける */
.sh-hero-stage{position:relative;min-height:240px;border-radius:24px}
.sh-hero-stage canvas{display:block;width:100%!important;height:auto!important}
.sh-hero-ph{height:250px;border-radius:24px;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);animation:shGlow 1.6s ease-in-out infinite alternate}
.sh-hero-svg{display:flex;justify-content:center}
.sh-hero-svg svg{max-height:340px;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.sh-hero-2d{display:grid;place-items:center;gap:10px;height:280px}
.sh-hero-2d .sh-sw{width:140px;height:140px}
.sh-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--gold)}
.sh-hero h1{margin:2px 0 8px;font-size:clamp(24px,6.4vw,40px);line-height:1.15;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.sh-hero-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:800}
.sh-hero-note{margin:4px 0 0;color:#d9d3f3;font-size:14px;min-height:1em}
.sh-hero-price{margin:8px 0 12px;font-size:15px;display:flex;align-items:center;gap:10px}
.sh-hero-price b{font-size:28px;color:var(--gold)}
.sh-own-i{font-size:12px;font-weight:800;background:#2fbf71;color:#fff;border-radius:99px;padding:2px 10px}
.sh-try{min-height:52px;padding:0 28px;border:0;border-radius:99px;font:inherit;font-weight:800;font-size:17px;color:#2a1700;background:linear-gradient(180deg,#ffe58a,#f5b301);box-shadow:0 8px 24px rgba(245,179,1,.45),inset 0 -3px 0 rgba(0,0,0,.15);cursor:pointer;transition:transform .15s}
.sh-try:hover{transform:translateY(-2px)}
.sh-picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.sh-picks button{min-height:36px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sh-picks button.on{background:#fff;color:#1b1533}
@media (min-width:860px){.sh-hero-in{grid-template-columns:1.15fr 1fr;align-items:center;padding:calc(76px + env(safe-area-inset-top,0px)) 16px 32px}.sh-hero-stage,.sh-hero-ph{min-height:380px}.sh-hero-ph{height:380px}}

/* 財布 */
.sh-wallet{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:-18px 0 14px;position:relative;z-index:2}
.sh-wallet>p{margin:0;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08);font-size:14px;width:100%}
.sh-wal{flex:1 1 150px;display:flex;flex-direction:column;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.sh-wal span{font-size:12px;color:#5b6b66;font-weight:700}
.sh-wal b{font-size:24px;line-height:1.2;color:var(--ink)}
.sh-wal b small,.sh-wal>small{font-size:12px;color:#6b7a75;font-weight:400}
.sh-wal a{font-size:12px;font-weight:700}
.sh-more{align-self:center;font-size:13px;font-weight:800;padding:8px 12px}

/* 売り場のタブ */
.sh-tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;overflow-x:auto;padding:8px 0;margin:0 -16px 8px;padding-inline:16px;background:#f3f1ea;scrollbar-width:none}
.sh-tabs::-webkit-scrollbar{display:none}
.sh-tabs button{flex:none;min-height:42px;padding:0 16px;border-radius:99px;border:0;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sh-tabs button.on{background:#1b1533;color:#fff}
.sh-tabs i{font-style:normal;margin-left:6px;font-size:11px;background:var(--pink);color:#fff;border-radius:99px;padding:1px 7px}
.sh-slots{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.sh-slots button{min-height:34px;padding:0 12px;border-radius:99px;border:1px solid rgba(0,0,0,.12);background:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sh-slots button.on{background:#ffcf4a;border-color:#ffcf4a}
.sh-note{margin:4px 0 10px;color:#5b6b66;font-size:14px}

/* 札 */
.sh-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.sh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.sh-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sh-card{--tc:var(--t-normal);min-width:0}
.sh-card.t-rare{--tc:var(--t-rare)}.sh-card.t-super{--tc:var(--t-super)}.sh-card.t-legend{--tc:var(--t-legend)}
.sh-card-b{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0 0 10px;border:0;border-radius:18px;background:#fff;font:inherit;color:inherit;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 35%,transparent),0 6px 18px rgba(0,0,0,.07);transition:transform .15s,box-shadow .15s}
.sh-card-b:hover,.sh-card-b:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 3px var(--tc),0 12px 26px rgba(0,0,0,.12)}
.sh-pic{display:grid;place-items:center;aspect-ratio:1/1;background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--tc) 22%,#fff),color-mix(in srgb,var(--tc) 8%,#f6f4ee));overflow:hidden}
.sh-pic svg{width:86%;height:auto}
.sh-thumb{display:grid;place-items:center;width:100%;height:100%}
.sh-thumb img{width:100%;height:100%;object-fit:contain}
.sh-sw{display:block;width:56%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff8,transparent 42%),var(--c);box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.18)}
.sh-tier{align-self:flex-start;margin:8px 10px 2px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:800;color:#fff;background:var(--tc)}
.t-legend .sh-tier,.sh-tier.t-legend{background:linear-gradient(90deg,#f5b301,#ffe58a,#f5b301);background-size:200% 100%;color:#3b2500;animation:shShine 2.4s linear infinite}
.sh-tier.t-rare{background:var(--t-rare)}.sh-tier.t-super{background:var(--t-super)}.sh-tier.t-normal{background:var(--t-normal)}
.sh-name{padding:0 10px;font-size:14px;font-weight:800;line-height:1.3;min-height:2.6em}
.sh-price{padding:2px 10px 0;font-size:13px;color:#5b6b66}
.sh-price b{font-size:18px;color:var(--ink)}
.sh-new{position:absolute;top:8px;left:8px;padding:1px 7px;border-radius:6px;background:var(--pink);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em}
.sh-own{position:absolute;top:12px;right:-30px;transform:rotate(35deg);width:120px;text-align:center;padding:2px 0;background:#2fbf71;color:#fff;font-size:10px;font-weight:800}
.sh-card.t-legend .sh-card-b::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,240,180,.55) 45%,transparent 60%);background-size:250% 100%;animation:shShine 3.2s linear infinite;mix-blend-mode:screen}
.sh-fine{margin:20px 0 0;font-size:12px;color:#5b6b66;line-height:1.7}

/* 試着の面（スマホは下から・PC は中央） */
.sh-sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sh-sheet[hidden]{display:none}
.sh-sheet-bg{position:absolute;inset:0;background:rgba(10,8,22,.6);backdrop-filter:blur(3px)}
.sh-sheet-in{position:relative;width:100%;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;background:#fff;animation:shUp .28s ease-out;padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:860px){.sh-sheet{align-items:center}.sh-sheet-in{width:min(920px,94vw);border-radius:24px;display:grid;grid-template-columns:1.1fr 1fr}}
.sh-x{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:22px;cursor:pointer}
.sh-sheet-pv{--tc:var(--t-normal);position:relative;padding:14px 12px 12px;background:radial-gradient(90% 80% at 50% 35%,color-mix(in srgb,var(--tc) 35%,#2a2350),#130f24);color:#fff;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.sh-sheet-pv.t-rare{--tc:var(--t-rare)}.sh-sheet-pv.t-super{--tc:var(--t-super)}.sh-sheet-pv.t-legend{--tc:var(--t-legend)}
.sh-ba{display:flex;justify-content:center}
.sh-ba svg{max-height:320px;width:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}
.sh-stage canvas{display:block;width:100%!important;height:auto!important}
.sh-toggle{align-self:center;display:inline-flex;margin-top:8px;padding:3px;border-radius:99px;background:rgba(255,255,255,.14)}
.sh-toggle button{min-height:36px;padding:0 16px;border:0;border-radius:99px;background:none;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.sh-toggle button.on{background:#fff;color:#1b1533}
.sh-sheet-txt{padding:16px 18px 20px}
.sh-sheet-txt h2{margin:4px 0 6px;font-size:22px}
.sh-tier-l{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:800;color:#fff;background:var(--t-normal)}
.sh-tier-l.t-rare{background:var(--t-rare)}.sh-tier-l.t-super{background:var(--t-super)}.sh-tier-l.t-legend{background:linear-gradient(90deg,#f5b301,#ffe58a,#f5b301);background-size:200% 100%;color:#3b2500;animation:shShine 2.4s linear infinite}
.sh-tier-l .sh-new{position:static}
.sh-note2{margin:0 0 6px;color:#3f4b48}
.sh-where{margin:6px 0;font-size:13px;color:#5b6b66}
.sh-price2{margin:10px 0;font-size:15px}
.sh-price2 b{font-size:28px}
.sh-hp{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.sh-hp button{min-height:34px;padding:0 12px;border-radius:99px;border:1px solid rgba(0,0,0,.15);background:#fff;font:inherit;font-weight:700;cursor:pointer}
.sh-hp button.on{background:#1b1533;color:#fff}
.sh-act{display:grid;gap:8px;margin:6px 0}
.sh-buy{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;border:0;border-radius:99px;font:inherit;font-size:17px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ff6f9c,#e6336d);box-shadow:0 8px 22px rgba(230,51,109,.35);text-decoration:none;cursor:pointer}
.sh-buy:disabled{opacity:.6}
.sh-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:99px;border:1px solid rgba(0,0,0,.18);background:#fff;color:var(--ink);font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.sh-conf{display:grid;gap:8px}
.sh-conf p{margin:0}
.sh-conf-row{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:#f5f3ee}
.sh-worn{margin:0;font-weight:800;color:#2f8f5b}
.sh-small{margin:6px 0 0;font-size:12px;color:#6b7a75}
.sh-err{margin:8px 0;color:#c0392b;font-weight:700}

/* お祝い */
.sh-party{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,8,22,.72);padding:16px}
.sh-party[hidden]{display:none}
.sh-party-in{--tc:var(--t-normal);position:relative;z-index:2;width:min(420px,100%);text-align:center;color:#fff;padding:22px 18px;border-radius:28px;background:radial-gradient(90% 70% at 50% 25%,color-mix(in srgb,var(--tc) 55%,#2a2350),#130f24);box-shadow:0 0 0 3px var(--tc),0 30px 80px rgba(0,0,0,.6);animation:shPop .45s cubic-bezier(.2,1.6,.4,1)}
.sh-party-in.t-rare{--tc:var(--t-rare)}.sh-party-in.t-super{--tc:var(--t-super)}.sh-party-in.t-legend{--tc:var(--t-legend)}
.sh-party-k{margin:0;font-size:40px;font-weight:800;letter-spacing:.1em;color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.3)}
.sh-party-pic{display:grid;place-items:center;margin:8px auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.sh-party-pic svg{width:180px;height:auto}
.sh-party-sw .sh-sw{width:140px}
.sh-party-in h2{margin:6px 0}
.sh-party-act{display:grid;gap:8px;margin-top:14px}
.sh-party-act .sh-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.sh-confetti{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sh-confetti i{position:absolute;top:-20px;left:var(--x);width:10px;height:16px;background:var(--c);border-radius:2px;transform:rotate(var(--r));animation:shFall 2.6s var(--d) cubic-bezier(.3,.6,.4,1) forwards}

.sh-flash{position:fixed;left:50%;bottom:24px;z-index:70;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:#1b1533;color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .4s}
.sh-flash.out{opacity:0}
.sh-flash a{color:var(--gold)}

@keyframes shShine{to{background-position:-200% 0}}
@keyframes shGlow{to{opacity:.55}}
@keyframes shUp{from{transform:translateY(40px);opacity:0}}
@keyframes shPop{from{transform:scale(.6);opacity:0}}
@keyframes shFall{to{top:105vh;transform:rotate(calc(var(--r) + 540deg))}}
@media (prefers-reduced-motion:reduce){.sh-tier,.sh-tier-l,.sh-card.t-legend .sh-card-b::after,.sh-hero-ph,.sh-sheet-in,.sh-party-in{animation:none!important}.sh-card-b,.sh-try{transition:none}}