/* youseikouza.css — 04 日本語教師養成講座 ページ固有スタイル
 * 共通土台は common.css / tokens.css。ここは 04 固有セクションのみ。
 * 出典: Figma kzTXSP2Y1uDm9ruZ9zmFLB
 *   hero=2157:16516 / breadcrumb-bar=2157:16523 / top-banner=2157:16551 / course-overview=2157:16553
 * 色は「白地・色地の上に載る固定色」が多いため、テーマで反転しないよう主要値は明示指定
 * （course-section が白テキストを直書きするのと同じ方針）。
 */

/* ==========================================================
 * 1. hero-section（2157:16516）— フルブリード装飾ヒーロー
 *   ストライプ＋顔写真の合成画像を背景に、左端の白ボックスにキャッチコピーを載せる。
 * ========================================================== */
.hero__photo {
  /* 縦位置は Figma 実値（fill top -15.5% / height 126.8% ≒ position-y 52%）。 */
  background: #ffffff url("../pageimg/youseikouza/images/hero-bg.webp") center 52% / cover no-repeat;
}


/* ==========================================================
 * 2. breadcrumb-bar（2157:16523）— タイトル＋パンくず
 * ========================================================== */


.breadcrumb-bar__crumbs { flex: none; padding: var(--space-12) var(--space-24); }


/* ==========================================================
 * 3. top-banner（2157:16551）— キャンペーンバナー
 *   回転文字・特殊フォント・ドロップシャドウの装飾帯のため 2x 相当画像で再現。
 *   リンク先はライブに定義が無いため /contact/ に仮置き（README TODO）。
 * ========================================================== */


/* ==========================================================
 * 4. course-overview — 共通化（assets/css/common.css: promoted (Pattern A)）
 *   ページ固有＝吹き出し雲の背景画像 url のみ残置（レイアウトは common）。
 * ========================================================== */
.ov-question__cloud { background: url("../images/overview-cloud.svg") no-repeat center / 100% 100%; }

/* cap-trim 残置：si-ratio/si-review は si- 据え置きのため 04 に残す（cta-pill は cta-section 昇格で common へ移設済み） */
@supports (text-box-trim: trim-both) {
  .si-ratio__num, .si-review .si-heading {
    text-box-trim: trim-both; text-box-edge: cap alphabetic;
  }
}
@supports not (text-box-trim: trim-both) {
  .si-ratio__num { line-height: 40px; }
  .si-review .si-heading { line-height: 1.18; }
}

/* ==========================================================
 * 5. course-details — 共通化（assets/css/common.css: promoted (Pattern A)）
 *   ページ固有＝ストライプ帯の背景画像 url のみ（レイアウトは common）。
 * ========================================================== */
.cd-head { background-image: url("../images/si2-banner-stripes.webp"); }

/* ==========================================================
 * 6. cta-section — 共通化（assets/css/common.css: promoted (Pattern A)）
 *   04/06/08 共有。PC/SP とも common.css へ verbatim 昇格（04 の figma-parity 値）。
 *   ページ固有差分なし（ブローシャ/お祝い画像は canonical /assets/images/ 共有）。
 * ========================================================== */

/* ==========================================================
 * 7. reasons-section — 共通化（assets/css/common.css: promoted (Pattern A)）
 *   ページ固有＝実績/環境カードの中身（写真・アイコン・数値）は HTML 側。
 * ========================================================== */

/* ==========================================================
 * 8. Responsive — 768px 単一境界（REQUIREMENTS §5）
 * ========================================================== */
@media (max-width: 767px) {
  /* hero */
             /* 300px */
  
        /* 装飾英字を約60%へ */
  

  /* breadcrumb-bar：パンくずリンクは SP で非表示、タイトルは縮約 */
  .breadcrumb-bar {
    min-height: 0;
    padding: var(--space-24) var(--pad-x-sp);
  }
  .breadcrumb-bar__crumbs { display: none; }


  /* top-banner */


  /* cta-section SP は common.css へ昇格（promoted Pattern A）→ 04 も consume */
}

/* ==========================================================
 * 9. school-info-section（2157:16880）— 通学/通信ハイブリッドコース詳細（bg #F1F5F9）
 *   最大セクション。8サブブロックを si-stack に縦積み（Figma上のブロック間隔 112px）。
 *   白地・色地に載る固定色が多いためテーマ非反転（主要値は明示指定）。
 * ========================================================== */
.school-info { background: var(--bg-school-info); }              /* #F1F5F9 */

/* 共通：見出しを持つコンテンツブロック（バナー以外）。左右 90px、内部 gap 64 */


/* --- 9.1 banner：斜めストライプ＋白カード＋写真 --- */
.si-banner {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.si-banner::before {                                             /* 左：レインボー斜めストライプ */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 665px;
  max-width: 48%;
  background: url("../pageimg/youseikouza/images/banner-stripes.webp") center / cover no-repeat;
  z-index: 1;   /* 【feedback-04 2026-07-09】写真より前面（Figma 2157:16883：ストライプ帯は写真の左端に被さる）。card(z2)は上。*/
}
.si-banner__photo {                                             /* 右：写真 */
  position: absolute;
  right: 0; top: 0;
  width: 1136px;                               /* 【figma-parity】Figma 実寸（クロップ焼き込み済みアセット） */
  max-width: 79%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.si-banner__card {
  position: relative;
  z-index: 2;
  margin-left: 28px;
  width: 609px;
  max-width: calc(100% - 56px);
  box-sizing: border-box;
  background: #ffffff;
  padding: 64px 24px;                          /* 【figma-parity】Figma py-64 */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}
.si-banner__top {
  display: flex;
  gap: 14px;                                   /* 【figma-parity】Figma 14px */
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: var(--space-24) 0 27px;
  border-top: 1px solid #131936;
  border-bottom: 1px solid #131936;
}
.si-banner__badge { height: 66px; width: auto; flex: none; }  /* 【figma-parity】人気NO.1 バッジは Figma 実寸 238×66 */
.si-banner__limited {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  color: #131936;
}
.si-banner__lead { display: flex; flex-direction: column; gap: var(--space-16); }
.si-banner__title {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1.35;
  color: var(--c-accent-blue);                                   /* #2149ff */
}
.si-banner__desc {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.6;
  color: #131936;
}

/* --- 9.2 review：こんな方におすすめ（3列＋縦罫） --- */
.si-review__grid { display: flex; justify-content: center; background: #ffffff; }  /* 【feedback-04 2026-07-09】Figma 2157:16903 の白カード（bg color/brand/white）。地色 #F1F5F9 に載せる */
.si-review__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32) 0;
  text-align: center;
}
.si-review__item + .si-review__item { border-left: 1px solid var(--c-brand-100); }  /* 【figma-parity】本文は固定改行のため左右paddingなし（Figma text w=380） */
.si-review__illust { height: 140px; width: auto; }
.si-review__text {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);                                /* 【figma-parity/Codex】カンプ実測＝通常ウェイト・左揃え・20px/1.8・固定改行 */
  font-size: var(--fs-lead);                                     /* 20px */
  line-height: 1.8;
  text-align: left;
  color: #131936;
}

/* --- 9.3 access：アクセス・通学先 --- */
.si-access__row { display: flex; align-items: center; gap: var(--space-48); background: #ffffff; }  /* 【feedback-04 2026-07-09】Figma 2157:17820 の白カード（bg color/brand/white）。写真は左端フラッシュ */
.si-access__photo {
  /* 【figma-parity 2026-07-07】Figma 実寸 605×341（クロップ焼き込み済みアセット）。
     素材 native 解像度不足による拡大ボケは残る＝本番差し替え TODO（README） */
  flex: 0 1 605px;
  width: 605px;
  max-width: 50%;
  height: 341px;
  object-fit: cover;
}
.si-access__text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 2.4;
  color: #131936;
}

/* --- 9.4 learn：ハイブリッドコースの学び方 --- */
.si-learn__head { display: flex; flex-direction: column; gap: var(--space-32); text-align: center; }
.si-learn__sub {
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #131936;
}
.si-learn__panel {
  background: #ffffff;
  padding: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
}
.si-learn__ratios { display: flex; align-items: stretch; justify-content: space-between; min-height: 300px; }  /* 【figma-parity】Figma は300px行 */
.si-ratio {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;                     /* 【figma-parity】300px行に対して縦センタリング */
  gap: var(--space-32);
  padding: 0;   /* 【feedback-04 2026-07-09】左右余白を撤去（Figma 2157:17821 の列は padding 無し・列間は罫線側で確保）。24px余白が nowrap lead を圧迫し不要な折返しを起こしていた */
}
.si-ratio + .si-ratio { border-left: 1px solid var(--c-brand-100); }
.si-ratio__lead {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.6;
  color: #131936;
  text-align: left;   /* 【feedback-04 2026-07-09】Figma 2157:17821 の lead は左揃え（旧 center を是正） */
}
@media (min-width: 1440px) {
  .si-ratio__lead { white-space: nowrap; }     /* 【figma-parity】Figma は nowrap（1440厳密帯のみ） */
}
.si-ratio__box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.si-ratio__bar {
  width: 100%;
  background: var(--c-blue-500);                                 /* #005efe */
  color: #ffffff;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  padding: 0;                                  /* 【figma-parity】Figma は padding 無し（バー高 = 行高 32.4px） */
}
.si-ratio__stats { display: flex; gap: var(--space-56, 56px); justify-content: center; }
.si-ratio__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--c-blue-900);                                      /* #143196 */
}
.si-ratio__stat img { height: 48px; width: auto; }
.si-ratio__name { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.8; }
.si-ratio__num {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1.4;
}
.si-ratio__num span { font-size: 32px; }

.si-learn__online { display: flex; gap: var(--space-48); align-items: center; }
.si-learn__figure { flex: 1 1 0; min-width: 0; }
.si-learn__figure img { width: 100%; height: 340px; object-fit: cover; display: block; }
.si-learn__online-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-32); }
.si-learn__online-text {
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #131936;
}
.si-learn__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}
.si-learn__list li {
  position: relative;
  padding-left: var(--space-20);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.4;
  color: #131936;
}
.si-learn__list li::before {
  content: "";
  position: absolute;
  left: 3px; top: 0.5em;
  width: 10px; height: 10px;
  border-radius: var(--radius-5);
  background: var(--c-accent-blue);                              /* #2149ff */
}

/* --- 9.5 outcomes：ドーナツ（CSS conic-gradient で再現） --- */
.si-outcomes__row { display: flex; gap: var(--space-16); align-items: stretch; }
.si-outcome {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.si-outcome__title {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 1.45;
  color: var(--c-accent-blue);
  text-align: center;
}
.si-outcome__sub { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.55; color: #131936; text-align: center; }
.si-outcome__note { margin-top: auto; font-family: var(--font-jp); font-size: var(--fs-body-sm); line-height: 1.4; color: #131936; text-align: center; }
/* .si-donut 群（webp版）は common.css へ単一ソース化（2026-07-09・画像 donut-891/100.webp も assets/images 配下へ移設）。04 は consume。 */

/* --- 9.6 elements：修了後の活躍を支える4つの要素（2×2・番号はイラスト内包） --- */
.si-elements__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 192px 200px; gap: var(--space-24) var(--space-16); }  /* 【figma-parity/Codex】Figma 実値: 行高192/200・gap-y24/gap-x16 */
.si-element {
  background: #ffffff;
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;                     /* 【figma-parity】テキスト列は上詰め（h192・pt24） */
  overflow: hidden;
}
.si-element__figure { flex: none; width: 205px; align-self: center; }
.si-element__figure img { width: 100%; height: auto; display: block; }
.si-element__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24) var(--space-16); min-height: 192px; }  /* 【figma-parity/Codex】Figma h192・px16 両側＝本文実幅375px */
.si-element__title { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 20px; line-height: 1.6; color: var(--c-accent-blue); }
.si-element__text { font-family: var(--font-jp); font-size: var(--fs-body); line-height: var(--lh-body); color: #131936; }

/* --- 9.7 fee：受講スケジュール（comparison-table）＋受講料 --- */


/* schedule table = comparison-table（HTML+CSS・画像化禁止）。data-table を継承しつつ小型に上書き */


/* 受講料：斜め装飾シェイプ＋価格＋キャンペーン */


/* --- 9.8 related：関連導線カード＋個別面談 --- */
.si-related { gap: var(--space-24); }
.si-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }


/* ==========================================================
 * 9x. school-info タブレット補助（1023px）
 * ========================================================== */
@media (max-width: 1023px) {
  
  .si-review__grid { flex-wrap: wrap; }
  .si-review__item { flex: 1 1 45%; }
  
}

/* ==========================================================
 * 9y. school-info レスポンシブ（768px 単一境界）
 * ========================================================== */
@media (max-width: 767px) {
    /* 64 */
  
                      /* 30px */

  /* banner：カード上・写真下に縦積み */
  .si-banner { flex-direction: column; min-height: 0; align-items: stretch; }
  .si-banner::before { width: 100%; max-width: none; height: 100%; z-index: 0; }  /* SP は縦積み＝写真被せ不要。現行の重なり順を維持 */
  .si-banner__photo { position: static; width: 100%; max-width: none; height: 240px; order: 2; }  /* 【追加指示 2026-07-08】横幅いっぱい（max-width:79%解除） */
  .si-banner__card { width: auto; max-width: none; margin: 24px 12px; padding: 32px 12px; order: 1; }  /* 【追加指示 2026-07-08】margin/padding 12 */
  .si-banner__title { font-size: 26px; line-height: 1.4; }  /* 【追加指示 2026-07-08】34pxは狭幅(~320px)で「ハイブリッドコー/ス」と汚く3行折れ→26pxで2行安定 */
  .si-banner__desc { font-size: 16px; }
  .si-banner__limited { font-size: 16px; text-align: center; }
  /* 【追加指示 2026-07-08】バッジ+「定員20名〜」が横並びで潰れ縦書き化→SPは縦積み中央 */
  .si-banner__top { flex-direction: column; align-items: center; gap: var(--space-12); }
  .si-banner__badge { height: auto; width: min(238px, 90%); }

  /* review：縦積み＋上罫 */
  .si-review__grid { flex-direction: column; }
  .si-review__item { padding: var(--space-24) 0; }
  .si-review__text br { display: none; }
  .cta-banner__note br, .si-learn__online-text br, .si-element__text br { display: none; }
  .si-review__text { font-size: var(--fs-body); }
  .si-review__item + .si-review__item { border-left: 0; border-top: 1px solid var(--c-brand-100); }

  /* access：縦積み */
  .si-access__row { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .si-ratio__lead { white-space: normal; }
  .si-access__photo { width: 100%; max-width: none; flex: none; }
  .si-access__text { font-size: 16px; line-height: 2; }

  /* learn */
  .si-learn__panel { padding: var(--space-24); gap: var(--space-48); }
  .si-learn__ratios { flex-direction: column; gap: var(--space-32); }
  .si-ratio { padding: 0; gap: var(--space-16); }
  .si-ratio + .si-ratio { border-left: 0; border-top: 1px solid var(--c-brand-100); padding-top: var(--space-32); }
  .si-ratio__num { font-size: 48px; }
  .si-ratio__num span { font-size: 26px; }
  .si-learn__online { flex-direction: column; align-items: stretch; }
  .si-learn__figure img { height: 220px; }
  .si-learn__list { grid-template-columns: 1fr; gap: var(--space-16); }
  .si-learn__list li { font-size: 17px; }

  /* outcomes */
  .si-outcomes__row { flex-direction: column; }
  .si-outcome__title { font-size: 22px; }
  /* .si-donut SP は common.css へ単一ソース化（2026-07-09） */

  /* elements */
  .si-elements__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  /* 【追加指示 2026-07-08】イラスト→見出し→本文の縦順に（overflow:hidden＋body flex:1で見出しが切れる不具合を解消） */
  .si-element { flex-direction: column; align-items: center; padding-right: 0; overflow: visible; height: auto; }
  .si-element__figure { width: 130px; align-self: center; flex: none; }
  .si-element__body { flex: 0 0 auto; padding-block: var(--space-20); min-height: 0; align-items: center; text-align: center; }

  /* fee：スケジュールカード縦積み、テーブルは table-scroll で横スクロール */


                      /* 6列は横スクロールさせる */
   /* 3列は収まるためヒント非表示 */


               /* 25px */


  /* related */
  .si-related__grid { grid-template-columns: 1fr; }
  
             /* 21px */
  
  
}

/* ==========================================================
 * photo-gallery — 共通化（assets/css/common.css: promoted (Pattern A)）
 *   ページ固有＝モザイク写真（HTML の <img>）。レイアウト/カルーセルは common。
 * ========================================================== */

/* ==========================================================
 * 11. teacher-message（2157:17864）— 講師からのメッセージ
 *   背景に Inter 特大装飾文字 "MESSAGE"（静的・overflow:hidden でクリップ）。
 *   image-left / image-right の交互行 → SP は縦積み（画像先頭）。
 * ========================================================== */

/* 【figma-parity 2157:17864】集合写真：Figma は full画像(2400x1320)を w1225 で描画し、上端 58.7%(=可視395.7px)だけ見せ
   下半身はセクション下端で切れる（bleed）。→ full画像を top合わせで敷き、可視枠 aspect-ratio 1225/396 で overflow クリップ。
   aspect-ratio 方式なので SP(width:100%) でも常に「上 58.7% を表示」が保たれる（img aspect 2400/1320 に対する枠比で一定）。 */
.teacher-message__group { position: relative; margin: 44px 0 0 17.5px; width: 1225px; aspect-ratio: 1225 / 396; overflow: hidden; }
/* img は絶対配置＝フローから外し、枠(aspect-ratio)を伸ばさせない。top合わせ＋overflow で下半身(=下 41.3%)をクリップ＝Figmaのbleed再現。 */
.teacher-message__group img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }


/* ==========================================================
 * 12. photo-gallery / teacher-message レスポンシブ（768px）
 * ========================================================== */
@media (max-width: 767px) {
  /* teacher-message */
  
  .teacher-message__group { margin: 0; width: 100%; }
     /* 特大装飾を約 40% に縮約・クリップ */
  
     /* 25px */
  
          /* SP は画像を先頭に */


}

/* ==========================================================
 * 13. school-info-section #2（2157:17886）＋ faq 再掲（2157:17865）＋ SNS（2157:18113）
 *   ページ下部の導線・アクセス群。複数バンドを縦積み。白地/色地の固定色はテーマ非反転。
 *   共通の「見出し(eyebrow+title+sub) → コンテンツ → 青文字リンクボタン」パターンを si2-* 化。
 * ========================================================== */

/* --- 13.0 banner（2157:17887）レインボー斜めストライプ帯（純装飾・reuse banner-stripes.webp） --- */
/* 【figma-parity】高さは Figma 実値 610px（42.4vw ≒ 610/1440）。
   柄は 665px タイルの繰り返しだと並びが Figma と一致しない → Figma 実画像 si2-banner-stripes.webp（2880×1442=2x）を
   fill 実値（w100% h118.2% top0 ＝ 100% auto・上詰め）で敷く */

.si2-banner__stripes {
  display: block; width: 100%; height: 100%;
  background: url("../images/si2-banner-stripes.webp") top center / cover no-repeat;
}

/* --- 13.1 バンド枠・見出し・リンクボタン（共通） --- */
                     /* 120px */
             /* #eaf0ff */

        /* #f1f5f9 */


  /* 26 */
   /* 44 */


/* 【figma-parity】Figma はタイトル→サブ文の gap32（flex gap8 ＋ 24）。teachers バンドのみ gap16 */


  /* #22c55e */


/* --- 13.2 review（口コミ・レビュー・コラム）2 カード --- */


/* 【figma-parity 2026-07-07】review-voices/magenta-auditorium の解像度キャップ（300px/1100px）は
   デザインレイアウトからの乖離が大きすぎたため撤廃し、Figma 実寸レイアウト（1fr グリッド／1260px）に復帰。
   素材が低解像度（native 300px/1100px）による拡大ボケは残る＝「本番で高解像度素材に差し替え」を README TODO 化。 */

/* --- 13.3 events（セミナー・イベント）4 バナー --- */


/* --- 13.4 taisaku（合格対策）チェックカード 2×2 --- */


/* --- 13.5 recruit（求人・採用）左テキスト＋右写真＋背景の紺ウェッジ --- */
/* 【figma-parity】バンドは pt80/pb120。紺の斜め装飾は Figma 実ベクター（1068×917 @ x852,y-24.67） */
.si2-recruit { position: relative; overflow: hidden; padding: 80px 0 120px; }
.si2-recruit::before {
  content: "";
  position: absolute; left: 852px; top: -24.67px;
  width: 1068px; height: 917px;
  background: url("../pageimg/youseikouza/images/si2-recruit-wedge.svg") 0 0 / 100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}
.si2-recruit__inner { position: relative; z-index: 1; }
.si2-recruit__head { align-self: flex-start; }
.si2-recruit__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-48); width: 100%; }

.si2-recruit .si2-linkbtn { margin-top: var(--space-24); }   /* Figma: ボタン行 pt-24 */


  /* 【figma-parity】pl20+dot10+gap8 */


@media (min-width: 1440px) {
  .si2-recruit__note { white-space: nowrap; }  /* 【figma-parity】Figma は nowrap（1440厳密帯のみ・中間幅は折返し） */
}


/* --- 13.6 teachers（先生紹介）写真背景バンド --- */
/* 【figma-parity】バンドは Figma 実値 840px 高（pt80/pb64）・写真は Figma クロップ版に差し替え済み・center/cover */
.si2-teachers { padding: 80px 0 64px; background: #efece4 url("../images/teachers-group.webp") center / cover no-repeat; }


/* --- 13.7 mission-vision（グループ概要・学校紹介） --- */
/* 【figma-parity】mission バンドは px-80（inner 1280 幅＝写真原寸）。MISSION/VISION 見出しの前後は 48px */
/* PC80 は 04 固有（05-09 は 90px）→ common へ昇格すると frozen 05 等を変えるため 04 に据置（2026-07-09） */
.si2-mission .si2-inner { padding-inline: 80px; }
.si2-access .si2-inner { gap: 80px; }   /* 【figma-parity】access バンドのブロック間は Figma gap-80（既定64） */
.si2-access.si2-band { padding-bottom: 120px; }  /* 【クライアント指示 2026-07-08】下 padding 120px（旧 figma-parity 24px から変更） */
.si2-mission .si-subhead { margin-block: -16px; }


  /* 【figma-parity】Figma 18px */


/* --- 13.8 access（各学校へのアクセス） --- */
  /* 【figma-parity】subhead→内容は Figma gap-40 */
/* 広域アクセス カード */


  /* 【figma-parity】Figma gap-40 */

  /* 【figma-parity】Figma gap-16 */

  /* 【figma-parity】駅名は Bold・24px行 */
  /* 分数は緑。【figma-parity】leading normal（行がわずかに高い） */

/* 近隣エリア */


/* 路線図 */


/* 各学校の詳細 */


  /* 【figma-parity】Figma 実値 125.87 */

  /* 【figma-parity】名称→情報は gap-12（カード gap-20 との差 -8） */


/* 職業安定所 */


/* --- 13.9 SNS（related-links 2157:18113） --- */
/* SNS タイルは規約上アイコン=SVG 原則だが、Figma native が約120px のブランド配色ラスター
   （Instagram グラデ／Douyin／WeChat／Bilibili 等）で確実な SVG ベクター再構成が不可。
   規約フォールバックとして 2x 相当 WebP を維持（90px タイルに非拡大表示）。 */

  /* 【figma-parity】Figma は px-20（90 だとアイコングリッドが 62px 内側に寄る） */

  /* 【figma-parity】Figma 12.35px */


  /* 【figma-parity】gap-y5・右px-8 */


/* ==========================================================
 * 13x. school-info #2 / SNS タブレット補助（1023px）
 * ========================================================== */


/* ==========================================================
 * 13y. school-info #2 / SNS レスポンシブ（768px 単一境界）
 * ========================================================== */
@media (max-width: 767px) {
                  /* 64 */
  
  .si2-recruit__note { white-space: normal; }   /* SPは自然折返し（nowrapはPCカンプ準拠のみ） */
  /* ov-operator ルビ/名の SP 崩れ修正は common.css 末尾 SP ブロックへ集約（重複回避） */
  /* 【クライアント指示 2026-07-08 SP】 */
  /* SP24 は 04:727(PC80・メディア無)が SP に漏れるのを打ち消す必須シールド（common の SP24 は 04 より前＝負ける）→ 04 に据置（2026-07-09） */
  .si2-mission .si2-inner { padding-inline: 24px; }   /* PC 80 → SP 24 */
  .si2-access .si2-inner { gap: 32px; }               /* 広い gap 80 → 32 */
                    /* 30 */
                  /* 21 */


                  /* 21 */

  /* recruit：縦積み・装飾ウェッジ非表示 */
  .si2-recruit::before { display: none; }
  .si2-recruit__inner { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  /* 【クライアント指示 2026-07-08】__row が横flexのまま＝本文が1文字幅に潰れる崩れ → SPは縦積み */
  .si2-recruit__row { flex-direction: column; gap: var(--space-32); }
  

  /* 【追加指示 2026-07-08】teachers：Figma 2203:24879＝上ベージュ無地＋テキスト/ボタン、下に写真バンド（center bottom / 100% で全幅・下寄せ・上は無地） */
  .si2-teachers { padding: 30px 0 0; background: #f5f3ed url("../images/teachers-group.webp") center bottom / 100% auto no-repeat; }
  

  /* mission */


  /* access */


  /* SNS */
  
  
            /* 25 */
  
}

/* --- reduced-motion：ページ固有 hover トランジションも無効化（Codex Minor） --- */


/* ==========================================================
 * 【クライアント指示 2026-07-08】PC 縮小帯（<1366px）：si-learn/si-element の詰め
 *   （共通トークン帯は common.css。ここはページ固有クラスのため各ページ css に置く）
 * ========================================================== */
@media (min-width: 768px) and (max-width: 1365px) {
  .si-learn__panel { padding: 32px; }              /* 48→32 */
  .si-element__body { padding-block: 12px; gap: 8px; }  /* 上下24→12 / gap16→8 */
}