/* ============================================================
   AWGroup LP — SHOWCASE WHEEL (section 02)  [内装 / 衣装 stacked]
   Each block: a large rounded-rect pickup on top + a row of 4
   smaller rounded-rect thumbnails BELOW it (never overlapping
   the pickup). Tap the stage to advance — the next store rises
   into the pickup. Two blocks stacked: 内装 then 衣装.
   ============================================================ */

.showcase{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  padding:clamp(60px,12vw,96px) var(--pad);overflow:hidden;
  background:
    radial-gradient(115% 60% at 82% -2%,rgba(255,201,228,.6),transparent 54%),
    radial-gradient(120% 65% at 6% 102%,rgba(159,211,240,.52),transparent 56%),
    radial-gradient(90% 55% at 50% 44%,rgba(255,255,255,.5),transparent 70%),
    linear-gradient(168deg,#FFF6FB 0%,#FBF1FF 46%,#EEF6FF 100%);}

/* layered concentric rings — quiet "stage spotlight" feel */
.sc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.sc-ring{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid rgba(216,30,114,.10);
  width:340px;height:340px;animation:scRingPulse 7s ease-in-out infinite;}
.sc-ring.r2{width:540px;height:540px;border-color:rgba(124,91,208,.09);animation-duration:9s;}
.sc-ring.r3{width:760px;height:760px;border-color:rgba(47,155,203,.08);animation-duration:11s;}
@keyframes scRingPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.sc-ring{animation:none;}}

.showcase>*:not(.sc-bg){position:relative;z-index:2;}

/* ---- title with AWGroup logo ---- */
.sc-head{margin:0 auto 6px;display:flex;justify-content:center;}
.sc-head .sc-title{white-space:normal;line-height:1.5;font-size:clamp(18px,5vw,25px);}
.sc-logo{display:inline-block;height:1.18em;width:auto;vertical-align:-0.28em;
  margin-right:.06em;filter:drop-shadow(0 4px 10px rgba(95,194,236,.4));}

/* ---- 02 intro: welcoming front-door ---- */
.sc-head{margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.sc-logo-hero{width:min(72%,300px);height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(95,194,236,.45)) drop-shadow(0 2px 4px rgba(216,30,114,.2));
  animation:logoFloat 5s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.sc-welcome{margin-top:10px;font-family:var(--f-serif);font-style:italic;font-weight:600;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose-ink);
  display:inline-flex;align-items:center;gap:10px;}
.sc-welcome::before,.sc-welcome::after{content:"";width:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);}

.sc-intro{max-width:420px;margin:20px auto 0;text-align:center;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;}
.sc-intro__thanks{font-family:var(--f-disp);font-weight:700;font-size:clamp(13.5px,3.9vw,15.5px);
  line-height:1.85;color:var(--ink-soft);}

.sc-intro__def{position:relative;width:100%;padding:20px 20px 18px;border-radius:18px;
  background:linear-gradient(160deg,#fff,#FFF2FA);border:1.5px solid var(--pink-soft);
  box-shadow:0 16px 30px -20px rgba(216,30,114,.45),inset 0 1px 0 rgba(255,255,255,.8);}
.sc-intro__deftag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--f-serif);font-style:italic;font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--rose-grad);padding:4px 16px;border-radius:999px;
  box-shadow:0 6px 14px -5px rgba(216,30,114,.6);}
.sc-intro__def p{font-family:var(--f-disp);font-weight:700;font-size:clamp(15px,4.3vw,18px);
  line-height:1.6;color:var(--ink);}
.sc-intro__def b{font-weight:900;}
.sc-intro__def em{font-style:normal;position:relative;white-space:nowrap;color:var(--rose-deep);
  background:linear-gradient(transparent 58%,rgba(255,179,212,.7) 58%);padding:0 .08em;}

.sc-intro__lead{font-family:var(--f-disp);font-weight:800;font-size:clamp(16px,4.7vw,20px);
  line-height:1.7;color:var(--ink);letter-spacing:.01em;}
.sc-intro__lead b{background:var(--rose-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:900;}

.sc-intro__reassure{font-family:var(--f-disp);font-weight:700;font-size:clamp(12.5px,3.6vw,14px);
  line-height:1.75;color:var(--rose-ink);background:rgba(255,255,255,.7);
  padding:12px 18px;border-radius:14px;border:1px dashed var(--rose);}
.sc-intro__ico{display:inline-block;margin-right:5px;color:var(--rose);}

.sc-intro__cta{font-family:var(--f-disp);font-weight:700;font-size:clamp(13.5px,3.9vw,15.5px);
  line-height:1.8;color:var(--ink-soft);}
.sc-intro__cta b{display:inline-block;margin-top:2px;font-weight:900;font-size:1.18em;color:var(--rose-deep);
  text-shadow:0 1px 0 #fff;}
.sc-intro__scroll{font-family:var(--f-disp);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--rose-ink);opacity:.85;}
.sc-intro__scroll i{display:inline-block;font-style:normal;animation:scrHint 1.6s ease-in-out infinite;}
@keyframes scrHint{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(4px);opacity:1;}}

@media (prefers-reduced-motion:reduce){.sc-logo-hero,.sc-intro__scroll i{animation:none;}}

/* per-block 補足説明 */
.wheel-note{position:relative;z-index:2;max-width:24em;margin:10px auto 2px;
  font-family:var(--f-body);font-size:clamp(12px,3.4vw,13.5px);line-height:1.78;
  color:var(--ink-soft);text-wrap:pretty;}
.wheel-note b{color:var(--rose-deep);font-weight:800;}

/* ============ lavish background decoration ============ */
/* soft drifting orbs (depth) */
.sc-orb{position:absolute;border-radius:50%;filter:blur(34px);opacity:.55;
  mix-blend-mode:multiply;}
.sc-orb.o1{width:300px;height:300px;top:-40px;left:-70px;
  background:radial-gradient(circle,#FFC4E0,transparent 70%);animation:scOrb 24s ease-in-out infinite;}
.sc-orb.o2{width:340px;height:340px;top:34%;right:-110px;
  background:radial-gradient(circle,#A9E0F7,transparent 70%);animation:scOrb 30s ease-in-out infinite reverse;}
.sc-orb.o3{width:280px;height:280px;bottom:-60px;left:8%;
  background:radial-gradient(circle,#D6C8FF,transparent 70%);animation:scOrb 27s ease-in-out infinite;}
@keyframes scOrb{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-22px) scale(1.12);}}

/* twinkling sparkles */
.sc-spark{position:absolute;font-size:18px;line-height:1;
  color:var(--gold-light);text-shadow:0 0 10px rgba(245,221,154,.9);
  animation:scTwk 3.4s ease-in-out infinite;}
.sc-spark.s1{top:13%;left:9%;font-size:22px;color:#FFE6A6;}
.sc-spark.s2{top:21%;right:12%;font-size:15px;color:#FF9AD0;animation-delay:.6s;}
.sc-spark.s3{top:46%;left:6%;font-size:18px;color:#BFE3FF;animation-delay:1.1s;}
.sc-spark.s4{top:54%;right:8%;font-size:24px;color:#FFE6A6;animation-delay:.3s;}
.sc-spark.s5{bottom:16%;left:14%;font-size:16px;color:#FF9AD0;animation-delay:1.4s;}
.sc-spark.s6{bottom:10%;right:16%;font-size:20px;color:#BFE3FF;animation-delay:.9s;}
@keyframes scTwk{0%,100%{transform:scale(.7) rotate(0);opacity:.45;}
  50%{transform:scale(1.15) rotate(18deg);opacity:1;}}

/* soft bokeh dots clusters */
.sc-bun{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(255,214,232,.5) 60%,transparent 72%);
  box-shadow:0 0 0 6px rgba(255,255,255,.12);opacity:.8;
  animation:scFloat 9s ease-in-out infinite;}
.sc-bun.b1{top:30%;left:22%;}
.sc-bun.b2{bottom:26%;right:24%;width:18px;height:18px;animation-duration:11s;animation-delay:.7s;}
@keyframes scFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}

/* floating playing cards (Alice) */
.sc-card{position:absolute;width:30px;height:42px;border-radius:5px;background:#fff;
  border:1.5px solid var(--pink-soft);box-shadow:0 8px 18px -8px rgba(120,40,110,.45);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  animation:scCard 8s ease-in-out infinite;}
.sc-card::after{content:"♠";}
.sc-card.c1{top:18%;right:20%;transform:rotate(14deg);color:var(--ink);}
.sc-card.c2{top:50%;left:11%;transform:rotate(-12deg);color:var(--rose);animation-delay:.8s;}
.sc-card.c2::after{content:"♥";}
.sc-card.c3{bottom:20%;right:13%;transform:rotate(8deg);color:var(--rose);animation-delay:1.3s;}
.sc-card.c3::after{content:"♦";}
@keyframes scCard{0%,100%{transform:translateY(0) rotate(var(--r,10deg));}
  50%{transform:translateY(-14px) rotate(calc(var(--r,10deg) * -0.4));}}
.sc-card.c1{--r:14deg;} .sc-card.c2{--r:-12deg;} .sc-card.c3{--r:8deg;}

@media (prefers-reduced-motion:reduce){
  .sc-orb,.sc-spark,.sc-bun,.sc-card{animation:none;}
}

.sc-title{font-family:var(--f-disp);font-weight:900;line-height:1.4;
  font-size:clamp(22px,6.2vw,30px);color:var(--ink);letter-spacing:.01em;margin-top:8px;}
.sc-title b{color:var(--rose-deep);font-weight:900;}
.sc-title em{font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(transparent 60%,rgba(255,179,212,.75) 60%);padding:0 .1em;}

/* ---- per-block (内装 / 衣装) — distinct themed panels ---- */
.wheel-block{position:relative;width:100%;max-width:472px;margin:40px auto 0;
  padding:58px 16px 30px;border-radius:30px;overflow:hidden;text-align:center;isolation:isolate;
  box-shadow:0 28px 56px -28px rgba(120,40,110,.42);}
.wheel-block--int{background:
    radial-gradient(120% 90% at 16% 0%,rgba(169,224,247,.6),transparent 54%),
    radial-gradient(120% 90% at 100% 100%,rgba(255,214,232,.5),transparent 54%),
    linear-gradient(165deg,#E9F7FF 0%,#F6FCFF 46%,#FFF1F8 100%);}
.wheel-block--cos{background:
    radial-gradient(120% 90% at 84% 0%,rgba(214,200,255,.6),transparent 54%),
    radial-gradient(120% 90% at 0% 100%,rgba(255,196,224,.52),transparent 54%),
    linear-gradient(165deg,#FBEFFF 0%,#FFF2FB 46%,#F0ECFF 100%);}
/* inner double frame w/ gold hairline */
.wheel-block::before{content:"";position:absolute;inset:9px;border-radius:23px;z-index:1;
  border:1.5px solid rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(200,151,59,.30),inset 0 0 24px rgba(255,255,255,.5);
  pointer-events:none;}
/* big ghosted watermark word */
.wb-mark{position:absolute;top:-4px;right:8px;z-index:0;pointer-events:none;white-space:nowrap;
  font-family:var(--f-fashion);font-style:italic;font-weight:700;font-size:60px;line-height:1;
  letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.6px rgba(120,40,110,.12);
  transform:rotate(-4deg);}
.wheel-block--int .wb-mark{-webkit-text-stroke-color:rgba(47,155,203,.18);}
.wheel-block--cos .wb-mark{-webkit-text-stroke-color:rgba(124,91,208,.18);}

/* ============================================================
   section-heading label "内装 / 店内・空間" — 3 designs (data-wl)
   ============================================================ */
.wlabel-switch{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:6px;
  margin:14px auto 0;}
.wlabel-switch__lbl{font-family:var(--f-serif);font-style:italic;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose-ink);margin-right:3px;}
.wlabel-switch button{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--pink-soft);
  background:#fff;color:var(--rose-ink);font-family:var(--f-disp);font-weight:900;font-size:12px;cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;}
.wlabel-switch button.on{background:var(--rose-grad);color:#fff;border-color:transparent;
  transform:scale(1.12);box-shadow:0 5px 12px -4px rgba(216,30,114,.6);}

.wlabel{position:relative;z-index:2;display:flex;align-items:center;gap:11px;width:fit-content;margin:0 auto;}
.wlabel__ico{flex:0 0 auto;display:grid;place-items:center;}
.wlabel__ico .ico{width:20px;height:20px;}
.wlabel__txt{display:flex;flex-direction:column;line-height:1;}
.wlabel__txt b{font-family:var(--f-disp);font-weight:900;letter-spacing:.04em;}
.wlabel__txt small{font-family:var(--f-serif);font-style:italic;font-weight:600;letter-spacing:.18em;
  text-transform:lowercase;}
/* per-section accent colours */
.wheel-block--int{--wl:#2E9BCB;--wl2:#86D3F0;--wlsoft:rgba(47,155,203,.14);}
.wheel-block--cos{--wl:#B36FD0;--wl2:#FF6FB0;--wlsoft:rgba(124,91,208,.14);}

/* ---- A : underlined editorial (typographic, integrated) ---- */
[data-wl="a"] .wlabel{gap:12px;padding-bottom:12px;}
[data-wl="a"] .wlabel__ico{width:38px;height:38px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--wl2),var(--wl));box-shadow:0 10px 20px -8px var(--wl);}
[data-wl="a"] .wlabel__txt b{font-size:clamp(24px,6.6vw,30px);color:var(--ink);}
[data-wl="a"] .wlabel__txt small{margin-top:4px;font-size:11px;color:var(--wl);}
[data-wl="a"] .wlabel::after{content:"";position:absolute;left:50px;right:0;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--wl),transparent);}

/* ---- B : ticket / tab (sits flush on a baseline) ---- */
[data-wl="b"] .wlabel{gap:0;}
[data-wl="b"] .wlabel__ico{width:46px;height:46px;color:#fff;border-radius:13px 0 0 13px;
  background:linear-gradient(135deg,var(--wl2),var(--wl));}
[data-wl="b"] .wlabel__ico .ico{width:22px;height:22px;}
[data-wl="b"] .wlabel__txt{padding:8px 20px 8px 16px;background:#fff;border-radius:0 13px 13px 0;
  box-shadow:0 12px 24px -14px rgba(120,40,110,.45);border:1.5px solid var(--wlsoft);border-left:0;
  position:relative;}
[data-wl="b"] .wlabel__txt::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--wl);}
[data-wl="b"] .wlabel__txt b{font-size:clamp(19px,5vw,23px);color:var(--ink);}
[data-wl="b"] .wlabel__txt small{margin-top:3px;font-size:10.5px;color:var(--wl);}

/* ---- C : minimal mark + rule (built-in divider) ---- */
[data-wl="c"] .wlabel{gap:10px;}
[data-wl="c"] .wlabel__ico{width:30px;height:30px;color:var(--wl);}
[data-wl="c"] .wlabel__ico .ico{width:24px;height:24px;}
[data-wl="c"] .wlabel__txt{flex-direction:row;align-items:baseline;gap:9px;}
[data-wl="c"] .wlabel__txt b{font-size:clamp(22px,6vw,27px);color:var(--ink);
  border-bottom:3px solid var(--wl);padding-bottom:2px;}
[data-wl="c"] .wlabel__txt small{font-size:11px;color:var(--wl);letter-spacing:.22em;}

/* tap-to-zoom note line */
.wheel-note__tap{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-disp);font-weight:800;font-size:12.5px;color:var(--rose-deep);
  padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px dashed var(--rose);}
.wheel-note__tap::before{content:"🔍";font-size:12px;}

/* ---- wheel ---- */
.wheel{position:relative;width:100%;margin:14px auto 0;/* height set by JS */}
.wheel__stage{position:absolute;inset:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}

.wcard{position:absolute;left:50%;top:50%;width:96px;height:64px;border-radius:14px;
  overflow:hidden;border:3px solid #fff;background:#fff;padding:0;
  box-shadow:0 16px 32px -16px rgba(120,40,110,.5);
  transform:translate(-50%,-50%);will-change:transform,width,height;
  transition:width .58s cubic-bezier(.5,.05,.2,1),height .58s cubic-bezier(.5,.05,.2,1),
    transform .58s cubic-bezier(.5,.05,.2,1),border-radius .58s ease,
    box-shadow .58s ease;}
.wcard image-slot,.wcard img{width:100%;height:100%;object-fit:cover;display:block;}

.wcard.is-pickup{border-width:5px;
  box-shadow:0 34px 64px -20px rgba(216,30,114,.55),0 0 0 4px rgba(255,255,255,.45);}
.wcard.is-pickup::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);pointer-events:none;z-index:3;}

.wcard__cap{position:absolute;left:0;right:0;bottom:0;z-index:4;
  font-family:var(--f-disp);font-weight:700;font-size:17px;color:#fff;
  padding:30px 12px 13px;letter-spacing:.02em;
  background:linear-gradient(transparent,rgba(36,10,38,.66));
  opacity:0;transform:translateY(8px);transition:opacity .45s ease .1s,transform .45s ease .1s;}
.wcard.is-pickup .wcard__cap{opacity:1;transform:none;}
/* thumbnails get a tiny label too */
.wcard:not(.is-pickup) .wcard__cap{font-size:10.5px;padding:14px 4px 5px;opacity:1;transform:none;}

.wheel__hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:8;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--rose-ink);
  background:rgba(255,255,255,.86);border:1px dashed var(--magenta);
  padding:5px 14px;border-radius:999px;box-shadow:var(--shadow-soft);
  animation:wheelHintPulse 1.7s ease-in-out infinite;}
.wheel__hint .ico{width:15px;height:15px;color:var(--rose);animation:wheelHintSpin 2.6s linear infinite;}
@keyframes wheelHintPulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.06);}}
@keyframes wheelHintSpin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
.wheel.tapped .wheel__hint{animation:none;opacity:.5;}

@media (prefers-reduced-motion:reduce){
  .wcard{transition:none;}
  .wheel__hint,.wheel__hint .ico{animation:none;}
}