/*
  リレーインタビュー / 共通レイアウト（ヘッダー・フッター・ナビ・パンくず・ページヘッダー・コンテナ）
  このサブサイトは本体サイトの共通CSSを継承しない独立実装。@layer は使わない。
*/

/* ---------- reset (最小限) ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
/* 地色は和紙テクスチャ。background-color は残す（画像の読み込み前・失敗時の下地）。
   washi-tile.webp は元画像 bg_japanesepaper.webp の右端の耳（破れ）を切り落とし、
   上下左右をミラーブレンドして継ぎ目を消したタイル。
   background-attachment: fixed は使わない（iOS Safari で描画が崩れる）。
   テクスチャの明度は #FBF7F1 とほぼ同じなので本文・二次テキストのAAは維持される。
   これより濃く・暗くしないこと。 */
body {
  margin: 0;
  background-color: var(--vchr-bg);
  background-image: url("/value-creation-human-resources/assets/images/washi-tile.webp");
  background-repeat: repeat;
  background-size: 500px auto;
  color: var(--vchr-text-body);
  font: 300 16px/2.1 var(--vchr-font-body);
}
@media (min-width: 768px) {
  body {
    background-size: 700px auto;
  }
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* figure はブラウザ既定で margin: 1em 40px が付く。消し忘れると本文中の写真だけが
   左右40pxずつ内側に入り、本文カラムと左端が揃わなくなる（余白は親のgapで組む方針） */
h1, h2, h3, p, dl, dd, figure, figcaption, blockquote {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* border-radius / box-shadow は意図的に使わない（設計判断） */

/* ページトップボタンのスムーススクロール。動きを減らす設定は尊重する */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- link ---------- */
a {
  color: var(--vchr-accent);
  text-decoration: none;
}

/* ---------- button ----------
  .vchr-link は枠線ボックスのアウトラインボタンを既定形とし、各ブロックの主要CTA
  （この記事を読む・続きを読む・くわしく読む 等）は .vchr-link--primary で臙脂ベタにして
  1段強くする。border-radius / box-shadow は使わない。 */
.vchr-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 縦積みflexの直下に置かれても横幅いっぱいに伸びないようにする */
  align-self: flex-start;
  min-height: 46px;
  padding: 0 20px;
  color: var(--vchr-accent);
  background: transparent;
  border: var(--vchr-rule-btn) solid var(--vchr-accent);
  font: 500 14px/1.45 var(--vchr-font-heading);
  letter-spacing: .02em;
  text-align: center;
  transition:
    background-color var(--vchr-dur-fast) var(--vchr-ease),
    border-color var(--vchr-dur-fast) var(--vchr-ease),
    color var(--vchr-dur-fast) var(--vchr-ease);
}
@media (min-width: 768px) {
  .vchr-link {
    min-height: 50px;
    padding: 0 26px;
    font-size: 15px;
  }
}
.vchr-link:hover {
  color: var(--vchr-accent-text);
  background: var(--vchr-accent);
}
.vchr-link--primary {
  color: var(--vchr-accent-text);
  background: var(--vchr-accent);
}
.vchr-link--primary:hover {
  background: var(--vchr-accent-hover);
  border-color: var(--vchr-accent-hover);
}

/* ---------- logo（経済同友会 × 漢検 の横並び1枚WebP／520×100・5.2:1） ----------
  高さのみ指定（width: auto）。ロゴ内に小さな英字（Japan Association of Corporate Executives）
  が入っているため、これより小さくすると判読できない。 */
.vchr-logo {
  display: block;
  width: auto;
  height: 42px;
}
@media (min-width: 768px) {
  .vchr-logo {
    height: 56px;
  }
}
.vchr-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- container ---------- */
.vchr-container {
  max-width: var(--vchr-width-page);
  margin: 0 auto;
}

/* ---------- header ---------- */
.vchr-header {
  background: var(--vchr-bg-header);
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
}
.vchr-header__inner {
  max-width: var(--vchr-width-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* SPでハンバーガーを開いたとき、ナビをロゴ行の下へ回り込ませる */
  flex-wrap: wrap;
  padding: 14px var(--vchr-header-pad-sp);
}
@media (min-width: 768px) {
  .vchr-header__inner {
    padding: 18px var(--vchr-header-pad-pc);
  }
}

/* ハンバーガー（SPのみ） */
.vchr-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  padding: 12px 8px;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}
.vchr-menu-btn__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--vchr-text-secondary);
  transition:
    transform var(--vchr-dur) var(--vchr-ease),
    opacity var(--vchr-dur-fast) var(--vchr-ease);
}
/* 開いている間は×に変形させて状態を示す。
   1つめの子は .u-visually-hidden の span（絶対配置＝レイアウト外）なので、
   3本のバーは nth-child(2)〜(4)。gap 3.5px + 高さ1.5px なので中心間は5px。 */
.vchr-menu-btn[aria-expanded="true"] .vchr-menu-btn__bar:nth-child(2) {
  transform: translateY(5px) rotate(45deg);
}
.vchr-menu-btn[aria-expanded="true"] .vchr-menu-btn__bar:nth-child(3) {
  opacity: 0;
}
.vchr-menu-btn[aria-expanded="true"] .vchr-menu-btn__bar:nth-child(4) {
  transform: translateY(-5px) rotate(-45deg);
}
@media (min-width: 768px) {
  .vchr-menu-btn {
    display: none;
  }
}

/* グローバルナビ
  SPは開閉をアニメーションさせるため display の切り替えをやめ、
  max-height + opacity で開く（display はトランジションできないため）。
  max-height は項目3件（実測149px）に対する余裕値。項目を増やすときはここも見直す。 */
.vchr-nav {
  /* SPは全幅（ロゴ行の下段）。PCではロゴと同じ行の右端に戻す。
     地色はヘッダー（--vchr-bg-header）が持つ。ここで塗ると和紙の透けが二重になる */
  width: 100%;
  background: transparent;
  overflow: hidden;
  transition:
    max-height var(--vchr-dur) var(--vchr-ease),
    opacity var(--vchr-dur) var(--vchr-ease),
    visibility var(--vchr-dur);
}
.vchr-nav[data-open="false"] {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}
.vchr-nav[data-open="true"] {
  max-height: 220px;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  /* PCは常時表示。SP用の開閉指定を打ち消す */
  .vchr-nav[data-open="false"],
  .vchr-nav[data-open="true"] {
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: none;
  }
}
.vchr-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 左右paddingは .vchr-header__inner が持っているので縦だけ */
  padding: 8px 0 4px;
  border-top: var(--vchr-rule) solid var(--vchr-border);
}
.vchr-nav__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--vchr-text-nav);
  border-bottom: 0;
  font: 500 14px/1 var(--vchr-font-heading);
  transition: color var(--vchr-dur-fast) var(--vchr-ease);
}
.vchr-nav__list a:hover {
  color: var(--vchr-accent);
}
@media (min-width: 768px) {
  .vchr-nav {
    width: auto;
  }
  .vchr-nav__list {
    flex-direction: row;
    gap: 30px;
    padding: 0;
    border-top: 0;
  }
  .vchr-nav__list a {
    min-height: auto;
    font-size: 13px;
  }
}

/* ---------- footer ---------- */
.vchr-footer {
  background: var(--vchr-bg-footer);
}
.vchr-footer__inner {
  max-width: var(--vchr-width-page);
  margin: 0 auto;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px) {
  .vchr-footer__inner {
    padding: 38px 48px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
/* ロゴ＋両団体の公式サイトボタン */
.vchr-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vchr-footer__logos {
  display: flex;
  align-items: center;
}
.vchr-footer__sites {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* 団体名が長いので2行に折る（HTML側の br で改行位置を固定）。
   2行になるぶん min-height ではなく上下padding で高さを作る。 */
.vchr-footer__sites .vchr-link {
  min-height: 46px;
  padding: 9px 14px;
  font-size: 11.5px;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .vchr-footer__sites .vchr-link {
    min-height: 48px;
    padding: 9px 16px;
    font-size: 12.5px;
  }
}
.vchr-footer__logos .vchr-logo {
  height: 40px;
}
@media (min-width: 768px) {
  .vchr-footer__logos .vchr-logo {
    height: 52px;
  }
}
.vchr-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 400 12px/1.6 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}
.vchr-footer__links a {
  color: var(--vchr-text-secondary);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--vchr-dur-fast) var(--vchr-ease);
}
.vchr-footer__links a:hover {
  color: var(--vchr-accent);
}
@media (min-width: 768px) {
  .vchr-footer__links {
    flex-direction: row;
    gap: 38px;
  }
}
.vchr-footer__copy {
  font: 400 11px/1.8 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}

/* ---------- ページトップへ戻る（固定・一定量スクロールしてから nav.js が表示） ---------- */
/* display の切り替えではなく opacity + transform でふわっと出す。
   visibility も併せて切り替えるので、非表示のあいだはフォーカスも当たらない。 */
.vchr-pagetop {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 56px;
  background: var(--vchr-accent);
  border: var(--vchr-rule-btn) solid var(--vchr-accent);
  color: var(--vchr-accent-text);
  font: 500 10px/1.35 var(--vchr-font-heading);
  letter-spacing: .04em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--vchr-dur) var(--vchr-ease),
    transform var(--vchr-dur) var(--vchr-ease),
    visibility var(--vchr-dur),
    background-color var(--vchr-dur-fast) var(--vchr-ease);
}
.vchr-pagetop[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vchr-pagetop:hover {
  background: var(--vchr-accent-hover);
  border-color: var(--vchr-accent-hover);
}
.vchr-pagetop__arrow {
  font-size: 11px;
  line-height: 1;
}
@media (min-width: 768px) {
  .vchr-pagetop {
    right: 28px;
    bottom: 28px;
    width: 62px;
    height: 62px;
    font-size: 10.5px;
  }
}

/* ---------- breadcrumb ---------- */
.vchr-breadcrumb {
  padding: 14px var(--vchr-pad-sp);
}
@media (min-width: 768px) {
  .vchr-breadcrumb {
    padding: 18px var(--vchr-pad-pc);
    max-width: var(--vchr-width-page);
    margin: 0 auto;
  }
}
.vchr-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  font: 400 10.5px/1.75 var(--vchr-font-body);
  color: var(--vchr-text-secondary);
}
@media (min-width: 768px) {
  .vchr-breadcrumb ol {
    font-size: 11.5px;
  }
}
.vchr-breadcrumb li:not(:last-child)::after {
  content: "\3000\FF1E\3000"; /* 　＞　 */
}
.vchr-breadcrumb a {
  color: var(--vchr-text-secondary);
  border-bottom: 0;
}
.vchr-breadcrumb [aria-current="page"] {
  color: var(--vchr-text-secondary);
}

/* ---------- page header（各ページ共通の冒頭ブロック） ---------- */
.vchr-page-header {
  padding: 36px var(--vchr-pad-sp) 32px;
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* SPでも必ずflex/gapを持たせる（冠見出し・h1・短い罫・リード文の間隔） */
.vchr-page-header__lead-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  /* PCでは必ずページ中央に置く（max-width + margin:0 auto）。
     指定しないと padding 分だけ左端に寄り、下に続く本文カラムと左端が揃わない。 */
  .vchr-page-header {
    max-width: var(--vchr-width-page);
    margin: 0 auto;
    padding: 70px var(--vchr-pad-pc) 56px;
  }
}
.vchr-kicker {
  font: 500 11px/1.6 var(--vchr-font-heading);
  letter-spacing: .16em;
  color: var(--vchr-accent);
}
@media (min-width: 768px) {
  .vchr-kicker {
    font-size: 12.5px;
    letter-spacing: .18em;
  }
}
.vchr-page-header h1 {
  font: 700 26px/1.6 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
  letter-spacing: .01em;
}
@media (min-width: 768px) {
  .vchr-page-header h1 {
    font-size: 42px;
    line-height: 1.55;
  }
}
/* サイト名（h1）＋サブタイトル。
   サブタイトルは h1 の一部にしない（別要素の p）。h1 との間隔は margin ではなく
   このラッパーの gap で作る（余白は gap で組む方針）。 */
.vchr-page-title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .vchr-page-title {
    gap: 16px;
  }
}
/* サブタイトル「言葉が、人を育てる。」だけ明朝。h1（価値創造型人材に必要な日本語力）は
   ゴシックのまま。Webフォントはこの10文字だけを購読しているので、
   ★このセレクタを他の文言に使い回さないこと（token.css の --vchr-font-mincho のコメント参照）。
   ★ font のショートハンドで上書きしないこと（書体まで指定してしまい明朝が消える）。
   サイズは SP 15px / PC 19px。明朝は同サイズのゴシックより細く小さく見えるため、
   ラベル然とした初版（12.5/15px）から一段上げている。 */
.vchr-page-subtitle {
  font: 500 15px/1.9 var(--vchr-font-mincho);
  color: var(--vchr-text-secondary);
  letter-spacing: .08em;
}
@media (min-width: 768px) {
  .vchr-page-subtitle {
    font-size: 19px;
    letter-spacing: .1em;
  }
}
.vchr-lead {
  font: 300 15px/2.05 var(--vchr-font-body);
  color: var(--vchr-text-body-sub);
}
@media (min-width: 768px) {
  .vchr-lead {
    font-size: 16px;
    max-width: 480px;
  }
}

/* ---------- section（gapで積む） ---------- */
.vchr-section {
  padding: var(--vchr-pad-sp);
  border-bottom: var(--vchr-rule) solid var(--vchr-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 内側ラッパーの flex/gap は必ずSP（ベース）側にも書く。
   PCのメディアクエリ内だけに書くと、reset で margin:0 にしているため
   SPで中の見出し・段落・写真の間隔が全部0になる。 */
.vchr-section > .vchr-section__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vchr-section:last-of-type {
  border-bottom: 0;
}
.vchr-section--sub {
  background: var(--vchr-bg-sub);
}
@media (min-width: 768px) {
  /* 縦積み（flex-direction: column）のままなので、横方向の中央寄せは align-items で行う。
     justify-content では縦軸に効いてしまい本文が左端に寄る。
     内側カラムは width 固定にせず max-width にする（768〜816px幅での横スクロールを防ぐ）。 */
  .vchr-section {
    padding: 56px var(--vchr-pad-pc);
    align-items: center;
  }
  .vchr-section > .vchr-section__inner {
    width: 100%;
    max-width: var(--vchr-width-body);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
.vchr-section h2 {
  font: 700 18.5px/1.8 var(--vchr-font-heading);
  color: var(--vchr-text-heading);
}
@media (min-width: 768px) {
  .vchr-section h2 {
    font-size: 20px;
  }
}

/* 一覧ページの記事リストブロック（罫線・上下paddingを持たない、内側の幅だけ840pxに絞る） */
.vchr-section--list {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .vchr-section--list > .vchr-section__inner {
    max-width: var(--vchr-width-list);
  }
}

/* main のスキップ先ターゲット */
main:focus {
  outline: none;
}