/* 名前で探す（v1。2026-11-12）。共通の部品は va.css、決まりは DESIGN.md。接頭辞は sr-。
   並び：題名の段（題名・入力欄・例の言葉・フクロウのひとこと）→ 結果（何も打っていない／見つかった／見つからない）。
   打つたびに描き直すので、出現の演出は持ち込まない（軽く速く）。黄緑は使わない。広告は置かない。 */

/* ============ 題名の段：入力欄が主役。線の箱＋ずらした影（押せるものの形）。左の黒い箱の虫眼鏡は、ヘッダーの「探す」と同じ印 ============ */
.sr-ph .va-in{padding-bottom:42px}
.sr-form{position:relative;max-width:780px;margin-top:20px}
.sr-lab{display:block;font-weight:700;font-size:clamp(15px,1.3vw,17px);line-height:1.8;color:var(--ink);margin-bottom:10px}
.sr-box{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;background:var(--paper2);border:var(--bd);box-shadow:var(--sh-l);transition:box-shadow .15s}
.sr-ic{display:grid;place-items:center;width:66px;background:var(--ink);color:var(--paper2);transition:background .15s}
.sr-ic svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.sr-box input{min-width:0;width:100%;height:66px;margin:0;padding:0 14px;border:0;border-radius:0;background:transparent;font:inherit;font-weight:900;font-size:25px;letter-spacing:-.01em;color:var(--ink);outline:0;-webkit-appearance:none;appearance:none}
.sr-box input::placeholder{font-weight:500;font-size:15px;letter-spacing:0;color:var(--mute);opacity:1}
.sr-box input::-webkit-search-cancel-button,.sr-box input::-webkit-search-decoration{-webkit-appearance:none;display:none}
/* 入力欄にいるとき：影と印の箱がコーラルに変わる（フォーカスの印。枠の外に輪は出さない） */
.sr-box:focus-within{box-shadow:8px 8px 0 var(--coral)}
.sr-box:focus-within .sr-ic{background:var(--coral);color:#fff}
.sr-x{align-self:center;display:grid;place-items:center;width:38px;height:38px;margin-right:12px;padding:0;border:var(--bd);background:var(--paper);font-family:var(--px);font-size:20px;line-height:1;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.sr-x[hidden],.sr-key[hidden]{display:none}
.sr-x:hover{background:var(--ink);color:var(--paper2)}
.sr-key{display:none;align-self:center;margin-right:16px;min-width:26px;padding:1px 0 0;text-align:center;font-family:var(--px);font-size:14px;line-height:22px;color:var(--mute);border:1.5px solid var(--mute)}
@media (hover:hover) and (min-width:821px){.sr-key:not([hidden]){display:block}.sr-box:focus-within .sr-key{display:none}}
/* 例の言葉：押すと、その言葉で探す */
.sr-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.sr-ex .lab{font-family:var(--px);font-size:11.5px;color:var(--mute);margin-right:2px}
.sr-ex button{display:inline-flex;align-items:baseline;gap:7px;padding:6px 11px 5px;border:var(--bd);background:var(--paper2);color:var(--ink);cursor:pointer;line-height:1.2;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.sr-ex button b{font-weight:900;font-size:14.5px}
.sr-ex button small{font-family:var(--px);font-size:10.5px;color:var(--mute)}
.sr-ex button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--coral);color:#fff}
.sr-ex button:hover small{color:#fff}
.sr-ex button:active{transform:translate(1px,1px);box-shadow:none}
.sr-hint{margin-top:12px}
/* フクロウ（案内役）のひとこと：PCだけ、右下に立つ（スマホは、結果を上に出すために置かない） */
.sr-tip{display:none}
@media (min-width:1080px){
  .sr-tip{position:absolute;right:var(--gut);bottom:0;display:flex;align-items:flex-end;gap:18px}
  .sr-tip .who{position:relative;flex:none;width:118px;padding-bottom:16px}
  .sr-tip .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
  .sr-tip .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
  .sr-tip .va-say{margin-bottom:70px;transform:rotate(-1.5deg);white-space:nowrap}
  .sr-tip .va-say::before{top:auto;bottom:12px}
}
@media (max-width:720px){
  .sr-ph .va-in{padding-bottom:28px}
  .sr-form{margin-top:14px}
  .sr-lab{font-size:14px;margin-bottom:8px}
  .sr-box{box-shadow:6px 6px 0 var(--ink)}
  .sr-box:focus-within{box-shadow:6px 6px 0 var(--coral)}
  .sr-ic{width:52px}
  .sr-ic svg{width:21px;height:21px}
  .sr-box input{height:56px;font-size:20px;padding:0 10px}
  .sr-box input::placeholder{font-size:13px}
  .sr-x{width:34px;height:34px;margin-right:9px}
  .sr-ex{margin-top:18px;gap:7px}
}

/* ============ 結果の区画（3つの状態で、高さが大きく跳ねないように下限を置く） ============ */
.sr-sec{padding-top:42px;min-height:52vh}
.sr-sec .va-h{margin-bottom:24px}

/* --- 見つかった：件数の行と、索引の形の一覧（ガイドブックの巻末の索引：名前 …… 事務所 → ページ） --- */
.sr-bar{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 28px}
.sr-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;line-height:1.15;color:var(--ink);min-width:0}
.sr-count .q{font-weight:900;font-size:clamp(20px,2.3vw,30px);letter-spacing:-.02em;margin-right:8px;overflow-wrap:anywhere;min-width:0}
.sr-count b{font-family:var(--en);font-weight:800;font-size:clamp(34px,3.4vw,46px);letter-spacing:0;line-height:1}
.sr-count span:not(.q){font-weight:900;font-size:19px}
.sr-count small{font-family:var(--px);font-size:12px;color:var(--mute);margin-left:8px}
.sr-orglink{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14px;line-height:1.4;color:var(--ink);text-decoration:none;padding-bottom:4px}
.sr-orglink i,.sr-after a i,.sr-go i{display:inline-block;font-style:normal;font-family:var(--px);font-weight:400;color:var(--coral);margin-left:5px;transition:transform .2s var(--ease)}
.sr-orglink:hover{color:var(--coral-d)}
.sr-orglink:hover i,.sr-after a:hover i{transform:translateX(4px)}
.sr-list{margin-top:16px;background:var(--paper);border:var(--bd);box-shadow:var(--sh-l)}
.sr-list li+li{border-top:2px dashed var(--line)}
.sr-row{display:grid;grid-template-columns:auto minmax(0,auto) minmax(28px,1fr) auto auto;align-items:center;gap:0 20px;padding:14px 22px 14px 14px;text-decoration:none;color:var(--ink);transition:background .15s}
.sr-row:hover{background:var(--paper2)}
.sr-row:focus-visible{outline-offset:-3px}
.sr-th{display:block;flex:none}
.sr-th .va-mini{width:132px;transition:transform .15s,box-shadow .15s}
.sr-row:hover .sr-th .va-mini{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.sr-th .va-ini{width:74px;height:74px;font-size:32px;margin:0 29px}
.sr-who{min-width:0}
.sr-nm{display:block;font-weight:900;font-size:clamp(20px,2.1vw,27px);line-height:1.3;letter-spacing:-.03em;font-feature-settings:"palt";overflow-wrap:anywhere}
.sr-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-top:3px}
.sr-sub .kana{font-family:var(--px);font-size:12.5px;line-height:1.5;color:var(--ink2);letter-spacing:.04em}
.sr-sub .roma{font-family:var(--cur);font-weight:700;font-size:19px;line-height:1.1;color:var(--ink)}
/* 一致した所：蛍光ペンの線（コーラル）。事務所の札の中では、コーラルの地 */
.sr-row mark{color:inherit;background:linear-gradient(transparent 56%,rgba(238,90,54,.45) 56%,rgba(238,90,54,.45) 94%,transparent 94%);padding:0 1px;margin:0 -1px}
.sr-org .va-tag mark{background:var(--coral);color:#fff;padding:0 1px;margin:0}
.sr-dots{display:block;height:0;border-bottom:3px dotted var(--ink);opacity:.28}
.sr-org{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sr-org small{font-family:var(--px);font-size:10.5px;line-height:1.3;color:var(--mute);white-space:nowrap}
.sr-go{font-weight:900;font-size:14px;white-space:nowrap}
.sr-row:hover .sr-go{color:var(--coral-d)}
.sr-row:hover .sr-go i{transform:translateX(4px)}
.sr-foot{margin-top:22px;max-width:60em}
.sr-after{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:26px;padding-top:16px;border-top:1.5px dashed var(--ink)}
.sr-after span{font-weight:700;font-size:14.5px;color:var(--ink2)}
.sr-after a{font-weight:900;font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.sr-after a:hover{color:var(--coral-d)}
@media (max-width:820px){
  .sr-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"th who go" "th org go";gap:5px 13px;padding:12px 12px 12px 10px}
  .sr-th{grid-area:th;align-self:start}
  .sr-th .va-mini{width:104px}
  .sr-th .va-ini{width:58px;height:58px;font-size:26px;margin:0 23px}
  .sr-who{grid-area:who;align-self:end}
  .sr-nm{font-size:19px}
  .sr-sub .roma{font-size:17px}
  .sr-dots{display:none}
  .sr-org{grid-area:org;flex-direction:row;align-items:center;align-self:start;flex-wrap:wrap;gap:4px 8px}
  .sr-go{grid-area:go;font-size:0}
  .sr-go i{font-size:16px;margin:0}
  .sr-list{box-shadow:6px 6px 0 var(--ink)}
}

/* --- 何も打っていない：事務所の札（名鑑のしぼり込みへ）と、推し増し診断への入口 --- */
.sr-doors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px 60px;align-items:start}
.sr-door h3{display:flex;align-items:baseline;gap:10px;font-weight:900;font-size:19px;color:var(--ink);margin-bottom:14px}
.sr-door h3 small{font-family:var(--en);font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--mute)}
.sr-door h3::after{content:"";flex:1;height:1.5px;background:var(--ink);align-self:center}
.sr-chips{display:flex;flex-wrap:wrap;gap:10px}
.sr-chip{display:inline-flex;align-items:baseline;gap:7px;font-weight:900;font-size:16px;line-height:1.2;padding:10px 14px;border:var(--bd);background:var(--paper2);color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.sr-sec.alt .sr-chip{background:var(--paper)}
.sr-chip small{font-family:var(--px);font-weight:400;font-size:11px;color:var(--mute)}
.sr-chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);background:var(--coral);color:#fff}
.sr-chip:hover small{color:#fff}
.sr-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.sr-door .va-note{margin:14px 0 20px}
/* 診断への入口：ティール（相方＝フクロウの色）。右下にフクロウ */
.sr-diag{position:relative;display:block;overflow:hidden;background:var(--teal);color:#fff;border:var(--bd);box-shadow:var(--sh-l);padding:26px 28px 28px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.sr-diag:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}
.sr-diag::before{content:"";position:absolute;right:-40px;bottom:-70px;width:300px;height:300px;background-image:radial-gradient(rgba(255,255,255,.28) 2.4px,transparent 2.8px);background-size:15px 15px;-webkit-mask-image:radial-gradient(circle at 70% 70%,#000 20%,transparent 70%);mask-image:radial-gradient(circle at 70% 70%,#000 20%,transparent 70%)}
.sr-diag>*{position:relative}
.sr-diag .en{font-family:var(--en);font-weight:800;font-size:11px;letter-spacing:.08em;opacity:.9}
.sr-diag h3{font-weight:900;font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-.04em;margin:6px 0 12px;font-feature-settings:"palt"}
.sr-diag p{font-weight:700;font-size:15px;line-height:1.8;max-width:22em;margin-bottom:20px;padding-right:96px}
.sr-diag .owl{position:absolute;right:20px;bottom:-6px;width:clamp(104px,10vw,138px)}
.sr-diag .owl img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 0 rgba(21,21,21,.2))}
@media (max-width:820px){
  .sr-doors{grid-template-columns:minmax(0,1fr);gap:34px}
  .sr-chip{font-size:15px;padding:9px 12px}
  .sr-diag{padding:22px 20px 24px}
  .sr-diag p{padding-right:84px}
  .sr-diag .owl{right:10px;width:96px}
}

/* --- 見つからない：フクロウ（調べた人）が、表記の例と、ほかの探し方を案内する --- */
.sr-none{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:end;max-width:900px}
.sr-none .who{position:relative;width:126px;padding-bottom:16px}
.sr-none .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.sr-none .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
.sr-none .va-say{padding:20px 22px 22px;margin-bottom:34px;font-weight:500}
.sr-sec.alt .sr-none .va-say,.sr-sec.alt .sr-none .va-say::before{background:var(--paper)}
.sr-none .va-say::before{top:auto;bottom:24px}
.sr-none h2{font-weight:900;font-size:clamp(20px,2.2vw,27px);line-height:1.45;letter-spacing:-.02em;color:var(--ink);font-feature-settings:"palt";overflow-wrap:anywhere}
.sr-none h2 span{display:inline-block}
.sr-none h2 em{font-style:normal;background:linear-gradient(transparent 58%,rgba(238,90,54,.42) 58%)}
.sr-try{margin-top:14px;border-top:var(--bd)}
.sr-try li{position:relative;padding:10px 0 9px 28px;border-bottom:1.5px dashed var(--line);font-size:14.5px;line-height:1.75;color:var(--ink2)}
.sr-try li::before{content:"→";position:absolute;left:3px;top:10px;font-family:var(--px);font-size:13px;color:var(--coral)}
.sr-try b{font-weight:900;color:var(--ink)}
.sr-try .eg{display:inline-block;font-family:var(--px);font-size:12px;line-height:1.5;color:var(--ink);border:1.5px solid var(--ink);padding:0 7px;margin-left:8px;white-space:nowrap}
.sr-tbd{display:inline-block;font-family:var(--px);font-weight:400;font-size:12px;line-height:1.5;color:var(--mute);border:1px dashed var(--mute);padding:0 7px;margin:0 3px;white-space:nowrap}
.sr-none .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.sr-tell{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;max-width:900px;margin:6px 0 52px;padding:16px 20px;border:1.5px dashed var(--ink)}
.sr-tell p{flex:1 1 20em;font-size:14.5px;line-height:1.75;color:var(--ink2)}
.sr-tell b{font-weight:900;color:var(--ink)}
@media (max-width:720px){
  .sr-none{grid-template-columns:minmax(0,1fr);gap:0;justify-items:start}
  .sr-none .who{width:92px;order:2;margin-left:8px}
  .sr-none .va-say{margin-bottom:22px;padding:16px 16px 18px;width:100%}
  .sr-none .va-say::before{left:34px;top:auto;bottom:-12px;border:0;border-right:var(--bd);border-bottom:var(--bd)}
  .sr-try .eg{margin-left:0}
  .sr-tell{margin:22px 0 40px;padding:14px 16px}
}

/* 入力欄（2026-11-14 運営者「影のせいで、カーソルと薄い字が箱の下のほうに見える」）：影を小さく、何も打っていない間は字を小さくしてカーソルも小さく、上下まん中に */
.sr-box{box-shadow:5px 5px 0 var(--ink)}
.sr-box:focus-within{box-shadow:5px 5px 0 var(--coral)}
.sr-box input:placeholder-shown{font-size:16px;font-weight:500}
@media (max-width:820px){.sr-box input:placeholder-shown{font-size:14px}}
/* 診断のカード：文の幅を広げる（2026-11-14 運営者「4行になっている」） */
.sr-doors{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.sr-diag p{max-width:none;padding-right:clamp(120px,11vw,150px)}
@media (max-width:820px){.sr-doors{grid-template-columns:minmax(0,1fr)}.sr-diag p{padding-right:84px}}
/* 事務所の札が増えたので、すこし詰める */
.sr-chips{gap:8px}