@font-face { font-family:"Dela"; src:url("fonts/DelaGothicOne-subset.woff2") format("woff2"); font-display:swap; }
:root { --pink:#ff7eb6; --pink2:#ffc2dd; --lav:#b79bff; --sky:#8fd3ff; --gold:#ffd84a; --disp:"Dela","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
html, body { margin:0; height:100%; overflow:hidden; background:#1b1030; font-family:var(--disp); color:#fff; }
#cam { position:fixed; left:-9999px; top:0; width:640px; height:480px; opacity:0; pointer-events:none; }
#stage { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
#title { z-index:5; position:fixed; top:2.2vh; left:50%; transform:translateX(-50%); font-size:clamp(20px,3.4vh,44px); letter-spacing:.06em; white-space:nowrap;
  background:linear-gradient(90deg,#ffb3d9,#fff1a8,#b8e6ff,#d9c2ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(120,40,120,.55)) drop-shadow(0 0 14px rgba(255,160,230,.8)); pointer-events:none; }
#title .spark { -webkit-text-fill-color:initial; animation:tw 1.6s infinite alternate; display:inline-block; } @keyframes tw { to { transform:scale(1.35) rotate(18deg); opacity:.7; } }

#bar { z-index:6; position:fixed; left:0; right:0; bottom:2vh; display:flex; justify-content:center; align-items:center; gap:1.1vh; padding:0 2vw; flex-wrap:nowrap; }
#bar button { border:0; cursor:pointer; font-family:var(--disp); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4vh;
  width:10vh; height:10vh; min-width:64px; min-height:64px; border-radius:50%; background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.1));
  border:3px solid rgba(255,255,255,.75); box-shadow:0 .8vh 2vh rgba(60,0,80,.45), inset 0 -.8vh 1.4vh rgba(120,40,160,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .12s, box-shadow .2s; }
#bar button i { font-style:normal; font-size:4vh; line-height:1; } #bar button span { font-size:1.45vh; text-shadow:0 1px 3px rgba(80,0,90,.8); white-space:nowrap; }
#bar button:active { transform:scale(.92); }
#bar button.on { background:linear-gradient(160deg,var(--pink),var(--lav)); border-color:#fff; box-shadow:0 0 0 .7vh rgba(255,255,255,.35), 0 0 3vh rgba(255,126,182,.95), 0 .8vh 2vh rgba(60,0,80,.45); transform:translateY(-1.2vh) scale(1.08); }
#bar .sep { width:1.2vh; }
#bar button.dress { border-color:#ffe27a; }
#bar #shutter { margin-left:1.4vh; width:12vh; height:12vh; background:linear-gradient(160deg,#ffe38a,#ff9ac6); border-color:#fff; }
#bar #shutter i { font-size:5.6vh; }

#mascot { z-index:6; position:fixed; left:2vw; bottom:17vh; width:14vh; min-width:90px; pointer-events:none; }
#mascot svg { width:100%; height:auto; animation:float 2.4s ease-in-out infinite; filter:drop-shadow(0 .6vh 1vh rgba(70,0,90,.5)); }
#mascot .wing { animation:flap .35s infinite alternate; transform-origin:60px 46px; } @keyframes flap { to { transform:scaleY(.8); } }
@keyframes float { 50% { transform:translateY(-1.4vh) rotate(3deg); } }
#bubble { position:absolute; left:92%; bottom:62%; min-width:30vh; max-width:40vw; word-break:keep-all; overflow-wrap:anywhere; padding:1.4vh 2vh; border-radius:2.4vh; background:#fff; color:#6a3a86; border:.5vh solid var(--pink);
  font-size:clamp(14px,2.6vh,34px); line-height:1.45; opacity:0; transform:scale(.6) translateY(10px); transform-origin:0 100%; transition:opacity .2s, transform .28s cubic-bezier(.2,1.8,.4,1); box-shadow:0 .8vh 2vh rgba(60,0,80,.4); }
#bubble:before { content:""; position:absolute; left:-1.4vh; bottom:1.2vh; border:1.2vh solid transparent; border-right-color:var(--pink); border-left:0; }
#bubble.show { opacity:1; transform:scale(1) translateY(0); }

#transform { z-index:10; position:fixed; left:50%; top:20%; transform:translate(-50%,-50%) scale(.3) rotate(-6deg); font-size:clamp(40px,12vh,160px); white-space:nowrap; opacity:0; pointer-events:none;
  background:linear-gradient(90deg,#ff7eb6,#ffe46b,#7fdcff,#b79bff,#ff7eb6); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.4vh #fff;
  filter:drop-shadow(0 1vh 0 rgba(120,30,120,.6)) drop-shadow(0 0 3vh rgba(255,150,230,.9)); }
#transform.go { animation:pop 1.7s ease-out; } @keyframes pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-6deg); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(2deg); } 30% { transform:translate(-50%,-50%) scale(1) rotate(-1deg); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.05) rotate(0); } }
#count { z-index:11; position:fixed; inset:0; display:flex; align-items:center; justify-content:center; font-size:38vh; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,#fff,#ffd0ea); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:.8vh var(--pink); filter:drop-shadow(0 1vh 3vh rgba(255,80,160,.7)); }
#count.n { animation:cnt .9s ease-out; } @keyframes cnt { 0% { opacity:0; transform:scale(2); } 25% { opacity:1; transform:scale(1); } 85% { opacity:1; } 100% { opacity:0; transform:scale(.8); } }
#flash { z-index:12; position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; } #flash.go { animation:fl .5s ease-out; } @keyframes fl { 0% { opacity:.95; } 100% { opacity:0; } }

#photo { position:fixed; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:2vh; background:rgba(40,10,70,.82); backdrop-filter:blur(6px); z-index:20; }
#photo.show { display:flex; }
#photo .frame { background:#fff; padding:1.6vh; border-radius:1.4vh; box-shadow:0 2vh 6vh rgba(0,0,0,.6); transform:rotate(-2deg); animation:drop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes drop { from { transform:translateY(-40vh) rotate(-12deg); opacity:0; } }
#photo img { display:block; max-width:78vw; max-height:68vh; border-radius:.6vh; }
#photo .row { display:flex; align-items:center; justify-content:center; gap:4vh; max-width:96vw; }
#photo.withLine img#photoImg { max-width:52vw; max-height:70vh; }
#lineBox { display:none; width:30vw; min-width:260px; padding:2.2vh 2.4vh; border-radius:2vh; background:rgba(255,255,255,.96); color:#6a3a86; text-align:center; box-shadow:0 2vh 6vh rgba(0,0,0,.5); }
#photo.withLine #lineBox { display:block; }
#lineBox .lbTitle { font-size:2.6vh; color:#d44a98; margin-bottom:1.2vh; }
#lineBox .qr { display:block; width:24vh; height:24vh; margin:0 auto 1.2vh; image-rendering:pixelated; }
#lineBox ol { margin:0 0 1.2vh; padding:0; list-style:none; font-size:2.1vh; line-height:1.7; counter-reset:n; text-align:left; display:inline-block; }
#lineBox ol li { counter-increment:n; } #lineBox ol li:before { content:counter(n); display:inline-block; width:3vh; height:3vh; line-height:3vh; margin-right:1vh; border-radius:50%; background:var(--pink); color:#fff; text-align:center; font-size:1.8vh; }
#lineBox .code { font-size:1.7vh; color:#7a5a90; line-height:1.6; font-family:-apple-system,'Hiragino Sans','Yu Gothic','Meiryo',sans-serif; } #lineBox .code b { font-size:2.2vh; color:#d44a98; letter-spacing:.08em; }
#lineBox .note { margin-top:1vh; font-size:1.5vh; color:#8a7a9a; line-height:1.6; font-family:-apple-system,'Hiragino Sans','Yu Gothic','Meiryo',sans-serif; }
#lineBox .friendqr { width:auto; height:auto; max-width:100%; max-height:calc(var(--qrvh, 27) * 1vh); image-rendering:auto; margin:0 auto 1.2vh; display:block; }
#lineBox .bignum { font-family:var(--disp); font-size:7vh; color:#d44a98; letter-spacing:.06em; line-height:1.1; margin:.4vh 0 1.2vh; } #lineBox .bignum small { display:block; font-family:-apple-system,'Hiragino Sans','Yu Gothic','Meiryo',sans-serif; font-size:1.8vh; color:#8a5aa0; letter-spacing:0; margin-bottom:.3vh; }
#lineBox .wait { font-size:2.2vh; padding:6vh 0; animation:tw 1.2s infinite alternate; }
#photo .cap { text-align:center; color:#d44a98; font-size:3vh; padding:1.4vh 0 1.8vh; letter-spacing:.08em; }
#photo .pbtns { display:flex; gap:2vh; }
#photo .pbtns button { border:0; border-radius:99px; padding:1.4vh 4vh; font-family:var(--disp); font-size:2.6vh; color:#fff; background:linear-gradient(160deg,var(--pink),var(--lav)); box-shadow:0 .6vh 0 #8a4fb8; cursor:pointer; }
#msg { position:fixed; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:6vw; font-size:3vh; line-height:1.8; background:rgba(40,10,70,.88); z-index:30; }
#msg.show { display:flex; }
#hint { z-index:7; position:fixed; right:1.6vw; top:1.4vh; font-size:1.5vh; opacity:.85; pointer-events:none; text-align:right; font-family:monospace; white-space:pre; }

/* 写真のあとの「LINEでの届きかた」デモ(スマホの画面を、自動で再生) */
#lineDemo { display:none; flex-direction:column; align-items:center; gap:1vh; font-size:1.55vh; }
#photo.withDemo #lineDemo { display:flex; }
#photo.withDemo img#photoImg { max-width:32vw; max-height:48vh; }
#photo.withDemo #lineBox { width:25vw; min-width:230px; padding:1.6vh 1.6vh; }
#photo.withDemo .row { gap:2.4vh; }
#lineDemo .ldTitle { font-size:1.9vh; color:#ffd0ea; text-shadow:0 1px 3px rgba(0,0,0,.6); } .ldBadge { background:#ffe27a; color:#6a3a00; border-radius:99px; padding:.2vh 1.1vh; font-size:1.5vh; margin-left:.6vh; font-family:-apple-system,'Hiragino Sans','Yu Gothic','Meiryo',sans-serif; font-weight:700; }
.ldPhone { width:29vh; height:56vh; background:#111; border-radius:3.2vh; padding:.9vh; box-shadow:0 2vh 6vh rgba(0,0,0,.6), inset 0 0 0 2px #444; }
.ldScreen { width:100%; height:100%; background:#fff; border-radius:2.4vh; overflow:hidden; position:relative; color:#222; font-family:-apple-system,'Hiragino Sans','Yu Gothic','Meiryo',sans-serif; }
.ldS { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; } .ldS.on { display:flex; }
#ld0 { background:#222; justify-content:center; color:#fff; } .ldVf { width:60%; aspect-ratio:1; border:.35vh solid #fff; border-radius:1.4vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.05em; line-height:1.5; }
.ldScan { position:absolute; left:8%; right:8%; height:.35vh; background:#06c755; box-shadow:0 0 1vh #06c755; top:12%; animation:ldsc 1.2s infinite alternate; } @keyframes ldsc { to { top:84%; } }
#ld1 { background:linear-gradient(180deg,#fdeef6,#fff 40%); padding-top:5vh; text-align:center; } .ldAv { width:3.4vh; height:3.4vh; border-radius:50%; background:linear-gradient(135deg,#ffb3d9,#c8b0ff); display:inline-flex; align-items:center; justify-content:center; font-size:1.7vh; margin-right:.8vh; } .ldAv.big { width:9vh; height:9vh; font-size:4.4vh; margin:0; border:.3vh solid #fff; box-shadow:0 .4vh 1.4vh rgba(0,0,0,.2); }
.ldName { margin-top:1.6vh; font-size:1.25em; font-weight:700; } .ldSub { font-size:.85em; color:#888; margin-bottom:2.4vh; } .ldAdd { background:#06c755; color:#fff; font-weight:700; border-radius:99px; padding:1.1vh 5vh; font-size:1.15em; animation:ldpulse 1s infinite alternate; } @keyframes ldpulse { to { transform:scale(1.08); } }
#ld2 { background:#8fa8d3; align-items:stretch; } .ldHead { background:#fff; padding:1.2vh 1.2vh; font-weight:700; font-size:1.05em; display:flex; align-items:center; border-bottom:1px solid #ddd; }
.ldChat { flex:1; overflow:hidden; padding:1.2vh 1vh; display:flex; flex-direction:column; gap:.9vh; justify-content:flex-start; }
.ldM { display:flex; gap:.6vh; align-items:flex-end; animation:ldpop .25s ease-out; } @keyframes ldpop { from { opacity:0; transform:translateY(.8vh); } } .ldM.me { justify-content:flex-end; }
.ldB { max-width:78%; padding:.8vh 1.1vh; border-radius:1.5vh; font-size:.95em; line-height:1.45; background:#fff; } .ldM.me .ldB { background:#8de055; } .ldB.img { padding:.4vh; } .ldB.img img { display:block; width:100%; border-radius:1vh; }
.ldSys { align-self:center; font-size:.8em; color:#fff; background:rgba(0,0,0,.3); padding:.3vh 1vh; border-radius:99px; }
.ldInput { background:#fff; display:flex; align-items:center; gap:.8vh; padding:.9vh; border-top:1px solid #ddd; } .ldInput span { flex:1; background:#f0f0f0; border-radius:99px; padding:.9vh 1.4vh; font-size:1em; min-height:3.4vh; } .ldInput span.ph { color:#aaa; } .ldInput b { background:#06c755; color:#fff; width:3.4vh; height:3.4vh; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.4vh; }
.ldDots { display:inline-flex; gap:.4vh; padding:.3vh 0; } .ldDots i { width:.8vh; height:.8vh; border-radius:50%; background:#aaa; animation:bl 1s infinite; } .ldDots i:nth-child(2) { animation-delay:.15s; } .ldDots i:nth-child(3) { animation-delay:.3s; } @keyframes bl { 50% { opacity:.25; transform:translateY(-.3vh); } }