/* ============================================================
   社員の声 追加ブロック（B: 技術者・リーダーの話 / C: 新卒の方へ）
   ------------------------------------------------------------
   ・すべて .cdv 配下にスコープ（既存CSSと衝突しにくい命名）
   ・フォントと本文色は親要素から継承（サイトの書体にそのまま揃う）
   ・色味を合わせるときに変更するのは、下の変数ブロックだけ
   ・固定ヘッダーがあるサイトでは --cdv-sticky-top にヘッダーの高さを指定
   ============================================================ */
.cdv{
  /* ▼ サイトの配色に合わせて差し替える */
  --cdv-ink:    #353535;  /* 見出し・強調（サイトの見出し色） */
  --cdv-accent: #33A600;  /* タグ・リンク強調・選択状態（サイトのメインカラー） */
  --cdv-band:   #c3c3c333;  /* 「新卒の方へ」ブロックの背景（サイトの薄い背景色） */
  /* ▲ ここまで */
  --cdv-muted:  #5a6678;
  --cdv-line:   #d6dce5;
  --cdv-surface:#fff;
  --cdv-radius: 6px;
  --cdv-sticky-top: 0px;   /* サイトに固定ヘッダーがあれば、その高さ（例: 72px） */
 
  margin-top:48px;
  font:inherit;
  line-height:1.75;
  color:inherit;
}
.cdv *,.cdv *::before,.cdv *::after{box-sizing:border-box}
.cdv ul{list-style:none;margin:0;padding:0}
.cdv a{color:inherit}
.cdv :focus-visible{outline:3px solid var(--cdv-accent);outline-offset:2px}
.cdv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cdv .is-off{display:none}
 
/* 見出し：サイト側のh3装飾（罫線・擬似要素）を打ち消す */
.cdv .cdv-h{margin:0 0 4px;padding:0;border:0;background:none;font-size:1.25em;line-height:1.5;color:var(--cdv-ink)}
.cdv .cdv-h::before,.cdv .cdv-h::after{content:none}
.cdv-lead{margin:0 0 12px;color:var(--cdv-muted);font-size:.9em;max-width:62em}
.cdv-block{margin-top:40px}
.cdv-filter + .cdv-block{margin-top:20px}
 
/* ---------- 領域フィルター（画面上部に固定。中身はJSが生成） ---------- */
.cdv-filter{
  position:sticky;top:var(--cdv-sticky-top);z-index:30;
  padding:10px 16px;background:var(--cdv-surface);
  border:1px solid var(--cdv-line);border-radius:var(--cdv-radius);
  box-shadow:0 2px 8px rgba(22,32,51,.08);
}
.cdv-filter[hidden]{display:none}
.cdv-filter__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.cdv-filter__row[hidden]{display:none}
.cdv-filter__row--result{margin-top:8px;padding-top:8px;border-top:1px dashed var(--cdv-line)}
.cdv-filter__label{margin:0;font-weight:700;font-size:.9em;line-height:1.5}
.cdv-filter__label small{display:block;font-weight:400;font-size:.85em;color:var(--cdv-muted)}
.cdv-filter__chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.cdv-pick{font:inherit;font-size:.85em;cursor:pointer;padding:.1em .9em;border-radius:999px;border:1px solid var(--cdv-accent);background:transparent;color:var(--cdv-accent)}
.cdv-pick:hover{background:var(--cdv-band)}
.cdv-pick[aria-pressed="true"]{background:var(--cdv-accent);color:#fff}
.cdv-pick[aria-pressed="true"]::before{content:"✓ "}
 
/* 結果表示（件数 + 一致した人へのジャンプリンク） */
.cdv-result{margin:0;flex:1;min-width:0;font-size:.875em}
.cdv-result strong{color:var(--cdv-accent)}
.cdv-result a{margin-left:.9em;font-weight:700;color:var(--cdv-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cdv-result a:hover{color:var(--cdv-accent)}
.cdv-only{display:inline-flex;align-items:center;gap:6px;font-size:.85em;cursor:pointer;white-space:nowrap}
.cdv-only input{margin:0;accent-color:var(--cdv-accent)}
.cdv-clear{font:inherit;font-size:.85em;padding:4px 2px;color:var(--cdv-muted);background:none;border:0;text-decoration:underline;cursor:pointer;white-space:nowrap}
 
/* ---------- 領域タグ ---------- */
.cdv-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.cdv-tag{display:inline-flex;align-items:center;justify-content:center;gap:.3em;font-size:.78em;line-height:1;padding:.45em .85em;white-space:nowrap;text-align:center;border:1px solid var(--cdv-accent);color:var(--cdv-accent)}
.cdv-tag.is-hit{background:var(--cdv-accent);color:#fff}
.cdv-tag.is-hit::before{content:"✓"}
.cdv-tag--all{border:1px dashed var(--cdv-muted);color:var(--cdv-muted)}
.cdv-hitmark{font-size:.78em;font-weight:700;color:var(--cdv-accent)}
 
/* ---------- 共通：名前・肩書き・リンク行 ---------- */
.cdv-item{scroll-margin-top:calc(var(--cdv-sticky-top) + var(--cdv-bar-h, 120px) + 16px)}
.cdv-item.is-flash{outline:3px solid var(--cdv-accent);outline-offset:-3px}
.cdv-name{margin:0;font-weight:700;line-height:1.5;color:var(--cdv-ink);text-align:left;}
.cdv-role{margin:0;font-size:.85em;color:var(--cdv-muted);text-align:left;}
.cdv-summary{margin:15px 0 5px;font-size:.9em;text-align:left}
.cdv-meta{margin:8px 0 0;font-size:.85em}
.cdv-meta a{font-weight:700;color:var(--cdv-accent)}
 
/* ---------- 先輩エンジニアの話（帯 + カード） ---------- */
.cdv-panel{padding:20px 20px 22px;background:var(--cdv-band)}
.cdv-panel .cdv-lead{color:var(--cdv-ink);opacity:.8}
.cdv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cdv-card{display:flex;flex-direction:column;padding:35px 20px 0px;background:var(--cdv-surface);border-top:4px solid var(--cdv-accent)}
.cdv-card.is-hit{box-shadow:0 0 0 2px var(--cdv-accent)}
.cdv-card .cdv-name{font-size:1.0625em}
.cdv-card .cdv-role{font-size:.78em;line-height:1.55}
.cdv-card .cdv-tags{margin-top:4px}
.cdv-card .cdv-summary{margin:15px 0 5px;font-size:.84em;line-height:1.65}
.cdv .cdv-topics,.cdv .cdv-topics *{text-align:left}
.cdv-topics{margin:10px 0;padding:10px;background:var(--cdv-band);border-radius:var(--cdv-radius)}
.cdv-topics__title{margin:0 0 1px;font-size:.74em;font-weight:700;color:var(--cdv-muted)}
.cdv .cdv-topics ul{list-style:disc;padding-left:1.1em;font-size:.78em;line-height:1.55}
.cdv-card .cdv-meta{margin-top:auto;padding-top:8px;font-size:.8em}
 
/* ---------- 「すべて表示」モードで、一致しない項目を薄くする ---------- */
.cdv-item.is-dim{opacity:.5;transition:opacity .15s}
.cdv-item.is-dim:hover,.cdv-item.is-dim:focus-within{opacity:1}
 
/* ---------- スマホ：固定バーを低く保つ ---------- */
@media (max-width:1000px) and (min-width:721px){
  .cdv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cdv-grid{grid-template-columns:1fr}
  .cdv-panel{padding:20px 14px 22px}
  .cdv-filter{padding:8px 12px}
  .cdv-filter__row{flex-wrap:nowrap}
  .cdv-filter__label small{display:none}
  .cdv-filter__label{white-space:nowrap;font-size:.8em}
  .cdv-filter__chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .cdv-pick{white-space:nowrap}
  .cdv-filter__row--result{flex-wrap:wrap}
  .cdv-result{flex-basis:100%;white-space:nowrap;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){.cdv-item.is-dim{transition:none}}