/* ============================================================
   導入事例（/voice/）の共通部品
   2026-09-16 一覧と個別6ページをトップの見た目（anchor_lp.css＋visual-v1.css）にそろえるために新設。
   個別ページ本文の部品（caseHero・summary・profile・story）は anchor_lp.css 側にある。
   ============================================================ */

/* サービスごとの色（点・線用 --c／文字用 --ct。8/19決定のテーマ色） */
[data-svc="oncall"]{--c:#417AD8;--ct:#2f66c2}
[data-svc="psych"]{--c:#7B6FE0;--ct:#5f52cc}
[data-svc="online"]{--c:#2BA8C4;--ct:#17839c}

/* ヘッダーの電話ボタン（スマホ） */
.hd .sp .telbtn{display:none;width:40px;height:40px;border-radius:6px;border:1.5px solid var(--blue);color:var(--blue);align-items:center;justify-content:center}
.hd .sp .telbtn svg{width:20px;height:20px}
@media(max-width:1080px){.hd .sp .telbtn{display:flex}}

/* ---------- 一覧の見出し ---------- */
.vhero{padding:40px 0 4px}
.vhero .eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--blue);border:1.5px solid var(--blue);border-radius:999px;padding:3px 14px;margin-bottom:14px}
.vhero h1{font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.35;letter-spacing:.01em;text-wrap:balance}
.vhero .lede{margin-top:12px;font-size:16.5px;color:var(--v1-sub);max-width:46em}
.vhero .lede em{font-style:normal;color:var(--v1-ink);font-weight:700;background-image:linear-gradient(transparent 62%,#ffe08a 62%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.2,.7,.2,1) .35s}
.vhero .lede em.on{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.vhero .lede em{background-size:100% 100%;transition:none}}

/* ---------- 絞り込み ---------- */
.vfilter{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 22px}
.vfilter button{font:inherit;font-size:14px;font-weight:700;color:var(--v1-sub);background:#fff;border:1px solid var(--v1-hair);border-radius:999px;padding:7px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .15s,border-color .15s,color .15s}
.vfilter button i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--blue))}
.vfilter button:hover{border-color:#b9cdee}
.vfilter button[aria-pressed="true"]{color:#fff;background:var(--v1-ink);border-color:var(--v1-ink)}
.vfilter button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- 事例カード（一覧・関連事例で共通） ---------- */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vitem{display:flex;flex-direction:column;background:#fff;border:1px solid var(--v1-hair);border-radius:12px;overflow:hidden;color:var(--v1-ink);transition:border-color .15s}
.vitem:hover{border-color:#b9cdee}
.vitem:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.vitem .ph{aspect-ratio:16/9;overflow:hidden;background:#eef3fb}
.vitem .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vitem:hover .ph img{transform:scale(1.03)}
.vitem .bd{padding:20px 22px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.vitem .vsvc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;font-weight:700;color:var(--ct)}
.vitem .vsvc i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px}
.vitem .vsvc span{font-weight:500;color:var(--gray)}
.vitem h2,.vitem h3{font-size:18px;font-weight:900;line-height:1.6;margin:0;text-wrap:pretty}
.vitem blockquote{margin:2px 0 0;padding-left:14px;border-left:3px solid var(--c);font-size:14.5px;line-height:1.9;color:var(--v1-sub)}
.vitem .fac{font-size:13.5px;color:var(--v1-sub);margin-top:auto;padding-top:6px}
.vitem .go{font-size:14.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.vitem .go i{font-style:normal;transition:transform .2s}
.vitem:hover .go i{transform:translateX(5px)}
.vitem[hidden]{display:none}
.vnote{margin:22px 0 0;font-size:13px;color:var(--gray);line-height:1.9}
.vlist{padding:0 0 92px}
@media(max-width:760px){
  .vfilter{flex-wrap:nowrap;overflow-x:auto;margin:22px -16px 18px;padding:2px 16px;scrollbar-width:none}
  .vfilter::-webkit-scrollbar{display:none}
  .vfilter button{flex:none}
  .vhero{padding:26px 0 0}
  .vhero .lede{font-size:15px}
  .vgrid{grid-template-columns:1fr;gap:16px}
  .vitem .bd{padding:16px 16px 18px}
  .vitem h2,.vitem h3{font-size:16.5px}
  .vlist{padding-bottom:64px}
}

/* 関連事例（個別ページの下） */
.vrel .vgrid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;margin:0 auto}
.vrel .vitem h3{font-size:16px}
.vrel .vitem blockquote{display:none}
.vrel .more{text-align:center;margin-top:28px}
.vrel .more a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.vrel .vgrid{grid-template-columns:1fr;max-width:560px}}

/* ---------- 相談帯（一覧） ---------- */
.midcta .midlead{text-align:center;font-size:22px;font-weight:900;margin-bottom:22px}
.midcta .midlead small{display:block;font-size:15px;font-weight:500;color:var(--v1-sub);margin-top:4px}
.midcta .midtel{text-align:center;margin-top:16px;font-size:14.5px;color:var(--v1-sub)}
.midcta .midtel a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){
  .midcta .midlead{font-size:18px}
  .midcta .bigbtn{padding:13px 16px}
  .midcta .bigbtn small{font-size:12px;margin-top:2px}
}

/* ---------- 個別ページ：旧版から移した写真・引用の添え書き ---------- */
.casePhoto + .cap{font-size:13px;color:var(--gray);text-align:right;margin-top:8px}
.profpic{max-width:860px;margin:0 auto 18px;border-radius:12px;overflow:hidden;background:#eef3fb}
.profpic img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.story figure.shot{margin:30px 0}
.story figure.shot img{width:100%;height:auto;border-radius:10px;display:block}
.story figure.shot figcaption{font-size:13px;color:var(--gray);margin-top:8px;text-align:right}
.story .pullby{text-align:right;font-size:14.5px;color:var(--gray);margin-top:-8px}
.story .notes{font-size:13.5px;color:var(--gray);line-height:2;border-top:1px dotted var(--line);padding-top:22px;margin-top:36px}
.stitle .sumnote{margin-top:16px;font-size:15px;color:var(--v1-sub);line-height:2}
@media(max-width:600px){.profpic img{aspect-ratio:16/9}}