/* DrawAlive 公式サイト ― 演出
   どれも中身を読むのを邪魔しない。動きを控えたい人には、止まった姿で全部読めるようにする。 */
:root{ --ink-deep:#16121f; --gold:#ffcf5a; --rainbow:linear-gradient(90deg,#ff5f6d,#ffc371,#47e5bc,#5aa9ff,#a77bff,#ff5f6d); }

/* 上の帯：価格・実績・音 */
.top nav .price-link{display:inline-block; background:linear-gradient(90deg,var(--accent),var(--coral)); color:#fff; padding:3px 12px; border-radius:999px; font-weight:700}
.top nav .price-link:hover{color:#fff; filter:brightness(1.08)}
.hud{display:flex; gap:8px; align-items:center}
.hud button{font:inherit; font-size:.82rem; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--sheet); color:var(--ink);
  border-radius:999px; padding:3px 10px; cursor:pointer; line-height:1.6}
.hud button:hover{border-color:var(--accent)}
.hud .ach-btn b{font-variant-numeric:tabular-nums}
.hud .ach-btn.bump{animation:bump .5s cubic-bezier(.3,1.8,.5,1)}
.hud svg{width:15px; height:15px; fill:currentColor}
.hud .snd[aria-pressed=false] .on, .hud .snd[aria-pressed=true] .off{display:none}
@keyframes bump{0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)}}
@media (max-width:520px){ .top nav{gap:10px} .top nav .lang{display:none} }

/* 読み進んだ量 */
.progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:60; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--coral),var(--gold)); pointer-events:none}

/* 表紙：ゆっくり動くにじみ・筆の跡 */
.hero{overflow:hidden; isolation:isolate}
.hero .wrap{position:relative; z-index:2}
.hero .blob{position:absolute; z-index:0; width:46vmax; height:46vmax; border-radius:50%; filter:blur(60px); opacity:.3; pointer-events:none}
.hero .blob.a{background:var(--accent); left:-14vmax; top:-18vmax}
.hero .blob.b{background:var(--coral); right:-16vmax; bottom:-24vmax}
.trail{position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%}
.chips{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.price-chip{display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 8px; border-radius:999px; text-decoration:none; color:#fff; font-weight:900;
  background:linear-gradient(90deg,var(--coral),var(--accent)); font-size:.95rem; letter-spacing:.02em; box-shadow:0 6px 22px color-mix(in srgb,var(--coral) 45%,transparent)}
.price-chip b{background:#fff; color:var(--coral); border-radius:999px; padding:2px 10px; font-size:.76rem}
.pet-hint{color:var(--coral); font-weight:700}

/* 見出しの一文字ずつ */
.ch{display:inline-block; white-space:pre}

/* 流れる帯 */
.ticker{background:var(--ink-deep); color:#fff; overflow:hidden; transform:rotate(-1.6deg) scale(1.04); margin-block:-10px; position:relative; z-index:3;
  border-block:3px solid var(--coral)}
.ticker-run{display:flex; width:max-content; padding-block:14px; font-family:var(--f-display); font-weight:900; font-size:clamp(1rem,2vw,1.35rem); letter-spacing:.04em}
.ticker-run span{padding-inline:28px; white-space:nowrap}
.ticker-run span::after{content:"✦"; margin-left:56px; color:var(--gold)}
.ticker-run span:nth-child(3n+1){color:var(--gold)}

/* 数字の帯 */
.stats{padding-block:clamp(40px,5vw,60px); background:var(--sheet); border-bottom:1px solid var(--line)}
.stats .wrap{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; text-align:center}
.stats b{display:block; font-family:var(--f-display); font-weight:900; font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.05; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats span{font-size:.9rem; color:var(--sub); font-weight:700}
.stats .zero b{background:var(--rainbow); background-size:200% 100%; -webkit-background-clip:text; background-clip:text}
@media (max-width:700px){ .stats .wrap{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:28px} }

/* 見出しの下を、筆で払う */
h2.sweep{position:relative; padding-bottom:.2em; width:fit-content}
h2.sweep::after{content:""; position:absolute; left:0; bottom:0; height:.13em; width:min(100%,5em); border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--coral)); transform-origin:0 50%}

/* 画面写真：傾きと光 */
.shot{position:relative}
.shot .glare{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.4), transparent 50%)}
.shot.tilting .glare{opacity:1}

/* ---- 価格 ---- */
.price{position:relative; overflow:hidden; isolation:isolate; background:var(--ink-deep); color:#f4f0ff;
  --sub:#b9b2cc; --line:#3a3150; --sheet:#221c30; --ink:#f4f0ff}
.price::before,.price::after{content:""; position:absolute; z-index:-1; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none}
.price::before{background:#6a5ae0; left:-25vmax; top:-30vmax}
.price::after{background:#d8653a; right:-25vmax; bottom:-35vmax}
.price .eyebrow{color:var(--gold)}
.price h2{font-size:clamp(2rem,5.2vw,3.8rem); font-weight:900}
.price-stage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,48px); margin-top:44px; align-items:stretch}
.price-card{position:relative; border-radius:28px; padding:clamp(24px,4vw,44px); background:linear-gradient(160deg,#2b2340,#1b1628);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; isolation:isolate}
.price-card::before{content:""; position:absolute; inset:-60%; z-index:-2;
  background:conic-gradient(from var(--spin,0deg), #a596ff, #f08a5e, #ffcf5a, #47e5bc, #a596ff)}
.price-card::after{content:""; position:absolute; inset:2px; border-radius:26px; z-index:-1; background:linear-gradient(160deg,#2b2340,#1b1628)}
.price-label{font-weight:700; color:var(--sub); letter-spacing:.08em; font-size:.9rem}
.price-num{font-family:var(--f-display); font-weight:900; line-height:1; margin-top:12px; font-size:clamp(4.2rem,11vw,8.4rem); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; display:flex; align-items:flex-start}
.price-num .yen{font-size:.42em; margin-top:.2em; margin-right:.06em; color:var(--gold)}
.price-num .digits{display:inline-flex; color:#fff}
.digits .slot{display:inline-block; height:1em; overflow:hidden}
.digits .reel{display:flex; flex-direction:column}
.digits .reel i{font-style:normal; height:1em; line-height:1; display:block}
.stamp{position:absolute; right:clamp(14px,3vw,30px); top:clamp(14px,2vw,22px); font-family:var(--f-display); font-weight:900; font-size:clamp(1.3rem,2.8vw,2rem);
  color:#ff6a58; border:4px double #ff6a58; border-radius:12px; padding:4px 14px; transform:rotate(-14deg); letter-spacing:.08em; text-shadow:0 0 18px rgba(255,91,74,.45);
  background:rgba(255,91,74,.08); white-space:nowrap}
.price-pts{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:10px}
.price-pts li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; font-weight:500}
.price-pts li::before{content:"✓"; color:var(--gold); font-weight:900}

.calc{border-radius:28px; padding:clamp(22px,3.5vw,36px); background:rgba(255,255,255,.04); border:1px solid var(--line); display:grid; gap:8px; align-content:start}
.calc-q{font-family:var(--f-display); font-weight:700; font-size:1.15rem; margin-bottom:6px}
.calc-row{display:flex; justify-content:space-between; gap:12px; color:var(--sub); font-size:.92rem; margin-top:6px}
.calc-row output{color:#fff; font-weight:900; font-variant-numeric:tabular-nums}
.calc input[type=range]{width:100%; accent-color:#f08a5e; height:28px; cursor:pointer; margin:0}
.bars{display:grid; gap:12px; margin-top:12px}
.bar{display:grid; grid-template-columns:6.5em minmax(0,1fr) auto; gap:10px; align-items:center; font-size:.9rem}
.bar-name{color:var(--sub)}
.bar b{font-variant-numeric:tabular-nums; min-width:5.5em; text-align:right}
.bar-fill{height:16px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden}
.bar-fill i{display:block; height:100%; width:var(--w,50%); border-radius:inherit; transition:width .45s cubic-bezier(.2,1.4,.4,1)}
.bar.sub i{background:repeating-linear-gradient(-45deg,#8e8aa0 0 8px,#77738a 8px 16px)}
.bar.own i{background:linear-gradient(90deg,var(--gold),#f08a5e)}
.bar.own b{color:var(--gold)}
.calc-diff{font-family:var(--f-display); font-weight:900; font-size:clamp(1.3rem,2.6vw,1.8rem); margin-top:8px}
.calc-diff b{color:var(--gold); font-variant-numeric:tabular-nums; display:inline-block}
.calc-diff b.pop{animation:bump .35s cubic-bezier(.3,1.8,.5,1)}
.calc-diff small{display:block; font-size:.6em; font-weight:700; color:var(--ink); margin-top:4px}
.calc-note{font-size:.8rem; color:var(--sub)}

.letter{margin:clamp(44px,6vw,72px) auto 0; max-width:760px; background-color:#fffdf7; color:#3a352c; border-radius:6px; padding:clamp(26px,5vw,52px);
  box-shadow:0 30px 70px rgba(0,0,0,.45); display:grid; gap:16px; font-size:1.04rem; line-height:2;
  background-image:repeating-linear-gradient(transparent 0 calc(2em - 1px), #ece4d4 calc(2em - 1px) 2em)}
.letter strong{background:linear-gradient(transparent 62%, #ffd6c2 62%)}
.letter-head{font-family:var(--f-display); font-weight:900; font-size:1.3rem; color:#d8653a}
.letter .sign{justify-self:end; font-family:var(--f-display); font-weight:900; font-size:1.25rem}
.letter .sign::before{content:"— "}
.pledges{list-style:none; padding:0; margin:clamp(40px,5vw,60px) 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.pledges li{border:1px solid var(--line); border-radius:18px; padding:20px; display:grid; gap:6px; background:rgba(255,255,255,.03); align-content:start}
.pledges b{font-family:var(--f-display); font-size:1.2rem; color:var(--gold)}
.pledges span{color:var(--sub); font-size:.9rem}
@media (max-width:900px){ .price-stage{grid-template-columns:minmax(0,1fr)} .pledges{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .pledges{grid-template-columns:minmax(0,1fr)} .bar{grid-template-columns:5.2em minmax(0,1fr) auto} }

/* 残りの時間 */
.countdown{margin-top:20px}
.cd-label{font-weight:700; color:var(--sub); font-size:.9rem}
.cd-run{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.launch .cd-run{margin-top:8px}
.cd-run span{display:flex; align-items:baseline; gap:4px; background:var(--ink-deep); color:#fff; border-radius:12px; padding:6px 12px; font-size:.8rem}
.cd-run b{font-family:var(--f-display); font-weight:900; font-size:1.7rem; font-variant-numeric:tabular-nums; min-width:1.3em; text-align:right; display:inline-block}
.cd-run b.flip{animation:flip .35s ease}
@keyframes flip{0%{transform:translateY(-40%); opacity:0} 100%{transform:none; opacity:1}}

/* 表紙の子：なでた時 */
.stage .avatar{cursor:pointer; transform-origin:50% 90%}
.stage.boing .avatar{animation:boing .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes boing{0%{transform:none} 25%{transform:scale(1.07,.92)} 55%{transform:scale(.96,1.06)} 100%{transform:none}}
.bubble{position:absolute; left:50%; top:4%; transform:translate(-50%,-100%) scale(.6); opacity:0; z-index:3; pointer-events:none;
  background:#fffdf9; color:#34312b; border:2px solid #34312b; border-radius:18px; padding:6px 14px; font-family:var(--f-display); font-weight:900;
  white-space:nowrap; font-size:.98rem; transition:transform .25s cubic-bezier(.3,1.7,.5,1), opacity .2s}
.bubble::after{content:""; position:absolute; left:50%; bottom:-9px; width:14px; height:14px; background:inherit; border:2px solid #34312b; border-top:0; border-left:0;
  transform:translateX(-50%) rotate(45deg)}
.bubble.on{transform:translate(-50%,-100%) scale(1); opacity:1}
.combo{position:absolute; right:0; top:14%; z-index:3; pointer-events:none; font-family:var(--f-display); font-weight:900; font-size:1.6rem; color:var(--coral);
  opacity:0; transform:scale(.5) rotate(8deg); transition:opacity .2s, transform .25s cubic-bezier(.3,1.8,.5,1); text-shadow:0 2px 0 var(--paper)}
.combo.on{opacity:1; transform:scale(1) rotate(8deg)}
.combo.big{transform:scale(1.45) rotate(-6deg)}

/* 紙ふぶき・しずく */
.fx{position:fixed; inset:0; width:100%; height:100%; z-index:70; pointer-events:none}

/* 実績（Steam の実績風） */
.toasts{position:fixed; right:16px; bottom:16px; z-index:80; display:grid; gap:10px; pointer-events:none}
.toast{display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; width:min(340px,calc(100vw - 32px));
  background:linear-gradient(135deg,#232031,#2d2342); color:#fff; border-radius:12px; padding:10px 14px 10px 10px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  border:1px solid #4b3f68; transform:translateX(calc(100% + 24px)); transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.toast.in{transform:none}
.toast .ic{width:52px; height:52px; border-radius:10px; display:grid; place-items:center; font-size:1.6rem;
  background:linear-gradient(135deg,var(--gold),#f08a5e); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.toast small{display:block; color:#cbbcff; font-size:.72rem; letter-spacing:.08em}
.toast b{display:block; font-family:var(--f-display); font-size:1.02rem; line-height:1.4}
.toast span{display:block; color:#cfc8de; font-size:.8rem; line-height:1.5}

.ach-panel{border:0; padding:0; border-radius:20px; width:min(560px,calc(100vw - 32px)); background:var(--sheet); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ach-panel::backdrop{background:rgba(20,16,30,.55)}
.ach-panel .in{padding:24px; display:grid; gap:14px}
.ach-panel h2{font-size:1.5rem; margin:0}
.ach-panel p{color:var(--sub); font-size:.9rem}
.ach-meter{height:10px; border-radius:99px; background:var(--line); overflow:hidden}
.ach-meter i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--coral),var(--gold)); width:0; transition:width .6s}
.ach-list{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:52vh; overflow:auto}
.ach-list li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; padding:8px; border-radius:12px; background:var(--paper-2)}
.ach-list .ic{width:40px; height:40px; border-radius:9px; display:grid; place-items:center; font-size:1.2rem; background:var(--line); filter:grayscale(1); opacity:.55}
.ach-list li.got .ic{background:linear-gradient(135deg,var(--gold),var(--coral)); filter:none; opacity:1}
.ach-list b{display:block; font-size:.95rem}
.ach-list span{display:block; font-size:.8rem; color:var(--sub); line-height:1.5}
.ach-panel .row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ach-panel .row button{font:inherit; font-size:.85rem; border-radius:999px; padding:6px 16px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--ink)}
.ach-panel .row .close{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}

/* ページに落書き */
.doodle-btn{position:fixed; left:16px; bottom:16px; z-index:65; display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; font-size:.92rem;
  padding:10px 16px; border-radius:999px; border:0; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--accent),var(--coral));
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 45%,transparent)}
.doodle-btn:hover{filter:brightness(1.08)}
.doodle-btn svg{width:18px; height:18px; fill:currentColor}
.doodle-bar{position:fixed; left:16px; bottom:70px; z-index:65; display:none; gap:8px; align-items:center; padding:8px 10px; border-radius:999px;
  background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow)}
.doodling .doodle-bar{display:flex}
.doodle-bar .sw{width:28px; height:28px; border-radius:50%; border:2px solid var(--sheet); outline:2px solid transparent; cursor:pointer; padding:0}
.doodle-bar .sw[aria-pressed=true]{outline-color:var(--ink)}
.doodle-bar .clear{font:inherit; font-size:.82rem; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:3px 12px; cursor:pointer}
.doodle-layer{position:fixed; inset:0; width:100%; height:100%; z-index:55; pointer-events:none}
.doodling .doodle-layer{pointer-events:auto; cursor:crosshair; touch-action:none}

/* 隠しの「おまつり」 */
.party .ink-line{background-image:var(--rainbow); background-size:200% 100%; animation:slide 2s linear infinite}
.party .mark img{animation:spin 1.6s linear infinite}
@keyframes slide{to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

@property --spin{syntax:"<angle>"; inherits:false; initial-value:0deg}

/* 動いてよい人にだけ */
@media (prefers-reduced-motion: no-preference){
  .hero .blob.a{animation:drift-a 18s ease-in-out infinite alternate}
  .hero .blob.b{animation:drift-b 22s ease-in-out infinite alternate}
  @keyframes drift-a{to{transform:translate(18vmax,10vmax) scale(1.15)}}
  @keyframes drift-b{to{transform:translate(-16vmax,-8vmax) scale(.9)}}
  .price-chip{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 6px 34px color-mix(in srgb,var(--coral) 75%,transparent); transform:translateY(-1px) scale(1.03)}}
  .ticker-run{animation:marquee 34s linear infinite}
  .ticker:hover .ticker-run{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
  .stats .zero b{animation:slide 4s linear infinite}
  .js .ch{opacity:0; transform:translateY(.6em) rotate(8deg) scale(.6); animation:chin .7s cubic-bezier(.2,1.6,.4,1) forwards; animation-delay:calc(var(--i) * 38ms + 120ms)}
  @keyframes chin{to{opacity:1; transform:none}}
  .js h2.sweep::after{transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.9,.2,1) .15s}
  .js h2.sweep.seen::after{transform:scaleX(1)}
  .price-card::before{animation:spinb 5s linear infinite}
  @keyframes spinb{to{--spin:360deg}}
  .js .price-card .stamp{opacity:0; transform:rotate(-14deg) scale(3.2)}
  .js .price-card.stamped .stamp{animation:stamp .42s cubic-bezier(.5,0,.8,.4) forwards}
  .price-card.shake{animation:shake .4s ease}
  @keyframes stamp{0%{opacity:0; transform:rotate(-14deg) scale(3.2)} 80%{opacity:1; transform:rotate(-14deg) scale(.92)} 100%{opacity:1; transform:rotate(-14deg) scale(1)}}
  @keyframes shake{20%{transform:translate(-6px,4px)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-3px,2px)} 80%{transform:translate(2px,-1px)}}
  .js .shot.wipe{clip-path:inset(0 100% 0 0 round var(--radius)); transition:clip-path 1s cubic-bezier(.7,0,.2,1), transform .25s ease}
  .js .shot.wipe.seen{clip-path:inset(0 0 0 0 round var(--radius))}
  .steps li.seen::before{animation:popn .6s cubic-bezier(.3,1.8,.5,1)}
  @keyframes popn{0%{transform:scale(.2)} 100%{transform:none}}
  .pledges li{transition:transform .25s, border-color .25s}
  .pledges li:hover{transform:translateY(-4px); border-color:var(--gold)}
}

.w{display:inline-block; white-space:nowrap}
@media (max-width:600px){ .doodle-btn{padding:12px} .doodle-btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .doodle-bar{bottom:72px; flex-wrap:wrap; border-radius:18px; max-width:calc(100vw - 32px)} }

/* =====================================================================
   ほかとの違い・こんな人に・四つの画面・描き心地・品質（2026-10-09 追加）
   ===================================================================== */

/* 指の周りだけ明るくなる（暗い節） */
.spot{position:relative; isolation:isolate}
.spot::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(165,150,255,.22), transparent 60%)}
.spot.lit::after{opacity:1}

/* ---- ほかとの違い ---- */
.why{background:linear-gradient(180deg,var(--ink-deep),#221a33); color:#f4f0ff; --sub:#b9b2cc; --line:#3a3150; --sheet:#221c30; --ink:#f4f0ff; overflow:hidden}
.why .eyebrow{color:var(--gold)}
.why h2{font-size:clamp(1.9rem,4.6vw,3.4rem); font-weight:900}
.flow-switch{display:inline-flex; margin-top:32px; padding:5px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line); gap:4px}
.flow-switch button{font:inherit; font-weight:700; border:0; border-radius:999px; padding:8px 20px; cursor:pointer; background:transparent; color:var(--sub); transition:background .25s,color .25s}
.flow-switch button[aria-selected=true]{background:linear-gradient(90deg,#a596ff,#f08a5e); color:#17151c}
.flows{margin-top:26px; min-height:160px}
.flow{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 34px; align-items:stretch}
.flow li{position:relative; display:grid; gap:2px; align-content:center; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--line); min-width:150px}
.flow li b{font-family:var(--f-display); font-size:1.05rem}
.flow li span{font-size:.85rem; color:var(--sub)}
.flow li:not(.loop):not(:nth-last-child(2))::after{content:"→"; position:absolute; right:-26px; top:50%; transform:translateY(-50%); color:var(--gold); font-weight:900}
.flow li.loop{flex-basis:100%; background:transparent; border:1px dashed #6a5f86; color:#d9cfff; min-width:0}
.flow li.loop span{color:inherit; font-size:.92rem}
.flow.old li.loop::before{content:"↺ "; color:#f08a5e; font-weight:900}
.flow li.one{background:linear-gradient(135deg,rgba(165,150,255,.28),rgba(240,138,94,.24)); border-color:#a596ff; min-width:min(100%,360px); box-shadow:0 0 40px rgba(165,150,255,.25)}
.flow li.one b{font-size:1.5rem}
.flow li.loop.good{border-color:var(--gold); color:#fff}
.flow li.loop.good::before{content:"✦ "; color:var(--gold)}
.vs{margin-top:44px; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.vs-row{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.1fr); border-top:1px solid var(--line)}
.vs-row:first-child{border-top:0}
.vs-row > span{padding:14px 18px; font-size:.95rem}
.vs-row > span:first-child{color:var(--sub); font-weight:700}
.vs-row > span:nth-child(2){color:#cfc8de}
.vs-row .da{background:linear-gradient(90deg,rgba(165,150,255,.16),rgba(240,138,94,.12)); position:relative; padding-left:44px}
.vs-row .da b{color:var(--gold)}
.vs-row:not(.vs-head) .da::before{content:"✓"; position:absolute; left:16px; top:13px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold); color:#17151c; font-weight:900; font-size:.75rem}
.vs-head > span{font-family:var(--f-display); font-weight:900; font-size:1rem; color:#fff !important}
.vs-head .da{font-size:1.15rem !important}
.vs-note{margin-top:12px; font-size:.8rem; color:var(--sub)}
@media (max-width:720px){
  .vs-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs-row > span:first-child{grid-column:1 / -1; padding-bottom:0; font-size:.82rem}
  .vs-head > span:first-child{display:none}
  .flow li:not(.loop)::after{display:none}
  .flow li{min-width:0; flex:1 1 40%}
}

/* ---- こんな人に ---- */
.personas{list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.personas li{background:var(--sheet); border:1px solid var(--line); border-radius:20px; padding:22px; display:grid; gap:10px; align-content:start; box-shadow:var(--shadow)}
.personas i{font-style:normal; font-size:2.2rem; line-height:1; display:inline-block; width:fit-content}
.personas b{font-family:var(--f-display); font-size:1.08rem; line-height:1.45}
.personas span{font-size:.92rem; color:var(--sub)}
@media (max-width:980px){ .personas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .personas{grid-template-columns:minmax(0,1fr)} }

/* ---- 四つの画面 ---- */
.screens{margin-top:36px}
.scr-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.scr-tabs button{position:relative; overflow:hidden; font:inherit; text-align:left; cursor:pointer; padding:14px 16px 16px; border-radius:16px; border:1px solid var(--line);
  background:var(--sheet); color:var(--ink); display:grid; gap:2px; transition:transform .2s, border-color .2s, box-shadow .2s}
.scr-tabs button b{font-family:var(--f-display); font-size:1.15rem}
.scr-tabs button span{font-size:.82rem; color:var(--sub)}
.scr-tabs button[aria-selected=true]{border-color:var(--accent); box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25%,transparent); transform:translateY(-2px)}
.scr-tabs button i{position:absolute; left:0; bottom:0; height:4px; width:0; background:linear-gradient(90deg,var(--accent),var(--coral))}
.scr-tabs button[aria-selected=true] i{width:100%}
.scr-panels{margin-top:18px}
.scr-panel{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(20px,4vw,48px); align-items:center}
.scr-panel[hidden]{display:none}
.scr-text{display:grid; gap:12px}
.scr-text h3{font-size:clamp(1.5rem,3vw,2.2rem)}
.scr-text p{color:var(--sub)}
.film{display:flex; gap:10px; padding:18px; border-radius:var(--radius); background:#2a2533; box-shadow:var(--shadow); overflow:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.18) 22px 34px); background-size:34px 10px; background-repeat:repeat-x;
  background-position:0 6px, 0 calc(100% - 6px)}
.film span{flex:1; aspect-ratio:4/5; border-radius:8px; background:#fffdf9 url('/assets/img/hero-center.webp') center/cover no-repeat; margin-block:12px}
.film span:nth-child(2){transform:rotate(-4deg)}
.film span:nth-child(3){transform:translateY(-6%)}
.film span:nth-child(4){transform:rotate(4deg)}
.film span:nth-child(5){transform:scale(.94)}
@media (max-width:820px){ .scr-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .scr-panel{grid-template-columns:minmax(0,1fr)} }

/* ---- 描き心地 ---- */
.feel-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,3vw,32px); margin-top:36px}
.ba{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; --pos:50%}
.ba img{width:100%; display:block; user-select:none; -webkit-user-drag:none}
.ba .ba-before{position:absolute; inset:0; height:auto; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba::before{content:""; position:absolute; top:0; bottom:44px; left:var(--pos); width:3px; margin-left:-1.5px; z-index:2; pointer-events:none;
  background:linear-gradient(var(--accent),var(--coral)); box-shadow:0 0 12px rgba(106,90,224,.5)}
.ba::after{content:"⇆"; position:absolute; top:calc(50% - 40px); left:var(--pos); z-index:2; pointer-events:none; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--accent); font-weight:900; font-size:1.2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.25); border:2px solid var(--accent)}
.ba-range{position:absolute; inset:0 0 44px 0; width:100%; height:calc(100% - 44px); opacity:0; cursor:ew-resize; margin:0; z-index:3}
.ba-tag{position:absolute; top:12px; z-index:2; font-weight:900; font-size:.8rem; padding:3px 12px; border-radius:999px; pointer-events:none}
.ba-tag.l{left:12px; background:#8e8aa0; color:#fff}
.ba-tag.r{right:12px; background:linear-gradient(90deg,var(--accent),var(--coral)); color:#fff}
.ba figcaption{background:var(--sheet); color:var(--sub); font-size:.86rem; padding:10px 14px; min-height:44px}
.ba:focus-within{outline:3px solid var(--accent); outline-offset:3px}
.feel-pts{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.feel-pts li{display:grid; gap:4px; padding:16px; border-radius:16px; background:var(--sheet); border:1px solid var(--line)}
.feel-pts b{font-family:var(--f-display); color:var(--accent)}
.feel-pts span{font-size:.88rem; color:var(--sub)}
@media (max-width:820px){ .feel-grid{grid-template-columns:minmax(0,1fr)} .feel-pts{grid-template-columns:repeat(2,minmax(0,1fr))} }

.try{margin-top:40px; border-radius:24px; background:var(--sheet); border:1px solid var(--line); padding:clamp(16px,3vw,26px); box-shadow:var(--shadow)}
.try-head{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:flex-end}
.try-title{font-family:var(--f-display); font-weight:900; font-size:1.3rem}
.try-note{font-size:.84rem; color:var(--sub); max-width:34rem}
.try-tools{display:flex; flex-wrap:wrap; gap:8px}
.try-tools button{font:inherit; font-size:.86rem; font-weight:700; border-radius:999px; padding:6px 14px; cursor:pointer; border:1.5px solid var(--line); background:transparent; color:var(--ink)}
.try-tools button[aria-pressed=true]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.try-paper{display:block; width:100%; height:clamp(220px,32vw,320px); margin-top:16px; border-radius:16px; touch-action:none; cursor:crosshair;
  background:#fffdf7; background-image:radial-gradient(#e9e1d2 1px, transparent 1.2px); background-size:18px 18px; box-shadow:inset 0 0 0 1px #e6dccb}

/* ---- 品質の数字 ---- */
.quality{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px}
.quality .q{display:grid; gap:6px; padding:22px; border-radius:20px; background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow)}
.quality b{font-family:var(--f-display); font-weight:900; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content}
.quality span{color:var(--sub); font-size:.92rem}
@media (max-width:760px){ .quality{grid-template-columns:minmax(0,1fr)} }

/* ---- 演出（動いてよい人にだけ） ---- */
@media (prefers-reduced-motion: no-preference){
  .flow:not([hidden]) li{animation:flowin .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--k,0) * 90ms)}
  @keyframes flowin{from{opacity:0; transform:translateY(14px) scale(.9)}}
  .flow li.one{animation:flowin .5s cubic-bezier(.2,1.5,.4,1) both, glow 2.6s ease-in-out .6s infinite}
  @keyframes glow{50%{box-shadow:0 0 70px rgba(240,138,94,.4)}}
  .js .vs-row:not(.vs-head){opacity:0; transform:translateX(-18px); transition:opacity .5s, transform .5s cubic-bezier(.2,1.4,.4,1); transition-delay:calc(var(--k,0) * 110ms)}
  .js .vs.seen .vs-row{opacity:1; transform:none}
  .js .vs-row:not(.vs-head) .da::before{transform:scale(0); transition:transform .4s cubic-bezier(.3,2,.5,1); transition-delay:calc(var(--k,0) * 110ms + .35s)}
  .js .vs.seen .vs-row .da::before{transform:scale(1)}
  .personas li{transition:transform .25s, box-shadow .25s}
  .personas li:hover{transform:translateY(-6px) rotate(-.6deg)}
  .personas li:hover i{animation:wiggle .6s ease}
  @keyframes wiggle{25%{transform:rotate(-14deg) scale(1.2)} 60%{transform:rotate(10deg) scale(1.15)} 100%{transform:none}}
  .scr-tabs button:hover{transform:translateY(-2px)}
  .scr-tabs button[aria-selected=true] i{animation:fillbar var(--dur,6s) linear}
  .screens.paused .scr-tabs button i{animation:none}
  @keyframes fillbar{from{width:0}}
  .scr-panel:not([hidden]) .shot, .scr-panel:not([hidden]) .film{animation:panelin .55s cubic-bezier(.2,1.2,.4,1)}
  .scr-panel:not([hidden]) .scr-text{animation:panelin .55s cubic-bezier(.2,1.2,.4,1) .08s both}
  @keyframes panelin{from{opacity:0; transform:translateY(16px) scale(.98)}}
  .film span{animation:bob 2.4s ease-in-out infinite; animation-delay:calc(var(--k,0) * -.5s)}
  @keyframes bob{50%{translate:0 -6px}}
  .ba.hint::after{animation:nudge 1.6s ease-in-out 2}
  @keyframes nudge{25%{translate:-14px 0} 75%{translate:14px 0}}
  .quality .q{transition:transform .25s}
  .quality .q:hover{transform:translateY(-4px)}
}
.flow[hidden]{display:none}
.flow li.loop{display:block}