:root{--r:8px;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Roboto Mono","Noto Sans Mono",monospace;--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);--bg:#14120f;--bg2:#1c1915;--card:#201c17;--line:#352f27;--trk:#786e5d;--fg:#efe7da;--mute:#aa9f8e;--yes:#93c58a;--no:#e58370;--sh:0 10px 28px rgba(0,0,0,.5);--shade:12,10,8;--ac:#e3a03c;--acd:#e3a03c;--fav:#e3a03c;--ac2:#2b2419;--ac3:#c9852c;--onac:#1a130a}
@media (prefers-color-scheme: light){:root:not([data-theme=dark]){--bg:#f3eee5;--bg2:#e9e2d5;--card:#fbf8f2;--line:#ddd3c2;--trk:#8a7f6c;--fg:#1e1b16;--mute:#5f574b;--yes:#2e7738;--no:#ad3f2d;--sh:0 8px 22px rgba(60,40,10,.14);--shade:12,10,8;--ac:#8f5500;--acd:#e3a03c;--fav:#8f5500;--ac2:#efe3cc;--ac3:#a86400;--onac:#fffaf0}}
:root[data-theme=light]{--bg:#f3eee5;--bg2:#e9e2d5;--card:#fbf8f2;--line:#ddd3c2;--trk:#8a7f6c;--fg:#1e1b16;--mute:#5f574b;--yes:#2e7738;--no:#ad3f2d;--sh:0 8px 22px rgba(60,40,10,.14);--shade:12,10,8;--ac:#8f5500;--acd:#e3a03c;--fav:#8f5500;--ac2:#efe3cc;--ac3:#a86400;--onac:#fffaf0}
[hidden]{display:none!important}
.vh{position:absolute!important;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
 -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;padding-bottom:var(--sab)}
@keyframes rise{from{opacity:0}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wrap{max-width:560px;margin:0 auto;padding:16px 14px 28px}
h1{font-size:21px;font-weight:800;letter-spacing:.01em;margin:0 0 10px;text-wrap:balance}
h1 .sub{font-size:12.5px;font-weight:500;color:var(--mute);margin-left:6px}
h2{font-size:15px;font-weight:800;line-height:1.3;color:var(--fg);margin:28px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
.hint{color:var(--mute);font-size:13.5px}
.dim{color:var(--mute);font-weight:500}
.big,.tm{font-family:var(--mono);font-variant-numeric:tabular-nums}

header{display:flex;justify-content:space-between;align-items:center;gap:0 10px;padding:calc(6px + var(--sat)) 10px 6px 16px;
 background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;container:hdr/inline-size}
header .logo{font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}
header .logo svg{width:22px;height:22px;color:var(--ac)}
header nav{display:flex;justify-content:flex-end;gap:2px;margin-left:auto}
header nav a{font-size:13px;text-decoration:none;color:var(--mute);min-height:44px;padding:0 7px;border-radius:6px;border:1px solid transparent;display:inline-flex;align-items:center;gap:5px;transition:.18s;white-space:nowrap}
header nav a svg{width:16px;height:16px;flex:0 0 auto}
header nav a.on{color:var(--fg);background:var(--ac2);border-color:var(--line)}
@media(max-width:369px){header nav a:not(.on) span{display:none}header nav a{padding:0 12px;min-width:44px;justify-content:center}}
@media(max-width:189px){header{padding-left:2px;padding-right:2px;gap:0}}
@media(max-width:179px){header{flex-wrap:wrap}header nav{margin-left:0}}
@media (hover:hover){header nav a:hover{color:var(--fg);background:var(--ac2);border-color:var(--line)}}

footer{max-width:1000px;margin:32px auto 0;padding:16px 14px;color:var(--mute);font-size:12.5px;border-top:1px solid var(--line)}
footer .fnav{margin-bottom:8px;font-size:13.5px}
footer .fnav a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

.bc{font-size:12.5px;color:var(--mute);margin:0 0 6px;white-space:nowrap;display:flex;flex-wrap:wrap;align-items:center;column-gap:.3em}
.bc>a{flex:none;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.bc>span{flex:1 1 0;min-width:min(4em,100%);overflow:hidden;text-overflow:ellipsis}
.bc a{color:var(--mute);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.bc a:first-child{color:var(--fg);text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}

.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:18px 0 6px}
.pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);text-decoration:none;font-weight:700}
.pager a{text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}
.pager span.on{background:var(--ac);color:var(--onac);border-color:var(--ac)}

.more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:6px;color:var(--fg);text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;font-weight:700;margin-top:10px;background:var(--card);font-size:14px;cursor:pointer;font-family:inherit;max-width:100%;overflow-wrap:anywhere}
.morep{text-align:center;margin:4px 0 0}

a.btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;
 background:var(--ac);color:var(--onac);font-size:16px;font-weight:800;letter-spacing:.02em;text-decoration:none;
 box-shadow:none;transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px}
.btn small{font-size:12.5px;font-weight:600;opacity:.85}
a.btn.sec,.btn.sec{min-height:44px;padding:0 14px;border-radius:6px;font-size:13.5px;background:transparent;color:var(--ac);border:1px solid var(--ac)}
.btn[disabled]{opacity:.45;cursor:default}
.lnk{background:none;border:0;color:var(--fg);font-size:14px;font-family:inherit;cursor:pointer;padding:0 8px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}
.lnk[disabled]{opacity:.4;cursor:default}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.lnk:hover{text-decoration:underline}}

.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:8px 0}
.chips button,.chips a{border:1px solid var(--line);background:var(--card);color:var(--mute);border-radius:6px;min-height:44px;padding:6px 14px;font-size:14px;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
 transition:transform .15s,background .15s,color .15s,border-color .15s}
.chips button small{display:none}
.chips button.on,.chips a.on{background:var(--ac);border-color:var(--ac);color:var(--onac);font-weight:700}
@media (hover:hover){.chips button:hover,.chips a:hover{transform:translateY(-1px)}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wk{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block;color:inherit;animation:rise .4s both}
.wk>a{display:block;text-decoration:none;color:inherit}
@supports selector(:has(a)){.wk:has(>a:focus-visible){outline:2px solid var(--ac);outline-offset:2px}.wk>a:focus-visible{outline:none}}
.wk .ph{position:relative;background:var(--ac2)}
img.noimg{visibility:hidden}
.wk img{width:100%;height:auto;aspect-ratio:var(--cov-ar,4/3);object-fit:contain;background:var(--ac2);display:block}
.wk .t{padding:6px 8px 0;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.wk .s{padding:2px 8px 10px;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;display:flex}
.wk .s .an{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wk .s .mn{flex:none;white-space:pre}
.wk .rank{position:absolute;left:6px;top:6px;min-width:26px;height:26px;padding:0 8px;border-radius:6px;background:rgba(var(--shade),.7);color:#fff;font:800 12.5px/26px var(--mono);text-align:center}
.wk .nn{position:absolute;left:6px;bottom:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(var(--shade),.66);border-radius:6px;padding:3px 9px}
.wk.backhl{outline:1px solid var(--ac);outline-offset:1px}
@media (hover:hover){.wk:hover{border-color:var(--ac)}}

.empty{color:var(--mute);font-size:13.5px;padding:14px;border:1px dashed var(--line);border-radius:8px;text-align:center}
.grid>.empty{grid-column:1/-1}

@keyframes tst{0%{opacity:0}12%,74%{opacity:1}100%{opacity:0}}
.toast{position:fixed;left:50%;top:calc(var(--sat) + 66px);translate:-50% 0;z-index:40;pointer-events:none;
 background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--line);color:var(--fg);padding:9px 16px;border-radius:6px;font-size:13px;
 animation:tst 1.8s ease forwards;max-width:86vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:max-content;box-sizing:border-box}
.toast.wrap{white-space:normal;max-width:min(92vw,400px);text-align:center;line-height:1.5;animation-duration:3.2s;overflow:visible;text-overflow:clip}

#gate{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center;padding:20px}
#gate .gbox{text-align:center;max-width:330px;animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
#gate .g18{width:92px;height:92px;color:var(--ac);display:block;margin:0 auto 14px;animation:spinin .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes spinin{from{transform:rotate(-40deg) scale(.7);opacity:0}}
#gate .gt{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:.01em}
#gate .gnote{display:block;color:var(--mute);font-size:13px;line-height:1.5}
#gate .hint,#gate .gnote{text-wrap:balance}
@media (max-height:480px){#gate .gnote{display:none}#gate{padding:12px;overflow-y:auto}#gate .g18{width:48px;height:48px;margin-bottom:6px}#gate .gt{font-size:20px}#gate .gbox p{margin:6px 0}}

[data-pfocus]:focus,[data-pfocus]:focus-visible{outline:none}
body{overscroll-behavior:none}
button.more,button.btn,button.lnk,.chips button{font-family:revert}   /* 共通部品は font-family:inherit だが、ASMR の <button> は以前から UA 既定の書体。revert で UA 既定に戻し、見た目を変えない */

body.app header{display:none}
body.app .stage{touch-action:none}
header .eyeb{flex:0 0 auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:2px;border:1px solid transparent;border-radius:6px;background:none;color:var(--mute);cursor:pointer;transition:.18s}   /* 〔表紙を隠す〕の目（全ページのヘッダー・data-hidecov で押す場所の 1 つ）。押している間は ac2 の地と斜線 */
header .eyeb svg{width:20px;height:20px}header .eyeb .sl{display:none}
header .eyeb[aria-pressed="true"]{color:var(--fg);background:var(--ac2);border-color:var(--line)}header .eyeb[aria-pressed="true"] .sl{display:inline}

.phr{word-break:keep-all;overflow-wrap:anywhere}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hrow h1{margin:0}
.hbtn{min-height:44px;padding:0 12px;margin-left:4px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:13px;font-weight:700;cursor:pointer}
.hbtn[aria-pressed="true"]{border-color:var(--ac);color:var(--ac)}.hbtn[aria-pressed="true"]::before{content:"✓ "}   /* 再点検1: ③ の 2 つのボタンは今の状態を示す */

/* ---- 入口タイル: 表紙 1 枚（4:3）と下に文字（束6 #54: 文字を表紙に重ねると拡大表示で上に切れた・#58: 表紙 16 枚→4 枚） ---- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.tile{position:relative;display:flex;flex-direction:column;border:0;padding:0;border-radius:var(--r);overflow:hidden;background:var(--card);cursor:pointer;color:inherit;text-align:left;text-decoration:none;
 box-shadow:var(--sh);animation:rise .5s cubic-bezier(.2,.9,.3,1) both;transition:transform .2s}
.tile:nth-child(2){animation-delay:.06s}.tile:nth-child(3){animation-delay:.12s}.tile:nth-child(4){animation-delay:.18s}
.tile:active{transform:scale(.97)}
.tile .g{display:block;aspect-ratio:4/3;background:var(--ac2)}
.tile .g img{width:100%;height:100%;object-fit:contain;display:block;background:var(--ac2)}
.tile .c{position:static;background:var(--card);color:var(--fg);padding:8px 10px 10px}
.tile .c b{display:block;font-size:18px;font-weight:800;letter-spacing:.02em;line-height:1.35;text-shadow:none}
.tile .c span{display:block;font-variant-numeric:tabular-nums}
.tile .c small{display:block;line-height:1.35;margin-top:2px}
.tile .c span,.tile .c small{color:var(--mute);opacity:1;font-size:13px}
.tile.on{outline:2px solid var(--ac);outline-offset:-2px}
.tile.on::after{content:"";position:absolute;inset:0;border-radius:var(--r);box-shadow:inset 0 0 0 2px var(--ac);pointer-events:none}
#resume{text-align:center;margin:16px 0 0}
.back{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px 10px 10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--ac2);margin:0 0 14px;animation:rise .4s both}
.back .t{flex:1 1 auto;min-width:0}   /* 枚数が切れる幅ではボタンを次の行へ（束4 #43: 320〜390px で「前回…」になっていた）。#resume は中央揃え */
.back .t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back .t small{display:block;color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back a,.back button{min-height:44px;padding:0 13px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.back .go{background:var(--ac);color:var(--onac);box-shadow:none}
.back .res{color:var(--ac);background:transparent;border:1px solid var(--ac)}
.back .redo{flex:0 0 100%;justify-content:center;background:none;color:var(--mute);font-weight:400;font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px}   /* 目立たない文字リンク（確認を出して答えを消す） */
.back svg{width:16px;height:16px}

/* ---- チップ ---- */
.chips button{border:1px solid var(--line);background:var(--card);color:var(--mute);border-radius:6px;min-height:44px;padding:6px 14px;font-size:14px;cursor:pointer;
 transition:transform .15s,background .15s,color .15s,border-color .15s}
.chips button.on{background:var(--ac);border-color:var(--ac);color:var(--onac);font-weight:700}
#ngchips button.on,#ngchips2 button.on{background:var(--no);border-color:var(--no)}
#ngchips button.on::before,#ngchips2 button.on::before{content:"✕ "}
#ngnote{margin:2px 0 0}
.prefnote{margin:0 0 8px;font-size:13px}
.more.seedgo{gap:6px}.more.seedgo svg{width:16px;height:16px;flex:none}
.agerow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0;color:var(--fg)}.agerow .hbtn{margin-left:0}
.seedline{display:flex;align-items:center;gap:4px;margin:4px 0 0;color:var(--fg)}
.seedline .x{min-width:44px;min-height:44px;border:0;background:none;color:var(--mute);font-size:18px;cursor:pointer}
.newsw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.newsw button{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--mute);font-size:14px;cursor:pointer}
.newsw button[aria-pressed="true"]{background:var(--ac2);color:var(--fg);border-color:var(--ac);font-weight:700}
/* /actors/ の入口の切り替え（束6 2周目 見本帳・?e= は noindex）: トップの「新しい作品」の切り替えと同じ見た目のリンク */
.newsw a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);font-size:14px;text-decoration:none}
.newsw a small{color:var(--mute);margin-left:6px;font-size:13px}
.newsw a[aria-current]{background:var(--ac2);border-color:var(--ac);font-weight:700}
.acttabs{margin:4px 0 12px}
.buynote{font-size:12.5px;margin:4px 0 0}
.priceline{margin:8px 0 0;font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}.priceline .pr{font-size:18px;font-weight:700;color:var(--fg)}.priceline .lp{color:var(--mute)}.priceline .pk{color:var(--ac);font-weight:700}
details#likebox{margin-top:6px}
.tsearch{display:flex;margin:6px 0 0}
.tsearch input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--trk);border-radius:6px;background:var(--card);color:var(--fg);font-size:16px}
#likeres,#tagqres{margin:6px 0 2px}
#likeres .nearh,#tagqres .nearh{flex-basis:100%;margin:4px 0 0}
details#likebox summary{cursor:pointer;font-weight:800;font-size:19px;min-height:44px;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;list-style:none;padding-top:8px}
details#likebox summary .sub{font-size:12.5px;font-weight:500;color:var(--mute)}
details#likebox summary::-webkit-details-marker{display:none}
details#likebox summary svg{width:18px;height:18px;color:var(--mute);transition:transform .2s;align-self:center}
details#likebox summary .lh{min-width:0}details#likebox summary .lhn{white-space:nowrap}details#likebox summary .lh svg{vertical-align:-2px;margin-right:8px}   /* 束3: › と「②」を折らない 1 つの塊に（文字 1.5 倍の 390 幅・130% の 277 幅で › だけ上の行に離れていた。塊が span 1 つでも Chrome は › の後で折った） */
details#likebox[open] summary svg{transform:rotate(90deg)}
.startbar{position:sticky;bottom:0;margin:12px -14px 0;padding:14px 14px calc(10px + var(--sab));text-align:center;background:linear-gradient(transparent,var(--bg) 40%)}
.startbar .hint{margin:6px 0 0}
/* 再点検2: 結果の〔変える〕から来た人（.same）は〔続きを聴く〕〔結果を見る〕を 1 列に並べ、イヤホンの一行は出さない。答えが残る旨（#stashn）は帯でなく ② の上へ。
   前は帯に 2 行の説明と 44px のボタンが縦に足され、360×640 で 123→230px・667×375 で画面の半分が帯になり ③ の語を隠した */
.startbar .sbrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.startbar .sbrow .more{margin-top:0}
.startbar.same .sbear{display:none}
.startbar.same #start{padding:0 14px;gap:6px}.startbar.same #tores{padding:0 14px}   /* 360 幅で 1 列に収める（5 桁の作品数で 318/332px） */

/* ---- 進み具合（スワイプ中の上部） ---- */
.meterbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto;padding:calc(8px + var(--sat)) 16px 8px;
 background:var(--bg)}
.ring{width:46px;height:46px;flex:0 0 auto;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .bgc{stroke:var(--line)}
.ring .fg{stroke:var(--ac);stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .6s cubic-bezier(.2,.9,.3,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.mtxt{flex:1;min-width:0}
.mtxt .a{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtxt .b{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#seeres{white-space:nowrap;font-weight:800;color:var(--ac);text-decoration:none;font-size:13.5px;border:1px solid var(--ac);min-height:44px;padding:0 14px;border-radius:6px;display:inline-flex;align-items:center}
#seeres.pulse{animation:breathe 1.3s ease-in-out 4}
@keyframes breathe{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ac) 18%,transparent)}}
.quizbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;margin:0 auto;padding:calc(8px + var(--sat)) 16px 8px;
 background:var(--bg)}
.quizbar .q{font-weight:800;font-size:15px;line-height:1.3}.quizbar .q b{color:var(--ac);font-size:18px}
.quizbar .q small{display:block;font-weight:500;color:var(--mute);font-size:12.5px}
.quizbar button{min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--mute);font-size:13.5px;font-weight:700;cursor:pointer}

/* ---- 札（表紙は 4:3 を全部見せ、余白は同じ絵のぼかし） ---- */
.stage{position:relative;max-width:440px;margin:10px auto 0;height:clamp(320px,calc(100vh - 172.5px - 3.3em),620px);height:clamp(320px,calc(100dvh - 172.5px - 3.3em - var(--sab)),620px);padding:0 14px;perspective:1200px}
.card{position:absolute;inset:0 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
 box-shadow:var(--sh);touch-action:none;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;will-change:transform}
.card{transition:transform .34s cubic-bezier(.2,.9,.3,1),opacity .34s}
.card.b1{transform:translateY(12px) scale(.965);opacity:1}   /* 表紙に filter を掛けない（束6 #59 改め: 規約は拡大・縮小のみ。qa の hidecov_test j) で見張る） */
.card.enter{transform:translateY(26px) scale(.9);opacity:0}
.card.top{z-index:5}
.card .ph{position:relative;flex:0 0 auto;aspect-ratio:4/3;overflow:hidden;background:var(--ac2)}
.card .ph .cov{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.card .info{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;z-index:6;
 background:rgba(12,10,8,.55);color:#fff;text-decoration:none}
.card .info svg{width:20px;height:20px}
.card .pp{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
.card .pp svg{width:68px;height:68px;color:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.card.paused .pp,.card .pp.flash{opacity:1}
/* 束3 #36: 見本が読めない札（err）は「もう一度」と〔飛ばす〕。#2: 札の +10 */
.card .pp{grid-auto-flow:row;align-content:center;justify-items:center;gap:6px}
.card .pp .ppt{display:none;font-size:14px;font-weight:700;color:#fff;background:rgba(12,10,8,.78);padding:4px 10px;border-radius:6px;word-break:keep-all;overflow-wrap:anywhere;text-align:center}.card .pp .ppt>span{display:block}   /* 630 幅未満の横向きで「タ／ップ」と語の途中で折れていた（2周目 束4 の残り）: 2 行（読み込めません／タップで<wbr>もう一度）にし、<wbr> の所だけで折る */
.card.err .pp{opacity:1}.card.err .pp .ppt{display:block}
.card .skipb{display:none;position:absolute;top:8px;left:8px;z-index:6;min-width:44px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.6);border-radius:6px;background:rgba(12,10,8,.78);color:#fff;font-size:14px;font-weight:700;cursor:pointer;align-items:center}
.card.err .skipb{display:inline-flex}body.quiz .card .skipb{display:none}
.card .pbar .fwd{flex:0 0 auto;width:44px;height:44px;margin:-20px -8px -2px -2px;padding:18px 0 0;border:0;background:none;color:#fff;font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.errband{position:fixed;left:12px;right:12px;top:calc(var(--sat) + 6px);z-index:41;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--trk);border-radius:8px;padding:6px 6px 6px 14px;font-size:13.5px;line-height:1.4;box-shadow:var(--sh)}
.errband span{flex:1}.errband button{min-width:44px;min-height:44px;border:0;background:none;color:var(--mute);font-size:20px;cursor:pointer}
@media (min-width:720px){.errband{left:50%;right:auto;width:440px;translate:-50% 0}}
.card .pbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:8px;padding:18px 12px 2px;
 background:linear-gradient(transparent,rgba(12,10,8,.75))}
.card .pbar .tm{font-size:12px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.card .seek .bar{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.card .seek .bar i{background:#e3a03c}
.card .b{padding:11px 14px 12px;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.card .a{display:flex;align-items:center;gap:6px;font-weight:800;font-size:18px;line-height:1.3;min-width:0}
.card .a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .a svg{width:16px;height:16px;color:var(--mute);flex:0 0 auto}
.card .a.dim{color:var(--mute);font-weight:600;font-size:15px}
.card .a.cvd{font-weight:700;font-size:15px}   /* 再点検2: 説明から取った CV（名義ではない）は一回り小さく。全文の CV で「CV 名前（説明より）」の札が増え、横向きの低い画面で題名が帯に掛かった */
.card .t{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 auto}
.card .d{font-size:13px;line-height:1.6;color:var(--mute);flex:0 0 auto}   /* 2026-10-04: 説明文をやめ、札の下は事実の 1 行（発売日・トラック数）。伸ばして薄れさせる作りは外した */
.card .tags{display:flex;flex-wrap:wrap;gap:5px;font-size:12.5px;min-height:1.92em;max-height:1.92em;overflow:hidden;flex:0 0 auto}
.card .tags i{font-style:normal;font-size:1em;background:var(--ac2);color:var(--ac);border-radius:6px;padding:2px 10px;white-space:nowrap}
.card .tags i.hit{box-shadow:inset 0 0 0 1px var(--ac)}
.card .tags i:not(.hit){color:var(--fg)}
/* 再点検1 残り: 年齢の区分の印（作品ページの購入の下・癒し・眠りの札の成人向け）。琥珀の枠 1 色 */
.agek{display:inline-block;border:1px solid var(--ac);color:var(--fg);border-radius:4px;padding:0 6px;margin-right:6px;font-size:13px;line-height:20px;font-style:normal;font-weight:700;vertical-align:1px}
.card .tags i.agek{background:none;box-shadow:inset 0 0 0 1px var(--ac);border:0;margin:0;line-height:inherit;font-size:1em;padding:2px 10px}
.card .m{color:var(--mute);font-size:12.5px;font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;flex:0 0 auto}
.card .m .mk{overflow:hidden;text-overflow:ellipsis;min-width:0}
.card .m .st{margin-left:auto;font-size:12px;flex:0 0 auto;color:var(--ac)}
.card.loading .eq i{background:var(--mute);animation:none!important}

/* 波形（再生中に動く） */
.eq{display:flex;align-items:flex-end;gap:2.5px;height:16px;flex:0 0 auto}
.eq i{width:3px;background:var(--ac);border-radius:2px;height:30%;opacity:.85}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.1s}.eq i:nth-child(3){animation-delay:.22s}.eq i:nth-child(4){animation-delay:.34s}
.eq i:nth-child(5){animation-delay:.46s}.eq i:nth-child(6){animation-delay:.16s}.eq i:nth-child(7){animation-delay:.28s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

/* 払ったときの判定（札全面） */
.veil{position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;display:grid;place-items:center;
 transition:opacity .08s linear;will-change:opacity;z-index:3}
.veil .in{display:flex;flex-direction:column;align-items:center;gap:10px;transform:scale(.7);transition:transform .12s ease-out}
.veil svg{width:84px;height:84px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.veil span{font:900 26px/1 -apple-system,sans-serif;letter-spacing:.06em;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.veil.v-yes{background:color-mix(in srgb,var(--yes) 30%,transparent);color:#eafff4}
.veil.v-no{background:color-mix(in srgb,var(--no) 30%,transparent);color:#fff0f1}
.veil.v-fav{background:color-mix(in srgb,var(--fav) 30%,transparent);color:#fff8e3}
.card .glow{position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;transition:opacity .1s;z-index:4}
.card .glow.g-yes{box-shadow:inset 0 0 0 4px var(--yes)}
.card .glow.g-no{box-shadow:inset 0 0 0 4px var(--no)}
.card .glow.g-fav{box-shadow:inset 0 0 0 4px var(--fav)}

/* ---- 操作ボタン ---- */
.ctl{display:flex;justify-content:center;align-items:center;gap:20px;max-width:440px;margin:14px auto 4px;padding:0 14px}
.ctl button{border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0;
 box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .16s,box-shadow .16s,border-color .16s}
.ctl button:active{transform:scale(.92)}
.ctl .no{width:62px;height:62px;color:var(--no)}.ctl .yes{width:62px;height:62px;color:var(--yes)}
.ctl .fav{width:50px;height:50px;color:var(--fav)}
.ctl button svg{width:28px;height:28px}.ctl .fav svg{width:22px;height:22px}
body.result #ctl{display:none}
.ctl2{display:flex;justify-content:center;align-items:center;gap:8px;max-width:440px;margin:10px auto 0;padding:0 14px;flex-wrap:wrap}
.ctl2 button{min-height:44px;min-width:44px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:0 14px;font-size:13.5px;font-weight:700;cursor:pointer;
 display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,border-color .15s}
.ctl2 button:active{transform:scale(.95)}
.ctl2 button svg{width:18px;height:18px;flex:0 0 auto}
.ctl2 button small{font-weight:600;color:var(--mute);font-size:12px}
.ctl2 button[disabled]{opacity:.4;cursor:default}
.ctl2 .qbtn.pop{animation:rise .45s both}
.ctl2 .qbtn{border-color:var(--ac);color:var(--ac)}
.ctl2 .icon{padding:0;width:44px}
/* 下段のアイコンに見える文字（束4 #46）。高さは 44px のまま（縦に伸ばさない） */
.ctl2 .icon.lab{width:auto;min-width:56px;flex-direction:column;gap:1px;padding:2px 8px}
.ctl2 .icon.lab span{font-size:12.5px;font-weight:600;line-height:1.15;color:inherit}
#skip2{order:1}   /* 軽度 束2: DOM も その他 → 飛ばす の順にして Tab を見た目に揃えた（order は残しても同じ）。再点検1: 〔飛ばす〕は下段の最後に（入り切らない幅で折れるのは〔飛ばす〕だけにし、〔戻す〕〔その他〕を画面の中に残す） */
@media (max-width:299px){#skip2{display:none}}   /* 4 つが 1 行に入らない幅は その他 の中の〔このカードを飛ばす〕だけ */
.subctl{text-align:center;margin:8px 0 0}

/* ---- メニュー・確認（ネイティブの confirm を使わない） ---- */
.scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.35)}
.menu{position:fixed;left:50%;bottom:calc(16px + var(--sab));translate:-50% 0;z-index:30;width:min(92vw,320px);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px;
 box-shadow:var(--sh);display:flex;flex-direction:column;animation:rise .22s cubic-bezier(.2,.9,.3,1) both;
 max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - var(--sab));overflow-y:auto;overscroll-behavior:contain}   /* 低い横向き（568×320・667×295）で紙の上が画面の外に切れていた（2周目 束4 の残り） */
.menu>button,.menu>a{min-height:48px;display:flex;align-items:center;gap:12px;padding:0 14px;background:none;border:0;color:var(--fg);font-size:15px;text-align:left;text-decoration:none;border-radius:6px;cursor:pointer;font-weight:600}
.menu svg{width:20px;height:20px;color:var(--mute);flex:0 0 auto}
.sheet{width:min(96vw,520px);max-height:78dvh;overflow:auto;padding:14px 12px 12px;gap:6px}
.sheet .sh{display:flex;align-items:baseline;gap:8px;padding:0 4px}.sheet .sh b{font-size:17px}
.sheet .chips{justify-content:flex-start}
.sheet .shrow{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:6px;position:sticky;bottom:-12px;margin-bottom:-12px;padding:6px 0 12px;background:var(--card);z-index:1}
.confirm p{margin:12px 14px 6px;font-weight:700;font-size:15px}
.stage .stall{position:absolute;inset:0 14px;display:grid;place-items:center;text-align:center;padding:24px;border:1px solid var(--line);border-radius:10px;color:var(--mute);font-size:15px;line-height:1.6;white-space:pre-line}
body.waitcards .ctl button{opacity:.45}
.tiles .tilerr{grid-column:1/-1;text-align:center;padding:24px 8px}
.shrow .btn[disabled]{opacity:.45;cursor:default}
.confirm p.hint{margin:0 14px 8px;font-weight:500;font-size:13.5px;line-height:1.55;white-space:pre-line}
.confirm .row{display:flex;gap:8px;padding:4px 6px 6px}
.confirm .row button{flex:1;justify-content:center;border:1px solid var(--line)}
.confirm .row .btn{border:0;min-height:48px;padding:0 16px}
.confirm .row button:not(.btn){min-height:48px;padding:0 12px;border-radius:8px;background:var(--card);color:var(--fg);font:inherit;font-size:15px;font-weight:700;cursor:pointer}

/* ---- 18禁の扉 ---- */

/* ---- 説明 ---- */
#coach{position:fixed;inset:0;z-index:50;background:rgba(12,10,8,.9);display:grid;place-items:center;color:#fff;padding:16px}
#coach .cin{width:min(94vw,360px);text-align:center;animation:rise .45s cubic-bezier(.2,.9,.3,1) both}
#coach svg.dia{width:100%;height:auto;max-height:58vh;max-height:58dvh;display:block}
#coach .hand{animation:sw 2.4s ease-in-out infinite}
@keyframes sw{0%,10%{transform:translate(0,0)}28%{transform:translate(72px,0)}46%{transform:translate(0,0)}64%{transform:translate(-72px,0)}82%,100%{transform:translate(0,0)}}

/* ---- 結果 ---- */
.hero{position:relative;border-radius:8px;padding:8px 12px;background:var(--ac2);border:1px solid var(--line);box-shadow:none;overflow:hidden}
.hero .st1{position:relative;z-index:1;font-size:14px;color:var(--fg)}
.hero .sr{margin-top:4px;flex-wrap:wrap}
.hero .sr .gonote{flex:1 1 9em;min-width:0;color:var(--mute);font-size:12.5px;line-height:1.35}   /* 束3: 〔続ける〕の横（同じ行の 44px の中に 2 行で収め、おすすめを下げない。下の行に置くと 390 幅で 1 画面目のおすすめが 2→0 件） */
#mh1{margin:0 0 8px}
/* 結果画面の見出しは詰める（h1 を足した分、最初の画面のおすすめが減らないように・束2 #49） */
#recw h2{margin:14px 0 8px}
#recw .sortc{margin:0 0 6px}   /* 並べ替えのボタンを 44px にした分（束6 #55）を詰める: 最初の画面のおすすめの数を変えない */
.emptymsg{margin:2px 0 10px;font-size:15px;line-height:1.6;color:var(--fg)}
.ahint{margin:-4px 0 8px}
.hero::after{content:none}
.hero .sr{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.hero .st2{position:relative;z-index:1;margin-top:6px;font-size:13.5px;color:var(--mute)}
.hero .st2 .vav{display:block;margin-top:4px}
.hero .st2 .stg{color:var(--fg)}
.hero .st2 .nw{white-space:nowrap}   /* 印の文を語の途中で折らない（PC 1280 で「全年齢を先／に並べています」と折れていた・束1 の残り） */
.qpill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--ac);color:var(--ac);font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap;background:color-mix(in srgb,var(--card) 70%,transparent)}
.qpill svg{width:16px;height:16px}
.qpill.go{background:var(--ac);color:var(--onac);border:0}.qpill small{font-weight:600;opacity:.85}
.hero .big{font:600 34px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ac)}
.hero .lbl{font:700 12px/1 -apple-system,sans-serif;letter-spacing:.16em;color:var(--mute);text-transform:none;margin-bottom:6px}
.hero .type{font-size:19px;font-weight:800;margin-top:10px}
.hero .stg{font-weight:700;margin-top:4px}
.axis{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:12px 0 6px;background:var(--line)}
.axis i,.axis em{display:block;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.axis i{background:var(--ac)}
.axis em{background:var(--trk)}
.axl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute)}
.pct{font:800 14px/1 -apple-system,sans-serif;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcb{height:4px;border-radius:6px;background:var(--line);margin-top:5px;overflow:hidden}
.pcb i{display:block;height:100%;background:var(--ac);width:0;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.buy{font-size:12.5px;font-weight:700;background:none;color:var(--ac);border:1px solid var(--ac);min-height:44px;padding:0 13px;border-radius:6px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
 box-shadow:none}
.buy svg{width:15px;height:15px}

body.app .toast{top:calc(var(--sat) + 70px);bottom:auto}
/* 軽度の束1（知らせ）: 折り返す知らせは切らない（前は overflow:hidden と ellipsis が残り「戻す」…で切れた）。width:max-content で left:50% の縮み（画面の半分の幅で 4〜6 行）を止める。
   札の画面では toastPlace が札の文字の欄の下端に置く（前は上端 70px で表紙と (i) に重なった） */
/* 軽度の束1b: 札の文字の欄に置いた 1 行の知らせ（.placed）も折り返して切らない（横向きは欄の幅 約 170px で「1つ戻しました: …」の作品名が「…」で消えた）。表示の長さは toast() が文字数で 1.8〜3.2 秒にする */
.toast.placed{white-space:normal;text-align:center;line-height:1.5;overflow:visible;text-overflow:clip}
.toast.nar{padding:7px 10px;font-size:12.5px;line-height:1.45}   /* 残り16件 #1: 横向きで文字の欄が 170px 前後の時は余白と字を詰める（☆ の知らせが 156px 幅で 6 行だった） */
/* 結果画面の案 A/B/C（/match/?v=a|b|c・2026-09-25 利用者像の検査用） */
.recw[hidden]{display:none}
.fdel{position:absolute;top:6px;right:6px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(12,10,8,.62);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 14px;color:var(--mute);font-size:13px}
h2 .lnk{letter-spacing:0;text-transform:none;font-size:12.5px;margin-left:8px}
.qpill[hidden]{display:none}
.axis[hidden],.axl[hidden]{display:none}
.wk .why .ser{color:var(--mute)}
.seg{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--card);margin:18px 0 4px}
.seg button{flex:1;min-height:44px;border:0;border-radius:6px;background:none;color:var(--mute);font-weight:800;font-size:14px;cursor:pointer}
.seg button.on{background:var(--ac);color:var(--onac)}
.sortc{display:flex;gap:6px;overflow-x:auto;margin:6px 0 12px;padding-bottom:2px;scrollbar-width:none}
.sortc button{flex:none;min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--trk);background:none;color:var(--fg);font-size:13px;font-weight:700;cursor:pointer}
.leanhint{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 6px;font-size:13.5px;color:var(--mute)}
.sortc button.sug{border-color:var(--ac);border-style:dashed;color:var(--ac)}   /* 軽度の束1: 案内（.leanhint の文）が指すジャンル順のボタン */
.sortc button.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 30%,transparent);box-shadow:inset 0 0 0 1px var(--ac);color:var(--fg)}   /* 残り16件 #3: 選択中は塗り＋2px の実線・案内は破線の枠だけ（暗いテーマで見分けにくかった） */
.wk .why{padding:0 8px 2px;display:flex;flex-direction:column;gap:2px}
.wk .why span{font-size:13px;line-height:1.35;color:var(--fg);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wk .why span.tg{color:var(--mute)}
.wk .why span.gn{color:var(--mute);border-left:2px solid var(--line);padding-left:6px}   /* 再点検1: 理由でない「この作品: …」「サークル: …」は左の線で理由と分ける */
.astripw{position:relative}
.astrip{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.astrip::-webkit-scrollbar{display:none}
.astrip{padding-top:4px;padding-bottom:6px}   /* 上はフォーカスの枠の分（束6 #55）・下を 2px 詰めて高さは同じ */
.sortc button:focus-visible,.astrip a:focus-visible{outline-offset:-2px}
.astripw.end .astrip,.astripw.one .astrip{-webkit-mask-image:none;mask-image:none}
.apos{position:relative;height:3px;margin:2px 0 0;background:var(--line);border-radius:2px;overflow:hidden}
.astripw.one .apos{display:none}
.apos i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--ac);border-radius:2px;transition:left .1s linear}
.astrip .ac{flex:none;width:132px;scroll-snap-align:start;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:6px;position:relative}
.astrip .ac a{color:inherit;text-decoration:none;font-weight:800;font-size:14px;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.astrip .ac small{color:var(--mute);font-weight:600;font-size:12px}
.astrip .ac .pct{font-size:12px;color:var(--fg)}
/* 声優の横並びの札: 名前の下に「近さ ▶」を 1 行で（札の高さを詰める） */
.astrip .ac{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:2px;align-items:center}
.astrip .ac a{grid-column:1/-1}
.astrip .ac .pct{grid-column:1}
.astrip .ac .pbtn{grid-column:2;grid-row:2}
/* 近さの言葉は ▶ の横の狭い列（132px の札で 60px）に入るので、折り返しを許し、区切りは語の切れ目（<wbr>）だけにする。
   .pct の nowrap のままだと「いちばん近い」（72px）が ▶ の下に潜っていた（束2 の後退・B2-V1） */
.astrip .ac .pct{min-width:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.3}
/* 声の割合の試し（/match/?tune=1・運営者が比べる用 2026-09-25） */
.tune{margin-top:10px;padding:8px 10px;border:1px dashed var(--trk);border-radius:6px;font-size:13px}
.tune[hidden]{display:none}
.tune .tl{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--mute)}
.tune .tl b{color:var(--fg)}
.tune input[type=range]{width:100%;height:44px;accent-color:var(--ac3)}
/* 苦手が続いたときの誘い（2026-09-25）。押せる帯なので toast と分ける。動きは出るときだけ（待たせない） */
/* 札の画面の帯（苦手が続いた誘い・保存できない設定・見本が読めない）は #bands に縦に積み、札の文字の下端（説明文の上）に重ねる。
   上の枠（枚数・〔結果を見る〕）・表紙と再生位置・(i)・操作列には掛けない。位置は placeBands()（束4 #45・B4V-2） */
/* 重なり順（B4V-2-z）: 札より上・上の枠（sticky 20）より下・幕とその他／確認／好きな言葉の紙（29〜30）より下。紙が開いている間は幕の下に隠れて押せない */
.bands{position:absolute;left:0;top:0;width:0;z-index:19;display:flex;flex-direction:column;gap:6px;pointer-events:none;overscroll-behavior:contain}
.bands>*{pointer-events:auto;flex:0 0 auto}
.bands>.errband{position:static;left:auto;right:auto;top:auto;width:auto;translate:none}
.nudge{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
 background:var(--card);border:1px solid var(--trk);border-radius:8px;padding:6px 4px 6px 10px;font-size:13.5px;line-height:1.4;box-shadow:var(--sh);animation:rise .25s ease}
.nudge[hidden],.nudge .btn[hidden]{display:none}   /* 再点検2: 誘いの〔近い声の声優を見る〕（a.btn）が hidden でも .btn の display で空のまま出て帯が伸びた */
.nudge>span{flex:1 1 4.5em;min-width:4.5em}
.nudge .btn{min-height:44px;padding:0 10px;font-size:14px;white-space:nowrap;gap:0}
/* 文字の欄が狭い（横向きの札・250px 未満）: 1 行目に文と ×、2 行目に〔好きな言葉を選ぶ〕を幅いっぱい（placeBands が .narrow を付ける） */
.bands.narrow .nudge .x{order:1}.bands.narrow .nudge .btn{order:2;flex:1 1 100%;min-width:0;white-space:normal;line-height:1.3}
.bands.narrow .nudge>span{word-break:keep-all;overflow-wrap:anywhere}
/* 狭い帯の知らせ（見本エラー・保存できない）: × を右上に置き、文は × の下まで回り込ませて低くする（88px 幅の 7 行 → 146px 幅） */
.bands.narrow>.errband{display:block;position:relative;padding:8px 8px 8px 12px}
.bands.narrow>.errband span{display:block}.bands.narrow>.errband span::before{content:'';float:right;width:34px;height:30px}
.bands.narrow>.errband button{position:absolute;top:0;right:0}
.nudge .x{min-width:44px;min-height:44px;border:0;background:none;color:var(--mute);font-size:20px;cursor:pointer}
/* 3周目 R5: 誘いの × は 1 行目の右上（320 幅で × だけが 2 行目に落ち、帯が 44px 高くなって再生位置の棒に掛かった）。狭い帯（.narrow）は今までどおり */
.bands:not(.narrow) .nudge{position:relative;padding-right:52px}
.nudge>span{word-break:keep-all;overflow-wrap:anywhere}   /* 「苦手が／続いています」の <wbr> の所で折る（PC の帯で「す」だけが 2 行目に落ちた） */
.bands:not(.narrow) .nudge .x{position:absolute;top:6px;right:4px}
/* 詰めた形（placeBands が入り切らない時だけ付ける）: 間 4px・上下の余白 2px・保存されませんは短い文（長い文は最初の 1 回は読み上げ済み） */
.bands.tight{gap:4px}
.bands.tight>.errband,.bands.tight .nudge{padding-top:2px;padding-bottom:2px}
.bands.tight:not(.narrow) .nudge .x{top:2px}
#nostore .sh{display:none}
.bands.tight #nostore .lg{display:none}
.bands.tight #nostore .sh{display:inline}
/* お気に入りの ☆（どのカードにも・束2 #28）。表紙の右上。外れている時は白の輪郭、付いている時は琥珀で塗り */
.wk>.favb{position:absolute;top:6px;right:6px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(12,10,8,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.favb svg{width:20px;height:20px}
.favb svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.favb[aria-pressed=true] svg path{fill:currentColor}
.wk>.favb[aria-pressed=true]{color:#e3a03c}
.favb.wide{width:auto;height:auto;min-height:44px;padding:0 13px;border:1px solid var(--ac);border-radius:6px;background:none;color:var(--ac);font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.favb.wide[aria-pressed=true]{background:var(--ac2)}
.favnote{position:fixed;left:12px;right:12px;top:calc(var(--sat) + 64px);z-index:42;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--trk);border-radius:8px;padding:0 4px 0 14px;font-size:13.5px;color:var(--fg)}
.favnote[hidden]{display:none}
.favnote span{flex:1}
.favnote a,.favnote button{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;border:0;background:none;color:var(--fg);font-weight:700;font-size:13.5px;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;cursor:pointer}
@media (min-width:720px){.favnote{left:50%;right:auto;width:420px;translate:-50% 0}}
/* 同じシリーズ・声優・サークルの束（隠さず畳む・束2 #9） */
/* 名前は省略せず折り返す（2周目の手直し: 360〜768 幅でサークル名が 0px・声優名が「秋…」・▾ が枠の外だった）。名前・（サークル）・ほか N 作品 ▾ を 1 つずつの塊にして、入らなければ次の行へ。
   塊の中は語の途中で折らない（keep-all）が、1 行に入らない長さなら折る（anywhere） */
.foldb{display:flex;flex-wrap:wrap;align-items:center;align-content:center;column-gap:4px;row-gap:0;width:calc(100% - 16px);min-height:44px;margin:0 8px 8px;padding:5px 10px;border:1px solid var(--trk);border-radius:6px;background:none;color:var(--fg);text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;font-size:12.5px;line-height:1.35;font-weight:700;cursor:pointer;text-align:left}
.foldb .fn{min-width:0;overflow-wrap:anywhere}
.foldb .fc{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.foldall{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px;border:1px solid var(--trk);border-radius:8px;background:var(--card);color:var(--fg);font-weight:700;font-size:13.5px;text-align:center;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}
.backres{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;font-weight:700;font-size:14px}

/* ---- 受け皿ページ（トップ・作品・声優・検索） ---- */
.site{max-width:1000px;margin:0 auto;padding:16px 14px 28px}
.site h1{font-size:22px}
.lead{font-size:15px;color:var(--mute);margin:0 0 6px}
/* ▶ は表紙（4:3）の右下。絶対配置の % の margin はカードの幅が基準なので 75% − (44+6)px（束2 #40） */
.wk>.pbtn{position:absolute;right:6px;top:0;bottom:auto;margin-top:calc(75% - 50px)}
.wk .rank{font:800 12.5px/26px -apple-system,sans-serif}
/* 一覧のカードの価格（2026-10-05）: 題名・声優の下に 1 行。セール中は 価格・割引率・元値。入り切らない幅（PC の 6 列・文字拡大）では元値が次の行へ折れる（切らない）。価格が無い作品は出さない */
.wk .pc{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;padding:0 8px 8px;margin-top:-6px;font-size:12.5px;line-height:1.4;color:var(--mute);font-variant-numeric:tabular-nums}
.wk .pc .pr{font-size:13px;font-weight:700;color:var(--fg)}
.wk .pc .pk{font-weight:700;color:var(--ac);white-space:nowrap}
.wk .pc .lp{white-space:nowrap}
.work{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:20px}
.work img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:contain;background:var(--ac2)}
.wcov{align-self:start;aspect-ratio:4/3;background:var(--ac2);border-radius:8px;overflow:hidden;position:relative}.wcov img{display:block}
/* 表紙を隠す（束6 #59 改め・既定オフ）: 画像は加工せず出さないだけ（visibility:hidden）。枠は --ac2 の無地。DMM の表紙はすべて dmm.co.jp から来る（札・結果・タイル・/w/・ドック） */
html.hidecov img[src*="dmm.co.jp"],html.hidecov .card .ph .cov{visibility:hidden;display:none}   /* 再点検1 の軽度・束3: 隠す間は表紙を取らない。loading=lazy の img は display:none の間は読み込まれない（札・下のバーの img も隠す時は lazy にする・/w/ の表紙はサーバが Cookie asmrmatch_hidecov=1 の時だけ lazy・既定は eager）。枠は .ph・.g・.wcov の 4:3 で残す */
html.hidecov .wk .ph{aspect-ratio:4/3}
html.hidecov .wk .ph::after{content:"表紙を隠しています";position:absolute;inset:0;display:grid;place-items:center;padding:4px 48px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--mute);pointer-events:none}   /* 残り16件 #8: 結果・新着・声優・お気に入りの作品カードにも（無地の箱に見えた） */
html.hidecov .tile .g{position:relative;overflow:hidden}
html.hidecov .tile .g::after{content:"表紙を隠しています";position:absolute;inset:0;display:grid;place-items:center;padding:4px 8px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--mute);pointer-events:none}   /* 束3: トップ・入口の札が読み込みに失敗した空箱と同じに見えていた */
html.hidecov .card .ph::after,html.hidecov .wcov:not(.show)::after{content:"表紙を隠しています";position:absolute;left:10px;top:10px;font-size:12.5px;color:var(--mute);pointer-events:none}
html.hidecov .wcov.show img{visibility:visible;display:block}
.covshow{display:none}
html.hidecov .wcov:not(.show) .covshow{display:inline-flex;position:absolute;left:50%;top:50%;translate:-50% -50%;min-height:44px;padding:0 16px;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}
.hidet svg{width:18px;height:18px;flex:0 0 auto;margin-right:6px}.hidet .ck{display:none}.hidet[aria-pressed="true"] .ck{display:inline}
.hidep{text-align:right;margin:6px 0 0}
.mfoot:not([hidden]){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 4px}   /* 残り16件 #11: 区切りの「・」を置かず余白で分ける（390 幅で「・」が行頭・行末にぶら下がった） */
.keepoff{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:12px 14px;margin:14px 0;font-size:13.5px;line-height:1.6}.keepoff p{margin:0}
.keepoff .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}.keepoff .btn{min-height:44px}.keepoff .kmsg{margin-top:6px;color:var(--fg)}.menu>.hidet svg{width:20px;height:20px;margin-right:0}
.meta{color:var(--mute);font-size:14px}.meta b{color:var(--fg)}
.meta a.mk{color:var(--fg);font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* 軽度 束2（押す場所）: 文の中のリンク（サークル名・説明の CV・表記の近い名前）は見た目を変えずに当たりを上下 14px・左右 8px 広げる（前は 31×17・56×22） */
.meta a.mk,.lnk.inl{display:inline-block;min-height:0;padding:0;margin:0;position:relative}
.meta a.mk::after,.lnk.inl::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:calc(100% + 16px);min-width:44px;height:calc(100% + 28px);min-height:44px}   /* 残り16件 #4: 当たりは疑似要素で広げ、フォーカスの枠は文字の周りだけ（前は padding で広げた枠が上下の行にかかった） */
.fk{display:inline-block;font-size:12px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:4px;padding:0 5px;line-height:1.5;margin-top:4px}
.desc{color:var(--mute);font-size:14px;white-space:pre-line}
.facts{margin:0;color:var(--mute);font-size:14px}.facts dt{font-weight:600;margin-top:6px}.facts dd{margin:0;overflow-wrap:anywhere}
.achips{display:flex;flex-wrap:wrap;gap:6px}
.achips a{display:inline-flex;align-items:center;min-height:44px;background:var(--ac2);color:var(--fg);border-radius:6px;padding:0 14px;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;font-size:14px;font-weight:600}
.achips a small{color:var(--mute);margin-left:4px;font-size:13px}
.nlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.nlist li{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);min-height:58px;
 animation:rise .45s cubic-bezier(.2,.9,.3,1) both}
.nlist a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit;min-height:44px}
.nlist li.empty{display:block;border-style:dashed;text-align:center;color:var(--mute);font-size:13.5px;padding:14px}
.nlist .n{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlist .n small{display:block;font-weight:500;color:var(--mute);font-size:13px;white-space:normal;line-height:1.35}   /* 残り16件 #2: 「5 作品・表記が近い名前」が 390 幅で切れた（… になった）→折り返す */
.nlist .n small.few{color:var(--fav)}
.nlist .bar{width:64px;flex:0 0 auto}
.nlist .pct{font-size:13.5px;min-width:5em;text-align:right}   /* 軽度の束1: 「とても近い」(5 字) の行だけ棒が左へずれた（52px では 68px の語が押す）。5 字分を取って棒の位置を揃える */
.nlist .bar.few i{background:var(--mute)}   /* 根拠が薄い行の棒は薄い色（言葉と同じ段に縮めた棒） */
/* ---- 見本音声の共通部品（札・カード・一覧・作品/声優ページ・結果で同じ物を使う） ---- */
.pbtn{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--onac);
 background:var(--ac);box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .15s}
.pbtn svg{width:20px;height:20px}
.pbtn:active{transform:scale(.92)}
.pbtn.sm{width:44px;height:44px}.pbtn.sm svg{width:18px;height:18px}
.pbtn.ghost{background:var(--ac2);color:var(--ac);box-shadow:none;border:1px solid var(--line)}
.pbtn.wide{width:auto;min-height:50px;height:auto;padding:0 22px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:.02em}
.pbtn.wide svg{width:18px;height:18px}
.pbtn.wide small{font-size:12.5px;font-weight:600;opacity:.85}
.pbtn.on{background:var(--ac)}
.pbtn.ghost.on{background:var(--ac);color:var(--onac);border-color:var(--ac)}
.pbtn.load{opacity:.6}
.seek{display:flex;align-items:center;height:22px;cursor:pointer;touch-action:none;flex:1;min-width:60px;position:relative}
.seek::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.seek .bar{position:relative;flex:1;height:5px;border-radius:6px;background:var(--line);box-shadow:inset 0 0 0 1px var(--trk)}
.seek .bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--ac)}
.seek .bar b{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;translate:-50% -50%;box-shadow:0 2px 6px rgba(0,0,0,.45);opacity:0;transition:opacity .15s}
.seek:active .bar b,.seek.on .bar b,.seek:focus-visible .bar b{opacity:1}
.seek .bar u{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;translate:-1px 0;background:var(--mute);pointer-events:none}
.time{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.tracks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.tracks li{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);min-height:56px}
.tracks li.on{border-color:var(--ac);background:var(--ac2)}
.tracks .n{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracks .n small{display:block;font-weight:500;color:var(--mute);font-size:12px}

/* 画面下の再生装置（全ページ共通・1 つだけ） */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:8px 12px calc(8px + var(--sab));
 background:color-mix(in srgb,var(--card) 92%,transparent);border-top:1px solid var(--line);
 box-shadow:0 -10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:4px;animation:dockin .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes dockin{from{transform:translateY(100%)}}
body.app .dock{display:none}
body.hasdock{padding-bottom:calc(var(--dockh,116px) + var(--sab))}
html{scroll-padding-top:64px;scroll-padding-bottom:calc(var(--dockh,0px) + var(--sbh,0px))}   /* 再点検2: 設定画面の下に貼り付いた〔聴きはじめる〕の帯（--sbh）の下にフォーカスを隠さない */
.dock .row{display:flex;align-items:center;gap:6px}
.dock .cov{width:44px;height:44px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--ac2);display:block}
.dock .cov img{width:100%;height:100%;object-fit:contain;display:block}
.dock .cov img[src=""],.dock .cov img:not([src]){visibility:hidden}   /* 表紙の無い間（読み込み中・読めなかった）は壊れた画像の印を出さない */
.dock.pend .seek{visibility:hidden}   /* 別の作品を取りに行く間・読めなかった後は、前の見本の再生位置を出さない（+10 も押せない） */
.dock .tt{flex:1;min-width:0;padding:0 2px}
.dock .tt .n{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;display:block}
.dock .tt .k{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .ic{width:44px;height:44px;flex:0 0 auto;border:0;background:none;color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0;border-radius:10px}
.dock .ic svg{width:20px;height:20px}
.dock .ic[disabled]{opacity:.3;cursor:default}
.dock .ic.x{width:44px;color:var(--mute)}.dock .ic.x svg{width:16px;height:16px}
.dock .ic.cart{width:44px;color:var(--ac)}
#dclose{margin-left:8px}
/* 題名のリンクは下の行（声優・見本名）まで 44px の的にする（下の行は押しても題名のリンク） */
.dock .tt .n{padding:4px 0 18px;margin:-4px 0 -18px}.dock .tt .k{position:relative;pointer-events:none}
.dock .ic.t10{width:44px;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.dock .tt .k b{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.dock .seek{margin-left:4px}
.dock .msg{font-size:13px;color:var(--fav);padding:0 2px}
/* 再点検1: 移ってきたページで止まっている続き（primed）は 1 段の小さな帯に（前は 2 段 109〜139px で、短い画面・拡大表示の作品ページで〔見本を聴く〕と題名を隠した）。
   鳴らすと（▶・ほかの ▶）2 段に戻す。▶・表紙・題名・✕ だけ残す */
.dock.mini{flex-direction:row;align-items:center;gap:6px;padding-top:0;padding-bottom:var(--sab)}
.dock.mini>.row{display:contents}
.dock.mini #dprev,.dock.mini #dfwd,.dock.mini #dnext,.dock.mini .seek,.dock.mini #dbuy,.dock.mini>.msg{display:none}
.dock.mini #dplay{order:-1}
.search{display:flex;gap:8px;margin:10px 0;position:relative}
/* 入力補完（2026-10-04）: 検索欄の下に候補。押せる面は 44px・文字 12px 以上・色は印だけに頼らず「声優・サークル・作品」の語を添える */
.sugl{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);z-index:30;max-height:min(60vh,420px);overflow:auto}
.sugl a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:6px;color:var(--fg);text-decoration:none;font-size:15px}
.sugl .k{flex:0 0 auto;font-size:12px;color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:0 6px;line-height:20px}
.sugl .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugl .c{flex:0 0 auto;font-size:12.5px;color:var(--mute)}
.sugl li[aria-selected=true] a{background:var(--ac2)}
.sugl .none{padding:10px;font-size:13.5px;color:var(--mute)}
/* 共有ボタン（2026-10-04）: 作品・声優・結果。主役ではないので枠だけ（買う・聴くより弱く） */
.shb{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--fg);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.shb svg{width:18px;height:18px;flex:0 0 auto;color:var(--mute)}
.shrow{margin:8px 0 0}
.search input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:1px solid var(--trk);border-radius:6px;background:var(--card);color:var(--fg);font-size:16px}
.search button{min-height:46px;padding:0 18px;border:0;border-radius:6px;background:var(--ac);color:var(--onac);font-weight:700;cursor:pointer;font-size:15px}
.desc.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.site h1.wt{font-size:18px;line-height:1.45;margin:4px 0 8px}
.work .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.gen{display:flex;flex-wrap:wrap;gap:0;margin:8px 0 0;color:var(--mute);font-size:13px}.gen i{font-style:normal;color:var(--mute)}.gen i+i::before{content:"・"}

/* 3周目 R7: パンくずのリンクは切らない（文字 2〜3 倍・狭い幅で「作品」が切れて押せなかった）。入らなければ次の行へ、今のページの名前だけを省略する（4em 未満になるなら次の行で全幅） */

@media(max-width:600px){.work{grid-template-columns:1fr}.grid{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}}   /* 3周目 R10: 170 幅未満でも 1 列で入る（140px の列が 154px に押し広げた） */

/* ---- PC（広い画面）: スマホの見た目は変えず、横に並べる ---- */
@media(min-width:720px){
 .site .tiles{grid-template-columns:repeat(4,1fr)}
 .tracks{display:grid;grid-template-columns:repeat(2,1fr)}
 .nlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .dock>.row,.dock>.msg{width:100%;max-width:1000px;margin:0 auto}
 /* 結果画面はどの幅でも 1 列（束2 #23。900px 以上の左右 2 列でおすすめが狭い左列に入っていた） */
 .wrap.mwide{max-width:880px}
 #recworks,#favs,#seen{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
 .hero:not(.zero){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
 .hero:not(.zero)>*{grid-column:1/-1}
 .hero:not(.zero)>.st1,.hero:not(.zero)>.st2{grid-column:1}
 .hero:not(.zero)>.sr{grid-column:2;grid-row:1/span 2;margin:0}
 .hero:not(.zero) .sr .gonote{display:none}   /* 束3: 広い画面は〔続ける〕が要約の右の列なので、横に足すと要約の列が狭まり 744・841 幅でおすすめが 23〜67px 下がった。通信の目安はスマホ幅だけ */
 /* 声優 5 人が 1 行に入るので、送る表示（右端の薄れ・位置の帯）は出さない */
 .astrip{-webkit-mask-image:none;mask-image:none}
 .apos{display:none}
 .astrip .ac{flex:1 1 0;width:auto;min-width:0;grid-template-columns:auto minmax(0,1fr);column-gap:8px;padding:6px 8px}
 .astrip .ac .pbtn{grid-row:1/span 2;grid-column:1}
 .astrip .ac a,.astrip .ac .pct{grid-column:2;min-width:0}
 .astrip .ac a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media(min-width:900px){
 .wrap.mwide{max-width:1040px}
 #recworks,#favs,#seen{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ---- 小さい縦画面（320×568 など）: 表紙を少し浅く・題名 1 行で、分・円の行まで札に収める ---- */
/* ---- タブレット縦（768×1024〜1024×1366・再点検1 の軽度・束3）: 幅 440・高さ 620 の上限で 810×1080 の札が画面幅の 51%・下に 258px の空きだった。幅 600・高さの上限 900 に（文字の欄は表紙の下のまま） ---- */
@media (orientation:portrait) and (min-width:740px) and (min-height:960px){
 .stage{max-width:600px;height:clamp(320px,calc(100vh - 172.5px - 3.3em),900px);height:clamp(320px,calc(100dvh - 172.5px - 3.3em - var(--sab)),900px)}
 .meterbar,.quizbar,.ctl,.ctl2{max-width:600px}
 .card .a{font-size:21px}.card .a.dim,.card .a.cvd{font-size:17px}.card .t{font-size:16.5px}.card .d{font-size:15px}.card .tags{font-size:14px}   /* 札が高くなった分、文字の欄の下が空かないように文字も一回り大きく（表紙は 4:3 のまま） */
}
@media (orientation:portrait) and (min-width:1000px) and (min-height:1300px){   /* 1024×1366: 600 幅では画面幅の 56%・下に約 250px 空くので 720・上限 1060 に */
 .stage{max-width:720px;height:clamp(320px,calc(100vh - 172.5px - 3.3em),1060px);height:clamp(320px,calc(100dvh - 172.5px - 3.3em - var(--sab)),1060px)}
 .meterbar,.quizbar,.ctl,.ctl2{max-width:720px}
 .card .a{font-size:23px}.card .a.dim,.card .a.cvd{font-size:18px}.card .t{font-size:18px}.card .d{font-size:18px;line-height:1.75}.card .tags{font-size:15px}   /* 残り16件 #6: 札が 1060px まで高くなる 1024×1366 は説明の下が 164px 空いたので文字をもう一回り大きく */
}
@media (orientation:portrait) and (max-height:600px){
 .card .ph{aspect-ratio:16/10}
 .card .t{-webkit-line-clamp:1}
 .card .b{padding:8px 12px 9px;gap:5px}
}
/* 札の高さで除く分（上の帯・判定の丸・〔戻す〕の列）は 222px のうち 49.5px が文字に比例する（3.3em＝1 倍で 49.5px）。文字だけ 2 倍の 390×844 で〔戻す〕〔その他〕の下端が 871 だった（#54-text） */
/* ---- 低い縦画面（拡大表示 175〜200% の 195×376 など・束6 #54）: 札の下限 320px では判定ボタンが画面外（下端 406〜522）だった。高さ 560 以下だけ下限を 150px に ---- */
@media (orientation:portrait) and (max-height:560px){
 .stage{height:clamp(150px,calc(100vh - 172.5px - 3.3em),620px);height:clamp(150px,calc(100dvh - 172.5px - 3.3em - var(--sab)),620px)}
}
@media (orientation:portrait) and (max-height:480px){
 .card .ph{aspect-ratio:2/1}
 .meterbar{padding:calc(4px + var(--sat)) 12px 4px}
 .ctl{margin:6px auto 2px}
 .ctl .no,.ctl .yes{width:54px;height:54px}
 .mtxt .a,.mtxt .b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* ---- スマホ横向き（低い画面）: 札を左・操作を右に。入口タイルは 4 列。PC の 150% 拡大（853×533）も入る高さ 600 まで（束6 #54） ---- */
@media (orientation:landscape) and (max-height:600px){
 .tiles{grid-template-columns:repeat(4,1fr)}
 body.app #app{display:grid;grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:auto minmax(0,1fr) auto;column-gap:12px;height:100dvh;padding:0 12px calc(6px + var(--sab));box-sizing:border-box}
 body.app .meterbar,body.app .quizbar{grid-column:1/-1;max-width:none;padding-left:0;padding-right:0}
 body.app .stage{grid-column:1;grid-row:2/4;height:auto;min-height:0;max-width:none;margin:0 0 6px;padding:0}
 body.app .card{inset:0;flex-direction:row}
 /* 表紙は 4:3 のままでは 568〜740 幅で文字の欄が 24〜123px になる（B4V-2-landscape）。文字の欄に 172px を残し、足りない分は表紙を縮めて全体を見せる（object-fit:contain・2026-10-02 運営者「推奨で」: 規約は拡大・縮小のみなので切らない）。表紙は札の 45% より細くしない（それより狭い札は帯を札の全幅に置く） */
 body.app .card .ph{height:100%;width:auto;aspect-ratio:4/3;flex:0 0 auto;max-width:calc(100% - 172px)}
 body.app .card .b{padding:10px 12px}
 body.app .ctl{grid-column:2;grid-row:2;flex-direction:column;justify-content:center;gap:12px;margin:0;padding:0;max-width:none}
 body.app .ctl2{grid-column:2;grid-row:3;margin:0 0 4px;padding:0;flex-wrap:wrap;gap:6px;max-width:none}
 body.app #skip2{display:none}   /* 再点検1: 横向きの低い画面の右の欄（200px）には下段 4 つが 1 行に入らない。〔飛ばす〕は その他 の中に残る */
 body.app #warn{grid-column:1/-1;margin:0}
 #coach svg.dia{max-height:66dvh}
 .menu:not(.sheet):not(.confirm){display:grid;grid-template-columns:1fr 1fr;column-gap:4px;width:min(92vw,560px)}   /* 横向きの低い画面は その他 を 2 列（〔表紙を隠す〕で 8 項目になり 844×390 でも 1 列では画面に入らない・2周目） */
}
/* 再点検2 手直し: 横向きのとても低い画面（500×280 など）は文字の欄の上の余白と間を詰める。帯 2 本の下限（ボタン 1 段 44px）の上端が、名義のある札（声優欄 18px）の
   2 行の題名に 2px 掛かっていた（説明の CV の札 15px だけ直した前の手直しでは、どの札が上に来るかで検査が揺れた）。上 10→6px・間 6→4px で題名の下端＋4px が帯の上端に収まる */
@media (orientation:landscape) and (max-height:340px){
 body.app .card .b{padding:6px 12px 8px;gap:4px}
}
/* 表紙を札の 45% より細くしないのは幅 811 以下だけ（2周目 束4 の残り: 1600×450・1920×480 の PC の窓で表紙が 4:3 より広がり上下が 19〜29% 切れていた） */
@media (orientation:landscape) and (max-height:600px) and (max-width:811px){body.app .card .ph{min-width:45%}}
/* 横向きで幅 760px 未満（568×320・640×360・667×375・740×360 など）: 時刻を 1 行目・棒と +10 を 2 行目に（B4V-2-landscape）。
   630 未満は +10 が表紙の外へ切れるため。630〜759 は棒が 69〜169px に縮み、素早い位置合わせが払いに取られていた（2周目 束4 の残り）ので同じ 2 行に */
@media (orientation:landscape) and (max-height:600px) and (max-width:629px){body.app .card .pp .ppt{font-size:13px;padding:4px 6px}}   /* 表紙が 109〜158px（480〜568 幅）でも「読み込めません」7 字が 1 行に入る */
@media (orientation:landscape) and (max-height:600px) and (max-width:759px){
 body.app .card .pbar{flex-wrap:wrap;row-gap:0;padding-top:12px}
 body.app .card .pbar .tm{flex:0 0 100%}
}
/* ---- 狭い幅（拡大表示・束6 #54）。どれも 360〜412 幅の 100% では効かない ---- */
@media(max-width:339px){header .logo .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header .logo{min-width:44px;justify-content:center}}
@media(max-width:279px){header{padding-left:4px;padding-right:4px;gap:4px}header nav{gap:0}}   /* top5: 目の分、260〜279 でも余白を詰める */
@media(max-width:259px){header{padding-left:4px;padding-right:4px;gap:4px}header nav{gap:0}header nav a span{display:none}header nav a{padding:0}}
@media (max-height:480px){header{position:static}}
/* 文字だけ大きい時（Android の文字サイズ・ブラウザの既定の文字の大きさ。#54-text）: 上の px の規則は効かないので、ヘッダの幅をヘッダの文字の大きさ（em）で測る。
   要る幅は 固定の px（アイコン・余白）＋文字の倍率に比例する分 なので、「px の上限（2.5 倍の時の要る幅）かつ em（1 倍の時の要る幅）」で切ると 1〜2.5 倍で必ず足りる側に倒れる。
   数は 390 幅で測った要る幅（右の余白 10px まではみ出してよい＝1 倍の 370〜376 幅と同じ扱い）: 全部の文字 148+193f・現在地だけ 182+141f（スワイプ）／178+90f（現在地なし）・ロゴの文字なし 182+52f。
   2.5 倍を越える時は or の後の em だけの境目（要る幅 a+bf を 2.5 倍で割り戻した (a/2.5+b)/15、はみ出しなしで測った値）で同じ物を隠す。1 倍では px の @media が先に隠している幅にしか当たらない。
   top5（2026-10-03）: ヘッダーの目（〔表紙を隠す〕44px＋余白 12px）の分、4 つの境目を px で +56・em で +3.73（15px 基準・2.5 倍側は +1.5）。
   header と nav は折り返さない（R6-1: 折り返し可にすると 1 倍の 370〜376 幅でナビが右の余白に 1〜7px 入るだけで 2 段 101px に落ちた）。container query が無いブラウザは直す前と同じ */
@container hdr ((max-width:686px) and (max-width:26.43em)) or (max-width:18.6em){header nav a:not(.on) span{display:none}header nav a{padding:0 12px;min-width:44px;justify-content:center}}
@container hdr ((max-width:580px) and (max-width:24.7em)) or (max-width:15.8em){header:has(nav .on) .logo .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header:has(nav .on) .logo{min-width:44px;justify-content:center}}
@container hdr ((max-width:449px) and (max-width:20.93em)) or (max-width:12.3em){header:not(:has(nav .on)) .logo .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header:not(:has(nav .on)) .logo{min-width:44px;justify-content:center}}
@container hdr ((max-width:368px) and (max-width:19.28em)) or (max-width:10.1em){header nav a span{display:none}header nav a{padding:0}}
@media(max-width:244px){header{flex-wrap:wrap;justify-content:flex-end}header .eyeb{margin-left:auto}}   /* top5: 195 幅（200% 拡大）は 44px を 5 つ並べられない。44px を保ち、目だけ 2 段目の右へ（この高さでは header は貼り付かない） */
@media(max-width:319px){.nlist a{flex-wrap:wrap}.nlist .n{flex:1 1 100%}.nlist .bar{display:none}.nlist .pct{text-align:left;min-width:0}}
/* 文字だけ大きい時（#54-text）: 名前が 60px を割る幅は 行の中身 202px＋「とても近い」の 67.5px×倍率。1 倍の 18em と 2.5 倍の 371px の両方を下回ったら同じ折り返しに */
.nlist li{container:nl/inline-size}
@container nl (max-width:371px) and (max-width:18em){.nlist a{flex-wrap:wrap}.nlist .n{flex:1 1 100%}.nlist .bar{display:none}.nlist .pct{text-align:left;min-width:0}}
@media(max-width:359px){.dock .row+.row{flex-wrap:wrap;justify-content:center}.dock .seek{flex:1 0 100%;order:-1;margin:0 0 2px}}
@media(max-width:299px){.dock .cov{display:none}}
@media(max-width:229px){.ctl{gap:6px}.ctl .fav{width:44px;height:44px}.ctl2{gap:4px}.ctl2 .icon.lab{min-width:44px;padding:2px 4px}}   /* 195 幅: 判定の丸が楕円に潰れ、〔その他〕が 2 行目の画面外へ落ちていた */
.sortc{flex-wrap:wrap;overflow:visible}.sortc button{white-space:normal}
/* 文字の拡大×狭い幅で横に滑らない（2周目 束6 の残り）。1 倍の 320〜1280 幅では 1px も変わらない（入る時は今のまま・入らない時だけ折る）。
   直す前は 文字 2 倍の 249 幅以下で /search の声優チップ（ラテン文字の名前は切れ目が無い）・/match/ の並べ方と〔スワイプを続ける〕、
   文字 1.3〜2 倍の 200〜270 幅で /w/ の〔購入〕（nowrap）が表紙ごと列を押し広げ、/actors/?e= の入口の印（nowrap）、文字 3 倍の 230 幅以下でトップの .more と〔結果を見る〕、
   1 倍の 180〜183 幅（360 幅の 200%）でヘッダ（44px×4＋余白 8＋間 4＝184px）がはみ出していた。
   ・break-word は最小幅の計算に入らないので並びは変わらず、入らない語だけ折る
   ・見出しは行末の閉じ括弧を詰めない: Chrome は行末の「）」を半角に詰めて入れるが横の長さは詰める前で数え、文字 2 倍以上で h2 が 2〜8px 押し広げた（本文は 1 倍の折り返しが変わるので当てない） */
html{overflow-wrap:break-word}
/* 3周目 R6: 見出しの行末の「）」は詰めたまま（space-all をやめた: 1 倍でも題名の 0.6〜1.4% が 1 行増えた）。はみ出す半字（.5em）は見出しの右の余白で吸う。
   .site の左右は 14px 以上なので、.5em が 14px を超える分だけ（1 倍の見出しは 22px 以下で 0・文字 2 倍の h1 で 7px） */
h1,h2,h3{padding-inline-end:max(0px,.5em - 14px)}
.site{padding-left:max(14px,.5em);padding-right:max(14px,.5em)}   /* 本文の行末の「）」も同じく最大で半字はみ出す。左右の余白を半字以上に（1〜1.5 倍は 14px のまま・3 倍で 24px）。/w/ の「説明に CV …とあります）」が文字 3 倍の 260 幅で 6px 押し広げた */
.achips a,.newsw a{max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
.achips a{column-gap:4px}.newsw a{column-gap:6px}.achips a small,.newsw a small{margin-left:0}   /* 名前と作品数の間は margin でなく column-gap（1 行の時は同じ幅・折れた 2 行目が字下げされない） */
.sortc button{flex:0 1 auto;max-width:100%}
.qpill,.back a,.back button,.nudge .btn{white-space:normal;max-width:100%}
.nudge .btn{line-height:1.3}   /* 〔好きなジャンルを選ぶ〕: .narrow は px（帯 250px 未満）で決まるので、文字 2 倍の 320 幅では nowrap のまま帯を 14px 越えていた */
.work .acts>*{max-width:100%;flex-shrink:1;overflow-wrap:anywhere}
.work .acts .buy,.work .acts .pbtn.wide,.work .acts .favb.wide{white-space:normal}
.work .acts .buy{word-break:keep-all}   /* 「FANZA同人で<wbr>購入」: 折れる時は「で」の後で（「購／入」にしない） */
/* 3周目 R8: ボタンの文字は語の途中で折らない（「スワイプを続／ける」「見本を聴／く」「お気に入／り」「FANZA同／人で購入」）。区切りは <wbr> と空白だけ（phr()）、1 行に入らない語だけ折る */
.qpill,.pbtn.wide,.favb.wide,.buy,.seedgo,#qcont{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:600px){.work{grid-template-columns:minmax(0,1fr)}}
.nlist .pct{overflow-wrap:anywhere}
@container nl (max-width:371px) and (max-width:18em){.nlist .pct{white-space:normal}}
@media(max-width:319px){.nlist .pct{white-space:normal}}
/* 3周目 R10: 180 幅未満（360 幅の端末の 200% 超）はロゴと 3 つのリンク（44px×4）が 1 行に入らず、ページが 178px に押し広げられた。リンクを 2 行目へ（折る時だけ） */
@media (hover:hover){
.shb:hover{border-color:var(--ac)}
.sugl li a:hover{background:var(--ac2)}
 .ctl button:hover{transform:translateY(-3px) scale(1.05)}
 .ctl .no:hover{border-color:var(--no)}.ctl .yes:hover{border-color:var(--yes)}.ctl .fav:hover{border-color:var(--fav)}
 .ctl2 button:hover{border-color:var(--ac)}
 .menu>button:hover,.menu>a:hover{background:var(--ac2)}
 .list li:hover{transform:translateY(-2px)}
 .nlist li:hover{border-color:var(--ac)}
 .tile:hover{transform:translateY(-2px)}
 .pbtn:hover{transform:scale(1.06)}
 .tracks li:hover{border-color:var(--ac)}
 .dock .ic:hover{background:var(--ac2)}
 .buy:hover{background:var(--ac2)}   /* 束6 #59 2周目: 〔購入〕は枠線（琥珀の塗りは〔見本を聴く〕だけ）・乗せた時は再生バーのカート・ヘッダと同じ --ac2 */
}

/* ---- 2026-09-26 見た目の作り直し（AI にありがちな型を外す）: 数字は機材の等幅・残量計 ---- */
.big,.pbar .tm,.dock .tm,.rank,.tm,#fcount{font-family:var(--mono);font-variant-numeric:tabular-nums}
.big{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ac)!important;letter-spacing:.04em}