@charset "utf-8";

/* ============================================================
   program.css
   program/index.html 専用スタイル
============================================================ */


/* ============================================================
   section/what：ふれペアとはセクション
============================================================ */

/* ------------------------------------------------------------
   .what：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.what {
  background-color: var(--color-background-base);
}

/* ------------------------------------------------------------
   .section-what__inner：PC版 innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.section-what__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・overview・imgの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   .what__overview：概要テキストエリア
   リード文と本文をまとめる縦並びラッパー
------------------------------------------------------------ */
.what__overview {
  display: flex;
  flex-direction: column;
  gap: 40px;    /* リード文と本文の間隔 */
  max-width: 820px;
}

/* ------------------------------------------------------------
   .what__body：本文エリア
   複数の段落テキストをまとめるラッパー
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.what__body {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* ------------------------------------------------------------
   .what__body-txt：本文テキスト
   PC版：text/pc/body（18px / 400 / 175% / Noto Sans JP）
------------------------------------------------------------ */
.what__body-txt {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
  max-width: 800px;
}

/* 隣接する段落の間にのみ上マージンを付与 */
.what__body-txt + .what__body-txt {
  margin-top: 1em;
}

/* ------------------------------------------------------------
   .what__img-wrap：イラスト画像のラッパー
   PC版：最大幅640px・中央揃え
------------------------------------------------------------ */
.what__img-wrap {
  max-width: 640px;
  width: 100%;
  flex-shrink: 0;
  align-self: center; /* SP版で親がflex-startになっても中央揃えを維持 */
}

/* ------------------------------------------------------------
   .what__img：イラスト画像本体
   ラッパーの幅いっぱいに表示
------------------------------------------------------------ */
.what__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   program/index.html section/what：SP版（874px以下）
   PC版から変更になる値のみ上書き
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     .section-what__inner：SP版 innerレイアウト
     余白・間隔・揃え方をSP仕様に上書き
  ------------------------------------------------------------ */
  .section-what__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃えに変更 */
    gap: 32px; /* 各要素間の縦の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     .what__overview：SP版の要素間隔
  ------------------------------------------------------------ */
  .what__overview {
    gap: 24px; /* リード文と本文の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     .what__body-txt：SP版テキストスタイル
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .what__body-txt {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

} /* @media (max-width: 874px) program/index.html section/what SP版 */


/* ============================================================
   section/purpose：プログラムの目的セクション
============================================================ */

/* ------------------------------------------------------------
   .purpose：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.purpose {
  background-color: var(--color-background-sub);
}

/* ------------------------------------------------------------
   .section-purpose__inner：PC版 innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.section-purpose__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・overview・imgの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   .purpose__overview：概要テキストエリア
   リード文と本文をまとめる縦並びラッパー
------------------------------------------------------------ */
.purpose__overview {
  display: flex;
  flex-direction: column;
  gap: 40px;    /* リード文と本文の間隔 */
  max-width: 820px;
}

/* ------------------------------------------------------------
   .purpose__body：本文エリア
   複数の段落テキストをまとめるラッパー
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.purpose__body {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* ------------------------------------------------------------
   .purpose__body-txt：本文テキスト
   PC版：text/pc/body（18px / 400 / 175% / Noto Sans JP）
------------------------------------------------------------ */
.purpose__body-txt {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
  max-width: 800px;
}

/* 隣接する段落の間にのみ上マージンを付与 */
.purpose__body-txt + .purpose__body-txt {
  margin-top: 1em;
}

/* ------------------------------------------------------------
   .purpose__img-wrap：図解画像のラッパー
   最大幅800px・中央揃え
   1070×673px比率の画像を縦横比を保って縮小表示
------------------------------------------------------------ */
.purpose__img-wrap {
  max-width: 800px;
  width: 100%;
  flex-shrink: 0;
  align-self: center;
}

/* ------------------------------------------------------------
   .purpose__img：図解画像本体
   縦横比を保ってラッパーの幅いっぱいに表示
------------------------------------------------------------ */
.purpose__img {
  width: 100%;
  height: auto; /* 縦横比（1070:673）を保って自動調整 */
  display: block;
}


/* ============================================================
   program/index.html section/purpose：SP版（874px以下）
   PC版から変更になる値のみ上書き
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     .section-purpose__inner：SP版 innerレイアウト
     余白・間隔・揃え方をSP仕様に上書き
  ------------------------------------------------------------ */
  .section-purpose__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃えに変更 */
    gap: 32px; /* 各要素間の縦の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     .purpose__overview：SP版の要素間隔
  ------------------------------------------------------------ */
  .purpose__overview {
    gap: 24px; /* リード文と本文の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     .purpose__body-txt：SP版テキストスタイル
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .purpose__body-txt {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

} /* @media (max-width: 874px) program/index.html section/purpose SP版 */


/* ============================================================
   section/method：実施方法セクション
============================================================ */

/* ------------------------------------------------------------
   program/index.html section/method：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.method {
  background-color: var(--color-background-base);
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .section-method__inner innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.section-method__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・overview・table-wrap・imgの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__overview 概要エリア
   リード文と箇条書きをまとめる縦並びラッパー
------------------------------------------------------------ */
.method__overview {
  display: flex;
  flex-direction: column;
  gap: 40px; /* リード文と箇条書きの間隔 */
  max-width: 820px;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__body 箇条書きエリア
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.method__body {
  padding-left: 24px;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__list 箇条書きリスト
   disc（黒丸）スタイルのul
------------------------------------------------------------ */
.method__list {
  list-style-type: disc;
  padding-left: 1.5em; /* 黒丸の分のインデント */
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__list-item 箇条書きの各項目
   PC版：text/pc/body（18px / 400 / 175% / Noto Sans JP）
------------------------------------------------------------ */
.method__list-item {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__table-wrap テーブルのラッパー
   最大幅525px・中央揃え（回数列100px＋内容列425px）
------------------------------------------------------------ */
.method__table-wrap {
  max-width: 525px;
  width: 100%;
  align-self: center;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__table プログラム内容テーブル全体
   幅いっぱいに広げる・border-collapseでボーダーを結合
------------------------------------------------------------ */
.method__table {
  width: 100%;
  border-collapse: collapse;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__table-cell テーブルセル共通スタイル
   ボーダー・パディング（余白を詰める）・テキストスタイルを指定
------------------------------------------------------------ */
.method__table-cell {
  border: 1px solid var(--color-secondary);
  padding: 8px 12px;                         /* 余白を詰めたコンパクトなサイズ */
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
  background-color: var(--color-white);
  vertical-align: middle;                    /* 上下中央揃え */
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__table-cell--head ヘッダーセル
   背景色をsecondaryカラー・テキストを見出し色に変更
------------------------------------------------------------ */
.method__table-cell--head {
  background-color: var(--color-secondary);
  font-size:   var(--text-pc-lead-size);
  font-weight: 500;
  line-height: var(--text-pc-lead-lh);
  color: var(--color-text-heading);
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__table-cell--num 回数セル（左列）
   PC版：幅100px固定・折り返しなし
------------------------------------------------------------ */
.method__table-cell--num {
  width: 100px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__img-wrap 図解画像のラッパー
   最大幅800px・中央揃え（section/purposeと同じ）
------------------------------------------------------------ */
.method__img-wrap {
  max-width: 800px;
  width: 100%;
  align-self: center;
}

/* ------------------------------------------------------------
   program/index.html section/method PC版：
   .method__img 図解画像本体
   縦横比を保ってラッパーの幅いっぱいに表示
------------------------------------------------------------ */
.method__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   program/index.html section/method SP版（874px以下）
   PC版から変更になる値のみ上書き
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .section-method__inner innerレイアウト
     余白・間隔・揃え方をSP仕様に上書き
  ------------------------------------------------------------ */
  .section-method__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃えに変更 */
    gap: 32px; /* 各要素間の縦の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__overview 概要エリア
     リード文と箇条書きの間隔をSP仕様に縮小
  ------------------------------------------------------------ */
  .method__overview {
    gap: 24px;
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__list-item 箇条書きの各項目
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .method__list-item {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__table-wrap テーブルのラッパー
  ------------------------------------------------------------ */
  .method__table-wrap {
    max-width: 470px;
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__table-cell テーブルセル共通
     SP版：text/sp/body（16px / 400 / 175%）に変更
  ------------------------------------------------------------ */
  .method__table-cell {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__table-cell--head ヘッダーセル
     SP版：text/sp/lead（16px / 500 / 200%）に変更
  ------------------------------------------------------------ */
  .method__table-cell--head {
    font-size:   var(--text-sp-lead-size);
    font-weight: var(--text-sp-lead-weight);
    line-height: var(--text-sp-lead-lh);
  }

  /* ------------------------------------------------------------
     program/index.html section/method SP版：
     .method__table-cell--num 回数セル（左列）
  ------------------------------------------------------------ */
  .method__table-cell--num {
    width: 90px;
  }

} /* @media (max-width: 874px) program/index.html section/method SP版 */


/* ============================================================
   section/development：プログラム開発セクション
============================================================ */

/* ------------------------------------------------------------
   program/index.html section/development：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.development {
  background-color: var(--color-background-sub);
}

/* ------------------------------------------------------------
   program/index.html section/development PC版：
   .section-development__inner innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.section-development__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・overviewの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   program/index.html section/development PC版：
   .development__overview 概要エリア
   リード文と本文をまとめる縦並びラッパー
------------------------------------------------------------ */
.development__overview {
  display: flex;
  flex-direction: column;
  gap: 40px; /* リード文と本文の間隔 */
  max-width: 820px;
}

/* ------------------------------------------------------------
   program/index.html section/development PC版：
   .development__body 本文エリア
   複数の段落テキストをまとめるラッパー
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.development__body {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* ------------------------------------------------------------
   program/index.html section/development PC版：
   .development__list 箇条書き（1階層目）
   「◆」をprimaryカラーで表示。折り返し時は字下げ（ぶら下げインデント）
------------------------------------------------------------ */
.development__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style-type: disc; /* program/#local の .local__list と同じ方式 */
  padding-left: 1.5em; /* 黒丸の分のインデント（.local__list と同じ） */
  margin: 0;
}

.development__list-item {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
  max-width: 800px;
}

/* ------------------------------------------------------------
   program/index.html section/development PC版：
   .development__list--sub 箇条書き（2階層目：開発者の経歴など）
   「➤」をaccentカラーで表示し、1階層目より控えめに
------------------------------------------------------------ */
.development__list--sub {
  margin-top: 16px;
  padding-left: 1.5em; /* 1階層目からの全体インデント */
  list-style-type: none; /* 1階層目のdiscを打ち消し、➤マーカーのみ表示する */
}

.development__list--sub .development__list-item {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.development__list--sub .development__list-item::before {
  content: '➤';
  color: var(--color-text-body);
  font-size: 0.55em;
  margin-right: 0.8em;
}

/* ------------------------------------------------------------
   .development__br--pc レスポンシブ改行ユーティリティ
   common.cssの.br-pc（875px基準）ではなく、本セクション
   （RDDD図解を含む development セクション）の実際のブレークポイント
   である1000pxに合わせて改行のON/OFFを切り替える
------------------------------------------------------------ */
.development__br--pc {
  display: none;
}

@media (min-width: 1001px) {
  .development__br--pc {
    display: block;
  }
} /* @media (min-width: 1001px) program/index.html section/development .development__br--pc 表示切り替え */




/* ============================================================
   program/index.html section/development SP版（874px以下）
   PC版から変更になる値のみ上書き
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     program/index.html section/development SP版：
     .section-development__inner innerレイアウト
     余白・間隔・揃え方をSP仕様に上書き
  ------------------------------------------------------------ */
  .section-development__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃えに変更 */
    gap: 32px; /* 各要素間の縦の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     program/index.html section/development SP版：
     .development__overview 概要エリア
     リード文と本文の間隔をSP仕様に縮小
  ------------------------------------------------------------ */
  .development__overview {
    gap: 24px;
  }

  /* ------------------------------------------------------------
     program/index.html section/development SP版：
     .development__list-item 箇条書きの各項目
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .development__list-item {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

} /* @media (max-width: 874px) program/index.html section/development SP版 */


/* ============================================================
   program/index.html section/development：RDDD図解（.rddd）
   「実践と研究→開発→実証→普及」の4ステージを矢印でつなぐ図解
   フォントはNoto Sans JP（var(--font-sans)）で統一。
   立体感（box-shadow・グラデーション）は使用しない
============================================================ */

/* ------------------------------------------------------------
   .development__diagram 図解エリア全体のラッパー
   本文（development__overview）と同じ最大幅で中央揃え
------------------------------------------------------------ */
.development__diagram {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ------------------------------------------------------------
   .rddd__caption 図解タイトル（モデル名）
------------------------------------------------------------ */
.rddd__caption {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-small-size);
  font-weight: var(--text-pc-small-weight);
  line-height: var(--text-pc-small-lh);
  color: var(--color-text-heading);
  text-align: center;
}

/* ------------------------------------------------------------
   .rddd 4ステージ＋矢印のコンテナ
   PC版：横並び／各ステージは上揃え
------------------------------------------------------------ */
.rddd {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

/* ------------------------------------------------------------
   .rddd__stage 1つのステージ（見出し＋本文をまとめる）
   flex: 1 を基本とし、2カラム構成のステージは --wide で幅広に
------------------------------------------------------------ */
.rddd__stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0; /* テキストが横幅を突き破らないようにする */
}

.rddd__stage--wide {
  flex: 2.2 1 0; /* 2カラム構成のステージ（実践と研究・普及）は幅を広めに配分 */
}

/* 「実践と研究」ステージのみ横幅の上限を指定 */
.rddd__stage--research {
  max-width: 283px;
}

/* ------------------------------------------------------------
   .rddd__stage-hd ステージ見出し（primaryカラー背景・白文字）
   角丸は上のみ（下の本文エリアと視覚的に一体化させる）
------------------------------------------------------------ */
.rddd__stage-hd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--color-primary);
  border-radius: 8px 8px 0 0;
  text-align: center;
}

.rddd__stage-hd-ja {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-small-size);
  font-weight: 700;
  line-height: 150%;
  color: var(--color-white);
}

.rddd__stage-hd-en {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-caption-size);
  font-weight: 700;
  line-height: 150%;
  color: var(--color-white);
}

/* ------------------------------------------------------------
   .rddd__stage-body ステージ本文（見出しの下）
   白背景・薄いボーダー・角丸は下のみ
------------------------------------------------------------ */
.rddd__stage-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  background: var(--color-white);
  border: 1px solid var(--color-secondary);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  gap: 16px;
}

/* ------------------------------------------------------------
   .rddd__col ステージ本文内の1カラム
   2カラムのステージでは隣接カラムとの間に縦の区切り線を入れる
------------------------------------------------------------ */
.rddd__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 既定の要素間の余白（個別指定がない箇所に適用） */
.rddd__col > * + * {
  margin-top: 4px;
}

/* ------------------------------------------------------------
   余白調整用ユーティリティ
   .rddd__mt-tight：見出し直後などを詰める（既定4pxの1/3）
   .rddd__mt-sm   ：区切りたい行の間を少し空ける
   後方に定義することで .rddd__col > * + * より優先させる
------------------------------------------------------------ */
.rddd__col > .rddd__mt-tight {
  margin-top: 0; /* さらに詰める */
}

.rddd__col > .rddd__mt-sm {
  margin-top: 10px;
}

/* オレンジ枠（.rddd__sublabel）の直後に少し余白を入れる */
.rddd__col > .rddd__sublabel + * {
  margin-top: 10px;
}

/* 緑の小見出し（.rddd__text--strong）の直後に少し余白を入れる（半分に縮小） */
.rddd__col > .rddd__text--strong + * {
  margin-top: 4px;
}

.rddd__col + .rddd__col {
  padding-left: 16px;
  border-left: 1px solid var(--color-secondary);
}

/* ------------------------------------------------------------
   .rddd__sublabel カラム内の小見出し（accentカラー背景・白文字）
------------------------------------------------------------ */
.rddd__sublabel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px; /* PC版：14px×150%×2行＋padding分の高さを確保（列間で高さを揃える） */
  font-family: var(--font-sans);
  font-size:   var(--text-pc-caption-size);
  font-weight: 700;
  line-height: 150%;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}

/* ------------------------------------------------------------
   .rddd__text カラム内の本文テキスト
------------------------------------------------------------ */
.rddd__text {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-caption-size);
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-body);
}

.rddd__text--strong {
  font-weight: 700;
  color: var(--color-text-heading);
}

/* ------------------------------------------------------------
   .rddd__list カラム内の箇条書き
------------------------------------------------------------ */
.rddd__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none; /* destyle.cssで除去済みだが念のため明示 */
  padding: 0;
  margin: 0;
}

.rddd__list-item {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-caption-size);
  font-weight: 400;
  line-height: 175%;
  color: var(--color-text-body);
  padding-left: 1em; /* 2行目以降の字下げ位置 */
  text-indent: -1em; /* 1行目は「・」の分だけ左に戻し、左端をそろえる */
}

/* 箇条書きの行頭に中点「・」を表示 */
.rddd__list-item::before {
  content: '・';
}

/* ------------------------------------------------------------
   .rddd__arrow ステージ間の矢印コネクター
   CSSのclip-pathで三角形を描画（画像・立体表現は使用しない）
   PC版：右向き／SP版（874px以下）で下向きに回転
------------------------------------------------------------ */
.rddd__arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 20px;
  height: 24px;
  margin-top: 24px; /* ステージ見出し（.rddd__stage-hd）の高さの中央あたりに合わせる */
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}


/* ============================================================
   program/index.html section/development RDDD図解 SP版（1000px以下）
   横並びだと窮屈になるため、このコンポーネントだけセクション共通の
   874pxより広い1000pxで縦並びに切り替える
   PC版から変更になる値のみ上書き
   ・4ステージを縦並びに変更
   ・ステージ内の2カラムも縦並びに変更（区切り線は上ボーダーに変更）
   ・矢印は90度回転させて下向きに
============================================================ */
@media (max-width: 1000px) {

  /* .rddd：ステージを縦並びに変更 */
  .rddd {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* .rddd__stage--wide：SP版では幅指定不要（縦並びのため） */
  .rddd__stage--wide {
    flex: 1 1 0;
  }

  /* .rddd__stage--research：PC版のみのmax-width指定をリセット（縦並びでは幅いっぱいに） */
  .rddd__stage--research {
    max-width: none;
  }

  /* .rddd__stage-body：カラムを縦並びに変更 */
  .rddd__stage-body {
    flex-direction: column;
    gap: 16px;
  }

  /* .rddd__col：区切り線を「左ボーダー」から「上ボーダー」に変更 */
  .rddd__col + .rddd__col {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--color-secondary);
  }

  /* .rddd__sublabel：SP版は縦並びのため2行分の高さ確保は不要 */
  .rddd__sublabel {
    min-height: auto;
  }

  /* .rddd__arrow：右向き→下向きに回転し、ステージ間の縦の間隔として扱う */
  .rddd__arrow {
    align-self: center;
    margin: 8px 0;
    transform: rotate(90deg);
  }

} /* @media (max-width: 1000px) program/index.html section/development RDDD図解 SP版 */


/* ============================================================
   section/change：事前事後の変化セクション
============================================================ */

/* ------------------------------------------------------------
   program/index.html section/change：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.change {
  background-color: var(--color-background-base);
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .section-change__inner innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.section-change__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・overview・imgの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .change__overview 概要エリア
   リード文と本文をまとめる縦並びラッパー
------------------------------------------------------------ */
.change__overview {
  display: flex;
  flex-direction: column;
  gap: 40px; /* リード文と本文の間隔 */
  max-width: 820px;
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .change__body 本文エリア
   複数の段落テキストをまとめるラッパー
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.change__body {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .change__body-txt 本文テキスト
   PC版：text/pc/body（18px / 400 / 175% / Noto Sans JP）
------------------------------------------------------------ */
.change__body-txt {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
  max-width: 800px;
}

/* 隣接する段落の間にのみ上マージンを付与 */
.change__body-txt + .change__body-txt {
  margin-top: 1em;
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .change__img-wrap グラフ画像のラッパー
   最大幅800px・中央揃え（section/purposeと同じ）
------------------------------------------------------------ */
.change__img-wrap {
  max-width: 800px;
  width: 100%;
  align-self: center;
}

/* ------------------------------------------------------------
   program/index.html section/change PC版：
   .change__img グラフ画像本体
   縦横比を保ってラッパーの幅いっぱいに表示
------------------------------------------------------------ */
.change__img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   program/index.html section/change SP版（874px以下）
   PC版から変更になる値のみ上書き
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     program/index.html section/change SP版：
     .section-change__inner innerレイアウト
     余白・間隔・揃え方をSP仕様に上書き
  ------------------------------------------------------------ */
  .section-change__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃えに変更 */
    gap: 32px; /* 各要素間の縦の間隔をSP仕様に縮小 */
  }

  /* ------------------------------------------------------------
     program/index.html section/change SP版：
     .change__overview 概要エリア
     リード文と本文の間隔をSP仕様に縮小
  ------------------------------------------------------------ */
  .change__overview {
    gap: 24px;
  }

  /* ------------------------------------------------------------
     program/index.html section/change SP版：
     .change__body-txt 本文テキスト
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .change__body-txt {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

} /* @media (max-width: 874px) program/index.html section/change SP版 */


/* ============================================================
   section/local：各地の取り組みセクション
============================================================ */

/* ------------------------------------------------------------
   program/index.html section/local：セクション全体
   背景色を画面幅いっぱいに広げる
------------------------------------------------------------ */
.local {
  background-color: var(--color-background-sub);
}

/* ------------------------------------------------------------
   program/index.html section/local：PC/SP ブロックの表示切り替え
   デフォルト：PC版を表示・SP版を非表示
------------------------------------------------------------ */
.local--pc {
  display: block;
}

.local--sp {
  display: none;
}


/* ============================================================
   program/index.html section/local PC版レイアウト（875px以上）
============================================================ */

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .section-local__inner innerレイアウト
   最大幅1440px・中央揃え・縦並び・余白と要素間隔を指定
------------------------------------------------------------ */
.local--pc .section-local__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・content-rowの各要素間の縦の間隔 */
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__content-row コンテンツ行
   画像と概要エリアを横並びに配置・間隔40px
------------------------------------------------------------ */
.local__content-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__img-wrap（PC版）地図画像のラッパー
------------------------------------------------------------ */
.local--pc .local__img-wrap {
  width: 300px;
  height: 251px;
  flex-shrink: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__img（PC版）地図画像本体
   ラッパーの幅いっぱいに表示
------------------------------------------------------------ */
.local--pc .local__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__overview 概要エリア
   リード文と箇条書きをまとめる縦並びラッパー
------------------------------------------------------------ */
.local--pc .local__overview {
  display: flex;
  flex-direction: column;
  gap: 40px; /* リード文と箇条書きの間隔 */
  flex: 1;
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__body 箇条書きエリア
   .section__lead の padding-left（24px）と左端を揃える
------------------------------------------------------------ */
.local__body {
  padding-left: 24px;
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__list 箇条書きリスト
   disc（黒丸）スタイルのul
------------------------------------------------------------ */
.local__list {
  list-style-type: disc;
  padding-left: 1.5em; /* 黒丸の分のインデント */
}

/* ------------------------------------------------------------
   program/index.html section/local PC版：
   .local__list-item 箇条書きの各項目
   PC版：text/pc/body（18px / 400 / 175% / Noto Sans JP）
------------------------------------------------------------ */
.local__list-item {
  font-family: var(--font-sans);
  font-size:   var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
}


/* ============================================================
   program/index.html section/local SP版（874px以下）
   .local--pc を非表示・.local--sp を表示に切り替え
============================================================ */
@media (max-width: 874px) {

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     PC版ブロックを非表示にする
  ------------------------------------------------------------ */
  .local--pc {
    display: none;
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     SP版ブロックを表示する
  ------------------------------------------------------------ */
  .local--sp {
    display: block;
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     .section-local__inner innerレイアウト
     余白・間隔・揃え方をSP仕様に指定
  ------------------------------------------------------------ */
  .local--sp .section-local__inner {
    padding: 40px 16px; /* 上下40px・左右16px */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃え */
    gap: 32px; /* 各要素間の縦の間隔 */
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     .local__overview 概要エリア
     リード文と箇条書きをまとめる縦並びラッパー
  ------------------------------------------------------------ */
  .local--sp .local__overview {
    display: flex;
    flex-direction: column;
    gap: 24px; /* リード文と箇条書きの間隔をSP仕様に縮小 */
    width: 100%;
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     .local__img-wrap（SP版）地図画像のラッパー
     width: 200px・中央揃え・縦横比保持
  ------------------------------------------------------------ */
  .local--sp .local__img-wrap {
    width: 200px;
    align-self: center;
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     .local__img（SP版）地図画像本体
     縦横比を保ってラッパーの幅いっぱいに表示
  ------------------------------------------------------------ */
  .local--sp .local__img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ------------------------------------------------------------
     program/index.html section/local SP版：
     .local__list-item 箇条書きの各項目
     SP版：text/sp/body（16px / 400 / 175% / Noto Sans JP）
  ------------------------------------------------------------ */
  .local__list-item {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

} /* @media (max-width: 874px) program/index.html section/local SP版 */