/* 先輩の声（一覧 voices.html と個別ページ voices/*.html）。2026-11-02 ユーザー承認の試作から。style.css の上に重ねる（色・文字の変数はサイトのもの）
   ほかのページに影響しないよう、セレクタは .vp- .vl- .vflow で始まるものだけにする */
:root {
  --vp-mincho: var(--font-mincho);
  --vp-gap: 56px;
  --vp-q-col: 232px;
}

/* ===== 共通：題の書体 ===== */
.vp-title, .vl-title, .vp-q, .vp-msg, .vl-intro__title, .vp-related__title {
  font-family: var(--vp-mincho);
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: .02em;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}
.vl-who, .vp-who { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink-sub); }

/* ===== 個別ページ：頭 ===== */
.vp-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--vp-gap); align-items: start; padding-top: 20px; padding-bottom: 56px; }
.vp-head--plain { grid-template-columns: minmax(0, 880px); }
.vp-title { font-size: clamp(27px, 3.3vw, 44px); line-height: 1.5; letter-spacing: 0; }
.vp-who { margin-top: 24px; font-size: 15px; }
.vp-photo { margin: 8px 0 0; }
.vp-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.vp-photo--tall img { aspect-ratio: 1050 / 1204; }

/* ===== 個別ページ：問いは左の欄、答えは右 ===== */
.vp-row { display: grid; grid-template-columns: var(--vp-q-col) minmax(0, 720px); gap: var(--vp-gap); align-items: start; padding-bottom: 52px; }
.vp-q { margin: 0; padding-top: 5px; font-size: 18px; line-height: 1.7; }
.vp-a { line-height: 2; font-size: 17px; }
/* 答えの長さで文字の大きさを変える：短い答えはそれだけで読ませる */
.vp-a--m { font-size: clamp(18px, 1.6vw, 20px); font-weight: 500; line-height: 1.9; }
.vp-a--s { font-size: clamp(23px, 2.2vw, 26px); font-weight: 700; line-height: 1.55; font-feature-settings: "palt"; letter-spacing: .03em; word-break: auto-phrase; }

/* ===== 難しかったこと→工夫→結果：縦の矢印 ===== */
.vflow { margin: 0; padding: 0; list-style: none; }
.vflow__step { position: relative; padding: 0 0 36px 32px; }
.vflow__step::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 8px; width: 2px; background: var(--ink); }
.vflow__step::after { content: ""; position: absolute; left: 3px; bottom: 7px; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.vflow__step.is-last { padding-bottom: 0; }
.vflow__step.is-last::before, .vflow__step.is-last::after { display: none; }
.vflow__label { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--ink-sub); }
.vflow__step.is-last .vflow__label { color: var(--ink); }
.vflow__text { margin-top: 4px; font-size: 17px; line-height: 2; }
.vflow__text--strong { font-weight: 500; }
.vflow__text--big { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.6; font-feature-settings: "palt"; letter-spacing: .03em; word-break: auto-phrase; }

/* ===== つくったツール（個別） ===== */
.vp-tool { margin-top: 32px; }
.vp-tool__label { font-size: 14px; font-weight: 700; color: var(--ink-sub); }
.vp-tool__item { margin: 8px 0 0; }
.vp-tool__item img, .vp-tool__item video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }
.vp-tool__item figcaption { margin-top: 12px; font-size: 15px; line-height: 1.9; }
.vp-tool__item strong { display: block; font-size: 17px; font-weight: 700; }

/* ===== 応募を考えている人へ ===== */
.vp-msg { font-size: clamp(25px, 2.9vw, 32px); line-height: 1.55; }

/* ===== 働き方と応募（箱にしない。同じ2列に並べる） ===== */
.vp-row--next.voice-next { margin: 0; padding: 28px 0 48px; border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none; }
.vp-row--next .voice-next__title { margin-top: 0; }
.vp-row--next .actions { text-align: left; }
.vp-pager { padding-top: 0; }
/* 本文の青をやめる（style.css の .voice-pager の hover は青のため、ここで上書き） */
.vp-pager a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.vp-related { padding: 48px 0 64px; background: var(--gray); }
.vp-related__title { margin: 0 0 28px; font-size: clamp(22px, 2.2vw, 24px); line-height: 1.5; }

/* ===== 一覧：上部 ===== */
.vl-intro { padding: 16px 0 28px; }
.vl-intro__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--vp-gap); align-items: start; }
.vl-intro__title { font-size: clamp(34px, 4vw, 44px); line-height: 1.3; }
.vl-intro__lead { margin-top: 20px; max-width: 26em; font-size: 17px; line-height: 2; color: var(--ink); word-break: auto-phrase; }
.vl-stat { margin: 32px 0 0; }
.vl-stat dt { font-size: 14px; font-weight: 500; color: var(--ink-sub); }
.vl-stat dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.vl-stat .num { margin-right: 3px; font-size: 44px; font-weight: 700; line-height: 1.15; }
.vl-intro__map { position: relative; }
.vl-stat--map { position: absolute; left: 0; top: 0; margin: 0; }
.vl-map { display: block; width: 100%; max-height: 500px; overflow: visible; }
.vl-prefs { display: none; }

/* ===== 一覧：絞り込み（ピルをやめて文字のタブに） ===== */
.vl-filter:not([hidden]) { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.vl-filter__tab { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; margin-bottom: -1px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-sub); cursor: pointer; }
.vl-filter__tab .num { font-size: 13px; font-weight: 700; }
.vl-filter__tab:hover { color: var(--ink); }
.vl-filter__tab[aria-pressed="true"] { border-bottom-color: var(--ink); font-weight: 700; color: var(--ink); }

/* ===== 一覧：カード ===== */
.vl-list { padding-bottom: 64px; }
.vl-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; margin: 0; padding: 0; list-style: none; }
.vl-grid > li.is-wide { grid-column: span 2; }
.vl-grid a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.vl-title { display: block; letter-spacing: .01em; font-size: clamp(18px, 1.55vw, 20px); line-height: 1.65; }
.vl-who { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.vl-grid a:hover .vl-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.vl-grid a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* 写真の先輩 */
.vl-photo__img { display: block; margin-bottom: 16px; overflow: hidden; border-radius: 3px; background: var(--gray); }
.vl-photo__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }/* 写真もツールもない先輩：文字だけ。上の線で区切る */
.vl-text { padding-top: 16px; border-top: 1px solid var(--ink); }
.vl-text .vl-who { margin-top: auto; padding-top: 12px; }

/* ツールをつくった先輩：黒い2列カード。画面をふちまで広げ、黒い面は文字の側だけにする */
.vl-grid a.vl-tool { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 372px; overflow: hidden; border-radius: 6px; background: var(--black); color: var(--on-dark); }
.vl-tool__screen { position: relative; display: block; min-height: 100%; background: #fff; }
.vl-tool__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.vl-tool__screen.is-center { background: #f8f5ee; }
.vl-tool__screen.is-center img { object-fit: contain; object-position: center; }
.vl-tool__body { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 22px; }
.vl-tool__badge { align-self: flex-start; margin-bottom: 18px; padding: 3px 9px; border-radius: 3px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.6; }
.vl-tool .vl-who { margin-top: auto; padding-top: 16px; color: var(--on-dark-sub); }

/* ===== タブレット以下 ===== */
@media (max-width: 1000px) {
  .vl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .vp-head { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .vp-row { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
  .vl-intro__inner { grid-template-columns: 1fr; gap: 24px; }
  .vl-intro__lead { font-size: 16px; margin-top: 12px; }
  .vl-stat { margin-top: 20px; }
  .vl-stat--map { left: 50%; top: -44px; transform: translateY(-100%); }
  .vl-map { max-height: none; }
  .vl-prefs { display: block; margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--ink-sub); }
  .vl-filter:not([hidden]) { gap: 0 20px; margin-bottom: 28px; }
  .vl-filter__tab { font-size: 14px; }
  .vp-head, .vp-head--plain { grid-template-columns: 1fr; gap: 20px; padding-top: 12px; padding-bottom: 36px; }
  .vp-who { margin-top: 16px; font-size: 14px; }
  .vp-photo { margin: 0; max-width: 240px; }
  .vp-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 36px; }
  .vp-msg, .vflow__text--big, .vp-a--s { overflow-wrap: anywhere; }
  .vp-q { padding-top: 0; font-size: 17px; }
  .vp-a { font-size: 16px; }
  .vp-a--m { font-size: 18px; }
  .vp-a--s { font-size: 23px; }
  .vflow__step { padding-left: 26px; padding-bottom: 28px; }
  .vflow__text { font-size: 16px; }
  .vflow__text--big { font-size: 20px; }
  .vp-row--next.voice-next { padding: 24px 0 32px; }
  .vp-related { padding: 40px 0 48px; }
}
@media (max-width: 640px) {
  .vl-grid { grid-template-columns: 1fr; gap: 40px; }
  .vl-grid > li.is-wide { grid-column: auto; }
  .vl-grid a.vl-tool { display: flex; min-height: 0; }
  .vl-tool__screen { aspect-ratio: 16 / 10; min-height: 0; }
  .vl-tool__body { padding: 20px; }
  .vl-text { padding-top: 14px; }
  .vl-text .vl-who { margin-top: 10px; padding-top: 0; }
  .vl-tool .vl-who { margin-top: 14px; padding-top: 0; }
}