/*
  リレーインタビュー / 個別コンポーネント
  （記事カード・一覧行・プロフィール・引用・Q&A・続きを読む・主催・定義リスト 等）
*/

/* ---------- 写真プレースホルダー（デモ用。CMSでは img 要素ごと省略可） ---------- */
.vchr-photo {
  background: var(--vchr-bg-placeholder);
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 記事カード（連載トップ「これまでのインタビュー」の1件） ----------
  左右padding・最大幅は親の .vchr-archive が持つ。
  最新記事（.vchr-latest）より一段小さくして主従をつけている。 */
.vchr-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px 0;
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
}
.vchr-archive > .vchr-card:last-child {
  border-bottom: 0;
}
/* PCの300×200と同じ3:2で統一する（固定高さだと幅により切り抜き量が変わる） */
.vchr-card__photo {
  height: auto;
  aspect-ratio: 3 / 2;
}
/* SPでもflex/gapを持たせる（肩書・タイトル・リード文・ボタンの間隔） */
.vchr-card__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vchr-card__byline {
  font: 500 12px/1.75 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  letter-spacing: .04em;
}
.vchr-card__title {
  font: 700 20px/1.75 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-card__lead {
  font: 300 14.5px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-card {
    flex-direction: row;
    gap: 44px;
    align-items: flex-start;
    padding: 44px 0;
  }
  /* 最新記事の写真は400px。こちらは260pxに落として主従をつける。
     切り抜き比率はベース側の aspect-ratio: 3/2 のまま（高さは固定しない） */
  .vchr-card__photo {
    width: 260px;
    flex: none;
  }
  .vchr-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
  }
  .vchr-card__byline {
    font-size: 13px;
  }
  .vchr-card__title {
    font-size: 25px;
    line-height: 1.7;
  }
  .vchr-card__lead {
    font-size: 15.5px;
  }
}

/* ---------- すべてのインタビュー：一覧行 ---------- */
.vchr-list-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
}
.vchr-list-item:last-child {
  border-bottom: 0;
}
/* 一覧のサムネイルは連載トップのカードと同じ横位置写真（-card）を使うため3:2。
   正方形にすると横位置写真の左右が大きく切れる。 */
.vchr-list-item__thumb {
  width: 96px;
  height: 64px;
  flex: none;
}
.vchr-list-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vchr-list-item__byline {
  font: 500 12px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
.vchr-list-item__title {
  font: 700 17px/1.75 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-list-item__title a {
  color: inherit;
  border-bottom: 0;
  padding-bottom: 0;
  min-height: auto;
  display: inline;
}
.vchr-list-item__title a:hover {
  color: var(--vchr-accent-hover);
}
.vchr-list-item__date {
  font: 400 11px/1.8 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}
@media (min-width: 768px) {
  .vchr-list-item {
    padding: 30px 0;
    gap: 28px;
    align-items: center;
  }
  .vchr-list-item__thumb {
    width: 132px;
    height: 88px;
  }
  .vchr-list-item__body {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex: 1;
  }
  .vchr-list-item__byline {
    font-size: 13px;
    flex: none;
    width: 220px;
  }
  .vchr-list-item__title {
    font-size: 21px;
    flex: 1;
  }
  .vchr-list-item__date {
    font-size: 12px;
    flex: none;
  }
}

/* ---------- 次回予告（一覧ページ） ---------- */
.vchr-next-notice {
  padding: 26px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vchr-next-notice__label {
  font: 500 13px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
.vchr-next-notice__text {
  font: 300 13px/1.95 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}

/* ---------- 記事：プロフィール ----------
  地色（--vchr-bg-sub）を敷いて、本文とは別のブロックであることを示す。
  border-radius / box-shadow は使わない。 */
.vchr-profile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--vchr-bg-sub);
  padding: 18px 20px;
}
/* 顔写真は正方形。納品された顔写真が正方形トリミング済みのため、縦長にすると左右が切れる */
.vchr-profile__photo {
  width: 104px;
  height: 104px;
  flex: none;
}
/* 氏名＋略歴を包む div（クラスなし）。gapを持たせないと氏名と略歴がくっつく */
.vchr-profile > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vchr-profile__name {
  font: 500 14px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
/* 企業・役職。カード等のbylineと同じ扱い（EntryRoleをそのまま出す） */
.vchr-profile__role {
  font: 500 12px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
.vchr-profile__bio {
  font: 300 12.5px/1.9 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-profile {
    gap: 24px;
    padding: 26px 28px;
  }
  .vchr-profile__photo {
    width: 120px;
    height: 120px;
  }
  .vchr-profile__name {
    font-size: 16px;
  }
  .vchr-profile__role {
    font-size: 13px;
  }
  .vchr-profile__bio {
    font-size: 13.5px;
  }
}

/* ---------- 記事：クレジット ---------- */
.vchr-credit {
  font: 400 11.5px/1.9 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding-top: 14px;
}
@media (min-width: 768px) {
  .vchr-credit {
    font-size: 12px;
    padding-top: 16px;
  }
}

/* ---------- 記事：本文パーツ ---------- */
.vchr-article-lead {
  font: 300 16px/2.1 var(--vchr-font-body);
  color: var(--vchr-text-body);
}
@media (min-width: 768px) {
  .vchr-article-lead {
    font-size: 17px;
    line-height: 2.15;
  }
}

.vchr-qa {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vchr-qa dt {
  font: 500 16px/2 var(--vchr-font-heading);
  color: var(--vchr-accent);
}
.vchr-qa dd {
  font: 300 16px/2.1 var(--vchr-font-body);
  color: var(--vchr-text-body);
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media (min-width: 768px) {
  .vchr-qa dt {
    font-size: 17.5px;
  }
  .vchr-qa dd {
    font-size: 17px;
    line-height: 2.15;
  }
}

.vchr-quote {
  padding: 4px 0 4px 18px;
  border-left: var(--vchr-rule-quote) solid var(--vchr-border-accent);
  font: 700 17.5px/1.9 var(--vchr-font-heading);
  color: var(--vchr-accent);
}
@media (min-width: 768px) {
  .vchr-quote {
    padding-left: 24px;
    font-size: 21px;
  }
}

.vchr-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 本文中の写真は固定高さで切り抜かず、実寸の縦横比のまま全体を見せる
   （納品写真は横1.4:1程度で、2.4:1の帯に切ると人物の頭が切れるため） */
.vchr-figure img {
  width: 100%;
  height: auto;
}
.vchr-figure figcaption {
  font: 400 11.5px/1.85 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}
@media (min-width: 768px) {
  .vchr-figure figcaption {
    font-size: 12px;
  }
}

/* ---------- 続きを読む ---------- */
.vchr-continue {
  background: var(--vchr-bg-sub);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding: 28px var(--vchr-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vchr-pager__current {
  font: 500 12px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  letter-spacing: .06em;
}
.vchr-continue__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vchr-continue__title {
  font: 700 17px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-continue__teaser {
  font: 300 14px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-continue {
    padding: 48px var(--vchr-pad-pc);
    align-items: center;
  }
  .vchr-continue__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vchr-pager__current {
    font-size: 13px;
  }
  .vchr-continue__title {
    font-size: 21px;
    line-height: 1.8;
  }
  .vchr-continue__teaser {
    font-size: 15px;
    max-width: 600px;
  }
}

/* ---------- このページから読み始めた方へ（2ページ目冒頭・必須要素） ---------- */
.vchr-start-here {
  background: var(--vchr-bg-sub);
  border-left: var(--vchr-rule-quote) solid var(--vchr-border-accent);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vchr-start-here__label {
  font: 500 12px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  letter-spacing: .06em;
}
.vchr-start-here__summary {
  font: 300 14.5px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-start-here {
    padding: 22px 26px;
  }
  .vchr-start-here__label {
    font-size: 13px;
  }
  .vchr-start-here__summary {
    font-size: 15.5px;
  }
}

/* ---------- この記事は以上です ---------- */
.vchr-article-end {
  background: var(--vchr-bg-sub);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding: 26px var(--vchr-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vchr-article-end__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .vchr-article-end {
    padding: 40px var(--vchr-pad-pc);
    align-items: center;
  }
  .vchr-article-end__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}
/* ボタンが枠線ボックスになったため、並べたときの間隔はテキストリンク時代より詰める */
.vchr-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .vchr-cta-row {
    gap: 14px;
  }
}

/* ---------- 他の方のインタビュー ---------- */
.vchr-related {
  padding: 30px var(--vchr-pad-sp);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vchr-related__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vchr-related h2 {
  font: 700 15px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-related__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vchr-related__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vchr-related__thumb {
  width: 72px;
  height: 54px;
  flex: none;
}
.vchr-related__name {
  font: 500 11.5px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
.vchr-related__title {
  font: 700 15px/1.75 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
a.vchr-related__item:hover .vchr-related__title {
  color: var(--vchr-accent-hover);
}
@media (min-width: 768px) {
  .vchr-related {
    padding: 52px var(--vchr-pad-pc);
    align-items: center;
    border-top: var(--vchr-rule) solid var(--vchr-border);
  }
  .vchr-related__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .vchr-related h2 {
    font-size: 18px;
  }
  .vchr-related__list {
    flex-direction: row;
    gap: 32px;
  }
  /* 掲載が1件のとき flex:1 だけだとカラム幅720pxいっぱいに伸び、
     サムネイルが5.5:1の細長い帯になってしまう。2件並びの幅を上限にする。 */
  .vchr-related__item {
    flex: 1;
    max-width: calc((var(--vchr-width-body) - 32px) / 2);
    flex-direction: column;
    gap: 12px;
  }
  /* 高さ固定ではなく3:2。件数が変わって幅が変わっても切り抜き量が変わらない */
  .vchr-related__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .vchr-related__title {
    font-size: 17px;
  }
}

/* ---------- 主催（この企画について） ---------- */
.vchr-host-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.vchr-host {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vchr-host + .vchr-host {
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding-top: 26px;
}
/* 「主催」「協力」の役割ラベル。冠見出し（.vchr-kicker）と同じ扱いにそろえる */
.vchr-host__role {
  font: 500 11px/1.6 var(--vchr-font-heading);
  letter-spacing: .16em;
  color: var(--vchr-accent);
}
.vchr-host__name {
  font: 500 15px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-host__desc {
  font: 300 14px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-host-list {
    flex-direction: row;
    gap: 56px;
  }
  .vchr-host {
    flex: 1;
    gap: 13px;
  }
  .vchr-host + .vchr-host {
    border-top: 0;
    padding-top: 0;
  }
  .vchr-host__role {
    font-size: 12px;
    letter-spacing: .18em;
  }
  .vchr-host__name {
    font-size: 16px;
  }
  .vchr-host__desc {
    font-size: 14.5px;
    line-height: 2.05;
  }
}

/* ---------- 団体概要の表（企画趣旨ページ） ----------
  SEO目的で名称・所在地・代表者・設立・事業内容を構造化して置くブロック。

  ■ 制約
  1. 本物の <table> のままにする（display: block でスタックさせると、ブラウザによって
     table のアクセシビリティロールが外れて行と見出しの対応が失われる）。
     狭い幅は table-layout: fixed ＋ 見出し列を狭くして吸収する。
  2. 見出し列（th）は 5.5em / PC 7em。最長の項目名が「事業内容」「代表幹事」の4文字なので足りる。
     項目名を長くするときはここも見直すこと。
  3. 罫線は行の下だけ（縦罫は引かない）。border-radius・box-shadow は使わない。
  4. 事業内容の番号は原文のまま本文に含めている（漢検＝（１）、経済同友会＝1.）。
     list-style: none にしているのは、CSSのマーカーと二重になるのを避けるため。 */
/* 見出しと表を1組にまとめ、組の中（12px）と組どうし（36px）で間隔を変える。
   親の .vchr-section__inner の gap（20px）のままだと、h3 が自分の表より
   次の団体の見出しに近く見えてしまう。 */
.vchr-org-group {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.vchr-org {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .vchr-org-group {
    gap: 48px;
  }
  .vchr-org {
    gap: 14px;
  }
}
.vchr-org__name {
  font: 700 15px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-org-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.vchr-org-table th,
.vchr-org-table td {
  padding: 11px 0;
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
  vertical-align: top;
  text-align: left;
}
.vchr-org-table th {
  width: 5.5em;
  font: 500 13px/1.9 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
.vchr-org-table td {
  font: 300 14px/1.9 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
  /* 住所や役職名が長く、狭い幅では単語の途中でも折らないと溢れる */
  overflow-wrap: anywhere;
}
.vchr-org-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 番号がぶら下がるようにする（2行目以降を番号の右にそろえる）。
     番号は本文に含めているので、字下げ幅は番号の表記ごとに変える。
     既定は「1.」などの半角番号用。 */
  padding-left: 1.6em;
}
.vchr-org-list > li {
  text-indent: -1.6em;
}
/* 「（１）」のような全角括弧つき番号は幅が広い */
.vchr-org-list--paren {
  padding-left: 3em;
}
.vchr-org-list--paren > li {
  text-indent: -3em;
}
@media (min-width: 768px) {
  .vchr-org__name {
    font-size: 16px;
  }
  .vchr-org-table th,
  .vchr-org-table td {
    padding: 14px 0;
  }
  .vchr-org-table th {
    width: 7em;
    font-size: 13.5px;
  }
  .vchr-org-table td {
    font-size: 14.5px;
    line-height: 2;
  }
}

/* ---------- 連載の進め方（定義リスト） ---------- */
.vchr-dl-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vchr-dl-steps > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
}
.vchr-dl-steps > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.vchr-dl-steps dt {
  font: 500 12px/1.9 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  width: 72px;
  flex: none;
}
.vchr-dl-steps dd {
  font: 300 14.5px/2 var(--vchr-font-body);
  color: var(--vchr-text-body);
  flex: 1;
}
@media (min-width: 768px) {
  .vchr-dl-steps dt {
    font-size: 13px;
    width: 88px;
  }
  .vchr-dl-steps dd {
    font-size: 15.5px;
    line-height: 2.05;
  }
}

/* ---------- 見出し左固定・本文右（企画趣旨ページ。SPは通常の縦積み） ---------- */
.vchr-definition {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vchr-definition__term {
  font: 700 18.5px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-definition__desc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .vchr-definition {
    flex-direction: row;
    gap: 44px;
    align-items: flex-start;
  }
  .vchr-definition__term {
    width: 180px;
    flex: none;
    font-size: 20px;
    line-height: 1.7;
  }
  .vchr-definition__desc {
    flex: 1;
    gap: 20px;
  }
}

/* ---------- 記事ヘッダー（1・2ページ目共通） ---------- */
.vchr-article-header {
  padding: 8px var(--vchr-pad-sp) 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vchr-article-header__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vchr-article-header h1 {
  font: 700 25px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-byline-inline {
  font: 500 12px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
}
@media (min-width: 768px) {
  .vchr-article-header {
    padding: 26px var(--vchr-pad-pc) 56px;
    align-items: center;
  }
  .vchr-article-header__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .vchr-article-header h1 {
    font-size: 34px;
    line-height: 1.65;
  }
  .vchr-byline-inline {
    font-size: 13.5px;
  }
}

/* ---------- 記事本文ラッパー ---------- */
/* 下paddingは必須。次に来るブロック（続きを読む／この記事は以上です／他の方のインタビュー）が
   border-top を持つため、0にすると本文最後の段落が罫線に張り付く。 */
.vchr-article-body {
  padding: 0 var(--vchr-pad-sp) 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vchr-article-body__inner {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (min-width: 768px) {
  .vchr-article-body {
    padding: 0 var(--vchr-pad-pc) 72px;
    align-items: center;
  }
  .vchr-article-body__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

/* ---------- ページ送り（aria-current="page" を現在ページに付与） ---------- */
.vchr-pager {
  display: contents;
}

/* ---------- 連載トップ：ヒーロー ----------
  キービジュアル写真は用意しない。地は body の和紙テクスチャをそのまま見せ、
  冠見出し → h1 → サブタイトル → リード文 を中央に置いたうえで、
  葉のワンポイント（.vchr-leaf）で本編（最新のインタビュー）へつなぐ。

  旧実装の幾何学背景（hero-geometry.svg）とグラデーションは廃止した。
  和紙テクスチャの上に重ねると地が二重になり、葉のワンポイントとも競合するため。
  高さを vh で確保するのもやめている（ヒーローの役割は最新記事ブロックが担う）。
  葉は記事ページと同じ 65%（SP 70%）・不透明度そのまま。全幅の帯にすると大きすぎた。 */
.vchr-hero {
  display: flex;
  flex-direction: column;
  /* h1ブロックと葉の間隔。margin ではなく gap で作る */
  gap: 26px;
  /* 葉と「最新のインタビュー」の間隔。.vchr-latest 側の padding-top は 0（PCで6px）しか
     ないため、ここで持たせないと葉がセクション見出しの罫線にくっつく。 */
  padding-bottom: 34px;
}
@media (min-width: 768px) {
  .vchr-hero {
    gap: 36px;
    padding-bottom: 56px;
  }
}
/* ヒーロー内のページヘッダーは罫線を持たない（区切りは葉の帯が担う） */
.vchr-hero > .vchr-page-header {
  border-bottom: 0;
}
.vchr-page-header--top {
  padding: 38px var(--vchr-pad-sp) 0;
  align-items: center;
  text-align: center;
}
.vchr-page-header--top .vchr-page-header__lead-col {
  align-items: center;
  gap: 18px;
}
.vchr-page-header--top h1 {
  font-size: 30px;
  line-height: 1.55;
  letter-spacing: .02em;
}
/* SPのリード文だけは左揃え（中央寄せだと折り返しが不揃いで読みにくい） */
.vchr-page-header--top .vchr-lead {
  text-align: left;
}
@media (min-width: 768px) {
  .vchr-page-header--top {
    padding: 66px var(--vchr-pad-pc) 0;
  }
  .vchr-page-header--top .vchr-kicker {
    letter-spacing: .2em;
  }
  .vchr-page-header--top .vchr-page-header__lead-col {
    gap: 26px;
    max-width: 680px;
  }
  /* h1 は HTML 側の <br> で「価値創造型人材に／必要な日本語力」の2行に固定している。
     48px にすると2行がかなり大きくなり、19px のサブタイトルとの主従が開きすぎるので42pxで止める。 */
  .vchr-page-header--top h1 {
    font-size: 42px;
    line-height: 1.5;
  }
  .vchr-page-header--top .vchr-lead {
    max-width: 600px;
    text-align: center;
  }
}

/* ---------- 葉のワンポイント（bg_leaf.svg） ----------
  区切りの装飾。3か所だけに使う（連載トップのヒーロー直下・記事のリード文直後・
  企画趣旨ページのh1直下）。装飾なので alt="" ＋ aria-hidden ＋ pointer-events: none。

  ■ 制約（崩さないこと）
  1. 表示幅はパーセントで指定し、高さは height: auto。高さを固定したり
     CSS background で切り出したりしない（茎が左右端を貫くことで区切りとして成立する）。
  2. 線は細いが、横長・低背を優先した結果で意図どおり。太らせない。
  3. 線色 sage green #7d9a84 は臙脂・和紙の生成りに馴染むので変更しない。
  4. SVGの入れ子（svg 内の image href）は環境により描画されないため img で置く。
  5. 上下の間隔は margin ではなく親の gap で作る（本文の段落間隔 PC 28px が基準）。 */
.vchr-leaf {
  display: flex;
  justify-content: center;
  /* img の下に line-height 由来の隙間が出ないように */
  line-height: 0;
  pointer-events: none;
}
.vchr-leaf img {
  display: block;
  width: 70%;
  height: auto;
}
@media (min-width: 768px) {
  .vchr-leaf img {
    width: 65%;
  }
}
/* ヒーローの葉は全幅ブロックの直下にあるため、そのままだと本文カラム基準の記事ページより
   大きくなる。左右padding＋本文カラム基準の max-width をかけて、どの幅でも記事ページと
   同じ実寸（PCで468px）になるようにそろえる。 */
.vchr-hero > .vchr-leaf {
  padding: 0 var(--vchr-pad-sp);
}
.vchr-hero > .vchr-leaf img {
  max-width: calc(var(--vchr-width-body) * .7);
}
@media (min-width: 768px) {
  .vchr-hero > .vchr-leaf {
    padding: 0 var(--vchr-pad-pc);
  }
  .vchr-hero > .vchr-leaf img {
    max-width: calc(var(--vchr-width-body) * .65);
  }
}

/* ---------- 連載トップ：セクション見出し（ラベル＋公開日） ---------- */
.vchr-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: var(--vchr-rule-accent) solid var(--vchr-border-accent);
}
.vchr-section-head__label {
  font: 500 11px/1.7 var(--vchr-font-heading);
  letter-spacing: .16em;
  color: var(--vchr-accent);
}
.vchr-section-head__date {
  font: 400 11px/1.8 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}
@media (min-width: 768px) {
  .vchr-section-head {
    gap: 16px;
    padding-bottom: 20px;
  }
  .vchr-section-head__label {
    font-size: 12px;
    letter-spacing: .18em;
  }
  .vchr-section-head__date {
    font-size: 12px;
  }
}

/* ---------- 連載トップ：最新のインタビュー ----------
  キービジュアルを持たない代わりに、この1本を大きく見せてヒーロー相当にする。
  写真は 400px（PC）。下の「これまでのインタビュー」（260px）との差で主従をつける。
  切り抜き比率は既存のカードと同じ 3:2 のまま（固定高さにしない）。 */
.vchr-latest {
  padding: 0 var(--vchr-pad-sp) 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vchr-latest__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vchr-latest__photo {
  height: auto;
  aspect-ratio: 3 / 2;
}
.vchr-latest__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vchr-latest__byline {
  font: 500 12px/1.75 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  letter-spacing: .04em;
}
.vchr-latest__title {
  font: 700 23px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-latest__lead {
  font: 300 15px/2.05 var(--vchr-font-body);
  color: var(--vchr-text-body);
}
@media (min-width: 768px) {
  .vchr-latest {
    padding: 6px var(--vchr-pad-pc) 60px;
    max-width: var(--vchr-width-page);
    margin: 0 auto;
    gap: 0;
  }
  .vchr-latest__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding-top: 36px;
  }
  .vchr-latest__photo {
    width: 400px;
    flex: none;
  }
  .vchr-latest__text {
    flex: 1;
    gap: 18px;
  }
  .vchr-latest__byline {
    font-size: 13.5px;
  }
  .vchr-latest__title {
    font-size: 32px;
    line-height: 1.65;
  }
  .vchr-latest__lead {
    font-size: 16px;
    line-height: 2.1;
  }
}

/* ---------- 連載トップ：これまでのインタビュー ----------
  中身は .vchr-card（下の「記事カード」）をそのまま並べる。 */
.vchr-archive {
  padding: 0 var(--vchr-pad-sp) 30px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .vchr-archive {
    padding: 0 var(--vchr-pad-pc) 56px;
    max-width: var(--vchr-width-page);
    margin: 0 auto;
  }
}

/* ---------- 一覧：ページヘッダーの件数表示 ---------- */
.vchr-count {
  font: 500 12px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-secondary);
  letter-spacing: .04em;
}
@media (min-width: 768px) {
  /* 1カラムのページヘッダーは、下に続くカラム（720px / 840px）と左右端を揃える。
     連載トップ（--top）だけは2カラムのため style.css の 1120px をそのまま使う。 */
  .vchr-page-header--list {
    max-width: calc(var(--vchr-width-list) + var(--vchr-pad-pc) * 2);
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
  }
  .vchr-page-header--about {
    max-width: calc(var(--vchr-width-body) + var(--vchr-pad-pc) * 2);
  }
  .vchr-page-header--list .vchr-page-header__lead-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vchr-count {
    font-size: 13px;
    flex: none;
  }
}

/* ---------- この企画についてティザー（連載トップ・一覧ページ共通） ---------- */
.vchr-about-teaser {
  background: var(--vchr-bg-sub);
  padding: 30px var(--vchr-pad-sp);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.vchr-about-teaser h2 {
  font: 700 16px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-about-teaser p {
  font: 300 14px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
.vchr-about-teaser + .vchr-about-teaser {
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding-top: 18px;
}
.vchr-about-teaser__body {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
/* ロゴ列はPCのみ（HTML側で u-pc-only）。display はPCのメディアクエリ内でだけ指定する */
@media (min-width: 768px) {
  /* 背景は全幅のまま、中身だけを中央に寄せる（左端に張り付かせない） */
  .vchr-about-teaser {
    padding: 52px var(--vchr-pad-pc);
    display: flex;
    flex-direction: row;
    gap: 64px;
    /* 本文列とロゴ列を上下中央でそろえる */
    align-items: center;
    justify-content: center;
  }
  .vchr-about-teaser__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
  }
  .vchr-about-teaser__logos {
    align-items: center;
  }
  .vchr-about-teaser__logos .vchr-logo {
    height: 64px;
  }
  .vchr-about-teaser h2 {
    font-size: 19px;
  }
  .vchr-about-teaser p {
    font-size: 15px;
    line-height: 2.05;
  }
}

/* ---------- 一覧ページ末尾：この企画について／漢検の他の読み物（2件併記） ---------- */
.vchr-promo-section {
  background: var(--vchr-bg-sub);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding: 28px var(--vchr-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vchr-promo {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.vchr-promo + .vchr-promo {
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding-top: 18px;
}
.vchr-promo h2 {
  font: 700 15px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
.vchr-promo p {
  font: 300 13.5px/2 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-promo-section {
    padding: 44px var(--vchr-pad-pc);
    flex-direction: row;
    gap: 64px;
    justify-content: center;
  }
  /* 2枚あわせて 840px（＝一覧カラム幅）に収め、上の一覧と左右端を揃える */
  .vchr-promo {
    flex: 1;
    max-width: 388px;
    gap: 12px;
  }
  .vchr-promo + .vchr-promo {
    border-top: 0;
    padding-top: 0;
  }
  .vchr-promo h2 {
    font-size: 18px;
  }
  .vchr-promo p {
    font-size: 14.5px;
    line-height: 2.05;
  }
}

/* ---------- インタビューを読む（企画趣旨ページ末尾） ---------- */
.vchr-read-cta {
  background: var(--vchr-bg-sub);
  border-top: var(--vchr-rule) solid var(--vchr-border);
  padding: 28px var(--vchr-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vchr-read-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vchr-read-cta h2 {
  font: 700 15px/1.7 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
@media (min-width: 768px) {
  .vchr-read-cta {
    padding: 44px var(--vchr-pad-pc);
    flex-direction: row;
    justify-content: center;
  }
  .vchr-read-cta__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
  .vchr-read-cta h2 {
    font-size: 19px;
  }
}

/* ---------- お問い合わせ（企画趣旨ページ） ---------- */
.vchr-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- 一覧・企画趣旨のh1（記事h1とはスケールが異なる） ---------- */
.vchr-page-header--list h1,
.vchr-page-header--about h1 {
  font: 700 23px/1.65 var(--vchr-font-heading);
}
/* 企画趣旨ページの h1 は連載トップと同じサイト名なので字間を揃える
   （サイズはこのページのスケール 23px / 38px を維持する） */
.vchr-page-header--about h1 {
  letter-spacing: .02em;
}
@media (min-width: 768px) {
  .vchr-page-header--list h1 {
    font-size: 32px;
    line-height: 1.6;
  }
  .vchr-page-header--about h1 {
    font-size: 38px;
    line-height: 1.6;
  }
}