:root{--blue:#14b4f6}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#fff;overscroll-behavior:none;font-family:"M PLUS 2","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-weight:500;color:#2b2330;letter-spacing:.06em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none!important}
#room{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#room:active{cursor:grabbing}
.lens{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 46%,transparent 62%,rgba(30,70,100,.12))}
.brand{position:fixed;left:16px;top:calc(14px + env(safe-area-inset-top,0px));height:16px;pointer-events:none}
.hint{position:fixed;left:50%;bottom:calc(66px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:7px 15px;border-radius:999px;background:#2b2330;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.hint.off{opacity:0}
.aisles{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;padding:0 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:safe center}
.aisles::-webkit-scrollbar{display:none}
.aisles button{flex:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e6e6e6;font-size:12px;font-weight:600;letter-spacing:.06em}
.aisles button.on{background:var(--blue);border-color:var(--blue);color:#fff}

.pop{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:rgba(30,50,70,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(100%,480px);height:calc(100dvh - 46px - env(safe-area-inset-top,0px));background:#fff;border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -12px 40px rgba(45,30,34,.3);animation:rise .42s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(100%)}}
.sheet iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;opacity:0;transition:opacity .22s}
.sheet iframe.ready{opacity:1}
/* 本物のページが来るまでの画面。商品ページの上部と同じ並び */
.ph{position:absolute;inset:0;background:#fff}
.ph-top{height:98px;display:flex;align-items:flex-end;padding:0 0 22px 56px;background:var(--blue)}
.ph-top img{height:18px}
.ph-bar{height:3px;background:#e3f4fd;overflow:hidden;position:relative}
.ph-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:36%;background:var(--blue);animation:bar 1s ease-in-out infinite}
@keyframes bar{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.ph-photo{height:min(52dvh,380px);display:flex;align-items:center;justify-content:center;padding:14px}
.ph-photo img{height:100%;max-width:100%;object-fit:contain}
.ph-name{margin:12px 16px 0;font-size:16px;font-weight:500;line-height:1.5}
.ph-price{margin:6px 16px 0;font-family:Outfit,"M PLUS 2",sans-serif;font-size:21px;font-weight:700}
.close{position:absolute;right:10px;top:calc(5px + env(safe-area-inset-top,0px));z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);font-size:19px;line-height:1}
@media (min-width:900px){
  .brand{height:22px;left:28px;top:24px}
  .pop{align-items:center}
  .close{right:calc(50% - 290px);top:calc(50% - min(44dvh,430px))}
  .sheet{height:min(88dvh,860px);border-radius:20px}
}
@media (prefers-reduced-motion:reduce){.pop,.sheet{animation:none}}