@charset "utf-8";

/* ============================================================
   facilitator.css
   ファシリテーターページ（facilitator/index.html）固有のスタイル

   読み込み順：
     1. variables.css  … CSS変数（色・フォント・テキストスタイル）
     2. destyle.css    … ブラウザデフォルトのリセット
     3. common.css     … 全ページ共通スタイル（header・footer・btn等）
     4. facilitator.css（このファイル）… ページ固有スタイル

   ブレークポイント：
     PC版：875px以上
     SP版：874px以下
     ※ ヘッダー・フッターは common.css 側で別途管理
============================================================ */


/* ============================================================
   PC / SP 表示切り替えユーティリティ
   PC版とSP版でHTML構造・テキストの改行位置が異なるため、
   それぞれ別ブロックを用意して display で切り替える
============================================================ */

/* PC版ブロック：デフォルトで表示 */
.pc-only {
  display: block;
}

/* SP版ブロック：デフォルトで非表示 */
.sp-only {
  display: none;
}

@media (max-width: 874px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
} /* @media (max-width: 874px) facilitator/index.html pc-only/sp-only 切り替え */


/* ============================================================
   section/about
   ファシリテーター紹介の導入セクション
   構成：ttl-area（共通見出し） + overview（lead + body）
============================================================ */

/* セクション外枠：背景色を全幅で適用 */
.about {
  width: 100%;
  background-color: var(--color-background-base);
}

/* セクション内側：最大幅・中央寄せ・上下左右パディング */
.about__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area と overview の間隔 */
}


/* ------------------------------------------------------------
   overview：リードと本文をまとめるコンテナ
   ttl-area の下に配置し、左ボーダー付きの lead と body を縦並べ
------------------------------------------------------------ */
.about__overview {
  display: flex;
  flex-direction: column;
  gap: 40px; /* lead と body の間隔 */
  width: 100%;
  max-width: 820px;
}


/* ------------------------------------------------------------
   body：詳細説明テキスト
   lead と同じ左パディングで視覚的に揃える
------------------------------------------------------------ */
.about__body {
  padding-left: 24px;
}

/* bodyのテキスト：text/pc/body（18px・400・175%・Sans） */
.about__body-txt {
  font-family: var(--text-pc-body-family);
  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);
}


/* ============================================================
   SP版上書き（874px以下）
   パディング・ギャップ・テキストスタイルをSP用に変更
============================================================ */

@media (max-width: 874px) {

  /* inner：上下パディング縮小・左右はSP余白・中央揃え解除 */
  .about__inner {
    padding: 40px 16px;
    gap: 32px;      /* ttl-area と overview の間隔（SP） */
    align-items: flex-start;
  }

  /* overview：lead と body の間隔を縮小 */
  .about__overview {
    gap: 24px;
  }

  /* body テキスト：text/sp/body（16px・400・175%・Sans） */
  .about__body-txt {
    font-family: var(--text-sp-body-family);
    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) facilitator/index.html section/about SP版 */


/* ============================================================
   section/certification
   ファシリテーター認定制度セクション
   構成：ttl-area（共通見出し） + body（説明文） + flow（フロー図png）
============================================================ */

/* セクション外枠：背景色を全幅で適用 */
.certification {
  width: 100%;
  background-color: var(--color-background-sub);
}

/* セクション内側：最大幅・中央寄せ・上下左右パディング */
.certification__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area・body・flow それぞれの間隔 */
}


/* ------------------------------------------------------------
   body：説明テキストのコンテナ
   テキストの塊を中央寄せしつつ、テキスト自体は左揃えに保つ
------------------------------------------------------------ */
.certification__body {
  width: 100%;
  max-width: 1280px;
  display: flex;           /* 子要素を中央寄せにする */
  justify-content: center; /* テキストの塊を水平中央に配置 */
}

/* bodyのテキスト：text/pc/lead（20px・500・200%・Sans） */
.certification__body-txt {
  font-family: var(--text-pc-lead-family);
  font-size:   var(--text-pc-lead-size);
  font-weight: var(--text-pc-lead-weight);
  line-height: var(--text-pc-lead-lh);
  color: var(--color-text-body);
  text-align: left;        /* テキスト自体は左揃え */
  max-width: 840px;
}


/* ------------------------------------------------------------
   flow：フロー図のpng画像コンテナ
------------------------------------------------------------ */
.certification__flow {
  display: flex;
  justify-content: center;
  width: 100%;
}


.certification__flow-img {
  width: 686px;
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   SP版上書き（874px以下）
============================================================ */

@media (max-width: 874px) {

  /* inner：上下パディング縮小・左右はSP余白 */
  .certification__inner {
    padding: 40px 16px;
    gap: 32px; /* 各要素間の間隔（SP） */
  }

  /* body テキスト：text/sp/lead（16px・500・200%・Sans） */
  .certification__body-txt {
    font-family: var(--text-sp-lead-family);
    font-size:   var(--text-sp-lead-size);
    font-weight: var(--text-sp-lead-weight);
    line-height: var(--text-sp-lead-lh);
  }

  /* フロー図画像：SP版は274px固定・縦横比維持 */
  .certification__flow-img {
    width: 274px;
    max-width: 100%;
  }

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


/* ============================================================
   section/training
   ファシリテーター養成講座セクション
   構成：ttl-area（共通見出し） + content-area（各種グループを縦並び）
   PC版・SP版で HTML 構造は共通、メディアクエリで外観を切り替える

   content-area の内部構造：
     - requirement-group：応募要件
     - online-group    ：オンラインでの参加条件
     - info-row        ：講師・開催形式・定員・受講料（2列グリッド）
     - books-group     ：テキスト
     - course-group    ：講座内容（基礎・実践を横2列）
============================================================ */

/* セクション外枠：背景色を全幅で適用 */
.training {
  width: 100%;
  background-color: var(--color-background-base);
}

/* セクション内側：最大幅で中央寄せ・上下左右パディングを設定 */
.training__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* ttl-area と content-area の間隔 */
}


/* ------------------------------------------------------------
   content-area
   requirement-group / online-group / info-row /
   books-group / course-group を縦に並べるコンテナ
------------------------------------------------------------ */
.training__content-area {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 各グループ間の間隔 */
  width: 100%;
}


/* ------------------------------------------------------------
   training__group
   badge＋テキストをセットにした共通グループ枠
   requirement-group / online-group / books-group / course-group で使用
------------------------------------------------------------ */

/* グループ外枠：白背景・primaryカラーのボーダー・角丸 */
.training__group {
  display: flex;
  flex-direction: column;
  gap: 16px;             /* badge とテキストの間隔 */
  padding: 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
}


/* ------------------------------------------------------------
   training__list：ol・ul 共通ベーススタイル
   li の2行目以降が padding-left 分インデントされる
------------------------------------------------------------ */

/* リスト共通：マージンリセット・縦並び */
.training__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 各リストアイテム：PC版テキストスタイルを設定 */
.training__list-item {
  font-family: var(--text-pc-body-family);
  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);
}


/* ------------------------------------------------------------
   training__list--ol：番号付きリスト（応募要件・オンライン参加条件）
   list-style-type: decimal でブラウザが「1.」を自動付与するため
   HTMLの <li> 内に番号を書く必要はない
   padding-left で番号分の字下げを確保し、2行目以降もインデントされる
------------------------------------------------------------ */
.training__list--ol {
  list-style-type: decimal; /* 1. 2. 3. を自動で付ける */
  padding-left: 1.5em;      /* 番号の幅分だけ左に余白を確保 */
}


/* ------------------------------------------------------------
   training__list--ul：箇条書きリスト（テキスト情報）
   list-style-type: disc（黒丸）スタイルのul
   padding-left でマーカー分の字下げを確保し、2行目以降もインデントされる
------------------------------------------------------------ */
.training__list--ul {
  list-style-type: disc;
  padding-left: 1.5em;   /* マーカーの幅分だけ左に余白を確保 */
}


/* ------------------------------------------------------------
   training__list--note：※マーカーの注釈リスト
   list-style-type: "※ " で※をマーカーとして使用
   padding-left でマーカー分の字下げを確保し、2行目以降もインデントされる
------------------------------------------------------------ */
.training__list--note {
  list-style-type: "※ "; /* ※ をマーカーとして使用（後ろにスペースを入れてテキストと間隔を確保） */
  padding-left: 1.5em;    /* マーカーの幅分だけ左に余白を確保 */
}


/* ------------------------------------------------------------
   training__group-note：グループ内の注釈テキスト
   ※印の補足テキストや、リスト後の空行に使用
   margin: 0 で上下の余白をリセット
------------------------------------------------------------ */
.training__group-note {
  font-family: var(--text-pc-body-family);
  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);
  margin: 0;
}


/* ------------------------------------------------------------
   training__info-row
   講師・開催形式・定員・受講料を2列×2行のグリッドで表示
   SP版：メディアクエリで1列に変更
------------------------------------------------------------ */

/* グリッドコンテナ：PC版は2列 */
.training__info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 各情報ボックス：白背景・primaryカラーのボーダー・角丸 */
.training__info-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
}

/* ラベル（講師・開催形式など）：text/pc/small（16px・700・175%・Sans） */
.training__info-label {
  font-family: var(--text-pc-small-family);
  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);
  margin: 0;
}

/* 内容テキスト：text/pc/body（18px・400・175%・Sans） */
.training__info-txt {
  font-family: var(--text-pc-body-family);
  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);
  margin: 0;
}

/* info-txt が div の場合の段落間マージンをリセット */
.training__info-txt p {
  margin: 0;
}


/* ------------------------------------------------------------
   training__course-row / training__course-card
   基礎講座・実践講座カードを横2列で表示するエリア
   SP版：メディアクエリで縦1列に変更
------------------------------------------------------------ */

/* course-row：カードを横並びにするフレックスコンテナ */
.training__course-row {
  display: flex;
  gap: 16px; /* 基礎カードと実践カードの間隔 */
}

/* course-card：各講座カードの外枠（薄緑背景・角丸） */
.training__course-card {
  flex: 1;               /* 2カードで均等に幅を分割 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: var(--color-background-sub);
  border-radius: 6px;
}

/* カード見出し（基礎講座・実践講座）：text/pc/small（16px・700・175%・Sans） */
.training__course-card-ttl {
  font-family: var(--text-pc-small-family);
  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);
  margin: 0;
}

/* カード内区切り線：secondary カラーの細線 */
.training__course-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-secondary);
}

/* カード内テキスト：text/pc/body（18px・400・175%・Sans） */
.training__course-txt {
  display: flex;
  flex-direction: column;
  gap: 28px; /* 段落間に本文1行分の空きを作る */
  font-family: var(--text-pc-body-family);
  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);
}

/* 段落間マージンをリセット */
.training__course-txt p {
  margin: 0;
}


/* ------------------------------------------------------------
   training__course-schedule：日程ラベル＋テキストの縦並びコンテナ
   「1日目：」などのラベルとテキストを横並びにして
   2行目以降がテキスト開始位置に揃うようにする
------------------------------------------------------------ */

/* 日程リスト全体：各itemを縦に並べる */
.training__course-schedule {
  display: flex;
  flex-direction: column;
  gap: 0; /* item間の余白はline-heightで確保 */
}

/* 各日程item：ラベルとテキストを横並びに */
.training__course-item {
  display: flex;
  align-items: flex-start; /* テキストが複数行でも上揃えを維持 */
}

/* ラベル（1日目：など）：折り返し・縮小を防いでテキストと位置を揃える */
.training__course-item-lbl {
  font-family: var(--text-pc-body-family);
  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);
  white-space: nowrap; /* 「1日目：」が折り返さないよう固定 */
  flex-shrink: 0;      /* ラベル幅が縮まないよう固定 */
}

/* テキストエリア：ラベルの右側に配置・2行目以降はラベル幅分インデント */
.training__course-item-txt {
  font-family: var(--text-pc-body-family);
  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);
}

/* テキストエリア内の段落マージンをリセット */
.training__course-item-txt p {
  margin: 0;
}


/* ============================================================
   SP版上書き（874px以下）
   パディング・ギャップ・グリッド・テキストスタイルをSP用に変更
============================================================ */

@media (max-width: 874px) {

  /* inner：上下パディング縮小・左右はSP余白 */
  .training__inner {
    padding: 40px 16px;
    gap: 32px; /* ttl-area と content-area の間隔（SP） */
  }

  /* content-area：グループ間の間隔を縮小 */
  .training__content-area {
    gap: 16px;
  }

  /* group：パディングと badge↔テキスト間隔を縮小 */
  .training__group {
    padding: 16px;
    gap: 10px;
  }

  /* list-item テキスト：text/sp/body（16px・400・175%・Sans） */
  .training__list-item {
    font-family: var(--text-sp-body-family);
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* 注釈テキスト：text/sp/body（16px・400・175%・Sans） */
  .training__group-note {
    font-family: var(--text-sp-body-family);
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* info-row：SP版は1列に変更 */
  .training__info-row {
    grid-template-columns: 1fr;
  }

  /* ラベル：text/sp/small（14px・700・175%・Sans） */
  .training__info-label {
    font-family: var(--text-sp-small-family);
    font-size:   var(--text-sp-small-size);
    font-weight: var(--text-sp-small-weight);
    line-height: var(--text-sp-small-lh);
  }

  /* 内容テキスト：text/sp/body（16px・400・175%・Sans） */
  .training__info-txt {
    font-family: var(--text-sp-body-family);
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* course-row：SP版は縦1列に変更 */
  .training__course-row {
    flex-direction: column;
  }

  /* カード見出し：text/sp/small（14px・700・175%・Sans） */
  .training__course-card-ttl {
    font-family: var(--text-sp-small-family);
    font-size:   var(--text-sp-small-size);
    font-weight: var(--text-sp-small-weight);
    line-height: var(--text-sp-small-lh);
  }

  /* カード内テキスト：text/sp/body（16px・400・175%・Sans） */
  .training__course-txt {
    font-family: var(--text-sp-body-family);
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* ラベル：text/sp/body（16px・400・175%・Sans） */
  .training__course-item-lbl {
    font-family: var(--text-sp-body-family);
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* テキストエリア：text/sp/body（16px・400・175%・Sans） */
  .training__course-item-txt {
    font-family: var(--text-sp-body-family);
    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) facilitator/index.html section/training SP版 */


/* ============================================================
   section/after：講座修了後の手続きセクション
   PC版（875px以上）/ SP版（874px以下）で表示切り替え
   （section-after--pc / section-after--sp で制御）
============================================================ */


/* ============================================================
   表示切り替え：PC版 / SP版
   - .section-after--pc  →  PC版HTML（875px以上で表示）
   - .section-after--sp  →  SP版HTML（874px以下で表示）
============================================================ */

/* デフォルト：SP版を非表示 */
.section-after--sp {
  display: none;
}

/* SP版（874px以下）：PC版を非表示・SP版を表示 */
@media screen and (max-width: 874px) {
  .section-after--pc {
    display: none;
  }
  .section-after--sp {
    display: block;
  }
} /* @media (max-width: 874px) facilitator/index.html section/after 表示切り替え */


/* ============================================================
   section-after：セクション全体
   - 背景色 --color-background-sub（薄緑）を全幅で表示
============================================================ */
.section-after {
  width: 100%;
  background: var(--color-background-sub);
}


/* ============================================================
   __inner：コンテンツの最大幅・余白制御
   - PC版：padding 80px/ gap 56px
   - SP版：padding 40px 16px/ gap 32px
============================================================ */
.section-after__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;         /* PC版 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;             /* PC版 */
}

/* SP版の inner（上書き） */
.section-after--sp .section-after__inner {
  padding: 40px 16px;    /* SP版 */
  gap: 32px;             /* SP版 */
}


/* ============================================================
   after-list：手続きリストのコンテナ
   - 白背景・primary枠・border-radius: 8px
   - PC版：padding 24px / gap 16px
   - SP版：padding 16px / gap 8px
============================================================ */
.after-list {
  display: flex;
  flex-direction: column;
  gap: 16px;             /* PC版 */
  width: 100%;
  padding: 24px;         /* PC版 */
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
}

/* SP版の after-list（上書き） */
.section-after--sp .after-list {
  padding: 16px;         /* SP版 */
  gap: 8px;              /* SP版 */
}


/* ============================================================
   __item：番号バッジ + 説明テキストの横並び行
   - gap: 16px
   - align-items: flex-start で num と desc を上揃え
   - border-bottom で各行の区切り線を表示
   - padding: 12px 0
============================================================ */
.after-list__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-secondary);
}

/* 最後のitem：border-bottomなし */
.after-list__item--last {
  border-bottom: none;
}


/* ============================================================
   __num：番号バッジ（緑丸）
   - size: 28×28px
   - border-radius: 14px で正円に
   - flex-shrink: 0 で縮まないよう固定
   - padding: 10px
============================================================ */
.after-list__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 10px;
  border-radius: 14px;   /* 正円 */
  background: var(--color-primary);
  flex-shrink: 0;        /* バッジは縮まないよう固定 */
}


/* ============================================================
   __num-txt：番号テキスト（1・2・3・4）
   - text/pc/small（16px / 700 / 175% / Sans）
   - color: white
   - white-space: nowrap で折り返し防止
============================================================ */
.after-list__num-txt {
  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-white);
  white-space: nowrap;
}


/* ============================================================
   __desc：説明テキスト
   - flex: 1 で残り幅を占有
   - min-width: 0 で flex item のはみ出しを防ぐ
   - 複数行になったとき文頭が num の右端に揃う
   - PC版：text/pc/body（18px / 400 / 175% / Sans）
   - SP版：text/sp/body（16px / 400 / 175% / Sans）
============================================================ */
.after-list__desc {
  flex: 1;
  min-width: 0;          /* flex 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);
}

/* SP版の desc：フォントサイズのみ上書き */
.section-after--sp .after-list__desc {
  font-size: var(--text-sp-body-size);
  font-weight: var(--text-sp-body-weight);
  line-height: var(--text-sp-body-lh);
}


/* ============================================================
   after-flow__img：フロー図画像
   - max-width で最大幅を制限し、それ以下の画面では縮小
   - height: auto でアスペクト比（縦横比）を維持
============================================================ */
.after-flow__img {
  max-width: 733px;
  width: 100%;       /* 親幅が733px未満のとき自動縮小 */
  height: auto;      /* アスペクト比を維持 */
  display: block;
}

/* SP版：max-widthをSP用サイズに上書き */
.section-after--sp .after-flow__img {
  max-width: 304px;
}


/* ============================================================
   .training 内のバッジ：SP版（874px以下）では
   common.css の .btn--badge（16px）を .btn--badge-sp 相当（14px）に上書き
============================================================ */
@media screen and (max-width: 874px) {

  .training .btn--badge .btn__lbl {
    font-size: var(--text-sp-small-size);
    line-height: var(--text-sp-small-lh);
  }

} /* @media (max-width: 874px) facilitator/index.html training内バッジ SP版 */


/* ============================================================
   faci-schedule：開催日程と申し込みセクション
   PC版・SP版でHTML構造は共通、メディアクエリで外観を切り替える
   ※ schedule/index.html の section/schedule とは別セクション
      クラス名を faci-schedule として区別する
============================================================ */


/* ============================================================
   faci-schedule：セクション全体
   - 背景色 --color-background-base（#FEFCF8）を全幅で表示
============================================================ */
.faci-schedule {
  width: 100%;
  background: var(--color-background-base);
}


/* ============================================================
   __inner：コンテンツの最大幅・余白制御
   - PC版：padding 80px / gap 56px
   - SP版：padding 40px 16px / gap 32px
============================================================ */
.faci-schedule__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;         /* PC版 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;             /* PC版 */
}

/* SP版の inner（上書き） */
@media screen and (max-width: 874px) {
  .faci-schedule__inner {
    padding: 40px 16px;  /* SP版 */
    gap: 32px;           /* SP版 */
  }
} /* @media (max-width: 874px) facilitator/index.html faci-schedule inner SP版 */


/* ============================================================
   __body：説明テキストエリア
   - display: flex + align-items: center で中央揃え
   - テキスト自体は左揃えを維持（text-align: left がデフォルト）
============================================================ */
.faci-schedule__body {
  width: 100%;
  display: flex;
  justify-content: center; /* テキストの塊を中央に配置 */
}


/* ============================================================
   __desc：説明テキスト
   - PC版：text/pc/lead（20px / 500 / 200% / Sans）
   - SP版：text/sp/lead（16px / 500 / 200% / Sans）
   - text-align はデフォルト（left）のまま
============================================================ */
.faci-schedule__desc {
  font-family: var(--font-sans);
  font-size: var(--text-pc-lead-size);
  font-weight: var(--text-pc-lead-weight);
  line-height: var(--text-pc-lead-lh);
  color: var(--color-text-body);
}



/* SP版の desc：フォントサイズのみ上書き */
@media screen and (max-width: 874px) {
  .faci-schedule__desc {
    font-size: var(--text-sp-lead-size);
    font-weight: var(--text-sp-lead-weight);
    line-height: var(--text-sp-lead-lh);
  }
} /* @media (max-width: 874px) facilitator/index.html faci-schedule desc SP版 */


/* ============================================================
   voices：養成講座参加者の感想セクション
   PC版・SP版でHTML構造は共通、メディアクエリで外観を切り替える
============================================================ */


/* ============================================================
   voices：セクション全体
   - 背景色 --color-background-sub（薄緑）を全幅で表示
============================================================ */
.voices {
  width: 100%;
  background: var(--color-background-sub);
}


/* ============================================================
   __inner：コンテンツの最大幅・余白制御
   - PC版：padding 80px / gap 56px
   - SP版：padding 40px 16px / gap 32px
============================================================ */
.voices__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;       /* PC版 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;           /* PC版 */
}

/* SP版の inner（上書き） */
@media screen and (max-width: 874px) {
  .voices__inner {
    padding: 40px 16px; /* SP版 */
    gap: 32px;          /* SP版 */
  }
} /* @media (max-width: 874px) facilitator/index.html voices inner SP版 */


/* ============================================================
   __row：カードリストのコンテナ
   - PC版：flex-wrap で2列に並べる
     - gap: 24px
     - 各カードが flex: 1 1 calc(50% - 12px) で均等2列
       ※ gap 24px の半分（12px）を引いて2列幅を計算
   - SP版：flex-direction: column で1列に切り替え
     - gap: 16px
============================================================ */
.voices__row {
  display: flex;
  flex-wrap: wrap;     /* PC版：折り返しで2列に */
  gap: 24px;           /* PC版 */
  width: 100%;
  align-items: stretch; /* 各カードの高さを揃える */
}

/* SP版の row（上書き） */
@media screen and (max-width: 874px) {
  .voices__row {
    flex-direction: column; /* SP版：1列に切り替え */
    gap: 16px;              /* SP版 */
  }
} /* @media (max-width: 874px) facilitator/index.html voices row SP版 */


/* ============================================================
   __card：感想カード（1枚）
   - PC版：flex: 1 1 calc(50% - 12px) で均等2列
     - min-width: 0 で flex item のはみ出しを防ぐ
   - SP版：width: 100% で1列いっぱいに広がる
   - 白背景・左ボーダー 3px solid primary
   - 右上・右下のみ border-radius: 8px（左は角丸なし）
   - padding: 16px / gap: 8px
============================================================ */
.voices__card {
  flex: 1 1 calc(50% - 12px); /* PC版：2列均等（gap 24px の半分を引く） */
  min-width: 0;                /* flex item のはみ出しを防ぐ */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--color-white);
  border-left: 3px solid var(--color-primary); /* 左ボーダーのみ */
  border-radius: 0 8px 8px 0; /* 右上・右下のみ角丸 */
}

/* SP版の card（上書き） */
@media screen and (max-width: 874px) {
  .voices__card {
    flex: none;   /* PC版の flex 指定を無効化 */
    width: 100%;  /* SP版：親幅いっぱいに広がる */
  }
} /* @media (max-width: 874px) facilitator/index.html voices card SP版 */


/* ============================================================
   フェードインのずらし表示（受講者の声：6枚）
   - 基本挙動はcommon.css側。ここではtransition-delayのみ追加
   - PC版は2列で同じ行の2枚が同時に画面へ入るため、0.25s刻みで
     1枚ずつ順に見えるようにしている
============================================================ */
.voices__row .voices__card:nth-child(1) { transition-delay: 0s;    }
.voices__row .voices__card:nth-child(2) { transition-delay: 0.25s; }
.voices__row .voices__card:nth-child(3) { transition-delay: 0.5s;  }
.voices__row .voices__card:nth-child(4) { transition-delay: 0.75s; }
.voices__row .voices__card:nth-child(5) { transition-delay: 1s;    }
.voices__row .voices__card:nth-child(6) { transition-delay: 1.25s; }


/* ============================================================
   __card-ttl：カードタイトル（「参加者の声（1）」など）
   - PC版：text/pc/small（16px / 700 / 175% / Sans）
   - SP版：text/sp/small（14px / 700 / 175% / Sans）
   - color: --color-primary（緑）
   - white-space: nowrap で折り返し防止
============================================================ */
.voices__card-ttl {
  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-primary);
  white-space: nowrap;
}

/* SP版の card-ttl（上書き） */
@media screen and (max-width: 874px) {
  .voices__card-ttl {
    font-size: var(--text-sp-small-size);
    line-height: var(--text-sp-small-lh);
  }
} /* @media (max-width: 874px) facilitator/index.html voices card-ttl SP版 */


/* ============================================================
   __card-txt：感想テキスト
   - PC版：text/pc/body（18px / 400 / 175% / Sans）
   - SP版：text/sp/body（16px / 400 / 175% / Sans）
   - color: --color-text-body（#3D3D3D）
============================================================ */
.voices__card-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);
}

/* SP版の card-txt（上書き） */
@media screen and (max-width: 874px) {
  .voices__card-txt {
    font-size: var(--text-sp-body-size);
    line-height: var(--text-sp-body-lh);
  }
} /* @media (max-width: 874px) facilitator/index.html voices card-txt SP版 */