/* 名鑑（タレントの一覧）。v1（2026-11-11）。共通の部品は va.css、決まりは DESIGN.md。接頭辞は tl-。
   並び：題名の段（更新日・載せる条件）→ しぼる（左の柱。スマホは上）＋件数と並び＋カードの一覧 → 診断への案内。
   カードは全員同じ型：事務所の札と「ここで再生」→ 本人の動画のサムネイル（無加工）→ 名前・札・項目 →「タレントのページへ」。番号は付けない。 */

/* ===== 題名の段：更新日・載せる条件・フクロウのひとこと ===== */
.tl-ph .va-in{padding-bottom:34px}
.tl-meta{position:relative;display:grid;gap:7px;margin-top:18px;max-width:46em}
.tl-meta>div{display:flex;align-items:baseline;gap:10px}
.tl-meta dt{flex:none;font-family:var(--px);font-size:11.5px;line-height:1.5;color:var(--paper2);background:var(--ink);padding:1px 9px;white-space:nowrap}
.tl-meta dd{font-size:14px;font-weight:700;line-height:1.65;color:var(--ink)}
.tl-meta dd#tl-upd{font-family:var(--px);font-weight:400;font-size:14px;letter-spacing:.04em}
.tl-tip{position:relative;display:flex;align-items:flex-end;gap:16px;margin-top:18px}
.tl-tip .who{position:relative;flex:none;width:68px;padding-bottom:12px;order:2}
.tl-tip .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.tl-tip .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
.tl-tip .who .va-plate small{display:none}
.tl-tip .va-say{font-size:14px;padding:9px 13px;margin-bottom:26px}
.tl-tip .va-say::before{left:auto;right:-12px;top:auto;bottom:12px;border:0;border-right:var(--bd);border-top:var(--bd)}
@media (min-width:1100px){
  /* PC：フクロウは題名の段の右下に立つ。左の文は、吹き出しに重ならない幅まで */
  .tl-ph .va-in{padding-bottom:40px}
  .tl-ph .lead,.tl-meta{max-width:min(46em,calc(100% - 470px))}
  .tl-tip{position:absolute;right:var(--gut);bottom:0;margin:0;gap:18px}
  .tl-tip .who{width:112px;padding-bottom:16px}
  .tl-tip .who .va-plate small{display:inline}
  .tl-tip .va-say{font-size:15px;padding:12px 16px;margin-bottom:64px;transform:rotate(-1.5deg)}
}

/* ===== しぼる＋一覧：PCは左に柱（スクロールしても残る）、右にカード ===== */
.tl-sec{scroll-margin-top:70px}
.tl-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.tl-main{min-width:0}
@media (min-width:1000px){
  .tl-cols{grid-template-columns:272px minmax(0,1fr);gap:40px;align-items:start}
  /* 左の柱だけスクロールできる（運営者 2026-11-14「フィルター項目だけスクロールできる方法は」）。ヘッダーの下から画面の下まで */
  .tl-side{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;padding:2px 14px 16px 2px;margin-left:-2px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
  .tl-side::-webkit-scrollbar{width:6px}
  .tl-side::-webkit-scrollbar-thumb{background:var(--ink)}
}

/* --- しぼる：見出し（日本語＋英字＋線）とボタン。押すと沈んで、インクの地になる --- */
.tl-fg+.tl-fg{margin-top:20px}
.tl-fg h3{display:flex;align-items:baseline;gap:9px;font-weight:900;font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:10px}
.tl-fg h3 small{font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.08em;color:var(--mute)}
.tl-fg h3::after{content:"";flex:1;height:1.5px;background:var(--ink);align-self:center}
.tl-chips{display:flex;flex-wrap:wrap;gap:9px 8px}
.tl-chip{display:inline-flex;align-items:baseline;gap:6px;flex:none;font-weight:900;font-size:14.5px;line-height:1.2;padding:8px 11px;border:var(--bd);background:var(--paper2);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s,color .15s;white-space:nowrap}
.tl-chip small{font-family:var(--px);font-weight:400;font-size:10.5px;color:var(--mute)}
.tl-chip em{font-style:normal;font-family:var(--px);font-weight:400;font-size:11px;color:var(--mute);min-width:1.2em;text-align:right}
.tl-chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.tl-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper2);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--coral)}
.tl-chip[aria-pressed="true"] small,.tl-chip[aria-pressed="true"] em{color:#c9c4b8}
.tl-chip[aria-pressed="true"] span::before{content:"✓";font-family:var(--px);font-weight:400;font-size:12px;margin-right:5px;color:#ffb39f}
.tl-chip.zero{border-style:dashed;box-shadow:none;color:var(--mute);background:transparent}
.tl-fnote{margin-top:18px;padding-top:10px;border-top:1.5px dashed var(--line)}
@media (max-width:999px){
  /* スマホ：1つの条件を1行に。横に送れる（影が切れないよう下に余白） */
  .tl-fg+.tl-fg{margin-top:12px}
  .tl-fg h3{margin-bottom:8px;font-size:15px}
  .tl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 7px}
  .tl-chips::-webkit-scrollbar{display:none}
  .tl-chip{font-size:14px;padding:8px 10px}
  .tl-fnote{margin-top:10px}
}

/* --- 件数・いまの条件・並び --- */
.tl-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:10px 0 12px;border-top:var(--bd);border-bottom:1.5px dashed var(--ink);margin-bottom:26px}
.tl-count{display:flex;align-items:baseline;gap:7px;color:var(--ink);white-space:nowrap}
.tl-count b{font-family:var(--en);font-weight:800;font-size:32px;line-height:1;letter-spacing:0}
.tl-count span{font-weight:900;font-size:15px}
.tl-count small{font-family:var(--px);font-size:11px;color:var(--mute);margin-left:8px}
.tl-on{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.tl-x{display:inline-flex;align-items:center;gap:7px;font-family:var(--px);font-size:12px;line-height:1.5;padding:2px 7px 2px 9px;border:0;background:var(--ink);color:var(--paper2);cursor:pointer}
.tl-x i{font-style:normal;color:#ffb39f}
.tl-x:hover{background:var(--coral)}
.tl-x:hover i{color:#fff}
.tl-clear{font-family:var(--px);font-size:12px;background:none;border:0;padding:2px 4px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tl-clear:hover{color:var(--coral)}
.tl-sort{display:flex;align-items:center;margin-left:auto}
.tl-sort .lab{font-family:var(--px);font-size:11px;color:var(--mute);margin-right:9px}
.tl-sort [data-sort]{font-weight:900;font-size:13px;line-height:1.2;padding:7px 12px;border:var(--bd);background:var(--paper2);color:var(--ink);cursor:pointer}
.tl-sort [data-sort]+[data-sort]{margin-left:-2px}
.tl-sort [data-sort][aria-pressed="true"]{background:var(--ink);color:var(--paper2)}
.tl-sort [data-sort]:hover:not([aria-pressed="true"]){background:var(--coral-l)}
.tl-sort :focus-visible{position:relative;z-index:1}
.tl-shuffle{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-family:var(--px);font-size:12px;line-height:1.2;padding:7px 9px;border:1.5px dashed var(--ink);background:none;color:var(--ink);cursor:pointer}
.tl-shuffle i{font-style:normal;font-size:13px;transition:transform .3s var(--ease)}
.tl-shuffle:hover{border-style:solid;background:var(--paper2)}
.tl-shuffle:hover i{transform:rotate(180deg)}
.tl-shuffle[hidden]{display:none}
@media (max-width:560px){
  .tl-bar{gap:8px 12px}
  .tl-sort{margin-left:0;width:100%}
  .tl-shuffle{margin-left:auto}
}

/* --- カードの一覧 --- */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:30px 24px}
.tl-grid[hidden]{display:none}
.tl-item{min-width:0}
.tl-item[hidden]{display:none}
.tl-div{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:2px 0 -8px}
.tl-div::before,.tl-div::after{content:"";flex:1;border-top:1.5px dashed var(--ink)}
.tl-card{display:flex;flex-direction:column;height:100%}
.tl-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
/* 上の段：事務所の札（インクの面で左に詰める）と「▶ ここで再生」＋長さ。画像の外に置く */
.tl-top{display:flex;align-items:stretch;justify-content:space-between;gap:8px;min-height:34px;border-bottom:var(--bd)}
.tl-top .va-tag{display:flex;align-items:center;font-size:12.5px;padding:0 12px;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 個人勢の白い札：カードの上と左の線、見出しの段の下の線と重なって太く見えたので、右の線だけにする（2026-11-14） */
.tl-top .va-tag.org.indie{border:0;border-right:var(--bd);padding:0 12px}
.tl-play{display:inline-flex;align-items:center;gap:7px;padding:0 10px 0 6px;border:0;background:none;font-family:var(--px);font-size:12px;line-height:1;color:var(--ink);cursor:pointer;white-space:nowrap}
.tl-play i{display:grid;place-items:center;width:18px;height:18px;background:var(--coral);border:1.5px solid var(--ink)}
.tl-play i::before{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 6.5px;border-color:transparent transparent transparent #fff;margin-left:1px}
.tl-play b{font-weight:400;color:var(--mute)}
.tl-play:hover:not(:disabled) span{text-decoration:underline;text-underline-offset:3px}
.tl-play:disabled{cursor:default}
.tl-play:disabled i{background:var(--ink)}
.tl-play:disabled i::before{border:0;width:6px;height:6px;background:#fff;margin:0}
.tl-novid{display:flex;align-items:center;padding:0 10px;font-family:var(--px);font-size:11px;color:var(--mute);white-space:nowrap}
/* サムネイル：16:9のまま・無加工。線はカードの線を使う */
.tl-thumb{border-bottom:var(--bd)}
.tl-thumb .va-yt{border:0;box-shadow:none;transition:none}
.tl-thumb .va-yt:not(.playing):hover{transform:none;box-shadow:none}
.tl-thumb .va-yt button:focus-visible{outline-offset:-4px}
.tl-noimg{display:grid;place-items:center;width:100%;aspect-ratio:16/9;
  background:var(--paper) radial-gradient(rgba(21,21,21,.15) 1.1px,transparent 1.4px) 0 0/12px 12px}
.tl-noimg .va-ini{width:76px;height:76px;font-size:36px;box-shadow:var(--sh)}
/* 下の段：名前・札・項目・「タレントのページへ」。ここ全体がタレントのページへのリンク */
.tl-body{display:flex;flex-direction:column;flex:1;padding:13px 15px 0;text-decoration:none;color:inherit}
.tl-body:focus-visible{outline-offset:-4px}
.tl-body h3{font-weight:900;font-size:22px;line-height:1.3;color:var(--ink);letter-spacing:-.025em;font-feature-settings:"palt";overflow-wrap:anywhere}
.tl-body .va-tags{min-height:23px;margin:8px 0 13px}
.tl-body .va-tag{font-size:11.5px;white-space:normal}
.tl-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:auto -15px 0;border-top:1.5px dashed var(--ink)}
.tl-spec>div{padding:7px 6px 8px 10px;min-width:0}
.tl-spec>div+div{border-left:1.5px dashed var(--line)}
.tl-spec>div:first-child{padding-left:15px}
.tl-spec dt{font-family:var(--px);font-size:10px;line-height:1.5;color:var(--mute);white-space:nowrap}
.tl-spec dd{font-weight:900;font-size:13.5px;line-height:1.4;color:var(--ink)}
.tl-tbd{font-family:var(--px);font-weight:400;font-size:11px;color:var(--mute);letter-spacing:.02em}
.tl-go{display:flex;align-items:center;justify-content:space-between;margin:0 -15px;padding:10px 15px;border-top:var(--bd);background:var(--paper);font-weight:900;font-size:14px;line-height:1.2;color:var(--ink);transition:background .15s,color .15s}
.tl-go i{font-style:normal;font-family:var(--px);font-size:13px;color:var(--coral);transition:transform .2s var(--ease),color .15s}
.tl-body:hover .tl-go,.tl-body:focus-visible .tl-go{background:var(--coral);color:#fff}
.tl-body:hover .tl-go i,.tl-body:focus-visible .tl-go i{color:#fff;transform:translateX(4px)}
/* 最初の1回だけ、カードを軽く出す（絞り込みのときは出し入れだけ） */
[data-motion="on"] .tl-first .tl-item{animation:tl-in .5s var(--ease) both;animation-delay:calc(var(--i,9) * 45ms)}
.tl-item:nth-child(1){--i:0}.tl-item:nth-child(2){--i:1}.tl-item:nth-child(3){--i:2}.tl-item:nth-child(4){--i:3}.tl-item:nth-child(5){--i:4}.tl-item:nth-child(6){--i:5}.tl-item:nth-child(7){--i:6}.tl-item:nth-child(8){--i:7}.tl-item:nth-child(9){--i:8}
@keyframes tl-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.tl-item{animation:none!important}}
@media (max-width:620px){
  .tl-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .tl-body h3{font-size:21px}
}

/* --- 該当なし：フクロウ（案内役）が、次の手を案内する --- */
.tl-empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:end;max-width:680px;margin:14px 0 6px}
.tl-empty[hidden]{display:none}
.tl-empty .who{position:relative;width:120px;padding-bottom:16px}
.tl-empty .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.tl-empty .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
.tl-empty .va-say{padding:18px 20px 20px;margin-bottom:34px}
.tl-empty .va-say::before{top:auto;bottom:22px}
.tl-empty h3{font-weight:900;font-size:clamp(19px,2vw,23px);line-height:1.4;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.tl-empty p{font-weight:500;font-size:14.5px;line-height:1.75;color:var(--ink2)}
.tl-empty .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
@media (max-width:620px){
  .tl-empty{grid-template-columns:minmax(0,1fr);gap:0;justify-items:start}
  .tl-empty .who{width:92px;order:2;margin-left:8px}
  .tl-empty .va-say{margin-bottom:22px}
  .tl-empty .va-say::before{left:34px;top:auto;bottom:-12px;border:0;border-right:var(--bd);border-bottom:var(--bd)}
}

/* ===== 決めきれないとき：ツバメ（旅人）が聞いて、診断へ ===== */
.tl-next-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center}
.tl-next .guide{display:flex;align-items:flex-end;gap:18px}
.tl-next .who{position:relative;flex:none;width:150px;padding-bottom:16px}
.tl-next .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.tl-next .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(-3deg)}
.tl-next .guide .va-say{margin-bottom:84px;background:var(--paper);transform:rotate(1.5deg);white-space:nowrap}
.tl-next .guide .va-say::before{background:var(--paper);top:auto;bottom:14px}
.tl-next .va-h{margin-bottom:22px}
.tl-next .va-lead{margin-top:0}
.tl-next .acts{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:900px){
  .tl-next-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .tl-next .who{width:104px}
  .tl-next .guide .va-say{margin-bottom:50px;white-space:normal}
}

/* 一覧のサムネイル：その場で再生しない。押すとタレントのページへ（2026-11-14） */
.tl-th{display:block;line-height:0}
.tl-th img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tl-card:hover .tl-th img{filter:brightness(1.05)}
.tl-dur{font-family:var(--px);font-size:11px;color:var(--mute);white-space:nowrap}
.tl-dur b{font-family:var(--en);font-weight:800;font-size:12px;color:var(--ink);margin-left:3px}

/* ===== カードの中身（2026-11-14）：A の見た目のまま。24マスの帯（緑）＋よく配信・週の配信・1回の長さ＋中心／よく遊ぶ（下の段は横いっぱい） ===== */
.tl-strip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:1px;height:9px;margin:auto 0 10px}
.tl-strip li{position:relative;background:rgb(19 158 147 / var(--o,0));box-shadow:inset 0 0 0 1px rgba(21,21,21,.08)}
.tl-strip li.w::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ink)}
.tl-strip+.tl-spec{margin-top:0}
.tl-spec>div.wide{grid-column:1/-1;border-left:0;border-top:1.5px dashed var(--line);padding-left:15px}
.tl-spec>div.wide dd{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-spec dd .n{font-family:var(--en);font-weight:800;font-size:15px;margin-right:2px}