/* ショップもスマホ専用。PC では中央にスマホ幅・左右に情報を置く（母体HPと同じ形式）。
   スマホ用の指定は shop-mobile-lock.css で常時適用にしてある。 */

.page-shell{width:100%;margin:0 auto;background:var(--night);position:relative}
.side-col{display:none}

@media(min-width:1100px){
  body{background:#0b0603}
  .layout-pc{display:grid;grid-template-columns:1fr 430px 1fr;align-items:start;min-height:100vh}
  .page-shell{width:430px;box-shadow:0 0 80px rgba(0,0,0,.6)}

  .side-col{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;justify-content:center;padding:60px clamp(28px,3.4vw,64px);color:var(--paper)}
  .side-left{align-items:center;text-align:center}
  .side-right{align-items:stretch;justify-content:center;gap:14px}

  .side-brand small{display:block;color:var(--lantern-type);font:500 10px var(--label);letter-spacing:.3em}
  .side-brand span{display:block;margin-top:14px;font:400 clamp(34px,3vw,46px)/1.4 var(--display)}
  .side-tagline{margin:26px 0 0;font:400 clamp(19px,1.5vw,25px)/1.9 var(--display)}
  .side-tagline-en{margin:20px 0 0;color:rgba(240,229,210,.5);font:500 10px var(--label);letter-spacing:.22em}

  .side-card{padding:22px 22px 24px;border:1px solid var(--line);background:rgba(40,21,14,.7)}
  .side-card h3{margin:0 0 16px;color:var(--lantern-type);font:600 10px var(--label);letter-spacing:.22em}
  .side-list{margin:0;display:flex;flex-direction:column;gap:11px}
  .side-list>div{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:baseline}
  .side-list dt{color:rgba(240,229,210,.55);font:600 9px var(--label);letter-spacing:.14em}
  .side-list dd{margin:0;font-size:13px;line-height:1.7}
  .side-note{margin:14px 0 0;color:rgba(240,229,210,.55);font-size:11px;line-height:1.8}
  .side-cta{display:block;margin-top:16px;padding:13px;background:var(--red);color:#fff;text-align:center;font:600 11px var(--label);letter-spacing:.1em;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
  .side-cta.ghost{background:transparent;border:1px solid var(--line);color:var(--paper)}

  .demo-banner{position:sticky}
  .shop-header{position:sticky;top:0;z-index:70}
}

@media(min-width:1500px){
  .layout-pc{grid-template-columns:1fr 460px 1fr}
  .page-shell{width:460px}
}


/* スマホ幅に合わない大きさの上書き。
   PC前提で後から足された指定は詳細度が高く（例 .purchase-panel .detail-price）、
   shop-mobile-lock.css では打ち消せないため、ここで同じ詳細度で当て直す。
   390px で価格が48pxあり、商品名(35px)より大きくて階層が逆転していた。 */
.purchase-panel .detail-price{font-size:36px}
.purchase-panel .detail-price small{font-size:11px}

@media(min-width:1100px){
  /* PC でも中央はスマホ幅なので、同じ大きさのままでよい */
  .purchase-panel .detail-price{font-size:36px}
}