/* ③ 作品キャラとの相性診断（twst・precure 共通）。名前は .b34c- だけ。動きは transform と opacity だけ */
.b34c{--ac:#6b4fd8;--ac2:#c9a24a;--bg1:#f4f1ff;--bg2:#fffaf0;--ink:#2a2340;--sub:#6c6585;--card:#fff;max-width:720px;margin:0 auto;padding:0 16px 24px;color:var(--ink);box-sizing:border-box}
.b34c *{box-sizing:border-box}
.b34c--precure{--ac:#e8508f;--ac2:#f6a623;--bg1:#fff0f6;--bg2:#fff8e8}
.b34c-hero{text-align:center;padding:22px 0 8px}
.b34c-eyebrow{margin:0 0 8px}
.b34c-unoff{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ac);background:var(--bg1);border:1.5px solid var(--ac);border-radius:999px;padding:3px 12px}
.b34c-h1{font-size:clamp(26px,7.4vw,38px);line-height:1.2;margin:0 0 10px;font-weight:900;letter-spacing:.01em}
.b34c-h1 span{display:block;font-size:.5em;font-weight:800;color:var(--sub);margin-top:6px}
.b34c-lead{font-size:15px;line-height:1.8;margin:0 auto 14px;max-width:34em;text-align:left}
.b34c-meta{font-size:12px;color:var(--sub);margin:10px 0 0}
.b34c-deck{position:relative;height:150px;margin:8px auto 4px;max-width:340px}
.b34c-tag{position:absolute;left:50%;top:12px;width:70px;height:126px;margin-left:-35px;padding:8px 3px;border-radius:10px;background:var(--card);border:2px solid var(--ac);box-shadow:0 6px 14px rgba(40,20,90,.14);font-size:11.5px;font-weight:800;line-height:1.25;color:var(--ink);writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:translateX(calc((var(--i) - 3) * 31px)) translateY(calc((var(--i) - 3) * (var(--i) - 3) * 2.5px)) rotate(calc((var(--i) - 3) * 7deg));transform-origin:50% 120%}
.b34c-tag:nth-child(even){background:var(--bg2)}
.b34c-app{scroll-margin-top:92px;min-height:120px;margin:10px 0 18px}
.b34c-start{display:flex;flex-direction:column;align-items:center;gap:10px}
.b34c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--ac);color:#fff;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14);width:100%;max-width:340px;font-family:inherit}
.b34c-btn[hidden]{display:none}
.b34c-btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.14)}
.b34c-btn--sub{background:#fff;color:var(--ac);border:2px solid var(--ac);box-shadow:none;font-size:15px;min-height:46px}
.b34c-q{background:var(--card);border-radius:18px;padding:18px 16px 16px;box-shadow:0 8px 24px rgba(40,20,90,.08);border:1.5px solid var(--bg1)}
.b34c-prog{height:6px;border-radius:9px;background:var(--bg1);overflow:hidden}
.b34c-prog i{display:block;height:100%;background:var(--ac);border-radius:9px}
.b34c-qn{font-size:12px;font-weight:800;color:var(--ac);margin:12px 0 4px}
.b34c-qt{font-size:18px;font-weight:800;line-height:1.55;margin:0 0 14px}
.b34c-opts{display:flex;flex-direction:column;gap:10px}
.b34c-opt{text-align:left;font:inherit;font-size:15.5px;line-height:1.5;padding:14px 16px;border-radius:14px;border:2px solid #e3dcf3;background:#fff;color:var(--ink);cursor:pointer;min-height:52px}
.b34c-opt:hover{border-color:var(--ac)}
.b34c-opt.is-on{background:var(--ac);border-color:var(--ac);color:#fff}
.b34c-back{margin-top:12px;background:none;border:0;color:var(--sub);font:inherit;font-size:13px;cursor:pointer;padding:8px 4px}
.b34c-invnote{background:var(--bg2);border-radius:12px;padding:10px 14px;font-size:14px;margin:0 0 12px;text-align:center}
/* シャッフル */
.b34c-shuf{text-align:center;padding:6px 0}
.b34c-shuf-l{font-size:14px;font-weight:800;color:var(--sub);margin:0 0 8px}
.b34c-table{position:relative;height:250px;max-width:360px;margin:0 auto;perspective:900px;overflow:hidden}
.b34c-fc{position:absolute;left:50%;top:40px;width:120px;height:168px;margin-left:-60px;transition:transform .45s cubic-bezier(.3,.7,.3,1),opacity .35s}
.b34c-fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s}
.b34c-fc-f,.b34c-fc-b{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:10px;box-shadow:0 6px 16px rgba(40,20,90,.16)}
.b34c-fc-f{background:#fff;border:2px solid var(--ac);font-size:14px;font-weight:900;line-height:1.35}
.b34c-fc-b{transform:rotateY(180deg);background:var(--ac);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 6px,transparent 6px 14px);border:3px solid #fff;outline:2px solid var(--ac)}
.b34c-table.is-fan .b34c-fc{transform:translateX(calc((var(--i) - 3) * 30px)) rotate(calc((var(--i) - 3) * 8deg))}
.b34c-table.is-down .b34c-fc-in{transform:rotateY(180deg)}
.b34c-table.is-mix .b34c-fc{animation:b34c-mix .5s ease-in-out 2 alternate;animation-delay:calc(var(--i) * 30ms)}
@keyframes b34c-mix{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(calc((var(--i) - 3) * -26px)) translateY(calc((var(--i) - 3) * 6px)) rotate(calc((var(--i) - 3) * -10deg))}100%{transform:translateX(calc((var(--i) - 3) * 16px)) translateY(-8px) rotate(calc((var(--i) - 3) * 5deg))}}
.b34c-table.is-pick .b34c-fc{opacity:0;transform:translateY(60px) scale(.8)}
.b34c-table.is-pick .b34c-fc:first-child{opacity:1;transform:translateY(-10px) scale(1.12)}
/* 結果カード（共通の .sd-card の中身） */
.b34c-back-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:300px;border-radius:18px;color:#fff;background:var(--ac);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 6px,transparent 6px 14px);font-weight:900}
.b34c-back-card b{font-size:64px;line-height:1}
.b34c-card{text-align:center;padding:20px 16px 18px;background:linear-gradient(170deg,var(--bg1),#fff 55%,var(--bg2));border-radius:18px}
.b34c-ck{font-size:12px;font-weight:800;color:var(--sub);margin:0 0 6px}
.b34c-ck span{margin-left:6px;padding:1px 8px;border-radius:999px;border:1.5px solid var(--ac);color:var(--ac);font-size:11px}
.b34c-cl{font-size:13px;font-weight:800;color:var(--ac);margin:0}
.b34c-cn{font-size:clamp(24px,7vw,32px);font-weight:900;line-height:1.25;margin:4px 0 2px;word-break:keep-all;overflow-wrap:anywhere}
.b34c-cs{font-size:12.5px;color:var(--sub);margin:0 0 6px}
.b34c-cp{font-size:20px;font-weight:900;color:var(--ac);margin:12px 0 0;line-height:1}
.b34c-cp b{font-size:64px;letter-spacing:-.02em}
.b34c-cw{font-size:14.5px;line-height:1.65;margin:10px auto 12px;max-width:26em;font-weight:700}
.b34c-cme{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-size:13px;color:var(--sub)}
.b34c-cme img{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12);object-fit:cover}
.b34c-cme b{color:var(--ink);display:block;font-size:14px}
.b34c-after{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.b34c-x{background:#fff;border-radius:16px;padding:16px;border:1.5px solid var(--bg1)}
.b34c-h2{font-size:19px;font-weight:900;margin:0 0 8px}
.b34c-h3{font-size:16px;font-weight:900;margin:0 0 8px}
.b34c-x p{font-size:14.5px;line-height:1.75;margin:0 0 8px}
.b34c-basis{color:var(--sub);font-size:13.5px !important}
.b34c-rk,.b34c-pl,.b34c-all ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.b34c-rk li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:12px;background:var(--bg1)}
.b34c-rk li b{font-size:15px}.b34c-rk li span{grid-column:1;font-size:12px;color:var(--sub)}
.b34c-rk li em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font-weight:900;font-size:22px;color:var(--ac)}
.b34c-rk li small{grid-column:1 / -1;font-size:12.5px;line-height:1.55;color:var(--ink)}
.b34c-pl li{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;background:var(--bg2);font-size:14px}
.b34c-pl li.is-me{outline:2px solid var(--ac)}
.b34c-pl em{font-style:normal;font-weight:900}
.b34c-all summary,.b34c-cast summary{cursor:pointer;font-weight:800;font-size:14.5px;color:var(--ac);padding:4px 0}
.b34c-all ol{margin-top:10px;gap:4px}
.b34c-all li{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:6px 4px;border-bottom:1px solid #f0ecf7;font-size:14px}
.b34c-all li em{font-style:normal;font-weight:900;color:var(--ac)}
.b34c-all li small{grid-column:1 / -1;color:var(--sub);font-size:11.5px}
.b34c-again,.b34c-you{text-align:center;margin:6px 0 0}
.b34c-you{margin-top:14px}
.b34c-note{font-size:12.5px;color:var(--sub);line-height:1.7;margin:0 0 8px}
.b34c-sec{margin:26px 0 8px}
.b34c-cast ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.b34c-cast li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #eee8f6}
.b34c-cast li b{font-size:14.5px}.b34c-cast li small{grid-column:1;font-size:11.5px;color:var(--sub)}
.b34c-cast li em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font-size:12px;font-weight:800;color:var(--ac);white-space:nowrap}
.b34c-cast li span{grid-column:1 / -1;font-size:13px;line-height:1.65}
@media (prefers-reduced-motion:reduce){.b34c-fc,.b34c-fc-in{transition:none}.b34c-table.is-mix .b34c-fc{animation:none}}