/* QUIZNEW1107 推し診断の演出（からぴち診断・すとぷり診断）。人物の絵は使わない：色・光・雰囲気の絵だけ */
.qfx-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 0}
.qfx-dots i{width:12px;height:12px;border-radius:50%;background:var(--c);opacity:.22;transform:scale(.8);transition:opacity .3s,transform .3s,box-shadow .3s}
.qfx-dots i.on{opacity:1;transform:scale(1);box-shadow:0 0 10px var(--c)}
.qfx-hold{position:fixed;inset:0;z-index:99990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(circle at 50% 45%,rgba(255,250,253,.96),rgba(246,238,252,.97));opacity:0;transition:opacity .3s;pointer-events:none}
.qfx-hold.is-on{opacity:1;pointer-events:auto}
.qfx-hold p{margin:0;font-weight:800;font-size:18px;color:#5a3f6c;letter-spacing:.04em}
.qfx-hold.is-go p{font-size:30px;color:#3a2450;animation:qfxPop .42s ease-out}
.qfx-hold__ring{position:relative;width:150px;height:150px;animation:qfxSpin 1.6s linear infinite}
.qfx-hold__ring i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c),0 0 4px #fff inset;transform:rotate(calc(360deg*var(--i)/var(--n))) translateY(-62px)}
.qfx-hold.is-go .qfx-hold__ring{animation:qfxBurst .42s ease-in forwards}
@keyframes qfxSpin{to{transform:rotate(360deg)}}
@keyframes qfxBurst{to{transform:scale(1.9) rotate(200deg);opacity:0}}
@keyframes qfxPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.qfx-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:99991;pointer-events:none}
.cq-result-hero.qfx-lit{position:relative;overflow:hidden;animation:qfxRise .5s ease-out}
.cq-result-hero.qfx-lit::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 38%,var(--qfx-c) 0,transparent 42%);opacity:.28;pointer-events:none}
.cq-result-hero.qfx-lit h1{position:relative}
@keyframes qfxRise{from{transform:translateY(14px);opacity:.3}to{transform:none;opacity:1}}
.qfx-card{margin:22px auto;max-width:560px;padding:18px 16px 20px;border-radius:22px;background:#fff;box-shadow:0 8px 30px rgba(90,50,110,.12);text-align:center}
.qfx-card__h{margin:0 0 4px;font-size:20px;color:#4a335c}
.qfx-card__lead{margin:0 0 12px;font-size:14px;color:#6c5a78;line-height:1.7}
.qfx-card__frame{margin:0 auto;max-width:360px;border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(90,50,110,.18)}
.qfx-card__frame canvas{display:block;width:100%;height:auto}
.qfx-card__btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.qfx-card__btns button{min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid #e7d6ef;background:#fff;color:#4a335c;font-weight:700;font-size:15px;cursor:pointer}
.qfx-card__btns .qfx-save{background:linear-gradient(90deg,#f39bbb,#b48be0);border-color:transparent;color:#fff}
/* からぴち診断の見た目（パステルと光の帯。人物の絵なし） */
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff1f6 0%,#f4eeff 52%,#e9fbf5 100%)}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero::before{content:"";position:absolute;inset:0;background:var(--qfx-bg,none) center/cover no-repeat;opacity:.55;pointer-events:none}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero::after{content:"";position:absolute;inset:-20% -10%;pointer-events:none;opacity:.5;background:linear-gradient(105deg,transparent 0 8%,rgba(53,181,106,.35) 9% 11%,transparent 12% 20%,rgba(243,155,187,.4) 21% 23%,transparent 24% 33%,rgba(242,194,48,.35) 34% 36%,transparent 37% 46%,rgba(226,64,63,.3) 47% 49%,transparent 50% 58%,rgba(47,127,214,.32) 59% 61%,transparent 62% 70%,rgba(142,92,200,.34) 71% 73%,transparent 74% 82%,rgba(243,146,51,.34) 83% 85%,transparent 86%);filter:blur(10px);animation:qfxDrift 14s ease-in-out infinite alternate}
@keyframes qfxDrift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero__content{position:relative;z-index:1}
/* QUIZART1108 はじめの絵（hero.webp・人物なし）が見えるよう、白い覆いを薄く（文字の所だけ白く残す） */
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero__shade{background:linear-gradient(90deg,rgba(255,250,252,.9) 0%,rgba(255,250,252,.74) 44%,rgba(255,250,252,.12) 80%)}
@media(max-width:720px){:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero__shade{background:linear-gradient(0deg,rgba(255,250,252,.9) 0%,rgba(255,250,252,.66) 52%,rgba(255,250,252,.34) 100%)}}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero h1{color:#3a2450}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero h1 span{color:#7a4f8e}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-eyebrow{color:#b0558a}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-primary{background:linear-gradient(90deg,#f39bbb,#b48be0);color:#fff;box-shadow:0 8px 22px rgba(180,110,190,.35)}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-progress__track i{background:linear-gradient(90deg,#35b56a,#f39bbb,#f2c230,#e2403f,#2f7fd6,#8e5cc8)}
:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-option.is-selected{border-color:#f39bbb;box-shadow:0 0 0 3px rgba(243,155,187,.3)}
@media (prefers-reduced-motion:reduce){:is(.cq[data-work="karapichi"],.cq[data-work="hololive"],.cq[data-work="amptak"],.cq[data-work="mrsgreenapple"]) .cq-hero::after,.cq-result-hero.qfx-lit{animation:none}.qfx-dots i{transition:none}}
/* QFX1108 作り込み（11/8 ユーザー「シェアしたくなる完成度」）: 溜め→めくって発表・とばす・設問の動き・同じ結果の人・相性・友だちとの相性・カード 2 つの比率 */
html.qfx-lock{overflow:hidden}
.qfx-dots i.now{animation:qfxDot .5s ease-out}
@keyframes qfxDot{0%{transform:scale(.6)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
#cqStage,#stprStage{position:relative}
.cq-card.qfx-in,#stprStage.qfx-in>.stpr-scene,#stprStage.qfx-in>.stpr-q,#stprStage.qfx-in>.stpr-opts{animation:qfxStep .32s cubic-bezier(.2,.8,.2,1)}
@keyframes qfxStep{from{opacity:.2;transform:translateX(22px)}to{opacity:1;transform:none}}
.cq-option,.stpr-opts button{transition:transform .12s}
.cq-option:active,.stpr-opts button:active{transform:scale(.97)}
.qfx-toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));z-index:9999;margin:0;padding:7px 16px;border-radius:999px;background:linear-gradient(90deg,#f39bbb,#b48be0);color:#fff;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 6px 18px rgba(150,90,170,.3);transform:translateX(-50%);animation:qfxToast 1.9s ease-out forwards;pointer-events:none}
@keyframes qfxToast{0%{opacity:0;transform:translate(-50%,8px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
/* 溜め → めくって発表 */
.qfx-hold{background:radial-gradient(circle at 50% 42%,#fffcff,#f4ecfc);overflow:hidden}
.qfx-hold::before{content:"";position:absolute;inset:0;background:var(--qfx-ovbg,none) center/cover no-repeat;opacity:.45;filter:saturate(1.1)}
.qfx-hold>*{position:relative}
.qfx-hold__glow{position:absolute!important;left:50%;top:44%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;background:radial-gradient(circle,var(--qfx-c,#f39bbb) 0,transparent 55%);opacity:0;transform:scale(.2);transition:opacity .5s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.qfx-hold.is-flip .qfx-hold__glow{opacity:.42;transform:scale(1)}
.qfx-hold__t{min-height:1.6em;margin:0;font-weight:800;font-size:17px;color:#5a3f6c;letter-spacing:.04em;text-align:center;padding:0 16px}
.qfx-hold.is-flip .qfx-hold__ring{animation:qfxBurst .42s ease-in forwards}
.qfx-hold.is-flip .qfx-hold__ring,.qfx-hold.is-flip .qfx-hold__t{position:absolute}
.qfx-flip{display:none;width:min(78vw,340px,calc(64vh * .75));aspect-ratio:3/4;perspective:1200px;cursor:pointer}
.qfx-hold.is-flip .qfx-flip{display:block;animation:qfxDrop .45s cubic-bezier(.2,.9,.3,1.2)}
.qfx-flip__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1) .25s}
.qfx-hold.is-flip .qfx-flip__in{transform:rotateY(180deg)}
.qfx-flip__back,.qfx-flip__front{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(70,40,100,.3)}
.qfx-flip__back{background:linear-gradient(135deg,#ffd1ec,#c9b6ff 30%,#a8f0ff 55%,#d6ffd0 75%,#fff2a8);border:6px solid #fff}
.qfx-flip__back b{font:900 84px/1 Poppins,sans-serif;color:#fff;text-shadow:0 4px 18px rgba(120,70,160,.45)}
.qfx-flip__front{transform:rotateY(180deg);padding:14px 14px 18px;justify-content:flex-start!important;border:8px solid transparent;background:linear-gradient(#fffaf6,#fffaf6) padding-box,linear-gradient(135deg,#ffd1ec,#c9b6ff,#a8f0ff,#d6ffd0,#fff2a8,#ffc4d8) border-box;text-align:center;gap:10px;box-sizing:border-box}
.qfx-flip__art{display:block;width:100%;flex:1 1 auto;min-height:30%;border-radius:14px;background:center 30%/cover no-repeat;box-shadow:inset 0 0 0 3px var(--qfx-deep,#f39bbb)}
.qfx-flip__front small{font-size:14px;font-weight:700;color:#7a5a86}
.qfx-flip__front b{display:block;width:100%;padding:12px 8px;border-radius:999px;background:var(--qfx-c,#f39bbb);color:var(--qfx-ink,#fff);border:3px solid var(--qfx-deep,transparent);box-sizing:border-box;font-size:clamp(22px,7.4vw,32px);font-weight:900;line-height:1.2;word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.qfx-flip__front em{font:900 46px/1 Poppins,sans-serif;font-style:normal;color:var(--qfx-deep,#b0558a)}
.qfx-flip__front i{font-style:normal;font-size:14px;line-height:1.6;color:#4a335c;font-weight:700}
@keyframes qfxDrop{from{transform:translateY(-30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.qfx-skip{position:absolute!important;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));min-height:44px;padding:10px 20px;border-radius:999px;border:2px solid rgba(90,63,108,.25);background:rgba(255,255,255,.85);color:#5a3f6c;font-weight:800;font-size:15px;cursor:pointer}
.qfx-hold.is-flip .qfx-skip{background:var(--qfx-c,#f39bbb);border-color:var(--qfx-deep,transparent);color:var(--qfx-ink,#fff)}
/* 同じ結果の人 */
.qfx-same{position:relative;margin:10px auto 0;padding:8px 14px;max-width:max-content;border-radius:999px;background:rgba(255,255,255,.8);font-size:14px;font-weight:700;color:#4a335c;line-height:1.5}
.qfx-same b{font-size:18px;color:var(--qfx-deep,#b0558a)}
.qfx-same small{display:block;font-size:11px;font-weight:600;color:#7a6a86}
.qfx-same--stpr{background:none;padding:2px 0;font-size:12px;color:#7a6a86}
/* 相性のいい結果・友だちとの相性 */
.qfx-match,.qfx-pair,.qfx-duo{margin:18px auto;max-width:560px;padding:20px 18px;border-radius:22px;background:#fff;box-shadow:0 8px 30px rgba(90,50,110,.12);text-align:center;box-sizing:border-box}
.qfx-pair__eyebrow{margin:0;font:800 12px/1.4 Poppins,sans-serif;letter-spacing:.14em;color:#b0558a}
.qfx-match__h,.qfx-pair__h,.qfx-duo__h{margin:4px 0 10px;font-size:20px;color:#4a335c;line-height:1.4}
.qfx-match__n{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 22px;border-radius:999px;border:3px solid var(--qfx-deep,#f39bbb);font-size:22px;font-weight:900;color:#35234a}
.qfx-match__n i{width:14px;height:14px;border-radius:50%;background:var(--qfx-c,#f39bbb);box-shadow:0 0 0 2px var(--qfx-deep,transparent)}
.qfx-match__why{margin:12px 0 0;font-size:14px;line-height:1.8;color:#5c4868;text-align:left}
.qfx-pair{background:linear-gradient(160deg,#fff4f8,#f3efff 60%,#eefbf6)}
.qfx-pair__lead{margin:0 0 12px;font-size:14px;line-height:1.8;color:#5c4868}
.qfx-pair__btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.qfx-pair__btns a,.qfx-pair__btns button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;border:2px solid transparent;box-sizing:border-box}
.qfx-pair__line{background:#06c755;color:#fff}
.qfx-pair__x{background:#111;color:#fff}
.qfx-pair__copy{background:#fff;border-color:#e7d6ef!important;color:#4a335c}
.qfx-duo__row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:6px 0 12px}
.qfx-duo__c{padding:12px 6px;border-radius:16px;min-width:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.qfx-duo__c--a{background:var(--qfx-a);color:var(--qfx-ia,#fff)}
.qfx-duo__c--b{background:var(--qfx-b);color:var(--qfx-ib,#fff)}
.qfx-duo__c small{display:block;font-size:12px;font-weight:700;opacity:.9}
.qfx-duo__c b{display:block;font-size:17px;font-weight:900;line-height:1.3;overflow-wrap:anywhere}
.qfx-duo__mid em{display:block;font:900 34px/1 Poppins,sans-serif;font-style:normal;color:#35234a}
.qfx-duo__mid i{display:block;margin-top:4px;font-style:normal;font-size:12px;font-weight:800;color:#b0558a;white-space:nowrap}
.qfx-duo__msg{margin:0 0 12px;font-size:14px;line-height:1.8;color:#4a335c;text-align:left}
.qfx-duo__note{margin:10px 0 0;font-size:11px;color:#8a7a96;line-height:1.6}
.qfx-invite{margin:0 0 14px;padding:12px 14px;border-radius:16px;background:#fff;border:3px solid var(--qfx-deep,#f39bbb);box-shadow:0 6px 18px rgba(90,50,110,.12);text-align:center}
.qfx-invite p{margin:0;font-size:14px;line-height:1.7;color:#4a335c}
.qfx-invite b{display:block;font-size:17px;color:#35234a}
/* カード: 2 つの比率 */
.qfx-card__tabs{display:inline-flex;gap:4px;margin:0 0 12px;padding:4px;border-radius:999px;background:#f3ecf8}
.qfx-card__tabs button{min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:none;color:#6c5a78;font-weight:800;font-size:14px;cursor:pointer}
.qfx-card__tabs button[aria-selected="true"]{background:#fff;color:#4a335c;box-shadow:0 2px 8px rgba(90,50,110,.15)}
.qfx-card__frame{max-width:300px;background:#3a2a55}
.qfx-card__frame[data-r="16x9"]{max-width:520px}
.qfx-card__note{margin:8px 0 0;font-size:12px;color:#8a7a96}
@media (prefers-reduced-motion:reduce){.cq-card.qfx-in,#stprStage.qfx-in>*,.qfx-dots i.now,.qfx-toast{animation:none}}