@charset "UTF-8";
/* ==========================================================================
   受講者の声（/voice/）
   ・畳んだ状態で見せる文言は、旧サイトの投稿タイトル（本文からの抜き出し）
   ・251件を1ページに載せるため、初期状態は畳んでおく
   ========================================================================== */

.voice-intro {
  font-size: 15.5px; line-height: 2; color: var(--text-muted);
  margin: 0;
}
.voice-intro strong { color: var(--text); }

.voice-note { font-size: 13px; color: var(--text-muted); margin: -28px 0 20px; }
.voice-disclaimer {
  margin: 40px 0 0; font-size: 12.5px; color: var(--text-muted);
  padding-top: 20px; border-top: 1px solid var(--line);
}

/* --- お客様インタビュー -------------------------------------------------- */
.iv {
  display: grid; grid-template-columns: 168px 1fr; gap: 28px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.iv:first-of-type { border-top: 2px solid var(--brand); }
.iv__photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%;
  border-radius: 8px; display: block;
  box-shadow: 0 12px 28px rgba(59,87,48,.20);
}
.iv__org {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--c-forest); margin: 0 0 3px; line-height: 1.5;
}
.iv__who { font-size: 13.5px; color: var(--text-muted); margin: 0 0 16px; }
.iv__text { font-size: 15px; line-height: 2.05; color: var(--text); }
.iv__text p { margin: 0 0 1.1em; }
.iv__text strong { color: var(--c-forest); }

/* --- とくに反響の大きかった声 -------------------------------------------- */
.pick {
  padding: 30px 32px; margin-bottom: 22px;
  background: var(--c-white); border-radius: 12px;
  border-left: 4px solid var(--c-accent);
  box-shadow: 0 10px 28px rgba(59,87,48,.10);
}
.pick__cat {
  display: inline-block; margin: 0 0 12px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--a-orange-ink); background: color-mix(in srgb, var(--a-orange) 10%, #fff);
  padding: 4px 12px; border-radius: 999px;
}
.pick__quote {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  line-height: 1.7; color: var(--c-forest); margin: 0 0 16px;
}
.pick__text { font-size: 14.5px; line-height: 2.05; color: var(--text-muted); }
.pick__text p { margin: 0 0 1.1em; }
.pick__text p:last-child { margin-bottom: 0; }

/* --- カテゴリの絞り込み --------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.chip {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--c-forest); background: var(--c-white);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.chip b { font-family: var(--font-heading); margin-left: 4px; opacity: .65; }
.chip:hover { border-color: var(--c-forest); }
.chip.is-on { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }
.chip.is-on b { opacity: .8; }

/* --- そのほかの声（畳んだ一覧） ------------------------------------------- */
.vlist { border-top: 1px solid var(--line); }
.v { border-bottom: 1px solid var(--line); background: var(--c-white); }
.v > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start;
  padding: 15px 16px;
  transition: background .2s;
}
.v > summary::-webkit-details-marker { display: none; }
.v > summary:hover { background: var(--surface); }
.v__cat {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 700;
  color: var(--c-forest); background: var(--surface);
  padding: 4px 9px; border-radius: 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v__q {
  font-size: 14px; line-height: 1.75; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.v[open] .v__q { -webkit-line-clamp: unset; color: var(--c-forest); font-weight: 600; }
.v__text {
  padding: 4px 20px 26px 160px;
  font-size: 14.5px; line-height: 2.05; color: var(--text-muted);
}
.v__text p { margin: 0 0 1.1em; }
.v__text p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .iv { grid-template-columns: 110px 1fr; gap: 18px; padding: 26px 0; }
  .iv__text { font-size: 14.5px; }
  .pick { padding: 24px 20px; }
  .pick__quote { font-size: 16px; }
  .v > summary { grid-template-columns: 1fr; gap: 7px; padding: 14px 12px; }
  .v__cat { justify-self: start; }
  .v__text { padding: 4px 12px 22px; }
}