@charset "UTF-8";

/* ==========================================================================
   blocks.css / ブロックパーツ・ライブラリ
   --------------------------------------------------------------------------
   Vibit CMS は「ブロックパーツを積み上げて」ページを組む。
   そのため各パーツは以下を必ず守る。

   1. 単体で成立する
      前後のブロックに依存するセレクタ（+ / ~ / :first-child 等）を
      レイアウト目的で使わない。どの順に並べても崩れない。
   2. 余白は「上」に持つ
      各ブロックは padding-top（--b-gap）で自分の上余白を持つ。
      前のブロックの margin-bottom には依存しない。
      CMS で並び替え・削除されても余白が破綻しない。
   3. 横幅は内側のラッパで決める
      ブロック自体は全幅。中身の幅は .b-inner の修飾子で
      小(780) / 中(980) / 大(1180) を選ぶ。
   4. 高さを固定しない
      テキストは増減し、画像は差し替えられる前提。
   5. 色・状態は「そのブロック自身の class」で切り替える
      body に class を付けられない（ガイドライン 1）ため。
   ========================================================================== */

:root {
  /* コンテンツ幅（Figma 実測。PC1440 で 小=x331-1108 / 中=x230-1209） */
  --w-s: 780px;
  --w-m: 980px;
  --w-l: 1180px;

  /* ブロックの標準上余白 */
  --b-gap:    40px;   /* SP */
  --b-gap-lg: 140px;  /* SP のセクション間 = Figma 実測 140（02/04/05/06/07/09/13 で一致）*/
}

@media (min-width: 768px) {
  :root {
    --b-gap:    30px;   /* 見出し→本文。Figma 実測は 50px だが 2026-09-01 に 30px へ変更されていた（ユーザー編集として保持） */
    --b-gap-lg: 160px;  /* セクション間 = Figma 実測 160px（02 全セクションで一致） */
  }
}

/* --------------------------------------------------------------------------
   サービステーマ（Figma の変数定義に準拠／get_variable_defs で取得）
     Peace Blue #004b90 ／ Kanko Jin Blue #006a71 ／ My Liv Program Green #0ca490
   .l-mainBg.is-* に付ければページ全体、ブロック単体の is-* でも同じ変数が入る。
     --theme-strong … 大見出し・濃い文字
     --theme-mid    … パネル・ラベル帯・フローの背景
     --theme-accent … 問いカードの見出し
   -------------------------------------------------------------------------- */
.is-peace {
  --theme-strong: #004b90;
  --theme-mid:    #4778ac;
  --theme-accent: #eb7169;
}

.is-kankojin {
  --theme-strong: #006a71;
  --theme-mid:    #3fa07c;
  --theme-accent: #3fa07c;
}

.is-program {
  --theme-strong: #0ca490;
  --theme-mid:    #0ca490;
  --theme-accent: #0ca490;
}

/* テーマページでは見出し・本文ともテーマ色（comp 実測:
   リード文 #155998 系、カード本文・声本文も同色）。
   継承で全体に効かせ、白文字系・DB 共通パーツは個別に上書きする。 */
.l-mainBg.is-peace,
.l-mainBg.is-kankojin {
  color: var(--theme-strong, var(--c-brown));
}

/* 07 だけは Figma 実測で本文・見出しとも黒（テーマ色はピル・図形のみ） */
.l-mainBg.is-program { color: #000; }

/* リード右寄せの「提供地域：…」は本文より小さい（Figma 実測 PC 14px / SP 12px・
   行ボックス 32・右寄せ。本文は PC 16 / SP 14）。05/06/07 とも同じ寸法で、
   06 は SP が 26 字あるため 14px のままだと 2 行に折れて 24px 分ズレる。
   色は各ページのテキスト色そのまま（Figma 2001:8821 = #004b90 / 2001:11073 = 黒）。
   ウェイトは Regular(400)。 */
.b-text__t.is-regionNote { font-size: 12px; font-weight: 400; line-height: 32px; }

@media (min-width: 768px) {
  .b-text__t.is-regionNote { font-size: 14px; line-height: 32px; }
}

/* お知らせカードの文字・タグ枠はページのベースカラー（Figma design context 実測）
   05 #004b90 / 06 #006a71 / 07 #000。タグの枠線は currentColor で追従させる */
.l-mainBg.is-peace    .c-newsCard { color: #004b90; }
.l-mainBg.is-kankojin .c-newsCard { color: #006a71; }
.l-mainBg.is-program  .c-newsCard { color: #000; }

/* ボタン（小）はテーマ色（comp 実測: 05 の「もっと見る」= #4778ac）。
   背景は ::before（フレーム）側に適用する（components.css 参照） */
.l-mainBg.is-peace    .c-btnPill::before,
.l-mainBg.is-kankojin .c-btnPill::before,
.l-mainBg.is-program  .c-btnPill::before {
  background: var(--theme-mid);
}

/* --------------------------------------------------------------------------
   ブロックの土台
   -------------------------------------------------------------------------- */
.b {
  position: relative;
  padding-top: var(--b-gap);
}

/* 上余白の増減（CMS 側で選べるようにするための修飾子） */
.b-gap-none { padding-top: 0; }
.b-gap-sm   { padding-top: 20px; }
@media (min-width: 768px) { .b-gap-sm { padding-top: 30px; } }
.b-gap-lg   { padding-top: var(--b-gap-lg); }

/* 中間の間隔（Figma 実測）
   b-gap-md  … 80px（テキスト→左中見出し・ページ見出し→リード）
   b-gap-btn … 60px（見出し→図版・図版→見出し） */
.b-gap-md  { padding-top: 40px; }
.b-gap-btn { padding-top: 30px; }

@media (min-width: 768px) {
  .b-gap-md  { padding-top: 80px; }
  .b-gap-btn { padding-top: 60px; }
}

/* サービスページ（05〜07）の MV→リード・リード→パネル = Figma 実測 120px */
.b-gap-sv { padding-top: 60px; }

@media (min-width: 768px) { .b-gap-sv { padding-top: 120px; } }

/* セクション間（Figma 実測 SP 140 / PC 160）。
   b-gap-lg の SP 80 は 02〜04 の旧実測値で、05/07 はページ側で 140 に上書きしている。
   09 以降はこのトークンを使う（SP 検証パスで b-gap-lg 自体を見直す）。 */
.b-gap-sec { padding-top: 140px; }

@media (min-width: 768px) { .b-gap-sec { padding-top: 160px; } }

/* 記事本文の段落・画像の間隔（09 Figma 実測 SP 40 / PC 60）*/
.b-gap-art { padding-top: 40px; }

@media (min-width: 768px) { .b-gap-art { padding-top: 60px; } }

/* ページ見出し→最初のブロック。Figma 実測がページごとに違うので値ごとにトークンを分ける
   b-gap-lead     SP 186 / PC  80 … 10 お問い合わせ・11 個人情報保護方針
   b-gap-lead-sm  SP 140 / PC  80 … 03 社会課題
   b-gap-lead-md  SP 140 / PC 120 … 12 サイトのご利用について
   b-gap-lead-lg  SP 209 / PC 160 … 13 運営団体
   ※ 08/09 は PC 120 / SP 195 でブロック自身（.b-article 等）に持たせてある */
.b-gap-lead    { padding-top: 186px; }
.b-gap-lead-sm { padding-top: 140px; }
.b-gap-lead-md { padding-top: 140px; }
.b-gap-lead-lg { padding-top: 209px; }

@media (min-width: 768px) {
  .b-gap-lead    { padding-top: 80px; }
  .b-gap-lead-sm { padding-top: 80px; }
  .b-gap-lead-md { padding-top: 120px; }
  .b-gap-lead-lg { padding-top: 160px; }
}

/* 12 の「左中見出し→本文」（Figma 実測 20・PC/SP 共通）と
   セクション間（SP 60 / PC 80）。b-gap-fig は 03 の「左中見出し→図版」30 */
.b-gap-xs   { padding-top: 20px; }
.b-gap-fig  { padding-top: 30px; }
.b-gap-term { padding-top: 60px; }

@media (min-width: 768px) { .b-gap-term { padding-top: 80px; } }

/* ページ最下部のブロックだけは下にも余白が要る（フッター角丸の手前） */
.b-tail { padding-bottom: var(--b-gap-lg); }

/* 最終ブロック→フッターも Figma 実測は SP 140 / PC 160（b-gap-sec と対）*/
.b-tail.is-secGap { padding-bottom: 140px; }

@media (min-width: 768px) { .b-tail.is-secGap { padding-bottom: 160px; } }

/* 内側ラッパ。幅の 3 段階 */
.b-inner {
  width: 100%;
  max-width: calc(var(--w-m) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-sp);
}

.b-inner-s { max-width: calc(var(--w-s) + var(--pad-sp) * 2); }
.b-inner-m { max-width: calc(var(--w-m) + var(--pad-sp) * 2); }
.b-inner-l { max-width: calc(var(--w-l) + var(--pad-sp) * 2); }

/* 全幅（背景を端まで敷くパーツ用） */
.b-inner-full { max-width: none; padding-inline: 0; }

/* ==========================================================================
   見出し系
   ========================================================================== */

/* 下層ページ上部大見出し（Headparts1-1）
   Figma 2001:12561 は `leading-[normal]` かつ **トリム属性なし**なので、
   §6-2 の判別に従い h はそのまま行ボックス（PC 78 / SP 46）。
   旧実装は「y = ink 上端」という誤った前提で padding に +34/+15 を足し、
   さらに line-height を 1.4（PC 75.6 / SP 44.8）にしていたため、
   このブロック 1 個で PC +5 / SP +2 のズレを作り、
   下層 12 ページすべての累積ドリフトの起点になっていた。
   Figma: PC y=247 h=78 / SP y=163 h=46 */
.b-pageTitle { padding-top: 163px; }

/* 04 の SP 見出しは Figma で 351×46 の 1 行（列幅 335 を少しはみ出す）。
   折り返させると 2 行になって以降が 46px 下がる */
.b-pageTitle.is-nowrap .b-inner { padding-inline: 0; }
.b-pageTitle.is-nowrap .b-pageTitle__t { white-space: nowrap; }

.b-pageTitle__t {
  font-size: 32px;
  font-weight: 500;
  line-height: 46px;   /* Figma SP h=46（32 × 1.448 の auto 行送り） */
  text-align: center;
}

@media (min-width: 768px) {
  .b-pageTitle { padding-top: 247px; }
  .b-pageTitle__t { font-size: 54px; line-height: 78px; }   /* Figma PC h=78 */
}

/* 大見出し（default-1）
   ⚠️ ここは §6-2 の判別を通していない旧実装です。
   §6-2（訂正後）:
     - `get_design_context` に `text-box-trim` **が無い** → h はそのまま行ボックス。
       CSS の line-height に h を入れる（例: .b-pageTitle__t の 78 / 46）
     - `text-box-trim: trim-both` **が有る**  → h は cap ボックス（cap 上端〜ベースライン）。
       line-height には入れない。行ボックスは font-size × 1.448（auto）で、
       cap 上端は行ボックス上端より下にずれるぶんを margin/padding 側で吸収する
   このブロックは PC 42px に対し line-height 0.75（＝31.5）を入れており、
   これは **cap ボックスの h をそのまま line-height にした形**。
   結果として cap 上端は Figma と ±1px で一致している（＝現状の描画は正しい）が、
   `line-height < font-size` なので **CMS で 2 行に折れた瞬間に行が重なる**。
   §5-3（CMS で文字が増減しても崩れないこと）に対する潜在バグとして残置。
   直すときは line-height:normal + padding 側で cap 位置を合わせ直すこと。 */
.b-h1__t {
  font-size: 24px;
  font-weight: 500;
  line-height: 0.75;
  text-align: center;
}

/* お知らせ／関連記事の見出しは SP でも行ボックス 35（Figma 実測 334×35・
   ink 93÷4字＝24px）。既定の 0.75（＝18px）だと 1 見出しあたり 17px 詰まる。
   09 の「関連記事」は PC だけ別サイズ（128÷4字＝32px・行ボックス 23）。 */
.b-h1.is-news .b-h1__t,
.b-h1.is-relNews .b-h1__t { font-size: 24px; line-height: 35px; }

/* SP で 2 行に折れる大見出しは Figma 実測 335×53（＝1 行 26.5）。
   単行の見出し（行ボックス 18）とは別扱いになる。PC では 1 行なので既定（31）のまま。
   07 の紹介ムービー・03 の「教育 × Well-being…」「企業 × Well-being…」が該当。 */
@media (max-width: 767px) {
  .b-h1.is-gapMovie .b-h1__t,
  .b-h1.is-multi .b-h1__t { line-height: 26.5px; }
}

/* 大見出しサブタイトル付き（Basicparts3-1）。
   実装は現状 02「MY LIV WAY」のみが使用（get_design_context(2001:6679) で確認）。
   欧文見出しは font-['Inter:Semi_Bold']、サブテキストは font-['Noto_Sans_JP:Bold']
   （Bold=700。以前は SemiBold=600 と誤認していた）。他用途が無いためスコープなしで直す。 */
.b-h1sub__t {
  font-family: var(--ff-en);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.b-h1sub__s {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 中見出し（default-2） */
.b-h2__t {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* 小見出し（default-3） */
.b-h3__t {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* 左中見出し（Basicparts2-1）。左寄せ。ピンク版は .is-pink */
.b-h2L__t {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

/* 03 のみ非ピンクで使われている（12 は is-pink）。
   Figma get_design_context(2001:7024) 実測: SP は trim-both・20px（cap ボックス h=44=22×2）。
   PC get_design_context(2001:7200) 実測: 24px・trim-both（h=32）。
   共通クラスなので 03 のページ限定モディファイア（.is-issue）で当てる。 */
.b-h2L.is-issue .b-h2L__t { font-size: 20px; line-height: normal; }

/* SP も PC と同じ cap 基準補正を入れる（get_design_context(2001:7024) 実測:
   20px SemiBold・trim-both＋cap_alphabetic の cap ノード。h=44 ＝ leading(29) ＋ cap(15)）。
   canvas TextMetrics（PC 24px: fontAsc 28 / capAsc 17.73 / lineBox 34.75）を
   20px に換算: fontAsc 23.33 / capAsc 14.78 / lineBox 28.96。
   箱上端→cap 上端 8.56 を margin-top で持ち上げ、baseline 下の fontDesc 5.63 を
   margin-bottom で詰める（PC は後続ブロック側の b-gap-fig 25.3 で吸収しているが、
   SP の b-gap-fig は共通トークンのため見出し側で完結させる）。
   2 行見出し×2 箇所で計 28.4 詰まり、03 SP の footer が Figma 4543 に収束する。 */
@media (max-width: 767px) {
  .b-h2L.is-issue .b-h2L__t { margin-top: -8.56px; margin-bottom: -5.63px; }
}

/* 12 のピンク見出しは Figma 実測 PC 24px / SP 18px・行ボックス 32・色 #ea635a */
.b-h2L.is-pink .b-h2L__t { line-height: 32px; color: #ea635a; }

/* 単独のリンク行は SP でも行ボックス 32（Figma 12 のプラグイン）*/
.b-text__t.is-linkLine { line-height: 32px; }

/* 本文中の外部リンク（Figma 実測 13×11 のアイコンがテキストの直後に付く）。
   Figma のリンク文字列には underline が掛かっている（12 のみ使用）。
   `<a>` に class は付けられない（CMS ガイドライン 3）ので親側から指定する。 */
.c-exLink a { text-decoration: underline; text-underline-offset: from-font; }

.c-exLink::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 11px;
  margin-left: 6px;
  vertical-align: baseline;
  background: url("../img/icon-external.svg") no-repeat center / contain;
}

@media (min-width: 768px) {
  .b-h1__t    { font-size: 42px; line-height: 0.74; }
  /* Figma 実測: 「お知らせ」だけ 54px・行ボックス 61（216÷4字＝54） */
  /* Figma design context で 42px SemiBold と確定（54 は W700 前提の逆算ミス）*/
  .b-h1.is-news .b-h1__t { font-size: 42px; line-height: 61px; }
  /* 09 の「関連記事」は 32px・行ボックス 23（128÷4字＝32） */
  /* Figma 2001:13470 は font-bold（700）＋トリムあり・32px。
     h=23 は cap ボックスなので line-height には入れない。
     行ボックス 46（32×1.448）にすると cap 上端 = 箱上端 + 13.96 になるので、
     ブロックの padding-top を 160 → 146 にして Figma の cap 上端 2338 に合わせる。
     ⚠️ `.b-h1__t` を一律 700 にしないこと（02〜07 に波及する）。 */
  .b-h1.is-relNews .b-h1__t { font-size: 32px; font-weight: 700; line-height: 46px; }
  .b-h1.is-relNews { padding-top: 144px; }   /* cap 上端を Figma 2338 に合わせる */

  /* 見出し→カードの 50px は Figma では「ベースライン 2361 → カード 2411」。
     CSS の padding は行ボックス下端（2370）から効くので、
     ベースラインとの差 9px を引いて 41 にする（カード上端が Figma 2411 に一致）。
     ⚠️ 共通トークン b-gap(50) は他ページが依存しているのでこのブロック限定。 */
  .b-news.is-related { padding-top: 41px; }
  /* Figma 実測（02）: MY LIV WAY 267×31 → 20 → マイリブの理念 251×12（枠 63）*/
  .b-h1sub__t { font-size: 42px; line-height: 31px; }
  .b-h1sub__s { font-size: 16px; line-height: 12px; margin-top: 20px; }
  .b-h2__t    { font-size: 28px; }
  .b-h3__t    { font-size: 20px; }
  /* Figma 実測: 03 の左中見出しは 980×18（行ボックス 18）。1.2 だと 26 になり +8 ずれる */
  .b-h2L__t   { font-size: 22px; line-height: 18px; }
  /* 03 の見出し 2001:7199/7200 は trim-both＋cap_alphabetic の cap ノード（h=18 ＜ 24px）。
     CLAUDE.md §6-2 のとおり位置は cap 上端で合わせる。24px・line-height normal(34.75) の
     箱上端→cap 上端は実測 10.27px（fontAsc 28 − capAsc 17.73。canvas TextMetrics 実測）。
     b-gap-term の 80 は Figma でも「前要素下端→cap 上端 80」なので、cap オフセット分だけ
     テキストを持ち上げる。 */
  .b-h2L.is-issue .b-h2L__t { font-size: 24px; line-height: normal; margin-top: -10.27px; }
  /* 見出し（cap 998）→図版 1048: 見出し箱下端は cap 補正後 1022.8（baseline 1016 ＋
     descent 7）なので、図版の b-gap-fig 30 を 25.3 に読み替える（.b-ratio は 03 専用）。 */
  .b-ratio.b-gap-fig { padding-top: 25.3px; }
  /* 図版下端 1278 → 見出し2 cap 1362 は Figma 実測 84（b-gap-term の 80 ＋ 4）。
     見出し側は共通 80 のまま、図版ブロックの下側で 4 を持つ。 */
  .b-ratio { padding-bottom: 4px; }
  /* 見出し2（cap 1362）→ Rectangle58 1412: 同じく箱下端 1386.8 から 25.3。
     is-boxed × b-gap-fig の組み合わせは 03 の Rectangle58 のみ。 */
  .b-img.is-boxed.b-gap-fig { padding-top: 25.3px; }
  .b-h2L.is-pink .b-h2L__t { font-size: 24px; line-height: 32px; }
}

/* 見出しアイコン（Basicparts9-1）
   for Student / for Business のピル。色はブロック自身の class で切替 */
/* Figma get_design_context 実測（2026-09-02）:
   PC 2001:7197/7198 = Inter SemiBold 30px / padding 0 50px / ピル 300×62 / 文字 164×36
   SP 2001:7020/7021 = Inter SemiBold 20px / padding 0 32.965px / ピル 197×41 / 文字 110×24
   書体は Noto Sans JP ではなく Inter（ユーザーが Figma のタイポグラフィパネルで確認済み）。
   font-family 未指定だと body の --ff-base を継承してしまうため明示する。
   ここだけ font-weight:600 を維持するのは、Figma が Semi Bold で確定しており
   Inter は wght@600 のみ読み込んでいるため（§14 の一段軽くする対象外）。 */
.b-tag__t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 197px;
  min-height: 41px;
  padding: 6px 32.965px;
  border-radius: 999px;
  font-family: var(--ff-en);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--c-white);
  text-align: center;
  background: var(--c-floral-orange);
}

.b-tag { text-align: center; }
.b-tag.is-student  .b-tag__t { background: var(--c-floral-orange); }
.b-tag.is-business .b-tag__t { background: var(--c-floral-blue); }
.b-tag.is-green    .b-tag__t { background: var(--c-floral-green); }
.b-tag.is-brown    .b-tag__t { background: var(--c-brown); }

@media (min-width: 768px) {
  /* Figma 実測: 300×62・文字 ink 22px */
  .b-tag__t { min-width: 300px; min-height: 62px; padding: 6px 50px; font-size: 30px; }
}

/* ==========================================================================
   テキスト系
   ========================================================================== */

/* テキスト（default-4） */
.b-text__t {
  font-size: 14px;
  line-height: 2;
}

/* 中央寄せ版・右寄せ版（CMS の align 指定に対応） */
.b-text.is-center .b-text__t { text-align: center; }
.b-text.is-right  .b-text__t { text-align: right; }

/* 両端揃え版（12 サイトのご利用について の長文ブロック。Figma は text-justify）。
   opt-in のため他ページには影響しない。11 個人情報保護方針には付けないこと */
.b-text.is-justify .b-text__t {
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-word;
}

@media (min-width: 768px) {
  .b-text__t { font-size: 16px; }
}

/* リストマーク付きリスト（default-12） */
.b-list__l { font-size: 14px; line-height: 2; }
.b-list__l > li { padding-left: 1.2em; text-indent: -1.2em; }
.b-list__l > li::before { content: "・"; }

/* 順序付きリスト（default-13） */
.b-olist__l { font-size: 14px; line-height: 2; counter-reset: n; }
.b-olist__l > li { padding-left: 1.8em; text-indent: -1.8em; counter-increment: n; }
.b-olist__l > li::before { content: counter(n) "."; margin-right: .4em; }

@media (min-width: 768px) {
  .b-list__l, .b-olist__l { font-size: 16px; }
}

/* テーブル2列（default-14） */
.b-table__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.8;
}

.b-table__tbl th,
.b-table__tbl td {
  padding: 12px 16px;
  border: 1px solid rgba(105, 44, 26, .25);
  text-align: left;
  vertical-align: top;
}

.b-table__tbl th { width: 30%; font-weight: 500; background: rgba(255, 255, 255, .5); }

@media (min-width: 768px) {
  .b-table__tbl { font-size: 16px; }
  .b-table__tbl th, .b-table__tbl td { padding: 16px 24px; }
}

/* 枠付きテキスト（観光人説明などの囲み） */
.b-noteBox__t {
  padding: 14px 18px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

@media (min-width: 768px) {
  .b-noteBox__t { padding: 16px 24px; font-size: 15px; }
}

/* 注釈（※で始まる小さい文字） */
/* Figma 実測（02 の出典）: PC 780×84 ＝ 14px・行 28 の 3 行 / SP 334×120 ＝ 12px・行 24 の 5 行 */
.b-annot__t { font-size: 12px; line-height: 24px; opacity: .85; }

@media (min-width: 768px) { .b-annot__t { font-size: 14px; line-height: 28px; } }

/* 02 の「Well-being 図→出典」の間隔は Figma PC 実測 24px（Well-being 図
   Group1061 2126:329 y3570 h423 下端3993 → 出典 2001:6476 y4017、差24）。
   共通の b-gap-xs（20px。12 サイトのご利用について等でも使用）は他ページに
   波及するため触らず .is-about で限定して上書きする。
   ※ SP は Figma 実測が 27px 前後になり「24」と一致しなかったため、
   確証が持てず今回は SP を変更していない（要人間確認）。 */
@media (min-width: 768px) {
  .b-annot.is-about.b-gap-xs { padding-top: 24px; }
}

/* SP は Figma 実測 27px（_レイヤー_1 下端 3052 → 出典 3079。上の注記の
   「27px 前後で確証なし」を I/WE 図まわり監査時に再実測して確定）。
   実装の図は 335×179.8 と 0.8px 背が高いので 26px で出典テキストが 3079 に載る。
   共通 b-gap-xs（20px）は触らず .is-about 限定。 */
@media (max-width: 767px) {
  .b-annot.is-about.b-gap-xs { padding-top: 26px; }
}

/* ==========================================================================
   02 SP: I／WE・SOCIETY／UNIVERSE 図（.b-iwe）
   PC は Figma 通り 1 枚画像（about-iwe-pc.png）のまま。SP はこの図だけ Figma に
   単一ノードが無く（PC 画像を 335px に縮小しているだけだった＝ 16px の文字が
   実効 4.5px になり判読不能。旧引き継ぎ地雷の最大の残り）、円＋ラベル＋
   テキスト列を CSS で組む。get_metadata(2001:6155) / get_design_context 実測。
   is-pcOnly/is-spOnly は global.css の汎用ユーティリティ（768px で出し分け）。

   ⚠️ 接続線（Union 2001:6297）は rotate(90deg) が掛かった boolean-operation で、
   get_metadata の x（143）と get_design_context の x（56.21）が一致しない
   （CLAUDE.md §「回転しているノードの x/y/w/h は信用しない」の実例）。
   get_screenshot で目視確認のうえ、破綻しない範囲で近似配置している
   （厳密な位置は未確証。装飾要素のため実害は小さいと判断）。
   ========================================================================== */
.b-iwe__l { position: relative; }

/* 3 円を貫く茶色い矢印（Figma Union 2001:6297 = 86.788×546.46 の回転ノード）。
   metadata の x は回転で信用できないため、位置は円との相対で確定する:
   - Union 上端 2269 は I 円上端 2302.2 の 33px 上（Well-being グループ上端 1895 の +374）
   - 下端 2815.5 は UNIVERSE 円下端 2725 の 90.5px 下（矢じりが円からはみ出す）
   - 水平は 3 円の中心列（グリッド 1 列目 161px の中央 = 80.5px）
   アセットは icon-iwe-union.svg（回転前の書き出しを縦置きに変換済み）。
   円（z-index:1）の下に敷かれるので z 指定は不要。 */
.b-iwe__l::before {
  content: "";
  position: absolute;
  top: -33px;
  left: 80.5px;
  width: 86.8px;
  height: 546.5px;
  background: url("../img/icon-iwe-union.svg") no-repeat center / contain;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 図の下端（矢じり）は UNIVERSE 円の 90.5px 下まで届き、後続の Well-being 図
   （_レイヤー_1）は Figma 絶対座標 2873（グループ上端 1895 +978）に置く。
   矢印は absolute で高さを持たないため、はみ出し 90.5px ＋ 図までの間隔を
   ここで確保する（127 = 2873 − 円下端実測 2706 − 後続ブロックの基礎 padding 40）。 */
.b-iwe { padding-bottom: 127px; }

.b-iwe__row {
  position: relative;
  display: grid;
  grid-template-columns: 161px 1fr;
  align-items: start;
}

.b-iwe__row.is-we { margin-top: 17px; }
.b-iwe__row.is-universe { margin-top: 19px; }

.b-iwe__circle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-white);
}

.b-iwe__row.is-i .b-iwe__circle { width: 97.2px; height: 97.2px; padding-top: 11px; }
.b-iwe__row.is-we .b-iwe__circle { width: 129.6px; height: 129.6px; padding-top: 18px; }
.b-iwe__row.is-universe .b-iwe__circle { width: 160px; height: 160px; padding-top: 32px; }

/* 🔴 アイコンは Figma 実寸で置く（SVG 自体が Figma 実寸で書き出し済み:
   i 9.14×25.74 / people 23.30×25.75 / building 37.13×31.16 / universe 31.86×31.86。
   get_metadata(2001:6155) の 2001:6356 / 2001:6345 / 2001:6306 / 2001:6363 と一致）。
   ⚠️ このアイコンは `.b-img__f` の子孫なので、共通ルール
   `.b-img__f img { width:100%; height:auto }`（詳細度 0,1,1・blocks.css:653）が
   `.b-iwe__icon`（0,1,0）に勝ってしまい、円の幅いっぱいまで引き伸ばされていた
   （I が 97.19×273.8、UNIVERSE が 160×160 になりラベルが円外へ押し出されていた）。
   詳細度 0,2,0 のセレクタで明示的に実寸へ戻す。 */
.b-iwe__circle .b-iwe__icon { display: block; width: auto; max-width: none; height: auto; }

/* WE・SOCIETY は人物アイコン（橙）+ 建物アイコン（青）の 2 枚構成
   （Figma get_design_context(2001:6155) 2001:6306/2001:6345 実測 gap≒10px）。
   ラベルも同じ flex コンテナの子なので、折り返して 2 段目に落とす
   （wrap しないとアイコンの右へ並んで円からはみ出す）。
   アイコンは Figma 実測で下端そろえ（building 上端 18.36 / people 上端 24.01、
   下端は 49.52 / 49.76 でほぼ一致）。 */
.b-iwe__row.is-we .b-iwe__circle {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-start;
  column-gap: 10px;
  row-gap: 0;
}
.b-iwe__row.is-we .b-iwe__label { width: 100%; }

.b-iwe__label { margin: 0; text-align: center; color: var(--c-brown); }

.b-iwe__desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}

.b-iwe__row.is-we .b-iwe__desc { margin-top: 5.5px; }
.b-iwe__row.is-universe .b-iwe__desc { margin-top: 6.5px; }

.b-iwe__key {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 18.36px;
}

.b-iwe__list {
  margin: 0;
  padding-left: 18px;
  padding-top: 2px;
  list-style: disc;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: var(--c-brown);
}

/* ==========================================================================
   画像系
   ========================================================================== */

/* 画像（default-9 幅中 / Basicparts8-1 幅大）
   設計書「PC、SP の両方の登録が必須」→ <picture> で出し分ける */
.b-img__f { margin: 0; }

/* 04 共創図: Figma は .b-inner-m（980）の中で中央寄せではなく左寄せ（x234・
   content 端 x230 なので margin-left は 4px）。P.image(..., center=False) で
   margin-inline:auto を外し、ここで PC だけ 4px を足す（SP は maxw=932 が常に
   inert なので触らない＝margin 0 のまま左端に張り付いて Figma と一致） */
@media (min-width: 768px) {
  .b-img.is-cocreation .b-img__f { margin-left: 4px; }
}

/* 02 の帯は PC 628×50 / SP 320×80（Figma 実測。SP は 2 行の別デザイン）*/
@media (max-width: 767px) {
  .b-img.is-hiraku .b-img__f { max-width: 320px !important; }
}

/* Figma の図解は白い角丸ボックスの中に入る（03 の Rectangle 58/59）。
   書き出し PNG はボックスと同寸なので、地色だけ CSS で足す */
.b-img.is-boxed .b-img__f {
  border-radius: 16px;
  background: var(--c-white);
  overflow: hidden;
}

@media (min-width: 768px) { .b-img.is-boxed .b-img__f { border-radius: 20px; } }

/* サービスページの帯図（パネル→帯）。
   05/06/07 の ▼ は帯画像に焼き込み済み（ユーザー指示で CSS 描画を廃止・§30）。
   CSS の三角は 04 の白 ▼（画像から復元不能）だけに残す。 */
.b-img.is-band:not(.is-pd):not(.is-kq):not(.is-mlp) .b-img__f::before {
  content: "";
  display: block;
  margin-inline: auto;
  width: 0;
  height: 0;
  border-inline: 135px solid transparent;
  border-top: 75px solid var(--c-white);
}

/* Figma 実測（PC・1440）: パネル下端 → ▼ 上端 = 28（05/06/07 とも同じ）。
   ▼ は 214×56 で画像の先頭に入っており、▼ 下端 → 本文の行ボックス上端が 40
   （＝ ink どうしでは 36）、▼ 上端 → 下線 2 本目の下端までが 200。
   05/06 は書き出し時にこの 36 が落ちていたため、画像側に入れ直したうえで
   padding-top を Figma の 28 に戻した（ブロック高 28+200＝228 で Figma と一致）。
   07 も同様。書き出し元の Figma ノード（Group 1087）は ▼ の上に 18px の余白を
   含む 550×219 なので、▼ の ink 上端（Figma y1479）〜下線 2（y1679）だけを
   @2x で切り出し直した（1100×400）。3 ページとも 28+200＝228 で揃う。 */
@media (min-width: 768px) {
  .b-img.is-band.is-pd,
  .b-img.is-band.is-kq,
  .b-img.is-band.is-mlp { padding-top: 28px; }
}

@media (max-width: 767px) {
  .b-img.is-band:not(.is-pd):not(.is-kq):not(.is-mlp) .b-img__f::before {
    border-inline-width: 67px;
    border-top-width: 37px;
  }
  /* SP はパネル→▼ 35（06 は 34）。▼ 42 と ▼→本文 28（06 は 31）は画像側に持たせた */
  .l-mainBg.is-kankojin .b-img.is-band { padding-top: 34px; }
  .l-mainBg.is-program .b-img.is-band,
  .l-mainBg.is-peace   .b-img.is-band { padding-top: 35px; }
}

.b-img__f img { display: block; width: 100%; height: auto; }

/* CMSで画像サイズ（width属性）を登録したら、その値に準拠して表示する（2026-08-20）。
   ベースの width:100% が属性値を無視して常にコンテンツ幅いっぱいへ引き伸ばして
   いたため、blocks.js が width 属性を読み取り --img-w 変数を figure に立てる。
   PC のみ適用。SP は据え置き（常にコンテンツ幅いっぱい）＝2026-08-20 ユーザー指示。
   CSSの width:auto では効かせられない点に注意（width属性は presentational hint の
   ため author の width 指定が常に勝ってしまう。attr() は Chrome 限定のため JS 方式）。
   ※ 旧「style="max-width:544px" のインライン直書き」の恒久対応。
      is-article（09 記事画像）は JS 側で除外。JS OFF 時は従来通り全幅表示 */
@media (min-width: 768px) {
  .b-img__f {
    max-width: var(--img-w, none);
    margin-inline: auto;
  }
}

/* 09 の記事本文中の画像だけは CMS が任意比率の写真を入れてくる。
   `height:auto` のままだと高さが素材の固有比で決まり、
   600×1200 の縦長を入れると PC で 780×1560（+1121px）になってページが破綻する。
   Figma 実測は PC 780×440 / SP 335×189（どちらも比 1.772）なので枠を固定して cover。
   ⚠️ `.b-img__f img` 全体には掛けないこと。02〜07 の図解は素材の縦横比どおりに
      出す必要があり、`height:auto` が正しい。 */
.b-img.is-article .b-img__f { aspect-ratio: 335 / 189; }

.b-img.is-article .b-img__f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .b-img.is-article .b-img__f { aspect-ratio: 780 / 440; }
}

.b-img__cap {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* 画像横並び【白背景】（Basicparts12-1） */
.b-logoRow__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  padding: 24px 20px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-logoRow__box li { display: flex; align-items: center; }
.b-logoRow__box img { width: auto; max-height: 46px; }

@media (min-width: 768px) {
  .b-logoRow__box { gap: 30px 60px; padding: 30px 40px; border-radius: 20px; }
  .b-logoRow__box img { max-height: 60px; }
}

/* ==========================================================================
   画像＋テキストの組み合わせ
   ========================================================================== */

/* 左画像+右テキスト（default-5）／左テキスト+右画像（default-6）
   .is-rev で画像を右に。SP では常に画像が上。 */
.b-imgText__row { display: grid; gap: 16px; }
.b-imgText__img { margin: 0; }
.b-imgText__img img { display: block; width: 100%; }
.b-imgText__body { font-size: 14px; line-height: 2; }

.b-imgText__h {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

/* 下部に回り込まないフルワイドの補足テキスト */
.b-imgText__after { margin-top: 14px; font-size: 14px; line-height: 2; }

@media (min-width: 768px) {
  .b-imgText__row { grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
  .b-imgText.is-rev .b-imgText__row { grid-template-columns: 1fr 300px; }
  .b-imgText.is-rev .b-imgText__img { order: 2; }
  .b-imgText__body { font-size: 16px; }
  .b-imgText__h { font-size: 20px; }
  .b-imgText__after { font-size: 16px; }
}

/* 左画像+見出し+テキスト（背景付き）（Basicparts33-1）＝運営団体の会社カード */
/* Figma 実測（13）
   PC カード 980×330: ロゴ列 391（中央 195.5）＋ 9 ＋ 本文列（右 53）。
       見出し 24px/行48 → 11 → 本文 527（16px/行32）。中身は上下中央。
   SP カード 335×600: ロゴは上端から中心 134、見出しは上端から 249（20px/行29）、
       本文は見出しから 15（280・14px/行28）。左 28 / 右 27。
   ロゴは 3 社とも実寸が違う（156×95 / 319×66 / 255×62）ので
   HTML の width/height で出す。CSS に幅高を書くと属性が打ち消される（§20c）。*/
.b-orgCard__box {
  display: grid;
  min-height: 600px;
  padding: 0 27px 0 28px;
  border-radius: 16px;
  background: var(--c-white);
  grid-template-rows: 249px auto;
}

.b-orgCard__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-top: 19px;
}

.b-orgCard__h {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}

.b-orgCard__t { font-size: 14px; line-height: 28px; }

/* カード間（Figma 実測 SP 30 / PC 40）*/
.b-orgCards .b-cols__l { display: grid; grid-template-columns: 1fr; gap: 30px; }

@media (min-width: 768px) {
  .b-orgCard__box {
    grid-template-rows: none;
    grid-template-columns: 391px 1fr;
    gap: 0 9px;
    align-items: center;
    min-height: 330px;
    padding: 0 53px 0 0;
    border-radius: 20px;
  }
  .b-orgCard__logo { padding-top: 0; }
  .b-orgCard__h { margin-bottom: 11px; font-size: 24px; line-height: 48px; }
  .b-orgCard__t { font-size: 16px; line-height: 32px; }
  .b-orgCards .b-cols__l { grid-template-columns: 1fr; gap: 40px; }
}

/* 13 のロゴ・導入文（Figma 実測 SP 270×183 / PC 491×333）。
   `.b-img__f { margin: 0 }`（共通）が効いていて max-width だけでは左端に張り付く。
   Figma は PC x474 / SP x52.5 ＝ どちらも中央なので中央寄せを明示する。 */
.b-img.is-orgLogo .b-img__f { max-width: 270px; margin-inline: auto; }

/* 導入文は Figma 2001:14781 が PC 24px / leading 48 の 2 行、SP 16px / 行32。
   ブロック高が 2×48 = 3×32 = 96 で一致するため、位置照合では検出できなかった。 */
.b-text__t.is-orgLead { font-size: 16px; font-weight: 500; line-height: 32px; text-align: center; }
.b-gap-orgLead { padding-top: 30px; }
.b-gap-orgCards { padding-top: 140px; }

@media (min-width: 768px) {
  .b-img.is-orgLogo .b-img__f { max-width: 491px; }
  .b-text__t.is-orgLead { font-size: 24px; line-height: 48px; }
  .b-gap-orgLead { padding-top: 80px; }
  .b-gap-orgCards { padding-top: 160px; }
}

/* 左画像+テキストアイコン+テキスト（Basicparts14-1）＝Purpose / Mission / Value */
.b-way .b-cols__l { gap: 20px; }

.b-way__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px 14px;
  align-items: center;
}

.b-way__icon { grid-row: span 2; margin: 0; }
/* 🔴 width を指定しないこと。
   way-*.png は 2x 書き出しで、Figma の表示サイズは実寸のちょうど 1/2
   （359→179.4 / 403→201.2 / 434→217 いずれも 0.4993〜0.5000）。
   そこで実寸を基準に zoom で縮める（下の PC/SP ブロック参照）。
   ここで width:100% を入れると列幅いっぱい（218px）に伸び、
   3枚とも同じ大きさになってしまう（2026-09-01 まで発生していた不具合）。 */
.b-way__icon img {
  display: block;
  /* 🔴 width:auto は必須。省くと HTML の width 属性（CMS 登録値。現在は
     既定の 100）が効いてしまい、zoom 後に 50px まで縮む。
     auto にすると属性を打ち消して画像の実寸（359/403/434）が基準になる。 */
  width: auto;
  height: auto;
  /* global.css の img{max-width:100%} を解除する。
     解除しないと実寸 359px が列幅 218px に切り詰められてから zoom され、
     179.5px ではなく 109px になってしまう。
     zoom 後の幅（PC 179.5〜217 / SP 134.6〜162.8）は列幅より小さいので
     はみ出しは起きない（実測で横あふれ 0 を確認）。 */
  max-width: none;
}

.b-way__label {
  align-self: end;
  justify-self: start;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-white);
  background: var(--c-brown);
}

/* Figma SP 実測（2001:6374 / 6378）: 本文の箱は 202×44 の 2 行。
   列いっぱいに広げると 15 文字で折れて最終行が 3 文字になる */
.b-way__t {
  align-self: start;
  max-width: 202px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .b-way__t { max-width: none; }
}

@media (min-width: 768px) {
  /* Figma: アイコン 179〜217px / ラベル pill 180×30・16px / 本文 30px */
  .b-way__row { grid-template-columns: 220px 1fr; gap: 20px 0; align-items: center; }
  .b-way__icon { justify-self: center; }
  .b-way__icon img { height: auto; }   /* max-width は基底で none。上書きしない */
  .b-way__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 30px;
    padding: 0;
    font-size: 16px;
  }
  .b-way__t { font-size: 30px; }
}

/* 02（about.html）専用の実測補正。.b-way 自体は他ページで使われていないが
   （P.way の呼び出しは about.html と検証用カタログのみ）、念のため .is-about で
   明示スコープする（§2）。 */
@media (max-width: 767px) {
  /* Figma SP はアイコンが行ごとに異なるサイズ（Purpose 134.58×137.2 /
     Mission 150.91×144.92 / Value 162.09×141）。従来は grid 列が固定 64px で、
     way_row() の inline style="width:Npx" があっても列の外へはみ出せず、
     実測すると一律 64px に圧縮されていた（原因）。列を max-content にして
     各行のアイコン自身の実寸（--way-icon-spw、行ごとに CSS 変数で渡す）に
     追従させる。 */
  /* ※ 本番CMSでは is-about クラスが付かないため、このルールは効かない。
     実際に効いているのは cms-additions.css の .b-way .b-way__row（2026-10-14 に
     列1を151px固定へ修正済み）。 */
  .b-way.is-about .b-way__row { grid-template-columns: max-content 1fr; }
  /* SP は実寸 × 0.375（359→134.6 / 403→151.1 / 434→162.8。
     Figma 実測 134.58 / 150.91 / 162.09 と 1px 未満で一致）。
     旧実装は行ごとのインライン変数 --way-icon-spw に依存しており、
     CMS では 1 テンプレートの繰り返しになるため値を渡せず、
     max-content 列が画像の実寸まで広がって本文が潰れていた。 */
  .b-way .b-way__icon img { zoom: .375; }

  /* 英字ラベルの行別補正。SP はアイコンが PC の 0.75 倍なので補正値も 0.75 倍 */
  .b-way .b-cols__l > :nth-child(1) .b-way__en { --en-dy: 12px; }
  .b-way .b-cols__l > :nth-child(2) .b-way__en { --en-dy: 10.8px; }
  .b-way .b-cols__l > :nth-child(3) .b-way__en { --en-dy: 6px; --en-dx: 2.25px; }
}

@media (min-width: 768px) {
  /* get_design_context(2001:6679) 実測: MLW ブロックは x=310 / 幅833 / 中心726.5。
     .b-inner-m（980・中心720）にそのまま流し込むと左右中央寄せになり、
     Figma より左に約78-80pxはみ出していた（原因）。.b-cols__l 自体の幅と
     左マージンを Figma 実寸に固定して直す
     （.b-inner-m 左端230 + 80 = 310、幅833で右端1143に一致）。
     アイコン列 310–528（幅218・中心419）/ 本文列 528–1143。 */
  .b-way.is-about .b-cols__l { width: 833px; margin-left: 80px; }
  .b-way.is-about .b-way__row { grid-template-columns: 218px 1fr; column-gap: 0; row-gap: 9px; align-items: start; }

  /* 🔴 行トラックを content 基準に固定する。
     アイコンは grid-row:span 2 でピル行＋本文行にまたがり、かつ 183〜193px と
     テキスト側（ピル30＋row-gap9＋本文46 ＝ 85）より高い。既定の auto トラックだと
     余った高さが 2 つのトラックへ配分され、ピル下端→本文の間隔が
     Figma 23px に対し 36〜42px まで開いてしまう（2026-09-02 のご指摘箇所）。
     1 行目を min-content、2 行目を 1fr にすると余りは本文行の下側だけに逃げ、
     ピル下端→本文 cap 上端が全行きっちり 23px になる（実測で確認）。 */
  .b-way .b-way__row { grid-template-rows: min-content 1fr; }

  /* 行間。Figma は 1→2 が 2.5px、2→3 が 38.3px と不均等
     （アイコンの高さが 183 / 193.5 / 188 と違うため、見た目の余白を
     揃える方向で設計側が調整している）。従来の一律 20px だと
     2 行目のアイコン上端が Figma より 17.6px 下がっていた。
     4 行目以降が増えた場合は既定の 20px にフォールバックする。 */
  .b-way .b-cols__l { row-gap: 0; }
  .b-way .b-cols__l > * { margin-bottom: 20px; }
  .b-way .b-cols__l > :nth-child(1) { margin-bottom: 2.5px; }
  .b-way .b-cols__l > :nth-child(2) { margin-bottom: 38.3px; }
  .b-way .b-cols__l > :last-child { margin-bottom: 0; }
  /* justify-self:center だけでは figure が列幅いっぱいにストレッチされ、
     中の img も 100% 追従して拡大されていた（原因）。--way-icon-pcw で
     Figma 実寸を明示する。 */
  /* PC は実寸 × 0.5（359→179.5 / 403→201.5 / 434→217。
     Figma 実測 179.4 / 201.2 / 217 と一致）。旧実装は --way-icon-pcw 依存。 */
  .b-way .b-way__icon img { zoom: .5; }

  /* 本文: get_design_context(2001:6696/6700/6704) 実測 32px・Noto Sans JP
     SemiBold・text-box-trim:trim-both cap_alphabetic・leading-[normal]・折り返し
     無し（w=615/583/583 は Figma 実寸のため max-width にそのまま入れる。
     行ごとに --way-t-w で渡す）。 */
  .b-way.is-about .b-way__t { font-size: 32px; line-height: normal; max-width: var(--way-t-w, none); }

  /* ピル+本文ブロックの上マージン。元は align-items:center で icon の高さに
     対して均等割りしていたが、Purpose/Mission は Figma のアイコン上端→ピル上端が
     72px/71px（icon が回転ノードのため center 均等割りにならない非対称な配置）、
     Value は 9.45px（無回転・center 相当に近い）と行ごとに違うため、
     align-items:start にして行ごとに --way-block-mt を明示する。 */
  /* ピル＋本文ブロックの縦位置。
     Figma はアイコン上端→ピル上端が 72 / 71 / 9.45px と行ごとに違う
     （Purpose・Mission の花びらは回転ノードで、外形の中心と絵の重心がずれるため
     天地中央にはならない。Value は無回転でほぼ中央）。
     この 3 値には計算で導ける規則が無く、align-content:center など汎用の
     揃え方では再現できないことを実測で確認済み（アイコンが 2 行にまたがる
     grid-row:span 2 のため行トラックに余白が生まれず効かない）。
     旧実装は行ごとのインライン CSS 変数 --way-block-mt で渡していたが、
     CMS のブロックパーツは 1 テンプレートの繰り返しで行ごとの値を持てない。

     ⚠️ nth-child を使うのは A-5（増減・並べ替えへの耐性）に反する。
     ここでは Purpose / Mission / Value という 3 行固定の理念表示であり、
     about ページ 1 箇所でしか使わないため許容する。
     4 行目以降が増えた場合は補正 0（＝アイコン上端揃え）になるだけで壊れない。 */
  .b-way .b-way__label { align-self: start; margin-top: 0; }
  .b-way .b-cols__l > :nth-child(1) .b-way__label { margin-top: 72px; }
  .b-way .b-cols__l > :nth-child(2) .b-way__label { margin-top: 71px; }
  .b-way .b-cols__l > :nth-child(3) .b-way__label { margin-top: 9.45px; }

  /* 英字ラベルの行別補正（Figma 実測: アイコン中心からの差） */
  .b-way .b-cols__l > :nth-child(1) .b-way__en { --en-dy: 16px; }
  .b-way .b-cols__l > :nth-child(2) .b-way__en { --en-dy: 14.4px; }
  .b-way .b-cols__l > :nth-child(3) .b-way__en { --en-dy: 8px; --en-dx: 3px; }

  /* pill 下端→本文 cap 上端の間隔が Figma 実測 23px（Frame575 y2019 h76 =
     pill30 + gap23 + cap23。Frame576/577 も同じ 23）。line-height:normal
     （32px・Noto Sans JP）にすると行ボックス上端は cap 上端より上に来るため、
     .b-h1.is-relNews と同じ換算式（32px なら行ボックス上端→cap上端が実測
     13.96px）で row-gap を 23-13.96=9px にして cap の位置を合わせる。 */
}

/* ==========================================================================
   カラム（2列・3列・4列）
   共通の grid。列数はブロック自身の class で決める。
   ユニットが増減しても崩れない（auto-fit ではなく明示列＋SP は 1 列）。
   ========================================================================== */
.b-cols__l { display: grid; gap: 20px; }

@media (min-width: 768px) {
  /* Figma 実測: 980 幅に 480×2 = 列間 20。行間はパーツごとに違う。
     1fr（＝ minmax(auto,1fr)）だと列が中身の min-content を下回れず、
     768〜1019px で固定幅のピルを持つカード（b-voice / b-askCard）が
     ビューポートをはみ出して切れる。列の下限を 0 にして必ず収める。 */
  .b-cols__l            { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .b-cols__l:has(> .b-voice) { row-gap: 40px; }  /* Figma 箱間 65 − li の padding-top 25 */
  .b-cols__l:has(> .b-panel) { grid-auto-rows: 1fr; }
  .b-cols__l:has(> .b-step)  { row-gap: 55px; }
  .b-cols.is-c1 .b-cols__l { grid-template-columns: 1fr; }
  .b-cols.is-c3 .b-cols__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-cols.is-c4 .b-cols__l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* 画像+テキスト 2列/3列（default-10 / default-11） */
.b-cols__img { margin: 0 0 10px; }
.b-cols__img img { display: block; width: 100%; }
.b-cols__t { font-size: 13px; line-height: 1.9; }

@media (min-width: 768px) { .b-cols__t { font-size: 15px; } }

/* 見出し+テキスト（背景付き／2列）（Basicparts19-1）
   色はブロック自身の class（is-peace / is-kankojin / is-program） */
/* Figma SP 実測（05/06/07 共通）: 見出し 280×64（24px・行ボックス 32 の 2 行）が +32、
   本文 280×28×行数 が +116、下 24。箱は最低 260。
   本文 4 行なら 252→min-height で 260（05/06）、5 行なら 280（07）と実測に一致する。
   line-height 1.6（＝38.4）だと 1 パネルあたり 5px 高くなる。 */
.b-panel__box {
  min-height: 260px;
  padding: 32px 28px 24px;
  border-radius: 14px;
  color: var(--c-white);
  background: var(--theme-mid, #4778ac);
}

.b-panel { display: flex; }
.b-panel__box { width: 100%; }

.b-panel__h {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #fef3e3;  /* Figma 実測（06/07 とも同色のクリーム） */
}

.b-panel__t { font-size: 14px; line-height: 2; }

.b-panel.is-brown .b-panel__box { background: var(--c-brown); }

/* Figma 実測（06 PC）: パネル 480×210、上 32 / 左右 30 / 下 31、
   見出し 24px(lh32) → 本文まで 19、本文 16px(lh32) */
@media (min-width: 768px) {
  /* PC は Figma 実測 480×210（06）で中身なり。SP の下限 260 は解除する。
     左右は Figma 30（版面 420）。24 だと版面が 432 になり、
     05/06/07 の全 6 パネルで本文の改行位置が Figma とズレていた
     （Figma「…対話の機会を充分に」／実装「…充分に設」）。 */
  .b-panel__box { min-height: 0; padding: 32px 30px 31px; border-radius: 18px; }

  /* 07 だけ本文が 4 行（h=128）で Figma の箱が 240（05/06 は 210）。
     下 padding が 31 のままだと 242 になり、07 PC 全体の +2〜+4 の発生源になる。
     ⚠️ 共通の 31 は 05/06 で正しいのでテーマ限定で上書きする。 */
  .l-mainBg.is-program .b-panel__box { padding-bottom: 29px; }
  /* Figma では見出しのテキストノードだけ ink 幅 432 で、箱の版面 420 を
     左右 6px ずつはみ出している（Figma のテキストは箱をはみ出せる）。
     padding 30 のまま素直に流すと 07 の見出しが 2 行に折れて箱が 240 → 272 になるので、
     見出しだけ負マージンで 432 に戻す。本文は版面 420 のままで Figma と同じ位置で改行する。 */
  .b-panel__h { margin-inline: -6px; margin-bottom: 19px; font-size: 24px; line-height: 1.333; }
  .b-panel__t { font-size: 16px; line-height: 2; }
}

/* アイコン+テキスト（2列）（Basicparts10-1）＝参加者の声
   comp 実測: 白カード、ピル（320×50）はカード上辺の 25px 上から半がけ */
/* Figma SP 実測（05/06/07 共通）: ピル 223×35 がカード上辺に 18 半がけ、
   箱は最低 280（07 だけ 340）、本文 293×28×行数 が箱+38。
   ピルは中央、本文は左揃え。テキスト量が違ってもカード下端が揃うよう min-height。 */
.b-voice { display: flex; padding-top: 18px; }

/* 調査記録（2026-08-16）: 「05 SP 声カードが 284px（目標 280）」という指摘があったが、
   これは CSS のバグではない。min-height:280 は既にここ（ベース＝SP 既定値）で
   全カードに効いており、実測で確認済み（4 枚中もっとも短い証言だけが min-height の
   床である 280px にちょうど乗る）。
   284px になっていたカードは本文が 8 行（28px × 8 ＝ 224px）で、
   padding(38+18=56) を足すと 280 を 4px 超える ＝ **文字量に起因する自然な結果**。
   min-height は下限であって上限ではないので、長い証言ほど 280 を超えるのは仕様どおり。
   Figma 原稿（証言テキスト）を削らない限りこれ以上は詰められない。
   05 は 4 枚中 3 枚が 280 を超え、最長のカードは 340px まで伸びる。 */
.b-voice__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 280px;
  padding: 38px 21px 18px;
  border-radius: 14px;
  text-align: left;
  background: var(--c-white);
}

.b-voice__box > .b-voice__label { align-self: center; }

/* Figma 実測（2026-09-02）: PC ピル 320×50 / 文字 240×32・20px、
   SP ピル 223.3×34.9 / 文字 167.5×22.3・16px（2001:8435/9148/10391、8702/9708/10728）。
   SP は 15px、PC は 16px になっていた。 */
.b-voice__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 223px;
  min-height: 35px;
  margin-top: -56px;
  margin-bottom: 21px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-white);
  text-align: center;
  background: var(--theme-mid, #4778ac);
}

.b-voice__t { font-size: 14px; line-height: 28px; text-align: left; }

@media (min-width: 768px) {
  /* Figma 実測（06 PC）: カード 480×340、ピル 320×50 がカード上辺の 25px 上、
     本文はカード上端から 55、左右 30 */
  .b-voice { padding-top: 25px; }
  .b-voice__box { min-height: 340px; padding: 55px 30px 28px; border-radius: 18px; }
  .b-voice__label {
    /* Figma は 320。列が 320+左右padding を下回る 768〜1019px では列幅まで縮める */
    min-width: min(320px, 100%);
    margin-top: -80px;
    margin-bottom: 30px;
    /* Figma: ピル高 50 ＝ 文字箱 32 ＋ 上下 9 */
    padding: 9px 24px;
    font-size: 20px;
    line-height: 32px;
  }
  .b-voice__t { font-size: 16px; line-height: 2; }
}

/* 白枠見出し+テキスト+画像4列（Basicparts20-1） */
/* Figma 実測（06 PC 980×620 / SP 335×660）
   PC: 上 58 / 左右 37 / 下 60、見出し 32px(lh42)、本文 16px(lh32)、
       見出し→本文 30、本文→写真 61、写真→memo 61
   SP: 上 36 / 左右 28 / 下 40、見出し 20px、本文 12px(lh28) */
/* Figma SP 実測（06）: 箱 335×660・中身の幅は 280（左 28 / 右 27）。
   左右とも 28 にすると中身が 279 になり、本文が 1 行余分に折れる。 */
.b-whiteBox__box {
  padding: var(--wb-padTop-sp, 36px) 27px 40px 28px;
  border-radius: 16px;
  background: var(--c-white);
}

/* Figma SP 実測: 05 214÷9字 / 06 144÷6字 / 07 いずれも 24px・行ボックス 32。
   20px だと 3 ページとも見出しが小さすぎた */
.b-whiteBox__h {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  /* Figma SP はいずれも 1 行（05 214 / 06 144 / 07 288）。
     07 だけ内寸 279 をわずかに超えるが、中央揃えなので左右に均等にはみ出す */
  white-space: nowrap;
  color: var(--theme-strong, inherit);
}

@media (min-width: 768px) {
  .b-whiteBox__h { white-space: normal; }
}

.b-whiteBox__t {
  margin-top: 30px;
  font-size: 14px;
  line-height: 2;
  max-width: 780px;
  margin-inline: auto;
}

/* 2026-08-20: grid（常に4列のマス目）→ flex に変更。CMSで画像が1〜2枚しか
   登録されない場合に、余ったマスで左寄せに見えるのを避けて中央寄せにするため。
   4枚時の見た目は同一（各画像幅 = (100% - gap×(列-1)) / 列 で grid の 1fr と一致） */
.b-whiteBox__imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wb-gap-sp, 10px);
  margin-top: 30px;
  margin-inline: auto;
  max-width: 280px;
}

.b-whiteBox__imgs img {
  display: block;
  width: calc((100% - var(--wb-gap-sp, 10px)) / 2);
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  aspect-ratio: var(--wb-ratio, 215 / 144);
}

/* 写真の寸法はページごとに違う（Figma 実測）。
   ブロック自身の class で切り替える＝body に class を付けられないため */
/* 本文→写真の間隔もページごとに違う（Figma 実測: 05=33 / 06=61 / 07=30） */
.b-whiteBox.is-pd  { --wb-ratio: 179 / 163; --wb-row: 780px; --wb-gap: 20px; --wb-imgTop: 33px; --wb-padTop: 60px;
                     --wb-gap-sp: 16px; --wb-padTop-sp: 37px; }
/* 05 の白箱見出しだけ行ボックスが 32（06/07 は 42）。Figma テキストノード実測 */
@media (min-width: 768px) {
  .b-whiteBox.is-pd .b-whiteBox__h { line-height: 1; }
}
.b-whiteBox.is-kq  { --wb-ratio: 215 / 144; --wb-row: 906px; --wb-gap: 15px; --wb-memo: 580px; --wb-imgTop: 61px; --wb-padTop: 58px; }
.b-whiteBox.is-mlp { --wb-ratio: 130 / 130; --wb-row: 577px; --wb-gap: 19px; --wb-memo: 780px; --wb-imgTop: 30px; --wb-padTop: 56px; --wb-gap-sp: 20px; --wb-padTop-sp: 40px; }

/* 補足パネル（06 は写真の後・07 は写真の前）。Figma: 地色 #fef8dc / 20px 40px */
/* Figma SP 実測（06）: 帯 280×160・内側 20・文字 16px / 行 30 の 4 行 */
.b-whiteBox__memo {
  margin-top: 30px;
  margin-inline: auto;
  padding: 20px;
  max-width: var(--wb-memo-sp, 280px);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  /* Figma 2001:9532（06 SP）は両端揃え。中央寄せだと最終行だけ真ん中に寄る */
  text-align: justify;
  color: var(--theme-strong, inherit);
  background: #fef8dc;
}

/* 07 は写真の前に入る（Figma 実測）。順序は class で表す＝:first-child に頼らない */
.b-whiteBox__memo.is-first { margin-top: 30px; }

/* 07 の補足は「枠線で囲まれたボックス」（Figma SP 2001:10650 / PC 2001:11057 実測）
   SP 280×120（padding 20・中身 240 幅・上下中央）/ PC 780×60（60 = 1+15+28+15+1）
   どちらも 1px #0ca490・角丸 10・文字 14px Medium・行ボックス 28 */
.b-whiteBox.is-mlp .b-whiteBox__memo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px;
  max-width: 280px;
  border: 1px solid #0ca490;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  /* Figma 2001:10651 / 11058 は text-align 指定なし＝左寄せ */
  text-align: left;
  color: #0ca490;
  background: none;
}

@media (min-width: 768px) {
  .b-whiteBox.is-mlp .b-whiteBox__memo {
    min-height: 60px;
    padding: 15px 33px;
    max-width: 780px;
  }
}

/* 07 の見出しだけテーマ色ではなく黒（Figma 2001:11054 実測 var(--black)）。
   05/06 はテーマ色（06 = #006a71）で正しい */
.b-whiteBox.is-mlp .b-whiteBox__h { color: #000; }

/* 07 の写真は 130×130 の円マスク（Figma 2001:11042 ほか）。05/06 は角丸の矩形 */
.b-whiteBox.is-mlp .b-whiteBox__imgs img { border-radius: 50%; }

/* Figma 2001:11055: 本文は両端揃え */
.b-whiteBox.is-mlp .b-whiteBox__t { text-align: justify; }

@media (min-width: 768px) {
  .b-whiteBox__box { padding: var(--wb-padTop, 58px) 37px 60px; border-radius: 20px; }
  .b-whiteBox__h { font-size: 32px; line-height: 1.31; }
  .b-whiteBox__t { margin-top: 30px; font-size: 16px; line-height: 2; }
  .b-whiteBox__imgs {
    gap: var(--wb-gap, 15px);
    margin-top: var(--wb-imgTop, 61px);
    max-width: var(--wb-row, 906px);
  }
  /* PC は4列相当（flex。端数行は中央寄せ） */
  .b-whiteBox__imgs img {
    width: calc((100% - 3 * var(--wb-gap, 15px)) / 4);
  }
  .b-whiteBox__memo {
    margin-top: var(--wb-imgTop, 61px);
    padding: 20px 40px;
    max-width: var(--wb-memo, 580px);
    font-size: 20px;
    line-height: 1.5;
  }
  .b-whiteBox__memo.is-first { margin-top: 30px; }
  /* Figma 2001:11057 は箱 x330 w780 に対し本文 x364 w711（左右 33/35・枠 1px 込み）。
     padding を 0 に上書きしていたため本文が箱の左端から始まり、箱高も 62 になっていた。
     padding は上の PC ブロックの 15px 33px を活かす（15+28+15+枠2 = 60）。
     justify-content は既定の center だと本文塊が中央に寄ってしまうので左詰めにする。
     ⚠️ 06 側（20px 40px）は Figma と 0.1px 一致しているので触らない。 */
  .b-whiteBox.is-mlp .b-whiteBox__memo { justify-content: flex-start; font-size: 14px; line-height: 2; }
}

/* Vision カード（06「観光人が投げかける問い」・Figma 480×360）
   SP 335×251.25 は PC の 0.6979 倍の相似形（全要素で一致を確認済み）なので、
   コンテナクエリ単位 cqw で 1 セットだけ定義すれば両ブレークポイントで一致する。
   cqw 非対応ブラウザ向けに px の既定値を先に書いている。
   カード上端からの距離は Figma では全 6 枚とも固定:
     ピル +19（130×25）／ Vision 文 +53（464×52＝2 行の固定枠）／
     楕円 +126（310×170）／ 一言紹介 +308
   角丸だけは cqw が使えない（container-type を持つ要素自身は自分を参照できず
   ビューポート基準にフォールバックする）ので px で分岐する。
   Figma: PC 2001:10044 = 20 / SP 2001:9464 = 13.958（＝ 20 × 0.6979） */
.b-vision__box {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 13.958px;
  background: var(--c-white);
}

@media (min-width: 768px) { .b-vision__box { border-radius: 20px; } }

/* Figma 2001:10049: Bold 18px・ピルは 2001:10032 の 130×25（行ボックス 25＝18×1.389） */
.b-vision__pill {
  width: 91px;
  width: 27.083cqw;
  margin: 13px auto 0;
  margin-top: 3.958cqw;
  padding: 0;
  border-radius: 999px;
  font-size: 12px;
  font-size: 3.75cqw;
  font-weight: 700;  /* Figma: Vision ピルだけ Bold */
  line-height: 1.389;
  text-align: center;
  color: var(--c-white);
  background: var(--theme-mid, #3fa07c);
}

/* Figma 2001:10050: SemiBold 18px・464×52。52 は 2 行ぶんの固定枠で、
   1 行の 2001:10083 は +66（＝枠 +53..+105 の天地中央）に置かれている。
   枠を固定しないと Vision 文の行数によって楕円以下が 25.9px ずれる。 */
.b-vision__v {
  display: grid;
  align-content: center;
  margin-top: 5px;
  margin-top: 1.875cqw;
  min-height: 36px;
  min-height: 10.8cqw;   /* 2 行 ＝ 3.75cqw × 1.44 × 2 */
  padding-inline: 1.667cqw;
  font-size: 12px;
  font-size: 3.75cqw;
  font-weight: 500;
  line-height: 1.44;
  text-align: center;
  color: var(--theme-strong, inherit);
}

.b-vision__main {
  position: relative;
  margin-top: 10px;
  margin-top: 4.375cqw;
  height: 119px;
  height: 35.417cqw;
}

.b-vision__ph {
  position: absolute;
  left: 4.375cqw;
  top: 3.125cqw;
  width: 29.167cqw;
  height: auto;
  border-radius: 50%;
}

.b-vision__q {
  margin-left: 30.208cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64.583cqw;
  height: 100%;
  padding-inline: 2cqw;
  border-radius: 50%;
  font-size: 16px;
  font-size: 5cqw;
  font-weight: 500;
  line-height: 1.42;
  text-align: center;
  color: var(--c-white);
  background: var(--theme-mid, #3fa07c);
}

.b-vision__role {
  margin-top: 2.5cqw;
  padding-inline: 4.375cqw;
  font-size: 11px;
  font-size: 3.333cqw;
  line-height: 1.44;
  color: var(--theme-strong, inherit);
}

/* テキストアイコン+見出し+画像2列（2列）（Basicparts21-1） */
/* 帯はカード上辺に半分かかる（Figma: pill がカード上端の 25px 上から始まる） */
.b-askCard { padding-top: 25px; }

.b-askCard { display: flex; }

.b-askCard__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 18px 22px;
  border-radius: 14px;
  background: var(--c-white);
  text-align: center;
}

.b-askCard__box > .b-askCard__label { align-self: center; }

.b-askCard__label {
  display: inline-block;
  min-width: 200px;
  margin-top: -65px;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  background: var(--theme-mid, #4778ac);
}

.b-askCard__h {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--theme-accent, var(--c-brown));
}

.b-askCard__imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.b-askCard__imgs img { display: block; width: 100%; border-radius: 6px; }

@media (min-width: 768px) {
  /* Figma 実測（05）: 箱 480×300 / ピル 320×50 が上辺の 25 上 /
     問い 24px(lh 26.5) が上から 55 / 写真 202×126 が 138 / 下 36 */
  /* 左右 20 = 内寸 440。Figma の最長の問い（18 字 × 24px = 432）が折り返さない幅 */
  .b-askCard__box { min-height: 300px; padding: 55px 20px 36px; border-radius: 18px; }
  .b-askCard__label { min-width: min(320px, 100%); margin-top: -80px; margin-bottom: 30px; font-size: 16px; line-height: 1.875; }
  .b-askCard__h { margin-top: 0; font-size: 24px; line-height: 26.5px; }
  /* Figma 実測: 写真 202×126 が 2 枚 + 間 16 = 420 をカード内で中央 */
  .b-askCard__imgs { gap: 16px; margin-top: 30px; max-width: 420px; margin-inline: auto; }
  .b-askCard__imgs img { aspect-ratio: 202 / 126; object-fit: cover; }
}

/* 左テキスト+右画像（白背景付き）（Basicparts18-1）＝アワード実績。増減時は横2列 */
/* Figma 実測（04）: 楕円下端→アワード上端 PC 3471→3573=102 / SP 3538→3618=80
   （SP は吹き出し下端 3588 から 30）。旧 60 は 20px 不足だった（AD監査 M-1） */
.b-award.b-gap-md { padding-top: 80px; }

@media (min-width: 768px) { .b-award.b-gap-md { padding-top: 102px; } }

.b-award__l { display: grid; gap: 16px; }

.b-award__box {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 16px;
  align-items: center;
  /* Figma 実測（04 SP Group916 x19/y3618 w335 h130・image7 x241/y3643 w89 h80）:
     padding は上下左右ほぼ均等 25px（旧 16px/18px だとカード高が 113.3 にしかならず 130 に届かない） */
  padding: 25px;
  border-radius: 12px;
  background: var(--c-white);
}

/* Figma 実測（04 SP 2001:7720）: Noto Sans JP Medium(500) 12px・行ボックス24固定。
   旧 13px/SemiBold/line-height:1.7(≒22.1px) だと 3 行想定のテキストが列幅179pxに
   収まらず 4 行に折れ、カード高が余計に伸びていた（padding 修正だけでは解決しない）。 */
.b-award__t { font-size: 12px; font-weight: 500; line-height: 24px; }
.b-award__box img { display: block; width: 100%; }

@media (min-width: 768px) {
  /* Figma 実測（04 PC Group916 x480/y3573 w480 h140）: カードは 480px 固定で 2 列。
     1 枚だけの現状は repeat(2,1fr) だと左詰め（余った列ぶん -250px）になるため
     auto-fit の固定トラックにして中央寄せする（枚数が増減しても崩れない） */
  .b-award__l { grid-template-columns: repeat(auto-fit, 480px); justify-content: center; gap: 20px; }
  .b-award__box { grid-template-columns: 1fr 110px; padding: 20px 24px; border-radius: 14px; }
  .b-award__t { font-size: 15px; }

  /* 2026-09-10 ユーザー指摘: 奇数枚（3・5…）で最終行が1枚だけになると、
     auto-fit のトラックは全行共通のため空いた列は個別行では詰まらず、
     最終行の1枚だけ左詰めになる。最終行が1枚のときだけ両列にまたがせ、
     カード自体は元の1列ぶん（480px）のまま中央寄せする（枚数が増減しても崩れない）。 */
  .b-award__l > li:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
  .b-award__l > li:last-child:nth-child(odd):not(:only-child) .b-award__box { max-width: 480px; margin-inline: auto; }
}

/* ==========================================================================
   動画
   ========================================================================== */

/* 動画埋め込みパーツ（Basicparts6-1 / 7-1）
   JS 無効でも YouTube へ遷移できるよう、素の <a> にサムネイルを入れる。
   blocks.js があればクリックでモーダル再生に差し替わる（演出のみ）。
   サムネは YouTube 自動サムネ（i.ytimg.com/vi/{ID}/maxresdefault.jpg）。
   CMS では動画 ID のテキスト入力 1 つだけ（vibitCMS_knowledge/14_recipe）。 */
.b-movie__f { margin: 0; }

/* aspect-ratio は枠側に置く: 実 ID 未支給の間は maxresdefault が 404 になるが、
   背景色 + 16:9 固定でサムネ無しでも枠が保たれる。
   hqdefault（4:3・黒帯付き）に差し替えた場合も img の object-fit でクロップされる */
.b-movie__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #d9d9d9; /* Figma 05 PC 2001:8280 右列プレースホルダの薄グレー */
}

.b-movie__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 02 の紹介ムービーだけ Figma SP 実測でサムネ幅 315px（Movie フレーム
   2001:6152 x30 w315。.b-inner の左右 20px より内側にさらに 10px ずつ絞る＝
   ビューポート端から 30px）。共通の b-movie は他ページ（news 系）でも
   使うため .is-about で限定する。 */
@media (max-width: 767px) {
  .b-cols.is-about .b-movie__thumb { max-width: 315px; margin-inline: auto; }
}

/* 赤い再生ボタンは CSS 描画（サムネ焼き込みは廃止 → 2026-08-17 運用性優先で回帰）。
   Figma 02 PC のムービー画像（2001:6472 980×552）実測: 中央 68×48・
   YouTube 公式風の赤角丸 + 白三角、赤は #e93323。
   pointer-events:none でクリックは下の <a> に通す */
.b-movie__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path fill="%23e93323" d="M66.5 7.7c-.8-2.9-3-5.2-5.9-6C55.5.3 34 0 34 0S12.5.3 7.4 1.7c-2.9.8-5.1 3.1-5.9 6C.1 12.9 0 24 0 24s.1 11.1 1.5 16.3c.8 2.9 3 5.2 5.9 6C12.5 47.7 34 48 34 48s21.5-.3 26.6-1.7c2.9-.8 5.1-3.1 5.9-6C67.9 35.1 68 24 68 24s-.1-11.1-1.5-16.3z"/><path fill="%23fff" d="M45 24 27 14v20z"/></svg>') center / contain no-repeat;
  pointer-events: none;
}

/* Figma design context 実測: ラベルは 120×25 のピル。
   for Student = #ee8e40 / for Business = #45bdea、文字は Inter SemiBold 14 の白。
   動画までの間隔は PC 25 / SP 20 */
.b-movie__h {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  min-height: 25px;
  margin: 0 auto 20px;
  border-radius: 32px;
  font-family: var(--ff-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-white);
  background: #ee8e40;
}

.b-movie__h.is-business { background: #45bdea; }

@media (min-width: 768px) { .b-movie__h { margin-bottom: 25px; } }

/* SP は動画 2 本が縦積みで間隔 40（Figma 実測） */
@media (max-width: 767px) {
  .b-cols__l:has(> li > .b-movie__f) { row-gap: 40px; }
}

/* 「紹介ムービー」見出し → 動画ブロックの間隔（2026-09-10 ユーザー指摘・実測修正）
   05 ピースダイアログ / 06 観光人クエスト / 07 MY LIV PROGRAM の3ページとも
   見出し直後に動画の .b-cols が続く構成。ここは共通の .b{padding-top:var(--b-gap)}
   （見出し→本文の既定値。2026-09-01 に Figma実測50pxからユーザー編集で30pxへ
   変更されたもの）を継承していたが、動画セクションだけは Figma 実測どおり
   PC 50px にする（3ページとも同一値で確認済み）。SP は既定の 40px のままで正しい。
   .b-h1 の直後で、かつ中に動画（.b-movie__f）を含む .b-cols だけに限定し、
   他の見出し→本文（既定30pxのまま）には影響させない。 */
@media (min-width: 768px) {
  .b-h1 + .b-cols:has(.b-movie__f) { padding-top: 50px; }
}

@media (min-width: 768px) {
  .b-movie__thumb { border-radius: 16px; }
}

/* モーダル（JS 有効時のみ表示。既定は hidden 属性で非表示） */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .8);
}

.c-modal[hidden] { display: none; }

.c-modal__body { width: 100%; max-width: 960px; }

.c-modal__frame {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.c-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-modal__close {
  display: block;
  margin: 0 0 12px auto;
  font-size: 28px;
  line-height: 1;
  color: var(--c-white);
}

/* ==========================================================================
   フロー系
   ========================================================================== */

/* ツアーフロー（Basicparts22-1）／フロー（アイコン付き）（Basicparts27-1）
   矢印は各ステップの「上」に置く。先頭だけ非表示にすると
   並び替えで破綻するため、矢印は独立した要素として置く。 */
.b-flow__box {
  padding: 22px 18px 26px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-flow__h {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.b-flow__lead { margin-top: 8px; font-size: 13px; line-height: 1.9; }

.b-flow__steps { display: grid; gap: 14px; margin-top: 18px; }

.b-flow__step {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  color: var(--c-white);
  background: var(--theme-mid, #4778ac);
}

.b-flow__stepH { font-size: 17px; font-weight: 500; line-height: 1.4; }
.b-flow__stepT { margin-top: 6px; font-size: 13px; line-height: 1.8; }
.b-flow__step img { display: block; width: 100%; border-radius: 8px; }

/* ステップ間の矢印 */
.b-flow__arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-inline: 12px solid transparent;
  border-top: 12px solid var(--theme-mid, #4778ac);
}

@media (min-width: 768px) {
  .b-flow__box { padding: 32px 36px 40px; border-radius: 20px; }
  .b-flow__h { font-size: 21px; }
  .b-flow__lead { font-size: 15px; }
  .b-flow__step { grid-template-columns: 1fr 230px; align-items: center; padding: 22px 26px; }
  .b-flow__stepH { font-size: 20px; }
  .b-flow__stepT { font-size: 14px; }
}

/* 数字付きフロー（Basicparts27-1 / 32-1）
   Figma 実測（06 SP）: 箱 335×780・番号バッジ 50×50 が左 17 で箱の上辺に 25 かぶる。
   箱の中は ピル 75×20 が +57 / 見出し 280×105（24px・行 35）が +102 /
   本文 280×112（14px・行 28）が +227 / 写真 280×165 が +369 と +549（間隔 15）/
   注記 221×34（10px・行 17）が +727。箱どうしの間隔は 111（間に ▼）。 */
.b-step { position: relative; padding-top: 25px; }

.b-step__box {
  min-height: 780px;
  padding: 57px 28px 19px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-step__head { display: block; }

.b-step__num {
  position: absolute;
  left: 17px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-white);
  background: var(--theme-mid, #0ca490);
}

/* ラベルは Figma 実測 75×20（文字 12px）。色は設計書「アイコンカラー選択」に対応し、
   06 は 旅前＝#006a71（白文字）/ 旅先＝#f8d85c（テーマ色の文字）*/
.b-step__label {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--c-white);
  background: var(--c-brown);
}

.b-step.is-kankojin .b-step__label { background: var(--theme-strong); }
.b-step.is-kankojin .b-step__label.is-alt { color: var(--theme-strong); background: #f8d85c; }

.b-step__h { margin-top: 25px; font-size: 24px; font-weight: 500; line-height: 35px; }
.b-step__t { margin-top: 20px; font-size: 14px; line-height: 28px; }
.b-step__imgs { display: grid; gap: 15px; margin-top: 30px; }
.b-step__imgs img { display: block; width: 100%; border-radius: 8px; aspect-ratio: 280 / 165; object-fit: cover; }
.b-step__foot { margin-top: 13px; font-size: 10px; line-height: 17px; }

/* カード間の ▼（Figma は Polygon。回転ノードなので寸法は 07 と同じ 64×24 で描く）*/
.b-step.is-hasArrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -68px;
  width: 0;
  height: 0;
  translate: -50% 0;
  border-inline: 32px solid transparent;
  border-top: 24px solid var(--theme-mid, #0ca490);
}

/* Figma 実測（06 PC）: カード 980×470、番号バッジ 70×70 が左に 31 はみ出す、
   ラベル 100×26 は上から 40、見出し 上から 75、本文 130、写真 280×165 を上から 224。
   本文列 780・写真列 580 はどちらもカード内で中央 */
@media (min-width: 768px) {
  .b-step { padding-top: 0; }
  /* 注記を持つカード 1 の下端が Figma 実測 32（注記なしのカードは min-height が効く）*/
  .b-step__box { min-height: 470px; padding: 40px 100px 32px; border-radius: 20px; }
  .b-step__num {
    left: -31px;
    top: 42px;
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
  /* PC は Figma 実測 100×26（文字 16px）*/
  .b-step__label { min-width: 100px; min-height: 26px; font-size: 16px; line-height: 26px; }
  .b-step__h { margin-top: 9px; font-size: 24px; line-height: 1.46; }
  .b-step__t { margin-top: 20px; font-size: 16px; line-height: 2; }
  /* 注記は PC も SP と同じ 221×34（10px・行 17）。写真からの間隔だけ 15 */
  .b-step__foot { margin-top: 15px; }
  .b-step.is-hasArrow::after { bottom: -40px; }
  .b-step__imgs {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
    max-width: 580px;
    margin-inline: auto;
  }
}

/* カードの行間（Figma 実測: SP は箱どうし 111 → li の逃げ 25 を引いて 86 / PC 55）*/
.b-cols__l:has(> .b-step) { row-gap: 86px; }

@media (min-width: 768px) { .b-cols__l:has(> .b-step) { row-gap: 55px; } }

/* Vision カードの行間（Figma SP 実測: カード 251.25・ピッチ 265.25 ＝ 14）*/
@media (max-width: 767px) {
  .b-cols__l:has(> .b-vision) { row-gap: 14px; }
}

/* ==========================================================================
   プログラムの対象エリア（Basicparts24-1）
   ※背景色は左オレンジ・右青の固定
   ========================================================================== */
/* Figma 実測（05）
   PC 白箱 980×455: 見出し 383×23 が +69 / パネル 440×240 が +155（左右 40・間 20）/
      ラベル が パネル+24 / 本文 390×96 が パネル+103（左右 25）/ 下 60
   SP 白箱 335×680: 見出し 287×18 が +43 / パネル 305×260 が +101・+381（左右 15・間 20）/
      本文 250×112 が パネル+107（左右 28）/ 下 39
   色: 左 #EE8E40（橙）/ 右 #45BDEA（水色）/ 見出し #004B90 / ラベル・本文 白 */
.b-target__box {
  padding: 43px 15px 39px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-target__h {
  font-size: 20px;
  font-weight: 500;
  line-height: .9;
  text-align: center;
  color: var(--theme-strong, #004b90);   /* 06 観光人クエストは #006a71（2026-09-10 ユーザー指摘。旧実装は 05 のピースブルー固定で 06 にも誤って出ていた） */
}

.b-target__l { display: grid; gap: 20px; margin-top: 40px; }

/* Figma SP 実測: パネルは本文が 4 行（05）でも 5 行（06）でも 260 で固定。
   下 41 だと 5 行のとき 288 になるので、下は 13 にして min-height に任せる。
   左右は 29（本文幅 247）。 */
.b-target__box2 {
  min-height: 260px;
  padding: 24px 29px 13px;
  border-radius: 14px;
  color: var(--c-white);
  background: #ee8e40;
}

.b-target__l > li:nth-child(2) .b-target__box2 { background: #45bdea; }

.b-target__h2 {
  font-family: var(--ff-en);
  font-size: 30px;
  font-weight: 500;
  line-height: 2.4;
  text-align: center;
}

.b-target__t { margin-top: 11px; font-size: 14px; line-height: 2; }

@media (min-width: 768px) {
  .b-target__box { padding: 69px 40px 60px; border-radius: 20px; }
  .b-target__h { font-size: 32px; line-height: .72; }
  .b-target__l { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 63px; }
  .b-target__box2 { min-height: 240px; padding: 24px 25px 41px; border-radius: 18px; }
  .b-target__h2 { font-size: 36px; line-height: 2; }
  .b-target__t { margin-top: 7px; font-size: 16px; line-height: 2; }
}

/* ==========================================================================
   お知らせ（DB パーツ）
   1 件分のカードだけで完結させる。件数が増減しても崩れない。
   ========================================================================== */
/* grid item（li）は行の高さまで伸びるが、その中の .c-newsCard は伸びないため、
   タイトルやタグの量が違うと 1 行の中でカード地の高さが揃わない
   （08 は CMS の DB 管理領域なので文字量は必ず変動する）。
   li を flex にしてカードを 100% 幅・cross 方向 stretch で受ける。 */
.b-news__l { display: grid; gap: 20px; }
.b-news__l > li { display: flex; }
.b-news__l > li > .c-newsCard { width: 100%; }
/* 2026-08-18: JS の絞り込み・段階表示は li に hidden 属性を付けて行う。
   `.b-news__l > li { display:flex }` は author 由来で UA の [hidden]{display:none}
   より優先されてしまうため、明示的に上書きしないと非表示にならない。 */
.b-news__l > li[hidden] { display: none; }

@media (min-width: 768px) {
  /* Figma 実測: カード 310×520 が 3 列・列間 25・行間 25（05/06/07/08 共通） */
  .b-news__l { grid-template-columns: repeat(3, 1fr); gap: 25px; }

  /* 09 の関連記事だけ 2 列・幅 640・列間 20（Figma 実測 x400..1040） */
  .b-news.is-related .b-news__l {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 640px;
    margin-inline: auto;
  }
}

/* タブ・ハッシュタグ選択エリア（08）
   2026-08-18 クライアント正式指示（JTB My Liv 固有仕様）: タブは data-news-filter
   を持つ button（静的テンプレート領域）で、JS はハッシュタグ選択エリア
   （.p-news__hashtags）の表示/非表示だけを切り替える。カード一覧（b-news__l）は
   1つで全タブ共通、絞り込みは JS が data-segments を見て行う（旧 A-22 の
   「タブの数だけパネル別エリア」方式は廃止）。
   タブ数は可変前提なので repeat(3, …) のようなタブ数固定の指定を書かない。 */
/* Figma 実測（08 SP）: 全体 335×230。タブバー 335×60（3 等分・アクティブ 112×60）、
   タグ箱 335×150 がバー下端から 20、内側 上 32 / 左 29、タグ 23 高・列間 5・行間 10 */
.b-filter__tabs {
  display: flex;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(255, 255, 255, .8);
}

/* SP は 3 等分＝flex:1 で吸収（タブが増減しても等分のまま） */
.b-filter__tabs > li { display: flex; flex: 1 1 0; min-width: 0; }

.b-filter__tabs > li > button {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 4px 6px;
  border-radius: 30px;
  /* Figma 2001:12488 は 14px・leading 18 の 2 行（「サービス／から探す」）。
     12px の 1 行だと Figma と字面も箱の使い方も違う */
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.b-filter__tabs .is-current > button { color: var(--c-white); background: var(--c-brown); }

.b-filter__tags {
  display: flex;
  flex-wrap: wrap;
  /* align-content 未指定(=stretch)だと min-height:150px の余り高が行数で
     等分され、行数の少ないパネル(地域2行/カテゴリ1行)だけ行間が伸びる。
     flex-start 固定で行間は gap が支配し、全パネルで Figma のピッチに揃う */
  align-content: flex-start;
  gap: 10px 5px;
  margin-top: 20px;
  /* Figma: 内側 上 32 / 左右 29 / 下 29 */
  padding: 32px 29px 29px;
  min-height: 150px;
  border-radius: 20px;
  background: var(--c-white);
}

.b-filter__tags > li > a,
.b-filter__tags > li > button.c-hashtag {
  display: flex;
  align-items: center;
  min-height: 23px;
  padding: 0 14px;
  border: 1px solid rgba(105, 44, 26, .4);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  font-size: 12px;
  font-weight: 500;
  /* line-height 未指定だと body の 1.8（21.6）＋枠 2 で 23.6 になり、
     min-height:23 を 0.6 超える。5 行ぶん積み上がって SP の sort +5 / list +6 の正体だった */
  line-height: 17px;
}

/* ハッシュタグの選択状態（単一選択。タブの is-current と同じ配色）。
   ベース側セレクタ `.b-filter__tags > li > button.c-hashtag`（詳細度 0,2,2）に
   詳細度で勝つよう、同じ構造で組む（`.c-hashtag[aria-pressed]` 単体だと 0,2,0 で負ける）。 */
.b-filter__tags > li > button.c-hashtag[aria-pressed="true"] {
  color: var(--c-white);
  background: var(--c-brown);
  border-color: var(--c-brown);
}

/* ハッシュタグ選択エリアはタブが対応するものだけ表示する。
   `.b-filter__tags{display:flex}` は author 由来で UA の [hidden]{display:none}
   より優先されるため、明示的に上書きする（.b-news__l > li[hidden] と同じ理由）。 */
.p-news__hashtags[hidden] { display: none; }

@media (min-width: 768px) {
  /* Figma 実測（08）: 全体 980×230。タブバー 980×60、
     タグ箱 980×150 がバー下端から 20、タグは 36 高・行ピッチ 51・横 15、
     箱の内側は 左右 40 / 上 31 */
  /* Figma はアクティブタブの地が 310px 固定で、ラベル中心が 385 / 720 / 1055
     ＝ お知らせカードの 3 カラム（x230 / 565 / 900）と同じグリッドに乗る。
     3 等分（326.66）だとタブの区切りとカード列の縦ラインが揃わない。
     タブ数固定の repeat(…) を書かず、各タブ 310px 固定 ＋ space-between で
     「見た目は Figma・構造は可変数」を両立する（A-22）。
     ※ SP は 3 等分が正しいので PC ブロックだけで上書きする。 */
  .b-filter__tabs {
    justify-content: space-between;
    border-radius: 33px;
  }
  .b-filter__tabs > li { flex: 0 0 310px; }
  .b-filter__tabs > li > button {
    min-height: 60px;
    padding: 4px 10px;
    border-radius: 33px;
    font-size: 20px;
    line-height: normal;
  }
  .b-filter__tags {
    gap: 15px;
    margin-top: 20px;
    padding: 31px 40px 32px;
    min-height: 150px;
    border-radius: 20px;
  }
  .b-filter__tags > li > a,
  .b-filter__tags > li > button.c-hashtag {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 24px;
    border-width: 1.2px;
    border-color: #692c1a;
    font-size: 16.8px;
  }
}

/* 08 のタブバー・リストの上余白は Figma 実測（PC 120/80・SP 195/80）。 */
.b-html.is-newsTabs { padding-top: 195px; }
.b-news.is-newsList { padding-top: 80px; }

@media (min-width: 768px) {
  .b-html.is-newsTabs { padding-top: 120px; }
}

/* 2026-08-18: 旧「お知らせのパネル（08。A-22）」「ページネーション」は
   クライアント正式指示によりページネーション廃止・全件HTML出力＋JS絞り込みへ
   変更したため削除（.b-newsPanel / .b-pager__l は news.html から出力されなくなった）。
   絞り込み 0 件時のメッセージとスクロール追加表示の監視要素。 */
.p-news__empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
}

.p-news__sentinel {
  height: 1px;
}

/* お知らせ詳細ヘッダ（DBparts3-1）
   Figma 実測（09）: 白箱は無く、地の上に直接タグ→日付→タイトル→罫線が並ぶ。
   幅は 780（b-inner-s）。ページ見出しの行ボックス下端からの距離が
   PC 120 / SP 195 なので、上余白はこのブロック自身が持つ（08 の絞り込みと同じ考え方）。
   タグ行→日付 40 / 日付→タイトル 15 / タイトル→罫線 15。 */
.b-article { padding-top: 195px; }

.b-article__date {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.b-article__t {
  margin-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-brown);
  font-size: 24px;
  font-weight: 500;
  line-height: 35px;
}

@media (min-width: 768px) {
  .b-article { padding-top: 120px; }
  .b-article__date { font-size: 16px; line-height: 23px; }
  /* 706÷22.36字 ＝ 32px・行ボックス 46 */
  .b-article__t { font-size: 32px; line-height: 46px; }
}

/* 記事本文の終わりの罫線（Figma 09 の Line 99）。本文と同じ幅で引く */
.b-artEnd__l {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-brown);
}

/* 記事本文（テキストと画像の基本パーツの組み合わせ） */
.b-body__t { font-size: 14px; line-height: 2; }
.b-body__f { margin: 20px 0 0; }
.b-body__f img { display: block; width: 100%; border-radius: 8px; }

@media (min-width: 768px) {
  .b-body__t { font-size: 16px; }
  .b-body__f { margin-top: 30px; }
}

/* ==========================================================================
   ボタンを並べるブロック
   button-wrap 自体の見た目は components.css。
   ここでは「並び」だけを決める（1列 / 2列）。
   ========================================================================== */
.b-btns__l { display: grid; gap: 12px; justify-items: center; }
.b-btns__l > li { width: 100%; max-width: 420px; }

@media (min-width: 768px) {
  /* Figma: 2 列は 420px×2、間 20px（x290-710 / 730-1150） */
  .b-btns__l { gap: 20px; }
  .b-btns.is-c2 .b-btns__l { grid-template-columns: repeat(2, 420px); justify-content: center; }
}

/* 02 の導線ボタンだけ Figma SP 実測で間隔 15px（Link1 内 2001:6140→6146 の gap=15 /
   Link1→Link2 2001:6130→6132 の gap=15。PC は既定の 20px/80px のままで一致済み）。
   共通の b-btns__l（12px）/ b-gap-md（40px、他ページでも使用）は他ページに
   波及するため触らず .is-about で限定する。 */
@media (max-width: 767px) {
  .b-btns.is-about .b-btns__l { gap: 15px; }
  .b-btns.is-about.b-gap-md { padding-top: 15px; }
}

/* ボタン（小）（Basicparts4-1）はテキスト中央のみ。c-btnPill を流用 */

/* 幅の広い特殊ボタン（11 の「ENN 個人情報保護方針」）
   通常ボタンは min-width で持たせ、このボタンだけ内容に応じて広がる。 */
/* ENN ボタンだけ幅が違う（設計書）。Figma 実測 PC 500×80 / SP 305×60。
   リード文からの間隔も専用（PC 92 / SP 60）なのでブロック自身に持たせる */
.b-btns:has(.is-wide) { padding-top: 60px; }

@media (min-width: 768px) { .b-btns:has(.is-wide) { padding-top: 92px; } }

/* SP は標準ボタンと同じ 305×60（Figma 実測）。幅が違うのは PC だけ */
.button-wrap.is-wide { margin-inline: auto; }

@media (min-width: 768px) {
  /* Figma 実測 500×80。矢印は他のボタンと同じ 30px・右 20 */
  .button-wrap.is-wide { width: fit-content; max-width: 100%; }
  .button-wrap.is-wide a { min-width: 500px; min-height: 80px; padding-inline: 60px 80px; justify-content: center; }
}

/* ==========================================================================
   HTML 流し込みパーツ（青エリア）の受け皿
   CMS で自由な HTML が入る。中で何が来ても外へ影響させない。
   ========================================================================== */
.b-html { overflow-wrap: break-word; }
.b-html img { max-width: 100%; height: auto; }
.b-html table { max-width: 100%; }

/* ==========================================================================
   p-serviceMv / サービス 3 ページ（05・06・07）の上部ビジュアル
   設計書では「HTML 流し込み」＝青エリア。
   下層ページ上部大見出しの代わりにここが h1 になる。
   色はブロック自身の class（is-peace / is-kankojin / is-program）で切替。
   ========================================================================== */
.p-serviceMv {
  padding-top: 130px;
  padding-bottom: 30px;
  text-align: center;
}

.p-serviceMv__lead {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.p-serviceMv__t {
  margin-top: 10px;
  font-family: var(--ff-en);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--c-peace);
}

.p-serviceMv__q {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.p-serviceMv.is-kankojin .p-serviceMv__t { font-family: var(--ff-base); color: var(--c-kankojin); }
.p-serviceMv.is-program  .p-serviceMv__t { color: var(--c-program); }

@media (min-width: 768px) {
  .p-serviceMv { padding-top: 210px; padding-bottom: 40px; }
  .p-serviceMv__lead { font-size: 16px; }
  .p-serviceMv__t { margin-top: 14px; font-size: 76px; }
  .p-serviceMv__q { margin-top: 20px; font-size: 20px; }
}

/* ==========================================================================
   c-form / お問い合わせフォーム（10・HTML 流し込み）
   CMS 側の埋め込みフォームに置き換わる想定だが、置き換わるまでの
   見た目と、置き換え後も効く汎用セレクタで組む。
   ========================================================================== */
/* Figma 実測（10）
   PC: 白箱 980×1180・内側 左右 40 / 上 63 / 下 62。表は 900 幅で行 66
       （ラベル列 307・左 11・文字 16px 行23 / 入力 高さ 44 が上 11）。
       行は地 #f9f9f9・枠 1px #e0e0e0 を重ねて積む。送信 250×50 #ea635a が表の 60 下。
   SP: 白箱 335×1922・内側 左右 13 / 上 40 / 下 40。表は 310 幅で行 112
       （ラベル 12px 行17 が上 11 / 入力 290×41 が上 50）。送信 240×45 が表の 40 下。
   上余白はブロック自身が持つ（前のブロックに依存しない）。 */
.b-html:has(.c-form) { padding-top: 10px; }

.c-form__lead-note {
  margin-top: 80px;
  font-size: 12px;
  line-height: 32px;
  text-align: right;
}

.c-form__box {
  padding: 40px 12px 40px 13px;
  border-radius: 12px;
  background: var(--c-white);
}

/* 行は上枠だけ持たせて積む（Figma は行どうしが接していて境界線は 1px）。
   最後の行にだけ下枠を足す。 */
/* Figma は行が「奇数 #f9f9f9 / 偶数 #ffffff」の交互（行1 bg-[#f9f9f9] / 行2・行10 bg-white）。
   実装は全行 #f9f9f9 でゼブラが消えていた。
   :nth-child は装飾のみで、レイアウトには使っていない（§5-3 は「レイアウト目的で使わない」）。
   CMS で行が増減しても「奇数=薄グレー」の規則が保たれるので破綻しない。 */
.c-form__row {
  display: grid;
  padding: 10px 9px 21px;
  border: 1px solid #c8c8c8;
  border-bottom: 0;
  background: var(--c-white);
}

.c-form__row:nth-child(odd) { background: #f9f9f9; }

/* SP の 1・2 行目（姓名／セイメイ）は Figma 205。共通の下 padding 21 だと 207 になる。
   郵便番号の行も .c-form__pair を持つので is-zip を除外して当てる。 */
@media (max-width: 767px) {
  .c-form__row:has(.c-form__pair:not(.is-zip)) { padding-bottom: 19px; }
}

.c-form__row:last-child { border-bottom: 1px solid #c8c8c8; }

/* Figma のラベルは #51565a / Medium(500)。#692c1a の SemiBold ではない */
.c-form__label { margin-bottom: 22px; font-size: 12px; font-weight: 500; line-height: 17px; color: #51565a; }

/* 補助ラベル（姓：名：）・注記は #787878 */
.c-form__pair label,
.c-form__note,
.c-form__dash { color: #787878; }

/* 注記の「*」は Figma で Floral Red */
.c-form__mark { color: #ea635a; }
.c-form__req { color: #c80000; }

.c-form__field { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; }

.c-form__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.c-form__pair label { font-size: 12px; line-height: 17px; }
/* SP は 姓：→入力→名：→入力 の縦積み。2 つ目のラベルの前だけ間隔が広い */
.c-form__pair label:nth-of-type(2) { margin-top: 8px; }
.c-form__pair.is-zip { flex-wrap: nowrap; gap: 0; }
.c-form__dash { width: 10px; text-align: center; font-size: 12px; }

.c-form input[type="text"],
.c-form input[type="email"],
.c-form select,
.c-form textarea {
  box-sizing: border-box;
  height: 41px;
  padding: 0 10px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: var(--c-white);
}

/* SP は行幅いっぱい（290）。ラベル付きペアと郵便番号だけ 2 分割 */
.c-form__field > input,
.c-form__field > select { width: 100%; }
.c-form__pair { width: 100%; }
.c-form__pair > input { width: 100%; }
.c-form__pair.is-zip > input { width: 140px; }
.c-form textarea { width: 100%; height: 110px; padding: 10px; }

.c-form__note { font-size: 12px; line-height: 17px; }
.c-form__check { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; }
.c-form__check input { width: 12px; height: 12px; margin: 0; }

.c-form__submit { margin-top: 40px; text-align: center; }

/* Figma 2001:13910 ＝ 22px / 行ボックス 32 / 角丸 5 */
.c-form__submit button {
  width: 240px;
  height: 45px;
  border-radius: 5px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  color: var(--c-white);
  background: #ea635a;
}

@media (min-width: 768px) {
  .b-html:has(.c-form) { padding-top: 15px; }
  .c-form__lead-note { margin-top: 30px; font-size: 14px; }

  .c-form__box { padding: 63px 40px 62px; border-radius: 16px; }
  /* ラベル列 307 は行の外枠から測った値。枠 1 + padding 11 を引いて 295 にすると
     入力欄の左端が Figma の 307 に乗る */
  .c-form__row {
    grid-template-columns: 295px 1fr;
    align-items: start;
    padding: 10px 11px 11px;
  }
  /* Figma 実測の行高: 標準 66・メール 98・同意 47・内容 140 */
  .c-form__row:has(input[type="email"]) { padding-block: 13px 15px; }
  .c-form__row:has(.c-form__check) { padding-block: 11px 12px; }
  .c-form__row:has(textarea) { padding-bottom: 15px; }
  .c-form__label { margin-bottom: 0; padding-top: 2px; font-size: 16px; line-height: 23px; }
  .c-form__field { gap: 8px 4px; }
  /* PC は 1 行に収める（768〜1000px では入力欄が縮んで折り返さない）*/
  .c-form__pair { width: auto; flex-wrap: nowrap; padding-left: 13px; gap: 8px 4px; }
  .c-form__pair label { flex: none; }
  .c-form__pair label { font-size: 12px; }
  .c-form__pair label:nth-of-type(2) { margin-top: 0; margin-left: 20px; }

  .c-form input[type="text"],
  .c-form input[type="email"],
  .c-form select { height: 44px; }
  .c-form__field > input,
  .c-form__field > select,
  .c-form__pair > input { width: var(--fw, 352px); }
  .c-form__pair.is-zip > input { width: var(--fw, 56px); }
  .c-form__pair.is-zip > input + .c-form__dash + input { width: 64px; }
  .c-form textarea { width: var(--fw, 548px); height: 113px; }

  .c-form__check { font-size: 16px; line-height: 23px; }
  .c-form__submit { margin-top: 60px; }
  .c-form__submit button { width: 250px; height: 50px; }
}

/* ==========================================================================
   b-ratio / 社会課題割合（Basicparts15-1）
   数値・国名がすべて CMS 編集可能フィールドのため画像にせず HTML で組む。
   ※幅の割合はデザイン通り（6/29MTG）: PC は 260/260/326 の 3 列
   ========================================================================== */
/* Figma 実測: 白箱は PC 980×230 / SP 335×600（中身が減っても箱は縮まない）*/
/* Figma get_design_context(2001:7025 SP / 7228 以降 PC) で実測。
   数字（50/35px）は PC・SP で共通だが、ラベルは SP16px / PC20px と級数が違う。
   角丸は Rectangle 58 の実測 20px（旧 14 は誤り）。
   padding-top は SP 実測 32px（1 項目目の数字上端がここに来る）。 */
.b-ratio__box {
  min-height: 600px;
  padding: 32px 25px 20px;
  border-radius: 20px;
  background: var(--c-white);
}

/* SP は縦積み（Figma 実測ピッチ 152 ＝ 項目高 132 ＋ gap 20）。
   PC は 1 行 3 列なので gap は列間だけに効く（28px、下の PC ブロックで明示）。 */
.b-ratio__l { display: grid; gap: 20px; }

/* Figma は label top(24) と pct top(21) がほぼ揃っており、天地中央寄せではなく
   ほぼ天端揃え（両者ともフォントのアセント差ぶんだけ数 px ずれる）。 */
.b-ratio__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

/* SP は get_design_context(2001:7028) 実測 16px、PC は 2001:7228 実測 20px。
   number(50px)とは異なりラベルは PC/SP で級数が違う。 */
.b-ratio__label {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

/* 「※1」「※2」の注記番号。SP 実測 10.32px（0.645em）/ PC 実測 12.9px（0.645em・比率は同じ） */
.b-ratio__label small { font-size: 0.645em; }

/* Figma はレシオ数字を Inter Bold ではなく Noto Sans JP SemiBold で組んでいる
   （--ff-en を指定すると欧文フォールバックの Inter に流れてしまっていた）。 */
.b-ratio__pct {
  font-size: 50px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.b-ratio__pct small { font-size: 35px; }

/* Figma 2001:7229 ＝ 14px Medium・行ボックス 22 */
.b-ratio__countries {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 4px 30px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(105, 44, 26, .5);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* Figma 2001:7027 ＝ Regular(400) 10px・行ボックス 17。不透明度の指定は無い */
.b-ratio__note {
  margin-top: 18px;
  font-size: 10px;
  font-weight: 400;
  line-height: 17px;
}

@media (min-width: 768px) {
  .b-ratio__box { min-height: 230px; padding: 24px 40px 20px; }
  /* デザイン通りの列幅比（260 : 260 : 326） */
  .b-ratio__l { grid-template-columns: 260fr 260fr 326fr; gap: 28px; }
  .b-ratio__label { font-size: 20px; }
}

/* ==========================================================================
   b-area / エリアコーディネーター（Basicparts16-1）
   Figma: 04_マイリブ・コミュニティ  PC 2001:7857 / SP 2001:7722

   構造（Figma PC 実測・コンテンツ幅 980 基準）
     帯画像 Group816      978×79   y1766-1845   ← 飾り。画像1枚（リンクなし）
     屋根   Polygon 4     937×96.75 y1789-1885.8 白70%・箱の上端に接地
     箱     Rectangle 90  978×580  y1886-2466   #fef3e3 / r20
     セル   Group 9xx     300×150（白カード 300×135 r5 ＋ ラベルピル h32）
   ========================================================================== */
/* 帯画像は屋根の三角より前面に置く（Figma でも Group816 が Polygon4 より上） */
.b-area__head { position: relative; z-index: 1; margin-bottom: 42px; }
.b-area__head img { display: block; width: 100%; }

.b-area__box {
  position: relative;
  /* Figma SP 実測: 箱 y1961-2371 / 1行目ラベル上端 1986（上25）
     最終行下端 2337（下34）／セル x35・右端 340（左右15） */
  padding: 25px 15px 34px;
  border-radius: 20px;
  background: var(--c-bg-cream);           /* Figma 2001:7861 / 2001:7735 = #fef3e3 */
}

/* 屋根（Figma Polygon 4）。白 70% の三角形が箱の上端にぴたりと接地し、
   頂点側は帯画像の裏に潜り込む。SP 297.8/335=88.9% / PC 937/978=95.81%。
   高さはどちらも 96.75px（Polygon 4 h129 の 3/4）。 */
.b-area__box::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  width: 88.9%;
  height: 96.75px;
  background: rgba(255, 255, 255, .7);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* 件数の増減（VcContents 繰り返し）に耐えるよう grid 固定列をやめ、
   最終行中央寄せの flex にする（AD監査 M-5。b-award と同じ方針）。
   幅指定が > * なのは、編集画面でブロックごとに <div> が挟まるため（A-6） */
.b-area__l {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Figma 実測: セル 150×76.5・列 x35/190（列間5）・行ピッチ 91.6（行間 15.1） */
  gap: 15px 5px;
}

.b-area__l > * { width: calc((100% - 5px) / 2); }

/* セル画像（area-0X-*.png）には「ラベルピル＋ロゴ」だけが入っており、
   白カードは含まれていない（書き出し時に Rectangle 111 が抜けている）。
   箱が #fef3e3 になったので、白カードは CSS で敷く。
   画像はグループ全体 300×150 なので、白カードは上から 15/150 の位置。 */
.b-area__l li { position: relative; list-style: none; }
.b-area__l li a { position: relative; display: block; }   /* ::before の白カードより上に（AD監査 M-6） */
.b-area__l li::before {
  content: "";
  position: absolute;
  inset: 11.9% 0 0;              /* SP: 9.1 / 76.5 */
  border-radius: 2.5px;          /* Figma 2001:7742 */
  background: var(--c-white);
}
.b-area__l img { position: relative; display: block; width: 100%; }

@media (min-width: 768px) {
  /* Figma PC 実測: 帯下端 1845 → 箱上端 1886（41）／
     箱 y1886-2466・1行目ラベル上端 1926（上40）・最終行下端 2416（下50）
     左右は 28/30 だが 1fr 配置のため 30 で揃える */
  .b-area__head { margin-bottom: 41px; }
  .b-area__box { padding: 40px 30px 50px; }
  .b-area__box::before { width: 95.81%; }
  .b-area__l { gap: 20px 10px; }
  .b-area__l > * { width: calc((100% - 20px) / 3); }
  .b-area__l li::before { inset: 10% 0 0; border-radius: 5px; }   /* Figma 2001:7877 */
}

/* ==========================================================================
   b-impact / コレクティブインパクト（Basicparts17-1）
   Figma: 04_マイリブ・コミュニティ  PC 2001:7953 / SP 2001:7671

   cap トリム換算: Figma の text-box-trim ノードは「行ボックス上端 → cap 上端」が
   font-size × 0.43625（32px で 13.96px 実測）。line-height:normal は 1.448em。
   ========================================================================== */
.b-impact__oval {
  position: relative;
  height: 818px;
  padding: 40px 24px 30px;
  border-radius: 50%;                 /* Figma Ellipse 60 = 真楕円（SP 600×818 / PC 980×640）*/
  background: var(--c-white);
}

@media (max-width: 767px) {
  /* Figma SP: Ellipse60 x=-112（600 を 375 中央に置くと -112.5・差 0.5）。
     円・吹き出しは厳密に中央、ピルのみ x66（中央 62.5 と +3.5 差）だが
     円・吹き出し基準で中央寄せを正とする（AD監査 m-3 で確定） */
  .b-impact__oval { width: 600px; max-width: none; margin-inline: calc((100% - 600px) / 2); }
}

/* 円 → プログラム満足度 の引き出し線（Figma Vector 19 / 2001:7970・PC のみ。
   SP の Figma には存在しない）。線の先端は円の下に潜り込むので円を上に重ねる。 */
.b-impact__leader { position: absolute; }

.b-impact__main { display: grid; gap: 29.75px; justify-items: center; }

/* 左：プログラム参加者（赤い円 Figma Ellipse 10 = #ea635a） */
.b-impact__circle {
  position: relative;
  z-index: 1;                          /* 引き出し線より前面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 251.25px;                     /* Figma SP 2001:7676 */
  height: 251.25px;
  border-radius: 50%;
  color: var(--c-white);
  text-align: center;
  background: var(--c-floral-red);
  /* Figma SP は天地中央ではなく上寄り（円上端→アイコン 37.5 / ※行下端→円下端 17.25）。
     justify-content:center のままシフトさせるため padding-top は差分 20.25 の 2 倍 */
  padding-top: 20.25px;
}

.b-impact__circle img { width: 34.43px; height: auto; }   /* Figma SP Group920 34.43×30 */

/* Figma SP 2001:7677 = 96×18 → 12px / 行 18 */
.b-impact__cLabel { margin-top: 6px; font-size: 12px; font-weight: 500; line-height: 18px; }

/* Figma SP 2001:7680 = 182×70（cap トリム）→ 48px。Noto Sans JP SemiBold */
.b-impact__num { margin-top: -0.75px; font-size: 48px; font-weight: 500; line-height: normal; }
.b-impact__num small { font-size: 18px; font-weight: 700; }

.b-impact__sub { margin-top: 7.5px; font-size: 12px; font-weight: 500; line-height: 18px; }
/* 873 は行より大きい級数（SP 21 / PC 28）。行ボックスが伸びて下段がずれるため
   Figma のテキスト枠と同じ高さに固定する（Figma も 21px の字を h18 の枠に置いている） */
.b-impact__sub .is-total { display: block; height: 18px; margin-top: 4.5px; font-size: 13.5px; }
.b-impact__sub .is-num { font-size: 21px; line-height: 18px; }
/* ※注記: Figma 2001:7978/7683 実測 Medium(500)・純白（opacity 指定なし。旧 .9 は創作＝AD監査 M-4） */
.b-impact__sub small { display: block; margin-top: 7.5px; font-size: 9px; font-weight: 500; line-height: 18px; }

/* 右：プログラム満足度
   円下端 3011.25 → sLabel cap 上端 3041 ＝ 29.75（__main の gap）。
   gap は箱基準なので cap オフセット 21×0.43625=9.16 を戻す。 */
.b-impact__score { text-align: center; margin-top: -9.16px; }

/* Figma SP 2001:7694 = 160×15 → 21px */
.b-impact__sLabel { font-size: 21px; font-weight: 500; line-height: normal; }

/* Figma SP 2001:7695 = 139×49（cap トリム）→ 67.5px。
   sLabel cap 上端 3041 → pct cap 上端 3071 ＝ 30。
   素の間隔 = 行箱21×1.448(30.41) − cap9.16 + cap29.45 = 50.70 なので 30−50.70 = −20.70 */
.b-impact__pct {
  position: relative;
  font-size: 67.5px;
  font-weight: 500;
  line-height: normal;
  margin-top: -20.70px;
}

.b-impact__pct small { font-size: 30px; }

/* 下線（Figma Line 72 / 2001:7693）: #F3BA42・太さ4・丸端・SP 幅 170.25。
   旧実装は 3px #e3c14b の border-bottom で、色も太さも幅も違っていた。
   pct 箱の下端 3139.29 − 線の下端 3134 = 5.29px 上に置く。 */
.b-impact__pct::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5.29px;
  translate: -50% 0;
  width: 170.25px;
  height: 4px;
  border-radius: 2px;
  background: #f3ba42;
}

/* 注釈（Figma 2001:7691）: 12px / 行 24 の 2 行。
   🔴 Figma に囲み罫は無い。旧実装の破線ボックスは実装側の創作だったため撤去。
   線の下端 3134 → 注釈上端 3148 ＝ pct 箱下端からは 8.71px */
.b-impact__note {
  margin-top: 8.71px;
  font-size: 12px;
  line-height: 24px;
}

/* 下段の 3 ピル（Figma Group 921/922/923）
   250×60・角丸 7・アイコン付き。色は 緑 / 緑 / 橙。
   レイアウトは「アイコン(左20px中央) ＋ ラベル(左36px) … 数値 ＋ 単位(右14px)」。
   旧実装は 完全丸・赤/緑/橙・アイコン無し・中央寄せ・級数違いで全面的に誤っていた。 */
.b-impact__pills {
  display: grid;
  grid-template-columns: 250px;
  justify-content: center;
  gap: 11px;
  margin-top: 21px;                     /* Figma SP: 注釈下端 3196 → ピル上端 3217 */
}

.b-impact__pills > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 14px 0 36px;
  border-radius: 7px;                  /* Figma Rectangle 65/66/67 */
  color: var(--c-white);
  background: var(--c-floral-green);
}

.b-impact__pills > li:nth-child(3) { background: var(--c-floral-orange); }

/* アイコンは左端から 20px の位置に中央合わせ（person 14×30 / building 18×27 で
   左オフセットが 13 / 11 と異なるが、どちらも中心は 20） */
.b-impact__pills > li img { position: absolute; left: 20px; top: 50%; width: 14px; translate: -50% -50%; }
.b-impact__pills > li:nth-child(3) img { width: 18px; }   /* building 18×27 */

.b-impact__pills .is-label { font-size: 16px; font-weight: 500; line-height: 20px; text-align: left; }
.b-impact__pills .is-num { margin-left: auto; font-size: 34px; font-weight: 500; line-height: 24px; }
.b-impact__pills .is-unit { width: 20px; margin-left: 2px; font-size: 20px; font-weight: 500; line-height: 24px; text-align: center; }

/* 楕円の下の黄色い吹き出し（Figma Union 2001:7715 = Ellipse 9・真円楕円・#F3BA41）。
   旧実装は不定形 blob の border-radius ＋ #f5c332 で形も色も違っていた。
   文字は Figma 2001:7717 実測 SP 27px / 行 34.5（PC 36px / 行 46）・SemiBold。
   楕円基準の absolute（フローに入れると楕円の高さが伸びる）。 */
.b-impact__banner {
  position: absolute;
  top: 740px;                          /* Figma SP: banner y3460 − 楕円上端 2720 = 740（AD監査 m-1） */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 272px;
  height: 128px;
  border-radius: 50%;
  font-size: 27px;
  font-weight: 500;
  line-height: 34.5px;
  text-align: center;
  color: var(--c-brown);
  background: var(--c-floral-yellow);
}

@media (min-width: 768px) {
  /* Figma: 楕円 980×640 固定（Ellipse60 2001:7960）。.b-inner の残り幅に任せると
     768–1019px 帯で右カラムが痩せて崩壊する（AD監査 C-1）ため SP と同じ
     固定幅＋中央寄せ方式にする。1020px 未満は .l-page の overflow:hidden で
     左右対称にクロップされる。円 336 は x412、oval 左端 230 → padding-left 182 */
  .b-impact__oval {
    width: 980px;
    max-width: none;
    margin-inline: calc((100% - 980px) / 2);
    height: 640px;
    padding: 59px 182px 40px;
  }

  /* 引き出し線 Vector 19: x702.5 y2944 / 321.25×37.02（oval 基準 left 472.5 / top 113） */
  .b-impact__leader { left: 472.5px; top: 113px; width: 321.25px; height: 37.02px; }

  .b-impact__circle { width: 336px; height: 336px; padding-top: 30px; }
  .b-impact__circle img { width: 45.91px; }
  /* Figma 実測: sLabel 2001:7967 = x797 w224（中心909）。円右端 748 →
     240px 列の左端 789 ＝ gap 41（AD監査 M-2。旧 40/1fr は出典なし）。
     Figma 側は Line72 中心 910.5 / 注釈中心 915 と ±6px 揺れており sLabel 中心 909 を正とする */
  .b-impact__main { grid-template-columns: 336px 240px; gap: 41px; align-items: center; justify-items: start; }

  /* Figma PC: アイコン下端 2984 → cLabel 2988 ＝ 4 / cLabel 行下端 3012 → num 行上端 3011 ＝ −1 */
  .b-impact__cLabel { margin-top: 4px; font-size: 16px; line-height: 24px; }
  .b-impact__num { margin-top: -1px; font-size: 64px; }
  .b-impact__num small { font-size: 24px; }
  .b-impact__sub { margin-top: 10px; font-size: 16px; line-height: 24px; }
  .b-impact__sub .is-total { height: 24px; margin-top: 6px; font-size: 18px; }
  .b-impact__sub .is-num { font-size: 28px; line-height: 24px; }
  .b-impact__sub small { margin-top: 10px; font-size: 12px; line-height: 24px; }   /* Figma: 延べ行下端 3168 → ※ 3178 */

  /* 円上端 2890 → sLabel cap 上端 2969 ＝ 79。cap オフセット 28×0.43625=12.22 を引く。
     幅は列 240px を使い切る＝注釈が長文でも列内で折り返し楕円を押し広げない（AD監査 M-3） */
  .b-impact__score { width: 100%; align-self: start; margin-top: 66.78px; }
  .b-impact__sLabel { font-size: 28px; }
  /* sLabel cap 2969 → pct cap 3009 ＝ 40。素の間隔 40.54−12.22+39.26=67.58 → −27.58 */
  .b-impact__pct { font-size: 90px; margin-top: -27.58px; }
  .b-impact__pct small { font-size: 40px; }
  /* 線 227 幅・pct 箱下端 3100.06 − 線下端 3093 = 7.06 */
  .b-impact__pct::after { width: 227px; bottom: 7.06px; }
  /* 線下端 3093 → 注釈上端 3108（pct 箱下端 3100.06 から 7.94） */
  .b-impact__note { margin-top: 7.94px; }   /* max-content は CMS 長文入力で楕円を破るため廃止（AD監査 M-3） */

  .b-impact__pills {
    grid-template-columns: repeat(3, 250px);
    justify-content: center;
    /* Figma x330/595/862（ピッチ 265/267 と不揃い）。全幅 330→1112=782 に
       3×250=750 を収めるので gap は 16 */
    gap: 16px;
    margin-top: 32px;                   /* Figma: 円下端 3226 → ピル上端 3258 */
    margin-inline: -182px;
  }

  /* Figma banner y3373 − 楕円上端 2831 = 542 */
  .b-impact__banner { width: 380px; height: 150px; top: 542px; font-size: 36px; line-height: 46px; }
}

/* ==========================================================================
   p-mv--service / サービス 3 ページ（05・06・07）のメインビジュアル
   TOP の .p-mv と同じカーテン演出:
     - position:fixed（.p-mv 本体のスタイルを継承）
     - スクロールで --mv-y ぶん上へドリフト（parallax.js）
     - 本文 .l-mainBg が幕のようにかぶさり、上端の弧が直線に戻る
   背景・ロゴはページ別 class（is-peace / is-kankojin / is-program）で切替。
   JS 無効時は完全固定＝静的表示。
   ========================================================================== */
.p-mv--service {
  /* SP は PC の一律 60% 縮小（Figma 実測: 罫線 481→288.6 / 452→271.2、
     文字 23→13.8・35→21、行ボックス 17→10・26→15 がすべて 0.6 倍）。
     ※ --s は必ず「単位なしの数」にすること。calc(100vw / 625) のように
       長さ ÷ 数 にすると結果が px になり、px × px の掛け算が無効値になって
       font-size も罫線幅もまるごと落ちる（SP が全部既定値になった） */
  --s: 0.6;
  flex-direction: column;
  gap: 0;
  text-align: center;
}

/* Figma design context 実測（3 ページ共通）
   リード = Noto Sans JP Bold 23px・行ボックス 17・トラッキング 0・改行なし
   問い   = Noto Sans JP Bold 35px・行ボックス 26・トラッキング 0・改行なし
   トラッキング 0 の根拠: 23×17字=391 / 23×16字=368 / 35×13字=455 /
   35×14字=490 / 35×15字=523 がすべてノード幅と完全一致する */
.p-mv--service .p-mv__svLead {
  font-size: calc(23px * var(--s));
  font-weight: 700;
  line-height: calc(17px * var(--s));
  white-space: nowrap;
}

.p-mv--service .p-mv__svLogo {
  width: calc(var(--mv-logo-w) * var(--s));
  max-width: 100%;
  margin: calc(var(--mv-lead-logo) * var(--s)) auto 0;
}
.p-mv--service .p-mv__svLogo img { width: 100%; height: auto; }

.p-mv--service .p-mv__svQ {
  position: relative;
  margin-top: calc(var(--mv-logo-line) * var(--s));
  padding-top: calc(var(--mv-line-q) * var(--s));
  font-size: calc(35px * var(--s));
  font-weight: 700;
  line-height: calc(26px * var(--s));
  white-space: nowrap;
}

/* 罫線の幅は問いの文字幅と無関係な固定値（Figma: 05/06 481・07 452 に対し
   問いは 523 / 455 / 490）。テキスト側に max-width を掛けると 05 と 07 が
   罫線幅で折り返してしまうため、罫線は擬似要素で独立して描く */
.p-mv--service .p-mv__svQ::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--mv-line-w) * var(--s));
  border-top: 1px solid currentColor;
  transform: translateX(-50%);
}

/* ページ別（Figma PC 実測。y は行ボックス上端なので間隔もそのまま使える）
   05: リード y269 h17 / ロゴ y329 418×173 / 罫線 y536 w481 / 問い y570
   06: リード y220 h17 / ロゴ y274 411×267 / 罫線 y568 w481 / 問い y602
   07: リード y220 h17 / ロゴ y205 589×411 / 罫線 y578 w452 / 問い y602
   07 だけ間隔が負なのは、ロゴが発光を含む 589×411 の箱で、
   リードの下と罫線の上に食い込んでいるため（デザインどおり） */
.p-mv--service.is-peace {
  --mv-logo-w: 418px;
  --mv-lead-logo: 43px;
  --mv-logo-line: 34px;
  --mv-line-q: 34px;
  --mv-line-w: 481px;
  color: var(--c-peace);
  background-image: url("../img/pd-mv-sp.jpg");
}

.p-mv--service.is-kankojin {
  --mv-logo-w: 411px;
  --mv-lead-logo: 37px;
  --mv-logo-line: 27px;
  --mv-line-q: 34px;
  --mv-line-w: 481px;
  color: var(--c-kankojin);
  background-image: url("../img/kq-mv-sp.jpg");
}

.p-mv--service.is-program {
  --mv-logo-w: 589px;
  --mv-lead-logo: -32px;
  --mv-logo-line: -38px;
  --mv-line-q: 24px;
  --mv-line-w: 452px;
  color: var(--c-program);
  background-image: url("../img/mlp-mv-sp.jpg");
}

@media (min-width: 768px) {
  .p-mv--service { --s: 1; }
  .p-mv--service.is-peace    { background-image: url("../img/pd-mv-pc.jpg"); }
  .p-mv--service.is-kankojin { background-image: url("../img/kq-mv-pc.jpg"); }
  .p-mv--service.is-program  { background-image: url("../img/mlp-mv-pc.jpg"); }
}

/* ==========================================================================
   b-circleMsg / 02 私たちについて の円ブロック（Basicparts13-1）
   TOP の About と同じく円は CSS・人物は icon-walk.svg。
   本文は設計書どおりテキストパーツ＝CMS で編集できる。
   ========================================================================== */
.b-circleMsg {
  /* Figma: Ellipse 1 = 1130×1130。コンテンツ幅 980 を超えるため
     .b-inner の制約を受けないよう自前で最大幅を持つ */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 700px;
  margin-inline: auto;
  /* Figma（PC 円 2001:6706 y570 h1130／本文 2001:6707 y820 h740）では本文は
     円の天地中央ではなく、中心より 55px 下に置かれる（上 250 / 下 140）。
     人物イラストの下端から見出しの天までを 84px 空けるための位置。
     上下 padding の差 110px ＝ 中心からのずれ 55px。行数が増減しても
     ずれ量は変わらない（＝ CMS で文字が増えても対称に伸びる）。 */
  padding: calc(12% + 55px) 10% calc(12% - 55px);
  border-radius: 50%;
  background: var(--c-white);
}

/* 人物は円の上端から 83px はみ出す（Figma: Group768 y487 / 円 y570）。
   その高さをブロック側で確保しておく（負 margin で円だけ上に戻す）。 */
.b-circleMsg { margin-top: 83px; }

/* 人物イラスト（Group768）は円の中心よりわずかに右に置かれている
   （Figma PC: 円 2001:6706 x154 w1130 中心719 ／ Group768 2001:6713 x627.79
   w193.42 中心724.5・差 +5.5px）。従来は left:50%+translateX(-50%) で
   円と完全に中心を揃えていたため、その分だけ左に寄って見えていた。 */
.b-circleMsg__walk {
  position: absolute;
  top: -83px;
  left: 50%;
  width: 193px;
  transform: translateX(calc(-50% + 5.5px));
}

@media (max-width: 767px) {
  /* SP の Figma: 円 700×700（画面幅を左右にはみ出す）/ 人物 101×130・はみ出し 37px
     はみ出しは .l-page の overflow:hidden で切れる。
     本文は円の中心より 26px 下（Figma 円 2001:6391 y404 h700／
     本文 2001:6410 y539.9 h480 = 上 135.9 / 下 84.1）。
     上下 padding の合計は 120px のままにして、差 52px でずらす。
     人物の左右も PC と同様に円中心から +2.5px（Figma 円 2001:6391 x-162 w700
     中心188 ／ Group768 2001:6392 x140 w100.99 中心190.49・差 +2.49px）。 */
  .b-circleMsg {
    width: 700px;
    max-width: none;
    margin-top: 37px;
    margin-inline: calc((100% - 700px) / 2);
    padding: 86px 180px 34px;
  }
  .b-circleMsg__walk { top: -37px; width: 101px; transform: translateX(calc(-50% + 2.5px)); }
}

/* Figma 2001:6410（SP）: Noto Sans JP Medium(500) / 18px / 行ボックス 36 /
   段落間 12。見出し（.is-strong）と本文で級数・ウェイトの差は無い。 */
.b-circleMsg__body {
  display: grid;
  gap: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

@media (min-width: 768px) {
  /* Figma: Ellipse 1 = 1130×1130。
     本文 2001:6707 は Medium(500) / 28px / 行ボックス 55 / 段落間 20。
     980 の内側ラッパを突き抜けるため負 margin で広げる */
  .b-circleMsg { width: 1130px; max-width: none; margin-inline: calc((100% - 1130px) / 2); }
  .b-circleMsg__body { font-size: 28px; line-height: 50px; gap: 20px; }
}

/* MLW アイコン内の英字ラベル（Figma: ブロブ中央に白文字） */
.b-way__icon { position: relative; }

/* 花びら内の Purpose / Mission / Value。
   Figma はアイコンの外形中心ではなく「花びらの塊の重心」に置いてあるため、
   3 枚とも中心から少し下にずれる（実測 +15.98 / +14.4 / +8.0px）。
   中央固定にすると花びらの形ごとに重心とズレて落ち着かない見え方になる。
   行ごとの補正値は下の nth-child で渡す。 */
.b-way__en {
  position: absolute;
  top: calc(50% + var(--en-dy, 0px));
  left: calc(50% + var(--en-dx, 0px));
  transform: translate(-50%, -50%);
  font-family: var(--ff-en);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-white);
}

@media (min-width: 768px) { .b-way__en { font-size: 20px; } }

/* About 円の左右に重なる花びら（Figma: About フレーム内の 2 枚。
   円基準の絶対配置。petals-common には含まれないためここで持つ） */
.b-circleMsg::before,
.b-circleMsg::after {
  content: "";
  position: absolute;
  background: no-repeat center / contain;
  pointer-events: none;
}

/* petal_red2: 円左端の外側（Figma x308,y1043 → 円基準 154,473） */
.b-circleMsg::before {
  left: 154px;
  top: 473px;
  width: 260px;
  height: 235px;
  margin-left: -260px;
  background-image: url("../img/petal/petal-red2.png");
}

/* petal_green: 円の右下（Figma x1082,y1422 → 円基準 928,852） */
.b-circleMsg::after {
  left: 928px;
  top: 852px;
  width: 286px;
  height: 282px;
  background-image: url("../img/petal/petal-green.png");
}

@media (max-width: 767px) {
  .b-circleMsg::before { left: 8%; top: 42%; width: 24vw; height: 22vw; margin-left: -18vw; }
  .b-circleMsg::after  { left: 82%; top: 74%; width: 26vw; height: 26vw; }
}

/* ==========================================================================
   07 MY LIV PROGRAM 固有のブロック（Figma 実測）
   ========================================================================== */

/* 「なぜ鹿児島なのか」= 直径 1000 の白い円の中にリード+本文（Figma 2001:11034）
   PC/SP とも円は 1000×1000。SP は左右がはみ出し、中央 375px だけが見える。
   色は Figma 実測: リード・下線 #0ca490 / 本文 黒 */
.b-circleText { overflow: hidden; }

.b-circleText__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1000px;
  aspect-ratio: 1 / 1;
  margin-left: calc(50% - 500px);
  border-radius: 50%;
  padding: 0 332px;
  text-align: center;
  background: var(--c-white);
}

.b-circleText__leads { display: block; text-align: center; margin-bottom: 10px; }

.b-circleText__lead.is-pcOnly { display: none; }
.b-circleText__lead.is-spOnly { display: inline; }

@media (min-width: 768px) {
  .b-circleText__lead.is-pcOnly { display: inline; }
  .b-circleText__lead.is-spOnly { display: none; }
}

/* 2026-10-13 修正: リードは「行ごとに下線」が設計意図（直下の実測コメント参照）だが、
   旧実装は2行をbrで1つのspan（display:table）にまとめていたため、border-bottomが
   最終行の下にしか出ていなかった（過去スクリーンショットとの比較・実機確認で
   先祖返りと確定。vibitCMS_knowledge記載のうえ要報告）。
   display:inline + box-decoration-break:clone で、brによる行ごとのinline box
   フラグメントそれぞれにborder-bottomを複製させ、各行の文字幅に自動で一致させる。
   2026-10-14 追加修正（SP）: 旧値 padding-bottom:12px / line-height:1.5(33px) のままだと
   行ごとの箱（46px）が行送り（33px）より高く、下線が次の行の文字に重なっていた。
   PC（32px・行送り62px・padding-bottom:0）と同じ比率で、下線を文字のすぐ下に引き
   行送りを 22 × 62/32 ≒ 43px にする（下線と次の行の間 9px）。 */
.b-circleText__lead {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 0;
  border-bottom: 2px solid #0ca490;
  font-size: 22px;
  font-weight: 500;
  line-height: 43px;
  color: #0ca490;
}

.b-circleText__t {
  margin-top: 36px;
  font-size: 14px;
  line-height: 2;
  color: #000;
}

@media (min-width: 768px) {
  /* Figma 2001:11035 ＝ SemiBold 32px #0ca490・行ボックス 62 の 2 行（y3426..3550）。
     下線は Line 97（x540 w352 / y3486）・Line 96（x400 w640 / y3551）。
     線幅は Figma 書き出しのサブピクセル実測でどちらもちょうど 3.00px。
     どちらも行ボックスの底に来る＝ padding-bottom は 0。
     border-bottom 3px が行ボックスの外に付くぶん、行送りを 62 に保つため
     margin-bottom を -3 にしている（62 = 62+3-3）。
     ※ Figma 側は本文の行送りが 62 なのに下線の間隔だけ 65 になっており
       （下線 1 だけが自分の行に対して 3px 高い）、デザインデータ内で不整合。
       本文位置（62）を正として実装しているため下線間隔は 62 になる。要デザイナー確認。
     下線幅 352 / 640 は 32px × 11 字・20 字で自動的に一致する。
     本文は Figma 2001:11036 が y3593（＝リード先頭から 167）・16px 幅 650 */
  .b-circleText__circle { padding: 0 175px; }
  /* display:inlineのためmargin-bottomは効かない（table時代の-3px補正は不要になった）。
     行送り62pxの中で padding-bottom:0・border-bottom-width:3pxがベースラインすぐ下に来る */
  .b-circleText__leads { margin-bottom: 0; }
  .b-circleText__lead { padding-bottom: 0; border-bottom-width: 3px; font-size: 32px; line-height: 62px; }
  .b-circleText__t { margin-top: 42px; font-size: 16px; line-height: 2.125; }

  /* .b-circleMsg（02）には「中身は円の天地中央ではなく中心より下」という実測補正が
     入っているが、.b-circleText（07）には無く、中身が Figma より 7px 高かった
     （実測 リード +111 / 本文 +277・Figma +118 / +285）。
     円は中身なりに伸びないので padding-top ではなく中身側を下げる。
     リード下端→本文上端も Figma は 43（実装 39）。 */
  .l-mainBg.is-program .b-circleText__leads { margin-top: 14px; }
  .l-mainBg.is-program .b-circleText__t { margin-top: 46px; }
}

/* 「薩摩会議との共創」= テーマ色の背景ボックス（Figma 2001:11024 / 780×530） */
/* Figma 実測: PC 780×530（padding 41/45/40・見出し 24px クリーム・本文 16px 白 lh2・
   写真 335×175 gap20・キャプション 14px）／SP 335×820（padding 34/28/38・1 列・
   写真 280×146・本文 14px） */
.b-greenBox__box {
  padding: 34px 28px 38px;
  border-radius: 16px;
  color: var(--c-white);
  background: #0ca490;
}

.b-greenBox__h { font-size: 20px; font-weight: 500; line-height: 1.6; color: #fef3e3; }
.b-greenBox__t { margin-top: 20px; font-size: 14px; line-height: 2; }

.b-greenBox__l {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 30px;
}

.b-greenBox__l figure { margin: 0; }
.b-greenBox__l img {
  display: block;
  width: 100%;
  aspect-ratio: 280 / 146;
  object-fit: cover;
  border-radius: 8px;
}
/* Figma 2001:11027/11028（PC 335×20）・2001:10619/10620（SP）実測:
   14px Medium・行ボックス 20・白・中央寄せ。
   「薩摩会議2025開催の様子」が 14px でちょうど 158（＝SP ノード幅）になるのが根拠 */
.b-greenBox__l figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .b-greenBox__box { padding: 41px 45px 40px; border-radius: 20px; }
  .b-greenBox__h { font-size: 24px; line-height: 1.35; }
  .b-greenBox__t { margin-top: 19px; font-size: 16px; }
  .b-greenBox__l { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 31px; }
  .b-greenBox__l img { aspect-ratio: 335 / 175; }
}

/* 「鹿児島で探究する12のテーマ」= 白箱に 地図 + 2列カード（Figma 980×720）
   カードは 193×83（SP 137.5×59 = 0.712 倍の相似形）→ cqw で 1 セット定義。
   構造: teal 枠のボックス（左上から 13,13 内側）+ 番号バッジ（左上角）+
   地名（枠上辺に白背景で重なる）+ teal ピル */
.b-themeGrid__box {
  padding: 48px 27px 39px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-themeGrid__map { margin: 0 auto; max-width: 218px; }
.b-themeGrid__map img { display: block; width: 100%; height: auto; }

.b-themeGrid__l {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 5px;
  margin-top: 58px;
}

.b-themeGrid__card {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 193 / 83;
}

/* teal 枠（Figma 2001:10862: カード 193×83 の中で 13,13 から 180×70・角丸 10）
   ※ cqw は「コンテナの幅」基準。以前は 13/83 と高さで割っていたため
     枠の上端が 13px ではなく 30px 下がり、ピルが枠からはみ出していた */
.b-themeGrid__frame {
  position: absolute;
  inset: 6.736cqw 0 0 6.736cqw;
  border: 1px solid #0ca490;
  border-radius: 5.18cqw;
}

.b-themeGrid__no {
  position: absolute;
  left: 0;
  top: 1.55cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.5cqw;
  height: 14.5cqw;
  border-radius: 50%;
  font-family: var(--ff-en);
  font-size: 8.3cqw;
  font-weight: 500;
  color: var(--c-white);
  background: #0ca490;
}

.b-themeGrid__place {
  position: absolute;
  left: 53.32%;
  top: 0;
  translate: -50% 0;
  padding-inline: 5.18cqw;
  font-size: 9.33cqw;
  font-weight: 500;
  line-height: 1.44;
  white-space: nowrap;
  color: #0ca490;
  background: var(--c-white);
}

/* Figma 2001:10868: 枠の中で y37.89（= 19.63cqw）。中心も枠の中心に合わせる */
.b-themeGrid__tag {
  position: absolute;
  left: 53.32%;
  top: 19.63cqw;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 77.72cqw;
  height: 14.47cqw;
  border-radius: 999px;
  font-size: 7.25cqw;
  font-weight: 500;
  color: var(--c-white);
  background: #0ca490;
}

@media (min-width: 768px) {
  /* Figma: 白箱 980×720 / 左 117 上 59 下 63 右 100 / 地図 293 と カード列の間 77 /
     カード 193×83 が 2 列 6 行（列間 7・行間 20） */
  .b-themeGrid__box {
    display: grid;
    grid-template-columns: 293px 1fr;
    column-gap: 77px;
    align-items: center;
    padding: 59px 100px 63px 117px;
    border-radius: 20px;
  }
  .b-themeGrid__map { max-width: 293px; }
  .b-themeGrid__l { margin-top: 0; gap: 20px 7px; }
}

/* プログラム構成のカード（Figma PC 980×870 / 980×490、SP 335×1535 / 335×860）
   文字は黒（Figma 実測）。番号バッジは PC=左辺から 35 はみ出す / SP=上辺に半がけ。
   カード間の ▼ は 64×24 #0ca490（is-hasArrow の ::before で描く） */
.b-progCard { position: relative; padding-top: 25px; }

.b-progCard__box {
  padding: 55px 28px 37px;
  border-radius: 16px;
  background: var(--c-white);
}

.b-progCard__num {
  position: absolute;
  left: 17px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-white);
  background: #0ca490;
}

/* 見出しの色は 07（2001:10812）が黒、05（2001:8746）が Peace Blue #004b90。
   ページごとに違うので --theme-strong は当てず、05 だけ上書きする
   （当てると 07 が #0ca490 になってしまう） */
.b-progCard__h {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
  color: #000;
}

.l-mainBg.is-peace .b-progCard__h { color: var(--theme-strong, #004b90); }

/* Figma 2001:8747(05)=#004b90 / 07=黒。色はテーマから継承させる（黒固定は誤り）。
   text-align は両端揃え（左揃えだと行末が不揃いになる）*/
.b-progCard__t { margin-top: 20px; font-size: 14px; line-height: 2; text-align: justify; }

.b-progCard__imgs { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 58px; }
.b-progCard__imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 280 / 173;
  object-fit: cover;
  border-radius: 8px;
}

/* Figma 実測（SP 2001:10458）: 文言は PC と同一。280 幅に 10px で 3 行・行高 17 */
/* フロー本体は 1 枚画像（指示書「6/29MTG：1枚画像でOK」）。
   Figma: カード1 PC 780 / SP 280・カード2 PC 620 / SP 280。
   本文→画像の間隔はカードごとに違う（Figma 実測）
     カード1 PC 50（6588→6638）/ SP 30（7244→7274）
     カード2 PC 30（7513→7543）/ SP 58（8823→8881） */
.b-progCard__fig { margin: 30px auto 0; }

/* CMSで登録したPC画像サイズ（width属性→ --img-w。blocks.js が付与）に準拠する。
   PC のみ。SP は据え置き（常にコンテンツ幅いっぱい）。b-img__f と同じ仕組み */
@media (min-width: 768px) {
  .b-progCard__fig { max-width: var(--img-w, none); }
}
.b-progCard__fig.is-g2 { margin-top: 58px; }
.b-progCard__fig img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .b-progCard__fig { margin-top: 50px; }
  .b-progCard__fig.is-g2 { margin-top: 30px; }
}

/* 画像→注記は SP 20 / PC 30（Figma 9237→9257 / 7728→7758） */
.b-progCard__note { margin-top: 20px; font-size: 10px; font-weight: 400; line-height: 17px; }

/* カード間の ▼（Figma 実測 64×24 #0ca490・中央）。
   b-step（Basicparts27-1）と同じ仕様: is-hasArrow を付けた li の「下」に出す
   （2026-09-01 ユーザー指示で統一。旧実装は次カード側に付けて上に出していた）。
   2026-10-14 修正: 旧実装（SP bottom:-86 / PC bottom:-44）はギャップの下寄り
   （SPは97中62地点＝64%、PCは55中20地点＝36%）になっており、クライアントから
   「矢印が下に寄りすぎている」と指摘。箱間ギャップの中央に矢印(高さ24px)が
   来るよう算出し直した: bottom = -(ギャップ/2 + 12)
   SP: 箱間 97（行間72＋次カードの逃げ25）→ bottom -60.5
   PC: 箱間 55（行間55・PC はバッジ左はみ出しで逃げ 0）→ bottom -39.5 */
.b-progCard.is-hasArrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60.5px;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-inline: 32px solid transparent;
  border-top: 24px solid #0ca490;
}

/* 左「自分について考える」／中央「問いと対話」／右「組織について考える」 */
.b-progDuo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 30px;
}

.b-progDuo__label,
.b-progPick__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--c-white);
  background: #0ca490;
}

.b-progDuo__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.b-progDuo__imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 142 / 98;
  object-fit: cover;
  border-radius: 6px;
}

/* 中央の循環矢印（Figma Group 887 の書き出し画像 + テキストを重ねる） */
.b-progDuo__center {
  position: relative;
  width: 121px;
  margin-inline: auto;
}

.b-progDuo__center img { display: block; width: 121px; height: auto; }

/* Figma text は 48×40 = 「問いと/対話」の 2 行 */
.b-progDuo__center span {
  position: absolute;
  inset: 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: #0ca490;
}

/* PICK UP CONTENTS（Figma PC 780×360 / SP 280×560。枠線は #3fa07c・タイトルは #0ca490） */
.b-progPick {
  margin-top: 40px;
  padding: 32px 6px 33px;
  border: 1px solid #3fa07c;
  border-radius: 12px;
}

.b-progPick__ttl {
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  color: #0ca490;
}

.b-progPick__label { min-height: 34px; margin-inline: 8px; font-size: 14px; }

.b-progPick__l { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 25px; }
.b-progPick__t { margin-top: 10px; font-size: 12px; line-height: 2; text-align: center; color: #000; }
.b-progPick__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.b-progPick__imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 169 / 125;
  object-fit: cover;
  border-radius: 6px;
}

@media (min-width: 768px) {
  /* Figma PC: padding 37/100/41・見出し 24px lh1.46・本文 16px lh2・
     ピル 300×50・写真 142×98・duo 間 50・PICK 上 60 */
  .b-progCard { padding-top: 0; }
  .b-progCard__box { padding: 37px 100px 41px; border-radius: 20px; }
  .b-progCard__num { left: -35px; top: 42px; width: 70px; height: 70px; font-size: 28px; }
  .b-progCard__h { font-size: 24px; line-height: 1.46; }
  .b-progCard__t { margin-top: 20px; font-size: 16px; }
  .b-progCard__imgs {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
    max-width: 620px;
    margin-inline: auto;
  }
  .b-progCard__imgs img { aspect-ratio: 300 / 185; }
  .b-progCard__note { margin-top: 30px; font-size: 10px; font-weight: 400; line-height: 17px; }

  /* 2026-10-14 修正: 箱間55pxの中央に矢印(高さ24px)を配置。
     旧値-44pxは箱下端から20の位置（ギャップの下寄り＝55の36%地点）で、
     クライアント指摘「矢印が下に寄りすぎている」と一致したため、
     ギャップ中央(27.5)±12で算出: bottom = -(55/2 + 12) = -39.5px */
  .b-progCard.is-hasArrow::after { bottom: -39.5px; }

  .b-progDuo {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 29px;
    margin-top: 50px;
  }
  .b-progDuo__imgs { gap: 16px; margin-top: 23px; }

  .b-progPick { margin-top: 60px; padding: 32px 33px; border-radius: 16px; }
  .b-progPick__ttl { font-size: 24px; }
  .b-progPick__label { font-size: 16px; }
  .b-progPick__l { grid-template-columns: repeat(2, 1fr); gap: 19px; margin-top: 26px; }
  .b-progPick__t { margin-top: 13px; font-size: 14px; }
  .b-progPick__imgs { gap: 10px; margin-top: 13px; }
}

/* --------------------------------------------------------------------------
   07 ページ固有の余白（Figma 実測。他ページに影響させないため is-program で限定）
   PC: パネル→Movie 130（他は 160）
   SP: セクション間 140 / MV→リード 80 / パネル 140 / Movie→白箱 60
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .l-mainBg.is-program .b-h1.is-gapMovie { padding-top: 130px; }
}

@media (max-width: 767px) {
  /* 05 も Figma SP 実測はセクション間 140 / MV→リード 80 / Movie→白箱 60 */
  .l-mainBg.is-peace .b-text.b-gap-sv { padding-top: 80px; }
  .l-mainBg.is-peace .b-cols.b-gap-sv { padding-top: 140px; }
  .l-mainBg.is-peace .b-whiteBox.b-gap-md { padding-top: 60px; }
  .l-mainBg.is-peace .b-html.b-gap-sm { padding-top: 30px; }

  /* 06 も 05/07 と同じ SP 間隔（Figma は全セクション 140）。
     リード→パネルだけ 168 なのは、Figma がパネルを 3 ページとも y1034 に
     固定していて、06 のリードだけ 3 行（05/07 は 4 行）で 28px 短いため。 */
  .l-mainBg.is-kankojin .b-text.b-gap-sv { padding-top: 80px; }
  .l-mainBg.is-kankojin .b-cols.b-gap-sv { padding-top: 168px; }
  .l-mainBg.is-kankojin .b-whiteBox.b-gap-md { padding-top: 60px; }
  .l-mainBg.is-kankojin .b-html.b-gap-sm { padding-top: 30px; }

  .l-mainBg.is-program .b-text.b-gap-sv { padding-top: 80px; }
  .l-mainBg.is-program .b-cols.b-gap-sv { padding-top: 140px; }
  .l-mainBg.is-program .b-whiteBox.b-gap-md { padding-top: 60px; }
  .l-mainBg.is-program .b-html.b-gap-sm { padding-top: 30px; }
  /* 07 だけ SP の声カードが 4 枚とも 340（05 は 340/280/280/280・06 は 280×4）*/
  .l-mainBg.is-program .b-voice__box { min-height: 340px; }
}

/* 2 列グリッドの行間（Figma 実測: 声 65/20・プログラム構成 55/72） */
@media (min-width: 768px) {
  .b-cols__l:has(> .b-progCard) { row-gap: 55px; }
  .l-mainBg.is-peace .b-cols__l:has(> .b-progCard) { row-gap: 40px; }
}
@media (max-width: 767px) {
  /* リード→カード1 は Figma 実測 40（Figma のグループは番号バッジ込みなので
     li の逃げ 25 を引く必要はない。05/07 共通）*/
  .b-cols.b-gap-btn:has(.b-progCard) { padding-top: 40px; }
  /* 12のテーマの白箱はリードから 40（既定の b-gap-btn SP 30 ではない）*/
  .b-themeGrid.b-gap-btn { padding-top: 40px; }
  /* 07 は番号バッジが上に 25 はみ出すぶんを含めて 72。
     05 はピルがカード内なので Figma 実測どおり 30（カード1 下端 5470 → カード2 5500）*/
  .b-cols__l:has(> .b-progCard) { row-gap: 72px; }
  .l-mainBg.is-peace .b-cols__l:has(> .b-progCard) { row-gap: 30px; }
  .b-cols__l:has(> .b-voice)    { row-gap: 20px; }
  /* Figma はパネル 2 枚とも同じ高さ（SP は 1 列でも揃える） */
  .b-cols__l:has(> .b-panel)    { grid-auto-rows: 1fr; }
}

/* ==========================================================================
   05 PEACE DIALOGUE 固有のブロック（Figma 実測）
   ※ カードの器・注記・▼ は 07 の .b-progCard を流用し、中身だけ追加している
   ========================================================================== */

/* カード右上のラベル（Figma 180×26・#ea635a。カード上端から 60・右 100） */
.b-progCard__pill {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 26px;
  margin-bottom: 10px;
  padding: 2px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-white);
  background: #ea635a;
}

/* ピル付きカードは PC だと見出しと同じ行の右端に置く */
@media (min-width: 768px) {
  .b-progCard.is-pillCard .b-progCard__box { position: relative; }
  .b-progCard.is-pillCard .b-progCard__pill {
    position: absolute;
    right: 100px;
    top: 60px;
    min-width: 180px;
    margin-bottom: 0;
  }
}

/* 手順行（Figma 580×160・#4778ac。アイコン 27 / 見出し 107 / 写真 344 の位置） */
.b-tourStep { display: grid; gap: 30px; margin-top: 30px; }

.b-tourStep > li {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
  background: #4778ac;
}

/* 行間の ▼（Figma 実測 62×23・#ea635a・中央） */
.b-tourStep > li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -27px;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-inline: 31px solid transparent;
  border-top: 23px solid #ea635a;
}

.b-tourStep__icon { display: block; margin-inline: auto; }   /* 実寸は HTML の width/height 属性 */
.b-tourStep__h { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--c-white); }
.b-tourStep__t { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--c-white); }

.b-tourStep__photo {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  aspect-ratio: 222 / 125;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 768px) {
  /* Figma: 行 580×160・行間 55（▼ を含む）／写真 222×125 は右に寄る */
  /* Figma 実測: 行 580×160・左 27 / アイコン列 60 / 本文列 237（左 20 空け）/
     写真 222 / 右 14。行間 55（うち ▼ 23） */
  .b-tourStep { gap: 55px; margin-top: 40px; max-width: 580px; margin-inline: auto; }
  .b-tourStep > li {
    grid-template-columns: 60px 257px 222px;
    gap: 0;
    min-height: 160px;
    padding: 0 14px 0 27px;
    border-radius: 16px;
  }
  .b-tourStep > li + li::before { top: -39px; }
  .b-tourStep__icon { margin-inline: auto; }
  .b-tourStep__body { padding-left: 20px; }
  .b-tourStep__h { font-size: 24px; line-height: 1.33; }
  .b-tourStep__t { margin-top: 13px; font-size: 16px; line-height: 1.63; }
  .b-tourStep__photo { grid-column: auto; align-self: center; }
}

/* ワークショップの 2 パネル（Figma 380×380・#4778ac） */
.b-wsPanel { display: grid; gap: 20px; margin-top: 30px; }

.b-wsPanel > li {
  padding: 24px;
  border-radius: 14px;
  background: #4778ac;
  color: var(--c-white);
}

.b-wsPanel__label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.b-wsPanel__label span { font-size: .7em; }

.b-wsPanel__t { margin-top: 20px; font-size: 14px; line-height: 2; }

.b-wsPanel__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 24px; }
.b-wsPanel__imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 161 / 95;
  object-fit: cover;
  border-radius: 6px;
}

@media (min-width: 768px) {
  /* Figma: 380×380・ラベル上 26・本文上 76（幅 335）・写真上 255 */
  .b-wsPanel { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
  /* 本文幅は Figma 実測 335（左 24 / 右 21 の非対称） */
  .b-wsPanel > li { min-height: 380px; padding: 26px 21px 30px 24px; border-radius: 16px; }
  .b-wsPanel__label { font-size: 24px; line-height: 1.33; }
  .b-wsPanel__t { margin-top: 18px; font-size: 16px; line-height: 2; }
  .b-wsPanel__imgs { gap: 11px; margin-top: 51px; }
}

/* オプション枠（Figma 780×250・#e7edf4） */
.b-wsOpt {
  margin-top: 30px;
  padding: 24px 20px;
  border-radius: 14px;
  background: #e7edf4;
}

.b-wsOpt__h {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #ea635a;
}

.b-wsOpt__h span { display: block; font-size: .9em; }

.b-wsOpt__l { margin-top: 16px; display: grid; gap: 5px; }

.b-wsOpt__l > li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 2;
  color: #004b90;
}

/* 丸ポチ（Figma 8×8・#ea635a） */
.b-wsOpt__l > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ea635a;
}

@media (min-width: 768px) {
  /* Figma PC: 05 の問いカードのラベル行ピッチ 349（実装 345）。
     ⚠️ 共通の .b-cols__l{gap:20px} は触らずテーマ＋ブロック限定で上書きする。 */
  .l-mainBg.is-peace .b-cols__l:has(> .b-askCard) { row-gap: 24px; }

  /* Figma: 780×250・内側 38/41・見出し 20px・項目ピッチ 37 */
  .b-wsOpt { margin-top: 30px; padding: 41px 38px 34px; border-radius: 16px; }
  .b-wsOpt__h { font-size: 20px; line-height: 23px; }
  .b-wsOpt__l { margin-top: 23px; gap: 5px; }
  .b-wsOpt__l > li { padding-left: 18px; font-size: 16px; line-height: 2; }
}


/* --------------------------------------------------------------------------
   05 のカード（ピル付き）は 07 の番号バッジ付きと余白が違う（Figma 実測）
   PC: 上 56 / 左右 100 / 下 60、見出し 24px→本文 10、本文→中身 20、中身→注記 60
   注記は 10px / 行高 17（07 SP と同じ寸法）
   -------------------------------------------------------------------------- */
.b-progCard.is-pillCard .b-progCard__h { font-size: 20px; line-height: 1.5; }
.b-progCard.is-pillCard .b-progCard__t { margin-top: 10px; }
.b-progCard.is-pillCard .b-progCard__note { font-size: 10px; line-height: 1.7; }

@media (min-width: 768px) {
  .b-progCard.is-pillCard .b-progCard__box { padding: 56px 100px 60px; }
  .b-progCard.is-pillCard .b-progCard__h { font-size: 24px; line-height: 1.5; }
  .b-progCard.is-pillCard .b-progCard__t { margin-top: 10px; font-size: 16px; line-height: 2; }
  .b-progCard.is-pillCard .b-tourStep,
  .b-progCard.is-pillCard .b-wsPanel { margin-top: 20px; }
  .b-progCard.is-pillCard .b-progCard__note { margin-top: 60px; font-size: 10px; line-height: 1.7; }
}

/* ==========================================================================
   05 の SP 実測反映（Figma 05_MLP_SP_PEACE_DIALOGUE）
   ========================================================================== */
@media (max-width: 767px) {
  /* 問いカード: 枠 335×226.8 / 箱 209.4（ピルが 17.4 上）/ ピル 223.3×34.9 /
     問い 207×35（16px・2行）が 箱+38.4 / 写真 140.7×87.9 が 箱+96.4（間 11.5）/ 下 25 */
  .l-mainBg.is-peace .b-askCard { padding-top: 17px; }
  .l-mainBg.is-peace .b-askCard__box { padding: 38px 21px 25px; }
  .l-mainBg.is-peace .b-askCard__label {
    min-width: 223px;
    margin-top: -56px;
    margin-bottom: 21px;
    padding: 6px 16px;
    font-size: 16px;
    line-height: 1.4;
  }
  .l-mainBg.is-peace .b-askCard__h { margin-top: 0; font-size: 16px; line-height: 17.5px; }
  /* Figma SP: 問いカードのラベル行ピッチ 240.75（実装 245.4 で 3 回累積 +14）。
     ⚠️ 共通の .b-cols__l{gap:20px} は全ページの 2 カラムの基礎なので触らない。 */
  .l-mainBg.is-peace .b-cols__l:has(> .b-askCard) { row-gap: 15px; }
  .l-mainBg.is-peace .b-askCard__imgs { gap: 11px; margin-top: 23px; }
  .l-mainBg.is-peace .b-askCard__imgs img { aspect-ratio: 141 / 88; object-fit: cover; }

  /* 声カード: 枠 335×357.5 / 箱 340（ピルが 17.5 上）/ 本文 293×280 が 箱+38.3 */
  /* Figma は 05/06/07 とも 40。05 にしかテーマ上書きが無く、06/07 は
     共通の 30 のままだったため SP が 06 −22 / 07 −21 ずれていた。
     ⚠️ 共通の 30 は 02〜04・08〜13 が依存しているのでテーマ限定で上書きする。 */
  .l-mainBg.is-peace .b-cols.b-gap-btn,
  .l-mainBg.is-kankojin .b-cols.b-gap-btn,
  .l-mainBg.is-program .b-cols.b-gap-btn { padding-top: 40px; }
  .l-mainBg.is-peace .b-voice { padding-top: 17px; }
  .l-mainBg.is-peace .b-voice__box { padding: 38px 21px 22px; }
  /* 2026-09-02: 基底の .b-voice__label を Figma 値（16px）に揃えたため、
     この上書きは同値になった。他ページとの差分が無いことを明示するため残す。 */
  .l-mainBg.is-peace .b-voice__label {
    min-width: 223px;
    margin-top: -56px;
    margin-bottom: 21px;
    padding: 6px 16px;
    font-size: 16px;
    line-height: 1.4;
  }
  .l-mainBg.is-peace .b-voice__t { font-size: 14px; line-height: 2; }

  /* 体験カード: 335×1340 / ピルは左上（135×20 が +40）/ 見出し 214×18 が +85.8 /
     本文 280×84 が +123.8 / 手順 280×270 が +240 / 注記 280×102 が +1200 / 下 38 */
  /* 05 はピルがカード内（在フロー）なので、07 の番号バッジ用の食い込み分は要らない */
  .l-mainBg.is-peace .b-progCard.is-pillCard { padding-top: 0; }
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-progCard__box { padding: 40px 28px 38px; }
  .l-mainBg.is-peace .b-progCard__pill {
    min-width: 135px;
    min-height: 20px;
    margin-bottom: 26px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 20px;
  }
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-progCard__h { font-size: 24px; line-height: 18px; }
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-progCard__t { margin-top: 20px; font-size: 14px; line-height: 2; }
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-tourStep,
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-wsPanel { margin-top: 32px; }
  .l-mainBg.is-peace .b-progCard.is-pillCard .b-progCard__note { margin-top: 40px; }

  /* 手順行 SP: 箱 280×270・アイコン 60×42 が (19,45)・見出し 162×32 が (90,21)・
     説明 182×52 が +56・写真 222×125 が +124（中央）・行間 55（うち ▼ 32） */
  .b-tourStep { gap: 55px; margin-top: 20px; }
  /* 列: 左 19 / アイコン 60 / 間 11 / 本文 182 / 右 8 = 280（Figma 実測）
     見出しは 18px（162÷9字）で行ボックス 32・写真は本文から 16 */
  .b-tourStep > li {
    grid-template-columns: 60px 1fr;
    column-gap: 11px;
    row-gap: 0;
    min-height: 270px;
    padding: 21px 6px 21px 19px;   /* 本文列を Figma の 182 以上（184）確保して 2 行に収める */
    align-items: start;
  }
  .b-tourStep__icon { margin-top: 24px; }
  .b-tourStep__h { font-size: 18px; line-height: 32px; }
  .b-tourStep__t { margin-top: 3px; font-size: 14px; line-height: 26px; }
  .b-tourStep__photo { margin-top: 16px; max-width: 222px; margin-inline: auto; }
  /* SP の ▼ は Figma 実測 80×32 */
  .b-tourStep > li + li::before {
    top: -44px;
    border-inline-width: 40px;
    border-top-width: 32px;
  }
}

/* 05 SP ワークショップカード（Figma 実測 335×1570）
   パネル 280×310（ラベル 24 が +19 / 本文 246.8×140 が +56 / 写真 118×70 が +214 / 下 26）
   オプション枠 280×460（本文 240×97 が +41 / 箇条書き +168・+244・+348）
   注記 280×85（5 行 × 17）/ カード下 40 */
@media (max-width: 767px) {
  .l-mainBg.is-peace .b-wsPanel { gap: 20px; margin-top: 20px; }
  .l-mainBg.is-peace .b-wsPanel > li { min-height: 310px; padding: 19px 17px 26px; }
  .l-mainBg.is-peace .b-wsPanel__label { font-size: 18px; line-height: 24px; }
  .l-mainBg.is-peace .b-wsPanel__label span { line-height: 24px; }
  .l-mainBg.is-peace .b-wsPanel__t { margin-top: 13px; font-size: 14px; line-height: 28px; }
  .l-mainBg.is-peace .b-wsPanel__imgs { gap: 6px; margin-top: 18px; }
  .l-mainBg.is-peace .b-wsPanel__imgs img { aspect-ratio: 120 / 70; }

  .l-mainBg.is-peace .b-wsOpt { min-height: 460px; margin-top: 40px; padding: 41px 20px 40px; }
  .l-mainBg.is-peace .b-wsOpt__h { font-size: 16px; line-height: 28px; }
  .l-mainBg.is-peace .b-wsOpt__l { margin-top: 30px; gap: 20px; }
  .l-mainBg.is-peace .b-wsOpt__l > li { font-size: 14px; line-height: 28px; }
}

/* 09 の記事タグ行は Figma x335（本文 x330 より 5px 内側）。
   `.c-tagList` は共通コンポーネントなので 09 の記事内に限定して当てる。 */
.b-article .c-tagList.is-lg { padding-left: 5px; }