@charset "utf-8";

/* ============================================================
   section/schedule：ファシリテーター養成講座 日程セクション

   PC版（875px以上）でPC版HTMLを表示・SP版HTMLを非表示
   SP版（874px以下）でSP版HTMLを表示・PC版HTMLを非表示
   （section-schedule--pc / section-schedule--sp で制御）
============================================================ */


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

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

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


/* ============================================================
   section-schedule：セクション全体（PC / SP 共通の外枠）
   - 背景色は全幅で表示
   - 内側の __inner で最大幅を制御
============================================================ */
.section-schedule {
  width: 100%;
  background: var(--color-background-base);
}

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

/* SP版の inner（上書き） */
.section-schedule--sp .section-schedule__inner {
  padding: 40px 16px;   /* SP版の余白 */
  gap: 32px;            /* SP版：各パーツの間隔 */
}


/* ============================================================
   __ttl-group：セクション見出しエリア
   - PC版：padding-bottom 24px / border-bottom 1px solid primary
   - SP版：padding-bottom 16px
   ※ common.css の .ttl-area とは別構造（deco なし）
============================================================ */
.section-schedule__ttl-group {
  position: relative;     /* ::after（全幅下線）の基準位置にする */
  width: 100%;
  padding-bottom: 24px;   /* PC版 */
  max-width: 820px;
  margin: 0 auto;         /* 左右中央配置（左右ともautoにする） */
}

/* 下線：__inner の幅いっぱいに広げる
   - __ttl-group 自体は max-width: 820px で中央配置されているため、
     border-bottom ではテキスト幅分しか線が伸びない
   - ::after を position: absolute + left: 50% + translateX(-50%) で
     __ttl-group の中心を基準に、親（__inner）の幅まで広げて表示する
*/
.section-schedule__ttl-group::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(100vw - 160px);   /* __inner の padding(80px×2) 分だけ引く */
  max-width: 1280px;             /* __inner の max-width(1440px) - padding(80px×2) */
  transform: translateX(-50%);
  border-bottom: 1px solid var(--color-primary);
}

/* SP版の ttl-group（上書き） */
.section-schedule--sp .section-schedule__ttl-group {
  padding-bottom: 16px;   /* SP版 */
}

.section-schedule--sp .section-schedule__ttl-group::after {
  width: calc(100vw - 32px);  /* SP版：__inner の padding(16px×2) 分を引いて全幅に */
  max-width: none;             /* PC版の max-width(1280px) をリセット */
}


/* ============================================================
   __ttl：セクション見出しテキスト
   - PC版：text/pc/heading-m（32px / 700 / 150% / Serif）
   - SP版：text/sp/heading-m（20px / 700 / 150% / Serif）
============================================================ */
.section-schedule__ttl {
  font-family: var(--font-serif);
  font-size: var(--text-pc-heading-m-size);
  font-weight: var(--text-pc-heading-m-weight);
  line-height: var(--text-pc-heading-m-lh);
  color: var(--color-text-heading);
  text-align: center;     /* 見出しテキストを水平中央に */
}

/* SP版の ttl（上書き） */
.section-schedule--sp .section-schedule__ttl {
  font-size: var(--text-sp-heading-m-size);
  font-weight: var(--text-sp-heading-m-weight);
  line-height: var(--text-sp-heading-m-lh);
}


/* ============================================================
   __desc：説明文テキスト
   - PC版：text/pc/body（18px / 400 / 175% / Sans）
   - SP版：text/sp/body（16px / 400 / 175% / Sans）
============================================================ */
.section-schedule__desc {
  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;
  margin: 0 auto;         /* 左右中央配置（左右ともautoにする） */
}

/* SP版の desc（上書き） */
.section-schedule--sp .section-schedule__desc {
  font-size: var(--text-sp-body-size);
  font-weight: var(--text-sp-body-weight);
  line-height: var(--text-sp-body-lh);
}


/* ============================================================
   __list：カードリスト
   - カードを縦に並べるコンテナ
   - PC版：gap 32px
   - SP版：gap 24px
============================================================ */
.section-schedule__list {
  display: flex;
  flex-direction: column;
  gap: 32px;    /* PC版 */
  width: 100%;
}

/* SP版の list（上書き） */
.section-schedule--sp .section-schedule__list {
  gap: 24px;    /* SP版 */
}


/* ============================================================
   card-schedule：PC版カード（1枚）
   - border: 1px solid primary
   - border-radius: 8px
   - padding: 16px 20px
   - gap: 12px（header / body / footer の間隔）
============================================================ */
.card-schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;             /* header / body / footer の間隔 */
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;      /* border-radius に合わせて子要素をクリップ */
}


/* ------------------------------------------------------------
   __header：バッジ × 2 + 申込期間テキストの横並び
   - gap: 16px
   - align-items: center で縦中央揃え
------------------------------------------------------------ */
.card-schedule__header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow: hidden;
}


/* ------------------------------------------------------------
   __period：申込期間 ラベル + 日付テキストの横並び
   - flex: 1 で残り幅を占有
   - text/pc/lead（20px / 500 / 200% / Sans）
------------------------------------------------------------ */
.card-schedule__period {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  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-heading);
}

/* 「申込期間：」ラベル（折り返しなし） */
.card-schedule__period-lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 日付テキスト */
.card-schedule__period-txt {
  flex: 1;
  min-width: 0;
}

/* 各行（p タグ） */
.card-schedule__period-txt p {
  line-height: var(--text-pc-lead-lh);
  margin: 0;
}


/* ------------------------------------------------------------
   __body：基礎講座 + 実践講座の横並びコンテナ
   - gap: 16px
   - align-items: start で高さが異なっても上揃えに
   - white-space: nowrap はテキストへの適用を避けるため
     この要素には付けず、子要素で制御
------------------------------------------------------------ */
.card-schedule__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}


/* ------------------------------------------------------------
   __course-area：基礎講座 / 実践講座 エリア
   - flex: 1 で均等幅（2列）
   - min-width: 0 で flex item がはみ出ないよう制御
   - background: --color-background-sub（薄緑）
   - border-radius: 6px
   - padding: 8px 12px
   - gap: 4px（ttl と txt の間隔）
------------------------------------------------------------ */
.card-schedule__course-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--color-background-sub);
  border-radius: 6px;
}


/* ------------------------------------------------------------
   __course-ttl：「基礎講座」「実践講座」ラベル
   - text/pc/small（16px / 700 / 175% / Sans）
   - color: --color-text-caption（#5B6B67 グレー）
------------------------------------------------------------ */
.card-schedule__course-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-text-caption);
}


/* ------------------------------------------------------------
   __footer：詳細・申込リンクエリア（申込受付中カードのみ）
   - border-top: 1px solid --color-secondary
   - padding-top: 4px
   - justify-content: center でリンクを中央揃え
------------------------------------------------------------ */
.card-schedule__footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
  border-top: 1px solid var(--color-secondary);
  width: 100%;
}


/* ------------------------------------------------------------
   __btn-detail：「詳細・申込はこちら →」リンク
   - text/pc/small（16px / 700 / 175% / Sans）
   - color: --color-primary（緑）
   - border-bottom: 1px solid primary（下線）
   - padding: 4px 0
   ※ common.css の .btn--ghost に近いが別スタイル
      （ghost は矢印画像 / こちらはテキスト矢印）
------------------------------------------------------------ */
.card-schedule__btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  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);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  white-space: nowrap;
}

/* ホバー時：少し透明にして押せる感を演出 */
.card-schedule__btn-detail:hover {
  opacity: 0.75;
}

/* ラベル・矢印は .card-schedule__btn-detail から継承 */


/* ============================================================
   card-schedule-sp：SP版カード（1枚）
   - 基本スタイルは card-schedule に準ずる
   - border-radius・padding・構造が一部異なる
============================================================ */
.card-schedule-sp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
}


/* ------------------------------------------------------------
   __header（SP版）：バッジ行 + 申込期間行の縦積み
   - flex-direction: column
   - gap: 12px
------------------------------------------------------------ */
.card-schedule-sp__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}


/* ------------------------------------------------------------
   __badge-row：バッジ2つの横並び行
   - gap: 8px
------------------------------------------------------------ */
.card-schedule-sp__badge-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}


/* ------------------------------------------------------------
   __info-row：申込期間 ラベル + 日付テキスト の横並び
   - gap: 4px
   - text/sp/lead（16px / 500 / 200% / Sans）
------------------------------------------------------------ */
.card-schedule-sp__info-row {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sp-lead-size);
  font-weight: var(--text-sp-lead-weight);
  line-height: var(--text-sp-lead-lh);
  color: var(--color-text-heading);
}

/* 「申込期間：」ラベル（折り返しなし） */
.card-schedule-sp__period-lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 日付テキスト（2行に折り返す） */
.card-schedule-sp__period-txt {
  flex: 1;
  min-width: 0;
}

/* 日付テキストの各行（p タグ）*/
.card-schedule-sp__period-txt p {
  line-height: var(--text-sp-lead-lh);
  margin: 0;
}


/* ------------------------------------------------------------
   __body（SP版）：基礎講座 + 実践講座の縦並びコンテナ
   - flex-direction: column
   - gap: 16px
------------------------------------------------------------ */
.card-schedule-sp__body {
  display: flex;
  flex-direction: column; /* SP版：縦並び（PC版は横並び） */
  gap: 16px;
  width: 100%;
}


/* ------------------------------------------------------------
   __course-area（SP版）：基礎 / 実践 エリア
   - PC版と同スタイル（padding・background・gap）
   - width: 100% で親幅いっぱいに広がる
------------------------------------------------------------ */
.card-schedule-sp__course-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  width: 100%;
  background: var(--color-background-sub);
  border-radius: 6px;
}


/* ------------------------------------------------------------
   __course-ttl（SP版）：「基礎講座」「実践講座」ラベル
   - text/sp/small（14px / 700 / 175% / Sans）
   - color: --color-text-caption（#5B6B67）
   - white-space: nowrap でテキストの折り返しを防ぐ
------------------------------------------------------------ */
.card-schedule-sp__course-ttl {
  font-family: var(--font-sans);
  font-size: var(--text-sp-small-size);
  font-weight: var(--text-sp-small-weight);
  line-height: var(--text-sp-small-lh);
  color: var(--color-text-caption);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   __txt-area：日程アイテムのまとまり（gap: 8px）
------------------------------------------------------------ */
.card-schedule-sp__txt-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}


/* ------------------------------------------------------------
   __item：「1日目：」ラベル + 日付テキストの横並び行
   - gap: 4px
   - text/sp/body（16px / 400 / 175% / Sans）
   - color: --color-text-body（#3D3D3D）
------------------------------------------------------------ */
.card-schedule-sp__item {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sp-body-size);
  font-weight: var(--text-sp-body-weight);
  line-height: var(--text-sp-body-lh);
  color: var(--color-text-body);
}

/* 「1日目：」「半日：」ラベル（折り返しなし） */
.card-schedule-sp__item-lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 日付・配信方式テキスト（2行に折り返す） */
.card-schedule-sp__item-txt {
  flex: 1;
  min-width: 0;
}

/* 各行（p タグ）*/
.card-schedule-sp__item-txt p {
  line-height: var(--text-sp-body-lh);
  margin: 0;
}


/* ------------------------------------------------------------
   __footer（SP版）：詳細・申込リンクエリア
   - PC版と同スタイル
------------------------------------------------------------ */
.card-schedule-sp__footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
  width: 100%;
}


/* ------------------------------------------------------------
   __btn-detail（SP版）：「詳細・申込はこちら →」リンク
   - text/sp/small（14px / 700 / 175% / Sans）
   - PC版と同構造・フォントサイズのみ sp 用
------------------------------------------------------------ */
.card-schedule-sp__btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: var(--text-sp-small-size);
  font-weight: var(--text-sp-small-weight);
  line-height: var(--text-sp-small-lh);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  white-space: nowrap;
}

.card-schedule-sp__btn-detail:hover {
  opacity: 0.75;
}

/* ラベル・矢印は .card-schedule-sp__btn-detail から継承 */


/* ============================================================
   badge 文字サイズ：極小画面（324px以下）
   .btn--badge-sp の font-size を 14px → 12px に縮小
   ※ common.css の 374px 以下対応に準じた追加対応
============================================================ */
@media screen and (max-width: 324px) {

  .btn--badge-sp .btn__lbl {
    font-size: 12px;
  }

} /* @media (max-width: 324px) schedule/index.html バッジ縮小（324px以下） */


/* ------------------------------------------------------------
   __txt-area（PC版）：日程アイテムのまとまり
   - SP版の .card-schedule-sp__txt-area に対応するPC版
   - gap: 8px
------------------------------------------------------------ */
.card-schedule__txt-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}


/* ------------------------------------------------------------
   __item（PC版）：「1日目：」ラベル + 日付テキストの横並び行
   - SP版の .card-schedule-sp__item に対応するPC版
   - text/pc/body（18px / 400 / 175% / Sans）
------------------------------------------------------------ */
.card-schedule__item {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  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);
}

/* 「1日目：」「半日：」ラベル（折り返しなし） */
.card-schedule__item-lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 日付・配信方式テキスト（複数行に折り返す） */
.card-schedule__item-txt {
  flex: 1;
  min-width: 0;
}

/* 各行（p タグ） */
.card-schedule__item-txt p {
  line-height: var(--text-pc-body-lh);
  margin: 0;
}