/* ==================================================================
   Shop Banner — 5 styles × 5 variants
   Common wrapper: .shbn (aspect-ratio, position)
   Style modifier: .shbn--a|b|c|d|e (background + scoped inner rules)
   ================================================================== */
.shbn { position:relative; width:100%; aspect-ratio:23/16; overflow:hidden; border-radius:3px; color:#fff; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; }
.shbn * { font-variant-numeric:tabular-nums; }

/* =================================================================
   Style A — 墨×金 (曲線彫刻・三色配色・都市シルエット)
   ================================================================= */
.shbn--a { background:radial-gradient(ellipse at 50% 40%,#2a1c10 0%,#12100a 55%,#060402 100%); font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
.shbn--a::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,rgba(255,200,120,.12) 0%,transparent 60%); pointer-events:none; }
.shbn--a .orn { position:absolute; width:26%; height:42%; pointer-events:none; z-index:2; overflow:visible; }
.shbn--a .orn path { fill:url(#bnrGold); filter:drop-shadow(0 0 4px rgba(255,200,120,.3)); }
.shbn--a .orn.tl { top:-2%; left:-2%; }
.shbn--a .orn.tr { top:-2%; right:-2%; transform:scaleX(-1); }
.shbn--a .orn.bl { bottom:-2%; left:-2%; transform:scaleY(-1); }
.shbn--a .orn.br { bottom:-2%; right:-2%; transform:scale(-1,-1); }
.shbn--a .hr { position:absolute; top:14%; left:22%; right:22%; height:1px; background:linear-gradient(90deg,transparent,#C89A5A 20%,#C89A5A 80%,transparent); opacity:.85; }
.shbn--a .era { position:absolute; top:9%; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.4em; color:#C89A5A; z-index:2; }
.shbn--a .title { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); text-align:center; width:80%; z-index:3; }
.shbn--a .main { display:block; font-size:30px; font-weight:800; line-height:1.05; color:#fff; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.shbn--a .red { color:#E8463C; text-shadow:0 0 10px rgba(232,70,60,.35); }
.shbn--a .gold { background:linear-gradient(180deg,#FFE9C8 0%,#F5C77A 40%,#C89A5A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:900; }
.shbn--a .num { background:linear-gradient(180deg,#FFE9C8 0%,#F5C77A 40%,#C89A5A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:1.15em; font-weight:900; padding:0 1px; }
.shbn--a .unit { color:#C89A5A; font-size:.55em; font-weight:500; margin-left:1px; }
.shbn--a .q { color:#C89A5A; font-size:.85em; opacity:.85; padding:0 1px; font-weight:700; }
.shbn--a .submain { display:block; margin-top:8px; font-size:10px; color:#D9B884; letter-spacing:.2em; font-family:"Hiragino Mincho ProN",serif; font-weight:500; }
.shbn--a .submain .q { color:rgba(200,154,90,.7); }
.shbn--a .silho { position:absolute; left:0; right:0; bottom:0; width:100%; height:26%; pointer-events:none; z-index:1; }
.shbn--a .silho path { fill:url(#bnrCity); }
.shbn--a .info { position:absolute; bottom:4%; left:13%; right:13%; display:flex; justify-content:space-between; font-size:8.5px; color:rgba(220,180,120,.75); letter-spacing:.12em; font-family:"Hiragino Mincho ProN",serif; z-index:3; }

/* =================================================================
   Style B — フラットオレンジ
   ================================================================= */
.shbn--b { background:#FF5A00; }
.shbn--b::before { content:''; position:absolute; width:150%; height:150%; top:-75%; right:-75%; border:1.5px solid rgba(255,255,255,.12); border-radius:50%; pointer-events:none; }
.shbn--b::after { content:''; position:absolute; width:110%; height:110%; top:-55%; right:-55%; border:1.5px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none; }
.shbn--b .mark { position:absolute; top:10%; right:10%; width:20px; height:30px; border:1.5px solid rgba(255,255,255,.55); border-radius:4px; z-index:2; }
.shbn--b .mark::before { content:''; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:8px; height:1.5px; background:rgba(255,255,255,.55); border-radius:1px; }
.shbn--b .mark::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:6px; height:6px; border:1.5px solid rgba(255,255,255,.55); border-radius:50%; }
.shbn--b .kicker { position:absolute; top:10%; left:9%; font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.85); font-weight:500; z-index:2; }
.shbn--b .kicker::before { content:''; display:inline-block; width:14px; height:1px; background:#FFF2A8; vertical-align:middle; margin-right:6px; }
.shbn--b .inner { position:absolute; inset:0; padding:30% 10% 24%; display:flex; flex-direction:column; justify-content:flex-end; z-index:1; }
.shbn--b .big { font-size:28px; font-weight:800; line-height:.95; letter-spacing:-.02em; color:#fff; margin-bottom:4px; }
.shbn--b .big .num { font-size:1.3em; font-weight:900; }
.shbn--b .subb { font-size:10px; color:rgba(255,255,255,.9); font-weight:500; }
.shbn--b .stats { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.18); padding:5px 8%; display:flex; justify-content:space-between; z-index:2; }
.shbn--b .stats > div { flex:1; text-align:center; border-right:1px solid rgba(255,255,255,.2); padding:0 4px; }
.shbn--b .stats > div:last-child { border-right:none; }
.shbn--b .stats .k { font-size:7px; color:rgba(255,255,255,.7); letter-spacing:.08em; }
.shbn--b .stats .v { font-size:9px; color:#fff; font-weight:700; }

/* =================================================================
   Style C — テックグリッド
   ================================================================= */
.shbn--c { background:#061525; }
.shbn--c::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(96,180,220,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(96,180,220,.06) 1px,transparent 1px); background-size:14px 14px; mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent); -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent); pointer-events:none; }
.shbn--c .kicker { position:absolute; top:10%; left:9%; font-size:9px; letter-spacing:.22em; color:#60B4DC; font-weight:500; z-index:2; }
.shbn--c .kicker::before { content:''; display:inline-block; width:12px; height:1px; background:#60B4DC; vertical-align:middle; margin-right:6px; }
.shbn--c .chips { position:absolute; top:9%; right:8%; display:flex; gap:3px; z-index:2; }
.shbn--c .chips span { font-size:7.5px; color:rgba(96,180,220,.9); letter-spacing:.05em; padding:1px 4px; border:1px solid rgba(96,180,220,.35); border-radius:2px; }
.shbn--c .inner { position:absolute; inset:0; padding:26% 9% 22%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; z-index:1; }
.shbn--c .big { font-size:28px; font-weight:800; line-height:.95; letter-spacing:-.02em; color:#fff; margin-bottom:8px; }
.shbn--c .hl { color:#FF8A3D; }
.shbn--c .subb { font-size:10px; color:rgba(255,255,255,.6); font-weight:400; letter-spacing:.05em; border-left:2px solid #FF8A3D; padding-left:6px; }
.shbn--c .models { position:absolute; bottom:6%; left:9%; right:9%; display:flex; justify-content:space-between; align-items:center; font-size:8px; color:rgba(255,255,255,.55); letter-spacing:.08em; z-index:2; border-top:1px solid rgba(96,180,220,.2); padding-top:4px; }
.shbn--c .tel { color:#FF8A3D; font-weight:700; font-family:"Courier New",monospace; }

/* =================================================================
   Style D — 和紙 × 朱印
   ================================================================= */
.shbn--d { background:#F1E6CF; color:#2a1f14; font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
.shbn--d::before { content:''; position:absolute; inset:5%; border:.8px solid rgba(110,75,40,.3); pointer-events:none; }
.shbn--d::after { content:''; position:absolute; inset:5%; border:.3px solid rgba(110,75,40,.2); pointer-events:none; margin:3px; }
.shbn--d .seal { position:absolute; top:11%; right:11%; width:30px; height:30px; background:#B8392A; color:#fff; font-size:15px; font-weight:900; display:flex; align-items:center; justify-content:center; border-radius:2px; transform:rotate(-3deg); letter-spacing:-.04em; z-index:3; box-shadow:1.5px 2px 0 rgba(140,30,20,.3); }
.shbn--d .era { position:absolute; top:11%; left:11%; font-size:8px; color:#6e4b28; letter-spacing:.25em; font-weight:500; z-index:2; }
.shbn--d .vtxt { position:absolute; top:32%; bottom:30%; right:9%; writing-mode:vertical-rl; font-size:8px; letter-spacing:.3em; color:#6e4b28; font-weight:500; z-index:2; }
.shbn--d .title { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:72%; }
.shbn--d .main { font-size:24px; font-weight:800; line-height:1.1; color:#2a1f14; letter-spacing:.02em; }
.shbn--d .hl { color:#B8392A; }
.shbn--d .unit { font-size:.55em; font-weight:600; color:#6e4b28; letter-spacing:.1em; }
.shbn--d .submain { display:block; margin-top:8px; font-size:9.5px; color:#6e4b28; letter-spacing:.22em; }
.shbn--d .info { position:absolute; bottom:8%; left:11%; right:11%; display:flex; justify-content:space-between; font-size:7.5px; color:#6e4b28; letter-spacing:.05em; z-index:2; border-top:.5px solid rgba(110,75,40,.25); padding-top:4px; }

/* =================================================================
   Style E — ポップ
   ================================================================= */
.shbn--e { background:linear-gradient(135deg,#FF5A7F 0%,#FF784A 60%,#FFB13C 100%); }
.shbn--e::before { content:''; position:absolute; bottom:-30%; right:-20%; width:70%; height:70%; background:radial-gradient(circle,rgba(255,242,168,.5),transparent 65%); pointer-events:none; }
.shbn--e::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.5px); background-size:18px 18px; opacity:.5; pointer-events:none; }
.shbn--e .ribbon { position:absolute; top:11%; left:50%; transform:translateX(-50%); background:#fff; color:#E84A6C; font-size:9px; font-weight:800; padding:2.5px 12px; border-radius:12px; letter-spacing:.05em; z-index:2; }
.shbn--e .pricetag { position:absolute; top:11%; right:5%; background:#2a1a0a; color:#FFF3A8; padding:2px 7px 2px 10px; font-size:8px; font-weight:800; letter-spacing:.05em; clip-path:polygon(10% 0,100% 0,100% 100%,10% 100%,0 50%); z-index:2; }
.shbn--e .hours { position:absolute; top:11%; left:5%; background:rgba(255,255,255,.3); color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:3px; letter-spacing:.05em; z-index:2; backdrop-filter:blur(4px); }
.shbn--e .title { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); text-align:center; width:86%; z-index:2; }
.shbn--e .main { font-size:26px; font-weight:900; line-height:.95; color:#fff; letter-spacing:-.02em; text-shadow:2px 2px 0 rgba(180,30,60,.3); }
.shbn--e .big { font-size:1.4em; color:#FFF3A8; }
.shbn--e .submain { display:block; margin-top:5px; font-size:10px; color:#fff; font-weight:600; letter-spacing:.05em; }
.shbn--e .foot { position:absolute; bottom:5%; left:7%; right:7%; display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#fff; font-weight:600; letter-spacing:.05em; z-index:2; }
.shbn--e .dot { color:#FFF3A8; }

/* =================================================================
   Homepage hero + 5-thumb strip
   ================================================================= */
.shop-home-banners { width:100%; }
.shbn-hero { width:100%; margin-bottom:10px; }
.shbn-hero .shbn { width:100%; aspect-ratio:23/9; }
.shbn-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.shbn-thumb { cursor:pointer; position:relative; border:2px solid transparent; border-radius:4px; overflow:hidden; transition:border-color .15s; }
.shbn-thumb.active { border-color:#FF6600; }
.shbn-thumb:hover { border-color:rgba(255,102,0,.6); }
.shbn-thumb .shbn { border-radius:2px; }

/* Thumb scale — hide decorative chrome, keep only the headline number */
.shbn-thumbs .shbn--a .era,
.shbn-thumbs .shbn--a .info,
.shbn-thumbs .shbn--a .hr,
.shbn-thumbs .shbn--a .orn,
.shbn-thumbs .shbn--a .silho { display:none; }
.shbn-thumbs .shbn--a .main { font-size:20px; }
.shbn-thumbs .shbn--a .submain { font-size:8px; margin-top:4px; letter-spacing:.08em; }

.shbn-thumbs .shbn--b .kicker,
.shbn-thumbs .shbn--b .stats,
.shbn-thumbs .shbn--b .mark { display:none; }
.shbn-thumbs .shbn--b .inner { padding:24% 10% 22%; }
.shbn-thumbs .shbn--b .big { font-size:20px; }
.shbn-thumbs .shbn--b .subb { font-size:8px; }

.shbn-thumbs .shbn--c .kicker,
.shbn-thumbs .shbn--c .chips,
.shbn-thumbs .shbn--c .models { display:none; }
.shbn-thumbs .shbn--c .inner { padding:26% 10% 24%; }
.shbn-thumbs .shbn--c .big { font-size:20px; }
.shbn-thumbs .shbn--c .subb { font-size:8px; }

.shbn-thumbs .shbn--d .era,
.shbn-thumbs .shbn--d .vtxt,
.shbn-thumbs .shbn--d .seal,
.shbn-thumbs .shbn--d .info { display:none; }
.shbn-thumbs .shbn--d .main { font-size:18px; }
.shbn-thumbs .shbn--d .submain { font-size:8px; margin-top:4px; letter-spacing:.12em; }

.shbn-thumbs .shbn--e .ribbon,
.shbn-thumbs .shbn--e .pricetag,
.shbn-thumbs .shbn--e .hours,
.shbn-thumbs .shbn--e .foot { display:none; }
.shbn-thumbs .shbn--e .title { top:50%; }
.shbn-thumbs .shbn--e .main { font-size:20px; }
.shbn-thumbs .shbn--e .submain { font-size:9px; margin-top:3px; }

/* =================================================================
   List-view sizing — each banner ~175px in a 5-col grid
   Reduce title/sub sizes uniformly for all styles
   ================================================================= */
.sl-item__banners { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:4px; }
.sl-item__banners .shbn { width:100%; }

/* shrink at list scale */
.sl-item__banners .shbn--a .main { font-size:21px; }
.sl-item__banners .shbn--a .submain { font-size:7.5px; margin-top:5px; letter-spacing:.1em; }
.sl-item__banners .shbn--a .era { font-size:6.5px; letter-spacing:.25em; top:8%; }
.sl-item__banners .shbn--a .info { font-size:6.5px; letter-spacing:.05em; bottom:5%; left:10%; right:10%; }
.sl-item__banners .shbn--a .hr { top:16%; left:20%; right:20%; }

.sl-item__banners .shbn--b .big { font-size:18px; }
.sl-item__banners .shbn--b .kicker { font-size:7px; letter-spacing:.1em; top:8%; left:7%; }
.sl-item__banners .shbn--b .subb { font-size:8px; }
.sl-item__banners .shbn--b .stats .k { font-size:6px; }
.sl-item__banners .shbn--b .stats .v { font-size:8px; }
.sl-item__banners .shbn--b .mark { width:15px; height:22px; top:7%; right:7%; }

.sl-item__banners .shbn--c .big { font-size:18px; }
.sl-item__banners .shbn--c .kicker { font-size:7px; letter-spacing:.12em; top:8%; left:7%; }
.sl-item__banners .shbn--c .subb { font-size:8px; }
.sl-item__banners .shbn--c .chips span { font-size:6.5px; padding:0 3px; }
.sl-item__banners .shbn--c .models { font-size:6.5px; left:7%; right:7%; }

.sl-item__banners .shbn--d .main { font-size:17px; }
.sl-item__banners .shbn--d .submain { font-size:7.5px; letter-spacing:.12em; }
.sl-item__banners .shbn--d .era { font-size:6.5px; letter-spacing:.15em; }
.sl-item__banners .shbn--d .seal { width:22px; height:22px; font-size:11px; }
.sl-item__banners .shbn--d .vtxt { font-size:6.5px; letter-spacing:.2em; }
.sl-item__banners .shbn--d .info { font-size:6.5px; }

.sl-item__banners .shbn--e .main { font-size:18px; }
.sl-item__banners .shbn--e .submain { font-size:8px; }
.sl-item__banners .shbn--e .ribbon { font-size:7px; padding:2px 8px; }
.sl-item__banners .shbn--e .pricetag { font-size:7px; }
.sl-item__banners .shbn--e .hours { font-size:7px; }
.sl-item__banners .shbn--e .foot { font-size:7px; }