@charset "UTF-8";

/*
 * 転職者の声 一覧ページ（page-voice-list.php）専用スタイル
 *
 * 読み込みは functions.php の co_design_enqueue_voice_list_assets() が
 * このテンプレートのときだけ行う。
 *
 * すべてのセレクタを .voice-list-page 配下に閉じ込めること。
 * このページのデザインは px 基準で、テーマ本体の vw 基準（html { font-size: 0.52vw }）とは
 * 座標系が違うため、外へ漏れるとヘッダー・フッターが崩れる。
 */

.voice-list-page,
.voice-list-page *,
.voice-list-page *::before,
.voice-list-page *::after {
  box-sizing: border-box;
}

/* テーマのヘッダーは position: fixed（PCは .logo-image が 8.9vw、
   SPは .sp-header-btn が 100px）。その下から始まるように余白を確保する。 */
.voice-list-page {
  background: #EDEAE2;
  color: #20201D;
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 9.6vw;
}

.voice-list-page a { color: #162A59; }
.voice-list-page a:hover { opacity: 0.72; }

/* -- パンくず（テーマ共通のマークアップをこのページの意匠に寄せる） -- */
.voice-list-page .breadcrumb {
  height: auto;
  background: transparent;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 0;
}
.voice-list-page .breadcrumb__inner {
  margin-left: 0;
  height: auto;
}
.voice-list-page .breadcrumb__link,
.voice-list-page .breadcrumb__current {
  color: #8a887f;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
}
.voice-list-page .breadcrumb__sep {
  height: 8px;
  fill: #B0AA9C;
}

/* -- 全体の器 -- */
.voice-list-page .voice-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px 56px;
}
.voice-list-page .voice-sheet {
  background: #FBFAF7;
  border: 1px solid #E3E0D8;
  padding: 64px 72px;
}

/* -- ページ見出し -- */
.voice-list-page .voice-page-head { margin: 0 0 40px; }
.voice-list-page .voice-kicker {
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #162A59;
  margin: 0 0 16px;
}
.voice-list-page .voice-quote-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.voice-list-page .voice-quote-mark {
  font-family: 'Noto Serif JP', serif;
  font-size: 64px;
  line-height: 1;
  color: #C7CEDD;
}
.voice-list-page .voice-page-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 34px;
  font-weight: 700;
  margin: 8px 0 0;
  line-height: 1.4;
  color: #20201D;
}
.voice-list-page .voice-lead {
  font-size: 17px;
  line-height: 1.9;
  color: #3a3934;
  margin: 18px 0 0;
  max-width: 760px;
}
.voice-list-page .voice-rule {
  width: 56px;
  height: 2px;
  background: #162A59;
  margin: 28px 0 0;
}

/* -- 掲載件数 -- */
.voice-list-page .voice-count-bar {
  display: flex;
  align-items: center;
  margin: 0 0 40px;
  padding: 20px 28px;
  background: #E6EAF2;
  border: 1px solid #D6DCE9;
  font-size: 14px;
}
.voice-list-page .voice-count-num {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 18px;
}

/* -- 絞り込み -- */
.voice-list-page .voice-filters {
  border: 1px solid #E3E0D8;
  padding: 28px 32px;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.voice-list-page .voice-filter-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.voice-list-page .voice-filter-label {
  width: 96px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: #8a887f;
}
.voice-list-page .voice-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* チップは button 要素。ブラウザ既定の外観を打ち消してから意匠を当てる */
.voice-list-page .voice-chip {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid #D8D5CB;
  border-radius: 999px;
  background: none;
  color: #20201D;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.voice-list-page .voice-chip:hover { border-color: #B0AA9C; }
.voice-list-page .voice-chip.is-active {
  border-color: #162A59;
  background: #E6EAF2;
  color: #162A59;
}
.voice-list-page .voice-chip:focus-visible {
  outline: 2px solid #162A59;
  outline-offset: 2px;
}

/* -- カード一覧 -- */
.voice-list-page .voice-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 28px;
}
.voice-list-page .voice-card {
  border: 1px solid #E3E0D8;
  background: #FBFAF7;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.voice-list-page .voice-card:hover {
  border-color: #162A59;
  background: #FCFBF9;
}
/* 絞り込みで外れたカード（js/voice-list-filter.js が付け外しする） */
.voice-list-page .voice-card.is-hidden { display: none; }

.voice-list-page .voice-card__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #20201D;
  line-height: 1.5;
  text-decoration: none;
  display: block;
}
.voice-list-page .voice-card__person {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* 顔を描かないイラストアイコン（images/voice-avatars/）。
   画像は縦長なので object-fit で円の中に収める。 */
.voice-list-page .voice-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #D8D5CB;
  background: #E6EAF2;
  object-fit: cover;
  object-position: center top;
}

/* アイコン未設定のときの代替。表示名の頭文字を円の中に置く */
.voice-list-page .voice-avatar--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 15px;
  color: #FBFAF7;
  background: #162A59;
  letter-spacing: .02em;
}
.voice-list-page .voice-card__name {
  font-family: 'Noto Serif JP', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #20201D;
}
.voice-list-page .voice-card__sub {
  font-size: 13px;
  color: #6b6a63;
  margin-left: 6px;
}
.voice-list-page .voice-card__path {
  font-size: 13px;
  color: #6b6a63;
  margin-top: 8px;
  line-height: 1.6;
}
.voice-list-page .voice-card__arrow { color: #B0AA9C; }
.voice-list-page .voice-card__excerpt {
  font-size: 15px;
  line-height: 1.85;
  color: #3a3934;
  margin: 0;
}
.voice-list-page .voice-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #EDEAE2;
  padding-top: 14px;
  margin-top: 4px;
}
.voice-list-page .voice-card__consultant {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6b6a63;
}
.voice-list-page .voice-card__consultant a {
  text-decoration: none;
  border-bottom: 1px solid #162A59;
}
.voice-list-page .voice-avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 11px;
  color: #FBFAF7;
  border: 1px solid #D8D5CB;
  background: #5a6b60;
}
.voice-list-page .voice-badge {
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid #D6DCE9;
  background: #E6EAF2;
  color: #162A59;
}

/* -- 該当0件 -- */
.voice-list-page .voice-empty {
  display: none;
  text-align: center;
  color: #8a887f;
  font-size: 14px;
  padding: 36px 0;
}
.voice-list-page .voice-empty.is-shown { display: block; }

/* -- CTA -- */
.voice-list-page .voice-cta {
  border-top: 1px solid #E3E0D8;
  padding-top: 40px;
  text-align: center;
}
.voice-list-page .voice-cta__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  margin: 0 0 28px;
}
.voice-list-page .voice-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.voice-list-page .voice-cta__btn {
  padding: 16px 36px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.voice-list-page .voice-cta__btn.is-primary {
  background: #162A59;
  color: #FBFAF7;
}
.voice-list-page .voice-cta__btn.is-secondary {
  background: transparent;
  color: #162A59;
  border: 1px solid #162A59;
}
.voice-list-page .voice-cta__sub {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.85;
}

.voice-list-page .voice-page-note {
  text-align: center;
  font-size: 12px;
  color: #8a887f;
  margin: 32px 0 0;
}

/* ===================== タブレット・SP ===================== */
/* 820px 以下でテーマのヘッダーがSP版（固定・実高100px）に切り替わる */
@media screen and (max-width: 820px) {
  .voice-list-page { padding-top: 108px; }
}

@media screen and (max-width: 1180px) {
  .voice-list-page .breadcrumb { padding: 24px 20px 0; }
  .voice-list-page .breadcrumb__link,
  .voice-list-page .breadcrumb__current { font-size: 11.5px; }

  .voice-list-page .voice-wrap { padding: 14px 20px 32px; }
  .voice-list-page .voice-sheet { padding: 28px 18px; }

  .voice-list-page .voice-page-head { margin: 0 0 24px; }
  .voice-list-page .voice-kicker { font-size: 10px; letter-spacing: 0.18em; margin: 0 0 10px; }
  .voice-list-page .voice-quote-mark { font-size: 40px; }
  .voice-list-page .voice-page-title { font-size: 24px; margin: 5px 0 0; }
  .voice-list-page .voice-lead { font-size: 15px; line-height: 1.8; margin: 12px 0 0; }
  .voice-list-page .voice-rule { width: 40px; margin: 18px 0 0; }

  .voice-list-page .voice-count-bar { margin: 0 0 24px; padding: 14px 16px; font-size: 12.5px; }
  .voice-list-page .voice-count-num { font-size: 15px; }

  .voice-list-page .voice-filters { padding: 0; border: none; gap: 10px; margin: 0 0 24px; }
  .voice-list-page .voice-filter-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .voice-list-page .voice-filter-label { width: auto; }
  .voice-list-page .voice-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; width: 100%; }
  .voice-list-page .voice-chip { padding: 7px 16px; font-size: 12.5px; }

  .voice-list-page .voice-list { gap: 16px; margin: 0 0 20px; }
  .voice-list-page .voice-card { padding: 20px; gap: 12px; }
  .voice-list-page .voice-card__title { font-size: 14.5px; }
  .voice-list-page .voice-card__excerpt { font-size: 13.5px; }
  .voice-list-page .voice-avatar { width: 44px; height: 44px; font-size: 14px; }

  .voice-list-page .voice-cta { padding-top: 28px; }
  .voice-list-page .voice-cta__title { font-size: 17px; margin: 0 0 20px; }
  .voice-list-page .voice-cta__buttons { flex-direction: column; gap: 12px; }
  .voice-list-page .voice-cta__btn { padding: 15px; font-size: 14px; }

  .voice-list-page .voice-page-note { font-size: 11px; margin: 24px 0 0; }
}

/* =====================================================================
 * 転職者の声 個別ページ（single-voice.php）
 *
 * レイアウトは記事詳細（.company-analysis-single）のCSSをそのまま使う。
 * ここに書くのは、記事には無い「人物情報ブロック」と
 * サイドバーの「他の転職者の声」カードだけ。
 * 上の一覧ページ用のルールには手を入れていない。
 * ===================================================================== */

.voice-single__head {
  display: flex;
  align-items: center;
}

.voice-single__person {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2.8rem 3.2rem;
  background: var(--white-01-f-1-eff-0, #F1EFF0);
  border-radius: 0.8rem;
  box-sizing: border-box;
}

.voice-single__avatar {
  width: 8.8rem;
  height: 8.8rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  border: 1px solid #D8D5CB;
  background: #E6EAF2;
}

/* アイコン未設定のときの代替（一覧側と同じ考え方） */
.voice-single__avatar--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: #FBFAF7;
  background: #162A59;
}

.voice-single__person-body {
  min-width: 0;
}

.voice-single__name {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 2rem, 26px);
  font-weight: 700;
  color: #20201D;
  margin: 0;
  line-height: 1.5;
}

.voice-single__sub {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11px, 1.4rem, 18px);
  font-weight: 400;
  color: #535A6B;
  margin-left: 0.8rem;
}

.voice-single__path {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11px, 1.4rem, 18px);
  color: #535A6B;
  margin: 0.8rem 0 0;
  line-height: 1.7;
}

.voice-single__arrow { color: #9aa0ae; }

.voice-single__consultant {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 1.3rem, 17px);
  color: #535A6B;
  margin: 0.8rem 0 0;
}

.voice-single__consultant a {
  color: #0D355C;
  text-decoration: none;
  border-bottom: 1px solid #0D355C;
}

.voice-single__note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 1.2rem, 16px);
  line-height: 1.8;
  color: #8a887f;
  margin: 4rem 0 0;
}

/* -- サイドバー「他の転職者の声」 -- */
.voice-sidebar-card__link {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  text-decoration: none;
  color: inherit;
}

.voice-sidebar-card__avatar {
  width: 4.4rem;
  height: 4.4rem;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  border: 1px solid #D8D5CB;
  background: #E6EAF2;
  font-size: 1.2rem;
}

.voice-sidebar-card__body {
  display: block;
  min-width: 0;
}

.voice-sidebar-card__name {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(11px, 1.4rem, 18px);
  font-weight: 700;
  color: #20201D;
  line-height: 1.5;
}

.voice-sidebar-card__sub {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 1.2rem, 16px);
  font-weight: 400;
  color: #535A6B;
}

.voice-sidebar-card__title {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 1.3rem, 17px);
  line-height: 1.7;
  color: #535A6B;
  margin-top: 0.6rem;
}

.voice-sidebar-card__link:hover .voice-sidebar-card__title { color: #0D355C; }

@media screen and (max-width: 820px) {
  .voice-single__person { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .voice-single__avatar { width: 56px; height: 56px; }
  .voice-single__sub { display: block; margin-left: 0; }
}

/* -- パンくず --
 * style.css の .breadcrumb は「ヒーローの下に敷く濃色バー」が既定で、
 * 記事詳細だけ .single-knowhow / .single-column …… で明るいバーに上書きしている。
 * .single-voice はその列挙に入っていないので、ここで同じ補正を当てる。
 * 声の見出しは記事タイトルより長くなりがちなので、現在地は省略記号で畳む。 */
.single-voice .breadcrumb {
  width: 100%;
  max-width: 100%;
  height: 5rem;
  flex-shrink: 0;
  background: var(--white-01-f-1-eff-0, #F1EFF0);
  display: flex;
  margin-bottom: 4.8rem;
  overflow: hidden;
  box-sizing: border-box;
}

.single-voice .breadcrumb__inner {
  margin-left: 0;
  width: 100%;
  min-width: 0;
}

.single-voice .breadcrumb__link,
.single-voice .breadcrumb__current {
  color: var(--dark-03535-a-6-b, #535A6B);
  font-size: clamp(9px, 1.1rem, 180px);
  white-space: nowrap;
}

.single-voice .breadcrumb__link,
.single-voice .breadcrumb__sep {
  flex-shrink: 0;
}

/* 現在地だけを縮ませる。flex の子は min-width: 0 にしないと縮まない */
.single-voice .breadcrumb__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-voice .breadcrumb__sep {
  fill: var(--dark-03535-a-6-b, #535A6B);
}