/* お客様の声（voice.html）。色と書体は style.css の変数を使う */
.vo-wrap { padding: 48px 32px 96px; }  /* .section が .wrap の左右の余白を0にするので、ここで付け直す */
.vo-h1 { font-family: var(--serif); font-size: clamp(30px, 3.5vw, 52px); line-height: 1.18; letter-spacing: -.03em; color: var(--black); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.vo-count { color: var(--gold); font-size: .9em; }
.vo-count small { font-size: .45em; margin-left: 2px; }

.vo-filter { margin-top: 32px; display: grid; gap: 14px; }
.vo-filter .voice-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.vo-filter .vtab { background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; color: var(--text); }
.vo-filter .vtab.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.vo-filter .vtab small, .vo-chip small { margin-left: 6px; font-weight: 700; opacity: .75; }
.vo-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vo-chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
.vo-chip.active { background: var(--black); border-color: var(--black); color: #fff; }
.vo-filter .vtab:focus-visible, .vo-chip:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.vo-shown { font-size: 13px; color: var(--text); font-weight: 700; }

.vo-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.vo-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.vo-card[hidden] { display: none; }
.vo-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--text); }
.vo-type { background: var(--beige); color: var(--gold); border-radius: 999px; padding: 2px 10px; font-weight: 900; }
.vo-type.biz { color: var(--green); }
.vo-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.85; color: var(--black); }
.vo-back { margin-top: 40px; text-align: center; }
@media (max-width: 600px) {
  .vo-wrap { padding: 24px 16px 64px; }
  .vo-card { padding: 16px 18px; }
}