@font-face{font-family:'SZWordmark';src:url('/wordmark.woff2') format('woff2');
  font-display:swap;font-weight:700;unicode-range:U+6027,U+7656,U+56F3,U+9451}
/* **明るい紙が既定、暗い地は OS の設定に追従**（2026-08-25 第2回点検）。
   暗い暖色＋明朝は「書斎・酒場」の記号で「図鑑」（標本・紙）と逆方向だった。
   モノクロの表紙（索引の半分）が暗い地では白い矩形として穴を開けていた。
   書体: 見出しは端末のゴシック（Android に明朝が無く、識別要素が端末次第だった）。
   ロゴ「性癖図鑑」だけ Shippori Mincho（OFL）の4文字を自前で配る（2KB） */
: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);color-scheme: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:#a51c34;--acd:#ea6a66;--fav:#a51c34;--ac2:#edddd7;--ac3:#ac2e44;--onac:#fffaf0}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--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:#ea6a66;--acd:#ea6a66;--fav:#ea6a66;--ac2:#2c1c19;--ac3:#d05e5b;--onac:#1a130a}}
:root[data-theme=dark]{color-scheme:dark;--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:#ea6a66;--acd:#ea6a66;--fav:#ea6a66;--ac2:#2c1c19;--ac3:#d05e5b;--onac:#1a130a}

:root{
  --serif:'SZWordmark','Hiragino Mincho ProN',YuMincho,'Yu Mincho',serif;
  --sans:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',YuGothic,Meiryo,sans-serif;
  --sp:16px;
}
*{box-sizing:border-box}
/* **hidden属性のトラップ。** `.gate{display:flex}` のような作者スタイルは
   UAの `[hidden]{display:none}` を上書きするので、hidden を付けても消えない。
   コミトクで3回再発し、全域ルールで恒久解決した。最初から入れておく。 */
[hidden]{display:none!important}
/* **扉はJSを待たずに出す。** head の1行(BOOT_JS)が Cookie を見て html.gated を付ける。
   [hidden] の !important より特異度が高いので、外部JSが来る前から覆いが立つ */
html.gated #gate{display:flex!important}
/* **結果ページだけ器を広げる。**(2026-08-25) 1280px の画面で6割が空いていた。
   入口・法務は読み物なので 560px のまま */
html{-webkit-text-size-adjust:100%}
/* **rem を基準にする。** px 固定だと「文字だけ大きくする」設定が
   何も効かない（実測で200%指定しても1pxも変わらなかった）。
   ページ拡大では正しく動いていたが、文字サイズだけ変える人には届かない */
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
     font-size:.9375rem;line-height:1.65;-webkit-font-smoothing:antialiased;
     padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--ac)}
@media (hover:hover){a:hover{color:var(--ac)}}
button{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp)}
/* **読み物だけ幅を絞る。** 器は1種類（1120px）。法務・運営者情報は 66ch */
.prose{max-width:66ch}
.prose h2{margin-top:32px}
/* **本文中のリンクも指で押せる高さに。** メールアドレスなどが
   高さ16pxで、隣の行と近すぎて誤タップになっていた。
   見た目を変えずに余白だけ足す（行の高さは line-height が保つ） */
/* **負の余白は使わない。**(2026-08-30 ペルソナ検査で実害を確認)
   指で押せる44pxを `padding:13px` で作り、`margin:-13px 0` で見た目の行間を
   元に戻していた。ところが**負の余白は行箱を24.75pxに縮める**のに、
   押せる箱は51pxのまま。折り返した瞬間に**上下の箱が27px重なり、
   DOMで後のリンクが前のリンクの上に乗る**。実測の被害:
     ・フッター8本すべてが「中心を押すと別のリンクが反応する」状態
       （「仕組みと限界」を押すと「プライバシーポリシー」が開く）
     ・作家ページの導入文で「四葉チェルシー」を押すと「なるころ」が開く
   **押した物と違う所へ行く**のは、見た目の乱れより重い。
   余白を0に戻し、リンクを含む行はその分だけ高くなることを受け入れる。
   （コミトクでも同じ当て木が `.linkrow` と `.colophon__nav` を壊していた） */
/* **文中のリンクは素のインラインに戻す。**(2026-08-30)
   経緯: 指で押せる44pxを `display:inline-block; padding:13px` で作っていた。
     ① `margin:-13px` で行間を戻すと**行箱だけ縮んで上下の箱が27px重なり、
        押した物と違うリンクが反応する**（フッター8本が全滅していた）
     ② 余白を0にすると重なりは消えるが、**箱51px が行送り24.75px を押し広げ、
        段落に穴が空く**（「…12人（」→穴→リンクの行→穴→「、鮭 など）。」）
   ①も②も、**文章の中のリンクを44pxに膨らませようとしたことが原因**。
   WCAG 2.5.8 は「文中にある、または非対象文字の行間で大きさが決まる対象」を
   明確に除外している。膨らませるのをやめる。
   （自前の検査 tools/sz_browser_check.py も display:inline なら除外する作り） */
.wrap p a,.wrap li a,.btn__s a,.disc a{padding:0;margin:0}
.hd{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hd__in{max-width:1120px;margin:0 auto;padding:0 var(--sp);min-height:56px;
        display:flex;align-items:center;gap:8px}
.hd__name{font-family:var(--serif);font-size:1.12rem;font-weight:700;letter-spacing:.06em;
          text-decoration:none;color:var(--fg);flex:none;
          display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:-4px}
/* **検索窓は全ページに。** 作家ページから別の作家へ行くのに、毎回トップへ戻っていた */
.hd__q{flex:1 1 120px;position:relative;min-width:0;display:flex}
.hd__q input{all:unset;box-sizing:border-box;width:100%;font-size:16px;min-height:44px;
             padding:0 12px;background:var(--card);border:1px solid var(--trk);
             border-radius:var(--r);color:var(--fg)}
.hd__q input::placeholder{color:var(--mute)}
.hd__sug{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:0 8px;list-style:none;
         background:var(--card);border:1px solid var(--trk);border-radius:var(--r);
         box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;max-height:70vh;overflow:auto}
.hd__sug:empty{display:none}
.hd__a{flex:none;font-size:.82rem;color:var(--mute);text-decoration:none;
       display:inline-flex;align-items:center;justify-content:center;gap:4px;
       min-height:44px;min-width:44px;padding:0 6px}
.hd__a b{font-family:var(--mono);font-weight:500;color:var(--mute)}
body.top .hd__q{display:none}
.bc{max-width:1120px;margin:0 auto;padding:0 var(--sp);font-size:.78rem;color:var(--mute);
    display:flex;flex-wrap:wrap;align-items:center;column-gap:.3em}
.bc a{color:var(--mute);display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
      text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}
.bc a:first-child{color:var(--fg)}
.bc span{margin:0 2px}
h1{font-family:var(--sans);font-size:1.5rem;line-height:1.35;font-weight:800;
   margin:18px 0 8px;text-wrap:balance;letter-spacing:.01em}
h2{font-family:var(--sans);font-size:1.12rem;line-height:1.35;font-weight:800;margin:32px 0 10px}
h3{font-family:var(--sans);font-size:1rem;font-weight:800;margin:22px 0 8px}
.lead{color:var(--mute);font-size:0.91rem;margin:0 0 4px}
.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:13px;
     width:100%;min-height:64px;border:1px solid var(--trk);border-radius:var(--r);
     padding:13px 15px;cursor:pointer;user-select:none;
     -webkit-touch-callout:none;touch-action:manipulation}
@media (hover:hover){.btn:hover{border-color:var(--ac)}}
.btn__t{font-size:0.94rem;font-weight:600}
.btn__s{font-size:0.78rem;color:var(--mute);line-height:1.5}
.btn__go{margin-left:auto;color:var(--ac);font-family:var(--mono);font-size:1.1rem;flex:none}
.opts{display:grid;gap:10px}
.opts--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* **系統の棚・新着の棚**（トップ）。表紙が主役 */
.shelf{margin:30px 0 0}
.shelf__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.shelf__h h2{margin:0}
.shelf__more{font-size:.82rem;color:var(--ac);white-space:nowrap;
             display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
.hero{max-width:640px}
body.top .bar{position:static;margin:12px 0 0;max-width:640px}
.hero .fld{margin-top:12px}
.btn--go{justify-content:center;background:var(--ac);color:var(--onac);
         border-color:var(--ac);font-weight:600;min-height:52px}
.fld{display:flex;align-items:center;gap:10px;background:var(--card);
     border:1px solid var(--ac);border-radius:var(--r);padding:0 14px;
     min-height:54px}
/* iOS Safari は font-size<16px の入力欄で自動ズームする。16px を割らない */
/* **枠いっぱいに広げる。** 見た目の枠は54pxなのに、押して反応するのが
   中央の27pxだけだった（上下13pxずつが死んでいた・実測） */
.fld input{all:unset;flex:1;font-size:16px;min-width:0;color:var(--fg);
           align-self:stretch;min-height:52px}
.fld{cursor:text}
.fld__go{all:unset;flex:none;display:flex;align-items:center;justify-content:center;
         width:44px;min-height:52px;margin-right:-10px;cursor:pointer;
         touch-action:manipulation}
.fld input::placeholder{color:var(--mute)}
/* 予測候補（入口とヘッダで共通） */
.sug{list-style:none;margin:9px 0 0;padding:0;display:flex;
     flex-direction:column;gap:0}
.sug li{border-top:1px solid var(--line)}
.sug li:first-child{border-top:0}
.sug__b{all:unset;box-sizing:border-box;display:flex;align-items:center;
        justify-content:space-between;gap:10px;width:100%;min-height:52px;
        padding:0 2px;cursor:pointer;touch-action:manipulation}
.sug__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.94rem}
.sug__c{flex:none;font-family:var(--mono);font-size:0.75rem;color:var(--mute);
        max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug__k{display:inline-block;font-size:0.66rem;color:var(--mute);border:1px solid var(--line);
        border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:1px}
.sug__none{font-size:0.85rem;color:var(--mute);margin:11px 0 0}
.sug__b--w .sug__n{color:var(--mute)}
.chips{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
       -webkit-overflow-scrolling:touch;scrollbar-width:none;
       padding:2px var(--sp) 2px 0;margin:0 calc(var(--sp) * -1) 0 0;
       scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
/* **折り返して全部見せる。** 横スクロールは12人中3人しか見えず、
   動くと分かる手がかりも見切れ57pxだけだった（実測・2026-08-23） */
.chips--wrap{flex-wrap:wrap;overflow:visible;margin-right:0;padding-right:0}
.chip{all:unset;flex:none;font-size:0.88rem;border:1px solid var(--trk);
      border-radius:6px;padding:0 15px;min-height:48px;display:flex;
      align-items:center;white-space:nowrap;cursor:pointer;scroll-snap-align:start;
      touch-action:manipulation}
.chip[aria-pressed="true"]{background:var(--ac);color:var(--onac);
                           border-color:var(--ac);font-weight:600}
.chip[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:14px 15px}
/* --- 作家 ＋ 代表作（3つの入口が同じ形の答えを返す）------------------
   **名前だけ並べない。** 絵柄の話をしているのに絵が1枚も無い画面だった。
   代表作は「その人の代表作」ではなく**この絵柄に近い順**で選んでいる */
.au{margin:16px 0 0}
.au__h{display:flex;align-items:center;justify-content:space-between;gap:10px;
       min-height:48px;text-decoration:none;color:inherit}
.au__n{font-family:var(--sans);font-size:1.05rem;font-weight:700;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au__go{flex:none;font-size:0.75rem;color:var(--ac)}
.strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
       -webkit-overflow-scrolling:touch;scrollbar-width:none;
       padding:0 var(--sp) 0 0;margin:0 calc(var(--sp) * -1) 0 0;
       scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip__i{flex:none;width:96px;scroll-snap-align:start;text-decoration:none;
          color:inherit;display:block}
/* **7:10。** 表紙72枚を測ったら76%が縦長で、比の中央値は0.71だった。
   4:3 の枠では絵が枠の64%しか埋まらない（7:10なら87%） */
.strip__c{position:relative;aspect-ratio:7/10;background:var(--ac2);border:1px solid var(--line);
          border-radius:var(--r);overflow:hidden;display:flex;align-items:center;
          justify-content:center}
.strip__c img{width:100%;height:100%;object-fit:contain}
.strip__n{margin:4px 0 0;font-size:0.68rem;line-height:1.5;color:var(--mute);
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
          overflow:hidden}
.strip__e{font-size:0.75rem;color:var(--mute);margin:0}
/* 絵柄が近い作家。**1作家1枚を1行に並べる**（運営者指定・2026-08-23）。
   作家ごとに帯を作ると12行=2,947pxになり、下の「絵柄が近い作品」が
   画面のはるか下へ追いやられていた */
/* **折り返して全員見せる。**(2026-08-25) 横スクロールでは12人中4人しか見えなかった。
   運営者が避けたのは「作家ごとに帯を作る」形で、1人1枚を折り返す分には
   モバイル3行・広い器なら2行に収まる */
/* **3列にする。**(2026-08-31 運営者の指示) 82pxだと402pxの画面で4列になり、
   表紙が幅87pxまで縮んで絵柄が判らなかった。3列なら約120px取れる */
.strip--au{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:12px 8px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.strip--au .strip__i{width:auto}
.au1__both{display:block;font-size:.68rem;color:var(--mute);margin-top:2px}
.au1__n{display:-webkit-box;margin:6px 0 0;font-size:0.8rem;line-height:1.4;
        font-weight:600;color:var(--fg);-webkit-line-clamp:2;
        -webkit-box-orient:vertical;overflow:hidden}
.rule{height:1px;background:var(--line);border:0;margin:26px 0}
.ft{border-top:1px solid var(--line);margin-top:36px;padding:18px var(--sp)
    calc(24px + env(safe-area-inset-bottom));max-width:1120px;margin-inline:auto;
    font-size:0.78rem;color:var(--mute);line-height:1.8}
/* **見た目を変えずに当たり判定だけ拡げる。** 高さ13pxでは指で押せない */
.ft a{color:var(--fg);display:inline-block;padding:11px 4px;margin:0;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px}
.ft__warn{color:var(--mute)}
/* **本文へ飛ぶ手段。** キーボードだけの人が、毎ページでフッタの
   7リンクを通り抜けないと本文に着けない状態だった */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;
          background:var(--ac);color:var(--onac);padding:12px 18px;
          border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skiplink:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* **共有の帯。**(2026-08-29) どの面にも共有の道具が無く、貼られようが無かった。
   ボタンは2つだけ（X とコピー）。多いほど押されない */
.shr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 0}
.shr__l{font-size:0.82rem;color:var(--mute);margin:0 4px 0 0}
/* **押せるものは 44px 以上。**(2026-08-29) 実測 43px で検査に落ちた。
   指で押す面なので、1px 足りないは「押しにくい」と同じ */
.shr__b{display:inline-flex;align-items:center;justify-content:center;gap:7px;
        padding:0 16px;min-height:44px;
        border:1px solid var(--line);border-radius:6px;background:var(--card);
        color:var(--fg);font-size:0.86rem;cursor:pointer;text-decoration:none}
@media (hover:hover){.shr__b:hover{border-color:var(--fg)}}
.shr__b svg{flex:none}
.shr__m{font-size:0.8rem;color:var(--mute);margin:8px 0 0;min-height:1.2em}
/* その作家らしいジャンル。**倍率を太く**して、頻度の行と見分ける */
.chip--x{border-color:var(--ac);color:var(--fg)}
.chip--x b{margin-left:5px;font-variant-numeric:tabular-nums;color:var(--ac)}
/* 前置きの見出し行。**説明は短く、要素は近くに** */
.lead--lbl{margin:16px 0 6px;font-size:0.86rem;color:var(--mute);display:flex;
           gap:8px;align-items:baseline;flex-wrap:wrap}
.lead__n{font-size:0.74rem}
.heroimg{margin:14px 0 0}
.heroimg__a{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--fg);
  text-decoration:none;font-size:0.94rem}
.heroimg__a svg{flex:none;color:var(--ac)}
.heroimg__go{margin-left:auto;color:var(--mute)}
.wds{margin:10px 0 0}
.wds>summary{cursor:pointer;font-size:0.82rem;color:var(--mute);min-height:44px;
             display:flex;align-items:center;gap:6px}
/* **display:flex にすると summary の三角印が消える。**(2026-08-30 ペルソナ検査)
   閉じた状態が「見出しの言い残し」にしか見えず、トップが謳う4つの入口の1つが
   事実上見えていなかった。印を自前で描いて、開くと向きが変わるようにする */
.wds>summary::before{content:"▸";display:inline-block;transition:transform .15s}
.wds[open]>summary::before{transform:rotate(90deg)}
.wds>summary::-webkit-details-marker{display:none}
/* 広告の表示。**本文の7割の大きさ**にして、帯にはしない（帯は広告そのものに見える） */
.adnote{max-width:1120px;margin:0 auto;padding:6px var(--sp) 0;
        font-size:0.72rem;line-height:1.6;color:var(--mute)}
.adnote b{color:var(--fg);font-weight:700;margin-right:6px}
/* 題材を抜く */
.wo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.wo__l{font-size:0.8rem;color:var(--mute);width:100%}
.wo__b{min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:6px;
       background:var(--card);color:var(--fg);font-size:0.84rem;cursor:pointer}
.wo__b.is-on{border-color:var(--ac);color:var(--ac);font-weight:700}
.wo__b.is-off{color:var(--mute)}
.wo__m{font-size:0.8rem;color:var(--mute);margin:8px 0 0;min-height:1.2em}
/* 近さの種類の切替 */
.axsw{display:flex;gap:8px;margin:26px 0 0;flex-wrap:wrap}
.axsw__b{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
         min-height:44px;padding:6px 16px;border:1px solid var(--line);border-radius:var(--r);
         background:var(--card);color:var(--mute);font-size:0.92rem;font-weight:700;cursor:pointer}
.axsw__b span{font-size:0.72rem;font-weight:400}
.axsw__b.is-on{border-color:var(--ac);color:var(--fg);background:var(--bg)}
.axsw ~ #anear h2,.axsw ~ #ataste h2{margin-top:14px}
html.axed #ataste{display:none}
html.axed.ax-taste #ataste{display:block}
html.axed.ax-taste #anear{display:none}
/* 値下げと試し読み。**値引きは赤で、定価は打ち消して**、いくら安いかを一目に */
.it__w{display:flex;flex-direction:column}
.it__w .it{flex:1}
/* **値段の行を折り返しで壊さない。**(2026-08-29 実測) 幅150pxの帯に畳んだら
   「1001／円」と数字と単位が分かれ、PR表記まで同じ行に混ざって読めなくなった。
   金額は途中で折らず、PR表記は必ず次の行へ */
.it__p{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px;margin:0}
.it__v{white-space:nowrap;font-weight:700}
.it__off{color:var(--ac);font-weight:700;white-space:nowrap}
.it__l{color:var(--mute);font-size:0.86em;white-space:nowrap}
.it__x{flex-basis:100%}
/* **行き先はボタンだけ。**(2026-08-30) 表紙や題名を押しても何も起きない。
   どこへ行くかを読んでから押せる（外部＝↗、PR は値段の行に明記） */
.it__btns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.it__go{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;
        border:1px solid var(--ac);border-radius:var(--r);background:var(--ac);
        color:var(--onac);font-size:0.84rem;font-weight:700;text-decoration:none;text-align:center}
@media (hover:hover){.it__go:hover{filter:brightness(1.1)}}
.it__go--try{background:var(--card);color:var(--fg);border-color:var(--line);font-weight:400}
@media (hover:hover){.it__go--try:hover{border-color:var(--fg)}}
/* 紹介してくださる方へ（/press/）。**表ではなく定義の並び**にする（幅の狭い画面でも折り返せる） */
.kv{display:grid;grid-template-columns:7em 1fr;gap:8px 14px;margin:14px 0 0;font-size:0.9rem}
.kv dt{color:var(--mute);font-size:0.82rem;padding-top:2px}
.kv dd{margin:0}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin:0 0 10px}}
.alist2{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:2px}
.alist2 a{display:block;min-height:44px;display:flex;align-items:center;padding:6px 10px;
          border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none}
/* 作家本人向けの折り畳み。**畳んでも中身はHTMLに残る**ので、索引にも引用にも渡る */
.fory{margin:20px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.fory>summary{cursor:pointer;padding:12px 16px;font-size:0.88rem;font-weight:600}
.fory>p{margin:0 16px 12px;font-size:0.84rem;line-height:1.7;color:var(--mute)}
/* **約束の一文。**(2026-08-29) h1 の直下に置き、説明文より一段強く見せる */
.h1p{font-size:1.02rem;line-height:1.7;margin:10px 0 0;color:var(--fg);font-weight:600}
@media (min-width:700px){.h1p{font-size:1.12rem}}

.gate{position:fixed;inset:0;z-index:99;display:flex;
      background:color-mix(in oklch, var(--bg) 92%, transparent);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      overflow-y:auto;overscroll-behavior:contain}
.gate__box{margin:auto;width:min(100%,460px);padding:var(--sp);
           display:flex;flex-direction:column;gap:14px}
/* **h1 にしない。**(2026-08-25) 全ページで h1 が2つになっていた。見た目は h1 と同じ */
.gate__ttl{margin:0;font-size:23px;font-family:var(--sans);font-weight:700;
           line-height:1.4;text-wrap:balance}
.gate__warn{margin:0;font-size:0.85rem;color:var(--mute);line-height:1.7}
.gate__n{margin:0;font-family:var(--mono);font-size:0.75rem;color:var(--mute);
         font-variant-numeric:tabular-nums}
.gate__exit{display:block;text-align:center;font-size:0.85rem;color:var(--mute);
            min-height:48px;line-height:48px;text-decoration:none}
html.gated,html.gated body{overflow:hidden}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
      gap:14px 12px;margin:14px 0 0}
.grid--6{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
/* **狭い画面では、本人の作品を横1列に畳む。**(2026-08-29 実測)
   格子のままだと 390px 幅で 3 行 1,228px を占め、来た目的である「絵柄が近い作家」が
   2,383px（2.8画面ぶん）下に押し下げられていた。表紙は 150px を保つので小さすぎない
   （94px の横帯に戻したわけではない）。広い画面は格子のまま。 */
@media (max-width:560px){
  .grid--6{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
           padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .grid--6>*{flex:0 0 150px;scroll-snap-align:start}
}
.opts--cta{margin:14px 0 0;max-width:640px}
.opts--cta .btn__s a{color:var(--ac)}
/* **JSで描く領域は枠を先に確保する。** 確保しないと、描いた瞬間に
   フッタが押し下げられる（/a/ で CLS 0.473・/pick/ でも同じ形だった）。
   実際の件数は分からないので、最小の1行ぶんだけ取っておく。
   中身が入ったら auto に戻すので、多すぎる空白は残らない */
/* #awork は1行の横スクロールになったので、確保も1行ぶん（.asec の側で指定） */
#res:empty{min-height:0}
.it{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.it__c{position:relative;aspect-ratio:7/10;background:var(--ac2);
       border:1px solid var(--line);border-radius:8px;overflow:hidden;
       display:flex;align-items:center;justify-content:center}
.it__c img{width:100%;height:100%;object-fit:contain}
/* **枠を絵に合わせる。**(2026-08-30 運営者の承認)
   縦長7:10の枠に横長(560×420)の表紙を入れると**枠の48%が空白**だった。
   切り抜きは規約で不可（拡大・縮小のみ可）なので、**枠の側を変える**。
   升目の高さは不揃いになるが、絵柄で選ぶサイトでは「絵が小さい」方が損。
   `align-items:start` で各カードを行の上端に揃え、下の余白は空けたままにする */
/* **順序に頼らない書き方にする。**(2026-08-31)
   はじめ `.tile__c--wide`(0,1,0) と書いたが、別の束にある `.tile__c`(0,1,0) が
   後に読まれて勝ち、比は 7/10 のままだった（印は付いているのに効かない）。
   同じクラスを2つ重ねて (0,2,0) にすれば、**どちらが先に読まれても勝つ**。
   今日、広いセレクタが部品を潰す事故を5回起こしているので、順序に依存しない形で書く */
.it__c.it__c--wide,.strip__c.strip__c--wide,.tile__c.tile__c--wide{aspect-ratio:4/3}
.grid{align-items:start}
/* **読み放題の印。**(2026-08-30 運営者の提案) 表紙の左上。
   商業誌の28.4%(30,808件)が対象で、同人は0件。
   「買わずに読める」は、絵柄で見つけた人にとって値段より強い判断材料になる */
.unl{position:absolute;top:4px;left:4px;z-index:1;
     background:var(--ac);color:var(--onac);font-size:0.62rem;font-weight:700;
     line-height:1;padding:3px 5px;border-radius:3px;letter-spacing:.02em}
.it__ph{font-size:0.69rem;color:var(--mute)}
.it__t{margin:0;font-size:0.85rem;line-height:1.45;display:-webkit-box;
       -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it__b{margin:0;font-size:0.75rem;color:var(--mute)}
/* **短い作者名でも44pxを確保する。**(2026-08-30) 今日リンクにしたところ、
   「湊ゆう」「森の人」のような短い名前が 40x46 になり、配信の門が鳴った */
/* **文中のリンクを素に戻した巻き添えを受ける。**(2026-08-30)
   `.wrap p a{padding:0}` は `.it__b`（カードの作者名）にも当たり、
   今日リンクにしたばかりの名前が**20px高**になった。ここは文中ではなく
   **1行を占める操作要素**なので、指で押せる高さを自分で確保する。
   カード30枚ぶん縦に伸びるので、44pxではなく WCAG 2.5.8 の下限 24px を
   十分に超える32pxにする（上下は8px空いており、間隔の除外規定も満たす） */
.wrap p.it__b a{display:inline-block;min-width:44px;padding:6px 0;color:inherit}
/* **詳細度で勝つ形で書く。**(2026-08-30) `.it__b a`(0,1,1) は
   `.wrap p a`(0,1,2) に負けて padding が 0 に潰され、実測20px高のままだった
   （配信の門が42件で検出）。クラス2つの `.wrap p.it__b a`(0,2,2) にする。
   **今日4回目**の「広いセレクタが部品を潰す」。書いたら実測で効いているか見る */
.it__p{margin:0;font-family:var(--mono);font-size:0.85rem;
       font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
/* **外部へ出ることを示す。** サイト内の詳細を期待して押した人が、
   いきなり別ドメインの販売ページに着地していた */
.it__x{font-size:0.69rem;color:var(--mute);font-family:var(--sans)}
.meta{display:flex;gap:18px;margin:6px 0 0;flex-wrap:wrap}
.meta__v{font-family:var(--mono);font-size:1.19rem;font-variant-numeric:tabular-nums}
.meta__l{font-size:0.75rem;color:var(--mute)}
.disc{font-size:0.78rem;line-height:1.6;color:var(--mute);margin:18px 0 0}
/* **PR表記（ステマ規制）は、ヘッダ直下の1行に集約した。**(2026-08-30)
   DMMの案内は「客観的に視認されると認められる範囲で『広告』等の文言と
   関係性を表示すること」で、**回数も位置も定めていない**。
   以前はページの下にも長い注記を重ねていたが、同じことを二度書くうえ、
   「紹介料」「並び順は影響しません」は運営者が
   「利用者が毛嫌いする」として外した語だった。`.adnote`（page() が全ページに
   出す1行）が要件を満たすので、ここのチップと注記はやめた。 */
/* 作家ページの3段。**本人の作品は1行に畳み、似た作家と似た作品を広く取る** */
.asec{margin:24px 0 0}
.asec__h{margin:0 0 6px}
.asec__s{font-size:0.75rem;color:var(--mute);margin:0 0 8px}
.strip__p{display:block;margin:2px 0 0;font-family:var(--mono);font-size:0.72rem;
          color:var(--mute);font-variant-numeric:tabular-nums}
.strip__x{font-family:var(--sans);font-size:0.66rem;color:var(--mute);white-space:nowrap}
/* **JSで描く領域は枠を先に確保する。値は実測で決めた**（2026-08-23）。
   確保を怠って CLS 0.409 を出した。効くのは**画面の中に見えている要素**が
   動くかどうかで、いちばん効いたのは中段（絵柄が近い作家）。ここが0から
   2,947pxに伸びると、その下の見出しが一気に画面外へ飛ぶ。
   実測: 上段195px / 中段 12人で2,947px（1人222px）/ 下段 24件で4,356px */
#awork:empty{min-height:230px}
#anear:empty{min-height:560px}   /* 見出し+3行ぶん（折り返し後・2026-08-25） */
#astyle:empty{min-height:calc(((min(100vw,560px) - 44px) / 2 * 10 / 7 + 114px) * 12 + 14px)}

/* **枠を先に確保する。** タイルはJSで後から描くので、確保しないと
   描いた瞬間にフッタが押し下げられる（CLS 0.248・Lighthouseが検出）。
   3列×4行ぶんの高さを最初から取る */
/* **3列×3行の9枚。**(運営者指定・2026-08-23)
   12枚(4列)だと1枚84px幅で、絵柄が読めなかった。**見えない枚数は無意味**。
   3列にすると115px幅・164px高になり、絵の面積は12枚のときの約1.9倍。
   枠の比は実測で決めてある: 表紙72枚のうち76%が縦長（中央値0.71＝7:10）。
   4:3では絵が枠の64%しか埋まらないが、7:10なら87%埋まる。 */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:640px;
       margin:12px 0 0;
       min-height:calc(((min(100vw,560px) - 48px) / 3 * 10 / 7 + 8px) * 3)}
.tile{all:unset;box-sizing:border-box;display:block;cursor:pointer;position:relative;
      touch-action:manipulation}
/* **枠を表紙の実態に合わせる。** 7:10だと横長(560×420)の表紙が
   枠の48%を空白にし、同じ画面に「大きい絵」と「小さい絵」が並んで
   選択が絵柄でなく表示サイズに引っ張られていた（実測）。
   **object-fit は contain のまま**（cover は切り抜きになり画像規約に触れる） */
.tiles{align-items:start}
.tile__c{aspect-ratio:7/10;background:var(--card);border:2px solid var(--trk);
         border-radius:var(--r);overflow:hidden;display:flex;align-items:center;
         justify-content:center}
.tile__c img{width:100%;height:100%;object-fit:contain}
.tile[aria-pressed="true"] .tile__c{border-color:var(--ac)}
.tile__k{position:absolute;top:4px;right:4px;width:22px;height:22px;
         border-radius:6px;background:var(--ac);color:var(--onac);
         display:none;align-items:center;justify-content:center;font-weight:700;
         font-size:0.74rem}
.tile[aria-pressed="true"] .tile__k{display:flex}
/* **作家名はタイルに出さない。** 幅84pxでは5文字も入らず、
   「作家を知らない人のための入口」で名前を見せる意味も無い。
   読み上げには aria-label で渡す */
.step{margin:6px 0 0}
.step__n{font-family:var(--mono);font-size:0.78rem;color:var(--mute);
         display:block;margin:0 0 2px}
/* 進み具合。**「あと何回」は言えない**（絵柄は離散的に分類できないので
   残りを数えられない）。代わりに**回した数**と**いまの手応え**を出す */
.gauge{display:flex;gap:4px;margin:8px 0 0}
.gauge i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.gauge i.on{background:var(--ac)}
/* **バーは1本だけにする。** 2本入れて138pxになり、実可視730pxで測ると
   2行目のタイルの64%が裏に隠れていた（実測・2026-08-23） */
.bar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);
     padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:14px}
.skip{all:unset;display:block;text-align:center;font-size:0.85rem;color:var(--mute);
      min-height:48px;line-height:48px;cursor:pointer;touch-action:manipulation;
      text-decoration:underline;text-underline-offset:3px}
.tiles{padding-bottom:8px}
/* 途中経過。**本題の格子より小さくする**（主役を取らないように）。
   **バーの裏に入れない。** 実測で145pxのうち122px(84%)が固定バーに
   隠れており、押した人には在ることすら分からなかった（2026-08-23）。
   2回目以降は見出しを畳んで、その分の場所をここに回す */
.peek{margin:10px 0 0}
.peek__h{font-size:0.75rem;color:var(--mute);margin:0 0 5px}
.peek .strip__i{width:64px}
.peek .strip__n{display:none}
/* 2回目以降は前置きを畳む。**同じ説明を毎回読ませない** */
.pk--go .lead--intro{display:none}
.pk--go h1{font-size:1.2rem;margin:12px 0 2px}

.fbslot{margin:22px 0 0}.fbslot.rsv{min-height:168px}
.fbslot.fbfloat{position:fixed;left:0;right:0;bottom:calc(var(--fbdock,0px) + env(safe-area-inset-bottom,0px) + 8px);z-index:36;margin:0;padding:0 12px;min-height:0;pointer-events:none}   /* 結果の中の置き場所が画面の外の時だけ: 画面の下に浮かべる（覆わない・× で閉じる）。--fbdock は呼び側の下の帯の高さ */
.fbslot.fbfloat .fb{max-width:520px;margin:0 auto;pointer-events:auto;box-shadow:0 8px 30px rgba(0,0,0,.35);animation:fbin .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes fbin{from{transform:translateY(calc(100% + 16px))}}
@media (prefers-reduced-motion:reduce){.fbslot.fbfloat .fb{animation:none}}
.fb{position:relative;box-sizing:border-box;padding:14px 48px 14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.fbslot.rsv:not(.on) .fb{visibility:hidden}
.fbx{position:absolute;top:0;right:0;min-width:44px;min-height:44px;border:0;background:none;color:var(--mute);font-size:1.375rem;line-height:1;cursor:pointer}
.fbq{margin:0 0 10px;font-size:0.9375rem;font-weight:700;line-height:1.5}
.fbrow{display:flex;gap:10px}.fbrow.fbwrap{flex-wrap:wrap}
.fbb{flex:1 1 0;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--trk);border-radius:6px;background:none;color:var(--fg);font:inherit;font-size:0.875rem;font-weight:700;cursor:pointer}
.fbwrap .fbb{flex:1 1 40%}
.fbb:hover,.fbb:focus-visible{border-color:var(--ac);background:var(--ac2)}
.fbb[hidden],.fbhint[hidden],.fbs[hidden]{display:none}
.fbhint{margin:8px 0 0;font-size:0.7812rem;color:var(--mute)}.fbnote{margin:0 0 10px}
.fbfoot{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;background:none;color:var(--mute);font:inherit;font-size:0.8125rem;text-decoration:underline;text-decoration-color:var(--trk);text-underline-offset:3px;cursor:pointer}
.fbfootrow{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px}.fbslot,.fbfootrow{max-width:640px}
/* **すべてのCSSの最後に置くこと。** CSSは後勝ちなので、`all:unset` を使う
   ルールより前にあると輪郭が消える。ページ固有のCSS(extra_css)にも
   `all:unset` があるため、TOKENSの中に置くだけでは足りない。
   実測で34箇所の輪郭が消えており、キーボードで操作する人が
   「いまどこにいるか」を見失っていた（2026-08-23）。 */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
.tile:focus-visible{outline-offset:3px}
/* **入力欄は枠の側に出す。** `.fld input{all:unset}` が輪郭を消すうえ、
   入力欄だけを囲っても見た目の枠(54px)とずれる。枠ごと光らせる */
.fld:focus-within{outline:2px solid var(--ac);outline-offset:2px}
.fld input:focus-visible{outline:none}