/* =============================================================
 * wf.css — 統合報告書サイト WF 共通スタイル
 * -------------------------------------------------------------
 * ビジュアル規約 v2(Material Design 3 ベース)+ sitemap.yaml v2 対応
 * ・セクション(h2)はカード化しない。h2 見出し + 下余白で区切る
 * ・カード(枠+面)は card-list / kpi-grid / interview / accordion と画像枠のみ
 * ・回遊動線(nav / pager)はコンテンツ用カード表現を流用しない
 * ・角丸 8/12px、余白 8/16/24/32/48px、プライマリー #0061A4 は限定用途のみ
 * ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; }

/* ページ内スクロール(アンカーナビ → 見出し)は CSS だけで滑らかにする(JS は使わない)。
   ページをまたぐ遷移(別ページの #block-*)は読み込み時にそのまま着地する(スムーススクロールにならないのが正しい) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* アンカー先(block_id を持つ section / subsection)の着地位置 */
[id^="block-"] { scroll-margin-top: var(--wf-scroll-margin-top); }
@media (max-width: 768px) {
  [id^="block-"] { scroll-margin-top: var(--wf-scroll-margin-top-sp); }
}

img { max-width: 100%; display: block; }

/* ---------- WF専用UIの一括ON/OFF ----------
   block_id 照合ラベル / EN未バッジ / 実装注記 / 画像枠の台帳ラベルは
   レビュー用の表示。body に wf-debug が付いているときだけ出す。
   公開ビルドでは body から wf-debug を外す(= まとめて非表示になる)。 */
.wf-section__block-id,
.wf-section__block-id-inline,
.wf-subsection__block-id,
.wf-subsubsection__block-id,
.wf-page-header__block-id,
.wf-cover__block-id,
.wf-nav__logo-id,
.wf-badge-en,
.wf-notes,
.wf-image__id,
.wf-image__note { display: none; }

.wf-debug .wf-section__block-id,
.wf-debug .wf-subsection__block-id,
.wf-debug .wf-subsubsection__block-id,
.wf-debug .wf-page-header__block-id,
.wf-debug .wf-cover__block-id,
.wf-debug .wf-badge-en,
.wf-debug .wf-image__id,
.wf-debug .wf-image__note { display: inline-block; }

.wf-debug .wf-section__block-id-inline,
.wf-debug .wf-nav__logo-id { display: block; }

.wf-debug .wf-notes { display: block; }

body {
  font-family: var(--wf-font-family);
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-text);
  background: var(--wf-color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--wf-color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
/* 本文テキスト内のリンク(URL など)は狭い画面で枠をはみ出さないよう任意の位置で折り返す(SP 最小保証幅 375px)。
   a 要素だけに効かせるので日本語の地の文には影響しない。リンク行(.wf-link)は URL 側で個別に指定済み */
.wf-main :is(p, li, td, th, dd, figcaption) a:not(.wf-link__anchor) { overflow-wrap: anywhere; }
/* TODO(要デザイナー確認): hover / focus はカンプ未定義のため実装標準で仮置き */
a:hover { color: var(--wf-color-primary-hover); }
/* 濃紺面(サイドナビ・フッター)では hover もダーク配色のまま保つ
   (プライマリーは紺地とのコントラストが不足するため使わない) */
.wf-nav a:hover,
.wf-footer a:hover { color: var(--wf-color-nav-text); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--wf-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wf-radius-sm);
}
.wf-nav a:focus-visible,
.wf-footer a:focus-visible {
  outline-color: var(--wf-color-nav-text);
}

/* ---------- タイポグラフィ ---------- */
h1, h2, h3 { line-height: var(--wf-line-height-heading); margin: 0; }
/* Figma: JA/Subsection Title・JA/Subsub Title は Medium / line-height 1.6 */
h1 { font-size: var(--wf-font-size-h1); font-weight: var(--wf-font-weight-bold); }
h2 { font-size: var(--wf-font-size-h2); font-weight: var(--wf-font-weight-medium); line-height: var(--wf-line-height-section); }
h3 { font-size: var(--wf-font-size-h3); font-weight: var(--wf-font-weight-medium); line-height: var(--wf-line-height-normal); }
p { margin: 0 0 var(--wf-space-2); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: var(--wf-font-size-h3);
  vertical-align: middle;
  line-height: var(--wf-line-height-flat);
}

/* ---------- サイドナビ最下部の言語切替(日本語 / English) ----------
   ナビ項目との間はヘアライン + 余白で区切り、常にサイドナビの最下部に置く。
   Figma 準拠: 「/」区切り・白 13px・現在言語の強調なし(is-current は判定用に残すが見た目は同じ) */
.wf-nav__lang {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-tight);          /* Figma: Lang Switch の gap 10 */
  margin: auto 0 0;
  padding-top: var(--wf-space-footer-rule);
  border-top: 1px solid var(--wf-color-nav-divider);
}
.wf-nav__lang-link {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-section);
  letter-spacing: var(--wf-letter-spacing-sm);
  color: var(--wf-color-nav-text);
}
.wf-nav__lang-link:hover { text-decoration: underline; }
.wf-nav__lang-sep {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-section);
  color: var(--wf-color-nav-text);
}

/* ---------- EN原稿未入力バッジ(英語版のみ。block_id ラベル位置に表示) ---------- */
.wf-badge-en {
  /* display は指定しない(既定は非表示。wf-debug 時だけ表示。2026-10-09: ここで display を指定していたため公開ビルドでも見えていた) */
  padding: 0 var(--wf-space-1);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-color-surface);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
}

/* ---------- サイドナビ ----------
   構成は上から ロゴ → サイト名 → ページナビ → 言語切替(最下部)。
   SP のドロワーでも同じ DOM 順序を保つ。 */
.wf-nav {
  position: fixed;
  top: 0; left: 0;
  width: var(--wf-nav-width);
  height: 100vh;
  /* Figma(Shell / Side Nav 4162:8823): 上下40 / 左右24 */
  padding: var(--wf-space-panel-gap) var(--wf-space-3);
  background: var(--wf-color-nav-bg);
  color: var(--wf-color-nav-text);
  overflow-y: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
/* 企業ロゴ枠(紺地に白抜きのロゴ想定。WFでは白の半透明ボックス + LOGO ラベル) */
.wf-nav__logo-wrap { position: relative; margin: 0 0 var(--wf-space-nav-brand); }  /* Figma: ロゴ → サイト名 14 */
.wf-nav__logo { height: var(--wf-size-logo-h); }
.wf-nav__logo.wf-img--placeholder {
  min-height: var(--wf-size-logo-h);
  padding: 0 var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  font-weight: var(--wf-font-weight-bold);
  line-height: var(--wf-line-height-heading);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--wf-color-nav-text);
}
/* wf-debug 時の画像IDラベルはロゴに重ねる(レイアウトに影響させない。実画像の画像IDラベルと同じ見た目) */
.wf-nav__logo-id {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 var(--wf-space-1);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-color-image-tag-bg);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
  white-space: nowrap;
}
/* サイト名は site.sidebar_name(日英共通) */
/* Figma: Brand テキスト Inter Medium 9 / line-height 1 / 字間5% / 白 */
.wf-nav__site {
  font-size: var(--wf-font-size-nav-site);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-md);
  line-height: var(--wf-line-height-flat);
  color: var(--wf-color-nav-text);
  margin: 0 0 var(--wf-space-footer-rule);   /* Figma: Brand → Nav List 60 */
}
/* Figma: Nav List → Lang Switch は gap 60 + spacer + gap 60(最小120)。
   WF は区切り線(仮置き)を中間に置き、上60・下60 で振り分ける */
.wf-nav__pages { margin-bottom: var(--wf-space-footer-rule); }
.wf-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-nav-item);       /* Figma: Nav List gap 23 */
}
.wf-nav__item { margin: 0; }
/* ページ項目は「番号(00〜)+ nav_label」。番号は pages の並び順から自動導出 */
/* Figma: Nav Item — 番号・ラベルとも Regular 15、番号 line-height 1.2 / ラベル 1.25 */
.wf-nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-tight);          /* Figma: 番号(幅20)↔ ラベル 10 */
  padding: 0;
  font-size: var(--wf-font-size-nav);
  font-weight: var(--wf-font-weight-regular);
  line-height: var(--wf-line-height-snug);
  color: var(--wf-color-nav-text-muted);
}
.wf-nav__num {
  flex-shrink: 0;
  font-size: var(--wf-font-size-nav);
  line-height: var(--wf-line-height-tight);
  color: inherit;
}
.wf-nav__label { min-width: 0; }
/* state=current: 白文字 + 項目下の白ヘアライン(Figma: 白 → 透明の横グラデーション) */
.wf-nav__link.is-current {
  color: var(--wf-color-nav-text);
  /* Figma: state=current はラベル → 下線 10 + 1px の下線 */
  padding-bottom: var(--wf-space-tight);
  border-bottom: 1px solid;
  border-image: var(--wf-gradient-nav-underline) 1;
}
/* TODO(要デザイナー確認): hover はカンプ未定義のため仮置き */
.wf-nav__link:hover {
  color: var(--wf-color-nav-text);
  text-decoration: none;
}

/* ---------- メイン ---------- */
.wf-main {
  margin-left: var(--wf-nav-width);
  padding: 0;
  /* 全幅の帯(figure variant: wide)が 100vw 基準ではみ出しても横スクロールを出さない */
  overflow-x: clip;
  --wf-nav-offset: var(--wf-nav-width);
}
/* 本文カラムと、全幅の帯(ヘッダー・カバー・フッター)の内側で共通の左右インセット。
   画面が広いときは本文カラムの位置に揃い、狭いときは最低 32px を保つ */
.wf-main {
  --wf-bleed-inset: max(var(--wf-space-4),
    calc((100vw - var(--wf-nav-width) - var(--wf-content-max)) / 2));
}
.wf-main__inner {
  max-width: var(--wf-content-max);
  margin: 0 auto;
  padding: 0 var(--wf-space-4);
}

/* ---------- ページヘッダー(type: article。eyebrow は v2 で廃止) ----------
   構成は上から ページ番号 → 欧文タイトル(title_en)→ 和文サブタイトル(title)。
   英語版は欧文タイトルのみ(番号は日英とも出す)。
   kv があるページはヘッダー右側に画像枠を置くヒーロー型にする。
   WF ではグレーボックスを置くところまでに留め、作り込みはデザイン適用時に行う。 */
/* 全幅の帯。KV を持たないページは左のテキスト面のみ */
.wf-page-header {
  margin: 0 0 var(--wf-space-6);
  /* Figma(Hero / Standard 4162:8864): 高さ 440・テキスト群は上下中央・上下パディング40 / 右48 */
  min-height: var(--wf-size-hero-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wf-space-panel-gap) var(--wf-space-5) var(--wf-space-panel-gap) var(--wf-bleed-inset);
  /* Figma実測: Hero / Background はヘッダー帯全体(テキスト面 + KV)に敷く */
  background: var(--wf-gradient-hero);
}
/* KV があるページは 左=テキスト面 / 右=全高の KV の2カラム */
.wf-page-header--hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
}
.wf-page-header__main {
  min-width: 0;
  padding: var(--wf-space-panel-gap) var(--wf-space-5) var(--wf-space-panel-gap) var(--wf-bleed-inset);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ---------- variant: banner(08 サステナビリティ / 09 ガバナンス) ----------
   Figma(Hero / Banner 4162:10983・4162:11181): 高さ 440・写真を帯全面に敷き(角丸なし)、
   左から暗色のグラデーション(scrim)を重ね、左のテキスト列(幅640)に白文字を置く。
   写真が未支給の間はグレー枠 + scrim でレイアウトだけ確認できる */
.wf-page-header--banner {
  position: relative;
  grid-template-columns: 1fr;
  background: var(--wf-color-nav-bg);
  overflow: hidden;
}
.wf-page-header--banner .wf-page-header__kv {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wf-page-header--banner .wf-page-header__kv .wf-image {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  /* グレー枠の台帳ラベルはテキスト列と重ならないよう右下に寄せる */
  justify-content: flex-end;
  align-items: flex-end;
}
.wf-page-header--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wf-gradient-banner-scrim);
  pointer-events: none;
}
.wf-page-header--banner .wf-page-header__block-id {
  position: absolute;
  top: var(--wf-space-1);
  right: var(--wf-space-1);
  z-index: 3;
}
.wf-page-header--banner .wf-page-header__main {
  position: relative;
  z-index: 2;
  max-width: var(--wf-size-banner-text-col);
  background: none;
}
.wf-page-header--banner .wf-page-header__num,
.wf-page-header--banner .wf-page-header__title-en,
.wf-page-header--banner .wf-page-header__title-ja { color: var(--wf-color-nav-text); }
.wf-page-header--banner .wf-page-header__title-en {
  font-size: var(--wf-font-size-banner-title-vw);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-banner-title);
  letter-spacing: var(--wf-letter-spacing-banner-title);
}

/* Figma: EN/Hero Num — Inter SemiBold 12 / 1.6 / 字間20% / プライマリー(hue/*)。番号 → 欧文 16px */
.wf-page-header__num {
  margin: 0 0 var(--wf-space-2);
  font-size: var(--wf-font-size-label);
  font-weight: var(--wf-font-weight-semibold);
  letter-spacing: var(--wf-letter-spacing-xl);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
}
.wf-page-header__title { margin: 0; }
/* Figma: EN/Hero Title — Inter SemiBold 52 / 1.2 / 字間5% / color/ink */
.wf-page-header__title-en {
  display: block;
  font-size: var(--wf-font-size-h1-vw);
  font-weight: var(--wf-font-weight-semibold);
  letter-spacing: var(--wf-letter-spacing-md);
  line-height: var(--wf-line-height-tight);
  color: var(--wf-color-text);
}
/* Figma: JA/Hero Label — Regular 14 / 1.7 / 字間10% / color/muted */
.wf-page-header__title-ja {
  display: block;
  margin-top: var(--wf-space-2);
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-regular);
  letter-spacing: var(--wf-letter-spacing-lg);
  line-height: var(--wf-line-height-comfortable);
  color: var(--wf-color-muted);
}
/* ヒーロー内に入る小項目(キャッチコピー・肩書氏名など) */
.wf-page-header__main .wf-subsection { margin: var(--wf-space-4) 0 0; }  /* Figma: 和文サブ → キャッチ 32 / キャッチ → 署名 32 */
/* Figma: 署名(肩書・氏名)は JA/Body S — Regular 14 / 1.8 / 字間4% / color/sub */
.wf-page-header__main .wf-pattern-text p {
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
}
.wf-page-header__kv { min-width: 0; display: flex; flex-direction: column; }
.wf-page-header__kv .wf-image {
  flex: 1;
  min-height: var(--wf-size-kv-h);
  border-radius: 0;
  border: 0;
}
.wf-page-header__block-id {
  /* display は指定しない(既定は非表示。wf-debug 時だけ表示。2026-10-09: ここで display を指定していたため公開ビルドでも見えていた) */
  margin: 0 0 var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}

/* ---------- カバーヘッダー(type: index の扉ページ。h1 + KV を一体で置く) ----------
   装飾は付けない。扉としてのデザインはデザインフェーズで作り込む。 */
.wf-cover {
  /* TODO(要デザイナー確認): Figma は写真 + ブラー楕円の合成。CSS 近似を継続 */
  background: var(--wf-gradient-cover);
  margin: 0 0 var(--wf-space-6);
  /* Figma(Cover / KV 4162:8779): 高さ 720。タイトル群の上端 176 ≒ 160 */
  min-height: var(--wf-size-cover-h);
  padding: var(--wf-space-8) var(--wf-bleed-inset);
}
.wf-cover__title {
  /* Figma実測: Inter Medium 120px / line-height 1 */
  font-size: var(--wf-font-size-display-lg-vw);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-flat);
  margin: 0 0 var(--wf-space-tight);   /* Figma: タイトル → 和文サブ 10 */
}
.wf-cover__subtitle {
  margin: 0 0 var(--wf-space-6);       /* Figma: 和文サブ → 社名 67 ≒ 64 */
  font-size: var(--wf-font-size-cover-sub-vw);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
}
/* 背景画像(台帳の IMG-COMMON-02 / 03 = role cover-bg / cover-bg-sp)が支給されたら画像で描画する。
   build_wf.py が .wf-cover__bg(背景レイヤー)を置く。無い間は --wf-gradient-cover(CSS 近似)のまま */
.wf-cover { position: relative; }
.wf-cover > :not(.wf-cover__bg) { position: relative; z-index: 1; }
.wf-cover__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wf-cover__bg--sp { display: none; }
/* 背景画像あり(pc / sp)の目印。背景レイヤーの重なりを cover の中に閉じる */
.wf-cover--has-bg-pc,
.wf-cover--has-bg-sp { isolation: isolate; }
/* 英語版は和文サブタイトルを出さないため、社名の上に和文サブ分の余白(64px)を確保する */
.wf-cover__title + .wf-cover__company { margin-top: var(--wf-space-6); }
.wf-cover__company {
  margin: 0 0 var(--wf-space-3);
  font-size: var(--wf-font-size-cover-sub-vw);
  font-weight: var(--wf-font-weight-bold);
  letter-spacing: 0.06em;
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-primary);
}
.wf-cover__block-id {
  /* display は指定しない(既定は非表示。wf-debug 時だけ表示。2026-10-09: ここで display を指定していたため公開ビルドでも見えていた) */
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-muted);
  margin: 0 0 var(--wf-space-1);
}
/* ヒーローのタイポグラフィはコンテナ幅(cqi)基準(vw は使わない。2026-10-06)。
   タイトルを直接包む要素をコンテナにし、左ナビ表示時も本文側の幅で文字サイズを決める。
   ヒーロー自体にも overflow-x: clip(.wf-main の clip と同じ値。ヒーローの箱の外へは何も出さない。横スクロールは発生しない)。
   container query 非対応ブラウザは上の *-vw(画面幅基準)のまま */
.wf-cover,
.wf-page-header { overflow-x: clip; }
@supports (width: 1cqi) {
  .wf-cover,
  .wf-page-header__main { container-type: inline-size; }
  .wf-cover__title { font-size: var(--wf-font-size-display-lg-cq); }
  .wf-cover__subtitle,
  .wf-cover__company { font-size: var(--wf-font-size-cover-sub-cq); }
  .wf-page-header__title-en { font-size: var(--wf-font-size-h1-cq); }
  .wf-page-header--banner .wf-page-header__title-en { font-size: var(--wf-font-size-banner-title-cq); }
}

/* ---------- ページ内アンカーナビ(ピル型チップの折り返しグリッド) ---------- */
.wf-anchor-nav {
  margin: 0 0 var(--wf-space-section);
  padding: 0;
}
/* 本文カラムの下余白(フッター帯との間) */
.wf-main__inner > :last-child { margin-bottom: var(--wf-space-6); }
/* Figma: Anchor Nav の Label — Inter SemiBold 12 / 1.6 / 字間20% / color/muted */
.wf-anchor-nav__title {
  font-size: var(--wf-font-size-label);
  font-weight: var(--wf-font-weight-semibold);
  letter-spacing: var(--wf-letter-spacing-xl);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
  margin: 0 0 var(--wf-space-footer-row);   /* Figma: Label → Links 12 */
}
.wf-anchor-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-1);
}
/* ピル型チップ。高さ39px(Figma 実測)・枠線・角丸は pill */
.wf-anchor-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wf-size-chip-h);
  /* Figma の Pill は枠線が内側(px16 に線を含む)。CSS の枠線は外側に足されるため左右を 1px 詰めて幅を合わせる */
  padding: 0 calc(var(--wf-space-2) - 1px);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-pill);
  background: var(--wf-color-bg);
  /* Figma: Pill — JA/Body S(Regular 14 / 1.8 / 字間4%)/ color/sub */
  font-size: var(--wf-font-size-sub);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
  text-decoration: none;
}
/* ピル型チップは hover / focus-visible のみ。タップ・クリック後に強調を残さない(2026-10-06 PM 指示)。
   タッチ端末はタップ後も :hover が残り続けるため、hover の見た目(青枠 + 青文字)はマウス等の hover できる端末だけに出す。
   共通の a:hover(下線 + リンク hover 色)もチップでは打ち消す */
.wf-anchor-nav__link:hover {
  color: var(--wf-color-sub);
  text-decoration: none;
}
/* TODO(要デザイナー確認): hover はカンプ未定義のため仮置き */
@media (hover: hover) {
  .wf-anchor-nav__link:hover {
    border-color: var(--wf-color-primary);
    color: var(--wf-color-primary);
  }
}
/* キーボード操作時のフォーカス枠は共通の a:focus-visible(角丸 4px)のままだとチップの形が崩れるので、ピル型を保つ */
.wf-anchor-nav__link:focus-visible { border-radius: var(--wf-radius-pill); }
/* current チップ(予約。現在地ハイライトは将来 IntersectionObserver でスクロール連動にする予定で、現状は付与されない) */
.wf-anchor-nav__link.is-current {
  background: var(--wf-color-primary);
  border-color: var(--wf-color-primary);
  color: var(--wf-color-on-primary);
  font-weight: var(--wf-font-weight-bold);
}

/* ---------- セクション(h2) — カードにしない ---------- */
.wf-section { margin: 0 0 var(--wf-space-section); }
.wf-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-2);
  margin: 0 0 var(--wf-space-4);       /* Figma: h2 → 本文 32px */
  flex-wrap: wrap;
}
.wf-section__title { margin: 0; }
.wf-section__block-id {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-muted);
}

/* kv 用: h2見出しなし、block-id は image の上に小さく */
.wf-section--kv { margin-bottom: var(--wf-space-5); }
.wf-section--kv .wf-section__block-id-inline {
  /* display は指定しない(既定は非表示。wf-debug 時だけ表示。2026-10-09: ここで display を指定していたため公開ビルドでも見えていた) */
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-muted);
  margin: 0 0 var(--wf-space-1);
}

/* ---------- サブセクション(h3 children) ----------
   Figma 実測: h2 → 最初の h3 48px / h3 ブロック間 48px / h3 → 中身 32px */
.wf-subsection { margin: 0 0 var(--wf-space-5); }
.wf-subsection:last-child { margin-bottom: 0; }
/* h2 → 最初の h3 48 = h2 の下余白 32 + padding 16(Figma V4_261002 / 03 Business Highlights の Section Header → Sub 実測 48。2026-10-09 PM 指示)。
   margin で足すと h2 の下余白と相殺されて 32 になるため padding で足す。見出しなしの最初の子は h2 → 本文 32 のまま */
.wf-section__header + .wf-subsection:not(.wf-subsection--no-heading),
.wf-section__header + .wf-children-grid { padding-top: calc(var(--wf-space-5) - var(--wf-space-4)); }
.wf-subsection__header {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-2);
  margin: 0 0 var(--wf-space-4);
  flex-wrap: wrap;
}
.wf-subsection__title { margin: 0; }
/* 親子でまとめた章(親ブロックの variant: grouped)— Figma V4_261002 / Section / マテリアリティ(4297:17158)の値を流用:
   h2 → 最初の子 64 / 子の間 64 / 子見出し Medium 20 / 1.6 / 字間4% / 子見出し → 中身 24 /
   見出しなしの子(steps など)は直前の子から 24(Sub / 特定プロセス の gap 24) */
.wf-section--grouped > .wf-section__header { margin-bottom: var(--wf-space-6); }
.wf-section--grouped > .wf-section__header + .wf-subsection { padding-top: 0; }
.wf-section--grouped > .wf-subsection { margin-bottom: var(--wf-space-6); }
.wf-section--grouped > .wf-subsection:last-child { margin-bottom: 0; }
.wf-section--grouped > .wf-subsection:has(+ .wf-subsection--no-heading) { margin-bottom: var(--wf-space-3); }
/* .wf-subsection--no-heading … 見出しなしの子ブロックの目印(build_wf.py が付ける。grouped の章でだけ使う) */
.wf-section--grouped > .wf-subsection > .wf-subsection__header { margin-bottom: var(--wf-space-3); }
.wf-section--grouped > .wf-subsection > .wf-subsection__header .wf-subsection__title {
  font-size: var(--wf-font-size-h4);
  line-height: var(--wf-line-height-normal);
  letter-spacing: var(--wf-letter-spacing-sm);
}
.wf-subsection__block-id {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-muted);
}

/* ---------- サブサブセクション(h4 children) ----------
   Figma 実測: h4 ブロック間 32px / h4 → 中身 20px / Medium 20 / line-height 1.6 */
.wf-subsubsection { margin: 0 0 var(--wf-space-4); }
.wf-subsubsection:last-child { margin-bottom: 0; }
.wf-subsubsection__header {
  display: flex;
  align-items: baseline;
  gap: var(--wf-space-2);
  margin: 0 0 var(--wf-space-h4-gap);
  flex-wrap: wrap;
}
.wf-subsubsection__title {
  margin: 0;
  font-size: var(--wf-font-size-h4);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
}
.wf-subsubsection__block-id {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-muted);
}

/* ---------- 原稿共通記法: グループ見出し(kpi-grid の 【 】) ---------- */
.wf-pattern-kpi__group { margin-bottom: var(--wf-space-3); }
.wf-pattern-kpi__group:last-child { margin-bottom: 0; }
/* Figma: KPI Group の見出し Medium 14 / color/ink */
.wf-pattern-kpi__group-heading {
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
  margin: 0 0 var(--wf-space-2);
}

/* ---------- 原稿共通記法: 脚注(注:, 出典:) ---------- */
.wf-pattern-footnote {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
  margin: var(--wf-space-1) 0 0;
}

/* ---------- カード系の列数は本文幅基準(2026-10-06 渥美決定) ----------
   本文エリア(.wf-main__inner)をコンテナ(wf-content)にし、カード系の列数・レイアウトの切り替えはコンテナクエリで本文幅から決める
   (画面幅ではないので、左ナビの有無にかかわらず本文の実際の幅で決まる)。
   sitemap の cols は「最大の列数」。PC(本文 986px)では従来どおり repeat(cols, 1fr) のまま(見た目を変えない)。
   本文幅が「cols 列 × 最小カード幅 + 列間」を下回ったら列数を 1 つずつ減らす(減らした後は minmax(0, 1fr) で枠からはみ出さない)。
   最小カード幅(仮置き): card-list 220 / pillar(3P)240 / INDEX カード 280 / kpi-grid 150 / グループ横並び 200 / children 280。
   しきい値は「列数 × 最小幅 + (列数 − 1) × 列間」(@container の条件は var() が使えないため数値で書く。列数は build_wf.py が
   style="--wf-cols: N" で渡すので、その属性で見分ける。指定が無いときは各パターンの既定の列数) */
.wf-main__inner { container: wf-content / inline-size; }

/* ---------- 原稿共通記法: グループ見出し(card-list の 【 】、4グループ×cols=4 は横並びカラム) ---------- */
.wf-pattern-cards-grouped {
  display: grid;
  grid-template-columns: repeat(var(--wf-cols, 4), 1fr);
  gap: var(--wf-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.wf-pattern-cards__group {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}
/* Figma: Product Grid の列見出し(Medium 14 + 下に 2px のプライマリー線) */
.wf-pattern-cards__group-heading {
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
  margin: 0;
}
.wf-pattern-cards__group > .wf-pattern-cards__group-heading {
  padding-bottom: var(--wf-space-2);
  border-bottom: 2px solid var(--wf-color-primary);
}
.wf-pattern-cards__stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}
/* 4グループの横並び(製品リスト)では項目を枠なしの淡い面にする(Figma: Product Grid / Item) */
.wf-pattern-cards__stack .wf-pattern-cards__item {
  padding: var(--wf-space-2);
  background: var(--wf-color-surface-subtle);
  border: 0;
}
.wf-pattern-cards__stack .wf-pattern-cards__text { color: var(--wf-color-text-body-strong); }
.wf-pattern-cards__stack .wf-pattern-cards__title {
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-regular);
  color: var(--wf-color-text-body-strong);
}

/* ---------- 親ブロックに cols がある場合の children グリッド ---------- */
.wf-children-grid {
  display: grid;
  grid-template-columns: repeat(var(--wf-cols, 2), 1fr);
  gap: var(--wf-space-3);
}
.wf-children-grid > .wf-subsubsection,
.wf-children-grid > .wf-subsection {
  margin-bottom: 0;
}

/* ---------- 画像枠(共通)----------
   画像枠は 2 状態を持つ(build_wf.py が状態クラスを必ず 1 つ付ける):
     .wf-img--placeholder … 画像未着。グレー面 + 画像IDラベル + aspect / min-height で高さを確保する
     .wf-img--real        … 実画像。背景・角丸・影なし(透過画像は置かれた面がそのまま透ける)
   実画像の角丸・マスクは Figma 実測で必要な場合のみ、パターン側で明示的に付ける
   (その規則には「wf-real-deco:」コメントで根拠を書く。check_wf.py が根拠の無い装飾をエラーにする) */
.wf-image { min-width: 0; }
.wf-image__id { font-weight: var(--wf-font-weight-bold); margin-right: var(--wf-space-1); }
.wf-image__note {
  flex-basis: 100%;
  margin-top: var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
}
/* 枠の用途別の余白(状態によらない) */
.wf-image--card { margin-bottom: var(--wf-space-2); }

/* ---------- プレースホルダー状態(グレー枠) ---------- */
.wf-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wf-size-photo-h);
  padding: var(--wf-space-3);
  background: var(--wf-color-image-existing);
  color: var(--wf-color-text);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
  text-align: center;
  border-radius: var(--wf-radius-lg);
}
.wf-img--placeholder.is-new { background: var(--wf-color-image-new); }
/* 英語版のみ: EN版の要否が未判定の画像に付ける注記(枠内で改行して置く) */
.wf-img--placeholder.wf-image--has-note {
  flex-wrap: wrap;
  align-content: center;   /* 折り返した2行が離れないようにする */
}
.wf-img--placeholder.wf-image--kv { min-height: var(--wf-size-kv-h); }
.wf-img--placeholder.wf-image--figure { min-height: var(--wf-size-figure-h); }
.wf-img--placeholder.wf-image--card { min-height: var(--wf-size-card-img-h); }
.wf-img--placeholder.wf-image--portrait { min-height: var(--wf-size-media-h); }
/* 台帳の aspect(images.yaml)があれば aspect-ratio で高さを決める。
   build_wf.py が style="--wf-aspect: W / H" を付ける。無い枠は min-height のまま */
.wf-img--placeholder.wf-image--aspect {
  aspect-ratio: var(--wf-aspect);
  min-height: 0;
}

/* ---------- 実画像状態(画像差し替え工程。台帳に file がある画像) ----------
   <img> を出す。背景・角丸・影・枠線・内側余白は持たない。高さは台帳の aspect(実寸から自動記入)で決める。
   画像ID・EN注記・「EN画像未」は wf-debug 時だけ左上に小さく重ねる(ラベル自体の背景は枠に影響しない) */
.wf-img--real {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: var(--wf-aspect, auto);
  min-height: 0;
}
.wf-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wf-image__tags {
  position: absolute;
  top: var(--wf-space-1);
  left: var(--wf-space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-1);
  max-width: calc(100% - var(--wf-space-2));
}
.wf-img--real .wf-image__id,
.wf-img--real .wf-image__note {
  flex-basis: auto;
  margin: 0;
  padding: 0 var(--wf-space-1);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-color-image-tag-bg);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
/* ヒーローの KV は全高に伸ばす(アスペクト比で高さを決めない) */
.wf-page-header__kv .wf-img--real { aspect-ratio: auto; flex: 1; }
/* サイドナビのロゴ(紺地に白抜きの想定): 画像だけを左寄せで収める */
.wf-nav__logo--photo .wf-image__img { object-fit: contain; object-position: left center; }
/* 実ロゴ(白版 SVG)は Figma 実測の幅 160 で縦横比なり(160×25.6)。枠の高さ 32 はプレースホルダー時だけ */
.wf-nav__logo.wf-img--real { height: auto; }
.wf-nav__logo.wf-img--real .wf-image__img { width: var(--wf-size-nav-logo-w); max-width: 100%; height: auto; }

/* ---------- pattern: text ----------
   本文テキストの段落は最大 860px(Figma: 全ページの本文テキスト幅)。
   図版・カード・表・media-text など並べて置く要素は本文カラム幅のまま(この制限を受けない) */
.wf-pattern-text { max-width: var(--wf-size-text-max); }
/* リンク行は本文カラム幅いっぱい(Figma V4_261002 の Link 行は 1000px。2026-10-05 PM 指示)。
   リンク行を含む text パターンは幅の制限を外し、リンク行以外の要素にだけ 860px を効かせる */
.wf-pattern-text:has(> .wf-link) { max-width: none; }
.wf-pattern-text:has(> .wf-link) > :not(.wf-link) { max-width: var(--wf-size-text-max); }
.wf-pattern-text p {
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
  margin: 0 0 var(--wf-space-2);
}
.wf-pattern-text p:last-child { margin-bottom: 0; }

/* 本文ブロック内の【】行 = 小見出し(2026-10-09 渥美決定。build_wf.py の paras_html)。既存の見出しと同じトークン:
   h3(h2 のブロック内)… 24px / medium / 1.6・前 48(h3 ブロック間)・後 32(h3 → 中身)。
     h2 のすぐ下(本文の先頭)なら既存の h3 と同じく padding 16 を足して h2 → h3 48(margin だと h2 の下余白と相殺されるため)
   h4(h3 以下のブロック内)… 20px / medium / 1.6・前 32(h4 ブロック間)・後 20(h4 → 中身)。先頭は h3 → 中身 32 のまま */
.wf-pattern-subheading {
  color: var(--wf-color-text);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
}
.wf-pattern-subheading--h3 {
  font-size: var(--wf-font-size-h3);
  margin: var(--wf-space-5) 0 var(--wf-space-4);
}
.wf-pattern-subheading--h3:first-child { margin-top: 0; }
.wf-section__header + .wf-pattern-text > .wf-pattern-subheading--h3:first-child { padding-top: calc(var(--wf-space-5) - var(--wf-space-4)); }
.wf-pattern-subheading--h4 {
  font-size: var(--wf-font-size-h4);
  margin: var(--wf-space-4) 0 var(--wf-space-h4-gap);
}
.wf-pattern-subheading--h4:first-child { margin-top: 0; }

/* パターン冒頭の導入文(原稿冒頭の地の文)→ パターン本体の間(Figma: 20px) */
.wf-pattern-text + .wf-pattern-kpi,
.wf-pattern-text + .wf-pattern-kpi__group,
.wf-pattern-text + .wf-pattern-kpi-detail,
.wf-pattern-text + .wf-pattern-cards,
.wf-pattern-text + .wf-pattern-cards-grouped,
.wf-pattern-text + .wf-pattern-steps,
.wf-pattern-text + .wf-pattern-def-list,
.wf-pattern-text + .wf-hscroll,
.wf-pattern-text + .wf-pattern-figure { margin-top: var(--wf-space-h4-gap); }
/* card-list のカード群の後ろに続く本文(closing text。原稿でカードの後に書いた地の文)。導入文 → カード群と同じ 20px(2026-10-09 PM 指示。
   strategy/subsidiaries の「各子会社についてはこちらもご覧ください。」)。本文 → リンク行は従来どおり 24 */
.wf-pattern-cards + .wf-pattern-text,
.wf-pattern-cards-grouped + .wf-pattern-text,
.wf-pattern-cards__group + .wf-pattern-text { margin-top: var(--wf-space-h4-gap); }

/* ---------- pattern: lead ---------- */
.wf-pattern-lead {
  font-size: var(--wf-font-size-h3);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
  max-width: var(--wf-size-lead-max);
  margin: 0;
}

/* ---------- pattern: statement ----------
   Figma(04 価値創造 / Statement): 白地 + 1px 枠 + 角丸8 のカード、上下88 / 左右64、
   Medium 34・中央寄せ・brand/b900。ヒーロー内のキャッチコピーはカードにしない */
.wf-pattern-statement {
  font-size: var(--wf-font-size-statement);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-brand-deep);
  text-align: center;
  padding: var(--wf-space-statement-y) var(--wf-space-6);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  margin: 0;
}
.wf-page-header__main .wf-pattern-statement {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  color: var(--wf-color-text);
}

/* ---------- pattern: media-text ----------
   Figma(02 ビジネスハイライト / Chart パネル): 淡い面(neutral/n50)+ 角丸8 のパネルに
   本文カラム(380px)と図版を並べる。上下48 / 左右24 / 列間40(V3_0918 実測。V4_261002 は上下50。適用は PM 判断待ち)。
   既定は 本文左・画像右(DOM も本文 → 画像)。media: left で画像を左カラムに置く */
.wf-pattern-media-text {
  display: grid;
  /* 画像列は minmax(0, 1fr): 実画像の内在幅で列が広がらないようにする(max-width: 100% を列幅で効かせる) */
  grid-template-columns: var(--wf-size-media-text-col) minmax(0, 1fr);
  gap: var(--wf-space-panel-gap);
  align-items: center;
  padding: var(--wf-space-5) var(--wf-space-3);
  background: var(--wf-color-surface-subtle);
  border-radius: var(--wf-radius-lg);
}
.wf-pattern-media-text__body {
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
}
.wf-pattern-media-text__body p { margin: 0 0 var(--wf-space-2); }
.wf-pattern-media-text__body p:last-child { margin-bottom: 0; }
/* 出典・注はパネルの内側・本文の下(Figma V4_261002: Chart パネルの Text 内。
   Noto Sans JP Regular 12 / 1.7 / 字間4% / color/muted、本文との間 14)。他パターンの脚注には影響させない */
.wf-pattern-media-text__text { min-width: 0; }
.wf-pattern-media-text__text .wf-pattern-footnote {
  margin: 0;
  font-size: var(--wf-font-size-label);
  line-height: var(--wf-line-height-comfortable);
  color: var(--wf-color-muted);
}
.wf-pattern-media-text__body + .wf-pattern-footnote { margin-top: var(--wf-space-media-caption); }
/* 実画像の図版: プレースホルダーのグレー面・角丸を外し(透過 PNG にパネル色を透かす)、
   台帳 size(2x 書き出し)の 1/2 を表示幅、列幅を上限にする。列内では左寄せ・上下中央(Figma 実測)。
   角丸は Figma の図版にマスクが無いため付けない。グレー面は画像未着のプレースホルダー時のみ */
.wf-pattern-media-text .wf-img--real.wf-image--natural {
  justify-self: start;
  width: var(--wf-img-w);
  max-width: 100%;
  aspect-ratio: auto;
}
.wf-image--natural .wf-image__img {
  display: block;
  height: auto;
  object-fit: contain;
}
/* media: left — 画像を左カラムに置く(DOM も画像→本文の順) */
.wf-pattern-media-text--left { grid-template-columns: minmax(0, 1fr) var(--wf-size-media-text-col); }
/* variant: plain — Figma(Top Message / Body + Portrait 4162:8847): パネルなし、本文(残り幅)+ 画像列 262px 固定、
   列間48、上端揃え、画像の角丸4(radius/sm)。縦長・横長どちらの画像も列幅に合わせて縮む */
.wf-pattern-media-text--plain {
  grid-template-columns: 1fr var(--wf-size-media-portrait-col);
  gap: var(--wf-space-5);
  align-items: start;
  padding: 0;
  background: none;
  border-radius: 0;
}
.wf-pattern-media-text--plain.wf-pattern-media-text--left { grid-template-columns: var(--wf-size-media-portrait-col) 1fr; }
.wf-pattern-media-text--plain .wf-image {
  /* wf-real-deco: Figma V4_261002 / Top Message「Mask / Portrait」(4297:14812)が rx 4 */
  border-radius: var(--wf-radius-sm);
}

/* ---------- pattern: kpi-grid ---------- */
/* Figma(V4_261002 / KPI Item): 白地 + 1px 枠 + 角丸8、パディング 上22 / 左右20 / 下18、カード間 14、要素間 6、
   指標名 13 / muted → 値 Inter SemiBold 48 / 1.2 → YoY Medium 14 / プライマリー */
.wf-pattern-kpi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--wf-cols, 4), 1fr);
  gap: var(--wf-space-kpi-gap);
}
.wf-pattern-kpi__item {
  padding: var(--wf-space-kpi-pad-top) var(--wf-space-card-pad) var(--wf-space-kpi-pad-bottom);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
}
.wf-pattern-kpi__label {
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
  margin: 0 0 var(--wf-space-kpi-inner);
}
.wf-pattern-kpi__value {
  font-size: var(--wf-font-size-kpi);
  font-weight: var(--wf-font-weight-semibold);
  line-height: var(--wf-line-height-tight);
  color: var(--wf-color-text);
  margin: 0;
}
/* 値は「数値 + 単位」の 2 つの span(build_wf.py)。単位は数値と同じ行に入らないときだけ次の行へ(単位の中では折り返さない)。
   長い英数字は枠内で折り返してはみ出さない */
.wf-pattern-kpi__value { overflow-wrap: anywhere; }
.wf-pattern-kpi__unit { white-space: nowrap; }
.wf-pattern-kpi__delta {
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
  margin: var(--wf-space-kpi-inner) 0 0;
}

/* ---------- pattern: card-list ---------- */
.wf-pattern-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--wf-cols, 3), 1fr);
  /* Figma(V4_261002): Case Grid・Card Item の Row とも gap 16 */
  gap: var(--wf-space-card-gap);
}
/* 各グループが 1 カードの横並び(グループ見出しをカード内に置く形)は、グループ間として 24
   (Figma V4_261002 / 07 Business Strategy の Cases Row 4297:17033: 488 + 24 + 488) */
.wf-pattern-cards--groups { gap: var(--wf-space-3); }
/* Figma(Card Item / Case Card / 3P Card): 白地 + 1px 枠 + 角丸8、パディング 20、
   タイトル Medium 20 → (10)→ サブラベル 13 / muted → 強調リード Medium 14 / プライマリー → 本文 14 / 1.8 */
.wf-pattern-cards__item {
  padding: var(--wf-space-card-pad);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
}
/* 画像付きカード(Case Card): サムネイルは枠いっぱい + 下にヘアライン */
.wf-pattern-cards__item > .wf-image--card:first-child {
  margin: calc(var(--wf-space-card-pad) * -1) calc(var(--wf-space-card-pad) * -1) var(--wf-space-card-pad);
  /* wf-real-deco: Figma V4_261002 / Case Card(4297:15477)は角丸8のカードが Thumb を切り抜く(Thumb 自体のマスクは rx 0)。
     カードの上端の角に合わせる */
  border-radius: var(--wf-radius-lg) var(--wf-radius-lg) 0 0;
  border-bottom: 1px solid var(--wf-color-hairline);
  /* Figma(V4_261002 / Case Card の Thumb): 238×125 の枠に写真を cover で敷く。
     home の INDEX カードと同じく、台帳の aspect ではなくカードの比率でトリミングする */
  aspect-ratio: var(--wf-ratio-card-thumb);
  min-height: 0;
}
.wf-pattern-cards__title {
  font-size: var(--wf-font-size-h4);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  /* Figma(V4_261002 / Card Body): タイトル → 本文 gap 10 */
  margin: 0 0 var(--wf-space-card-inner);
  color: var(--wf-color-text);
  display: block;
}
a.wf-pattern-cards__title { color: var(--wf-color-primary); }
/* カード見出しのサブラベル / 強調リード(複数行カードの記法) */
.wf-pattern-cards__sub {
  display: block;
  margin-top: 0;
  font-size: var(--wf-font-size-caption);
  font-weight: var(--wf-font-weight-regular);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}
.wf-pattern-cards__bullets {
  margin: var(--wf-space-1) 0 0;
  padding-left: var(--wf-space-list-indent);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
}
.wf-pattern-cards__bullets li { margin-bottom: var(--wf-space-1); }
.wf-pattern-cards__bullets li:last-child { margin-bottom: 0; }
.wf-pattern-cards__lead {
  margin: var(--wf-space-2) 0 var(--wf-space-1);
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
}
.wf-pattern-cards__text {
  font-size: var(--wf-font-size-sub);
  /* Figma(V4_261002 / Case Card・Case Card / Wide の本文 JA/Body S): 14 / 1.8(補助の 1.6 の例外) */
  line-height: var(--wf-line-height-relaxed);
  margin: 0;
  color: var(--wf-color-sub);
}
/* カードの最後の要素の下マージンは付けない(Figma の Card Body はパディング 20 で閉じる)。
   製品リスト(__stack)の項目・グループ見出し入りのカードも含め、すべてのカードに効かせる(2026-10-06 PM 指示:
   タイトルだけのカードでタイトルの下に余白が残り上寄りに見えたため)。上下のパディングは等しいので、本文の無いカードは上下中央になる。
   カード内の要素間は gap ではなく各要素の margin のまま(要素の組み合わせで 20 / 16 / 14 / 10 / 8 / 0 と異なり、
   gap 1 つでは表せないため)。先頭の要素の margin-top は付けていない(画像付きカードのサムネイルは負の margin で枠いっぱいにする) */
.wf-pattern-cards__item > :last-child { margin-bottom: 0; }
/* タイトル(+ サブ)だけのカードは、行の高さに合わせて伸びたときもタイトルを上下中央に置く(2026-10-06 PM 指示) */
.wf-pattern-cards__item:has(> .wf-pattern-cards__title:only-child) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 画像付きカード(Figma: Case Card・Case Card / Wide)では、「名称 | サブ」のサブを本文(JA/Body S)として出す。
   Figma V4_261002 / 重要事例(4311:12524)は 2 行目が 14 / Regular / 1.8 / sub 色、タイトルとの間 10 */
.wf-pattern-cards__item--media .wf-pattern-cards__sub {
  margin-top: var(--wf-space-card-inner);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
  letter-spacing: var(--wf-letter-spacing-sm);
}

/* ---------- 外部リンク / リンク待ちプレースホルダ ----------
   原稿の「リンク: ラベル(URL未確定)」はリンク風の見た目 + 淡色の注記で表す。
   URL が確定したら「リンク: ラベル | URL」に更新され実リンクになる。 */
/* リンク行(「リンク: ラベル | URL」)— Figma(V4_261002 / Link 行 4297:15511):
   白地 + 1px 枠 + 角丸8、上下20 / 左右24、要素間12、上下中央。
   ラベル Medium 16 / 1.6 / 字間4% / プライマリー + 下線 → 外部リンクアイコン 14 / プライマリー → URL Inter Medium 12 / 淡色・右寄せ */
.wf-link { margin: 0; }
/* リンク行が続くときは 12(Figma V4_261002 / ESGデータの Links 4297:17246) */
.wf-link + .wf-link { margin-top: var(--wf-space-link-row-gap); }
/* text パターン内(段落の下マージン 16)でも、リンク行どうしは 12 にする */
.wf-pattern-text p.wf-link:has(+ .wf-link) { margin-bottom: 0; }
.wf-link__anchor {
  display: flex;
  align-items: center;
  gap: var(--wf-space-footer-row);
  padding: var(--wf-space-link-row-y) var(--wf-space-3);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  text-decoration: none;
}
.wf-link__label {
  font-size: var(--wf-font-size-body);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  letter-spacing: var(--wf-letter-spacing-sm);
  color: var(--wf-color-primary);
  text-decoration: none;
}
/* ラベル: 通常時は下線なし、hover / focus-visible で下線(渥美決定 2026-10-06)。
   下線は home の INDEX カードの見出しと同じ text-decoration: underline の既定値(太さ・オフセット auto)。
   下線の色は常にその要素の文字色(currentColor)に追従させる: ラベルは青、右の URL はグレー。
   行(<a>)自体には下線を引かない(a:hover の下線が子要素に伝播すると、<a> の色(青)で URL・アイコンの下にも線が出るため)。
   .is-hover は styleguide で hover 時の見た目を並べて見せるための状態クラス */
.wf-link__anchor:hover,
.wf-link__anchor:focus-visible { text-decoration: none; }
.wf-link__anchor:hover .wf-link__label,
.wf-link__anchor:focus-visible .wf-link__label,
.wf-link.is-hover .wf-link__label,
.wf-link__anchor:hover .wf-link__url,
.wf-link__anchor:focus-visible .wf-link__url,
.wf-link.is-hover .wf-link__url {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.wf-link__icon {
  flex: none;
  font-size: var(--wf-font-size-link-icon);
  color: var(--wf-color-primary);
}
.wf-link__url {
  flex: 1;
  min-width: 0;
  font-size: var(--wf-font-size-label);
  font-weight: var(--wf-font-weight-medium);
  color: var(--wf-color-muted);
  text-align: right;
  overflow-wrap: anywhere;
}
/* 狭い幅では縦並び: 1 行目にラベル + アイコン、2 行目に URL(または「（リンク先URL未確定）」)を左寄せ(渥美決定 2026-10-06)。
   画面幅ではなくリンク行自体の幅で切り替える(コンテナクエリ)。しきい値 640px = 横並びで URL が 1 行に収まる最大の必要幅
   (現在の原稿で最長: 英語版 Environmental data + https://exawizards.com/en/sustainability/esg/environment/ = 624px)に余裕を足した値。
   @container の条件には var() が使えないため数値で書く(メディアクエリの 768px と同じ例外)。
   枠の内側余白(上下 20 / 左右 24)・URL の文字サイズ(12px)は横並びと同じ。長い URL だけ overflow-wrap: anywhere で折り返す */
.wf-link { container-type: inline-size; }
@container (max-width: 639px) {
  .wf-link__anchor {
    flex-wrap: wrap;
    row-gap: var(--wf-space-link-row-stack-gap);
  }
  .wf-link__label { max-width: calc(100% - var(--wf-font-size-link-icon) - var(--wf-space-footer-row)); }
  .wf-link__url {
    flex-basis: 100%;
    text-align: left;
  }
}
/* hover の文字色は Figma 未定義のため仮置き(要デザイナー確認): ラベルをリンク hover 色に */
.wf-link__anchor:hover .wf-link__label,
.wf-link.is-hover .wf-link__label { color: var(--wf-color-primary-hover); }
/* figure パターンではリンク行を図版の下に置く(図版 → リンク 32。Figma 実測) */
.wf-pattern-figure + .wf-link { margin-top: var(--wf-space-4); }
/* URL 未確定のリンク行(「リンク: ラベル(URL未確定)」)— Figma(V4_261002 / Link 行 4297:17054):
   確定後と同じ枠付きの行。右の URL の位置に注記「（リンク先URL未確定）」(Inter Medium 12 / 淡色・右寄せ)。
   リンク先が無いので <a> ではなく hover もしない */
.wf-link--pending .wf-link__anchor { cursor: default; }
.wf-link--pending .wf-link__anchor:hover .wf-link__label { color: var(--wf-color-primary); text-decoration: none; }
.wf-link--pending .wf-link__anchor:hover .wf-link__url { text-decoration: none; }
/* 本文・カードの後に置くリンク行は 24 空ける(Figma: Sub / 対談(リンク)の見出し → Link 行 gap 24。見出しは WF 非掲載) */
.wf-pattern-text + .wf-link,
.wf-pattern-cards + .wf-link,
.wf-pattern-cards-grouped + .wf-link,
.wf-pattern-cards__group + .wf-link { margin-top: var(--wf-space-3); }
/* text パターン内で本文段落の直後に続くリンク行も 24(段落の下マージン 16 と相殺して 24 になる。governance の risk など) */
.wf-pattern-text p:not(.wf-link) + .wf-link { margin-top: var(--wf-space-3); }

/* 表の行グループ見出し(【 】行。全列結合 + 面差し) */
.wf-pattern-table__group td {
  background: var(--wf-color-surface);
  font-weight: var(--wf-font-weight-medium);
  color: var(--wf-color-text);
}

/* ---------- 本文中の外部リンク群(sitemap の links[]) ---------- */
.wf-links { margin: 0; }
.wf-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-1);
}
.wf-links__link {
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-primary);
}
.wf-links__note {
  margin: var(--wf-space-2) 0 0;
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}

/* ---------- steps(番号付きプロセス) ----------
   各ステップは 大きな番号(01〜。自動採番)+ タイトル + 本文(箇条書き可)の行。
   ステップ間はヘアラインで区切る。SP は番号を上に置いて縦積み。 */
/* Figma(V4_261002 / 08 Sustainability の Steps / 特定プロセス 4297:17162): 各ステップを淡い面(neutral/n50)+ 角丸8 のパネルにし、
   パネル間 12・上下24 / 左右28・番号カラム48 → 24 → 本文。番号 Inter SemiBold / プライマリー、タイトル Medium、タイトル → 本文 8。
   本文・箇条書きは 1.8 の行送りで詰めて続け(段落間・項目間の余白なし)、「・」はぶら下げずに行頭に置く */
.wf-pattern-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-step-gap);
}
.wf-pattern-steps__item {
  display: grid;
  grid-template-columns: var(--wf-size-step-num-col) 1fr;
  gap: var(--wf-space-3);
  padding: var(--wf-space-3) var(--wf-space-step-pad-x);
  background: var(--wf-color-surface-subtle);
  border-radius: var(--wf-radius-lg);
  align-items: start;
}
.wf-pattern-steps__num {
  margin: 0;
  font-size: var(--wf-font-size-h2);
  font-weight: var(--wf-font-weight-semibold);
  line-height: var(--wf-line-height-flat);
  color: var(--wf-color-primary);
}
.wf-pattern-steps__body { min-width: 0; }
.wf-pattern-steps__title {
  margin: 0;
  font-size: var(--wf-font-size-h4);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
.wf-pattern-steps__text,
.wf-pattern-steps__list {
  margin: 0;
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
}
.wf-pattern-steps__title + .wf-pattern-steps__text,
.wf-pattern-steps__title + .wf-pattern-steps__list { margin-top: var(--wf-space-1); }
.wf-pattern-steps__list {
  list-style: none;
  padding: 0;
}
.wf-pattern-steps__list li::before { content: "・"; }
/* 見出しなしの導入文ブロック → steps ブロックは 24(Figma: Sub / 特定プロセス の gap 24) */
.wf-subsection:has(> .wf-pattern-text:only-child):has(+ .wf-subsection > .wf-pattern-steps) { margin-bottom: var(--wf-space-3); }

/* ---------- kpi-detail(行型のKPI) ----------
   1グループ = 1行。左に数値カード(指標名 + 値 + YoY補足)、
   右に「主要プロダクト」カードを置く2カラム。SP は縦積み。 */
.wf-pattern-kpi-detail { margin: 0; }
/* Figma(05 AI Product / KPI Group): グループ見出し Medium 14 → 白カード2枚(間隔16)。
   右カードは「主要プロダクト」ラベル(13 / muted)+ 製品名(Medium 14 / プライマリー) */
.wf-pattern-kpi-detail__row { margin-bottom: var(--wf-space-3); }
.wf-pattern-kpi-detail__row:last-child { margin-bottom: 0; }
.wf-pattern-kpi-detail__group {
  margin: 0 0 var(--wf-space-2);
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
.wf-pattern-kpi-detail__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wf-space-2);
  align-items: stretch;
}
.wf-pattern-kpi-detail__metrics,
.wf-pattern-kpi-detail__products {
  padding: var(--wf-space-card-pad);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  min-width: 0;
}
.wf-pattern-kpi-detail__values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}
.wf-pattern-kpi-detail__value-item { margin: 0; }
.wf-pattern-kpi-detail__label {
  margin: 0 0 var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}
.wf-pattern-kpi-detail__value {
  margin: 0;
  font-size: var(--wf-font-size-kpi);
  font-weight: var(--wf-font-weight-semibold);
  line-height: var(--wf-line-height-tight);
  color: var(--wf-color-text);
}
.wf-pattern-kpi-detail__delta {
  margin: var(--wf-space-1) 0 0;
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
}
.wf-pattern-kpi-detail__products-title {
  margin: 0 0 var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  font-weight: var(--wf-font-weight-regular);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}
.wf-pattern-kpi-detail__products-body {
  margin: 0;
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
}

/* ---------- def-list(行型の定義リスト) ----------
   1行 = 左に 項目名(bold・プライマリー色)+ サブタイトル / 右に箇条書き。
   項目間はヘアラインで区切る。SP は縦積み。 */
/* Figma(04 価値創造 / Credo List): 外枠の線なし・行間にだけヘアライン、行の上下 40 /
   項目名カラム 280 / 列間 48。項目名 Bold 24 プライマリー → サブ Medium 16 ink → 箇条書き 16 n800 */
/* 行の間隔は gap で付け、行自身は外側の余白を持たない(先頭行の上・最終行の下に余白を足さない。
   ブロックの前後はセクションの余白(h2 → 本文 32 / セクション間 96)だけで決まる。2026-10-06 PM 指示)。
   行間 = gap 40 + ヘアライン + 次の行の padding-top 40(従来の「行の上下 40」と同じ見た目) */
.wf-pattern-def-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-panel-gap);
}
.wf-pattern-def-list__row {
  display: grid;
  grid-template-columns: var(--wf-size-def-term) 1fr;
  gap: var(--wf-space-5);
  align-items: start;
}
.wf-pattern-def-list__row + .wf-pattern-def-list__row {
  padding-top: var(--wf-space-panel-gap);
  border-top: 1px solid var(--wf-color-border);
}
/* グループ見出し: 前の行から 40 + 24、見出し → 行 40(先頭のときは上の余白なし) */
.wf-pattern-def-list__group-heading {
  margin: var(--wf-space-3) 0 0;
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-bold);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
.wf-pattern-def-list__group-heading:first-child { margin-top: 0; }
.wf-pattern-def-list__term { margin: 0; min-width: 0; }
.wf-pattern-def-list__name {
  display: block;
  font-size: var(--wf-font-size-h3);
  font-weight: var(--wf-font-weight-bold);
  line-height: var(--wf-line-height-heading);
  color: var(--wf-color-primary);
}
.wf-pattern-def-list__sub {
  display: block;
  margin-top: var(--wf-space-1);
  font-size: var(--wf-font-size-body);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
.wf-pattern-def-list__desc { margin: 0; min-width: 0; }
/* Figma: 5px の丸ドット + 17px のぶら下げ(ブラウザ標準の disc を使う) */
.wf-pattern-def-list__list {
  margin: 0;
  padding-left: var(--wf-space-list-indent);
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-text-body-strong);
}
.wf-pattern-def-list__list li { margin-bottom: var(--wf-space-1); }
.wf-pattern-def-list__list li:last-child { margin-bottom: 0; }

/* ---------- home の toc カード v3(card-list の特殊化) ----------
   Figma(V3_0918 / Section / INDEX の TOC Card インスタンス 4162:8800 ほか):
   白地 + 1px 枠 + 角丸8(影なし)、サムネイルは枠いっぱい(490×208)、本文パディング20・要素間10、
   番号 Inter SemiBold 11 / 字間26% / プライマリー → タイトル Medium 24 / 字間10% / 見出し色 →
   中項目 Regular 13 / 1.7 / 字間4% / 淡色。カード間 20 */
.wf-toc {
  display: grid;
  grid-template-columns: repeat(var(--wf-cols, 2), 1fr);
  gap: var(--wf-space-card-pad);
  align-items: stretch;
}
.wf-toc__card {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-tight);
  height: 100%;
  padding: 0 var(--wf-space-card-pad) var(--wf-space-card-pad);
  overflow: hidden;
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  color: inherit;
  text-decoration: none;
}
/* hover / focus-visible: 見出し(.wf-toc__title)に下線のみ。文字色は通常時のまま(渥美決定 2026-10-06)。
   下線は他のテキストリンク(a:hover)と同じ text-decoration: underline の既定値(太さ・オフセットは auto、色は文字色)。
   番号・中項目リストには付けない。カード自体の見た目(枠・背景)は変えない。focus リングは a:focus-visible の共通指定 */
.wf-toc__card:hover,
.wf-toc__card:focus-visible { text-decoration: none; color: inherit; }
.wf-toc__card:hover .wf-toc__title,
.wf-toc__card:focus-visible .wf-toc__title { text-decoration: underline; }
/* サムネイルは枠いっぱい(左右・上のパディングを打ち消す)。角はカード側の角丸で切る */
.wf-toc__thumb {
  aspect-ratio: var(--wf-aspect-toc-thumb);
  min-height: auto;
  margin: 0 calc(var(--wf-space-card-pad) * -1) calc(var(--wf-space-card-pad) - var(--wf-space-tight));
  border-radius: 0;
}
.wf-toc__number {
  margin: 0;
  font-size: var(--wf-font-size-toc-num);
  font-weight: var(--wf-font-weight-semibold);
  letter-spacing: var(--wf-letter-spacing-2xl);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-primary);
}
.wf-toc__title {
  margin: 0;
  font-size: var(--wf-font-size-h3);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-lg);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-text);
}
.wf-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--wf-font-size-caption);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-comfortable);
  color: var(--wf-color-muted);
}
.wf-toc__list li { padding: 0; margin: 0; }

/* ---------- index型ページの参照情報パネル(policy / disclaimer 等) ---------- */
.wf-reference {
  margin: 0 0 var(--wf-space-5);
  padding: var(--wf-space-4);
  background: var(--wf-color-surface);
  border-radius: var(--wf-radius-lg);
}
.wf-reference .wf-section {
  margin-bottom: var(--wf-space-4);
}
.wf-reference .wf-section:last-child {
  margin-bottom: 0;
}
.wf-reference .wf-section__title {
  font-size: var(--wf-font-size-h3);
  font-weight: var(--wf-font-weight-medium);
}
.wf-reference .wf-pattern-text p {
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}
/* 参照情報パネルの h2 は 24px(h3 相当)に落としているため、本文内の【】小見出しは h4 のトークン
   (20px・前 32 / 後 20・先頭は h2 の下余白のまま)で 1 段下に見せる(仮置き) */
.wf-reference .wf-pattern-subheading {
  font-size: var(--wf-font-size-h4);
  margin: var(--wf-space-4) 0 var(--wf-space-h4-gap);
}
.wf-reference .wf-pattern-subheading:first-child { margin-top: 0; padding-top: 0; }

/* ---------- pattern: figure ---------- */
.wf-pattern-figure { margin: 0; }
/* variant: wide — Figma(Top Message / 全幅帯写真 4162:8856): コンテンツ領域(サイドナビを除く画面幅)いっぱい・角丸なし。
   ページ末尾に置く帯写真用。直前のセクションとの間は 64px、フッターとは隙間なしで接する */
.wf-pattern-figure--wide {
  width: calc(100vw - var(--wf-nav-offset));
  margin-left: calc(50% - (100vw - var(--wf-nav-offset)) / 2);
}
.wf-pattern-figure--wide .wf-image { border-radius: 0; }
/* variant: chart — Figma(V4_261002 / Chart 業種別取引高構成・特許 累計出願・取得件数): 本文(全幅)の下に図版。
   本文 → 図版 32。実画像はグレー面・角丸なし(Figma の図版にマスク無し)、台帳 size(2x 書き出し)の 1/2 を表示幅、
   本文カラム幅が上限、左寄せ。グレー面は画像未着のプレースホルダー時のみ */
.wf-pattern-text + .wf-pattern-figure--chart { margin-top: var(--wf-space-4); }
.wf-pattern-figure--chart .wf-img--real.wf-image--natural {
  width: var(--wf-img-w);
  max-width: 100%;
  aspect-ratio: auto;
}
/* variant: logo — Figma(V4_261002 / 06 AI Solution Service の Logo + Text 4297:16889・4297:16906・4297:16914):
   見出し →(32)→ ロゴ枠(白地 + 1px 枠 + 角丸8・400×150・左寄せ・ロゴは中央)→(24)→ 本文(16 / 1.8 / sub・860px まで)
   →(32)→ 注記(13 / 1.7 / muted)。枠は figure 内の容器が持ち、画像枠(.wf-image)自体は 2 状態の原則どおり */
.wf-pattern-figure__logo-frame {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wf-size-logo-frame-w);
  max-width: 100%;
  height: var(--wf-size-logo-frame-h);
  padding: var(--wf-space-logo-frame-y) var(--wf-space-logo-frame-x);
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
}
/* プレースホルダーはロゴ領域(枠の内側)を埋める */
.wf-img--placeholder.wf-image--logo {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--wf-space-1);
  aspect-ratio: auto;
}
/* 実画像は台帳 size(2x 書き出し)の 1/2 を表示幅、ロゴ領域が上限 */
.wf-img--real.wf-image--logo {
  width: var(--wf-img-w, auto);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}
.wf-img--real.wf-image--logo .wf-image__img {
  max-height: calc(var(--wf-size-logo-frame-h) - var(--wf-space-logo-frame-y) * 2 - 2px);   /* 枠線 1px × 2 を除いたロゴ領域の高さ(110) */
  object-fit: contain;
}
.wf-pattern-figure--logo + .wf-pattern-text,
.wf-pattern-figure--logo + .wf-link { margin-top: var(--wf-space-3); }
.wf-pattern-figure--logo ~ .wf-pattern-footnote {
  margin-top: var(--wf-space-4);
  line-height: var(--wf-line-height-comfortable);
}
.wf-section:has(> .wf-pattern-figure--wide) {
  margin-top: calc(var(--wf-space-6) - var(--wf-space-section));
  margin-bottom: 0;
}
.wf-main__inner > .wf-section:has(> .wf-pattern-figure--wide):last-of-type + .wf-notes { margin-top: var(--wf-space-6); }
/* Figma: 図版の下の注記は左揃え(Chart の Note と同位置) */
.wf-pattern-figure__caption {
  margin: var(--wf-space-2) 0 0;
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
  text-align: left;
}

/* ---------- pattern: data-table ---------- */
/* Figma(V4_261002 / 08 Sustainability の Table / 特定したマテリアリティ 4297:17184): 外枠 1px + 角丸8、縦罫なし・行下にだけ罫線、
   ヘッダー行は neutral/n100 の面 + Medium 13 / sub、1列目は Medium / ink、セル本文 14 / sub、行送り 1.75(→ 1.8)、セル内パディング 16 */
.wf-pattern-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
}
.wf-pattern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-relaxed);
}
.wf-pattern-table th,
.wf-pattern-table td {
  padding: var(--wf-space-2);
  border-bottom: 1px solid var(--wf-color-border);
  text-align: left;
  vertical-align: top;
  color: var(--wf-color-text);
}
.wf-pattern-table tbody tr:last-child td { border-bottom: 0; }
.wf-hscroll + .wf-pattern-figure { margin-top: var(--wf-space-3); }
.wf-pattern-table thead th {
  background: var(--wf-color-surface-strong);
  font-size: var(--wf-font-size-caption);
  font-weight: var(--wf-font-weight-medium);
  color: var(--wf-color-sub);
}
.wf-pattern-table tbody td { color: var(--wf-color-sub); }
.wf-pattern-table tbody td:first-child {
  font-weight: var(--wf-font-weight-medium);
  color: var(--wf-color-text);
}
/* 列幅の指定(sitemap の col_widths。<col> に % を入れる)があるときは表のレイアウトを固定する */
.wf-pattern-table--fixed { table-layout: fixed; }
/* data-table variant: matrix(Figma V4_261002 / 09 Governance の Skill Matrix 4297:17356):
   外枠なし・見出し行は面なしで下に 1px 罫線、行の下に hairline。列幅は 氏名 92 / 専門分野 168 / 残り均等。
   見出し Medium 10.5(1〜2 列)・9.5(スキル列)/ 1.5 / muted、氏名 Medium 11.5 / ink、専門分野 Regular 11 / sub、
   ◎ Regular 12 / brand b900・中央揃え(→ いずれも最小トークンの 12 に寄せる)。セル 上下10 / 左右8(スキル列は6)。
   グループ行(【 】)は面差し(surface)+ Medium。狭い画面では枠内で横スクロール */
.wf-pattern-table-wrap--matrix {
  border: 0;
  border-radius: 0;
}
.wf-pattern-table--matrix {
  table-layout: fixed;
  min-width: var(--wf-size-matrix-min);
  font-size: var(--wf-font-size-label);
  line-height: var(--wf-line-height-section);
}
.wf-pattern-table--matrix th,
.wf-pattern-table--matrix td {
  padding: var(--wf-space-matrix-cell-y) var(--wf-space-matrix-mark-x);
  border-bottom-color: var(--wf-color-hairline);
  text-align: center;
  vertical-align: middle;
}
.wf-pattern-table--matrix th:nth-child(-n+2),
.wf-pattern-table--matrix td:nth-child(-n+2),
.wf-pattern-table--matrix .wf-pattern-table__group td {
  padding: var(--wf-space-matrix-cell-y) var(--wf-space-matrix-cell-x);
  text-align: left;
}
.wf-pattern-table--matrix th:nth-child(1) { width: var(--wf-size-matrix-col1); }
.wf-pattern-table--matrix th:nth-child(2) { width: var(--wf-size-matrix-col2); }
.wf-pattern-table--matrix thead th {
  background: none;
  font-size: var(--wf-font-size-label);
  color: var(--wf-color-muted);
  border-bottom-color: var(--wf-color-border);
  vertical-align: top;
}
.wf-pattern-table--matrix tbody td { color: var(--wf-color-brand-deep); }
.wf-pattern-table--matrix tbody td:nth-child(2) { color: var(--wf-color-sub); }
.wf-pattern-table--matrix tbody tr:last-child td { border-bottom: 1px solid var(--wf-color-hairline); }
/* TODO(要デザイナー確認): SP の横スクロールは Figma に定義なし。表の最小幅を確保して枠内でスクロール(仮置き) */
@media (max-width: 768px) {
  .wf-pattern-table { min-width: calc(var(--wf-size-lead-max) - var(--wf-space-6)); }
  .wf-pattern-table--matrix { min-width: var(--wf-size-matrix-min); }
}
/* 固定列あり(.wf-pattern-table--sticky-first。matrix は既定で有効。ほかの表は sitemap の sticky_first: true)。
   1 列目(見出し th・本文 td)を常に position: sticky; left: 0。背景を塗り(見出し・本文 = 表の背景 / 通常の表の見出しは見出し行の面)、
   z-index で常に上に置く。横スクロールが起きない幅(PC で表が収まる)では見た目は変わらない。
   横スクロールに関わる見た目は templates/page.html の JS が .wf-hscroll に付けるクラスで出し分ける:
   - is-scrollable(はみ出している): 固定列の幅を --wf-sticky-col-w にし、氏名を折り返さない。グループ行のラベルを固定列幅の箱にする
   - is-scrollable かつ is-at-start でない(1px 以上スクロールした): 固定列の右端に境目(--wf-shadow-sticky-col)。先頭に戻ると消える
   行の下罫線は border-collapse では固定セルと一緒に動かないため、スクロール中は固定セルに inset の線で描き直す */
.wf-hscroll { --wf-sticky-col-w: var(--wf-size-sticky-col); }
html[lang="en"] .wf-hscroll { --wf-sticky-col-w: var(--wf-size-sticky-col-en); }
/* グループ行のセルの余白(ラベルの箱を余白ごと覆うため)と行罫線の色。既定の表 16 / matrix 10・8 */
.wf-pattern-table--sticky-first { --wf-sticky-pad-y: var(--wf-space-2); --wf-sticky-pad-x: var(--wf-space-2); --wf-sticky-row-line: var(--wf-color-border); }
.wf-pattern-table--sticky-first.wf-pattern-table--matrix { --wf-sticky-pad-y: var(--wf-space-matrix-cell-y); --wf-sticky-pad-x: var(--wf-space-matrix-cell-x); --wf-sticky-row-line: var(--wf-color-hairline); }
.wf-pattern-table--sticky-first thead th:first-child,
.wf-pattern-table--sticky-first tbody tr:not(.wf-pattern-table__group) td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--wf-hscroll-bg);
}
.wf-pattern-table--sticky-first:not(.wf-pattern-table--matrix) thead th:first-child { background: var(--wf-color-surface-strong); }
.wf-pattern-table--sticky-first .wf-pattern-table__group-label {
  position: sticky;
  left: 0;
  z-index: 2;
}
.wf-hscroll.is-scrollable .wf-pattern-table--sticky-first th:first-child { width: var(--wf-sticky-col-w); }
.wf-hscroll.is-scrollable .wf-pattern-table--sticky-first tbody tr:not(.wf-pattern-table__group) td:first-child { white-space: nowrap; }
/* グループ行(全列結合)のラベルは固定列幅の箱(面 = グループ行の色)にして左端に残す(長いラベルは箱の中で折り返す) */
.wf-hscroll.is-scrollable .wf-pattern-table--sticky-first .wf-pattern-table__group-label {
  display: block;
  box-sizing: border-box;
  width: var(--wf-sticky-col-w);
  margin: calc(var(--wf-sticky-pad-y) * -1) 0 calc(var(--wf-sticky-pad-y) * -1) calc(var(--wf-sticky-pad-x) * -1);
  padding: var(--wf-sticky-pad-y) var(--wf-sticky-pad-x);
  background: var(--wf-color-surface);
}
/* 1px 以上スクロールしたときだけ固定列の右端に境目を出す */
.wf-hscroll.is-scrollable:not(.is-at-start) .wf-pattern-table--sticky-first tbody tr:not(.wf-pattern-table__group) td:first-child {
  box-shadow: var(--wf-shadow-sticky-col), inset 0 -1px 0 var(--wf-sticky-row-line);
}
.wf-hscroll.is-scrollable:not(.is-at-start) .wf-pattern-table--sticky-first thead th:first-child {
  box-shadow: var(--wf-shadow-sticky-col), inset 0 -1px 0 var(--wf-color-border);
}
.wf-hscroll.is-scrollable:not(.is-at-start) .wf-pattern-table--sticky-first .wf-pattern-table__group-label { box-shadow: var(--wf-shadow-sticky-col); }
/* 左端のフェードは固定列の右側から始める */
.wf-hscroll:has(.wf-pattern-table--sticky-first) .wf-hscroll__frame::before {
  left: var(--wf-sticky-col-w);
  border-radius: 0;
}

/* ---------- 横スクロールの表示(SP。渥美決定 2026-10-06: 端フェード + ヒント) ----------
   build_wf.py が横スクロールする要素(.wf-pattern-table-wrap)を .wf-hscroll > .wf-hscroll__frame で包む。
   - フェード: 続きがある側の端に、表が置かれた面の色 → 透明のグラデーション(::after 右 / ::before 左)
   - ヒント: 表の直上・右寄せ「横にスクロールできます / Scroll horizontally」。一度横スクロールしたら消す
   JS(templates/page.html)は端の判定とヒント消去だけ: is-ready / is-scrollable / is-at-start / is-at-end / is-scrolled を付け外しする。
   JS 無効時(is-ready なし)は SP で右端フェードを常時表示する。PC(769px 以上)ではどちらも出さない。
   .wf-hscroll--demo は styleguide の見本用(幅によらず SP と同じ表示にする) */
.wf-hscroll {
  --wf-hscroll-bg: var(--wf-color-hscroll-bg);
  --wf-hscroll-w: var(--wf-size-hscroll-fade);
  --wf-hscroll-o-end: var(--wf-opacity-hscroll-fade-end);
  --wf-hscroll-o-start: var(--wf-opacity-hscroll-fade-start);
}
/* 面のあるパネル内に置かれた表は、フェードの色を面の色に合わせる */
.wf-pattern-media-text .wf-hscroll,
.wf-pattern-steps .wf-hscroll { --wf-hscroll-bg: var(--wf-color-surface-subtle); }
.wf-reference .wf-hscroll { --wf-hscroll-bg: var(--wf-color-surface); }
.wf-hscroll__frame { position: relative; }
.wf-hscroll__frame::before,
.wf-hscroll__frame::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 1;
  width: var(--wf-hscroll-w);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wf-hscroll__frame::before {
  left: 1px;
  border-radius: var(--wf-radius-lg) 0 0 var(--wf-radius-lg);
  background: linear-gradient(to right, var(--wf-hscroll-bg), transparent);
}
.wf-hscroll__frame::after {
  right: 1px;
  border-radius: 0 var(--wf-radius-lg) var(--wf-radius-lg) 0;
  background: linear-gradient(to left, var(--wf-hscroll-bg), transparent);
}
.wf-hscroll__hint {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: var(--wf-space-1);
  margin: 0 0 var(--wf-space-1);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
  transition: opacity 0.3s ease;
}
.wf-hscroll__icon { font-size: var(--wf-font-size-sub); }
@media (max-width: 768px) {
  .wf-hscroll:not(.is-ready) .wf-hscroll__frame::after,
  .wf-hscroll.is-scrollable:not(.is-at-end) .wf-hscroll__frame::after { opacity: var(--wf-hscroll-o-end); }
  .wf-hscroll.is-scrollable:not(.is-at-start) .wf-hscroll__frame::before { opacity: var(--wf-hscroll-o-start); }
  .wf-hscroll.is-scrollable .wf-hscroll__hint { display: flex; }
  .wf-hscroll.is-scrolled .wf-hscroll__hint { opacity: 0; }
}
.wf-hscroll--demo { max-width: 343px; }
.wf-hscroll--demo.is-scrollable:not(.is-at-end) .wf-hscroll__frame::after { opacity: var(--wf-hscroll-o-end); }
.wf-hscroll--demo.is-scrollable:not(.is-at-start) .wf-hscroll__frame::before { opacity: var(--wf-hscroll-o-start); }
/* 見本用: 両端のフェードを出した状態(スクロール途中)で固定して比べる */
.wf-hscroll--demo-mid .wf-hscroll__frame::after { opacity: var(--wf-hscroll-o-end); }
.wf-hscroll--demo-mid .wf-hscroll__frame::before { opacity: var(--wf-hscroll-o-start); }
/* 見本用: 比較のための変更前の値(幅 32 / 両端とも不透明度 1)。TODO: 確認が済んだら見本ごと削除する */
.wf-hscroll--before { --wf-hscroll-w: 32px; --wf-hscroll-o-end: 1; --wf-hscroll-o-start: 1; }
/* 案: 左端のフェードを出さない(styleguide で比較中。未採用) */
.wf-hscroll--no-start-fade .wf-hscroll__frame::before { display: none; }
.wf-hscroll--demo.is-scrollable .wf-hscroll__hint { display: flex; }
.wf-hscroll--demo.is-scrolled .wf-hscroll__hint { opacity: 0; }

/* ---------- pattern: interview ---------- */
.wf-pattern-interview__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wf-space-3);
  margin: 0 0 var(--wf-space-4);
}
.wf-pattern-interview__body p {
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  margin: 0 0 var(--wf-space-2);
  color: var(--wf-color-sub);
}
.wf-pattern-interview__body p:last-child { margin-bottom: 0; }
.wf-pattern-interview__speaker {
  font-weight: var(--wf-font-weight-bold);
  color: var(--wf-color-text);
  margin-right: var(--wf-space-1);
}

/* ---------- pattern: accordion ---------- */
.wf-pattern-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf-pattern-accordion__item {
  background: var(--wf-color-surface);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  margin-bottom: var(--wf-space-1);
}
.wf-pattern-accordion__item:last-child { margin-bottom: 0; }
.wf-pattern-accordion__header {
  padding: var(--wf-space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wf-space-2);
}
.wf-pattern-accordion__title {
  font-size: var(--wf-font-size-body);
  font-weight: var(--wf-font-weight-bold);
  color: var(--wf-color-text);
}
.wf-pattern-accordion__body {
  padding: 0 var(--wf-space-2) var(--wf-space-2);
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-relaxed);
  color: var(--wf-color-sub);
}
.wf-pattern-accordion__body p { margin: 0; }
.wf-pattern-accordion__item .material-symbols-outlined {
  color: var(--wf-color-muted);
  transition: transform 0.15s;
}
.wf-pattern-accordion__item.is-open .material-symbols-outlined {
  transform: rotate(180deg);
}

/* ---------- 実装注記リスト ---------- */
.wf-notes {
  margin: var(--wf-space-5) 0;
  padding-top: var(--wf-space-3);
  border-top: 1px solid var(--wf-color-border);
}
.wf-notes__title {
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
  margin: 0 0 var(--wf-space-2);
}
.wf-notes__list {
  margin: 0;
  padding-left: var(--wf-space-3);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}
.wf-notes__list li { margin-bottom: var(--wf-space-1); }
.wf-notes__list li:last-child { margin-bottom: 0; }

/* ---------- フッター ----------
   構成は上から BACK/NEXT → INDEX リンク → リンク群 → copyright + 注記。
   ページ送りは独立要素をやめ、このフッター内に置く。
   文字属性は Figma(V3_0918 の Footer インスタンス)準拠。テキストはすべて白。 */
.wf-footer {
  /* 全幅の紺帯。Figma(Footer 4162:8860): 上下40、中身は幅800で中央揃え(本文カラムとは揃えない) */
  margin: 0;
  padding: var(--wf-space-panel-gap) max(var(--wf-bleed-inset), calc((100% - var(--wf-size-footer-max)) / 2));
  background: var(--wf-color-nav-bg);
  color: var(--wf-color-nav-text);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}

/* BACK / NEXT(左右2カラム。全ブレークポイントで横並びを維持し、
   片側が無いページでも空セルで左右の位置を固定する) */
.wf-footer__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wf-space-2);
  align-items: start;
  margin-bottom: var(--wf-space-footer-gap);
}
.wf-footer__pager-cell { min-width: 0; }
.wf-footer__pager-cell--back { grid-column: 1; }
.wf-footer__pager-cell--next { grid-column: 2; text-align: right; }
.wf-footer__pager-link {
  display: block;
  color: var(--wf-color-nav-text);
  text-decoration: none;
}
.wf-footer__pager-link:hover { text-decoration: none; }
.wf-footer__pager-link:hover .wf-footer__pager-title { text-decoration: underline; }
/* BACK / NEXT は特大タイポ(Figma実測: Inter Medium 40px / line-height 1) */
.wf-footer__pager-label {
  display: block;
  font-size: var(--wf-font-size-pager);
  font-weight: var(--wf-font-weight-medium);
  line-height: var(--wf-line-height-flat);
  letter-spacing: var(--wf-letter-spacing-xs);
  color: var(--wf-color-nav-text);
  margin: 0 0 var(--wf-space-1);
}
/* Figma: Pager の Title — Noto Sans JP Medium 16 / 1.6 / 字間4% / 白 */
.wf-footer__pager-title {
  display: block;
  font-size: var(--wf-font-size-body);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-nav-text);
  word-break: break-word;
}

/* INDEX(中央。全ページ共通でホーム = 00 に戻る) */
.wf-footer__index {
  margin: 0 0 var(--wf-space-footer-rule);
  text-align: center;
}
.wf-footer__index-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wf-space-footer-row);     /* Figma: Index Link の gap 12 */
  color: var(--wf-color-nav-text);
}
.wf-footer__index-link:hover { text-decoration: none; }
.wf-footer__index-link:hover .wf-footer__index-text { text-decoration: underline; }
/* Figma: INDEX — Inter Medium 15 / 字間20% / 白、「目次に戻る」— Medium 14 / 字間4% / 白 */
.wf-footer__index-label {
  font-size: var(--wf-font-size-nav);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-xl);
  line-height: var(--wf-line-height-heading);
}
.wf-footer__index-text {
  font-size: var(--wf-font-size-sub);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-nav-text);
}

/* PDF版ダウンロード導線(site.pdf_download が true のときのみ) */
.wf-footer__index + .wf-footer__pdf-wrap { margin-top: calc(var(--wf-space-3) - var(--wf-space-footer-rule)); }
.wf-footer__pdf-wrap {
  margin: 0 0 var(--wf-space-footer-rule);
  text-align: center;
}
.wf-footer__pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-space-1);
  padding: var(--wf-space-1) var(--wf-space-2);
  background: var(--wf-color-primary);
  color: var(--wf-color-on-primary);
  border-radius: var(--wf-radius-sm);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}
.wf-footer__pdf:hover { text-decoration: none; }
.wf-footer__pdf .material-symbols-outlined { font-size: var(--wf-font-size-h3); }

/* site.footer_links(区切り線を挟んだリンク群。日英共通・記載順)。
   Figma 準拠の2行段組: 行ごとに <ul> を分ける(行の区切りは build_wf.py の FOOTER_LINK_ROWS)。
   行内で幅が足りないときは行の中で折り返す */
.wf-footer__links {
  padding-top: var(--wf-space-footer-rule);
  border-top: 1px solid var(--wf-color-nav-border);
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-footer-row);
}
.wf-footer__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-footer-row) var(--wf-space-footer-gap);
}
.wf-footer__links-item { margin: 0; }
/* Figma: Footer Links — Noto Sans JP Regular 15 / 1.6 / 字間4% / 白 */
.wf-footer__link {
  font-size: var(--wf-font-size-nav);
  font-weight: var(--wf-font-weight-regular);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-nav-text);
}
/* TODO(要デザイナー確認): hover はカンプ未定義のため仮置き(白のまま下線) */
.wf-footer__link:hover { color: var(--wf-color-nav-text); text-decoration: underline; }
/* 別窓リンク(統合報告書サイトの外)に文末で付ける外部リンクアイコン(build_wf.py の apply_link_policy。2026-10-06 渥美決定)。
   本文中のリンク・フッターのリンク群に付く(リンク行は既存の .wf-link__icon)。文字色に追従・本文より一段小さく、下線は付けない。
   フッターでの表示は仮置き */
.wf-ext-icon {
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: -0.1em;
  text-decoration: none;
}
/* 読み上げ専用のテキスト(「(別ウィンドウで開きます)」等)。画面には出さない */
.wf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 最下部の copyright + site.footer_note */
.wf-footer__bottom {
  /* Figma(V3_0918): リンク群 → copyright ブロックは 28px。区切り線は無い */
  margin-top: var(--wf-space-footer-gap);
  text-align: right;
}
/* Figma: © — Inter Regular 13 / 字間2% / 白、footer_note — Noto Sans JP Regular 12 / 字間4% / 白 */
.wf-footer__copyright {
  margin: 0;
  font-size: var(--wf-font-size-caption);
  letter-spacing: var(--wf-letter-spacing-xs);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-nav-text);
}
.wf-footer__note {
  margin: var(--wf-space-footer-meta) 0 0;
  font-size: var(--wf-font-size-label);
  letter-spacing: var(--wf-letter-spacing-sm);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-nav-text);
}

/* ---------- スタイルガイド(wf/styleguide.html でのみ使用) ----------
   見本はヘアラインで区切るだけ。コンテンツ用のカード表現(枠+面)は流用しない。 */
.wf-sg-lead { margin: 0 0 var(--wf-space-3); }
.wf-sg-demo {
  margin-top: var(--wf-space-3);
  padding-top: var(--wf-space-3);
  border-top: 1px solid var(--wf-color-border);
}
/* 画像枠の 2 状態の見本: プレースホルダー → 実画像 を上下に並べ、各見本の上に状態名を置く */
.wf-sg-state {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-2);
}
.wf-sg-state__label {
  margin: var(--wf-space-2) 0 0;
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-muted);
}
.wf-sg-state__label:first-child { margin-top: 0; }
/* カード系の列数の見本: 枠を本文と同じコンテナ(wf-content)にし、ラジオボタン(:has(:checked))で枠の幅を切り替える */
.wf-sg-resize__opts { display: flex; flex-wrap: wrap; gap: var(--wf-space-1) var(--wf-space-3); margin: 0 0 var(--wf-space-2); font-size: var(--wf-font-size-caption); color: var(--wf-color-sub); }
.wf-sg-resize__opt { cursor: pointer; }
.wf-sg-resize__frame {
  container: wf-content / inline-size;
  box-sizing: content-box;
  width: 485px;
  max-width: 100%;
  padding: var(--wf-space-2);
  border: 1px dashed var(--wf-color-border);
}
.wf-sg-resize:has(input[value="343"]:checked) .wf-sg-resize__frame { width: 343px; }
.wf-sg-resize:has(input[value="485"]:checked) .wf-sg-resize__frame { width: 485px; }
.wf-sg-resize:has(input[value="736"]:checked) .wf-sg-resize__frame { width: 736px; }
.wf-sg-resize:has(input[value="986"]:checked) .wf-sg-resize__frame { width: 986px; }
/* 狭い幅の見本(コンテナクエリで切り替わる部品を 375px 端末の本文幅で見せる) */
.wf-sg-narrow { max-width: 343px; }
/* ハンバーガー(展開中)の見本: 固定配置を解除し、紺地の上に SP と同じ配色で置く */
.wf-sg-hamburger-row { display: flex; flex-wrap: wrap; gap: var(--wf-space-4); }
.wf-sg-hamburger {
  display: flex;
  justify-content: flex-end;
  width: var(--wf-size-nav-width-sp);
  padding: var(--wf-space-2);
  background: var(--wf-color-nav-bg);
}
.wf-hamburger.wf-hamburger--specimen {
  position: static;
  display: flex;
  background: var(--wf-color-nav-bg);
  border-color: var(--wf-color-nav-text);
}
.wf-hamburger.wf-hamburger--specimen .material-symbols-outlined { color: var(--wf-color-nav-text); }
.wf-hamburger.wf-hamburger--specimen.wf-hamburger--with-label { flex-direction: column; }
.wf-hamburger.wf-hamburger--specimen.wf-hamburger--with-label .wf-hamburger__icon { font-size: var(--wf-font-size-h4); line-height: 1; }
.wf-hamburger.wf-hamburger--specimen.wf-hamburger--with-label .wf-hamburger__text {
  display: block;
  font-size: var(--wf-font-size-nav-site);
  font-weight: var(--wf-font-weight-medium);
  letter-spacing: var(--wf-letter-spacing-md);
  line-height: var(--wf-line-height-flat);
  color: var(--wf-color-nav-text);
}
/* サイドナビ/言語切替の見本は固定配置を解除して本文中に置く */
.wf-sg-nav {
  width: var(--wf-nav-width);
  max-width: 100%;
  padding: var(--wf-space-3);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
}

/* ---------- レビュー用インデックス(retained) ---------- */
.wf-meta {
  margin: 0 0 var(--wf-space-5);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--wf-space-3);
  row-gap: var(--wf-space-1);
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}
.wf-meta dt { color: var(--wf-color-sub); }
.wf-meta dd { margin: 0; color: var(--wf-color-text); }

.wf-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wf-font-size-sub);
  line-height: var(--wf-line-height-normal);
}
.wf-index-table th,
.wf-index-table td {
  padding: var(--wf-space-2);
  border: 1px solid var(--wf-color-border);
  text-align: left;
  vertical-align: top;
}
.wf-index-table thead th {
  background: var(--wf-color-surface);
  font-weight: var(--wf-font-weight-bold);
  color: var(--wf-color-text);
}
.wf-index-table td.is-num { text-align: right; color: var(--wf-color-sub); }
.wf-index-table .wf-status {
  display: inline-block;
  padding: var(--wf-space-1) var(--wf-space-2);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-sm);
  font-size: var(--wf-font-size-sub);
  color: var(--wf-color-sub);
}

/* ---------- ハンバーガー(SPのみ表示) ---------- */
.wf-hamburger {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: var(--wf-size-touch);
  height: var(--wf-size-touch);
  padding: 0;
  background: var(--wf-color-bg);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-sm);
  cursor: pointer;
  z-index: 20;
  align-items: center;
  justify-content: center;
}
.wf-hamburger .material-symbols-outlined { font-size: var(--wf-font-size-h2); color: var(--wf-color-text); }
/* 「CLOSE」の文言は案 B(.wf-hamburger--with-label)のときだけ。初期値は × のみ(案 A) */
.wf-hamburger__text { display: none; }
/* SP ドロワー展開中の背面オーバーレイ(SP のみ表示。タップで閉じる) */
.wf-nav-overlay { display: none; }

/* card-list variant: person(Figma V4_261002 / 09 Governance の 役員一覧 4297:17271 / Exec 4297:17277):
   枠・面なし。写真 187×250(角丸6)→ 12 → 氏名 Medium 17 / 1.5(→ 本文 16 に寄せる)→ 12 → 役職 Regular 13 / 1.6 / sub。
   カード幅 187 の列で左寄せ(取締役3・社外取締役4・監査役3 とも同じ列幅)、カード間 16。
   グループ見出し Medium 16 / 1.6 / 字間6%(→ 5%)/ ink → 16 → カード列、グループ間 40 */
.wf-pattern-cards.wf-pattern-cards--person {
  grid-template-columns: repeat(auto-fill, var(--wf-size-person-w));
  gap: var(--wf-space-2);
}
.wf-pattern-cards__item--person {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.wf-pattern-cards__item--person > .wf-image--card:first-child {
  margin: 0 0 var(--wf-space-person-inner);
  aspect-ratio: var(--wf-ratio-person);
  border-bottom: 0;
  /* wf-real-deco: Figma V4_261002 / 09 Governance の Exec / Photo(4297:17278)は rx 6 のマスクで写真を切り抜く */
  border-radius: var(--wf-radius-portrait);
}
.wf-pattern-cards__item--person .wf-pattern-cards__title {
  margin: 0;
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-section);
  letter-spacing: var(--wf-letter-spacing-md);
}
.wf-pattern-cards__item--person .wf-pattern-cards__sub {
  margin-top: var(--wf-space-person-inner);
  font-size: var(--wf-font-size-caption);
  line-height: var(--wf-line-height-normal);
  color: var(--wf-color-sub);
  letter-spacing: var(--wf-letter-spacing-sm);
}
.wf-pattern-cards__group--person + .wf-pattern-cards__group--person { margin-top: var(--wf-space-person-group); }
.wf-pattern-cards__group--person > .wf-pattern-cards__group-heading {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-height-normal);
  letter-spacing: var(--wf-letter-spacing-md);
}

/* card-list variant: pillar(Figma V4_261002 / 07 Business Strategy の 3P Card 4297:16999):
   パディング 24・要素間 14。名称 Medium 19 / 1.5 / 字間4%(→ h4 20 に寄せる)→ (2)→ 英語サブ 13 / muted →
   リード文 Medium 14.5 / 1.75 / プライマリー(→ 補助 14 / 1.8 に寄せる)→ 段落 14 / 1.8 / sub 色(段落間 10) */
.wf-pattern-cards__item--pillar { padding: var(--wf-space-3); }
.wf-pattern-cards__item--pillar .wf-pattern-cards__title {
  margin: 0 0 var(--wf-space-pillar-gap);
  line-height: var(--wf-line-height-section);
  letter-spacing: var(--wf-letter-spacing-sm);
}
.wf-pattern-cards__item--pillar .wf-pattern-cards__sub {
  margin-top: var(--wf-space-pillar-head);
  line-height: var(--wf-line-height-section);
}
.wf-pattern-cards__item--pillar .wf-pattern-cards__lead {
  margin: 0 0 var(--wf-space-pillar-gap);
  line-height: var(--wf-line-height-relaxed);
}
.wf-pattern-cards__item--pillar .wf-pattern-cards__text + .wf-pattern-cards__text { margin-top: var(--wf-space-card-inner); }
.wf-pattern-cards__item--pillar .wf-pattern-cards__bullets { margin-top: 0; }

/* ---------- 字間(本文・全パターン) ----------
   Figma(V3_0918)の各パターンの letterSpacing を字間トークンに割り当てる。
   値の根拠は handoff/design/pattern-application.md の「字間の適用一覧」 */
/* 10%: 見出し(JA/Section・Subsection・Subsub Title)・カードタイトル(Card Item / Case Card)・アコーディオン行 */
.wf-section__title,
.wf-subsection__title,
.wf-subsubsection__title,
.wf-pattern-subheading,
.wf-pattern-cards__title,
.wf-pattern-accordion__title,
.wf-page-header__main .wf-pattern-statement { letter-spacing: var(--wf-letter-spacing-lg); }
/* 8%: statement カード */
.wf-pattern-statement { letter-spacing: var(--wf-letter-spacing-display); }
/* 5%: カードのサブラベル(Figma 6% を最寄りの md に寄せる) */
.wf-pattern-cards__sub { letter-spacing: var(--wf-letter-spacing-md); }
/* 4%: 本文(JA/Body)・補助(JA/Body S)・キャプション(JA/Caption)・KPI の指標名 / 前年比・表のセル */
.wf-pattern-text p,
.wf-pattern-media-text__body,
.wf-pattern-footnote,
.wf-pattern-kpi__label,
.wf-pattern-kpi__delta,
.wf-pattern-kpi__group-heading,
.wf-pattern-kpi-detail__group,
.wf-pattern-kpi-detail__label,
.wf-pattern-kpi-detail__delta,
.wf-pattern-kpi-detail__products-title,
.wf-pattern-kpi-detail__products-body,
.wf-pattern-cards__group-heading,
.wf-pattern-cards__lead,
.wf-pattern-cards__text,
.wf-pattern-cards__bullets,
.wf-pattern-def-list__sub,
.wf-pattern-def-list__list,
.wf-pattern-def-list__group-heading,
.wf-pattern-steps__title,
.wf-pattern-steps__text,
.wf-pattern-steps__list,
.wf-pattern-figure__caption,
.wf-pattern-table,
.wf-pattern-interview__body p,
.wf-pattern-accordion__body,
.wf-links__link,
.wf-link__label { letter-spacing: var(--wf-letter-spacing-sm); }
/* 2%: 製品リストの項目(Product Grid / Item)・def-list の項目名(Credo の Head) */
.wf-pattern-cards__stack .wf-pattern-cards__title,
.wf-pattern-cards__stack .wf-pattern-cards__text,
.wf-pattern-def-list__name { letter-spacing: var(--wf-letter-spacing-xs); }
/* 0: 欧文数字(EN/KPI Value・steps の番号)は字間なし(ブラウザ既定のまま) */

/* カード系の列数(本文幅)。下の数値は「列数 × 最小カード幅 + 列間」。人物カード(person)は別扱い(下の 419px)。
   列数を減らす規則は後に書いたものほど狭い幅用で、詳細度を揃えて(:not() で person を除く)後勝ちにする */
/* card-list(最小 220・列間 16。cols 未指定は 3 列)/ pillar(最小 240)/ グループ見出しを各カードに置く横並び(列間 24) */
@container wf-content (max-width: 927px) {
  .wf-pattern-cards:not(.wf-pattern-cards--person)[style*="--wf-cols: 4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container wf-content (max-width: 751px) {
  .wf-pattern-cards:not(.wf-pattern-cards--person):has(> .wf-pattern-cards__item--pillar) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 691px) {
  .wf-pattern-cards:not(.wf-pattern-cards--person)[style*="--wf-cols: 4"],
  .wf-pattern-cards:not(.wf-pattern-cards--person)[style*="--wf-cols: 3"],
  .wf-pattern-cards:not(.wf-pattern-cards--person):not([style*="--wf-cols"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 495px) {
  .wf-pattern-cards:not(.wf-pattern-cards--person):has(> .wf-pattern-cards__item--pillar) { grid-template-columns: minmax(0, 1fr); }
}
@container wf-content (max-width: 463px) {
  .wf-pattern-cards:not(.wf-pattern-cards--person):is([style], :not([style])) { grid-template-columns: minmax(0, 1fr); }
}
/* kpi-grid(最小 150・列間 14。cols 未指定は 4 列) */
@container wf-content (max-width: 641px) {
  .wf-pattern-kpi:is([style*="--wf-cols: 4"], :not([style*="--wf-cols"])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container wf-content (max-width: 477px) {
  .wf-pattern-kpi:is([style], :not([style])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 313px) {
  .wf-pattern-kpi:is([style], :not([style])):is(*) { grid-template-columns: minmax(0, 1fr); }
}
/* home の INDEX カード(最小 280・列間 20・2 列) */
@container wf-content (max-width: 579px) {
  .wf-toc { grid-template-columns: minmax(0, 1fr); }
}
/* グループ横並び(4 グループ × cols 4。最小 200・列間 24)/ 親ブロックの cols による children(最小 280・列間 24) */
@container wf-content (max-width: 871px) {
  .wf-pattern-cards-grouped { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-children-grid[style*="--wf-cols: 3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 647px) {
  .wf-pattern-cards-grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 583px) {
  .wf-children-grid:is([style], :not([style])) { grid-template-columns: minmax(0, 1fr); }
}
@container wf-content (max-width: 423px) {
  .wf-pattern-cards-grouped { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 本文幅で切り替えるレイアウト(コンテナクエリ。@container の条件は var() が使えないため数値) ----------
   - 人物カード: 本文 420px 未満で 2 列(187px の列が 2 本並ばない幅。Figma 未定義の仮置き)
   - media-text: 本文 748px 未満で縦積み(本文 → 画像。media: left は画像 → 本文)。
     748 = 本文カラム 380 + 列間 40 + 画像の最小 280 + パネルの左右 48。variant: plain は 600px 未満(本文の最小 290 + 列間 48 + 画像列 262)
   - kpi-detail の行: 560px 未満で数値カード / 主要プロダクトを縦積み
   - def-list の行: 600px 未満で項目名 / 箇条書きを縦積み */
@container wf-content (max-width: 419px) {
  .wf-pattern-cards.wf-pattern-cards--person { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wf-content (max-width: 747px) {
  .wf-pattern-media-text:not(.wf-pattern-media-text--plain),
  .wf-pattern-media-text--left:not(.wf-pattern-media-text--plain) { grid-template-columns: minmax(0, 1fr); }
}
@container wf-content (max-width: 599px) {
  .wf-pattern-media-text--plain,
  .wf-pattern-media-text--plain.wf-pattern-media-text--left { grid-template-columns: minmax(0, 1fr); }
  .wf-pattern-def-list__row { grid-template-columns: 1fr; gap: var(--wf-space-2); }
}
@container wf-content (max-width: 559px) {
  .wf-pattern-kpi-detail__cards { grid-template-columns: 1fr; gap: var(--wf-space-2); }
}

/* ---------- statement(ミッション等)の文字サイズ・余白を本文幅に追従(2026-10-06 SP(9)。値は仮置き) ----------
   文字サイズ: clamp(22px, N cqi, 34px)(tokens.css の --wf-font-size-statement-cq / -hero-cq)。
   34px を下回る幅(カード: 本文 508px 未満 / ヒーロー: テキスト列 448px 未満)では
   字間 8% → 4%(ヒーローは 10% → 5%)・行間 1.8 → 1.6、カードの内側余白を 上下 88 / 左右 64 → 32 / 20 に縮める。
   枠線・角丸は変えない。PC(本文 986px・ヒーロー 450px 以上)は従来どおり */
@supports (width: 1cqi) {
  .wf-pattern-statement { font-size: var(--wf-font-size-statement-cq); }
  .wf-page-header__main .wf-pattern-statement { font-size: var(--wf-font-size-statement-hero-cq); }
}
@container wf-content (max-width: 507px) {
  .wf-pattern-statement {
    padding: var(--wf-space-statement-y-sp) var(--wf-space-statement-x-sp);
    letter-spacing: var(--wf-letter-spacing-sm);
    line-height: var(--wf-line-height-normal);
  }
}
@container (max-width: 447px) {
  .wf-page-header__main .wf-pattern-statement {
    letter-spacing: var(--wf-letter-spacing-md);
    line-height: var(--wf-line-height-normal);
  }
}
/* ---------- KPI カード(kpi-grid)の値・指標名をカード幅に追従(2026-10-06 SP(11)。値は仮置き) ----------
   カード自身をコンテナにし、値は clamp(28px, 25cqi, 48px)(tokens.css の --wf-font-size-kpi-cq)。
   値が 48px を下回る幅(カードの内容幅 192px 未満)では指標名を 13px / 1.6 → 12px / 1.5 に一段小さくする。
   列数は「カード系の列数」の kpi ルール(最小 150px)のまま。PC(内容幅 194px 以上)は従来どおり */
@supports (width: 1cqi) {
  .wf-pattern-kpi__item { container-type: inline-size; }
  .wf-pattern-kpi__value { font-size: var(--wf-font-size-kpi-cq); }
}
@container (max-width: 191px) {
  .wf-pattern-kpi__label {
    font-size: var(--wf-font-size-label);
    line-height: var(--wf-line-height-section);
  }
}
/* 改行の扱い(2 案。styleguide で比較・採用は未決。現行は b1)
   b1: 原稿の改行 = <br>(どの幅でもその位置で改行)
   b2: 原稿の 1 行 = 1 かたまり(.wf-pattern-statement__line。inline-block)。原稿の改行位置は「ここで折り返してよい位置」になり、
       行が収まる幅ではかたまりを横に並べ、かたまりが幅に収まらないときだけかたまりの中で折り返す
   a : 自動折り返しのみ(原稿の改行は無視して 1 段落にする) */
.wf-pattern-statement__line { display: inline-block; }
/* 参考案(b2 + balance): かたまりの中で折り返すとき、行の長さをそろえて 1〜3 文字だけの行を作らない */
.wf-pattern-statement--balance .wf-pattern-statement__line { text-wrap: balance; }

/* ---------- SP ブレークポイント 768px 以下 ---------- */
@media (max-width: 768px) {
  /* SP 用のカバー背景(IMG-COMMON-03)があれば差し替える。無ければ PC 用のまま */
  .wf-cover__bg--sp { display: block; }
  .wf-cover--has-bg-sp .wf-cover__bg--pc { display: none; }
  /* TODO(要デザイナー確認): SP ドロワーの正式デザインは未着(残タスク 1-12)。
     現行構造のまま紺配色だけ仮適用している */
  .wf-nav {
    width: var(--wf-size-nav-width-sp);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .wf-nav.is-open { transform: translateX(0); }
  /* ドロワーの言語切替は画面下部固定(渥美決定 2026-10-06)。
     上部(ロゴ + サイト名)・中央(ナビ項目。ここだけ縦スクロール)・下部(言語切替)の縦フレックスを画面の高さ(100dvh)に収める。
     下部は iPhone のホームインジケーター分(env(safe-area-inset-bottom))を余白に足す。区切り線・文字サイズ・余白は PC の値のまま */
  .wf-nav {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: calc(var(--wf-space-panel-gap) + env(safe-area-inset-bottom, 0px));
  }
  .wf-nav > * { flex-shrink: 0; }
  .wf-nav > .wf-nav__pages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .wf-nav > .wf-nav__lang { margin-top: 0; }
  /* 画面の高さが低い SP(iPhone SE 375×667 など)では、ナビ最終項目 → 罫線 → 言語切替 の余白を 60 → 32 に詰め、
     現在の 9 件(00〜08)が初期表示に収まるようにする(渥美決定 2026-10-06。10 件以上はスクロール可)。
     収まるかは幅ではなく高さで決まるため、高さ 720px 以下だけに効かせる(390×844 などは 60 のまま) */
  @media (max-height: 720px) {
    .wf-nav > .wf-nav__pages { margin-bottom: var(--wf-space-4); }
    .wf-nav > .wf-nav__lang { padding-top: var(--wf-space-4); }
  }
  /* ドロワー展開中は背面(本文)をスクロールさせない */
  html:has(.wf-nav.is-open),
  body:has(.wf-nav.is-open) { overflow: hidden; }
  .wf-main { margin-left: 0; --wf-bleed-inset: var(--wf-space-2); --wf-nav-offset: 0px; }
  .wf-main__inner { padding: 0 var(--wf-space-2); }
  .wf-hamburger {
    display: flex;
    background: var(--wf-color-nav-bg);
    border-color: var(--wf-color-nav-bg);
  }
  .wf-hamburger .material-symbols-outlined { color: var(--wf-color-nav-text); }
  /* 展開中は同じ位置・同じサイズのまま「閉じる」(×)。ドロワー(z-index 10)・オーバーレイ(9)より上(20)。
     紺地(ドロワー)や暗いオーバーレイの上でも見えるよう、白の枠線を付ける(TODO(要デザイナー確認): 仮置き) */
  .wf-hamburger[aria-expanded="true"] { border-color: var(--wf-color-nav-text); }
  .wf-hamburger--with-label {
    flex-direction: column;
    gap: 0;
  }
  .wf-hamburger--with-label .wf-hamburger__icon { font-size: var(--wf-font-size-h4); line-height: 1; }
  .wf-hamburger--with-label[aria-expanded="true"] .wf-hamburger__text {
    display: block;
    font-family: var(--wf-font-family);
    font-size: var(--wf-font-size-nav-site);
    font-weight: var(--wf-font-weight-medium);
    letter-spacing: var(--wf-letter-spacing-md);
    line-height: var(--wf-line-height-flat);
    color: var(--wf-color-nav-text);
  }
  .wf-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9;
    background: var(--wf-color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .wf-nav.is-open ~ .wf-nav-overlay { opacity: 1; visibility: visible; }
  .wf-page-header--hero,
  .wf-pattern-interview__photos {
    grid-template-columns: 1fr;
  }
  .wf-page-header__kv { margin-top: var(--wf-space-3); }
  .wf-pattern-steps__item { grid-template-columns: 1fr; gap: var(--wf-space-1); }
}