/* BIBI 施術体験LP 4案 共通 v001 (2026-11-07) */
:root{--ink:#241a16;--paper:#fbf8f5;--accent:#8a4b3c;--accent-2:#b9735f;--pink:#e9b8bb;--line:rgba(36,26,22,.12);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;background:#0f0c0b;color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;-webkit-text-size-adjust:100%;line-height:1.6}
body{background:var(--paper)}
img{max-width:100%}
.serif{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:500}
.col{max-width:480px;margin:0 auto}
.stage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#141110;max-width:480px;margin:0 auto}
@media(min-width:700px){.stage{height:min(100svh,920px);box-shadow:0 0 0 1px var(--line)}}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.scene.is-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.scene>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,5,.78),rgba(10,6,5,.2) 50%,rgba(10,6,5,0) 80%)}
.veil--top{background:linear-gradient(to bottom,rgba(10,6,5,.6),rgba(10,6,5,0) 45%)}
.caption{position:absolute;left:0;right:0;bottom:0;padding:20px 20px calc(26px + var(--safe-b));color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.caption h1,.caption h2{margin:0 0 10px;font-size:26px;line-height:1.35;font-weight:600;text-wrap:balance}
.caption p{margin:0 0 16px;font-size:15px;line-height:1.75}
.caption p:last-child{margin-bottom:0}
.tag{display:inline-block;font-size:12px;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:#fff;color:var(--ink);font-size:16px;font-weight:600;border:0;text-decoration:none;cursor:pointer;word-break:keep-all;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn--accent{background:var(--accent);color:#fff}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none}
.btn--wide{width:100%}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.clock{position:absolute;left:16px;top:calc(14px + var(--safe-t));color:#fff;font-size:13px;letter-spacing:.06em;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
/* 眉のキャンバス */
.brow{position:absolute;inset:0;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.brow canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brow__tool{position:absolute;left:0;top:0;width:44%;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.brow__tool img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.brow.is-touched .brow__tool{opacity:1}
.brow.is-done .brow__tool{opacity:0}
.hint{position:absolute;left:14px;right:14px;top:calc(14px + var(--safe-t));display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);color:var(--ink);font-size:14px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:transform .2s}
.hint.is-nudge{animation:nudge .5s}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
.hint__text{flex:1}
.hint__text b{display:block;font-size:15px}
.ring{flex:0 0 38px;width:38px;height:38px}
.ring circle{fill:none;stroke-width:3.5}
.ring .bg{stroke:rgba(36,26,22,.14)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .25s}
.brow__finger{position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 6px rgba(138,75,60,.25);left:0;top:0;margin:-26px 0 0 -26px;pointer-events:none;animation:ping 1.6s infinite;opacity:.95}
.brow.is-touched .brow__finger{display:none}
@keyframes ping{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.brow__after{position:absolute;left:0;right:0;bottom:0;padding:18px 18px calc(22px + var(--safe-b));color:#fff;background:linear-gradient(to top,rgba(10,6,5,.8),rgba(10,6,5,0));opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none}
.brow__after.is-on{opacity:1;transform:none;pointer-events:auto}
.brow__after p{margin:0 0 12px;font-size:16px;line-height:1.7;text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* 通知カード(案3) */
.cards{position:absolute;inset:0}
.card{position:absolute;left:18px;right:18px;top:calc(18% + var(--safe-t));padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.93);color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.35);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.card.is-drag{transition:none}
.card.is-out{opacity:0}
.card__app{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b5a53;margin-bottom:6px}
.card__app i{width:18px;height:18px;border-radius:5px;background:var(--accent);display:inline-block}
.card__app i.red{background:#c0392b}.card__app i.blue{background:#2d6cdf}.card__app i.gray{background:#7d7d7d}
.card b{display:block;font-size:16px;margin-bottom:2px}
.card span{font-size:14px;color:#4a3d37}
.cards__hint{position:absolute;left:0;right:0;bottom:calc(22% + var(--safe-b));text-align:center;color:#fff;font-size:14px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* 読み物の部分 */
.final{max-width:480px;margin:0 auto;padding:44px 22px 40px;background:var(--paper)}
.final h2{font-size:24px;line-height:1.45;margin:0 0 18px;text-wrap:balance}
.final p{font-size:16px;line-height:1.95;margin:0 0 18px}
.final small,.final .note{display:block;font-size:12px;line-height:1.7;color:#6b5a53}
.facts{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.facts li b{display:block;font-size:16px;margin-bottom:2px}
.facts li .src{display:block;font-size:12px;color:#6b5a53;margin-top:4px}
.quote{border-left:3px solid var(--pink);padding:4px 0 4px 16px;margin:0 0 20px;font-size:17px;line-height:1.9}
.dock{position:sticky;bottom:0;z-index:5;max-width:480px;margin:0 auto;padding:12px 16px calc(12px + var(--safe-b));background:rgba(251,248,245,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock small{display:block;text-align:center;margin-top:6px;font-size:12px;color:#6b5a53}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.pair figure{margin:0}
.pair img,.pair canvas{width:100%;height:auto;border-radius:12px;display:block;background:#eee}
.pair figcaption{font-size:12px;color:#6b5a53;margin-top:6px;text-align:center}
.disclose{font-size:12px;color:#6b5a53;line-height:1.7;margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
dialog.sheet{border:0;border-radius:20px 20px 0 0;padding:22px 22px calc(26px + var(--safe-b));width:100%;max-width:480px;margin:auto auto 0;background:#fff;color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
dialog.sheet::backdrop{background:rgba(10,6,5,.5)}
dialog.sheet h3{margin:0 0 10px;font-size:18px}
dialog.sheet p{margin:0 0 14px;font-size:15px;line-height:1.8}
dialog.sheet .steps{margin:0 0 16px;padding-left:20px;font-size:15px;line-height:1.9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.scene{transition:none}.brow__finger{animation:none}.hint.is-nudge{animation:none}}
/* 案2: スクロールで描く */
.scroll-wrap{position:relative;height:420svh;max-width:480px;margin:0 auto}
.scroll-wrap .stage{position:sticky;top:0}
.scroll-wrap .brow{pointer-events:none}
.float{position:absolute;left:0;right:0;padding:0 22px;pointer-events:none;z-index:2}
.float>div{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:18px;padding:16px 18px;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:16px;line-height:1.8;pointer-events:auto}
.float>div b{display:block;font-size:18px;margin-bottom:4px}
.thumb{position:fixed;right:14px;bottom:calc(14px + var(--safe-b));z-index:4;color:#fff;font-size:12px;text-align:center;opacity:.95;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.thumb i{display:block;width:28px;height:44px;border:2px solid #fff;border-radius:14px;margin:0 auto 4px;position:relative}
.thumb i::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:thumb 1.4s infinite}
@keyframes thumb{0%{transform:translateY(0);opacity:1}100%{transform:translateY(16px);opacity:0}}
/* 案4: 採血の線 */
.trace{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.trace img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trace canvas{position:absolute;inset:0;width:100%;height:100%}