/*
Theme Name: TRAINEE Lightning Child
Theme URI: https://trainee-oita.jp/
Template: lightning
Description: TRAINEE（就労移行支援事業所）様サイト用 Lightning子テーマ。構成案ver2.0に基づき、トップページ各セクションのデザインをブロックパターン＋CSSで実装します。2026-08 抜本改修 Phase 1（デザイン基盤：カラートークン刷新・タイポグラフィ・余白・共通パーツ）適用済み。
Author: TRAINEE
Version: 1.1.0
Text Domain: trainee-child

【重要・要確認】
"Template:" の値は、ご利用中のLightning本体テーマのフォルダ名と完全に一致している必要があります。
wp-content/themes/ 配下のフォルダ名をご確認のうえ、"lightning" と異なる場合は下記の値を修正してください（詳細はREADME.md参照）。
*/

/* Webフォント（Zen Maru Gothic / Noto Sans JP / Josefin Sans）は
   functions.php の trainee_child_enqueue_styles() で読み込んでいます。
   @import はページ表示を待たせるため Phase 1 で廃止しました。 */

/* ==========================================================================
   0. デザイントークン（共通変数）
   --------------------------------------------------------------------------
   2026-08 抜本改修 Phase 1 でパレット全体を刷新しました。
   ここの値を変えるだけでサイト全体の色・余白・角丸が連動して変わります
   （既存CSSの300箇所以上がこの変数を参照しているため）。

   【要確認：設計書からあえて変えた2箇所】
   1) --trainee-green-dark
      設計書のメインカラーは #2e8b57 ですが、白文字を載せたときの
      コントラスト比が 4.25:1 で、WCAG AA基準（通常サイズの文字は4.5:1以上）を
      わずかに下回ります。利用者に精神障害・発達障害のある方が多いサイトの
      性質を考え、ボタン・リンク・小さい文字に使う色は一段濃い #257a4a
      （5.3:1・AA適合）にしています。
      設計書どおり #2e8b57 に揃えたい場合は、下の1行を書き換えてください。
      なお #2e8b57 は --trainee-green として残してあり、装飾・アイコン・
      大きな見出し文字など、文字サイズが大きい箇所では引き続き使えます。

   2) --trainee-text-light
      設計書の #9a8d80 は白背景で 3.2:1 しかなく、注釈・日付といった
      「読ませる文字」には不足するため #7a6e5f（5.0:1）にしています。
      装飾扱いでよければ #9a8d80 に戻して構いません。
   ========================================================================== */
:root {

  /* ---- ブランドカラー ---- */
  --trainee-green:         #2e8b57;  /* ブランド緑（装飾・アイコン・大きな見出し文字） */
  --trainee-green-dark:    #257a4a;  /* 主役の緑（ボタン・リンク・小さい文字）※上記【要確認】参照 */
  --trainee-green-darker:  #1c5f3a;  /* ホバー時 */
  --trainee-green-soft:    #7cc88d;  /* ソフトグリーン（装飾ドット・フォーカスリング） */
  --trainee-green-light:   #f0f7f1;  /* 淡い緑（交互セクションの背景） */
  --trainee-green-mid:     #cde8d6;  /* 装飾の円・グラフの淡い部分 */

  /* ---- 背景 ---- */
  --trainee-cream:         #faf8f5;  /* クリーム（メイン背景） */
  --trainee-cream-deep:    #f0eae1;  /* クリームの濃淡アクセント（グラフの土台など） */
  --trainee-gray-bg:       #f4f2ef;  /* ほんのり温かいグレー背景 */
  --trainee-white:         #ffffff;

  /* ---- アクセント ---- */
  --trainee-accent-warm:   #e8934e;  /* オレンジ（CTA強調・英語サブタイトル・ステップ番号） */
  --trainee-accent-yellow: #f5c842;  /* イエロー（バッジ・装飾） */

  /* ---- テキスト ---- */
  --trainee-text-dark:     #3a3226;  /* 本文主色（黒→こげ茶にして温かみを出す） */
  --trainee-text-sub:      #6b5e50;  /* 説明文・補足 */
  --trainee-text-light:    #7a6e5f;  /* 注釈・日付 ※上記【要確認】参照 */

  /* ---- 罫線 ---- */
  --trainee-border:        #e5ddd5;
  --trainee-border-soft:   #f0ebe4;

  /* ---- タイポグラフィ ---- */
  --trainee-font-heading: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  --trainee-font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --trainee-font-en:      "Josefin Sans", "Zen Maru Gothic", sans-serif;

  /* ---- セクション余白（設計書：120〜140px） ---- */
  --trainee-sec-pt:        120px;
  --trainee-sec-pb:        128px;
  --trainee-sec-pt-sp:     64px;
  --trainee-sec-pb-sp:     72px;
  --trainee-heading-mb:    56px;   /* 見出しと本文の間 */

  /* ---- レイアウト ---- */
  --trainee-container-width: 1100px;  /* コンテンツ幅（1200px→1100pxに変更） */
  --trainee-header-width:    1200px;  /* ヘッダーはナビが窮屈にならないよう1200pxのまま */
  --trainee-measure:         720px;   /* 読みやすい本文幅 */

  /* ---- 角丸・影・アニメーション ---- */
  --trainee-radius:        16px;
  --trainee-radius-sm:     12px;
  --trainee-radius-lg:     20px;
  --trainee-radius-pill:   999px;
  --trainee-shadow:        0 4px 20px rgba(58, 50, 38, 0.06);
  --trainee-shadow-hover:  0 8px 30px rgba(58, 50, 38, 0.10);
  --trainee-ease:          0.3s ease;
}

/* タブレット：セクション余白を少し詰める */
@media (max-width: 1024px) {
  :root {
    --trainee-sec-pt: 88px;
    --trainee-sec-pb: 96px;
    --trainee-heading-mb: 40px;
  }
}


/* ==========================================================================
   0-2. ベーススタイル（Phase 1）
   --------------------------------------------------------------------------
   サイト全体の下地。個別セクションのCSSはこの後ろに書かれているため、
   ここでの指定は各セクション側の指定に上書きされます（意図どおり）。
   ========================================================================== */

body {
  background-color: var(--trainee-cream);
  color: var(--trainee-text-dark);
  font-family: var(--trainee-font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lightningが白背景を敷いている箇所を透過させ、bodyのクリームを見せる */
.site-body,
.site-body-container,
.site-content,
.main-section,
.entry-body {
  background-color: transparent;
}

/* 見出しは丸ゴシックで統一（各セクション側の個別指定と同じ書体） */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--trainee-font-heading);
  color: var(--trainee-text-dark);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* ※ img の共通指定（max-width:100%; height:auto;）は、画像が表示されない
      不具合の切り分けのため Phase 1 では入れていません。
      Lightning側で同等の指定が入っているため、通常は不要です。 */

/* キーボード操作時のフォーカス表示（アクセシビリティの下限確保） */
:focus-visible {
  outline: 3px solid var(--trainee-green-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 動きを減らす設定をしている利用者への配慮 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   0-3. 共通パーツ（Phase 1で土台だけ用意）
   --------------------------------------------------------------------------
   Phase 2以降、各セクションをこのパーツに寄せていきます。
   現時点ではどのセクションからも使われていないため、
   このブロックを追加しただけでは見た目は変わりません。
   ========================================================================== */

/* ---- セクション見出し（英語サブタイトル付き） ----
   <div class="trainee-heading">
     <span class="trainee-heading__en">Our Features</span>
     <h2 class="trainee-heading__ja">TRAINEEの3つの特徴</h2>
   </div>                                                        */
.trainee-heading {
  text-align: center;
  margin-bottom: var(--trainee-heading-mb);
}
.trainee-heading__en {
  display: block;
  font-family: var(--trainee-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--trainee-accent-warm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.trainee-heading__ja {
  font-family: var(--trainee-font-heading);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  color: var(--trainee-text-dark);
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* Lightning親テーマが h2/h3 に付ける疑似要素の下線装飾を打ち消す */
.trainee-heading__ja::before,
.trainee-heading__ja::after {
  content: none !important;
}
.trainee-heading--left { text-align: left; }
.trainee-heading--invert .trainee-heading__ja { color: var(--trainee-white); }
.trainee-heading--invert .trainee-heading__en { color: var(--trainee-accent-yellow); }

/* ---- 読みやすい本文幅 ---- */
.trainee-measure {
  max-width: var(--trainee-measure);
  margin-left: auto;
  margin-right: auto;
}

/* ---- カード ---- */
.trainee-card {
  background: var(--trainee-white);
  border: 1px solid var(--trainee-border-soft);
  border-radius: var(--trainee-radius);
  box-shadow: var(--trainee-shadow);
  padding: 32px;
  position: relative;
  transition: transform var(--trainee-ease), box-shadow var(--trainee-ease);
}
a.trainee-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.trainee-card:hover,
.trainee-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--trainee-shadow-hover);
}
.trainee-card__title {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 19px;
  color: var(--trainee-text-dark);
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
.trainee-card__title::after { content: none !important; }
.trainee-card__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
  margin: 0;
}

/* ---- バッジ / 属性タグ ---- */
.trainee-badge {
  display: inline-block;
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: var(--trainee-radius-pill);
}
.trainee-badge--yellow { background: var(--trainee-accent-yellow); color: var(--trainee-text-dark); }
.trainee-badge--orange { background: var(--trainee-accent-warm); }
.trainee-tag {
  display: inline-block;
  background: var(--trainee-green-light);
  color: var(--trainee-text-sub);
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 6px;
  margin-right: 6px;
}

/* ---- 矢印付きテキストリンク ---- */
.trainee-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-link-arrow::after {
  content: "→";
  transition: transform var(--trainee-ease);
}
.trainee-link-arrow:hover::after { transform: translateX(4px); }


/* ==========================================================================
   カスタムヘッダー
   ========================================================================== */

/* --- Lightning デフォルトヘッダー・モバイルナビを非表示 --- */
.site-header,
#vk-mobile-nav,
.vk-mobile-nav-menu-btn {
  display: none !important;
}

/* --- ヘッダー本体 --- */
.trainee-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--trainee-cream);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.trainee-header--scrolled {
  background: var(--trainee-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.trainee-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--trainee-header-width);
  margin: 0 auto;
  padding: 0 32px;
  height: 90px;
}

/* --- ロゴ --- */
.trainee-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.trainee-header__logo img {
  /* 2026-08-20：44px → 52px。上に帯が付いてヘッダー全体が背高になったので、
     ロゴが小さく見えていました。下段（90px）に対して約58%の高さです。 */
  height: 52px;
  width: auto;
  display: block;
}

/* --- PC ナビ --- */
.trainee-header__nav--pc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trainee-header__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.trainee-header__item > a,
.trainee-header__item-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  text-decoration: none;
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.trainee-header__item > a:hover,
.trainee-header__item-btn:hover {
  background: rgba(37, 122, 74, 0.06);
}

/* ドロップダウン矢印 */
.trainee-header__arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}
.trainee-header__item-btn[aria-expanded="true"] .trainee-header__arrow {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* PC サブメニュー（ドロップダウン） */
.trainee-header__item--has-sub {
  position: relative;
}
.trainee-header__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--trainee-white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.trainee-header__item-btn[aria-expanded="true"] + .trainee-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.trainee-header__submenu li a {
  display: block;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--trainee-text-dark);
  text-decoration: none;
  padding: 10px 20px;
  transition: background-color 0.15s ease;
}
.trainee-header__submenu li a:hover {
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
}

/* CTA ボタン */
.trainee-header__cta {
  display: inline-flex;
  align-items: center;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration: none;
  margin-left: 12px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.trainee-header__cta:hover {
  background: var(--trainee-green-darker);
  color: var(--trainee-white);
}

/* --- SP アクション（電話・ハンバーガー） --- */
.trainee-header__sp-actions {
  display: none; /* PCでは非表示、SPで表示 */
  align-items: center;
  gap: 16px;
}
.trainee-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.trainee-header__phone-icon {
  flex-shrink: 0;
}

/* ハンバーガーボタン */
.trainee-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.trainee-header__hamburger:hover {
  background: rgba(37, 122, 74, 0.06);
}
.trainee-header__hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--trainee-text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ハンバーガー → × 変形 */
.trainee-header__hamburger.is-active .trainee-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.trainee-header__hamburger.is-active .trainee-header__hamburger-line:nth-child(2) {
  opacity: 0;
}
.trainee-header__hamburger.is-active .trainee-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- SP ドロワーメニュー --- */
.trainee-header__drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
}
.trainee-header__drawer[aria-hidden="false"] {
  pointer-events: auto;
}
.trainee-header__drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.trainee-header__drawer[aria-hidden="false"] .trainee-header__drawer-overlay {
  opacity: 1;
}
.trainee-header__drawer-body {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--trainee-white);
  padding: 80px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.trainee-header__drawer[aria-hidden="false"] .trainee-header__drawer-body {
  transform: translateX(0);
}
.trainee-header__drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trainee-header__drawer-item {
  border-bottom: 1px solid var(--trainee-border);
}
.trainee-header__drawer-item > a,
.trainee-header__drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  text-decoration: none;
  padding: 16px 4px;
  border: none;
  background: none;
  cursor: pointer;
}
.trainee-header__drawer-toggle .trainee-header__arrow {
  transition: transform 0.2s ease;
}
.trainee-header__drawer-toggle[aria-expanded="true"] .trainee-header__arrow {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.trainee-header__drawer-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.trainee-header__drawer-sub.is-open {
  max-height: 300px;
}
.trainee-header__drawer-sub li a {
  display: block;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--trainee-text-sub);
  text-decoration: none;
  padding: 12px 4px 12px 20px;
}
.trainee-header__drawer-sub li a:hover {
  color: var(--trainee-green-dark);
}

/* body にドロワーオープン時のスクロール無効化 */
body.trainee-drawer-open {
  overflow: hidden;
}

/* ヘッダー分のpadding-topをbodyに追加（ヒーローとの余白も含む） */
body {
  padding-top: 90px;
}
/* 管理バー表示時の調整 */
body.admin-bar .trainee-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .trainee-header {
    top: 46px;
  }
}

/* --- ヘッダー レスポンシブ --- */
@media (max-width: 991px) {
  .trainee-header__nav--pc {
    display: none;
  }
  .trainee-header__sp-actions {
    display: flex;
  }
  .trainee-header__inner {
    height: 68px;
  }
  body {
    padding-top: 68px;
  }
  .trainee-header__logo img {
    height: 36px;
  }
}

/* ==========================================================================
   共通ユーティリティ
   ========================================================================== */
.trainee-container {
  max-width: var(--trainee-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* 日本語の意味のまとまり（文節）単位で改行させるためのユーティリティ。
   このクラスで囲んだ範囲内では改行させず、まとまり同士の間でだけ
   折り返しが起きるようにすることで、単語の途中で変な位置に
   改行されるのを防ぎます。 */
.trainee-nowrap {
  white-space: nowrap;
}

/* PC/スマホ切り替え用の改行タグ */
br.is-pc-only {
  display: inline;
}
br.is-sp-only {
  display: none;
}
@media (max-width: 781px) {
  br.is-pc-only { display: none; }
  br.is-sp-only { display: inline; }
}

/* 共通ボタン */
.trainee-btn .wp-block-button__link {
  border-radius: 999px;
  font-weight: 700;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.trainee-btn--primary .wp-block-button__link {
  background-color: var(--trainee-green-dark);
  color: var(--trainee-white);
}
.trainee-btn--primary .wp-block-button__link:hover {
  background-color: var(--trainee-green-darker);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 122, 74, 0.25);
}
.trainee-btn--large .wp-block-button__link {
  padding: 18px 44px;
  font-size: 18px;
}
/* ゴースト（枠線だけ）ボタン：Phase 1で追加 */
.trainee-btn--ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
}
.trainee-btn--ghost .wp-block-button__link:hover {
  background-color: var(--trainee-green-dark);
  color: var(--trainee-white);
}
/* 白ボタン：緑背景のセクション（CTA）用。Phase 1で追加 */
.trainee-btn--white .wp-block-button__link {
  background-color: var(--trainee-white);
  color: var(--trainee-green-dark);
}
.trainee-btn--white .wp-block-button__link:hover {
  background-color: var(--trainee-green-light);
  color: var(--trainee-green-darker);
}

/* ==========================================================================
   トップページ共通：ページタイトル帯（青い帯）を非表示
   Lightning標準では固定ページ上部に「ページタイトル＋パンくず」が
   自動表示されますが、トップページはSec.1がその役割を兼ねるため、
   フロントページ（.home）に限定して非表示にしています。
   ========================================================================== */
.home .page-header {
  display: none;
}

/* 下層ページ共通：独自のページヒーロー（.trainee-page-hero）を
   ページ内に挿入したページに限り、Lightning標準の青いタイトル帯を
   非表示にします。:has() を使い「このヒーローが実際に挿入されている
   ページだけ」に限定することで、まだヒーローを追加していない
   既存ページ（今後作成するページ含む）のタイトル表示を壊さないように
   しています。 */
body:has(.trainee-page-hero) .page-header {
  display: none;
}

/* Lightning標準のパンくずリスト（#breadcrumb）は、独自ヒーロー内に
   すでに同じ内容のパンくず表示を用意しているため、二重表示になって
   しまいます。ヒーローを挿入したページに限り、こちらも非表示にします。 */
body:has(.trainee-page-hero) #breadcrumb {
  display: none;
}

/* 送信完了ページ（/contact/complete/）だけの例外／2026-08-21 追加
   ------------------------------------------------------------------------
   このページは「送信できました」を伝えるだけの短いページなので、
   他の下層ページのような大きなヒーローを置いていません。
   そのため上の :has(.trainee-page-hero) の指定が効かず、
   ヘッダーのすぐ下に Lightning標準の青いタイトル帯（の端だけが線に見える）と
   パンくずリストが出ていました。
   このページ専用に、同じものを消します。 */
body:has(.trainee-contact-complete) .page-header,
body:has(.trainee-contact-complete) #breadcrumb {
  display: none;
}

/* 「卒業生の声」投稿タイプ専用：サイドバーを非表示にして全幅表示にする
   ------------------------------------------------------------------------
   固定ページには「レイアウト設定」（Lightning デザイン設定）で
   「１カラム（サブセクションなし）」を選べる仕組みがありますが、この
   設定値（_lightning_design_setting メタ）は新設した「卒業生の声」
   投稿タイプではREST APIから保存できないことが判明しました（Lightning
   本体がこの投稿タイプにメタ項目を登録していないため）。そこで、
   固定ページの仕組みに頼らず、CSS側でこの投稿タイプの記事ページに
   限り、常にサイドバー（.sub-section）を非表示にし、本文
   （.main-section）を全幅にしています。 */
body.single-graduate_voice .site-body-container.container .main-section,
body.single-graduate_voice .main-section--col--two {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
}
body.single-graduate_voice .site-body-container.container .sub-section,
body.single-graduate_voice .sub-section--col--two {
  display: none !important;
}
/* entry-header（投稿タイトル・日時・著者）を非表示 */
body.single-graduate_voice .entry-header {
  display: none !important;
}
/* 前の記事/次の記事ナビゲーションを非表示 */
body.single-graduate_voice .vk_posts.next-prev,
body.single-graduate_voice .vk_post_next_prev,
body.single-graduate_voice .post-navigation,
body.single-graduate_voice .nav-links {
  display: none !important;
}

/* ==========================================================================
   Sec.1 ヒーロー（trainee-hero）／2026-08 抜本改修 Phase 2
   --------------------------------------------------------------------------
   設計書の「イラスト×大胆なタイポグラフィ」に基づく全面リニューアル版です。
   参考：しるくるとみおか（大型イラスト＋並列タイポ）、Relight（超大型文字）、
         さつき会（アウトライン文字）。

   ■ 実装方式
     [trainee_hero] ショートコードで出力しています。文言やHTML構造を変えても
     ファイルを差し替えるだけで反映されます（ブロックエディタでの貼り直し不要）。

   ■ HTML構造
     .trainee-hero                 … 全幅のセクション（ブロックパターン側）
       .trainee-hero__inner        … グリッド（左：テキスト列／右：イラスト）
         .trainee-hero__eyebrow    … 小さなタグ
         .trainee-hero__text       … 見出し＋サブコピー＋CTA
         .trainee-hero__image      … イラスト

     タグと本文は別々のグリッド要素にしています。
     一時期これらを1つのdivでまとめていましたが、スマホで
     「タグをイラストの左上に重ねる」ときの位置の基準が変わってしまい、
     イラストの高さから逆算する壊れやすい指定が必要になったため戻しました。

   ■ 2案の切り替え
       [trainee_hero]                   … 塗り＋角丸カード（既定）
       [trainee_hero variant="outline"] … 「第一歩。」をアウトラインに
       [trainee_hero layout="bleed"]    … イラストを画面右端まで敷き詰める

   ■ 旧ヒーロー（.trainee-sec1-fv）について
     2026-08 の掃除で、旧ヒーローのCSS（約240行）は削除済みです。
   ========================================================================== */

:root {
  /* ヘッダーの高さ。ヒーローを「画面いっぱい」にするために使います。
     （既存のヘッダーCSSで PC 90px / 991px以下 68px と決まっているため、
       その値をそのまま変数にしています） */
  /* ヘッダー全体の高さ。ヒーローを「画面いっぱい」にする計算に使っています。
     2026-08-20：上に高さ34pxの帯（企業／医療機関への入口）を足したので、
     90px + 34px = 124px に変えました。帯の高さを変えるときは、
     .trainee-header__utility の高さと、この値の両方を直してください。 */
  --trainee-header-h: 124px;

  /* bleedレイアウトで「テキストの左右にとる空き」。
     この1つの値を
       ・画面左端 〜 テキスト     の余白（padding-left）
       ・テキスト 〜 イラスト左端 の余白（column-gap）
     の両方に使っています。左右がまったく同じ値になるので、
     見出しの文字サイズが変わってもテキストは常に中央に来ます。
     ロゴの左端もこの値に合わせています。 */
  --trainee-hero-pad-left: clamp(28px, 8vw, 190px);
}
@media (max-width: 991px) {
  :root { --trainee-header-h: 68px; }
}

.trainee-hero {
  position: relative;
  background: var(--trainee-cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 40px 0 64px;
  /* 1行目は svh 非対応ブラウザ向けのフォールバック。
     svh はスマホでアドレスバーが出入りしても高さが暴れないための単位です。 */
  min-height: 640px;
  min-height: calc(100svh - var(--trainee-header-h));
}

.trainee-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  /* 上下の 1fr は余りを吸収するダミー行。左側のかたまりが縦中央に来ます */
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 40px;
  width: 100%;
  /* Lightning側が !important でコンテンツ幅を制御している箇所があるため、
     ここも !important で明示しています（既存Sec.1と同じ理由）。 */
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 4.5vw, 72px);
  padding-right: clamp(24px, 2vw, 32px);
  box-sizing: border-box;
  /* スクロールインジケーターの位置の基準 */
  position: relative;
}

.trainee-hero__eyebrow { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; }
.trainee-hero__text    { grid-column: 1; grid-row: 3; }
.trainee-hero__image   { grid-column: 2; grid-row: 1 / -1; align-self: center; }

/* ---- テキスト側 ---- */
.trainee-hero__text {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.trainee-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--trainee-font-heading);
  /* 13px → 11px。余白（padding）は据え置きなので、
     ピルの高さはほぼ変わらず、文字だけ控えめになります。 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--trainee-green-dark);
  background: var(--trainee-white);
  border: 1.5px solid var(--trainee-green-soft);
  border-radius: var(--trainee-radius-pill);
  padding: 7px 18px;
  margin: 0 0 28px !important;
}
.trainee-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--trainee-green);
  flex: 0 0 auto;
}

.trainee-hero__title {
  font-family: var(--trainee-font-heading);
  color: var(--trainee-text-dark);
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none;
}
/* Lightning親テーマが h1/h2 に付ける疑似要素の装飾を打ち消す */
.trainee-hero__title::before,
.trainee-hero__title::after {
  content: none !important;
}

/* 「自宅から、」 */
.trainee-hero__lead {
  display: block;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

/* 「第一歩。」＝このページで一番大きい文字。ここだけ思い切り振り切る */
.trainee-hero__accent {
  display: block;
  font-size: clamp(56px, 9vw, 104px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--trainee-green);
}

/* 【案B】アウトライン（線だけ）版
   ※ color: transparent と組み合わせるため、-webkit-text-stroke に対応して
     いないブラウザでは文字が消えます。下の @supports で塗りに戻しています。 */
.trainee-hero__inner--outline .trainee-hero__accent {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--trainee-green);
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .trainee-hero__inner--outline .trainee-hero__accent {
    color: var(--trainee-green);
  }
}

/* 「一緒にはじめませんか？」 */
.trainee-hero__sub {
  font-family: var(--trainee-font-heading);
  font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--trainee-text-sub);
  /* 見出しのかたまりとCTAを分けるため、ここで大きめに間を取ります */
  margin: 0 0 64px !important;
}

/* ---- CTA ---- */
/* 注記はボタンの上。ボタンを押す前に「オンラインでもいい」と
   分かるほうが、押すハードルが下がります。
   inline-flex にすることで、この箱の幅が「一番広い子＝ボタン」に
   ぴったり縮みます。その中で中央寄せするので、注記がボタンの
   真ん中に乗ります。 */
.trainee-hero__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.trainee-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--trainee-font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
  border-radius: var(--trainee-radius-pill);
  padding: 18px 40px;
  text-decoration: none;
  transition: background-color var(--trainee-ease),
              border-color var(--trainee-ease),
              transform var(--trainee-ease),
              box-shadow var(--trainee-ease);
}
.trainee-hero__btn::after {
  content: "→";
  transition: transform var(--trainee-ease);
}
.trainee-hero__btn:hover,
.trainee-hero__btn:focus-visible {
  background: var(--trainee-green-darker);
  border-color: var(--trainee-green-darker);
  color: var(--trainee-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 122, 74, 0.28);
}
.trainee-hero__btn:hover::after { transform: translateX(4px); }

.trainee-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--trainee-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--trainee-text-sub);
  background: none;
  border: none;
  padding: 0;
  margin: 0 !important;
  white-space: nowrap;
  gap: 4px;
}
/* チェックマークではなく ＼ ／ で挟む形にしています。
   吹き出し的な軽さが出て、ボタンとの誤認もより起きにくくなります。 */
.trainee-hero__note::before,
.trainee-hero__note::after {
  color: var(--trainee-green-dark);
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}
/* content の後ろの「 / "" 」は代替テキストの指定です。
   空文字にしておくと、目には見えるがスクリーンリーダーには
   読み上げられません（「バックスラッシュ」等と読まれるのを防ぎます）。 */
.trainee-hero__note::before { content: "＼" / ""; }
.trainee-hero__note::after  { content: "／" / ""; }

/* ---- イラスト側（カード型） ---- */
.trainee-hero__image {
  position: relative;
}
/* イラストの後ろに淡い緑の板を1枚だけずらして敷く。
   円形の装飾を端で切らないため、角丸の矩形にしています。 */
.trainee-hero__image::before {
  content: "";
  position: absolute;
  top: 6%;
  right: -3%;
  bottom: -6%;
  left: 7%;
  background: var(--trainee-green-light);
  border-radius: 32px;
  z-index: 0;
}
.trainee-hero__img {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 32px 64px -26px rgba(37, 122, 74, 0.38);
}
.trainee-hero__img img {
  display: block;
  width: 100%;
  height: auto;
  /* 4:3のイラストなので、背の低い画面ではヒーローからはみ出さないよう
     高さに上限を設けています（はみ出す場合だけ効きます）。 */
  max-height: calc(100svh - var(--trainee-header-h) - 140px);
  object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 781px) {
  .trainee-hero__img img { max-height: none; }
}

/* ---- 登場アニメーション（CSSのみ・JS不要） ---- */
@keyframes trainee-hero-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes trainee-hero-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}

.trainee-hero__eyebrow,
.trainee-hero__lead,
.trainee-hero__accent,
.trainee-hero__sub,
.trainee-hero__cta {
  animation: trainee-hero-up 0.8s ease both;
}
.trainee-hero__eyebrow { animation-delay: 0s; }
.trainee-hero__lead    { animation-delay: 0.10s; }
.trainee-hero__accent  { animation-delay: 0.30s; }  /* 設計書：少し遅れて登場 */
.trainee-hero__sub     { animation-delay: 0.46s; }
.trainee-hero__cta     { animation-delay: 0.58s; }
.trainee-hero__image {
  animation: trainee-hero-in-right 0.9s ease 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
  .trainee-hero__eyebrow,
  .trainee-hero__lead,
  .trainee-hero__accent,
  .trainee-hero__sub,
  .trainee-hero__cta,
  .trainee-hero__image {
    animation: none;
  }
}


/* ==========================================================================
   【レイアウト案B】bleed ＝ イラストを画面右端まで敷き詰める
   --------------------------------------------------------------------------
   しるくるとみおか（tomioka-silk.jp）のような、イラストを1枚の面として
   画面の端まで見せる構成です。角丸・影・背景板をすべて外し、
   イラストがヒーローの上下いっぱいに立つ形にしています。
   [trainee_hero layout="bleed"] で切り替わります。

   ※ セレクタを .trainee-hero .trainee-hero__inner--bleed（クラス2つ）に
     しているのは、後ろのメディアクエリにある .trainee-hero__inner
     （クラス1つ）に打ち消されないようにするためです。
     以前ここが1つだったせいで、画面幅1200px以下のときだけ
     カラム指定が上書きされ、中央寄せが効いていませんでした。
   ========================================================================== */
.trainee-hero:has(.trainee-hero__inner--bleed) {
  padding: 0;
  /* align-items:center のままだと中身が「内容の高さ」しか持たず、
     イラストがヒーロー全高に届かずに上下へすき間が出ます。 */
  align-items: stretch;
}

.trainee-hero .trainee-hero__inner--bleed {
  max-width: none !important;
  /* 左カラムは auto ＝ 中身（見出し）の幅ぴったりに縮みます。
     その左右に同じ幅の空きを置くので、テキストが必ず中央に来ます。 */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--trainee-hero-pad-left);
  padding-left: var(--trainee-hero-pad-left);
  padding-right: 0;
}
.trainee-hero .trainee-hero__inner--bleed .trainee-hero__image {
  align-self: stretch;
}
.trainee-hero__inner--bleed .trainee-hero__image::before {
  display: none;
}
.trainee-hero__inner--bleed .trainee-hero__img {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* 【重要】イラストを絶対配置にして、高さの計算から外します。
   これをしないと height:100% の基準になる高さが確定せず、
   イラストが元画像の縦横比（3:4）のまま伸びてしまい、
   ヒーロー全体が画面の1.5倍以上の高さになります。 */
@media (min-width: 782px) {
  .trainee-hero__inner--bleed .trainee-hero__image {
    position: relative;
    min-height: 0;
  }
  .trainee-hero__inner--bleed .trainee-hero__img {
    position: absolute;
    inset: 0;
  }
  .trainee-hero__inner--bleed .trainee-hero__img img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    /* 縦長イラストをワイド画面に敷き詰めると上下が切られます。
       人物とデスクまわりが残るよう、やや上寄りで切っています。 */
    object-position: center 38%;
  }
}


/* ==========================================================================
   トップページ限定：ヘッダーを透過させ、ヒーローを画面の一番上から始める
   --------------------------------------------------------------------------
   参考サイトの「1枚の面として立っている」印象は、イラストが画面の
   一番上から始まっていることで成立しています。TRAINEEはヘッダーが
   クリーム色の不透明な帯なので、その分だけ上に余白が生まれてしまいます。

   そこで、トップページに限って
     ・ヘッダーの背景を透明にする（スクロールすると白帯に戻る＝既存の挙動）
     ・body の上余白をゼロにして、ヒーローをヘッダーの下に潜り込ませる
     ・ヒーローの高さを画面全高（100svh）にする
     ・スクロール前はロゴだけ残してナビを隠す
   を行っています。

   ※ スマホではヘッダーがタグ文言に被ってしまうため、この処理は
     782px以上でのみ有効にしています。
   ※ 管理バー表示中（ログイン中）は、その分だけ上が隠れて見えます。
     ログアウト状態またはシークレットウィンドウで確認してください。
   ========================================================================== */
@media (min-width: 782px) {

  body.home { padding-top: 0; }

  /* スクロール前だけ透過。50pxスクロールで既存の白帯に戻ります */
  body.home .trainee-header:not(.trainee-header--scrolled) {
    background: transparent;
    box-shadow: none;
  }

  /* Lightning側がコンテンツ上部に付けている余白を打ち消す */
  body.home .site-body,
  body.home .site-body-container,
  body.home .main-section,
  body.home .entry-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.home .entry-body > *:first-child,
  body.home .entry-content > *:first-child,
  body.home .site-body .alignfull:first-child,
  body.home .trainee-hero {
    margin-top: 0 !important;
  }

  /* 上のリストはLightningの構造を推測して書いたものなので、
     テーマ側の作りによっては取りこぼしが出ます。
     :has() を使って「ヒーローを内側に持つ要素すべて」の上余白を
     まとめてゼロにし、確実にすき間を潰します。 */
  body.home :has(.trainee-hero) {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  body.home .trainee-hero {
    min-height: 640px;
    min-height: 100svh;
    padding-top: 0;
  }

  /* --- ロゴの位置について ---
     一時期、スクロール前だけロゴをヒーローのテキストに合わせて
     右へ寄せていましたが、スクロール時に左へ戻る動きが目障りなため
     取りやめました。ロゴは常に通常の位置（32px）で固定します。 */

  /* --- 初期位置ではロゴだけ残し、ナビゲーションを隠す --- */
  .trainee-header__nav--pc {
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
  }
  body.home .trainee-header:not(.trainee-header--scrolled) .trainee-header__nav--pc {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
  }

  /* キーボード操作への配慮：
     Tabキーでヘッダーに入った時点でナビを出し、背景も白に戻します。 */
  body.home .trainee-header:not(.trainee-header--scrolled):focus-within {
    background: var(--trainee-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
  body.home .trainee-header:not(.trainee-header--scrolled):focus-within .trainee-header__nav--pc {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}


/* ==========================================================================
   スクロールインジケーター（PC・トップページのみ）
   --------------------------------------------------------------------------
   ヒーローが画面ぴったりで完結して見えるため、「下に続きがある」ことを
   伝える最小限の手がかりを置いています。

   デザインはヒーローの世界観に合わせて、細い縦線＋小さな英字だけ。
   線の中を緑の短い帯がゆっくり下に流れます。矢印アイコンや丸ボタンは
   使わず、左カラムのタイポグラフィと同じ静けさを保っています。
   位置はテキストの左端に揃えてあります。
   ========================================================================== */
.trainee-hero__scroll {
  /* 色。クリーム背景を一段濃くしたトーンにしています。
     もっと目立たせたい／控えめにしたい場合はここだけ変えてください。 */
  --trainee-scroll-color: #9a8d80;

  position: absolute;
  /* 画面の右下に配置。左に置くとCTAボタンのすぐ横で
     動くものが視界に入り、クリックの邪魔になるためです。 */
  right: 32px;
  left: auto;
  bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 4;
  pointer-events: none;
  /* イラストの上に乗るため、白いふちを付けて背景の柄に埋もれないように
     しています。二重にかけているのは、水彩の濃い部分でも輪郭が
     残るようにするためです。 */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
  animation: trainee-scroll-bounce 2.2s ease-in-out infinite;
}

.trainee-hero__scroll-label {
  writing-mode: vertical-rl;
  font-family: var(--trainee-font-en);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--trainee-scroll-color);
}

/* 縦線＋下向きの矢じり（↓）。全体がゆっくり上下に揺れます。 */
.trainee-hero__scroll-line {
  display: block;
  position: relative;
  width: 1.5px;
  height: 30px;
  background: var(--trainee-scroll-color);
}
.trainee-hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--trainee-scroll-color);
  border-bottom: 1.5px solid var(--trainee-scroll-color);
  transform: translate(-50%, 50%) rotate(45deg);
}

@keyframes trainee-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* カード型レイアウトのときはコンテナの右端に合わせる */
.trainee-hero__inner--card .trainee-hero__scroll {
  right: 0;
}

/* スマホでは非表示（縦積みで意味をなさないため） */
@media (max-width: 781px) {
  .trainee-hero__scroll { display: none; }
}

/* 右下に置いたことでCTAボタンと離れたため、
   画面が低くても「Scroll」の文字を出したままにできます。
   極端に低い場合だけ非表示にします。 */
@media (max-height: 460px) {
  .trainee-hero__scroll { display: none; }
}

/* ---- 画面の「高さ」が足りない環境への対応 ----
   ノートPCなど縦900px以下の画面では、見出しが大きすぎて
   CTAボタンが画面外に押し出されてしまうため、
   文字サイズと余白を段階的に詰めています。 */
@media (min-width: 782px) and (max-height: 900px) {
  .trainee-hero__lead    { font-size: clamp(26px, 3.4vw, 42px); }
  .trainee-hero__accent  { font-size: clamp(48px, 7vw, 84px); }
  .trainee-hero__eyebrow { margin-bottom: 20px !important; }
  .trainee-hero__title   { margin-bottom: 14px !important; }
  .trainee-hero__sub     { margin-bottom: 48px !important; }
  .trainee-hero__btn     { padding: 16px 34px; }
}
@media (min-width: 782px) and (max-height: 760px) {
  .trainee-hero__lead    { font-size: 30px; }
  .trainee-hero__accent  { font-size: 62px; }
  .trainee-hero__sub     { font-size: 17px; margin-bottom: 36px !important; }
}

/* ---- 中間幅（ノートPCなど） ---- */
@media (max-width: 1200px) {
  .trainee-hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  }
}

/* ---- タブレット ---- */
@media (max-width: 1024px) {
  .trainee-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .trainee-hero__text { max-width: none; }
  .trainee-hero__btn { padding: 16px 30px; font-size: 16px; }
}

/* ---- スマホ（既存セクションと同じ 781px で切り替え） ---- */
@media (max-width: 781px) {
  .trainee-hero {
    display: block;
    min-height: 0;
    padding: 28px 0 52px;
  }
  /* 縦積みの順番：イラスト → テキスト。
     HTMLの記述順は「テキスト → イラスト」なので、flex の order で入れ替えます。

     align-items: stretch を必ず書いてください。
     PC用の指定に align-items: center が入っているため、これを打ち消さないと
     縦積み（flex-direction: column）にしたとき「横方向の中央寄せ」として
     効いてしまい、テキストもボタンも中身の幅に縮んで中央に寄ります。 */
  .trainee-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 縦積み（flex）なのでグリッド配置は解除し、order で並べます */
  .trainee-hero__eyebrow {
    grid-column: auto;
    grid-row: auto;
    align-self: flex-start;
    order: 0;
    margin-bottom: 20px !important;
  }
  .trainee-hero__image { grid-column: auto; grid-row: auto; order: 1; }
  .trainee-hero__text  { grid-column: auto; grid-row: auto; order: 2; }
  .trainee-hero__accent  { font-size: clamp(44px, 15vw, 68px); }
  .trainee-hero__inner--outline .trainee-hero__accent {
    -webkit-text-stroke-width: 2px;
  }
  .trainee-hero__sub { margin-bottom: 32px !important; }

  /* ボタンは横幅いっぱい。注記は本文と同じ左揃えにして、
     見出し・リード文とラインを合わせます。 */
  .trainee-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .trainee-hero__btn {
    justify-content: center;
    padding: 16px 24px;
  }
  .trainee-hero__note { justify-content: center; }

  .trainee-hero__image::before {
    top: 6%;
    right: -2%;
    bottom: -6%;
    left: 4%;
    border-radius: 24px;
  }
  .trainee-hero__img { border-radius: 20px; }
}

/* ==========================================================================
   スマホ × bleed：イラストに文字を重ねるレイアウト
   --------------------------------------------------------------------------
   縦積みにすると「イラスト」と「文字」が上下に分断されて間延びするため、
   タグをイラストの左上に、見出しをイラストの下端に食い込ませています。
   イラストの下部はクリーム色へグラデーションで溶かし、
   水彩の模様の上でも見出しが読めるようにしています。
   ========================================================================== */
@media (max-width: 781px) {

  :root {
    /* スマホでのイラストの高さと、見出しの食い込み量。
       この2つを変えるとタグの位置も自動で追従します。 */
    --trainee-hero-sp-img-h: 115vw;
    --trainee-hero-sp-overlap: 24vw;
    /* タグをイラスト上端からどれだけ下げるか */
    --trainee-hero-sp-eyebrow-top: 56px;
  }

  .trainee-hero:has(.trainee-hero__inner--bleed) {
    padding: 0 0 52px;
  }

  .trainee-hero .trainee-hero__inner--bleed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .trainee-hero__inner--bleed .trainee-hero__image { order: 1; margin: 0; }
  .trainee-hero__inner--bleed .trainee-hero__text  { order: 2; }

  /* --- イラスト --- */
  .trainee-hero__inner--bleed .trainee-hero__image {
    position: relative;
  }
  .trainee-hero__inner--bleed .trainee-hero__img {
    position: static;
    height: auto;
  }
  .trainee-hero__inner--bleed .trainee-hero__img img {
    width: 100%;
    /* 縦長のままだと画面を占領しすぎるので、やや詰めた高さで切ります。
       高さを変数にしているのは、下のタグの位置計算で使うためです。 */
    height: var(--trainee-hero-sp-img-h);
    object-fit: cover;
    object-position: center 28%;
  }

  /* イラスト下端をクリームへ溶かす（見出しの読みやすさ確保）。
     一番下でも完全なクリームにはせず、水彩を透かします。
     こうすると見出しが「絵の上に乗っている」ように見えます。
     文字が読みにくければ最後の 0.68 を 0.8 前後まで上げてください。 */
  .trainee-hero__inner--bleed .trainee-hero__image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom,
                rgba(250, 248, 245, 0) 0%,
                rgba(250, 248, 245, 0.25) 50%,
                rgba(250, 248, 245, 0.68) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* --- タグはイラストの左上に重ねる ---
     タグをグリッドの直接の子に戻したので、absolute の基準は
     .trainee-hero__inner--bleed（＝イラストの左上）になります。
     イラストの高さから逆算する必要がなくなったので、
     実際の高さが変わってもズレません。 */
  .trainee-hero__inner--bleed .trainee-hero__eyebrow {
    position: absolute;
    /* イラスト上端からの距離。ここだけ変えれば位置を調整できます。
       2026-08：34pxにしても余白が戻らなかったため、指定が効いているか
       確かめる目的で一時的に大きめの値にしています。 */
    top: var(--trainee-hero-sp-eyebrow-top, 56px);
    left: 22px;
    z-index: 3;
    margin: 0 !important;
    /* イラストの上に乗るため、背景は白のままにして視認性を確保 */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
  }

  /* --- 見出し以下はイラストの下端に食い込ませる --- */
  .trainee-hero__inner--bleed .trainee-hero__text {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--trainee-hero-sp-overlap));
    padding: 0 20px;
  }
  .trainee-hero__inner--bleed .trainee-hero__lead {
    font-size: clamp(24px, 7.5vw, 34px);
  }
  .trainee-hero__inner--bleed .trainee-hero__accent {
    font-size: clamp(46px, 15.5vw, 72px);
  }
  .trainee-hero__inner--bleed .trainee-hero__sub {
    margin-bottom: 28px !important;
  }
}


/* ==========================================================================
   Sec.2 就労移行支援とは（trainee-sec2-about）
   ------------------------------------------------------------------------
   淡い緑背景の上に、箱で囲わないオープンなレイアウトで配置しています。
   「深緑の左枠線＋白箱」という定番の注意書き風の見せ方をやめ、見出しの
   キーワード部分に色とドット下線でアクセントをつけ、装飾の円形シェイプと
   ピル型のリンクボタンで「洗練された」印象を狙っています
   （miyakawa-lab.comのテイストを参考）。
   ========================================================================== */
.trainee-sec2-about {
  position: relative;
  background: var(--trainee-white);
  padding: 96px 24px;
  overflow: hidden;
}

.trainee-sec2-about__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.trainee-sec2-about__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 28px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.trainee-sec2-about__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}

.trainee-sec2-about__text {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 2;
  color: var(--trainee-text-sub);
  margin: 0 0 12px;
}

.trainee-sec2-about__text-highlight {
  font-weight: 700;
  color: var(--trainee-accent-warm);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.trainee-sec2-about__note {
  margin: 0 0 36px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--trainee-text-light);
}

.trainee-sec2-about__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  background: var(--trainee-white);
  border: 2px solid var(--trainee-green-dark);
  border-radius: 999px;
  padding: 14px 32px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.trainee-sec2-about__link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  transform: translateY(-2px);
}

@media (max-width: 781px) {
  .trainee-sec2-about {
    padding: 64px 20px;
  }
  .trainee-sec2-about__title {
    font-size: 24px;
  }
}

/* ==========================================================================
   Sec.3 こんなお悩みの方へ
   ========================================================================== */
.trainee-sec3-concerns {
  position: relative;
  /* Phase 1：設計書に合わせてグレー背景 → ペールグリーンに変更 */
  background: var(--trainee-green-light);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec3-concerns__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec3-concerns__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 40px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec3-concerns__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec3-concerns__illustration {
  margin: 0 auto 56px;
  max-width: 640px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(37, 122, 74, 0.12);
}
.trainee-sec3-concerns__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.trainee-sec3-concerns__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.trainee-sec3-concerns__card {
  background: var(--trainee-white);
  border: 1px solid rgba(37, 122, 74, 0.09);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.trainee-sec3-concerns__worry {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--trainee-text-dark);
  margin: 0;
}
.trainee-sec3-concerns__worry::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--trainee-green-mid);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.trainee-sec3-concerns__closing {
  margin: 48px 0 0;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--trainee-text-dark);
}
.trainee-sec3-concerns__closing-accent {
  color: var(--trainee-accent-warm);
  border-bottom: 3px dotted var(--trainee-accent-warm);
  padding-bottom: 2px;
}

@media (max-width: 781px) {
  .trainee-sec3-concerns {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec3-concerns__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec3-concerns__illustration {
    margin-bottom: 40px;
  }
  .trainee-sec3-concerns__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trainee-sec3-concerns__card {
    padding: 28px 24px;
  }
  .trainee-sec3-concerns__closing {
    margin-top: 36px;
  }
}

/* ==========================================================================
   Sec.4 TRAINEEの3つの特徴
   ========================================================================== */
.trainee-sec4-features {
  position: relative;
  background: var(--trainee-white);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec4-features__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec4-features__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec4-features__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec4-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}
.trainee-sec4-features__card {
  position: relative;
  background: var(--trainee-green-light);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trainee-sec4-features__card-image {
  position: relative;
  line-height: 0;
}
.trainee-sec4-features__card-image img {
  display: block;
  width: 100%;
  height: auto;
}
.trainee-sec4-features__card-number {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(37, 122, 74, 0.25);
}
.trainee-sec4-features__card-body {
  padding: 28px 24px 32px;
  text-align: center;
}
.trainee-sec4-features__card-title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 19px;
  color: var(--trainee-text-dark);
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
}
/* Lightning本体側が h3 に対して「content:"."＋border-bottomで幅30%の
   下線を描画する」::after 装飾を独自に追加しているため（要素本体の
   border/paddingとは別物で、通常のborder上書きだけでは消えません）、
   カード見出し（h3）ではこの疑似要素自体を無効化しています。 */
.trainee-sec4-features__card-title::after {
  content: none !important;
}
.trainee-sec4-features__card-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
  margin: 0;
}
.trainee-sec4-features__more-wrap {
  text-align: center;
  margin: 48px 0 0 !important;
}
.trainee-sec4-features__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  background: var(--trainee-white);
  border: 2px solid var(--trainee-green-dark);
  border-radius: 999px;
  padding: 14px 32px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.trainee-sec4-features__more-link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  transform: translateY(-2px);
}

@media (max-width: 781px) {
  .trainee-sec4-features {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec4-features__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec4-features__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .trainee-sec4-features__more-wrap {
    margin-top: 36px !important;
  }
}

/* ==========================================================================
   Sec.5 実績（trainee-sec5-results）
   ------------------------------------------------------------------------
   2026/07 改訂版：在宅就労の実績をメインで見せたいというご要望を受けて、
   数字カード3枚 → ドーナツグラフ（就職者数17名のうち10名が在宅就労）に
   変更しています。セクション背景はSec.1と同じ生成りクリームのまま。
   ドーナツグラフは画面内に入ったタイミングで 0 → 目標値へ伸びる
   アニメーションを付けています（JS、prefers-reduced-motion時は即時表示）。
   ※実績の数値は2026年7月時点でご指定いただいた値です。実績更新時は
   functions.php側の $employed_total / $employed_home を書き換えてください。
   ========================================================================== */
.trainee-sec5-results {
  position: relative;
  background: var(--trainee-cream);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec5-results__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec5-results__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec5-results__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec5-results__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}

/* ---- ドーナツグラフ ---- */
.trainee-sec5-results__chart-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}
.trainee-sec5-results__donut {
  width: 100%;
  height: 100%;
}
.trainee-sec5-results__donut-track {
  fill: none;
  stroke: var(--trainee-cream-deep);
  stroke-width: 24;
}
.trainee-sec5-results__donut-seg {
  fill: none;
  stroke-width: 24;
  stroke-linecap: butt;
  transition: stroke-dashoffset 1.2s ease;
}
.trainee-sec5-results__donut-seg--home {
  stroke: var(--trainee-green-dark);
}
.trainee-sec5-results__donut-seg--other {
  stroke: var(--trainee-green-mid);
}
.trainee-sec5-results__chart-wrap.is-visible .trainee-sec5-results__donut-seg {
  stroke-dashoffset: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .trainee-sec5-results__donut-seg {
    transition: none;
  }
}
.trainee-sec5-results__donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.trainee-sec5-results__donut-number-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 0;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--trainee-green-dark);
}
.trainee-sec5-results__donut-number {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trainee-sec5-results__donut-unit {
  font-size: 18px;
  font-weight: 700;
}
.trainee-sec5-results__donut-caption {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--trainee-text-dark);
}

/* ---- 凡例 ---- */
.trainee-sec5-results__legend {
  text-align: left;
}
.trainee-sec5-results__legend-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--trainee-text-dark);
}
.trainee-sec5-results__legend-dot {
  align-self: center;
}
.trainee-sec5-results__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.trainee-sec5-results__legend-dot--home {
  background: var(--trainee-green-dark);
}
.trainee-sec5-results__legend-dot--other {
  background: var(--trainee-green-mid);
}
.trainee-sec5-results__legend-total {
  margin: 20px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--trainee-text-dark);
}
.trainee-sec5-results__legend-note {
  margin: 0;
  font-size: 12px;
  color: var(--trainee-text-light);
}

@media (max-width: 781px) {
  .trainee-sec5-results {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec5-results__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec5-results__content {
    flex-direction: column;
    gap: 32px;
  }
  .trainee-sec5-results__chart-wrap {
    width: 200px;
    height: 200px;
  }
  .trainee-sec5-results__donut-number {
    font-size: 40px;
  }
  .trainee-sec5-results__legend {
    text-align: center;
  }
  .trainee-sec5-results__legend-item {
    justify-content: center;
  }
}

/* ==========================================================================
   Sec.5.5 卒業生の声（trainee-sec55-interviews）
   ------------------------------------------------------------------------
   Sec.5（実績）の直後に配置する、卒業生インタビューのピックアップ枠。
   写真の代わりに構成案ver2.0の汎用イラストアバターを使い回しています。
   掲載しているコメントは、実際にいただいた声を要約・抜粋したものです
   （詳しくはfunctions.php側のコメントを参照）。
   ========================================================================== */
.trainee-sec55-interviews {
  position: relative;
  background: var(--trainee-white);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec55-interviews__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec55-interviews__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec55-interviews__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec55-interviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}
.trainee-sec55-interviews__card {
  display: flex;
  flex-direction: column;
  background: var(--trainee-cream);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.trainee-sec55-interviews__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(37, 122, 74, 0.15);
  flex-shrink: 0;
}
.trainee-sec55-interviews__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trainee-sec55-interviews__meta {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--trainee-green-dark);
}
.trainee-sec55-interviews__headline {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  margin: 0 0 12px;
}
.trainee-sec55-interviews__headline::before {
  content: "「";
}
.trainee-sec55-interviews__headline::after {
  content: "」";
}
.trainee-sec55-interviews__excerpt {
  font-size: 14px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0 0 16px;
}
.trainee-sec55-interviews__readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  align-self: flex-start;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-sec55-interviews__readmore:hover {
  text-decoration: underline;
}
.trainee-sec55-interviews__more-wrap {
  margin: 48px 0 0;
  text-align: center;
}
.trainee-sec55-interviews__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  background: var(--trainee-white);
  border: 2px solid var(--trainee-green-dark);
  border-radius: 999px;
  padding: 14px 32px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.trainee-sec55-interviews__more-link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  transform: translateY(-2px);
}

@media (max-width: 781px) {
  .trainee-sec55-interviews {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec55-interviews__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec55-interviews__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .trainee-sec55-interviews__more-wrap {
    margin-top: 36px;
  }
}

/* ==========================================================================
   Sec.6 利用までの流れ（trainee-sec6-flow）
   ------------------------------------------------------------------------
   4ステップを横並び（PC）／縦並び（スマホ）で見せる、定番のフロー型
   レイアウトです。各ステップ間に矢印を挟み、手続きが順番に進む様子を
   視覚的に表現しています。
   ========================================================================== */
.trainee-sec6-flow {
  position: relative;
  background: var(--trainee-green-light);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec6-flow__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec6-flow__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec6-flow__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec6-flow__grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.trainee-sec6-flow__card {
  box-sizing: border-box;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--trainee-white);
  border: 1px solid rgba(37, 122, 74, 0.09);
  border-radius: 20px;
  padding: 28px 20px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  min-width: 0;
}
.trainee-sec6-flow__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: var(--trainee-green-dark);
  font-size: 22px;
  font-weight: 700;
}
.trainee-sec6-flow__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border-radius: 999px;
  padding: 5px 16px;
  margin: 0 0 14px;
}
.trainee-sec6-flow__illustration {
  width: 128px;
  height: 128px;
  margin: 0 0 16px;
  border-radius: 50%;
  overflow: hidden;
}
.trainee-sec6-flow__illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trainee-sec6-flow__card-title {
  width: 100%;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--trainee-text-dark);
  margin: 0 0 10px !important;
  padding: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
}
.trainee-sec6-flow__card-title::after {
  content: none !important;
}
.trainee-sec6-flow__card-desc {
  width: 100%;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--trainee-text-sub);
  margin: 0;
}

@media (max-width: 900px) {
  .trainee-sec6-flow__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .trainee-sec6-flow__card {
    width: 100%;
  }
  .trainee-sec6-flow__arrow {
    width: auto;
    padding-top: 0;
    transform: rotate(90deg);
  }
}

@media (max-width: 781px) {
  .trainee-sec6-flow {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec6-flow__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec6-flow__illustration {
    width: 104px;
    height: 104px;
  }
}

/* ==========================================================================
   Sec.7 よくあるご質問（trainee-sec7-faq）
   ------------------------------------------------------------------------
   標準の<details>/<summary>要素によるアコーディオンです。JavaScript無しで
   開閉・スクリーンリーダー対応の両方を実現しています。
   ========================================================================== */
.trainee-sec7-faq {
  position: relative;
  background: var(--trainee-white);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec7-faq__inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin: 0 auto;
}
.trainee-sec7-faq__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec7-faq__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-sec7-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trainee-sec7-faq__item {
  box-sizing: border-box;
  background: var(--trainee-white);
  border: 1px solid rgba(37, 122, 74, 0.09);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.trainee-sec7-faq__item summary {
  list-style: none;
}
.trainee-sec7-faq__item summary::-webkit-details-marker {
  display: none;
}
.trainee-sec7-faq__item summary::marker {
  content: "";
}
.trainee-sec7-faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  cursor: pointer;
}
.trainee-sec7-faq__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-white);
}
.trainee-sec7-faq__mark--q {
  background: var(--trainee-green-dark);
}
.trainee-sec7-faq__mark--a {
  background: var(--trainee-accent-warm);
}
.trainee-sec7-faq__q-text {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  color: var(--trainee-text-dark);
  line-height: 1.6;
}
.trainee-sec7-faq__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.trainee-sec7-faq__toggle::before,
.trainee-sec7-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--trainee-green-dark);
  transition: transform 0.25s ease;
}
.trainee-sec7-faq__toggle::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.trainee-sec7-faq__toggle::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.trainee-sec7-faq__item[open] .trainee-sec7-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.trainee-sec7-faq__answer {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--trainee-green-light);
}
.trainee-sec7-faq__a-body {
  flex: 1;
  min-width: 0;
}
.trainee-sec7-faq__a-text {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0;
}
.trainee-sec7-faq__a-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--trainee-text-sub);
  margin: 8px 0 0;
}

@media (max-width: 781px) {
  .trainee-sec7-faq {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec7-faq__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec7-faq__question {
    padding: 18px 18px;
    gap: 12px;
  }
  .trainee-sec7-faq__answer {
    padding: 14px 18px 20px;
    gap: 12px;
  }
  .trainee-sec7-faq__q-text {
    font-size: 14.5px;
  }
  .trainee-sec7-faq__a-text {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   Sec.8.5 お知らせ（trainee-sec85-news）
   ------------------------------------------------------------------------
   最新のブログ記事3件を、日付＋タイトルのみのシンプルなリスト形式で
   表示します。リスト部分はショートコード [trainee_news_grid] によって、
   ページ表示のたびに動的に生成されます（新しい記事を投稿すると自動で
   反映されます）。
   ========================================================================== */
.trainee-sec85-news {
  position: relative;
  background: var(--trainee-white);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
}
.trainee-sec85-news__inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec85-news__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec85-news__list {
  box-sizing: border-box;
  max-width: 840px;
  margin: 0 auto;
  border-top: 1px solid var(--trainee-green-light);
  text-align: left;
}
.trainee-sec85-news__row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--trainee-green-light);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.trainee-sec85-news__row:hover {
  background: var(--trainee-green-light);
}
.trainee-sec85-news__date {
  flex: 0 0 auto;
  width: 92px;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--trainee-text-light);
}
.trainee-sec85-news__row-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trainee-sec85-news__row-arrow {
  flex: 0 0 auto;
  color: var(--trainee-green-dark);
  font-size: 16px;
}
.trainee-sec85-news__empty {
  text-align: center;
  color: var(--trainee-text-light);
  font-size: 14px;
  padding: 40px 0;
  margin: 0;
}
.trainee-sec85-news__inner--footer {
  /* Lightning本体側が .is-layout-flow > * + * に対して
     margin-block-start: unset を強めの詳細度で当てているため、
     このクラスだけのセレクタでは負けてしまいます。!important で
     明示的に上書きしています。 */
  margin-top: 64px !important;
}
.trainee-sec85-news__more-wrap {
  margin: 0;
}
.trainee-sec85-news__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--trainee-green-dark);
  background: var(--trainee-green-light);
  border-radius: 999px;
  padding: 12px 28px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.trainee-sec85-news__more-link:hover {
  background: var(--trainee-green-mid);
}

@media (max-width: 781px) {
  .trainee-sec85-news {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec85-news__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-sec85-news__inner--footer {
    margin-top: 44px !important;
  }
  .trainee-sec85-news__row {
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 18px 4px;
  }
  .trainee-sec85-news__date {
    width: auto;
    order: 1;
  }
  .trainee-sec85-news__row-arrow {
    order: 2;
    margin-left: auto;
  }
  .trainee-sec85-news__row-title {
    order: 3;
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   Sec.9.5 関係機関の皆様へ（trainee-sec95-partners）
   ------------------------------------------------------------------------
   フッター手前に配置する、医療機関・関係機関向けの控えめな案内バーです。
   ========================================================================== */
.trainee-sec95-partners {
  background: var(--trainee-cream);
  padding: 56px 24px;
}
.trainee-sec95-partners__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec95-partners__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--trainee-text-dark);
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec95-partners__desc {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0 0 24px !important;
}
.trainee-sec95-partners__link-wrap {
  margin: 0;
}
.trainee-sec95-partners__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border-radius: 999px;
  padding: 13px 32px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.trainee-sec95-partners__link:hover,
.trainee-sec95-partners__link:focus,
.trainee-sec95-partners__link:visited {
  color: var(--trainee-white);
}
.trainee-sec95-partners__link:hover {
  background: var(--trainee-green-darker);
  transform: translateY(-2px);
}

@media (max-width: 781px) {
  .trainee-sec95-partners {
    padding: 44px 20px;
  }
  .trainee-sec95-partners__title {
    font-size: 18px;
  }
}

/* ==========================================================================
   Sec.8 CTA（trainee-sec8-cta）
   ------------------------------------------------------------------------
   「相談・見学申し込み」ボタンと、お電話でのご相談（電話番号・受付時間）を
   まとめて見せるCTAセクションです。電話番号はtel:リンクにしているため、
   スマートフォンでタップするとそのまま発信できます。
   ========================================================================== */
.trainee-sec8-cta {
  position: relative;
  background: var(--trainee-green-dark);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-sec8-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.trainee-sec8-cta__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-white);
  margin: 0 0 44px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-sec8-cta__button-wrap {
  position: relative;
  display: inline-block;
  margin: 0 0 40px;
}
.trainee-sec8-cta__badge {
  position: absolute;
  top: -20px;
  left: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--trainee-white);
  background: var(--trainee-accent-warm);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  transform: rotate(-7deg);
}
.trainee-sec8-cta__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--trainee-green-dark);
  background: var(--trainee-white);
  border-radius: 999px;
  padding: 20px 56px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trainee-sec8-cta__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.trainee-sec8-cta__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
}
.trainee-sec8-cta__divider span:not(.trainee-sec8-cta__divider-text) {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.trainee-sec8-cta__divider-text {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.trainee-sec8-cta__phone-label {
  font-size: 14.5px;
  color: var(--trainee-white);
  margin: 0 0 14px !important;
}
.trainee-sec8-cta__phone-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--trainee-white);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.trainee-sec8-cta__phone-icon {
  flex: 0 0 auto;
}
.trainee-sec8-cta__phone-hours {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 !important;
}

@media (max-width: 781px) {
  .trainee-sec8-cta {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec8-cta__title {
    font-size: 24px;
  }
  .trainee-sec8-cta__button-wrap {
    display: block;
  }
  .trainee-sec8-cta__button {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 32px;
    font-size: 16.5px;
  }
  .trainee-sec8-cta__badge {
    font-size: 12.5px;
    padding: 6px 15px;
    left: 0;
  }
}

/* ==========================================================================
   ページA：訓練内容（下層ページ）
   ------------------------------------------------------------------------
   トップページと同じデザイントークン（色・タイポグラフィ・カード・
   ボタン）を踏襲しつつ、下層ページ専用のセクションとして実装しています。
   ========================================================================== */

/* ---- A-0：導入リード文 ---- */
.trainee-page-training-intro {
  background: var(--trainee-white);
  padding: 56px 24px 48px;
}
.trainee-page-training-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-training-intro__lead {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.8;
  color: var(--trainee-text-dark);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trainee-page-training-intro__lead-row {
  display: block;
}

/* ---- A-1：TRAINEEの一日 ---- */
.trainee-page-training-day {
  position: relative;
  /* 2026-08-19：方眼紙のグリッド背景をやめました。
     もともとは「ヒーローと同じクリームが続いて境目がぼやける」対策でしたが、
     サイト内でここだけの装飾になっており、浮いて見えていました。
     境目は、上のA-0（白）に対してクリームを敷くことで付けます。
     トップページで使っている白→クリームの交互パターンと同じ考え方です。 */
  background: var(--trainee-cream);
  padding: 88px 24px 104px;
  overflow: hidden;
}
.trainee-page-training-day__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-training-day__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-training-day__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-page-training-day__hours {
  font-size: 15px;
  font-weight: 500;
  color: var(--trainee-text-sub);
  margin: 0 0 48px !important;
}
.trainee-page-training-day__hours strong {
  color: var(--trainee-green-dark);
}
/* --------------------------------------------------------------------------
   A-1：横一本の時間軸（2026-08-19 デザイン変更）

   旧：カード5枚＋矢印（.trainee-page-training-day__grid / __card / __arrow /
       __step / __card-title / __card-desc）。この位置ごと差し替えています。
       旧クラスはPHP側でも出力しなくなったため、指定も残していません
       （落とし穴6-4：古い指定を必ず消す）。

   構造は「点」と「区間」の2種類だけです。
     .__point … 軸の上の丸。時刻・見出し・説明を下にぶら下げます
     .__span  … 点と点のあいだの帯。訓練の時間帯のラベルを軸の上に載せます

   軸の高さはドットの中心（上から11px）で統一しています。
   __point の ::before と __span の ::before / ラベルは、すべてこの
   11px を基準に置いているので、片方だけ動かすと軸がずれます。
   -------------------------------------------------------------------------- */

.trainee-page-training-day__flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* ---- 点（時刻） ---- */
.trainee-page-training-day__point {
  box-sizing: border-box;
  flex: 0 0 200px;
  position: relative;
  padding: 30px 8px 0;
  text-align: center;
}
.trainee-page-training-day__point::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--trainee-green-dark);
  /* 軸の線が丸の下をくぐって見えないよう、背景色で縁取りします */
  box-shadow: 0 0 0 5px var(--trainee-cream), 0 0 0 8px rgba(37, 122, 74, 0.16);
}
.trainee-page-training-day__point--break::before {
  background: var(--trainee-accent-warm);
  box-shadow: 0 0 0 5px var(--trainee-cream), 0 0 0 8px rgba(232, 147, 78, 0.22);
}
.trainee-page-training-day__point-time {
  display: block;
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.3;
  color: var(--trainee-green-dark);
  letter-spacing: 0.01em;
}
.trainee-page-training-day__point--break .trainee-page-training-day__point-time {
  color: var(--trainee-accent-warm);
  font-size: 16px;
}
.trainee-page-training-day__point-title {
  display: block;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--trainee-text-dark);
  margin-top: 4px;
}
.trainee-page-training-day__point-desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--trainee-text-sub);
  margin: 10px 0 0 !important;
}

/* ---- 区間（訓練の時間帯） ---- */
.trainee-page-training-day__span {
  flex: 1 1 auto;
  position: relative;
  align-self: flex-start;
  height: 22px;
  min-width: 90px;
}
/* 軸の線。丸の中心（上から11px）を通します */
.trainee-page-training-day__span::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(37, 122, 74, 0.35) 0 6px,
    transparent 6px 12px
  );
}
.trainee-page-training-day__span-label {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 線の上に載せるので、背景色で線を隠します */
  background: var(--trainee-cream);
  padding: 0 14px;
  white-space: nowrap;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--trainee-green-dark);
}

/* --------------------------------------------------------------------------
   A-1：補足3点（2026-08-19 デザイン変更）

   旧：白カード＋影＋緑の丸アイコン。1行の短文にカードは重すぎるうえ、
       すぐ下のA-2「特徴5点」も緑の丸アイコンだったため装飾が重複して
       いました。カードと丸を外し、細い罫線で仕切るだけにします。
   -------------------------------------------------------------------------- */
.trainee-page-training-day__notes {
  box-sizing: border-box;
  max-width: 940px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(37, 122, 74, 0.18);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.trainee-page-training-day__note {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 24px;
  text-align: left;
  border-left: 1px solid rgba(37, 122, 74, 0.18);
  /* 旧デザイン（カード）の名残を確実に消します */
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.trainee-page-training-day__note:first-child {
  border-left: none;
  padding-left: 0;
}
.trainee-page-training-day__note:last-child {
  padding-right: 0;
}
.trainee-page-training-day__note-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--trainee-green-soft);
  /* 本文1行目の中央にアイコンの中心が来るように少しだけ下げます */
  margin-top: 1px;
}
.trainee-page-training-day__note-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--trainee-text-sub);
  margin: 0 !important;
}

@media (max-width: 900px) {
  /* スマホ・タブレットでは横軸が入らないので、縦の時間軸に組み替えます */
  .trainee-page-training-day__flow {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
  }
  .trainee-page-training-day__point {
    flex: none;
    padding: 0 0 0 36px;
    text-align: left;
  }
  .trainee-page-training-day__point::before {
    top: 5px;
    left: 6px;
    transform: none;
  }
  .trainee-page-training-day__span {
    height: auto;
    min-width: 0;
    padding: 12px 0 12px 36px;
  }
  .trainee-page-training-day__span::before {
    top: 0;
    bottom: 0;
    left: 12px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgba(37, 122, 74, 0.35) 0 6px,
      transparent 6px 12px
    );
  }
  .trainee-page-training-day__span-label {
    position: static;
    transform: none;
    padding: 0;
    background: none;
  }
  .trainee-page-training-day__notes {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 40px;
  }
  .trainee-page-training-day__note {
    padding: 0;
    border-left: none;
  }
}

@media (max-width: 781px) {
  .trainee-page-training-day {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-training-day__title {
    font-size: 24px;
  }
  .trainee-page-training-day__hours {
    margin-bottom: 32px !important;
    font-size: 13.5px;
  }
  .trainee-page-training-day__point-time {
    font-size: 17px;
  }
}

/* ---- A-2：TRAINEEの訓練内容 ---- */
.trainee-page-training-curriculum {
  position: relative;
  background: var(--trainee-white);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-page-training-curriculum__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-training-curriculum__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 48px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-training-curriculum__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}

/* 職業準備性ピラミッド：同じ内容・同じ配色（濃緑→淡緑のグラデーション）で
   静的な図画像として書き出したものを表示しています
   （/assets/img/pageA/13_pyramid_diagram.png・生成方法はrender_pyramid.html参照）。 */
.trainee-page-training-curriculum__pyramid-wrap {
  max-width: 480px;
  margin: 0 auto 40px;
}
.trainee-page-training-curriculum__pyramid-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 24px;
}
.trainee-page-training-curriculum__pyramid-caption {
  font-size: 14px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0;
}

.trainee-page-training-curriculum__features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto 72px;
}
.trainee-page-training-curriculum__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.trainee-page-training-curriculum__feature-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trainee-page-training-curriculum__feature-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-page-training-curriculum__example-title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-training-curriculum__example-title::after {
  content: none !important;
}
.trainee-page-training-curriculum__example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}
.trainee-page-training-curriculum__example-card {
  position: relative;
  /* 2026-08-19：緑のベタ塗りをクリームに。
     このセクションは白背景なので、緑だと写真より先に色が目に入ります。
     写真を主役にしたいので、台紙は色味を落とします。 */
  background: var(--trainee-cream);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trainee-page-training-curriculum__example-image {
  line-height: 0;
}
.trainee-page-training-curriculum__example-image img {
  display: block;
  width: 100%;
  height: auto;
}
.trainee-page-training-curriculum__example-body {
  padding: 24px 22px 28px;
  text-align: center;
}
.trainee-page-training-curriculum__example-card-title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--trainee-text-dark);
  margin: 0 0 10px !important;
  padding: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
  /* 2026-08-19：この見出しは h4 で書かれており、Lightning標準の h4 に
     付いているグレーの背景帯（rgba(0,0,0,.06)）がそのまま出ていました。
     枠線は既に打ち消していましたが、背景の打ち消しが抜けていました。 */
  background: none !important;
}
.trainee-page-training-curriculum__example-card-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
  margin: 0;
}

@media (max-width: 781px) {
  .trainee-page-training-curriculum {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-training-curriculum__title {
    font-size: 24px;
    margin-bottom: 32px !important;
  }
  .trainee-page-training-curriculum__pyramid-wrap {
    max-width: 340px;
    margin-bottom: 32px;
  }
  .trainee-page-training-curriculum__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
    margin-bottom: 56px;
  }
  .trainee-page-training-curriculum__feature:last-child {
    grid-column: span 2;
  }
  .trainee-page-training-curriculum__example-title {
    font-size: 18px;
    margin-bottom: 24px !important;
  }
  .trainee-page-training-curriculum__example-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- A-3：TRAINEEの支援内容（利用期間の流れ・CTA） ---- */
.trainee-page-training-support {
  position: relative;
  background: var(--trainee-green-light);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
  overflow: hidden;
}
.trainee-page-training-support__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-training-support__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 92px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-training-support__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
/* --------------------------------------------------------------------------
   A-3：縦3段の支援フロー（2026-08-19 デザイン変更）

   旧：3カラムのカード横並び（__grid / __phase / __timeline ほか）。
       この位置ごと差し替えています。旧クラス（__timeline* 一式）は
       PHP側でも出力しなくなったため、指定も残していません（落とし穴6-4）。

   ■ 直した問題
     1. 就職期間だけステップが4つ、準備期間は2つ、定着期間は1つ。
        3枚の高さがそろうため、残り2枚の下半分が空白になっていた。
     2. 「就職」のマイルストーンをカードの上に絶対配置していたため、
        見出し「TRAINEEの支援内容」に重なっていた。

   ■ 考え方
     縦に積めば、段ごとに必要な高さが決まるので 1 は起きません。
     2 は「重なりようのない置き方」に変えます。段と段のあいだに
     区切りとして挟むので、位置の計算そのものが不要になります。
   -------------------------------------------------------------------------- */

.trainee-page-training-support__phases {
  max-width: 940px;
  margin: 0 auto;
  text-align: left;
}
.trainee-page-training-support__phase {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  background: var(--trainee-white);
  border-radius: 20px;
  padding: 32px 36px;
}

/* ---- 左：イラストと期間バッジ ---- */
.trainee-page-training-support__phase-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.trainee-page-training-support__phase-image {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--trainee-green-light);
  flex: 0 0 auto;
}
.trainee-page-training-support__phase-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trainee-page-training-support__phase-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border-radius: 999px;
  padding: 7px 20px;
}

/* ---- 右：ステップと説明 ---- */
.trainee-page-training-support__phase-main {
  min-width: 0;
}
.trainee-page-training-support__steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trainee-page-training-support__steps li {
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  margin: 0;
}
.trainee-page-training-support__phase-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
  margin: 0 !important;
  padding-top: 18px;
  border-top: 1px dashed rgba(37, 122, 74, 0.2);
}
.trainee-page-training-support__phase-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--trainee-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.trainee-page-training-support__phase-link-arrow {
  transition: transform 0.2s ease;
}
.trainee-page-training-support__phase-link:hover .trainee-page-training-support__phase-link-arrow {
  transform: translateX(3px);
}

/* ---- 段と段のあいだ：「就職」のマイルストーン ----
   段の外側に置く独立した行なので、見出しや本文と重なりません。 */
.trainee-page-training-support__milestone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  margin: 18px 0;
}
.trainee-page-training-support__milestone::before,
.trainee-page-training-support__milestone::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(232, 147, 78, 0.55) 0 6px,
    transparent 6px 12px
  );
}
.trainee-page-training-support__milestone-label {
  flex: 0 0 auto;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--trainee-white);
  background: var(--trainee-accent-warm);
  border-radius: 999px;
  padding: 7px 22px;
  box-shadow: 0 4px 12px rgba(232, 147, 78, 0.28);
}

/* 段と段のすきま */
.trainee-page-training-support__phase + .trainee-page-training-support__phase {
  margin-top: 20px;
}

@media (max-width: 781px) {
  .trainee-page-training-support {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-training-support__title {
    font-size: 24px;
    margin-bottom: 36px !important;
  }
  /* スマホでは左右2列が入らないので、イラストとバッジを横に並べて
     1行にまとめ、その下にステップと説明を置きます */
  .trainee-page-training-support__phase {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
  }
  .trainee-page-training-support__phase-side {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  .trainee-page-training-support__phase-image {
    width: 72px;
    height: 72px;
  }
  .trainee-page-training-support__steps li {
    font-size: 14.5px;
  }
  .trainee-page-training-support__phase-desc {
    font-size: 13.5px;
  }
  .trainee-page-training-support__milestone {
    padding: 0 8px;
    margin: 14px 0;
  }
}

/* ==========================================================================
   下層ページ共通ヒーロー（trainee-page-hero）
   ------------------------------------------------------------------------
   Lightning標準の青いページタイトル帯に代わる、下層ページ共通のヘッダーです。
   [trainee_page_hero] ショートコードで実装しており、挿入したページの
   タイトルを自動で取得して表示するため、どのページに挿入しても
   タイトル文言を手打ちする必要がありません（詳細はfunctions.php内の
   コメント参照）。
   「アクセント付きフラットバンド」案：クリーム背景＋大きな見出しに
   サイト共通の点線下線アクセント、パンくずの先頭に小さな緑の丸を
   一つだけ添えています（円形の装飾がセクション端で欠けて見えると
   いう過去のご指摘を踏まえ、背景に大きな円は置かず、インライン要素の
   小さな丸のみにとどめています）。
   ========================================================================== */
.trainee-page-hero {
  background: var(--trainee-cream);
  padding: 72px 24px 40px;
}
.trainee-page-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--trainee-text-sub);
  margin: 16px 0 0 !important;
}
.trainee-page-hero__date {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  color: var(--trainee-text-sub);
  margin: 12px 0 0 !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trainee-page-hero__date::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}
.trainee-page-hero__breadcrumb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--trainee-green-dark);
  flex: 0 0 auto;
}
.trainee-page-hero__breadcrumb a {
  color: var(--trainee-text-sub);
  text-decoration: none;
}
.trainee-page-hero__breadcrumb a:hover {
  color: var(--trainee-green-dark);
  text-decoration: underline;
}
.trainee-page-hero__breadcrumb-sep {
  color: var(--trainee-text-light);
}
.trainee-page-hero__breadcrumb-current {
  color: var(--trainee-text-dark);
  font-weight: 700;
}
.trainee-page-hero__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--trainee-text-dark);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* 2026-08：点線の下線は廃止しました。以前は下の Phase 4-A ブロックで
   border-bottom:none !important と打ち消していましたが、二重指定が
   溜まる原因（落とし穴6-4）なので、元の指定ごと削除しています。
   .trainee-page-hero__title-accent 自体は、今後キーワードの色替えなどに
   使えるようマークアップには残しています。 */

@media (max-width: 781px) {
  .trainee-page-hero {
    padding: 40px 20px 28px;
  }
  .trainee-page-hero__breadcrumb {
    font-size: 12px;
    margin-bottom: 12px !important;
  }
  .trainee-page-hero__title {
    font-size: 24px;
  }
}

/* ==========================================================================
   ページB：定着支援
   ========================================================================== */

/* ---- B-0：導入リード文 ---- */
.trainee-page-support-intro {
  position: relative;
  background: var(--trainee-white);
  padding: 72px 24px 56px;
  text-align: center;
}
.trainee-page-support-intro__inner {
  max-width: 720px;
  margin: 0 auto;
}
.trainee-page-support-intro__heading {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--trainee-text-dark);
  margin: 0 0 24px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-support-intro__heading-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-page-support-intro__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
  margin: 0;
}

@media (max-width: 781px) {
  .trainee-page-support-intro {
    padding: 56px 20px 40px;
  }
  .trainee-page-support-intro__heading {
    font-size: 21px;
  }
  .trainee-page-support-intro__lead {
    font-size: 13.5px;
  }
}

/* ---- B-1：定着支援の3つの柱 ---- */
.trainee-page-support-pillars {
  position: relative;
  background: var(--trainee-cream);
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
}
.trainee-page-support-pillars__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-support-pillars__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 64px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-support-pillars__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
.trainee-page-support-pillars__list {
  display: flex;
  flex-direction: column;
  gap: 72px;
  text-align: left;
}
.trainee-page-support-pillars__item {
  display: flex;
  align-items: center;
  gap: 52px;
}
.trainee-page-support-pillars__item:nth-child(even) {
  flex-direction: row-reverse;
}
.trainee-page-support-pillars__image {
  flex: 1 1 56%;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 12px 30px rgba(28, 95, 58, 0.12);
}
.trainee-page-support-pillars__image img {
  display: block;
  width: 100%;
  height: auto;
}
.trainee-page-support-pillars__body {
  flex: 1 1 40%;
  min-width: 0;
}
.trainee-page-support-pillars__number {
  display: inline-block;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border-radius: 999px;
  padding: 4px 16px;
  margin: 0 0 16px;
}
.trainee-page-support-pillars__item-title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 21px;
  color: var(--trainee-text-dark);
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-support-pillars__item-title::after {
  content: none !important;
  border: none !important;
}
.trainee-page-support-pillars__item-desc {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
  margin: 0;
}

/* 2026-08-19：横並びをやめる幅を900px→1023pxに広げました。
   901〜1100pxの帯では本文の列が330px前後まで痩せ、文節を固定している
   かたまり（.trainee-nowrap）が折り返せず横にはみ出していました。
   この帯では最初から縦積みにして、本文に全幅を渡します。 */
@media (max-width: 1023px) {
  .trainee-page-support-pillars__item,
  .trainee-page-support-pillars__item:nth-child(even) {
    flex-direction: column;
    gap: 24px;
  }
  .trainee-page-support-pillars__image {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 781px) {
  .trainee-page-support-pillars {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-support-pillars__title {
    font-size: 24px;
    margin-bottom: 40px !important;
  }
  .trainee-page-support-pillars__list {
    gap: 40px;
  }
  .trainee-page-support-pillars__item-title {
    font-size: 18px;
  }
}

/* ---- B-2：定着支援の効果 ---- */
.trainee-page-support-effects {
  position: relative;
  background: var(--trainee-white);
  /* 2026-08-19：下余白が128pxあり、次のCTA（深緑）との間が空きすぎて
     いたので約7割に。カードが2段になって縦が伸びたぶんも相殺します。 */
  padding: var(--trainee-sec-pt) 24px calc(var(--trainee-sec-pb) * 0.7);
}
.trainee-page-support-effects__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-support-effects__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 56px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-support-effects__title-accent {
  color: var(--trainee-green-dark);
  border-bottom: 3px dotted var(--trainee-green-dark);
  padding-bottom: 2px;
}
/* --------------------------------------------------------------------------
   B-2：2×2・アイコン左（2026-08-19 デザイン変更）

   旧：4カラムのカードに見出し1行だけ。中身に対して箱が重く、
       4枚目だけ2行に折り返して不揃いでした。
       さらに「丸アイコンを上・見出しを下」というカードの組み方が、
       訓練内容ページのA-2（特徴5点）とほぼ同じで、
       ページをまたいで同じ形が繰り返されていました。
   新：各項目に説明を1〜2行足し、2×2に。アイコンは左に置いて
       文章を右に流します。A-2（アイコン上・中央揃え）と形が変わります。
   -------------------------------------------------------------------------- */
.trainee-page-support-effects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  /* 4カラム時代の1080pxのままだと1枚が横に広がりすぎるので少し絞ります */
  max-width: 960px;
  margin: 0 auto;
}
.trainee-page-support-effects__item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  text-align: left;
  background: var(--trainee-green-light);
  border-radius: 20px;
  padding: 28px 30px;
}
.trainee-page-support-effects__item-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--trainee-white);
  color: var(--trainee-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trainee-page-support-effects__item-body {
  min-width: 0;
}
.trainee-page-support-effects__item-title {
  display: block;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}
.trainee-page-support-effects__item-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 8px 0 0 !important;
}

@media (max-width: 781px) {
  .trainee-page-support-effects {
    padding: var(--trainee-sec-pt-sp) 20px calc(var(--trainee-sec-pb-sp) * 0.7);
  }
  .trainee-page-support-effects__title {
    font-size: 24px;
    margin-bottom: 36px !important;
  }
  /* 説明文が入ったので、2列だと1枚が狭すぎます。縦1列に */
  .trainee-page-support-effects__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trainee-page-support-effects__item {
    padding: 22px 20px;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .trainee-page-support-effects__item-icon {
    width: 48px;
    height: 48px;
  }
  .trainee-page-support-effects__item-title {
    font-size: 15.5px;
  }
  .trainee-page-support-effects__item-desc {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   ページC：就労移行支援とは
   ------------------------------------------------------------------------
   C-0 導入リード文（白）→ C-1 利用できる方（淡い緑）→
   C-2 利用料金（白）→ C-3 利用期間・ご利用までの流れ（クリーム）の
   順に背景色を交互にして、既存ページ（A・B）と同じリズムにしています。
   ========================================================================== */

/* ---- C-0：導入リード文 ---- */
.trainee-page-service-intro {
  background: var(--trainee-white);
  padding: 56px 24px 48px;
}
.trainee-page-service-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-service-intro__lead {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.8;
  color: var(--trainee-text-dark);
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
}
.trainee-page-service-intro__text {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 2;
  color: var(--trainee-text-sub);
  margin: 0 0 12px;
}
.trainee-page-service-intro__text-highlight {
  font-weight: 700;
  color: var(--trainee-accent-warm);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.trainee-page-service-intro__note {
  margin: 24px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--trainee-text-light);
}

@media (max-width: 781px) {
  .trainee-page-service-intro {
    padding: 40px 20px 36px;
  }
}

/* ---- C-1：利用できる方（利用条件） ---- */
.trainee-page-service-conditions {
  background: var(--trainee-green-light);
  padding: 88px 24px 96px;
}
.trainee-page-service-conditions__inner {
  max-width: 760px;
  margin: 0 auto;
}
.trainee-page-service-conditions__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 40px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-service-conditions__title-accent {
  color: inherit;
}
.trainee-page-service-conditions__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 2026-08-19：1行の項目に白カード＋影は重すぎたので、
   薄い罫線で区切るだけにしました。チェックの丸が要点を示すので、
   箱がなくても項目のまとまりは読み取れます。 */
.trainee-page-service-conditions__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(37, 122, 74, 0.18);
}
.trainee-page-service-conditions__item:last-child {
  border-bottom: none;
}
.trainee-page-service-conditions__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.trainee-page-service-conditions__item-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--trainee-text-dark);
}
.trainee-page-service-conditions__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
}

@media (max-width: 781px) {
  .trainee-page-service-conditions {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-service-conditions__title {
    font-size: 24px;
    margin-bottom: 28px !important;
  }
  .trainee-page-service-conditions__item {
    padding: 14px 16px;
  }
  .trainee-page-service-conditions__item-text {
    font-size: 14px;
  }
}

/* ---- C-2：利用料金 ---- */
.trainee-page-service-fee {
  background: var(--trainee-white);
  padding: 88px 24px 96px;
}
.trainee-page-service-fee__inner {
  max-width: 760px;
  margin: 0 auto;
}
.trainee-page-service-fee__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-service-fee__title-accent {
  color: inherit;
}
.trainee-page-service-fee__text {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
  margin: 0 0 24px;
  text-align: center;
}
.trainee-page-service-fee__table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.trainee-page-service-fee__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--trainee-white);
  font-size: 14.5px;
}
.trainee-page-service-fee__table th,
.trainee-page-service-fee__table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(37, 122, 74, 0.12);
  white-space: nowrap;
}
.trainee-page-service-fee__table th {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
}
/* 2026-08-19 バグ修正：見出し行の右セル「負担上限月額」が読めませんでした。
   右寄せと太字をまとめて指定したときに、金額用の緑色まで th に当たり、
   深緑の背景に深緑の文字（同じ色）になっていたためです。
   右寄せは両方に、色は金額セル（td）だけに分けます。 */
.trainee-page-service-fee__table td:last-child,
.trainee-page-service-fee__table th:last-child {
  font-weight: 700;
  text-align: right;
}
.trainee-page-service-fee__table td:last-child {
  color: var(--trainee-green-dark);
}
.trainee-page-service-fee__table tr:last-child td {
  border-bottom: none;
}
.trainee-page-service-fee__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--trainee-text-light);
}

@media (max-width: 781px) {
  .trainee-page-service-fee {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-service-fee__title {
    font-size: 24px;
    margin-bottom: 20px !important;
  }
  .trainee-page-service-fee__table th,
  .trainee-page-service-fee__table td {
    padding: 12px 14px;
    font-size: 13px;
    white-space: normal;
  }
}

/* ---- C-3：利用期間・ご利用までの流れ ---- */
.trainee-page-service-flow {
  position: relative;
  background: var(--trainee-cream);
  padding: 88px 24px 104px;
}
.trainee-page-service-flow__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-service-flow__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--trainee-text-dark);
  margin: 0 0 20px !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.trainee-page-service-flow__title--steps {
  margin-top: 64px !important;
}
.trainee-page-service-flow__title-accent {
  color: inherit;
}
.trainee-page-service-flow__text {
  max-width: 720px;
  margin: 0 auto 12px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}
.trainee-page-service-flow__note {
  max-width: 720px;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--trainee-text-light);
}
.trainee-page-service-flow__note--closing {
  max-width: 900px;
  margin: 40px auto 0;
}
/* --------------------------------------------------------------------------
   C-3：番号付きの横一列（2026-08-19 デザイン変更）

   旧：カード＋矢印の横並び5枚（__grid / __card / __arrow / __step /
       __card-title / __card-desc）。この位置ごと差し替えています。
       訓練内容ページのA-1で同じ形を廃止したため、サイト内でここだけ
       取り残されていました。旧クラスはPHP側でも出力しなくなったので、
       指定も残していません（落とし穴6-4）。

   番号の丸の中心（上から21px）に軸を通しています。丸の box-shadow で
   セクションの背景色を縁取りし、線が丸をくぐって見えないようにしています。
   背景色を変えるときは、この box-shadow の色も一緒に変えてください。
   -------------------------------------------------------------------------- */
.trainee-page-service-flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-service-flow__step-item {
  position: relative;
  padding: 0 12px;
}
/* 番号どうしをつなぐ点線。最後の項目からは伸ばしません */
.trainee-page-service-flow__step-item::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(37, 122, 74, 0.3) 0 6px,
    transparent 6px 12px
  );
}
.trainee-page-service-flow__step-item:last-child::before {
  content: none;
}
.trainee-page-service-flow__step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: var(--trainee-font-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  /* セクション背景（クリーム）で、丸の周りの線を隠します */
  box-shadow: 0 0 0 6px var(--trainee-cream);
}
.trainee-page-service-flow__step-title {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  margin: 16px 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.trainee-page-service-flow__step-title::after {
  content: none !important;
}
.trainee-page-service-flow__step-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
  margin: 0 !important;
}

/* 1023px以下は5列が窮屈になるので縦一列に。
   901〜1023pxの帯だと1列が170px前後まで痩せ、5行以上に折り返して
   かえって読みにくくなるためです。 */
@media (max-width: 1023px) {
  .trainee-page-service-flow__steps {
    grid-template-columns: 1fr;
    max-width: 460px;
    text-align: left;
  }
  .trainee-page-service-flow__step-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "num title"
      "num desc";
    column-gap: 16px;
    padding: 0 0 28px;
  }
  .trainee-page-service-flow__step-item:last-child {
    padding-bottom: 0;
  }
  .trainee-page-service-flow__step-item::before {
    top: 48px;
    bottom: 6px;
    left: 20px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgba(37, 122, 74, 0.3) 0 6px,
      transparent 6px 12px
    );
  }
  .trainee-page-service-flow__step-num {
    grid-area: num;
    align-self: start;
  }
  .trainee-page-service-flow__step-title {
    grid-area: title;
    margin: 8px 0 6px !important;
  }
  .trainee-page-service-flow__step-desc {
    grid-area: desc;
  }
}

@media (max-width: 781px) {
  .trainee-page-service-flow {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-page-service-flow__title {
    font-size: 24px;
    margin-bottom: 16px !important;
  }
  .trainee-page-service-flow__title--steps {
    margin-top: 44px !important;
  }
}

/* ==========================================================================
   ページE 卒業生の声：共通パーツ（アバター・属性タグ）
   ------------------------------------------------------------------------
   一覧ページのカード（trainee-gv-list）と、個別ページのプロフィール表示
   （trainee-gv-profile）の両方から共通して使われるパーツです。
   ========================================================================== */
.trainee-gv-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.trainee-gv-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--trainee-green-dark);
}
.trainee-gv-tags span {
  white-space: nowrap;
}
/* 2026-08：カード内では左揃えにします。
   中央揃えのままだとアバターを左に置いた横組みで属性だけが浮いて見えます。
   個別ページのプロフィール（アバターが中央）は中央揃えのままです。 */
.trainee-gv-tags--left {
  justify-content: flex-start;
  text-align: left;
}

/* ==========================================================================
   ページE 卒業生の声：一覧ページ（trainee-gv-list）
   ------------------------------------------------------------------------
   [trainee_graduate_voice_list] ショートコードの出力です。ページ表示の
   たびに公開済みの投稿を取得するため、新しい卒業生の声を追加しても
   このショートコードを埋め込んだページ側の再編集は不要です。
   2カラムのカードグリッド、10件ごとに ?gv_page=N でページ送りします。
   ========================================================================== */
/* --------------------------------------------------------------------------
   2026-08 デザイン刷新：トップページの「卒業生の声」と同じ質感に統一

   旧：緑ベタ塗り（--trainee-green-light）＋中央揃え＋アバター上
       トップページのカード（クリーム＋左揃え＋アバター左）とは
       別デザインになっていて、同じ内容なのに見た目が揃っていませんでした。
   新：クリーム背景・アバター左・テキスト左揃え・キャッチコピーは「」付き。
       トップの .trainee-sec55-interviews__card と同じ言語です。

   旧指定は上書きせず、この位置ごと差し替えています（落とし穴6-4）。
   -------------------------------------------------------------------------- */
.trainee-gv-list {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}
.trainee-gv-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.trainee-gv-list__card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  box-sizing: border-box;
  background: var(--trainee-cream);
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trainee-gv-list__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.trainee-gv-list__avatar {
  width: 104px;
  height: 104px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(37, 122, 74, 0.15);
  /* 横組みなので、テキストが長くてもアバターが潰れないように固定します。
     関連投稿カードでアバターが欠けて見えた原因がこれでした。 */
  flex: 0 0 auto;
}
/* アバターの右側。min-width:0 がないと、長いキャッチコピーで
   グリッドの列幅が押し広げられてカードがはみ出します。 */
.trainee-gv-list__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
/* 中身は氏名ではなくキャッチコピーです。
   トップのカード見出しと同じく「」で囲みます（CSSで付与） */
.trainee-gv-list__headline {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.65;
  color: var(--trainee-text-dark);
  margin: 0 0 10px;
  transition: color 0.2s ease;
}
.trainee-gv-list__headline::before {
  content: "「";
}
.trainee-gv-list__headline::after {
  content: "」";
}
.trainee-gv-list__card:hover .trainee-gv-list__headline,
.trainee-gv-list__card:focus-visible .trainee-gv-list__headline {
  color: var(--trainee-green-dark);
}
.trainee-gv-list__excerpt {
  font-size: 14px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0 0 16px;
}
.trainee-gv-list__readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* カードの高さが揃わないので、下端に貼り付けます */
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--trainee-green-dark);
}
.trainee-gv-list__empty {
  text-align: center;
  font-size: 15px;
  color: var(--trainee-text-sub);
  padding: 48px 0;
}
.trainee-gv-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 56px 0 0;
}
.trainee-gv-list__page-link,
.trainee-gv-list__page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 0 6px;
}
.trainee-gv-list__page-link {
  color: var(--trainee-green-dark);
  text-decoration: none;
  background: var(--trainee-white);
  border: 2px solid var(--trainee-green-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.trainee-gv-list__page-link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
}
.trainee-gv-list__page-current {
  color: var(--trainee-white);
  background: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
  font-weight: 900;
}
.trainee-gv-list__page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  background: transparent;
  border: none;
  font-size: 18px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.trainee-gv-list__page-arrow:hover {
  color: var(--trainee-green-darker);
  transform: translateX(2px);
}
.trainee-gv-list__page-arrow--prev:hover {
  transform: translateX(-2px);
}

@media (max-width: 781px) {
  .trainee-gv-list {
    padding: 32px 20px 56px;
  }
  .trainee-gv-list__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* スマホでも横組みのまま。アバターを小さくして、
     1枚あたりの高さを抑えます */
  .trainee-gv-list__card {
    gap: 16px;
    padding: 22px 20px;
  }
  .trainee-gv-list__avatar {
    width: 72px;
    height: 72px;
  }
  .trainee-gv-list__headline {
    font-size: 15.5px;
  }
  .trainee-gv-list__excerpt {
    font-size: 13.5px;
  }
  .trainee-gv-list__pagination {
    gap: 8px;
    margin-top: 36px;
  }
}

/* ==========================================================================
   ページE 卒業生の声：個別ページ プロフィール（trainee-gv-profile-section）
   ------------------------------------------------------------------------
   ページヒーローの直後に表示する、アバター・お名前（伏せ字）・属性タグの
   簡易プロフィールです。[trainee_graduate_voice_profile] ショートコードの
   出力を囲むラッパーです。
   ========================================================================== */
.trainee-gv-profile-section {
  background: var(--trainee-white);
  padding: 56px 24px 0;
}
.trainee-gv-profile {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.trainee-gv-profile__avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(37, 122, 74, 0.15);
}
/* 2026-08：氏名を単独で出す .trainee-gv-profile__name は、構造変更で
   属性タグ（trainee_child_graduate_voice_tags_html）に統合されたため
   出力されなくなりました。残っていた指定を削除しています（落とし穴6-4）。
   属性タグはここでは中央揃えのままにします（アバターが中央にあるため）。 */
.trainee-gv-profile .trainee-gv-tags {
  font-size: 14px;
  margin: 0;
}

@media (max-width: 781px) {
  .trainee-gv-profile-section {
    padding: 40px 20px 0;
  }
  .trainee-gv-profile__avatar {
    width: 96px;
    height: 96px;
  }
  .trainee-gv-profile .trainee-gv-tags {
    font-size: 13px;
  }
}

/* ==========================================================================
   ページE 卒業生の声：個別ページ Q&A本文（trainee-gv-qa）
   ------------------------------------------------------------------------
   6つの質問と回答を、Sec.7のFAQと共通のQ/Aマーク（丸バッジ）の
   ビジュアル言語を踏襲しつつ、常に開いた状態（アコーディオンではない）
   で表示します。
   ========================================================================== */
/* --------------------------------------------------------------------------
   2026-08 デザイン刷新：カードをやめて罫線区切りの読み物へ

   旧：白カード＋影＋丸バッジのQ/Aマークが6枚。1問ごとに箱で区切られ、
       長い回答が読みにくく、トップのFAQ（左見出し＋右罫線リスト）とも
       別の言語になっていました。
   新：箱と影を外し、細い罫線で区切るインタビュー記事の形。
       Q/Aは丸バッジをやめて、欧文の頭文字を色分けで置きます。

   旧指定は上書きせず、この位置ごと差し替えています（落とし穴6-4）。
   -------------------------------------------------------------------------- */
.trainee-gv-qa {
  background: var(--trainee-white);
  padding: 48px 24px 96px;
}
.trainee-gv-qa__inner {
  max-width: 760px;
  margin: 0 auto;
}
.trainee-gv-qa__item {
  box-sizing: border-box;
  padding: 36px 0;
  border-bottom: 1px solid var(--trainee-border-soft);
  /* 旧デザインの箱の名残を確実に消します */
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: none;
}
.trainee-gv-qa__item:first-child {
  padding-top: 0;
}
.trainee-gv-qa__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.trainee-gv-qa__question {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px !important;
  padding: 0;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: var(--trainee-green-dark);
}
/* 丸バッジをやめ、欧文の頭文字だけに。
   幅を固定して、質問と回答の1文字目が縦に揃うようにしています。 */
.trainee-gv-qa__question-mark,
.trainee-gv-qa__answer-mark {
  flex: 0 0 auto;
  display: inline-block;
  width: 18px;
  height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--trainee-font-en);
  font-weight: 400;
  font-size: 16px;
  line-height: inherit;
  letter-spacing: 0.04em;
}
.trainee-gv-qa__question-mark {
  color: var(--trainee-green-soft);
}
.trainee-gv-qa__answer-mark {
  color: var(--trainee-accent-warm);
  /* 回答は本文の行送りが広いので、1行目の位置を合わせます */
  line-height: 1.95;
}
.trainee-gv-qa__answer {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  margin: 0;
  border-top: none;
}
.trainee-gv-qa__answer-text {
  flex: 1 1 auto;
  min-width: 0;
}
.trainee-gv-qa__answer-text p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--trainee-text-sub);
  margin: 0 0 14px;
}
.trainee-gv-qa__answer-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 781px) {
  .trainee-gv-qa {
    padding: 32px 20px 64px;
  }
  .trainee-gv-qa__item {
    padding: 28px 0;
  }
  .trainee-gv-qa__question {
    gap: 10px;
    font-size: 16px;
    margin-bottom: 14px !important;
  }
  .trainee-gv-qa__question-mark,
  .trainee-gv-qa__answer-mark {
    width: 15px;
    font-size: 14px;
  }
  .trainee-gv-qa__answer {
    gap: 10px;
  }
  .trainee-gv-qa__answer-text p {
    font-size: 14px;
  }
}

/* ==========================================================================
   プライバシーポリシーページ
   ========================================================================== */

.trainee-privacy__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  color: var(--trainee-text-dark);
  font-size: 15px;
  line-height: 1.9;
}
.trainee-privacy__intro {
  margin-bottom: 40px;
}
.trainee-privacy__heading {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--trainee-green-dark);
  margin: 40px 0 12px;
  padding: 0 0 8px;
  border-top: none;
  border-bottom: 2px solid var(--trainee-green-light);
}
.trainee-privacy__inner p {
  margin: 0 0 16px;
}
.trainee-privacy__inner ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.trainee-privacy__inner ul li {
  margin-bottom: 6px;
}
.trainee-privacy__inner a {
  color: var(--trainee-green-dark);
  text-decoration: underline;
}
.trainee-privacy__inner a:hover {
  color: var(--trainee-green-darker);
}
.trainee-privacy__contact {
  background: var(--trainee-green-light);
  padding: 20px 24px;
  border-radius: 8px;
  line-height: 1.8;
}
.trainee-privacy__date {
  margin-top: 40px;
  text-align: right;
  font-size: 14px;
  color: var(--trainee-text-sub);
}

@media (max-width: 599px) {
  .trainee-privacy__inner {
    padding: 32px 16px 48px;
    font-size: 14px;
  }
  .trainee-privacy__heading {
    font-size: 18px;
    margin: 32px 0 10px;
  }
}

/* ============================================================================
   お問い合わせページ
   ============================================================================ */

/* ---- フォームコンテナ ---- */
.trainee-contact-form {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 40px;
}

/* ---- ラベル ---- */
.trainee-contact-form label,
.trainee-contact-form .trainee-form-label {
  display: block;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-text-dark);
  margin: 28px 0 6px;
}
.trainee-contact-form .trainee-form-sublabel {
  display: block;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--trainee-text-sub);
  margin: 20px 0 6px;
}
.trainee-required {
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
  margin-left: 4px;
}

/* ---- テキスト入力 ---- */
.trainee-contact-form .wpcf7-form-control:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(.wpcf7-acceptance) {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--trainee-border);
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
  transition: border-color 0.2s;
}
.trainee-contact-form .wpcf7-form-control:focus:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
  border-color: var(--trainee-green-dark);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,122,74,0.12);
}

/* ---- ラジオボタン ---- */
.trainee-contact-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
}
.trainee-contact-form .wpcf7-list-item {
  margin: 0;
}
.trainee-contact-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  cursor: pointer;
  padding: 6px 12px;
  border: 1.5px solid var(--trainee-border);
  border-radius: 6px;
  transition: all 0.15s;
  background: #fff;
}
.trainee-contact-form .wpcf7-list-item label:hover {
  border-color: var(--trainee-green-dark);
  background: var(--trainee-green-light);
}
.trainee-contact-form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
  /* parent label gets colored via JS or :has */
}
.trainee-contact-form .wpcf7-list-item:has(input:checked) label,
.trainee-contact-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--trainee-green-dark);
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
  font-weight: 600;
}

/* ---- テキストエリア ---- */
.trainee-contact-form textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

/* ---- 承諾チェックボックス ---- */
/* 2026-08-21 追加：中央寄せ
   このチェックは横幅が中身ぶんしかない小さな箱で、これまで左端に
   置いていました。下に続く Turnstile と「入力内容を確認する」ボタンが
   どちらも中央なので、ここだけ左にあると列が折れて見えます。

   箱そのものは inline（中身ぶんの幅）なので、幅を指定して中央に
   寄せるのではなく、箱を包んでいる段落の文字揃えを中央にして
   位置を決めています。段落は Contact Form 7 が自動で作るもので
   クラスが付いていないため、:has() で「承諾チェックを含む段落」を
   名指ししています。 */
.trainee-contact-form .wpcf7-form p:has(.wpcf7-acceptance) {
  text-align: center;
}
.trainee-contact-form .wpcf7-acceptance {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--trainee-green-light);
  border-radius: 8px;
  /* 箱の中の文字は左揃えに戻します（上の中央寄せが effect するため） */
  text-align: left;
}
.trainee-contact-form .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
}
.trainee-contact-form .wpcf7-acceptance a {
  color: var(--trainee-green-dark);
  text-decoration: underline;
}

/* ---- 条件分岐グループ ---- */
.trainee-contact-form [data-class="wpcf7cf_group"] {
  margin: 12px 0 0;
  padding: 16px 20px;
  background: #f9f9f6;
  border-left: 3px solid var(--trainee-green-dark);
  border-radius: 0 8px 8px 0;
}

/* ---- 確認ボタン ---- */
.trainee-contact__confirm-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 36px auto 0;
  padding: 16px 24px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  background: var(--trainee-green-dark);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  transition: background 0.2s;
}
.trainee-contact__confirm-btn:hover {
  background: var(--trainee-green-darker);
}

/* ---- Turnstile（迷惑メール対策）のウィジェット ----
   2026-08-21 追加。
   JavaScript で「入力内容を確認する」ボタンの直前に移してあります。
   ここでは位置とまわりの余白だけ整えます。
   枠の見た目そのものは Cloudflare 側が描くので、こちらでは変えられません。 */
.trainee-contact-form .wpcf7-turnstile {
  display: flex;
  /* 2026-08-21：中央寄せに戻しました。
     すぐ下の「入力内容を確認する」ボタンが中央にあるので、
     そちらと軸をそろえたほうが収まりが良いという判断です。 */
  justify-content: center;
  /* 上の「プライバシーポリシーに同意する」との間隔を広めに取ります。
     別の役割のものが続くので、近すぎると1つの塊に見えてしまいます。 */
  margin: 44px 0 0;
}

/* ---- CF7 送信ボタン（非表示、JS経由で使用） ---- */
.trainee-contact-form .wpcf7-submit {
  /* JS で display:none にするが、念のため */
}

/* ---- CF7 バリデーションエラー ---- */
.trainee-contact-form .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 13px;
  margin-top: 4px;
}
.trainee-contact-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

/* ============================================================================
   確認画面（JS生成）
   ============================================================================ */
.trainee-contact-confirm__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 40px;
}
.trainee-contact-confirm__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--trainee-green-dark);
  text-align: center;
  margin: 0 0 8px;
  border: none;
  padding: 0;
}
.trainee-contact-confirm__note {
  text-align: center;
  font-size: 14px;
  color: var(--trainee-text-sub);
  margin: 0 0 28px;
}
.trainee-contact-confirm__list {
  margin: 0;
  padding: 0;
}
.trainee-contact-confirm__list dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--trainee-green-dark);
  margin: 20px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--trainee-border);
}
.trainee-contact-confirm__list dt:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.trainee-contact-confirm__list dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--trainee-text-dark);
}
.trainee-contact-confirm__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.trainee-contact-confirm__back {
  padding: 14px 28px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--trainee-green-dark);
  background: #fff;
  border: 2px solid var(--trainee-green-dark);
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.2s;
}
.trainee-contact-confirm__back:hover {
  background: var(--trainee-green-light);
}
.trainee-contact-confirm__send {
  padding: 14px 36px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
  border-radius: 60px;
  cursor: pointer;
  transition: background 0.2s;
}
.trainee-contact-confirm__send:hover {
  background: var(--trainee-green-darker);
}

/* ============================================================================
   電話セクション（フォーム下部）
   ============================================================================ */
.trainee-contact-phone {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.trainee-contact-phone__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 36px 0;
}
.trainee-contact-phone__divider > span:first-child,
.trainee-contact-phone__divider > span:last-child {
  flex: 1;
  height: 1px;
  background: var(--trainee-border);
}
.trainee-contact-phone__divider-text {
  font-size: 14px;
  color: var(--trainee-text-light);
  white-space: nowrap;
}
.trainee-contact-phone__box {
  text-align: center;
  padding: 28px 20px;
  background: var(--trainee-cream);
  border-radius: 12px;
}
.trainee-contact-phone__label {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-text-dark);
  margin: 0 0 12px;
}
.trainee-contact-phone__number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-contact-phone__hours {
  font-size: 13px;
  color: var(--trainee-text-sub);
  margin: 8px 0 0;
}

/* ============================================================================
   LINEセクション（電話セクションの下）
   ============================================================================ */
.trainee-contact-line {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.trainee-contact-line__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 36px;
}
.trainee-contact-line__divider > span:first-child,
.trainee-contact-line__divider > span:last-child {
  flex: 1;
  height: 1px;
  background: var(--trainee-border);
}
.trainee-contact-line__divider-text {
  font-size: 14px;
  color: var(--trainee-text-light);
  white-space: nowrap;
}
.trainee-contact-line__box {
  text-align: center;
  padding: 32px 20px;
  background: var(--trainee-cream);
  border-radius: 12px;
}
.trainee-contact-line__icon {
  margin: 0 0 12px;
}
.trainee-contact-line__label {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-text-dark);
  margin: 0 0 20px;
}
.trainee-contact-line__qr {
  margin: 0 0 16px;
}
.trainee-contact-line__qr img {
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  max-width: 180px;
  height: auto;
}
.trainee-contact-line__desc {
  font-size: 13px;
  color: var(--trainee-text-sub);
  line-height: 1.8;
  margin: 0;
}

/* ============================================================================
   送信完了ページ
   ============================================================================ */
.trainee-contact-complete {
  /* 2026-08-21 変更：上の余白を「ヘッダーの高さ＋α」にしました。
     もともと、このページには Lightning標準の青いタイトル帯（高さ128px）が
     出ていて、それが場所取りの役目を兼ねていました。
     その帯を消したところ、中身が固定ヘッダーの下に潜り込んだためです。
     数値を直接書かず --trainee-header-h を使っているので、
     ヘッダーの高さを変えたときは自動で追従します。 */
  padding: calc(var(--trainee-header-h) + 20px) 24px 80px;
}
.trainee-contact-complete__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.trainee-contact-complete__icon {
  margin: 0 0 20px;
}
.trainee-contact-complete__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--trainee-green-dark);
  margin: 0 0 20px;
  border: none;
  padding: 0;
}
.trainee-contact-complete__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-dark);
  margin: 0 0 16px;
}
.trainee-contact-complete__note {
  font-size: 13px;
  color: var(--trainee-text-light);
  line-height: 1.8;
  margin: 0 0 32px;
}
.trainee-contact-complete__note a {
  color: var(--trainee-green-dark);
}
.trainee-contact-complete__back-link {
  display: inline-block;
  padding: 14px 36px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
  border-radius: 60px;
  text-decoration: none;
  transition: all 0.2s;
}
.trainee-contact-complete__back-link:hover {
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
}

/* ---- Lightning h2 上書き（お問い合わせ関連） ---- */
.trainee-contact-confirm__title,
.trainee-contact-complete__title {
  border-top: none;
  border-bottom: none;
}

/* ============================================================================
   レスポンシブ（お問い合わせ）
   ============================================================================ */
@media (max-width: 599px) {
  .trainee-contact-form {
    padding: 32px 16px 32px;
  }
  .trainee-contact-confirm__inner {
    padding: 32px 16px 32px;
  }
  .trainee-contact-confirm__buttons {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .trainee-contact-confirm__back,
  .trainee-contact-confirm__send {
    width: 100%;
    text-align: center;
  }
  .trainee-contact-phone {
    padding: 0 16px 48px;
  }
  .trainee-contact-phone__number {
    font-size: 24px;
  }
  .trainee-contact-line {
    padding: 0 16px 48px;
  }
  .trainee-contact-line__qr img {
    max-width: 160px;
  }
  .trainee-contact-complete {
    /* スマホでも同じ考え方（--trainee-header-h はスマホでは68px） */
    padding: calc(var(--trainee-header-h) + 16px) 16px 56px;
  }
  .trainee-contact-complete__title {
    font-size: 20px;
  }
}


/* ============================================================
   Blog Archive & Single Post
   ============================================================ */

/* SP-only utility */
.trainee-sp-only { display: none; }

/* --- Layout: 1 column (hide sidebar) --- */
body.blog .main-section--col--two,
body.single-post .main-section--col--two {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
body.blog .sub-section--col--two,
body.single-post .sub-section--col--two {
  display: none;
}

/* --- Archive: 3-column card grid --- */
body.blog .vk_posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 0 64px;
}

/* Override VK default media (horizontal) → vertical card */
body.blog .vk_post.media {
  display: flex;
  flex-direction: column;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Thumbnail */
body.blog .vk_post_imgOuter.media-img {
  width: 100%;
  margin: 0 0 12px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
}
body.blog .vk_post_imgOuter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.blog .vk_post_imgOuter .card-img-overlay {
  display: none;
}
/* VK「NO IMAGE」プレースホルダーをTRAINEEロゴに置換（CSS背景方式）
   --------------------------------------------------------------------------
   【2026-08-20 修正】この指定が、アイキャッチのある記事にも当たっていました。

   Lightningは、記事一覧のサムネイルを <img> ではなく「枠のbackground-image」
   として出しています（<img> は left:-9999px で画面の外に置かれています）。
   ここで background の一括指定を書いていたため、写真そのものは
   Lightningのインライン指定で出るものの、大きさだけがこちらの 50% に
   上書きされ、白い箱の真ん中に小さく写真が浮く状態になっていました。

   これまで気づかなかったのは、記事がサンプルの1件（アイキャッチなし）
   しかなく、プレースホルダーの見た目しか確認できていなかったためです。

   直し方：アイキャッチの有無で指定を分けます。
   Lightningはサムネイルがあるときだけ、枠にインラインで background-image を
   書き込みます。その有無を [style*="background-image"] で見分けています。 */

/* アイキャッチなし：TRAINEEのロゴを中央に小さく置く */
body.blog .vk_post_imgOuter.media-img:not([style*="background-image"]) {
  background: #fff url("assets/img/logo/trainee_logo.svg") center / 50% no-repeat;
}

/* アイキャッチあり：写真を枠いっぱいに広げる（はみ出た分は切り取り） */
body.blog .vk_post_imgOuter.media-img[style*="background-image"] {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* VK のインライン NO IMAGE SVG を隠す（サムネなし時に表示される） */
body.blog .vk_post_imgOuter svg {
  display: none;
}
/* card-img-overlay 内の「未分類」などのラベルも不要 */
body.blog .vk_post_imgOuter .card-img-overlay * {
  display: none;
}

/* Card body — flex column so date can be reordered before title */
body.blog .vk_post_body.media-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

/* Date wrapper — show before title (production site order) */
body.blog .vk_post_dates {
  order: -1;
}
body.blog .vk_post_date {
  color: var(--trainee-green-dark);
  font-size: 13px;
  margin: 0 0 6px;
  font-weight: 500;
}
/* （2026-08-20）ここにあった「公開日を隠して更新日を出す」指定は
   削除しました。クラス名が合っておらず元から効いていなかったうえ、
   日付は公開日を出す方針に変えたためです。 */
/* Hide calendar icon */
body.blog .vk_post_date .fa,
body.blog .vk_post_date .fas,
body.blog .vk_post_date [class*="fa-"] {
  display: none;
}

/* Title */
body.blog .vk_post_title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  margin: 0;
}
body.blog .vk_post_title a {
  color: inherit;
  text-decoration: none;
}
body.blog .vk_post_title a:hover {
  opacity: 0.7;
}
/* 【2026-08-20】タイトルの下線を消しました。
   Lightningがタイトルに下罫線を引いているのですが、線の長さが
   タイトルの折り返し位置で決まるため、カードごとに幅が変わって
   バラバラに見えていました。日付の色と余白で区切りは足りています。 */
body.blog .vk_post_title.media-title {
  border-bottom: none;
  padding-bottom: 0;
}

/* Hide excerpt / read-more / category badge */
body.blog .vk_post_excerpt,
body.blog .vk_post .btn,
body.blog .vk_post_btn,
body.blog .vk_post .vk_post_btn {
  display: none;
}


/* --- Single post --- */
body.single-post .site-body-container {
  max-width: 800px;
}

/* Date (keep only updated date) */
body.single-post .entry-meta {
  text-align: left;
  margin: 0 0 12px;
  color: var(--trainee-green-dark);
  font-size: 14px;
  font-weight: 500;
}
body.single-post .entry-meta-item-date,
body.single-post .entry-meta-item-author {
  display: none;
}
/* Hide calendar icon in date */
body.single-post .entry-meta .fa,
body.single-post .entry-meta .fas,
body.single-post .entry-meta [class*="fa-"] {
  display: none;
}

/* Hide category / tag footer */
body.single-post .entry-footer {
  display: none;
}

/* Hide comments section */
body.single-post .comments-area {
  display: none;
}

/* Title */
body.single-post .entry-title {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  padding-bottom: 16px;
  border-bottom: 3px dotted var(--trainee-green-dark);
  margin: 0 0 32px;
}

/* Content */
body.single-post .entry-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-dark);
}


/* --- "ブログ一覧へ" link --- */
.trainee-blog-back {
  text-align: center;
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--trainee-border);
}
.trainee-blog-back__link {
  display: inline-block;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--trainee-green-dark);
  text-decoration: none;
  padding: 12px 32px;
  border: 2px solid var(--trainee-green-dark);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.trainee-blog-back__link:hover {
  background: var(--trainee-green-dark);
  color: #fff;
}


/* --- サムネイルフォールバック（TRAINEEロゴ） --- */
.trainee-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
}
.trainee-thumb-fallback .trainee-thumb-img {
  width: 60%;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* --- Blog関連記事「ほかの記事をみる」セクション --- */
.trainee-blog-related {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--trainee-cream);
  padding: 64px 24px;
  margin-top: 48px;
}
.trainee-blog-related__inner {
  max-width: 960px;
  margin: 0 auto;
}
.trainee-blog-related__heading {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--trainee-green-dark);
  text-align: center;
  margin: 0 0 36px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* Lightning親テーマのh2装飾を打ち消し */
.trainee-blog-related__heading::before,
.trainee-blog-related__heading::after {
  display: none !important;
}
.trainee-blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trainee-blog-related__card {
  display: flex;
  flex-direction: column;
  background: var(--trainee-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trainee-blog-related__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.trainee-blog-related__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--trainee-gray-bg);
}
.trainee-blog-related__thumb img,
.trainee-blog-related__thumb picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trainee-blog-related__thumb .trainee-thumb-fallback {
  aspect-ratio: 16 / 9;
}
.trainee-blog-related__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.trainee-blog-related__title {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  margin: 0 0 10px;
  /* 高さ揃え：2行分確保 */
  min-height: calc(15px * 1.6 * 2);
}
.trainee-blog-related__date {
  font-size: 12px;
  color: var(--trainee-text-light);
  margin: auto 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trainee-blog-related__date::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trainee-blog-related__more {
  text-align: center;
  margin: 36px 0 0;
}
.trainee-blog-related__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  padding: 12px 32px;
  border: 2px solid var(--trainee-green-dark);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.trainee-blog-related__more-link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
}

/* --- Blog CTA section ---
   2026-08-19：このブロック（.trainee-blog-cta*／約70行）は削除しました。
   ブログのCTAは以前に共通CTA（.trainee-sec8-cta）へ統一済みで、
   .trainee-blog-cta というクラスはどこからも出力されていません。
   残しておくと「ブログのCTAはこっちで直すのかな」と誤解のもとになり、
   旧フッターCSSの消し忘れと同じ事故につながるため外しました。
   全幅にする指定は、ファイル後半の「1-b. ブログのCTAだけ全幅にならない」に
   まとめてあります。
   --- */

/* --- Blog responsive --- */
@media (max-width: 991px) {
  body.blog .vk_posts {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
  .trainee-blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 599px) {
  .trainee-sp-only { display: inline; }

  body.blog .vk_posts {
    grid-template-columns: 1fr;
    gap: 24px 0;
    padding: 32px 0 48px;
  }
  body.single-post .entry-title {
    font-size: 20px;
  }

  .trainee-blog-related {
    padding: 48px 16px;
    margin-top: 32px;
  }
  .trainee-blog-related__heading {
    font-size: 20px;
    margin-bottom: 28px !important;
  }
  .trainee-blog-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trainee-blog-related__card {
    flex-direction: row;
    border-radius: 12px;
  }
  .trainee-blog-related__thumb {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 1 / 1;
  }
  .trainee-blog-related__thumb .trainee-thumb-fallback {
    aspect-ratio: 1 / 1;
  }
  .trainee-blog-related__body {
    padding: 14px 16px;
  }
  .trainee-blog-related__title {
    font-size: 14px;
    min-height: auto;
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   ページE 卒業生の声：個別ページ「ほかの卒業生の声を見る」
   ------------------------------------------------------------------------
   詳細ページの本文末尾（CTAの直前）に表示する関連投稿セクション。
   最大3件のカードを横並びで表示し、各カードは名前・属性タグ・
   ひとことで構成されます。
   ========================================================================== */
.trainee-gv-related {
  background: var(--trainee-cream);
  padding: 72px 24px;
  /* 親コンテナの幅制限を突破して全幅にする */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.trainee-gv-related__inner {
  max-width: 960px;
  margin: 0 auto;
}
.trainee-gv-related__heading {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 36px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* Lightning親テーマのh2装飾（上線・左ボーダー等）を打ち消し */
.trainee-gv-related__heading::before,
.trainee-gv-related__heading::after {
  display: none !important;
}
.trainee-gv-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* --------------------------------------------------------------------------
   2026-08 修正：一覧カードと同じ組み方に統一

   旧：氏名を大きく出し、その下に属性タグ、下に紹介文という構成。
       ところがPHP側が「氏名」としてキャッチコピーを渡していたため、
       氏名の位置に長い一文が入り、属性タグからは氏名が抜けていました。
       あわせて picture 要素に object-fit を当てていましたが、picture は
       置換要素ではないため効かず、アバターが欠けて見える原因でした。
   新：アバター左・テキスト右。属性タグ（氏名を含む）→キャッチコピー→
       紹介文→続きを読む、の順。一覧ページのカードと同じ並びです。
   -------------------------------------------------------------------------- */
.trainee-gv-related__card {
  /* 3カラムで1枚あたりが狭いので、1行目だけアバターと属性タグを横に置き、
     キャッチコピー以降はカード幅いっぱいを使います。
     3行目（紹介文）を 1fr にして、余った高さをそこに集めることで
     「続きを読む」がカード下端に揃います。 */
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "ava  tags"
    "head head"
    "txt  txt"
    "more more";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  box-sizing: border-box;
  background: var(--trainee-white);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trainee-gv-related__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.trainee-gv-related__avatar {
  grid-area: ava;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(37, 122, 74, 0.12);
}
/* picture ではなく img に当てます。picture は置換要素ではないので
   object-fit が効かず、以前はここでアバターが崩れていました。
   img 側には共通クラス .trainee-gv-avatar-img も付いています。 */
.trainee-gv-related__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trainee-gv-related__card .trainee-gv-tags {
  grid-area: tags;
  align-self: center;
  font-size: 12px;
  margin: 0;
  line-height: 1.6;
}
/* 中身はキャッチコピーです（氏名は上の属性タグに含まれます） */
.trainee-gv-related__headline {
  grid-area: head;
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.65;
  color: var(--trainee-text-dark);
  margin: 16px 0 10px;
  transition: color 0.2s ease;
}
.trainee-gv-related__headline::before {
  content: "「";
}
.trainee-gv-related__headline::after {
  content: "」";
}
.trainee-gv-related__card:hover .trainee-gv-related__headline,
.trainee-gv-related__card:focus-visible .trainee-gv-related__headline {
  color: var(--trainee-green-dark);
}
.trainee-gv-related__excerpt {
  grid-area: txt;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--trainee-text-sub);
  margin: 0 0 14px;
}
.trainee-gv-related__readmore {
  grid-area: more;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  align-self: end;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--trainee-green-dark);
}
.trainee-gv-related__more {
  text-align: center;
  margin: 36px 0 0;
}
.trainee-gv-related__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--trainee-green-dark);
  text-decoration: none;
  padding: 12px 32px;
  border: 2px solid var(--trainee-green-dark);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.trainee-gv-related__more-link:hover {
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
}

@media (max-width: 781px) {
  .trainee-gv-related {
    padding: 48px 20px;
  }
  .trainee-gv-related__heading {
    font-size: 20px;
    margin-bottom: 28px !important;
  }
  .trainee-gv-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trainee-gv-related__card {
    padding: 24px 20px;
  }
}


/* ==========================================================================
   FOOTER：Lightning標準フッターの非表示
   --------------------------------------------------------------------------
   2026-08 の掃除で、旧フッターのCSS（約150行）は削除しました。
   独自フッターのスタイルは、ファイル末尾の「フッター（確定版）」に
   まとまっています。
   ここに残しているのは、親テーマのフッターを消す指定だけです。
   ========================================================================== */

footer.site-footer { display: none !important; }

/* ==========================================================================
   Phase 3-A：トップページ 見出し・背景色・余白の統一（2026-08 抜本改修）
   --------------------------------------------------------------------------
   ここから下は、上に書かれている各セクションの指定を「後から上書き」する
   ブロックです。セクションごとのCSSを直接書き換えず、まとめて上書きする
   形にしているのは、元の指定をそのまま残して切り戻せるようにするためです。

   内容：
     1. セクション見出しに英語サブタイトルを追加（HTMLの変更は不要）
     2. キーワードのドット下線を廃止（色替えのみ残す）
     3. 見出し下の余白を統一
     4. 背景色を「白 → ペールグリーン」の交互パターンに統一
     5. セクション上下の余白を変数に統一
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. セクション見出しの英語サブタイトル
   --------------------------------------------------------------------------
   CSSの content で見出しの上に差し込んでいるため、HTMLの変更は不要です。
   content の後ろの「 / "" 」は代替テキストの指定で、空にしておくと
   スクリーンリーダーには読み上げられません（装飾として扱われます）。
   文言を変えたい場合は、下の一覧の文字列を書き換えてください。
   -------------------------------------------------------------------------- */

.trainee-sec2-about__title::before,
.trainee-sec3-concerns__title::before,
.trainee-sec4-features__title::before,
.trainee-sec5-results__title::before,
.trainee-sec55-interviews__title::before,
.trainee-sec6-flow__title::before,
.trainee-sec7-faq__title::before,
.trainee-sec85-news__title::before,
.trainee-sec95-partners__title::before {
  display: block;
  font-family: var(--trainee-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--trainee-accent-warm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.trainee-sec2-about__title::before      { content: "About Service" / ""; }
.trainee-sec3-concerns__title::before   { content: "Your Concerns" / ""; }
.trainee-sec4-features__title::before   { content: "Our Features" / ""; }
.trainee-sec5-results__title::before    { content: "Results" / ""; }
.trainee-sec55-interviews__title::before{ content: "Voices" / ""; }
.trainee-sec6-flow__title::before       { content: "Flow" / ""; }
.trainee-sec7-faq__title::before        { content: "FAQ" / ""; }
.trainee-sec85-news__title::before      { content: "News" / ""; }
.trainee-sec95-partners__title::before  { content: "For Partners" / ""; }

/* 関係機関向けは高さの低い帯なので、サブタイトルも一段小さく */
.trainee-sec95-partners__title::before {
  font-size: 12px;
  margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   2. キーワードのドット下線を廃止
   --------------------------------------------------------------------------
   英語サブタイトルが入ったことで装飾が二重になるため、下線は外します。
   緑の色替えは残すので、キーワードの強調自体は効いたままです。
   -------------------------------------------------------------------------- */

.trainee-sec2-about__title-accent,
.trainee-sec3-concerns__title-accent,
.trainee-sec4-features__title-accent,
.trainee-sec5-results__title-accent,
.trainee-sec55-interviews__title-accent,
.trainee-sec6-flow__title-accent,
.trainee-sec7-faq__title-accent {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}


/* --------------------------------------------------------------------------
   3. 見出し下の余白を統一
   --------------------------------------------------------------------------
   これまで 28px / 40px / 44px / 48px とばらついていたものを、
   デザイントークンの --trainee-heading-mb（PC 56px / タブレット 40px）に
   揃えます。関係機関の帯だけは別扱いです。
   -------------------------------------------------------------------------- */

.trainee-sec2-about__title,
.trainee-sec3-concerns__title,
.trainee-sec4-features__title,
.trainee-sec5-results__title,
.trainee-sec55-interviews__title,
.trainee-sec6-flow__title,
.trainee-sec7-faq__title,
.trainee-sec85-news__title,
.trainee-sec8-cta__title {
  margin: 0 0 var(--trainee-heading-mb) !important;
}


/* --------------------------------------------------------------------------
   4. 背景色を交互パターンに統一
   --------------------------------------------------------------------------
   ヒーロー（クリーム）を起点に、白 → ペールグリーン → 白 … と交互に
   切り替えてリズムを作ります。変更が必要だったのは実績セクションだけです。
   -------------------------------------------------------------------------- */

.trainee-sec5-results {
  background: var(--trainee-green-light);
}
/* 背景がペールグリーンになったため、ドーナツグラフの土台（通勤就労側）を
   白に変えてコントラストを確保します */
.trainee-sec5-results__donut-track {
  stroke: var(--trainee-white);
}


/* --------------------------------------------------------------------------
   5. セクション上下の余白を統一
   --------------------------------------------------------------------------
   他のセクションはPhase 1で変数化済みです。ここでは取りこぼしていた
   2つを揃えます。
   -------------------------------------------------------------------------- */

.trainee-sec2-about {
  padding: var(--trainee-sec-pt) 24px var(--trainee-sec-pb);
}
/* 関係機関向けはフッター手前の控えめな案内バーなので、
   通常セクションの半分程度に抑えます */
.trainee-sec95-partners {
  padding: 72px 24px;
}

@media (max-width: 781px) {
  .trainee-sec2-about {
    padding: var(--trainee-sec-pt-sp) 20px var(--trainee-sec-pb-sp);
  }
  .trainee-sec95-partners {
    padding: 48px 20px;
  }
  /* スマホでは英語サブタイトルも一段小さく */
  .trainee-sec2-about__title::before,
  .trainee-sec3-concerns__title::before,
  .trainee-sec4-features__title::before,
  .trainee-sec5-results__title::before,
  .trainee-sec55-interviews__title::before,
  .trainee-sec6-flow__title::before,
  .trainee-sec7-faq__title::before,
  .trainee-sec85-news__title::before {
    font-size: 12px;
    margin-bottom: 10px;
  }
}


/* --------------------------------------------------------------------------
   6. 基調を「白」から「クリーム」へ
   --------------------------------------------------------------------------
   設計書のパレットでは クリーム #faf8f5 が「メイン背景」、白は
   「カード背景」と定義されています。実装では逆になっていて、
   白いカードが白い背景に埋もれていたため、本来の定義に戻します。

   これで全体の並びは
     ヒーロー(クリーム) → とは(白) → お悩み(緑) → 特徴(クリーム)
     → 実績(緑) → 卒業生(クリーム) → 流れ(緑) → FAQ(クリーム)
     → CTA(深緑) → お知らせ(白) → 関係機関(クリーム)
   となり、同じ色が隣り合わないリズムになります。
   -------------------------------------------------------------------------- */

.trainee-sec4-features,
.trainee-sec55-interviews,
.trainee-sec7-faq {
  background: var(--trainee-cream);
}

/* クリームの上に置くカードは、白＋うっすら影で浮かせます */
.trainee-sec55-interviews__card,
.trainee-sec7-faq__item {
  background: var(--trainee-white);
  border-color: var(--trainee-border-soft);
  box-shadow: var(--trainee-shadow);
}

/* ===================== Phase 3-A ここまで ===================== */

/* ==========================================================================
   Phase 3-B：トップページ 構造の緩急づけ（2026-08 抜本改修）
   --------------------------------------------------------------------------
   3-Aで色と余白は揃いましたが、全セクションが「中央揃えの見出し＋中央揃えの
   コンテンツ」という同じ構造で並んでいるため、通して見ると単調に感じます。
   参考サイト（グリーンコープ）が飽きさせないのは色数ではなく、セクションごとに
   構造が違うためです。ここでは3つのセクションの組み方を変えて緩急をつけます。

     1. お悩み   → 左にカード／右にイラストの左右非対称に
     2. 3つの特徴 → 番号を主役にして、カードを大きく
     3. 実績     → ドーナツと数字の2カラムに。数字を大きく
     4. FAQ      → 開閉アイコンに丸い下地を追加
     5. 「〜とは」→ 高さを抑えて、読み物として軽く通過させる
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. お悩みセクション：左右非対称レイアウト
   --------------------------------------------------------------------------
   HTMLは「見出し → イラスト → カード4枚 → 締めの一文」の順のままで、
   CSSのグリッド指定だけで配置を組み替えています。
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
  .trainee-sec3-concerns__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-areas:
      "title   illust"
      "cards   illust"
      "closing closing";
    align-items: start;
    column-gap: 56px;
    max-width: 1100px;
    text-align: left;
  }
  .trainee-sec3-concerns__title {
    grid-area: title;
    text-align: left;
    margin: 0 0 32px !important;
  }
  .trainee-sec3-concerns__illustration {
    grid-area: illust;
    align-self: center;
    margin: 0;
    max-width: none;
  }
  .trainee-sec3-concerns__grid {
    grid-area: cards;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .trainee-sec3-concerns__closing {
    grid-area: closing;
    text-align: center;
    margin: 64px 0 0;
  }
}

/* カードは「悩みの一覧」として読ませたいので、
   中央揃えの箱から、左揃えのリスト状の見た目に変えます */
.trainee-sec3-concerns__card {
  text-align: left;
  padding: 20px 26px;
}
.trainee-sec3-concerns__worry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16.5px;
  line-height: 1.7;
}
.trainee-sec3-concerns__worry::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trainee-green-soft);
  margin: 0 12px 0 0;
  flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   2. 3つの特徴：番号を主役に
   --------------------------------------------------------------------------
   これまで番号はイラストの上に小さく乗っているだけで、ほとんど見えて
   いませんでした。カードの角から少しはみ出す白い丸バッジにして、
   「01 / 02 / 03」を構造として読めるようにします。
   -------------------------------------------------------------------------- */

.trainee-sec4-features__grid {
  gap: 40px;
}
/* バッジをはみ出させるため、カード側の切り抜きを解除して
   代わりに画像側で角を丸めます */
.trainee-sec4-features__card {
  overflow: visible;
  transition: transform var(--trainee-ease), box-shadow var(--trainee-ease);
}
.trainee-sec4-features__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--trainee-shadow-hover);
}
.trainee-sec4-features__card-image {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.trainee-sec4-features__card-number {
  top: -16px;
  left: -16px;
  width: 58px;
  height: 58px;
  background: var(--trainee-white);
  color: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-soft);
  font-family: var(--trainee-font-en);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(37, 122, 74, 0.16);
  z-index: 2;
}
.trainee-sec4-features__card-body {
  padding: 32px 28px 36px;
}
.trainee-sec4-features__card-title {
  font-size: 21px !important;
}


/* --------------------------------------------------------------------------
   3. 実績：ドーナツと数字の2カラム
   --------------------------------------------------------------------------
   中央に固まっていた構成を左右に分け、数字を大きくして主役にします。
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
  .trainee-sec5-results__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
    text-align: left;
  }
  .trainee-sec5-results__chart-wrap {
    justify-self: end;
    width: 100%;
    max-width: 320px;
  }
}

.trainee-sec5-results__donut-number {
  font-size: 60px;
}
.trainee-sec5-results__legend-item {
  font-size: 17px;
  margin: 0 0 18px;
}
/* 「10名」「7名」の数字を大きく */
.trainee-sec5-results__legend-item strong {
  font-family: var(--trainee-font-heading);
  font-size: 26px;
  font-weight: 900;
  color: var(--trainee-green-dark);
  line-height: 1;
  margin: 0 2px;
}
.trainee-sec5-results__legend-total {
  margin: 28px 0 4px;
  font-size: 16px;
}
.trainee-sec5-results__legend-total strong {
  font-family: var(--trainee-font-heading);
  font-size: 20px;
  color: var(--trainee-text-dark);
}


/* --------------------------------------------------------------------------
   4. FAQ：開閉アイコンに丸い下地
   -------------------------------------------------------------------------- */

.trainee-sec7-faq__toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--trainee-green-light);
  transition: background-color var(--trainee-ease);
}
.trainee-sec7-faq__item:hover .trainee-sec7-faq__toggle {
  background: var(--trainee-green-mid);
}


/* --------------------------------------------------------------------------
   5. 「就労移行支援とは」：高さを抑える
   --------------------------------------------------------------------------
   本文3行のセクションが、カードが9枚並ぶセクションと同じ高さを取っていて
   間延びしていました。短いセクションは短く通過させます。
   -------------------------------------------------------------------------- */

.trainee-sec2-about {
  padding: calc(var(--trainee-sec-pt) * 0.68) 24px calc(var(--trainee-sec-pb) * 0.68);
}
@media (max-width: 781px) {
  .trainee-sec2-about {
    padding: calc(var(--trainee-sec-pt-sp) * 0.8) 20px calc(var(--trainee-sec-pb-sp) * 0.8);
  }
}

/* ===================== Phase 3-B ここまで ===================== */

/* ==========================================================================
   Phase 3-B 追補：不具合修正と、揃え方向による緩急づけ
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. 不具合修正
   -------------------------------------------------------------------------- */

/* A-1 番号バッジが切れる
   番号バッジは __card-image の「中」にあるHTML構造でした。
   その __card-image に overflow:hidden をかけていたため、
   はみ出した部分が切り落とされていました。
   切り抜きは画像そのものに移し、コンテナは開放します。 */
.trainee-sec4-features__card-image {
  overflow: visible;
}
.trainee-sec4-features__card-image picture,
.trainee-sec4-features__card-image img {
  display: block;
  border-radius: 20px 20px 0 0;
}

/* A-2 ドーナツの数字がずれる
   グラフの枠に width:100% / max-width:320px を指定したため、
   240px四方だった枠が横長になり、円が楕円に潰れていました。
   正方形を保ったまま、少しだけ大きくします。 */
.trainee-sec5-results__chart-wrap {
  width: 280px;
  height: 280px;
  max-width: none;
}
.trainee-sec5-results__donut-number {
  font-size: 54px;
}
.trainee-sec5-results__donut-unit {
  font-size: 20px;
}

/* A-3 「就職者数17名中」の数字だけ大きくなる
   strong の中に「17名」がまとめて入っているため、
   数字を大きくすると「名」まで一緒に大きくなっていました。
   ここは補足行なので、サイズは本文のまま太字だけにします。 */
.trainee-sec5-results__legend-total strong {
  font-family: inherit;
  font-size: inherit;
  color: var(--trainee-text-dark);
}

/* A-4 お悩みセクションの高さが揃わない
   イラストが左のカード列より低く、右側だけ余白が空いていました。
   カード列の高さまでイラストを引き伸ばして、上下の辻褄を合わせます。 */
@media (min-width: 782px) {
  .trainee-sec3-concerns__illustration {
    align-self: stretch;
    display: flex;
  }
  .trainee-sec3-concerns__illustration picture {
    display: block;
    width: 100%;
  }
  .trainee-sec3-concerns__illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
}


/* --------------------------------------------------------------------------
   B. 揃え方向で緩急をつける
   --------------------------------------------------------------------------
   全セクションが中央揃えだったことが、単調さの最大の原因です。
   「中央 → 左 → 中央 → 左」と交互にすることで、
   スクロールしたときに視線の起点が動き、同じ形の繰り返しに見えなくなります。

     中央揃え … とは / 実績 / 流れ / FAQ / CTA / 関係機関
     左揃え   … お悩み（3-Bで実施済み）/ 3つの特徴 / 卒業生の声 / お知らせ
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {

  /* --- 3つの特徴 --- */
  .trainee-sec4-features__inner {
    text-align: left;
  }
  .trainee-sec4-features__card-body {
    text-align: left;
  }
  .trainee-sec4-features__more-wrap {
    text-align: left !important;
  }

  /* --- 卒業生の声 --- */
  .trainee-sec55-interviews__inner {
    text-align: left;
  }
  .trainee-sec55-interviews__more-wrap {
    text-align: left;
  }

  /* --- お知らせ --- */
  .trainee-sec85-news__inner {
    text-align: left;
  }
  .trainee-sec85-news__more-wrap {
    text-align: left;
  }
}

/* ===================== Phase 3-B 追補 ここまで ===================== */

/* ==========================================================================
   Phase 3-B 追補2：リンクの階層づけと、実績の数字位置
   ========================================================================== */

/* --- ドーナツ中央：数字を下げて「在宅就労」に寄せる --- */
.trainee-sec5-results__donut-number-row {
  margin-top: 10px !important;
}
.trainee-sec5-results__donut-caption {
  margin: 2px 0 0 !important;
}

/* --------------------------------------------------------------------------
   リンクの階層づけ
   --------------------------------------------------------------------------
   これまでページ上のリンクが、CTAも「もっと見る」も全部同じ
   「緑の枠線のピル型ボタン」でした。重要度の差がないため、
   どれも同じ強さで目に入り、それ自体が単調さの一因になっています。

     第1階層（塗りのボタン）… 見学・相談申し込み、関係機関向けページ
     第2階層（テキスト＋矢印）… 各セクションの「もっと見る」系

   第2階層を枠線なしのテキストリンクに落とし、位置も見出しと反対側
   （右下）に移します。見出しが左・リンクが右で対角線ができ、
   セクションに視線の流れが生まれます。
   -------------------------------------------------------------------------- */

.trainee-sec4-features__more-link,
.trainee-sec55-interviews__more-link,
.trainee-sec85-news__more-link,
.trainee-sec7-faq__more-link {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 4px;
  font-size: 15px;
  color: var(--trainee-green-dark);
  border-bottom: 1.5px solid var(--trainee-green-soft);
  transition: color var(--trainee-ease), border-color var(--trainee-ease), gap var(--trainee-ease);
}
.trainee-sec4-features__more-link:hover,
.trainee-sec55-interviews__more-link:hover,
.trainee-sec85-news__more-link:hover,
.trainee-sec7-faq__more-link:hover {
  background: none;
  color: var(--trainee-green-darker);
  border-bottom-color: var(--trainee-green-dark);
  transform: none;
  gap: 12px;
}

/* 左揃えセクションでは、リンクを反対側（右下）に置く */
@media (min-width: 782px) {
  .trainee-sec4-features__more-wrap,
  .trainee-sec55-interviews__more-wrap,
  .trainee-sec85-news__more-wrap,
  .trainee-sec7-faq__more-wrap {
    text-align: right !important;
  }
}

/* ===================== Phase 3-B 追補2 ここまで ===================== */

/* ==========================================================================
   Phase 3-C：セクションの「形」を崩す（2026-08 抜本改修）
   --------------------------------------------------------------------------
   これまで5セクション連続で「角丸の箱が横に並ぶ」形になっていました。
     お悩み4枚／特徴3枚／卒業生3枚／流れ4枚／FAQ3枚
   色や揃えを変えても、形が同じである限り単調さは消えません。
   ここでは3つのセクションを、内容に合った別の形に作り替えます。

     お悩み → 吹き出し（悩みは「声」なので意味的にも正しい）
     流れ   → 縦のタイムライン（順番は縦のほうが伝わる）
     FAQ    → 罫線だけのリスト（箱をやめて軽くする）

   結果として、角丸カードが並ぶのは「3つの特徴」と「卒業生の声」の
   2セクションだけになります。この2つは横並びが正しい内容なので残します。

   HTMLの変更は一切ありません。すべてCSSだけで組み替えています。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. お悩み → 吹き出し
   -------------------------------------------------------------------------- */

.trainee-sec3-concerns__card {
  position: relative;
  /* 左下だけ角を落として、吹き出しらしい非対称のかたちに */
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 4px 14px rgba(58, 50, 38, 0.05);
}

/* 吹き出しの尻尾。イラストの人物（右側）に向けて出します */
@media (min-width: 782px) {
  .trainee-sec3-concerns__card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 16px;
    height: 16px;
    background: var(--trainee-white);
    border-top: 1px solid rgba(37, 122, 74, 0.09);
    border-right: 1px solid rgba(37, 122, 74, 0.09);
    transform: translateY(-50%) rotate(45deg);
  }
  /* 少しずつ横にずらして、整列した箱ではなく
     「次々に上がる声」に見えるようにします */
  .trainee-sec3-concerns__card:nth-child(2) { margin-left: 24px; }
  .trainee-sec3-concerns__card:nth-child(3) { margin-left: 48px; }
  .trainee-sec3-concerns__card:nth-child(4) { margin-left: 24px; }
}


/* --------------------------------------------------------------------------
   2. ご利用までの流れ → 縦のタイムライン
   --------------------------------------------------------------------------
   横4列だと1枚あたりが狭く、説明文が細切れになっていました。
   縦に並べ替えて、左に丸いイラスト、右に文章、間を線で繋ぎます。
   -------------------------------------------------------------------------- */

.trainee-sec6-flow__grid {
  flex-direction: column;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
  gap: 0;
}

/* 矢印は縦の接続線に置き換えるので消します */
.trainee-sec6-flow__arrow {
  display: none;
}

.trainee-sec6-flow__card {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas:
    "img step"
    "img title"
    "img desc";
  column-gap: 32px;
  align-items: start;
  align-content: start;
  /* 箱をやめて、線でつながる1本の流れにします */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 40px;
  text-align: left;
}
.trainee-sec6-flow__card:last-child {
  padding-bottom: 0;
}

/* ステップ同士を繋ぐ縦線（イラストの円の中心を通します） */
.trainee-sec6-flow__card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 112px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--trainee-green-mid);
}

.trainee-sec6-flow__illustration {
  grid-area: img;
  width: 104px;
  height: 104px;
  margin: 0;
  background: var(--trainee-white);
  border: 2px solid var(--trainee-green-mid);
  box-sizing: border-box;
}

/* ステップ番号は差し色のオレンジに。
   緑一色だったページに体温が出ます（設計書の指定どおり） */
.trainee-sec6-flow__step {
  grid-area: step;
  justify-self: start;
  margin: 6px 0 10px;
  background: var(--trainee-accent-warm);
  font-family: var(--trainee-font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 6px 16px;
}

.trainee-sec6-flow__card-title {
  grid-area: title;
  font-size: 21px !important;
  margin: 0 0 10px !important;
}
.trainee-sec6-flow__card-desc {
  grid-area: desc;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 781px) {
  .trainee-sec6-flow__card {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 20px;
    padding-bottom: 32px;
  }
  .trainee-sec6-flow__card:not(:last-child)::before {
    left: 34px;
    top: 76px;
  }
  .trainee-sec6-flow__illustration {
    width: 68px;
    height: 68px;
  }
  .trainee-sec6-flow__card-title { font-size: 18px !important; }
  .trainee-sec6-flow__card-desc  { font-size: 14px; }
}


/* --------------------------------------------------------------------------
   3. よくあるご質問 → 罫線だけのリスト
   --------------------------------------------------------------------------
   影と角丸のカードをやめ、細い罫線で区切るだけの形にします。
   一気に軽くなり、前後のセクションと見た目がはっきり分かれます。
   -------------------------------------------------------------------------- */

.trainee-sec7-faq__inner {
  max-width: 860px;
}
.trainee-sec7-faq__list {
  gap: 0;
  border-top: 1px solid var(--trainee-border);
}
.trainee-sec7-faq__item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--trainee-border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.trainee-sec7-faq__question {
  padding: 26px 4px;
}
.trainee-sec7-faq__answer {
  border-top: none;
  padding: 0 4px 30px;
}

/* 開いているあいだは回答の左に緑の線を引いて、
   「いま開いているのはここ」が分かるようにします（設計書の指定） */
.trainee-sec7-faq__item[open] .trainee-sec7-faq__answer {
  border-left: 3px solid var(--trainee-green-soft);
  padding-left: 20px;
  margin-left: 4px;
}

/* 開閉アイコンの下地は、罫線リストでは主張しすぎるので外します */
.trainee-sec7-faq__toggle {
  background: none;
}
.trainee-sec7-faq__item:hover .trainee-sec7-faq__toggle {
  background: none;
}

/* ===================== Phase 3-C ここまで ===================== */

/* ==========================================================================
   Phase 3-D：残る「箱の並び」を解体する（2026-08 抜本改修）
   --------------------------------------------------------------------------
     0. お悩みの吹き出しの尻尾を外す（CSSで作った三角の安っぽさを消す）
     1. 3つの特徴  → カードの箱を廃止し、巨大な番号を主役に
     2. 卒業生の声 → 1枚を大きく、2枚を小さく積む非対称レイアウト
     3. FAQ        → 左に見出し／右にリストの2カラム
     4. CTA        → ボタンと電話番号を横並びに

   これで「角丸の箱が横一列に並ぶ」セクションはゼロになります。
   HTMLの変更はありません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. 吹き出しの尻尾を外す
   --------------------------------------------------------------------------
   三角の尻尾はCSSで作った感が出やすく、水彩のやわらかい世界観と
   噛み合いませんでした。角の非対称だけで十分に吹き出しに見えます。
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
  .trainee-sec3-concerns__card::after {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   1. 3つの特徴：カードの箱を廃止し、番号を主役に
   --------------------------------------------------------------------------
   淡い緑の箱をやめて、大きな数字・イラスト・見出し・説明文を
   縦に並べるだけの構成にします。箱がなくなることで、
   「角丸カードが横に並ぶ」形がまた1つ減ります。
   -------------------------------------------------------------------------- */

.trainee-sec4-features__card {
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding-top: 8px;
}
.trainee-sec4-features__card:hover {
  transform: none;
  box-shadow: none;
}

/* 番号は丸バッジをやめ、薄い緑の巨大な数字に */
.trainee-sec4-features__card-number {
  position: static;
  display: block;
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--trainee-font-en);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--trainee-green-soft);
  margin: 0 0 12px;
  text-align: left;
}

/* 番号が画像の外に出たので、画像側の角丸は上下とも丸くします */
.trainee-sec4-features__card-image {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 20px;
}
.trainee-sec4-features__card-image picture,
.trainee-sec4-features__card-image img {
  border-radius: 18px;
}

.trainee-sec4-features__card-body {
  padding: 0;
}
.trainee-sec4-features__card-desc {
  font-size: 14.5px;
  line-height: 1.9;
}


/* --------------------------------------------------------------------------
   2. 卒業生の声：非対称レイアウト
   --------------------------------------------------------------------------
   3枚均等の横並びをやめ、1枚目を大きく、2〜3枚目を右に小さく積みます。
   最後に残っていた「横一列」がここで崩れます。
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .trainee-sec55-interviews__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 24px 32px;
  }
  /* 1枚目：左側を2行ぶん使って大きく */
  .trainee-sec55-interviews__card:nth-child(1) {
    grid-row: 1 / span 2;
    padding: 40px 36px;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__avatar {
    width: 120px;
    height: 120px;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__headline {
    font-size: 21px;
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__excerpt {
    font-size: 15px;
  }

  /* 2〜3枚目：右側に小さく。アバターを左に置いた横組みにして
     1枚目との違いをはっきりさせます */
  .trainee-sec55-interviews__card:nth-child(2),
  .trainee-sec55-interviews__card:nth-child(3) {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "ava  meta"
      "ava  head"
      "txt  txt"
      "more more";
    column-gap: 18px;
    align-items: center;
    padding: 26px 28px;
  }
  .trainee-sec55-interviews__card:nth-child(2) .trainee-sec55-interviews__avatar,
  .trainee-sec55-interviews__card:nth-child(3) .trainee-sec55-interviews__avatar {
    grid-area: ava;
    width: 64px;
    height: 64px;
    margin: 0;
    align-self: start;
  }
  .trainee-sec55-interviews__card:nth-child(2) .trainee-sec55-interviews__meta,
  .trainee-sec55-interviews__card:nth-child(3) .trainee-sec55-interviews__meta {
    grid-area: meta;
    text-align: left;
    margin: 0 0 6px;
    align-self: end;
  }
  .trainee-sec55-interviews__card:nth-child(2) .trainee-sec55-interviews__headline,
  .trainee-sec55-interviews__card:nth-child(3) .trainee-sec55-interviews__headline {
    grid-area: head;
    font-size: 15px;
    margin: 0;
    align-self: start;
  }
  .trainee-sec55-interviews__card:nth-child(2) .trainee-sec55-interviews__excerpt,
  .trainee-sec55-interviews__card:nth-child(3) .trainee-sec55-interviews__excerpt {
    grid-area: txt;
    font-size: 13.5px;
    margin: 14px 0 12px;
  }
  .trainee-sec55-interviews__card:nth-child(2) .trainee-sec55-interviews__readmore,
  .trainee-sec55-interviews__card:nth-child(3) .trainee-sec55-interviews__readmore {
    grid-area: more;
    margin-top: 0;
  }
}


/* --------------------------------------------------------------------------
   3. FAQ：左に見出し／右にリストの2カラム
   --------------------------------------------------------------------------
   中央揃えの縦長セクションだったものを横に組み替えます。
   高さが半分近くに縮み、非対称のセクションがもう1つ増えます。
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .trainee-sec7-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 64px;
    max-width: 1040px;
    text-align: left;
  }
  .trainee-sec7-faq__title {
    text-align: left !important;
    margin: 0 !important;
    position: sticky;
    top: 120px;
  }
  .trainee-sec7-faq__list {
    border-top: 1px solid var(--trainee-border);
  }
}


/* --------------------------------------------------------------------------
   4. CTA：ボタンと電話番号を横並びに
   --------------------------------------------------------------------------
   縦に積んでいたため間延びしていました。左にボタン、右に電話番号。
   「または」の区切りは縦線に変えます。
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .trainee-sec8-cta__inner {
    max-width: 980px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "title  title  title"
      "button div    phone";
    justify-content: center;
    align-items: center;
    column-gap: 40px;
  }
  .trainee-sec8-cta__title {
    grid-area: title;
  }
  .trainee-sec8-cta__button-wrap {
    grid-area: button;
    margin: 0;
  }

  /* 「または」の区切りを横線から縦線へ */
  .trainee-sec8-cta__divider {
    grid-area: div;
    flex-direction: column;
    align-self: stretch;
    margin: 0;
    gap: 12px;
  }
  .trainee-sec8-cta__divider span:not(.trainee-sec8-cta__divider-text) {
    flex: 1 1 auto;
    width: 1px;
    height: auto;
    min-height: 24px;
    background: rgba(255, 255, 255, 0.25);
  }

  .trainee-sec8-cta__phone {
    grid-area: phone;
    text-align: left;
  }
}

/* ===================== Phase 3-D ここまで ===================== */

/* ==========================================================================
   Phase 3-D 追補：実機で見つかった調整点
   ========================================================================== */

/* --- 1. 流れの縦線と円の枠が見えない ---
   線に使っていた --trainee-green-mid (#cde8d6) が、
   背景のペールグリーン (#f0f7f1) とほぼ同じ明るさで、
   実機ではほとんど見えていませんでした。一段濃い色に変え、
   点線にして「続いている」感じを出します。 */
.trainee-sec6-flow__card:not(:last-child)::before {
  width: 0;
  background: none;
  border-left: 2px dashed var(--trainee-green-soft);
}
.trainee-sec6-flow__illustration {
  border-color: var(--trainee-green-soft);
}

/* --- 2. FAQの見出しの追従をやめる ---
   セクションの高さが短いため追従の効果がほとんどなく、
   スクロール位置によっては見出しだけが下にずれて見えます。 */
@media (min-width: 900px) {
  .trainee-sec7-faq__title {
    position: static;
  }
}

/* --- 3. 卒業生の声：大きいカードの揃えを統一 ---
   アバターと属性だけが中央揃え、見出し以下が左揃えになっていて
   ちぐはぐでした。小さい2枚と同じく左揃えに統一します。 */
@media (min-width: 900px) {
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__avatar {
    margin: 0 0 18px;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__meta {
    text-align: left;
  }
}

/* ===================== Phase 3-D 追補 ここまで ===================== */

/* ==========================================================================
   Phase 3-E：切り抜きイラストの適用と、特徴イラストの角
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. お悩みのイラストを「枠」から出す
   --------------------------------------------------------------------------
   四角い枠＋角丸＋影に収まっていたため、水彩のイラストなのに
   「写真を貼った」ように見えていました。背景透過の切り抜き版に
   差し替えたので、枠・影・切り抜きをすべて外して、
   人物がそのまま背景の上に座っている状態にします。
   -------------------------------------------------------------------------- */

.trainee-sec3-concerns__illustration {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: none;
}

@media (min-width: 782px) {
  .trainee-sec3-concerns__illustration {
    /* 吹き出しの列と下端を揃えて、人物が机に着いているように見せます */
    align-self: end;
    display: block;
    margin-bottom: -8px;
  }
  .trainee-sec3-concerns__illustration picture {
    display: block;
  }
  .trainee-sec3-concerns__illustration img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
  }
}

@media (max-width: 781px) {
  .trainee-sec3-concerns__illustration {
    max-width: 380px;
    margin: 0 auto 32px;
  }
}


/* --------------------------------------------------------------------------
   2. 3つの特徴のイラスト：角の丸めを非対称に
   --------------------------------------------------------------------------
   お悩みの吹き出しが「左下だけ角を落とした形」なので、
   同じ形の言語をここでも使います。上と右を丸め、左下だけ角を立てる。
   同じモチーフが2か所に出ることで、偶然ではなく意図に見えます。
   -------------------------------------------------------------------------- */

.trainee-sec4-features__card-image,
.trainee-sec4-features__card-image picture,
.trainee-sec4-features__card-image img {
  border-radius: 20px 20px 20px 4px;
}

/* ===================== Phase 3-E ここまで ===================== */

/* ==========================================================================
   Phase 3-F：「就労移行支援とは？」の扱い
   --------------------------------------------------------------------------
   一度、観葉植物のイラストを左に置いた2カラムを試しましたが、
   静物のイラストと本文の内容が結びつかず、素材を置いただけに
   見えてしまったため取りやめました（2026-08 判断）。

   代わりに、このセクションは「静かな導入」として役割を明確にします。
   幅を狭く、1文目を大きく。飾らないことで、前後のにぎやかな
   セクションとの差がそのまま緩急になります。
   ========================================================================== */

.trainee-sec2-about__inner {
  max-width: 700px;
  text-align: center;
}

/* 1文目はリード文として大きく */
.trainee-sec2-about__text:first-of-type {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 2;
}

.trainee-sec2-about__note {
  margin-top: 20px;
}

/* ===================== Phase 3-F ここまで ===================== */

/* --------------------------------------------------------------------------
   お悩みイラスト：縦横比の補正
   --------------------------------------------------------------------------
   固定ページ側に保存されているHTMLには width="800" height="500" が
   書き込まれており、ブラウザはこの比率で表示領域を確保します。
   差し替えた切り抜き画像は 1420 × 1108（比率1.28）なので、
   そのままだと上下に余白が出ます。実サイズの比率で上書きします。
   -------------------------------------------------------------------------- */
.trainee-sec3-concerns__illustration img {
  aspect-ratio: 1420 / 1108;
  height: auto;
}

/* ===================== お悩みイラスト補正 ここまで ===================== */

/* ==========================================================================
   Phase 3-G：お悩み／3つの特徴の詰め
   ========================================================================== */

/* --- 1. 吹き出しのずらしをやめる ---
   「次々に声が上がる」感じを狙って横にずらしていましたが、
   実機で見ると単に揃っていないように見えるため取りやめます。 */
@media (min-width: 782px) {
  .trainee-sec3-concerns__card:nth-child(2),
  .trainee-sec3-concerns__card:nth-child(3),
  .trainee-sec3-concerns__card:nth-child(4) {
    margin-left: 0;
  }
}

/* --- 2. 締めの一文を大きく ---
   見出しに対して受けの一文が小さく、会話が終わっていない印象でした。
   ここはセクションの結論なので、見出しに近い強さを持たせます。 */
.trainee-sec3-concerns__closing {
  font-size: clamp(19px, 2.5vw, 27px);
  line-height: 1.7;
}

/* --- 3. イラストを上のセクションへはみ出させる ---
   背景が透過したので、枠に収まらず前のセクションに少し入り込ませます。
   画面が狭いときに横スクロールが出ないよう、
   1240px以上のときだけ有効にしています。 */
@media (min-width: 1240px) {
  .trainee-sec3-concerns {
    overflow: visible;
  }
  .trainee-sec3-concerns__illustration {
    /* 幅を広げるぶん高さも増えるので、下端を揃えたまま上へ伸びます */
    width: 118%;
    max-width: none;
    position: relative;
    z-index: 1;
  }
}

/* --- 4. 3つの特徴：スマホでも左揃えに ---
   PC用の指定だけ左揃えにしていたため、スマホでは中央揃えのまま
   残っていました。カード内のタイトル・説明文も含めて左に統一します。 */
.trainee-sec4-features__inner,
.trainee-sec4-features__card-body {
  text-align: left;
}
@media (max-width: 781px) {
  .trainee-sec4-features__more-wrap {
    text-align: left !important;
  }
  .trainee-sec4-features__card-number {
    font-size: 48px;
  }
}

/* ===================== Phase 3-G ここまで ===================== */

/* ==========================================================================
   Phase 3-G 追補：締めの一文とイラストのはみ出し
   ========================================================================== */

/* --- 締めの一文を見出しと同じ大きさに ---
   セクションの結論なので、問いかけ（見出し）と同じ重さで受けます。 */
.trainee-sec3-concerns__closing {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.6;
}

/* --- イラストの「上のセクションへのはみ出し」は取り下げました ---
   下端を吹き出しの列に揃えている以上、イラストの上端の位置は
   「下端 − 画像の高さ」で決まります。負の margin-top は
   行の高さの要求量を減らすだけで、描画位置は動きません。
   上へ抜けさせるには画像の高さを 526px 超（幅145%以上）にする
   必要があり、そうすると右側が画面外に出て腕が切れてしまいます。
   イラスト自体を「頭上に余白の多い縦長構図」で作り直せば実現できますが、
   整列と対比だけで十分成立しているため、今回は見送りとしました。 */

/* ===================== Phase 3-G 追補 ここまで ===================== */

/* --------------------------------------------------------------------------
   3つの特徴：説明文の改行を自然な折り返しに
   --------------------------------------------------------------------------
   説明文はHTML側で文節ごとに trainee-nowrap（この単位では折り返さない）で
   区切られています。読みやすさのための工夫ですが、区切り方が
   「3列の狭いカード」を前提に決められているため、レイアウトを変えた
   いまは行の埋まり方が不揃いになっていました。
   このセクションだけ固定を解除して、自然に折り返させます。
   -------------------------------------------------------------------------- */
.trainee-sec4-features__card-desc .trainee-nowrap {
  white-space: normal;
}

/* ===================== 説明文の改行調整 ここまで ===================== */

/* ==========================================================================
   Phase 3-H：追従CTA・ヒーローボタンの縮小・フッター前の余白
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 追従型の相談ボタン
   --------------------------------------------------------------------------
   ヒーローを通り過ぎたら右下に出現し、フッターに到達すると消えます。
   表示/非表示の判定は functions.php 側のJSで行っています。
   ヒーローのボタンより一回り細くして、主役のCTAと競合させません。
   -------------------------------------------------------------------------- */

/* 追従CTA：ヒーローのボタンと同じ見た目にして、
   ヒーローのボタンが画面から出た瞬間に入れ替わりで現れます。
   同じボタンがそのまま付いてきたように見せるためです。 */
.trainee-float-cta {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9990;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* 初期状態は非表示。JSで is-visible が付いたら出てきます */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}
.trainee-float-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* ＼オンライン相談OK／：ヒーローと同じ体裁 */
.trainee-float-cta__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 4px 12px;
  border-radius: var(--trainee-radius-pill);
  background: rgba(250, 248, 245, 0.9);
  font-family: var(--trainee-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--trainee-text-sub);
  white-space: nowrap;
}
.trainee-float-cta__note::before,
.trainee-float-cta__note::after {
  color: var(--trainee-green-dark);
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.trainee-float-cta__note::before { content: "＼" / ""; }
.trainee-float-cta__note::after  { content: "／" / ""; }

.trainee-float-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-green-dark);
  border: 2px solid var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 122, 74, 0.28);
  transition: background-color var(--trainee-ease),
              border-color var(--trainee-ease),
              transform var(--trainee-ease);
}
.trainee-float-cta__btn::after {
  content: "→";
  transition: transform var(--trainee-ease);
}
.trainee-float-cta__btn:hover,
.trainee-float-cta__btn:focus-visible {
  background: var(--trainee-green-darker);
  border-color: var(--trainee-green-darker);
  color: var(--trainee-white);
  transform: translateY(-2px);
}
.trainee-float-cta__btn:hover::after { transform: translateX(4px); }

/* スマホでは非表示（別途フッター固定バーを検討するため） */
@media (max-width: 781px) {
  .trainee-float-cta { display: none; }
}


/* --------------------------------------------------------------------------
   2. ヒーローのボタンを一回り細く
   -------------------------------------------------------------------------- */

.trainee-hero__btn {
  font-size: 16px;
  padding: 15px 34px;
}
@media (min-width: 782px) and (max-height: 900px) {
  .trainee-hero__btn { padding: 14px 30px; }
}


/* --------------------------------------------------------------------------
   3. 関係機関セクションとフッターのあいだの余白を詰める
   --------------------------------------------------------------------------
   セクション自身の下余白に加えて、Lightningがコンテンツ領域の下に
   付けている余白が重なって、フッター手前に空白ができていました。
   -------------------------------------------------------------------------- */

.trainee-sec95-partners {
  padding: 72px 24px 64px;
}
@media (max-width: 781px) {
  .trainee-sec95-partners {
    padding: 48px 20px 44px;
  }
}

/* ヒーローの上余白を潰したときと同じ考え方で、
   「フッター直前の要素を内側に持つ要素」の下余白をまとめてゼロにします */
body.home .site-body,
body.home .site-body-container,
body.home .main-section,
body.home .entry-body,
body.home :has(.trainee-sec95-partners) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.home .entry-body > *:last-child,
body.home .trainee-sec95-partners {
  margin-bottom: 0 !important;
}

/* ===================== Phase 3-H ここまで ===================== */


/* --------------------------------------------------------------------------
   ヘッダー：ロゴの左位置を画面基準で固定
   --------------------------------------------------------------------------
   ヘッダーの中身に max-width: 1200px と margin: 0 auto が入っていたため、
   ワイドモニタでは左右に余白ができ、モニターの幅によってロゴの位置が
   変わっていました。幅の制限を外して、常に画面左端から一定の位置に
   置くようにします（ナビは同じだけ右端から離れた位置になります）。
   -------------------------------------------------------------------------- */

.trainee-header__inner {
  max-width: none;
  padding-left: clamp(20px, 2.5vw, 40px);
  padding-right: clamp(20px, 2.5vw, 40px);
}

/* ===================== ヘッダー調整 ここまで ===================== */


/* ==========================================================================
   ヒーローCTAのスクロール追従
   --------------------------------------------------------------------------
   別のボタンを出すのではなく、ヒーローのボタンそのものが
   position:fixed に切り替わって画面に残り続けます。
   切り替えの瞬間は「いまと同じ位置」で固定してから下へ動かすので、
   位置が飛ばず、すーっと左下へ落ち着きます。
   ========================================================================== */

/* 固定に切り替えたとき、元の場所が詰まらないよう高さを確保する枠 */
.trainee-hero__cta-slot {
  display: block;
}

.trainee-hero__cta.is-following {
  position: fixed;
  z-index: 9990;
  margin: 0;
  /* 【重要】ヒーローの登場アニメーション（trainee-hero-up）を解除します。
     CSSではアニメーションが通常の指定より優先されるため、
     animation-fill-mode: both で最終状態（opacity:1 / transform:none）が
     保持されたままだと、下の opacity と transform が一切効きません。
     これを外さないと、フェードせずパッと出てパッと消える動きになります。 */
  animation: none;
  /* 出るときは移動させず、その場で8pxだけ持ち上げながら現れます。
     スクロール中にボタンが動くと、ページの流れと動きが競合して
     うるさく見えるためです。 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  /* ゆっくりめに。出るときは静かに立ち上がるよう ease-out 気味の
     カーブにしています。数値を変えるならこの1行だけです。 */
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.trainee-hero__cta.is-following.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* 追従中はセクションの背景色が次々変わるため、
   注記に薄い下地を敷いて文字が読めなくなるのを防ぎます */
.trainee-hero__cta.is-following .trainee-hero__note {
  background: rgba(250, 248, 245, 0.92);
  padding: 4px 12px;
  border-radius: var(--trainee-radius-pill);
}
.trainee-hero__cta.is-following .trainee-hero__btn {
  box-shadow: 0 8px 24px rgba(37, 122, 74, 0.28);
}

/* フッターに到達したら消える */
.trainee-hero__cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* スマホでは追従させない（別途フッター固定バーを検討するため） */
@media (max-width: 781px) {
  .trainee-hero__cta.is-following {
    position: static;
    box-shadow: none;
  }
  .trainee-hero__cta-slot { min-height: 0 !important; }
}

/* 動きを減らす設定をしている利用者には、移動アニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .trainee-hero__cta.is-following { transition: none; }
}

/* ===================== ヒーローCTA追従 ここまで ===================== */

/* ==========================================================================
   Sec.2「就労移行支援とは？」対象者ブロック（タイポグラフィで見せる）
   --------------------------------------------------------------------------
   参考サイト（mount.jp / 集英社採用サイト）の組み方を踏まえて、
   小さなラベル＋大きな本体を、細い罫線ではさむ構成にしています。
   囲みや色面は使わず、文字の大小と罫線だけで階層を作ります。

   本文は読みやすい幅（700px）に、対象者の帯だけ広く（860px）取って
   いるのは、幅の差そのものを見せ場にするためです。
   ========================================================================== */

.trainee-sec2-about__inner {
  max-width: 860px;
}
/* 本文は狭いまま。帯だけが広がって見えます */
.trainee-sec2-about__text,
.trainee-sec2-about__note {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.trainee-sec2-about__target {
  margin: 48px 0 24px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--trainee-border);
  border-bottom: 1px solid var(--trainee-border);
}

/* 上段：小さなラベルと年齢 */
.trainee-sec2-about__target-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 16px !important;
  line-height: 1;
}
.trainee-sec2-about__target-label {
  font-family: var(--trainee-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--trainee-green-dark);
}
/* ラベルと年齢のあいだの細い縦線 */
.trainee-sec2-about__target-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: 16px;
  vertical-align: -2px;
  background: var(--trainee-border);
}
.trainee-sec2-about__target-age {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--trainee-text-sub);
}

/* 下段：対象となる障害種別。ここが主役 */
.trainee-sec2-about__target-types {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  margin: 0 !important;
  font-family: var(--trainee-font-heading);
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--trainee-text-dark);
}
/* 区切りは囲みではなく細いスラッシュ。文字だけで並べます */
.trainee-sec2-about__target-types span + span::before {
  content: "/";
  display: inline-block;
  margin: 0 0.7em;
  font-weight: 400;
  color: var(--trainee-green-soft);
}

@media (max-width: 781px) {
  .trainee-sec2-about__target {
    margin: 36px 0 20px;
    padding: 22px 0 24px;
  }
  .trainee-sec2-about__target-head {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px !important;
  }
  /* 縦積みになるので、ラベル横の縦線は消します */
  .trainee-sec2-about__target-label::after {
    display: none;
  }
  .trainee-sec2-about__target-types {
    font-size: 17px;
  }
  .trainee-sec2-about__target-types span + span::before {
    margin: 0 0.5em;
  }
}

/* ===================== Sec.2 対象者ブロック ここまで ===================== */

/* ==========================================================================
   スマホ用：画面下に固定する相談ボタン
   --------------------------------------------------------------------------
   PC用の追従CTA（注記＋ボタン）は、スマホでは幅を取りすぎるため
   別要素にしています。中身はボタン1つだけです。
   電話番号はヘッダーに常時出ているので、ここには入れていません。

   出す条件はPCと同じで、ヒーローを通り過ぎたら現れ、
   フッターに到達すると消えます。
   ========================================================================== */

.trainee-sp-cta {
  display: none;
}

@media (max-width: 781px) {
  .trainee-sp-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    padding: 10px 16px;
    /* iPhoneのホームバー分の余白を足す（対応外の端末では0になります） */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 248, 245, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -2px 16px rgba(58, 50, 38, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .trainee-sp-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* ボタンの上に小さく置く注記。ヒーローと同じ ＼ ／ の体裁に揃えています */
  .trainee-sp-cta__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 8px !important;
    font-family: var(--trainee-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--trainee-text-sub);
    line-height: 1;
  }
  .trainee-sp-cta__note::before,
  .trainee-sp-cta__note::after {
    color: var(--trainee-green-dark);
    font-family: var(--trainee-font-heading);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }
  .trainee-sp-cta__note::before { content: "＼" / ""; }
  .trainee-sp-cta__note::after  { content: "／" / ""; }

  /* 「無料」だけ差し色のオレンジ。緑一色の面に一点だけ色を入れます */
  .trainee-sp-cta__badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--trainee-radius-pill);
    background: var(--trainee-accent-warm);
    color: var(--trainee-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .trainee-sp-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    border-radius: var(--trainee-radius-pill);
    background: var(--trainee-green-dark);
    color: var(--trainee-white);
    font-family: var(--trainee-font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 122, 74, 0.28);
  }
  .trainee-sp-cta__btn::after {
    content: "→";
  }
  .trainee-sp-cta__btn:hover,
  .trainee-sp-cta__btn:focus-visible {
    background: var(--trainee-green-darker);
    color: var(--trainee-white);
  }

  /* --------------------------------------------------------------------
     2026-08-19：浮いているあいだのバーを細くする

     高さが97pxあり、スマホの画面ではそれなりの面積を占めていました。
     恒久的に内容を隠すわけではありません（スクロールすれば出ます）が、
     常に見えている帯なので、薄いほうが本文を読みやすくなります。

     注記（＼オンライン相談OK／）は「浮いているとき」だけ省きます。
     フッターのドックに収まったあとは場所に余裕があるので、そのまま出します。
     ボタンの中に「無料」のバッジが残るので、伝えたいことは保てます。
     -------------------------------------------------------------------- */
  .trainee-sp-cta:not(.is-docked) {
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .trainee-sp-cta:not(.is-docked) .trainee-sp-cta__note {
    display: none;
  }
  .trainee-sp-cta:not(.is-docked) .trainee-sp-cta__btn {
    padding: 11px 20px;
  }

  /* バーがページ末尾のコンテンツに被らないよう、
     フッターの下に同じ高さぶんの余白を足します */
  /* ドック方式にしたため、フッター下の余白確保は不要になりました
     （バーはフッター内のドックに収まります） */
}

/* 動きを減らす設定をしている利用者にはスライドを出さない */
@media (prefers-reduced-motion: reduce) {
  .trainee-sp-cta { transition: none; }
}

/* ===================== スマホ用固定CTA ここまで ===================== */

/* ==========================================================================
   フッター（2026-08 確定版 / manabyの構成を参考に再設計）
   --------------------------------------------------------------------------
     左  … ロゴ・電話番号・受付時間・お問い合わせボタン
     右  … 太字の見出し＋項目のナビ3列と、対象者別リンクの枠
     下段 … 住所と著作権表示
     スマホ … ナビ2列。追従バーが最下部のドックにカチッと収まる

   旧テーマから残っていた装飾（リンク左の緑ドット、項目右端の縦罫線、
   関係機関リンクの白いピル）はすべて撤去しています。
   ========================================================================== */

.trainee-footer {
  background: var(--trainee-green-light);
  border-top: 1px solid var(--trainee-border);
  padding: 0;
}

/* ---- 旧テーマの装飾を撤去 ---- */
.trainee-footer .trainee-footer-nav-list a { padding-left: 0; }
.trainee-footer .trainee-footer-nav-list a::before,
.trainee-footer .trainee-footer-nav-list a::after,
.trainee-footer .trainee-footer-nav-list li::after {
  content: none !important;
  display: none !important;
}
.trainee-footer .trainee-footer-nav-list li a {
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
  text-align: left;
  border-radius: 0;
  padding: 0;
}

/* ==========================================================================
   本体（PC）
   ========================================================================== */

.trainee-footer .trainee-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px clamp(20px, 3vw, 40px) 48px;
}

/* ---- 左：ロゴ・電話・CTA ---- */
.trainee-footer .trainee-footer-logo img {
  width: 148px;
  height: auto;
}
.trainee-footer .trainee-footer-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px !important;
  color: var(--trainee-green-dark);
}
.trainee-footer .trainee-footer-phone a {
  font-family: var(--trainee-font-heading);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-footer .trainee-footer-hours {
  font-size: 13px;
  color: var(--trainee-text-sub);
  margin: 0 0 22px !important;
}

.trainee-footer .trainee-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 26px;
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--trainee-ease), transform var(--trainee-ease);
}
.trainee-footer .trainee-footer-cta-btn:hover,
.trainee-footer .trainee-footer-cta-btn:focus-visible {
  background: var(--trainee-green-darker);
  color: var(--trainee-white);
  transform: translateY(-2px);
}
/* 丸で囲んだ矢印 */
.trainee-footer .trainee-footer-cta-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 15px;
  line-height: 1;
  padding-bottom: 2px;
}

/* ---- 右：ナビ ---- */
.trainee-footer .trainee-footer-nav-area {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 36px;
  align-items: start;
}
.trainee-footer .trainee-footer-navcol__head {
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--trainee-text-dark);
  margin: 0 0 14px !important;
}
.trainee-footer .trainee-footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trainee-footer .trainee-footer-nav-list li { margin: 0 0 10px; }
.trainee-footer .trainee-footer-nav-list a {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--trainee-text-sub);
  text-decoration: none;
  transition: color var(--trainee-ease);
}
.trainee-footer .trainee-footer-nav-list a:hover { color: var(--trainee-green-dark); }

/* ---- 対象者別リンクの枠 ---- */
.trainee-footer .trainee-footer-links {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-sm);
  background: var(--trainee-white);
  overflow: hidden;
}
.trainee-footer .trainee-footer-links__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--trainee-font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  text-decoration: none;
  transition: background-color var(--trainee-ease), color var(--trainee-ease);
}
.trainee-footer .trainee-footer-links__item + .trainee-footer-links__item {
  border-left: 1px solid var(--trainee-border);
}
.trainee-footer .trainee-footer-links__item svg { color: var(--trainee-green); }
.trainee-footer .trainee-footer-links__item:hover {
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
}

/* ---- 下段：住所と著作権 ---- */
.trainee-footer .trainee-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--trainee-border);
}
.trainee-footer .trainee-footer-address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
.trainee-footer .trainee-footer-address a {
  font-size: 12.5px;
  color: var(--trainee-text-sub);
  text-decoration: none;
}
.trainee-footer .trainee-footer-address a:hover { color: var(--trainee-green-dark); }
.trainee-footer .trainee-footer-bottom small {
  font-size: 12px;
  color: var(--trainee-text-light);
}
.trainee-footer .trainee-footer-icon { flex: 0 0 auto; }

/* ドックはPCでは存在しない扱い */
.trainee-footer-sp-dock { display: none; }


/* ==========================================================================
   フッター：スマホ
   ========================================================================== */
@media (max-width: 781px) {

  .trainee-footer .trainee-footer-main {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 40px 20px 28px;
  }

  .trainee-footer .trainee-footer-brand { text-align: center; }
  .trainee-footer .trainee-footer-logo img { width: 132px; }
  .trainee-footer .trainee-footer-phone { justify-content: center; }
  .trainee-footer .trainee-footer-phone a { font-size: 26px; }
  /* この指定は、下のほうにある .trainee-footer-brand つきの指定に
     負けていて効いていませんでした。実際に隠しているのはファイル末尾の
     「スマホ：フッターの『お問い合わせ』ボタンを隠す」のほうです。
     消すと戻したときに分かりにくいので、印だけ残しておきます。 */
  .trainee-footer .trainee-footer-cta-btn { display: none; }  /* ドックのバーが兼ねます */

  /* ナビは2列。1列だと縦に長くなりすぎます */
  .trainee-footer .trainee-footer-nav-area {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 26px;
  }
  .trainee-footer .trainee-footer-navcol__head { font-size: 14px; margin-bottom: 10px !important; }
  .trainee-footer .trainee-footer-nav-list a { font-size: 13px; }

  /* 対象者別リンクは横幅いっぱいに縦2段 */
  .trainee-footer .trainee-footer-links {
    justify-self: stretch;
    flex-direction: column;
  }
  .trainee-footer .trainee-footer-links__item {
    justify-content: center;
    padding: 14px 16px;
    font-size: 13px;
  }
  .trainee-footer .trainee-footer-links__item + .trainee-footer-links__item {
    border-left: none;
    border-top: 1px solid var(--trainee-border);
  }

  /* ドック枠。ここに追従バーが収まります */
  .trainee-footer-sp-dock {
    display: block;
    position: relative;
    min-height: 96px;
    border-top: 1px solid var(--trainee-border);
  }
  .trainee-sp-cta.is-docked {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 18px 20px 20px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .trainee-footer .trainee-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 20px 20px;
  }
  .trainee-footer .trainee-footer-address { justify-content: center; }
  .trainee-footer .trainee-footer-address a { font-size: 12px; }
}

/* ===================== フッター ここまで ===================== */

/* --------------------------------------------------------------------------
   フッターナビ：旧テーマ由来の装飾を徹底的に消す
   --------------------------------------------------------------------------
   リンク左のドットや、項目に付く罫線・リストマーカーなど、
   どこから来ているか特定しづらい装飾が残っていたため、
   フッター内のナビゲーションに対してまとめて打ち消します。
   -------------------------------------------------------------------------- */

.trainee-footer nav ul,
.trainee-footer nav ol,
.trainee-footer nav li {
  list-style: none !important;
  border: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: none !important;
}
.trainee-footer nav li::marker {
  content: "" !important;
}
.trainee-footer nav li::before,
.trainee-footer nav li::after,
.trainee-footer nav a::before,
.trainee-footer nav a::after {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
}

/* ===================== フッターナビの装飾除去 ここまで ===================== */

/* --------------------------------------------------------------------------
   Lightningとのクラス名衝突への対処
   --------------------------------------------------------------------------
   .trainee-footer-nav-list という名前をこちらでも使っているため、
   Lightningが自前のフッターナビ用に持っているスタイルが当たっています。
   実際に効いていたのは次の指定でした（--vk-color-* はLightningの変数）。

     .trainee-footer-nav-list li:first-child { border-left: 1px solid var(--vk-color-border); }

   上のまとめ打ち消しでも消えますが、原因が特定できたので狙い撃ちでも
   無効化しておきます。将来クラス名を trainee- 接頭辞付きに改名すれば、
   この種の衝突は根本的になくなります（Phase 5の掃除で対応予定）。
   -------------------------------------------------------------------------- */

.trainee-footer .trainee-footer-nav-list li,
.trainee-footer .trainee-footer-nav-list li:first-child,
.trainee-footer .trainee-footer-nav-list li:last-child,
.trainee-footer .trainee-footer-nav-list li:only-child {
  border: 0 none !important;
}

/* ===================== 衝突対処 ここまで ===================== */

/* --------------------------------------------------------------------------
   Sec.8 CTA：上下の余白を詰める
   --------------------------------------------------------------------------
   中身が「見出し＋ボタン＋電話番号」だけで縦に短いのに、
   カードが何枚も並ぶセクションと同じ余白（上120px／下128px）を
   取っていたため、間延びしていました。約6割に縮めます。

   あわせて、横並びになったことで不要になった要素間の余白
   （ボタンや区切り線の下マージン）も、PCでは打ち消します。
   -------------------------------------------------------------------------- */

.trainee-sec8-cta {
  padding-top: calc(var(--trainee-sec-pt) * 0.6);
  padding-bottom: calc(var(--trainee-sec-pb) * 0.6);
}
.trainee-sec8-cta__title {
  margin: 0 0 36px !important;
}

@media (min-width: 900px) {
  /* 横並びなので、縦方向のマージンは不要です */
  .trainee-sec8-cta__button-wrap,
  .trainee-sec8-cta__divider,
  .trainee-sec8-cta__phone {
    margin-bottom: 0 !important;
  }
  .trainee-sec8-cta__phone-hours {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 781px) {
  .trainee-sec8-cta {
    padding-top: calc(var(--trainee-sec-pt-sp) * 0.85);
    padding-bottom: calc(var(--trainee-sec-pb-sp) * 0.85);
  }
  .trainee-sec8-cta__title {
    margin-bottom: 28px !important;
  }
}

/* ===================== Sec.8 CTA 余白調整 ここまで ===================== */

/* --------------------------------------------------------------------------
   フッター 微調整（2026-08）
   -------------------------------------------------------------------------- */

/* 1. 対象者別リンクの枠を、ナビから離す
      すぐ下に張り付いていてメニューの一部に見えていました。 */
.trainee-footer .trainee-footer-links {
  margin-top: 36px;
}

/* 2. 住所のアイコンが、テキストが折り返したときに縦位置がずれる
      中央揃えだと2行目の分だけアイコンが下がるので、上揃えにします。 */
.trainee-footer .trainee-footer-address {
  align-items: flex-start;
}
.trainee-footer .trainee-footer-address .trainee-footer-icon {
  margin-top: 3px;
}

@media (max-width: 781px) {
  /* 3. スマホでナビが中央寄せになる
        旧テーマ側に .trainee-footer-nav-list へ中央寄せの指定が残っていて、
        クラス名が同じため当たっていました。左揃えに戻します。 */
  .trainee-footer .trainee-footer-navcol,
  .trainee-footer .trainee-footer-navcol__head,
  .trainee-footer .trainee-footer-nav-list,
  .trainee-footer .trainee-footer-nav-list li,
  .trainee-footer .trainee-footer-nav-list a {
    text-align: left !important;
  }
  .trainee-footer .trainee-footer-nav-list {
    align-items: flex-start !important;
  }

  .trainee-footer .trainee-footer-links {
    margin-top: 24px;
  }
}

/* ===================== フッター微調整 ここまで ===================== */

/* ==========================================================================
   スマホ：ハンバーガーとドロワーメニュー（2026-08 再設計）
   --------------------------------------------------------------------------
   アイコンの形（3本線）は変えていません。世界共通の記号として定着していて、
   装飾的な形に変えると「何のボタンか」が伝わりにくくなるためです。
   利用者に精神障害のある方が多く、家族や支援機関の方も見るサイトなので、
   分かりやすさを装飾と引き換えにしない判断です。

   代わりに手を入れたのは以下です。
     ・3本線の下に MENU の文字（3本線だけでは伝わらない層への配慮）
     ・ドロワーの背景をクリームにして、サイトの世界観に合わせる
     ・各項目に英字の小ラベル（フッターやトップページと同じ言語）
     ・SNSと、申し込み・電話の導線を最下部に追加
   ========================================================================== */

/* ---- ハンバーガーボタン ---- */
.trainee-header__hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 46px;
  padding: 4px;
}
.trainee-header__hamburger-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.trainee-header__hamburger-text {
  font-family: var(--trainee-font-en);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--trainee-text-sub);
  transition: opacity 0.3s ease;
}
/* 開いているあいだは、3本線がバツ印に変わるので文字は消します */
.trainee-header__hamburger.is-active .trainee-header__hamburger-text {
  opacity: 0;
}
/* 入れ子が1段深くなったので、バツ印への変形を指定し直します */
.trainee-header__hamburger.is-active .trainee-header__hamburger-lines .trainee-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.trainee-header__hamburger.is-active .trainee-header__hamburger-lines .trainee-header__hamburger-line:nth-child(2) {
  opacity: 0;
}
.trainee-header__hamburger.is-active .trainee-header__hamburger-lines .trainee-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ---- ドロワー本体 ---- */
.trainee-header__drawer-body {
  width: 320px;
  max-width: 88vw;
  background: var(--trainee-cream);
  padding: calc(var(--trainee-header-h) + 20px) 24px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- メニュー項目 ---- */
.trainee-header__drawer-menu {
  border-top: 1px solid var(--trainee-border);
}
.trainee-header__drawer-item {
  border-bottom: 1px solid var(--trainee-border);
}
.trainee-header__drawer-item > a,
.trainee-header__drawer-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 2px;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* 英字の小ラベル。幅を固定して、日本語の開始位置を縦に揃えます */
.trainee-header__drawer-en {
  flex: 0 0 62px;
  font-family: var(--trainee-font-en);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trainee-accent-warm);
}
.trainee-header__drawer-ja {
  flex: 1 1 auto;
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--trainee-text-dark);
}

/* サブメニュー */
.trainee-header__drawer-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 12px 74px;
}
.trainee-header__drawer-sub li { margin-bottom: 12px; }
.trainee-header__drawer-sub a {
  font-size: 13.5px;
  color: var(--trainee-text-sub);
  text-decoration: none;
}

/* ---- SNS ---- */
.trainee-header__drawer-sns {
  display: flex;
  gap: 10px;
  margin: 28px 0 24px;
}
.trainee-header__drawer-sns a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-white);
  font-family: var(--trainee-font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--trainee-text-sub);
  text-decoration: none;
  transition: border-color var(--trainee-ease), color var(--trainee-ease);
}
.trainee-header__drawer-sns a svg { color: var(--trainee-green); }
.trainee-header__drawer-sns a:hover {
  border-color: var(--trainee-green-soft);
  color: var(--trainee-green-dark);
}

/* ---- 最下部の導線 ---- */
.trainee-header__drawer-cta {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--trainee-border);
  text-align: center;
}
.trainee-header__drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.trainee-header__drawer-btn::after { content: "→"; }
.trainee-header__drawer-btn:hover { background: var(--trainee-green-darker); color: var(--trainee-white); }

.trainee-header__drawer-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--trainee-font-heading);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-header__drawer-hours {
  margin: 4px 0 0 !important;
  font-size: 12px;
  color: var(--trainee-text-light);
}

/* 動きを減らす設定をしている利用者にはスライドを出さない */
@media (prefers-reduced-motion: reduce) {
  .trainee-header__drawer-body { transition: none; }
}

/* ===================== ドロワーメニュー ここまで ===================== */

/* --------------------------------------------------------------------------
   ドロワー：スクロールすると縦に伸びる問題の修正
   --------------------------------------------------------------------------
   原因は2つありました。

   1. 高さが height:100% だったこと
      スマホでは、画面内をスクロールするとブラウザのアドレスバーが
      引っ込みます。すると表示領域が広がるので、100% だったドロワーも
      一緒に伸びていました。表示領域の変化に追従する 100dvh に変えます。

   2. 背後のページのスクロールが止まっていなかったこと
      ドロワーの中を下までスクロールすると、そのまま裏のページが
      動き出します（スクロールの連鎖）。これがアドレスバーの開閉を
      誘発していました。連鎖を止め、開いているあいだは背後を固定します。
   -------------------------------------------------------------------------- */

.trainee-header__drawer {
  height: 100%;      /* dvh 非対応ブラウザ向け */
  height: 100dvh;
}
.trainee-header__drawer-body {
  height: 100%;
  /* 中身を下まで送っても、裏のページにスクロールを渡さない */
  overscroll-behavior: contain;
}

/* 開いているあいだは背後のページを固定。
   実際の固定は JS 側で body に position:fixed を当てて行います
   （iOSでは overflow:hidden が効かないため）。
   ここでは念のための保険として overflow も指定しています。 */
body.trainee-drawer-open {
  overflow: hidden;
}
/* ドロワー内だけが動くようにする */
body.trainee-drawer-open .trainee-header__drawer-body {
  touch-action: pan-y;
}

/* ===================== ドロワーのスクロール修正 ここまで ===================== */

/* --------------------------------------------------------------------------
   ドロワー：ヘッダーとの境目をはっきりさせる
   --------------------------------------------------------------------------
   ヘッダーもドロワーもクリーム色だったため、境目が消えて
   ヘッダーの電話番号がメニューの中に入っているように見えていました。
   （ヘッダーはドロワーより手前に表示される作りのため、
     開いてもヘッダーはそのまま上に残ります）

   ドロワーを半透明の白＋背景ぼかしにして、ヘッダーのクリームと
   はっきり分けます。裏には暗いオーバーレイが敷かれているので、
   透けても文字は読めます。
   -------------------------------------------------------------------------- */

.trainee-header__drawer-body {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: -8px 0 32px rgba(58, 50, 38, 0.14);
}

/* backdrop-filter に対応していない環境では、
   透過をやめて不透明の白にします（読みにくくならないように） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trainee-header__drawer-body {
    background: var(--trainee-white);
  }
}

/* ドロワーが白系になったので、白だったSNSボタンはクリームに変えて
   面としての差を残します */
.trainee-header__drawer-sns a {
  background: var(--trainee-cream);
}

/* 開いているあいだ、ヘッダーを1本の帯として見せる */
body.trainee-drawer-open .trainee-header {
  background: var(--trainee-cream);
  box-shadow: 0 1px 0 var(--trainee-border);
}

/* ===================== ドロワーの見た目調整 ここまで ===================== */

/* --------------------------------------------------------------------------
   フッター：ブランド列を中央寄せ（PC）
   -------------------------------------------------------------------------- */

.trainee-footer .trainee-footer-brand {
  text-align: center;
}
.trainee-footer .trainee-footer-brand .trainee-footer-phone {
  justify-content: center;
}
.trainee-footer .trainee-footer-brand .trainee-footer-cta-btn {
  /* inline-flex のままだと左寄せになるので、
     ブロックにして左右のマージンで中央に置きます */
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   卒業生の声：見出しをリンクにしたぶんの調整
   --------------------------------------------------------------------------
   投稿から読み込む方式に変えたことで、キャッチコピーが記事へのリンクに
   なりました。本文と同じ色のまま、下線だけホバーで出す控えめな見せ方に
   しています。
   -------------------------------------------------------------------------- */

.trainee-sec55-interviews__headline a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trainee-ease);
}
.trainee-sec55-interviews__headline a:hover,
.trainee-sec55-interviews__headline a:focus-visible {
  color: var(--trainee-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ===================== 追加調整 ここまで ===================== */

/* --------------------------------------------------------------------------
   卒業生の声：大きいカードもアバターを横に置く
   --------------------------------------------------------------------------
   1枚目だけアバターが上・属性が下という別の組み方になっていて、
   小さい2枚と揃っていませんでした。同じ「アバター左・情報右」に統一します。
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .trainee-sec55-interviews__card:nth-child(1) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "ava  meta"
      "ava  head"
      "txt  txt"
      "more more";
    /* 4行目を 1fr にして、余った高さをすべてここに集めます。
       こうしないと余白が各行に分配され、キャッチコピーと本文、
       本文と「続きを読む」のあいだが間延びします。 */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 24px;
    /* 上揃えにしないと、アイコン（120px）の高さに引っぱられて
       属性とキャッチコピーが下に落ち、アイコンと位置がずれます */
    align-items: start;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__avatar {
    grid-area: ava;
    margin: 0;
    align-self: start;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__meta {
    grid-area: meta;
    text-align: left;
    margin: 0 0 8px;
    align-self: start;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__headline {
    grid-area: head;
    margin: 0;
    align-self: start;
  }
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__excerpt {
    grid-area: txt;
    margin: 20px 0 0;
  }
  /* 「続きを読む」はカードの下端に固定します */
  .trainee-sec55-interviews__card:nth-child(1) .trainee-sec55-interviews__readmore {
    grid-area: more;
    align-self: end;
    margin: 20px 0 0;
  }
}

/* ===================== 卒業生の声の調整 ここまで ===================== */

/* --------------------------------------------------------------------------
   卒業生の声：1枚目のカードのQ&A表示
   --------------------------------------------------------------------------
   1枚目は右の小さいカード2枚分の高さになるため、抜粋だけだと縦に
   余白が空きます。最初の1問1答をそのまま載せて埋めています。
   -------------------------------------------------------------------------- */

.trainee-sec55-interviews__qa {
  grid-area: txt;
  margin: 20px 0 0;
}
.trainee-sec55-interviews__q {
  font-family: var(--trainee-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--trainee-green-dark);
  margin: 0 0 8px !important;
}
/* 質問の頭に Q を付けます。本文側に Q が書かれていた場合は
   PHP側で取り除いているので、二重にはなりません。 */
.trainee-sec55-interviews__q::before {
  content: "Q.";
  margin-right: 0.5em;
  color: var(--trainee-green);
}
.trainee-sec55-interviews__a {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--trainee-text-sub);
  margin: 0 !important;
}
/* 回答の頭に A を付けて、質問と対になっていることを示します */
.trainee-sec55-interviews__a::before {
  content: "A.";
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  color: var(--trainee-green-soft);
  margin-right: 0.5em;
}

/* スマホでは1枚目も他と同じ大きさになるので、質問は省いて
   回答だけを短く見せます */
@media (max-width: 899px) {
  .trainee-sec55-interviews__q {
    display: none;
  }
  /* 質問を隠すと「A.」だけが残って意味が通らなくなるので、
     こちらも一緒に消します */
  .trainee-sec55-interviews__a::before {
    content: none;
  }
  .trainee-sec55-interviews__a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

/* ===================== 卒業生の声 Q&A ここまで ===================== */

/* ==========================================================================
   スクロールアニメーション（全ページ共通）
   --------------------------------------------------------------------------
   画面に入ったセクションを、下から20px上がりながらふわっと表示します。

   隠す指定を html.trainee-reveal-ready の下に置いているのがポイントです。
   このクラスはJavaScriptが動いたときだけ付きます。先に隠してしまうと、
   JSが失敗した環境で内容が一切読めなくなるためです。

   OSで「視差効果を減らす」を有効にしている方にはJS側で何もしないので、
   最初から表示されたままになります。
   ========================================================================== */

.trainee-reveal-ready .trainee-reveal {
  opacity: 0;
  transform: translateY(24px);
  /* 速さはここだけ変えれば調整できます。
     0.7秒だとやや速く感じたため1秒に。距離も少し増やしています
     （時間だけ延ばすと、動きが鈍いだけの印象になるため）。 */
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 動かす要素だけをブラウザに前もって知らせて、動きをなめらかにします */
  will-change: opacity, transform;
}
.trainee-reveal-ready .trainee-reveal.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 念のための保険。JSでは対象外にしていますが、
   万一ヒーローに付いても隠さないようにします。 */
.trainee-reveal-ready .trainee-hero.trainee-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .trainee-reveal-ready .trainee-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===================== スクロールアニメーション ここまで ===================== */

/* ==========================================================================
   Phase 4-A：下層ページ 共通パーツの統一（2026-08）
   --------------------------------------------------------------------------
   トップページで作った見た目のルールを、下層ページにも適用します。
     1. CTAとフッターのあいだの隙間を解消（全ページ）
     2. ページヘッダー（タイトル帯）の刷新
     3. 各セクション見出しの点線を廃止し、英語サブタイトルを追加
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CTAとフッターのあいだの隙間
   --------------------------------------------------------------------------
   トップページでは対処済みでしたが、body.home に限定していたため
   下層ページには効いていませんでした。全ページに広げます。
   Lightningがコンテンツ領域の下に付けている余白が原因です。
   -------------------------------------------------------------------------- */

.site-body,
.site-body-container,
.main-section,
.entry-body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.entry-body > *:last-child {
  margin-bottom: 0 !important;
}
/* 「ヒーロー」「CTA」を内側に持つ要素の下余白もまとめてゼロにします */
:has(> .trainee-sec8-cta) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   1-b. ページヘッダーとCTAが本文カラムの幅で止まる件（2026-08-19 修正）
   --------------------------------------------------------------------------
   ■ どこで起きていたか
     ・ブログ（一覧・個別）のCTA
     ・卒業生の声 個別ページのページヘッダーとCTA

   ■ 原因1：alignfull が効かない場所に入っている
     ブログのCTAは、本文（the_content）ではなくページ全体のHTMLを書き換えて
     .main-section の末尾に差し込んでいます。.entry-body の外なので、
     Lightning が alignfull 用に用意している「コンテナからはみ出させる」
     仕組みの対象外でした。
     卒業生の声の個別ページも同様で、この投稿タイプは Lightning の
     レイアウト設定（1カラム）を保存できず、サイドバーはCSSで消している
     状態です。テーマ側からは2カラムのままに見えているため、
     alignfull の指定が働いていないと考えられます。
     （固定ページの一覧 /interview/ では効いているので、ページ種別による
      違いです。要確認の余地はありますが、下記の対処はどちらでも安全です）

   ■ 原因2：transform を使うとスクロールアニメーションに打ち消される
     はじめ .trainee-blog-related と同じ transform: translateX(-50%) で
     はみ出させたところ、CTAが右にずれて横スクロールが出ました。
     .trainee-sec8-cta と .trainee-page-hero はスクロールアニメーションの
     対象で、表示後に transform: none が当たるためです。
     （.trainee-blog-related は対象外なので、あちらは transform のままで
      問題なく動いています）

   ■ 対処
     transform ではなく左マージンでずらします。
     calc(50% - 50vw) は「親の中央を基準に画面の左端まで戻す」計算なので、
     すでに全幅になっている場所に当たっても値が0になり、
     二重にずれることがありません。今後どこに差し込んでも安全です。
   -------------------------------------------------------------------------- */

/* ■ さらに判明したこと（2026-08-19 追記）
     左マージン方式に変えたところ、ずれは直ったのに全幅にもなりませんでした。
     transform は効いて margin が効かない、ということは
     「margin を打ち消している指定が別にある」ということです。
     親テーマ側の alignfull 用の指定（!important 付き）とぶつかっていると
     考えられます。固定ページでは効いていて個別ページでは効かないのも、
     レイアウト（1カラム／2カラム）でその指定が切り替わっているとすれば
     説明がつきます。

     そこで、①!important を付ける ②クラス名を3回重ねて詳細度を上げる
     の2つで確実に勝たせます。クラスを重ねるのは見た目が奇妙ですが、
     親テーマのHTML構造を推測せずに詳細度だけ上げられる書き方です。
     （祖先の要素名やクラス名を当てにすると、テーマ更新で外れます）

     calc(50% - 50vw) は「親の中央を基準に画面の左端まで戻す」計算なので、
     すでに全幅の場所では0になります。だからトップページや下層ページなど
     いま正しく表示できている箇所に当たっても、見た目は変わりません。 */

/* ==========================================================================
   文節固定（trainee-nowrap）の方針／2026-08-19
   --------------------------------------------------------------------------
   引き継ぎで「方針未決定」になっていた項目の結論です。

   ■ 文節固定は何のためか
     意味の切れ目で行を折り返すと読みやすくなる、という装飾です。
     器（親要素）がかたまりより広いときにだけ効果があります。

   ■ 収まらないと何が起きるか
     折り返せないので、そのまま外にはみ出します。器に overflow:hidden が
     付いていると、はみ出さずに文字が切れます。後者は横スクロールが
     出ないぶん、気づきにくく厄介です。

   ■ 方針
     全ページを幅360〜1200pxで実測し、収まらない箇所だけ解除します。
     一律に解除しない理由は、属性タグ（「Hさん・20代・女性・…」など）の
     ように短いかたまりでは、解除すると語の途中で改行されてしまうためです。
     文章には効かせ、器が狭くなる箇所だけ外す、という切り分けです。

   ■ 新しく文章を足すときの目安
     ひとかたまりは全角18文字以内。それを超えると、スマホ（幅360px）で
     収まらなくなります。
   ========================================================================== */

/* トップ Sec.3 お悩みの締め文。幅360pxで23pxはみ出していました。
   ページ本文に焼き込まれているためCSSで解除します。 */
@media (max-width: 599px) {
  .trainee-sec3-concerns__closing .trainee-nowrap {
    white-space: normal;
  }
}

/* 訓練内容 A-2「訓練メニューの一例」の説明文。
   3カラムのカードなので器が常に狭く、幅900pxで55px、1024pxで15px
   はみ出していました。3カラムでいるあいだは解除します
   （幅1200px以上では器が広がるので、文節固定のまま残します）。 */
@media (max-width: 1199px) {
  .trainee-page-training-curriculum__example-card-desc .trainee-nowrap {
    white-space: normal;
  }
}


/* ==========================================================================
   ページF：会社概要（trainee-company-*）／2026-08-19 新規
   --------------------------------------------------------------------------
   2026-08-21：セクションの並びを変えました。
   　旧：事業所概要（白）→ アクセス（クリーム）→ 公開情報（白）
   　新：事業所の写真（白）→ アクセス（クリーム）→ 事業所概要（白）→ 公開情報（クリーム）

   　理由：初めて来た人は「事業所の概要」より先に「どんなところか」
   　「どこにあるか」を知りたいはず、という判断です。
   　背景色は、隣り合うセクションが同じ色にならないよう付け直しています。
   　（公開情報を白→クリームに変えたのはこのためです）

   事業所概要の表は <dl> で組んでいます。「項目名と値の組」を並べたもの
   なので、<table> よりこちらのほうが内容に合っています。
   スマホでは項目名を上、値を下に積み替えます。
   ========================================================================== */

/* ---- 事業所概要 ---- */
.trainee-company-info {
  background: var(--trainee-white);
  padding: 72px 24px 80px;
}
.trainee-company-info__inner {
  max-width: 820px;
  margin: 0 auto;
}
.trainee-company-info__title,
.trainee-company-access__title,
.trainee-company-docs__title,
.trainee-company-photos__title {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--trainee-text-dark);
  text-align: center;
  margin: 0 0 40px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.trainee-company-info__title::before,
.trainee-company-info__title::after,
.trainee-company-access__title::before,
.trainee-company-access__title::after,
.trainee-company-docs__title::before,
.trainee-company-docs__title::after,
.trainee-company-photos__title::before,
.trainee-company-photos__title::after {
  display: none !important;
}
.trainee-company-info__title-accent,
.trainee-company-access__title-accent,
.trainee-company-docs__title-accent,
.trainee-company-photos__title-accent {
  /* 2026-08-21 変更：緑 → 黒（本文と同じ色）
     このページの見出しは全部同じ黒で揃える方針にしたためです。
     ヒーローの「事業所概要」も黒なので、そこに合わせています。

     HTML側の <span> はそのまま残してあります。
     緑に戻したくなったら、この1行を
       color: var(--trainee-green-dark);
     に書き換えるだけで元どおりです。 */
  color: inherit;
}

.trainee-company-info__table {
  margin: 0;
  border-top: 1px solid var(--trainee-border-soft);
}
.trainee-company-info__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--trainee-border-soft);
}
.trainee-company-info__label {
  margin: 0;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--trainee-green-dark);
}
.trainee-company-info__value {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--trainee-text-dark);
}

/* ---- アクセス ---- */
.trainee-company-access {
  background: var(--trainee-cream);
  padding: 72px 24px 80px;
}
.trainee-company-access__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.trainee-company-access__body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}
.trainee-company-access__address {
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  color: var(--trainee-text-dark);
  margin: 0 0 16px !important;
}
.trainee-company-access__tel {
  margin: 0 0 6px !important;
}
.trainee-company-access__tel a {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--trainee-green-dark);
  text-decoration: none;
}
.trainee-company-access__hours {
  font-size: 13.5px;
  color: var(--trainee-text-sub);
  margin: 0 !important;
}
.trainee-company-access__link-wrap {
  margin: 20px 0 0 !important;
}
.trainee-company-access__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--trainee-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.trainee-company-access__map {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* 地図の縦横比を先に決めておくと、読み込み前後でページが飛びません */
  aspect-ratio: 4 / 3;
  background: var(--trainee-green-light);
}
.trainee-company-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- 公開情報 ---- */
.trainee-company-docs {
  /* 2026-08-21：並び替えで「事業所概要（白）」の直後に来たため、
     白→クリームに変更しました。同じ色が続くと境目が消えるためです。 */
  background: var(--trainee-cream);
  padding: 72px 24px 88px;
}
.trainee-company-docs__inner {
  max-width: 820px;
  margin: 0 auto;
}
.trainee-company-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--trainee-border-soft);
}
.trainee-company-docs__item {
  margin: 0;
  border-bottom: 1px solid var(--trainee-border-soft);
}
.trainee-company-docs__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}
.trainee-company-docs__link:hover {
  /* 2026-08-21：セクションの地色をクリームにしたので、
     ホバーの色をクリーム→白に入れ替えました（同色だと反応が見えないため） */
  background: var(--trainee-white);
}
.trainee-company-docs__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--trainee-text-dark);
  transition: color 0.2s ease;
}
.trainee-company-docs__link:hover .trainee-company-docs__label {
  color: var(--trainee-green-dark);
}
.trainee-company-docs__meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--trainee-text-sub);
}
.trainee-company-docs__ext {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.trainee-company-docs__arrow {
  font-size: 15px;
  color: var(--trainee-green-dark);
}
.trainee-company-docs__empty {
  text-align: center;
  font-size: 14.5px;
  color: var(--trainee-text-sub);
  padding: 32px 0 0;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   事業所の写真（trainee-company-photos）／2026-08-21 新規
   --------------------------------------------------------------------------
   写真そのものは固定ページ「事業所概要」の中の「ギャラリー」ブロックです。
   追加・削除・並べ替えは管理画面から行えます。ここにあるのは見た目だけです。

   見せ方は2つ用意していて、ギャラリーを囲んでいるグループブロックの
   「追加CSSクラス」を書き換えると切り替わります。
     trainee-company-photos--grid   … タイル状（全部が一目で見える）
     trainee-company-photos--slider … 横スワイプのスライダー
   ※ 「trainee-company-photos」そのものは残してください。

   ■ WordPress標準のギャラリーの作りを打ち消しています
     標準のギャラリーは figure を display:flex にして、幅を
     calc(33.33% - すき間) のように計算で決めています。
     こちらで並べ方を決めたいので、その計算だけ外しています。

   ■ セレクタの末尾に付いている :not(#individual-image) について
     2026-08-21 追記。写真が指定どおりの大きさにならず、
     3分の1くらいに縮んで表示される不具合がありました。

     原因は、WordPress本体側のギャラリーの指定が
       figure.wp-block-image:not(#individual-image)
     という書き方をしていたことです。
     CSSは「より細かく指定したほうが勝つ」という決まりで動きますが、
     :not( ) の中にIDを入れると、実際には何も除外していないのに
     「ID1つ分の細かさ」として数えられます。本体側はこれを使って、
     テーマ側の指定より強くしています。

     こちらも同じ書き方を足して、細かさを揃えています。
     !important を足しても直りますが、それをやると
     「あとから普通の指定で直せない」状態になるので採りませんでした。
     （この一文が付いている行は、消すと写真が縮みます）
   -------------------------------------------------------------------------- */
.trainee-company-photos {
  background: var(--trainee-white);
  padding: 64px 24px 72px;
}
/* 見出しは <div class="__head"> で包んでいます。
   包まずに <h2> を直接置くと、親テーマの見出し指定に負けて左にずれます。
   他のセクションの __inner と同じ考え方です。 */
.trainee-company-photos__head {
  max-width: 1000px;
  margin: 0 auto;
}
.trainee-company-photos__title {
  /* 見出しの基本スタイルは上の共通指定（company-info/access/docs）と同じです */
  margin-bottom: 32px !important;
}
.trainee-company-photos .wp-block-gallery {
  max-width: 1000px;
  margin: 0 auto !important;
}
/* 標準ギャラリーの幅計算・flex指定を解除（並べ方はこちらで決めます） */
.trainee-company-photos .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  display: block;
  margin: 0;
  max-width: none;
}
.trainee-company-photos .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
  border-radius: 14px;
}

/* ---- 見せ方1：タイル状（--grid） ---- */
.trainee-company-photos--grid .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.trainee-company-photos--grid .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: auto;
}
.trainee-company-photos--grid .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  /* 正方形に切り揃えます。写真の縦横がバラバラでも並びが乱れません */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---- 見せ方2：横スワイプのスライダー（--slider） ---- */
.trainee-company-photos--slider .wp-block-gallery.has-nested-images {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  /* 指を離したときに写真の切りのいい位置で止まります */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* 横スクロールバーは矢印とドットがあるので隠します */
  scrollbar-width: none;
  padding-bottom: 4px;
}
.trainee-company-photos--slider .wp-block-gallery.has-nested-images::-webkit-scrollbar {
  display: none;
}
.trainee-company-photos--slider .wp-block-gallery.has-nested-images:focus-visible {
  outline: 2px solid var(--trainee-green-dark);
  outline-offset: 4px;
  border-radius: 16px;
}
.trainee-company-photos--slider .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  /* 100%にせず少し狭くして、右側に次の写真の端を見せます。
     「まだ横に続く」ことが見ただけで分かるようにするためです */
  flex: 0 0 auto;
  width: min(78%, 620px);
  scroll-snap-align: center;
}
.trainee-company-photos--slider .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* ---- スライダーの操作部分（矢印とドット。JavaScriptで作っています） ---- */
.trainee-photos-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1000px;
  margin: 20px auto 0;
}
.trainee-photos-nav__arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--trainee-border-soft);
  border-radius: 50%;
  background: var(--trainee-white);
  color: var(--trainee-green-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.trainee-photos-nav__arrow:hover:not(:disabled) {
  background: var(--trainee-green-light);
}
.trainee-photos-nav__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.trainee-photos-nav__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* ボタン自体は24px確保しています。見た目の丸は小さくても、
   指やマウスで押しやすい大きさにするためです */
.trainee-photos-nav__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.trainee-photos-nav__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trainee-border-soft);
  transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.trainee-photos-nav__dot.is-active::before {
  width: 11px;
  height: 11px;
  background: var(--trainee-green-dark);
}

@media (max-width: 781px) {
  .trainee-company-photos {
    padding: 48px 16px 56px;
  }
  .trainee-company-photos__title {
    font-size: 22px;
    margin-bottom: 24px !important;
  }
  .trainee-company-photos--grid .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .trainee-company-photos--slider .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: min(86%, 480px);
  }
}

@media (max-width: 781px) {
  .trainee-company-info,
  .trainee-company-access,
  .trainee-company-docs {
    padding: 48px 20px 56px;
  }
  .trainee-company-info__title,
  .trainee-company-access__title,
  .trainee-company-docs__title {
    font-size: 22px;
    margin-bottom: 28px !important;
  }
  /* 項目名を上、値を下に積み替えます */
  .trainee-company-info__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 4px;
  }
  .trainee-company-info__label {
    font-size: 13px;
  }
  .trainee-company-info__value {
    font-size: 14.5px;
  }
  .trainee-company-access__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .trainee-company-access__map {
    aspect-ratio: 3 / 2;
  }
  .trainee-company-access__tel a {
    font-size: 23px;
  }
  /* 書類名が長いので、種類と容量は下の行へ */
  .trainee-company-docs__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 4px;
  }
  .trainee-company-docs__label {
    font-size: 14.5px;
  }
}


/* ==========================================================================
   ページD：Q&A（trainee-qa）／2026-08-19 新規
   --------------------------------------------------------------------------
   カテゴリ見出し＋開閉式のリストです。

   開閉は <details> / <summary> で作っているので、JavaScriptなしで動きます。
   閉じていても中身はHTMLに存在するため、検索にも拾われます。

   見た目は卒業生の声の個別ページのQ&Aと揃えています（罫線区切り、
   Q/Aは欧文の頭文字を色分け）。サイト内で同じ「問いと答え」の形は
   同じ見た目にする、という考え方です。
   ========================================================================== */
.trainee-qa {
  background: var(--trainee-white);
  padding: 72px 24px 96px;
}
.trainee-qa__inner {
  max-width: 820px;
  margin: 0 auto;
}

/* ---- カテゴリの見出し ---- */
.trainee-qa__group + .trainee-qa__group {
  margin-top: 64px;
}
.trainee-qa__group-title {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 21px;
  color: var(--trainee-text-dark);
  margin: 0 0 8px !important;
  padding: 0 0 14px !important;
  border: none !important;
  border-bottom: 2px solid var(--trainee-green-dark) !important;
  background: none !important;
}
.trainee-qa__group-title::before,
.trainee-qa__group-title::after {
  display: none !important;
}
.trainee-qa__group-en {
  display: block;
  font-family: var(--trainee-font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trainee-accent-warm);
  margin-bottom: 8px;
}

/* ---- 1問ずつ ---- */
.trainee-qa__item {
  border-bottom: 1px solid var(--trainee-border-soft);
}
.trainee-qa__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  /* ブラウザ標準の三角マーカーを消します（自前の＋−に置き換えるため） */
  list-style: none;
  transition: color 0.2s ease;
}
.trainee-qa__q::-webkit-details-marker {
  display: none;
}
.trainee-qa__q:hover {
  color: var(--trainee-green-dark);
}
.trainee-qa__q-mark {
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--trainee-font-en);
  font-weight: 400;
  font-size: 16px;
  color: var(--trainee-green-soft);
  line-height: inherit;
}
.trainee-qa__q-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 開閉の目印。閉じているとき＋、開いているとき− */
.trainee-qa__q-toggle {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 6px;
}
.trainee-qa__q-toggle::before,
.trainee-qa__q-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--trainee-green-dark);
  transform: translateY(-50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.trainee-qa__q-toggle::after {
  transform: translateY(-50%) rotate(90deg);
}
.trainee-qa__item[open] .trainee-qa__q-toggle::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* ---- 答え ---- */
.trainee-qa__a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 26px;
}
.trainee-qa__a-mark {
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--trainee-font-en);
  font-weight: 400;
  font-size: 16px;
  color: var(--trainee-accent-warm);
  line-height: 1.95;
}
.trainee-qa__a-text {
  flex: 1 1 auto;
  min-width: 0;
}
.trainee-qa__a-text p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--trainee-text-sub);
  margin: 0 0 12px;
}
.trainee-qa__a-text p:last-child {
  margin-bottom: 0;
}
.trainee-qa__a-link-wrap {
  margin-top: 14px !important;
}
.trainee-qa__a-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--trainee-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.trainee-qa__closing {
  margin: 56px 0 0 !important;
  padding-top: 28px;
  border-top: 1px solid var(--trainee-border-soft);
  text-align: center;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

@media (max-width: 781px) {
  .trainee-qa {
    padding: 48px 20px 64px;
  }
  .trainee-qa__group + .trainee-qa__group {
    margin-top: 44px;
  }
  .trainee-qa__group-title {
    font-size: 18.5px;
  }
  .trainee-qa__q {
    gap: 10px;
    padding: 18px 0;
    font-size: 15.5px;
  }
  .trainee-qa__q-mark,
  .trainee-qa__a-mark {
    width: 15px;
    font-size: 14px;
  }
  .trainee-qa__a {
    gap: 10px;
    padding-bottom: 22px;
  }
  .trainee-qa__a-text p {
    font-size: 14px;
  }
  .trainee-qa__closing {
    margin-top: 40px !important;
    font-size: 13.5px;
  }
}


/* ==========================================================================
   下層3ページの導線（trainee-page-nav）／2026-08-19 追加
   --------------------------------------------------------------------------
   「就労移行支援とは」「訓練内容」「定着支援」を、各ページのCTA直前に
   並べます。3つとも見せて、いま見ているページだけリンクにしません。
   全体像がわかるので、途中から入ってきた人も他に2ページあると気づけます。

   囲みは作らず、細い縦罫線で区切るだけにしています。ここは読み物ではなく
   案内なので、カードにすると本文と同じ重さで目に入ってしまうためです。

   背景を白にしているのは、上のセクションがページごとに違う色
   （クリーム／淡い緑／白）で、下のCTAが深緑だからです。白を挟むと
   どのページでもCTAとの境目がはっきりします。上が白のページ用に、
   上端の細い罫線も入れています。
   ========================================================================== */
.trainee-page-nav {
  background: var(--trainee-white);
  border-top: 1px solid var(--trainee-border-soft);
  padding: 64px 24px 72px;
}
.trainee-page-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.trainee-page-nav__en {
  font-family: var(--trainee-font-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--trainee-accent-warm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px !important;
}
.trainee-page-nav__title {
  font-family: var(--trainee-font-heading);
  font-weight: 900;
  font-size: 22px;
  color: var(--trainee-text-dark);
  margin: 0 0 36px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* Lightning親テーマのh2装飾を打ち消します */
.trainee-page-nav__title::before,
.trainee-page-nav__title::after {
  display: none !important;
}
.trainee-page-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.trainee-page-nav__item {
  box-sizing: border-box;
  padding: 4px 20px;
  border-left: 1px solid var(--trainee-border-soft);
  margin: 0;
}
.trainee-page-nav__item:first-child {
  border-left: none;
}
.trainee-page-nav__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.trainee-page-nav__num {
  display: block;
  font-family: var(--trainee-font-en);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--trainee-green-soft);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.trainee-page-nav__label {
  display: block;
  font-family: var(--trainee-font-heading);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--trainee-text-dark);
  transition: color 0.2s ease;
}
.trainee-page-nav__arrow {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--trainee-green-dark);
  transition: transform 0.2s ease;
}
.trainee-page-nav__link:hover .trainee-page-nav__label,
.trainee-page-nav__link:focus-visible .trainee-page-nav__label,
.trainee-page-nav__link:hover .trainee-page-nav__num {
  color: var(--trainee-green-dark);
}
.trainee-page-nav__link:hover .trainee-page-nav__arrow {
  transform: translateX(3px);
}

/* いま見ているページ。リンクにせず、現在地として示します */
.trainee-page-nav__item--current .trainee-page-nav__num,
.trainee-page-nav__item--current .trainee-page-nav__label {
  color: var(--trainee-green-dark);
}
.trainee-page-nav__here {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--trainee-white);
  background: var(--trainee-green-soft);
  border-radius: 999px;
  padding: 3px 12px;
}

@media (max-width: 781px) {
  .trainee-page-nav {
    padding: 48px 20px 52px;
  }
  .trainee-page-nav__title {
    font-size: 19px;
    margin-bottom: 24px !important;
  }
  /* 3列は入らないので縦に。区切りは横罫線に切り替えます */
  .trainee-page-nav__list {
    grid-template-columns: 1fr;
  }
  .trainee-page-nav__item {
    padding: 16px 0;
    border-left: none;
    border-top: 1px solid var(--trainee-border-soft);
  }
  .trainee-page-nav__item:first-child {
    border-top: none;
    padding-top: 0;
  }
  .trainee-page-nav__item:last-child {
    padding-bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   セクションのグループが入れ子になってしまったときの保険（2026-08-19）
   --------------------------------------------------------------------------
   ブロックエディタでパターンを挿入するとき、カーソルが既存のグループの
   中にあると、新しいグループがその中に入ってしまいます。
   実際に「就労移行支援とは」で、ページヒーローと導入リード文の
   グループが互いに1つずつ入れ子になり、
     ・ヒーローの中に白い帯（導入リード文の上下パディング104px）
     ・導入リード文の中にクリームの帯（ヒーローの上下パディング140px）
   が出ました。

   構造そのものはブロックエディタで直す必要がありますが、万一また
   入れ子になっても帯が二重に出ないよう、内側は背景も余白も描かない
   ようにしておきます。正しい構造では1つも該当しないので、
   通常表示にはまったく影響しません。

   .wp-block-group[class*="trainee-page-"] は「セクションの外枠」だけに
   当たります（__inner などはグループブロックではないため無関係）。
   -------------------------------------------------------------------------- */

.wp-block-group[class*="trainee-page-"] .wp-block-group[class*="trainee-page-"] {
  background: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ショートコード化したセクションもここに足しています。
   ブロックの入れ替え方によっては alignfull が付かないことがあり、
   そのときだけ帯が本文幅で止まってしまうためです。
   （すでに全幅の場所では計算結果が0になるので、二重にずれません） */
.trainee-page-hero.trainee-page-hero.trainee-page-hero,
.trainee-sec8-cta.trainee-sec8-cta.trainee-sec8-cta,
.trainee-page-training-day.trainee-page-training-day.trainee-page-training-day,
.trainee-page-training-support.trainee-page-training-support.trainee-page-training-support,
.trainee-page-support-pillars.trainee-page-support-pillars.trainee-page-support-pillars,
.trainee-page-support-effects.trainee-page-support-effects.trainee-page-support-effects,
.trainee-page-service-intro.trainee-page-service-intro.trainee-page-service-intro,
.trainee-page-service-flow.trainee-page-service-flow.trainee-page-service-flow {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  /* transform は使いません（スクロールアニメーションと衝突するため） */
}


/* --------------------------------------------------------------------------
   2. ページヘッダー（タイトル帯）
   --------------------------------------------------------------------------
   タイトル下の点線はトップページで廃止した装飾なので、ここでも外します。
   代わりに英語サブタイトルを置いて、トップページと同じ言語に揃えます。
   -------------------------------------------------------------------------- */

.trainee-page-hero {
  background: var(--trainee-cream);
  padding: 88px 24px 52px;
  border-bottom: 1px solid var(--trainee-border-soft);
}

/* 点線の下線は、上の基本ブロックから指定ごと削除しました。
   ここで !important で打ち消す必要はなくなっています。 */

.trainee-page-hero__title {
  font-family: var(--trainee-font-heading);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.04em;
}

/* 英語サブタイトル。文言はPHP側でURLのスラッグから決めています
   （ページIDで指定すると、本番に移したときIDが変わって壊れるため） */
.trainee-page-hero__en {
  font-family: var(--trainee-font-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--trainee-accent-warm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px !important;
}

/* パンくず */
.trainee-page-hero__breadcrumb {
  margin-top: 18px !important;
  font-size: 12.5px;
}
.trainee-page-hero__breadcrumb-dot {
  width: 5px;
  height: 5px;
  background: var(--trainee-green-soft);
}

@media (max-width: 781px) {
  .trainee-page-hero {
    padding: 56px 20px 36px;
  }
  .trainee-page-hero__en {
    font-size: 11px;
    margin-bottom: 10px !important;
  }
}


/* --------------------------------------------------------------------------
   2-b. ページヘッダー：卒業生の声 個別ページ専用
   --------------------------------------------------------------------------
   2026-08 の構造変更で、投稿タイトルはキャッチコピーになりました。
   それに合わせて h1 をキャッチコピーに変えています（記事ごとに変わるので
   SEOに効きます）。ただしキャッチコピーは40字前後になることがあり、
   他ページの見出しサイズ（最大40px）のままだと画面を埋めてしまうため、
   ここだけ一段小さくし、行長も制限しています。

   「卒業生の声」というセクション名は、h1の上に小さなラベルとして残します。
   これがないと、開いた人が何のページか分からなくなるためです。
   -------------------------------------------------------------------------- */

.trainee-page-hero__label {
  font-family: var(--trainee-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--trainee-text-sub);
  letter-spacing: 0.08em;
  margin: 0 0 14px !important;
}

.trainee-page-hero__title--voice {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.65;
  letter-spacing: 0.02em;
  /* 1行が長くなりすぎないように。日本語は全角基準なので em で効きます */
  max-width: 24em;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* トップ・一覧のカード見出しと同じく「」で囲みます。
   本人の言葉であることが、見出しの形だけで伝わります。 */
.trainee-page-hero__title--voice::before {
  content: "「";
}
.trainee-page-hero__title--voice::after {
  content: "」";
}

/* 長いキャッチコピーがパンくずを押し下げすぎないよう、間隔を詰めます */
.trainee-page-hero__inner--voice .trainee-page-hero__date {
  margin-top: 16px !important;
}

@media (max-width: 781px) {
  .trainee-page-hero__label {
    font-size: 12.5px;
    margin-bottom: 10px !important;
  }
  .trainee-page-hero__title--voice {
    font-size: 18.5px;
    line-height: 1.7;
  }
}


/* --------------------------------------------------------------------------
   3. セクション見出しの点線を廃止
   --------------------------------------------------------------------------
   トップページと同じく、キーワードの色替えだけ残して下線は外します。
   -------------------------------------------------------------------------- */

.trainee-page-service-conditions__title-accent,
.trainee-page-service-fee__title-accent,
.trainee-page-service-flow__title-accent,
.trainee-page-support-intro__heading-accent,
.trainee-page-support-pillars__title-accent,
.trainee-page-support-effects__title-accent,
.trainee-page-training-day__title-accent,
.trainee-page-training-curriculum__title-accent,
.trainee-page-training-support__title-accent {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}

/* 見出し下の余白をトップページと揃える */
.trainee-page-service-conditions__title,
.trainee-page-service-fee__title,
.trainee-page-service-flow__title,
.trainee-page-support-pillars__title,
.trainee-page-support-effects__title,
.trainee-page-training-day__title,
.trainee-page-training-curriculum__title,
.trainee-page-training-support__title {
  margin: 0 0 var(--trainee-heading-mb) !important;
}

/* ===================== Phase 4-A ここまで ===================== */


/* ==========================================================================
   ページG：医療機関・関係機関の皆様へ（/partners/）／2026-08-20 新規
   --------------------------------------------------------------------------
   ■ 利用者向けページと、あえて見た目を変えています
     読むのは相談支援専門員・医療機関のワーカーなど、「紹介するかどうか」を
     判断する立場の方です。気持ちに寄り添う見せ方より、情報を早く渡すことを
     優先しました。具体的には
       ・セクションの上下余白を利用者向け（120/128px）より狭い 76/84px に
       ・見出しは中央寄せをやめて左寄せ。目線が左端に固定されて読み進めやすい
       ・イラストなし。装飾は罫線と番号だけ
       ・文字サイズは本文15px。1画面に入る情報量を増やしています
     利用者向けページの数値をここに合わせないでください。逆も同じです。

   ■ クラスの付け方
     セクションの外枠はすべて .trainee-partners を共通で持ち、
     .trainee-partners--outline のような修飾クラスで背景だけを変えます。
     全幅の指定を1つのルールにまとめられるので、セクションが増えても
     CSSを足し忘れて「そこだけ帯が本文幅で止まる」事故が起きません。
   ========================================================================== */

/* --------------------------------------------------------------------------
   全幅（画面の端から端まで）
   --------------------------------------------------------------------------
   transform は使いません。スクロールで現れるアニメーションが
   .is-revealed { transform: none } を当てるため、打ち消されます
   （2026-08-19に3回続けて同じ失敗をしています）。
   クラスを3回重ねているのは、親テーマ側の指定に負けないためです。
   -------------------------------------------------------------------------- */
.trainee-partners.trainee-partners.trainee-partners,
.trainee-employment.trainee-employment.trainee-employment {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 入れ子になったときの保険。パターンの挿入位置しだいで
   グループが二重になると、帯が二重に出て余白が倍になります。
   正しい構造では1つも該当しないので、通常表示には影響しません。 */
.trainee-partners .trainee-partners,
.trainee-employment .trainee-employment {
  background: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   セクションの土台
   -------------------------------------------------------------------------- */
.trainee-partners,
.trainee-employment {
  background: var(--trainee-white);
  color: var(--trainee-text-dark);
  font-family: var(--trainee-font-body);
  padding: 76px 24px 84px;
}

.trainee-partners--outline,
.trainee-partners--flow {
  background: var(--trainee-gray-bg);
}

.trainee-partners--fit {
  background: var(--trainee-green-light);
}

.trainee-partners--contact {
  background: var(--trainee-cream);
}

/* リード文の直後は概要表が続くので、下の余白を少し詰めます */
.trainee-partners--lead {
  padding-bottom: 68px;
}

/* 「支援者向け資料」に1件も登録されていないとき、ショートコードは
   何も出しません。ただしブロックの外枠（グループ）は残るので、
   そのままだと中身のない帯が1本見えてしまいます。
   中身があるときだけ表示する、という書き方にしています。
   :has() に対応していない古いブラウザではこの指定ごと無効になり、
   これまでどおり空の帯が出るだけです（表示が壊れることはありません）。 */
.trainee-partners--docs:not(:has(.trainee-partners-docs__inner)) {
  display: none;
}

.trainee-partners-lead__inner,
.trainee-partners-outline__inner,
.trainee-partners-features__inner,
.trainee-partners-fit__inner,
.trainee-partners-report__inner,
.trainee-partners-flow__inner,
.trainee-partners-docs__inner,
.trainee-partners-contact__inner {
  max-width: 1040px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   親テーマ（Lightning）の見出しスタイルを打ち消す
   --------------------------------------------------------------------------
   Lightningは h2 に上下の罫線と15pxの余白を、h3 に下罫線と短いアンダーライン
   （::after）を自動で付けます。セレクタが「h2」「h3」だけなので、
   クラスを当てただけでは padding と border が残ったままになります。
   2026-08-20に、まさにこれで見出しの上下に見覚えのない線が出ました。

   :where() を使っているのは、詳細度を上げないためです。この打ち消しは
   0-1-0（クラス1つ分）にとどまるので、下に書いた各パーツの指定
   （例：連絡先の見出しに引いている下罫線）が、あとから普通に勝てます。
   !important を使わずに済むぶん、あとから直すときに悩まずにすみます。

   【注意】新しくセクションを足すときは、この打ち消しの「下」に書いてください。
   上に書くと、ここで消されます。
   -------------------------------------------------------------------------- */
.trainee-partners :where(h2, h3, h4),
.trainee-employment :where(h2, h3, h4) {
  padding: 0;
  border: none;
  background: none;
}

.trainee-partners :where(h2, h3, h4)::before,
.trainee-partners :where(h2, h3, h4)::after,
.trainee-employment :where(h2, h3, h4)::before,
.trainee-employment :where(h2, h3, h4)::after {
  content: none;
  display: none;
}

/* リストの項目にも、親テーマが上下8pxの余白を付けています。
   ふつうの縦並びなら気になりませんが、グリッドで並べると
   この余白ぶんだけマス目が縮み、すき間が縦18px・横2pxという
   ちぐはぐな見た目になります（2026-08-20に報告書の一覧で発生）。
   すき間はこちらのCSSだけで決めたいので、最初に0に戻します。 */
.trainee-partners :where(ul, ol, li),
.trainee-employment :where(ul, ol, li) {
  margin: 0;
}

/* --------------------------------------------------------------------------
   セクション見出し（小ラベル＋h2）
   --------------------------------------------------------------------------
   利用者向けページの見出しは「利用<span>料金</span>」のように中央寄せ＋
   2色でしたが、ここでは左寄せの1色にしています。項目が多いページでは、
   見出しが目立ちすぎると本文が読み飛ばされます。
   -------------------------------------------------------------------------- */
.trainee-biz__head {
  margin: 0 0 32px;
}

.trainee-biz__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--trainee-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--trainee-green-dark);
}

.trainee-biz__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--trainee-green-dark);
}

.trainee-biz__title {
  margin: 0 !important;
  font-family: var(--trainee-font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--trainee-text-dark);
  text-align: left;
}

/* --------------------------------------------------------------------------
   P-1 リード文＋お電話
   -------------------------------------------------------------------------- */
.trainee-partners-lead__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 2;
  color: var(--trainee-text-dark);
}

/* 在宅利用に自治体の承認が要る、という注意書き。
   2026-08-20 代表理事より：目立たせない、に変更。
     前は本文と同じ大きさで左に線を引いていましたが、条件を強く見せると
     「うちの担当者は対象外かも」と受け取られて、相談そのものが
     来なくなります。まず相談してもらうことが目的なので、
     注釈の大きさにとどめました。伝えるべき内容ではあるので消しません。
   ※印はPHP側の文章に入れています。 */
.trainee-partners-lead__caution {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--trainee-text-light);
}

/* 電話の箱。支援者の方がまず知りたいのは「空きがあるか」で、
   その答えは電話でしか出せません。だから上のほうに置いています。 */
.trainee-partners-lead__phone {
  border: 1px solid var(--trainee-border);
  border-left: 4px solid var(--trainee-green-dark);
  border-radius: var(--trainee-radius-sm);
  background: var(--trainee-cream);
  padding: 24px 28px;
}

.trainee-partners-lead__phone-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--trainee-text-sub);
}

.trainee-partners-lead__phone-number {
  margin: 0 0 6px;
  font-family: var(--trainee-font-en);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.trainee-partners-lead__phone-number a {
  color: var(--trainee-green-dark);
  text-decoration: none;
}

.trainee-partners-lead__phone-number a:hover {
  color: var(--trainee-green-darker);
}

.trainee-partners-lead__phone-note {
  margin: 0 0 2px;
  font-size: 14px;
  color: var(--trainee-text-dark);
}

.trainee-partners-lead__phone-hours {
  margin: 0;
  font-size: 13px;
  color: var(--trainee-text-light);
}

/* --------------------------------------------------------------------------
   P-2 事業所概要（定義リストの表）
   --------------------------------------------------------------------------
   table ではなく dl にしています。スマホで1列に積み替えるときに、
   table より素直に崩せるためです。
   -------------------------------------------------------------------------- */
.trainee-partners-outline__table {
  margin: 0;
  border-top: 1px solid var(--trainee-border);
}

.trainee-partners-outline__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 24px;
  border-bottom: 1px solid var(--trainee-border);
  padding: 16px 4px;
}

.trainee-partners-outline__label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--trainee-text-sub);
}

.trainee-partners-outline__value {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--trainee-text-dark);
}

.trainee-partners-outline__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--trainee-text-light);
}

@media (max-width: 599px) {
  .trainee-partners-outline__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 2px;
  }
  .trainee-partners-outline__label {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   P-3 支援の特徴（2×2）
   -------------------------------------------------------------------------- */
.trainee-partners-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}

.trainee-partners-features__item {
  border-top: 2px solid var(--trainee-green-mid);
  padding-top: 18px;
}

.trainee-partners-features__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--trainee-font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--trainee-green-dark);
}

.trainee-partners-features__item-title {
  margin: 0 0 8px;
  font-family: var(--trainee-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-partners-features__item-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

@media (max-width: 767px) {
  .trainee-partners-features__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   P-4 ご紹介の目安（左右の対比）
   --------------------------------------------------------------------------
   「向いている方」と「そうでない場合」を並べています。
   合わないケースを隠さないほうが、結果として相談してもらえます。
   -------------------------------------------------------------------------- */
.trainee-partners-fit__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}

.trainee-partners-fit__col {
  background: var(--trainee-white);
  border-radius: var(--trainee-radius-sm);
  padding: 26px 28px;
}

.trainee-partners-fit__col--yes {
  border-top: 4px solid var(--trainee-green-dark);
}

.trainee-partners-fit__col--no {
  border-top: 4px solid var(--trainee-border);
}

.trainee-partners-fit__col-title {
  margin: 0 0 16px;
  font-family: var(--trainee-font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-partners-fit__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trainee-partners-fit__item {
  position: relative;
  margin: 0 0 12px;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--trainee-text-dark);
}

.trainee-partners-fit__item:last-child {
  margin-bottom: 0;
}

/* 印は ::before で描いています。文字として置くと、スクリーンリーダーが
   「チェック」と読み上げてしまい、項目の頭に毎回ノイズが入ります。 */
.trainee-partners-fit__col--yes .trainee-partners-fit__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--trainee-green-dark);
  border-bottom: 2px solid var(--trainee-green-dark);
  transform: rotate(-45deg);
}

.trainee-partners-fit__col--no .trainee-partners-fit__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 12px;
  height: 2px;
  background: var(--trainee-text-light);
}

.trainee-partners-fit__note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

@media (max-width: 767px) {
  .trainee-partners-fit__cols {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   P-5 月1回の状況報告書
   -------------------------------------------------------------------------- */
.trainee-partners-report__text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 2;
  color: var(--trainee-text-dark);
}

.trainee-partners-report__sub {
  margin: 0 0 16px;
  font-family: var(--trainee-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--trainee-text-dark);
}

/* 【2026-08-20 デザイン変更】
   旧：うすいベージュの地色の上に白いマスを2pxのすき間で並べ、
       そのすき間を仕切り線に見せる作り。
   これをやめました。理由は2つあります。
     1. 実際に、すき間が縦18px・横2pxとちぐはぐになりました。
        原因は親テーマがリスト項目に付けている上下8pxの余白です
        （上の打ち消しで直りますが、そもそも気づきにくい作りでした）。
     2. すき間で線を見せる作りは、余白が1pxでも変わると崩れます。
        あとから項目を足したときに、また同じことが起きます。
   新：地色も枠も使わず、項目の左に短い線を引くだけにしました。
       すき間はgapで決まるので、ずれようがありません。 */
.trainee-partners-report__list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 36px;
}

.trainee-partners-report__item {
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--trainee-green-mid);
}

.trainee-partners-report__item-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--trainee-green-dark);
}

.trainee-partners-report__item-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--trainee-text-sub);
}

.trainee-partners-report__sample {
  margin-top: 4px;
}

.trainee-partners-report__sample-note {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--trainee-text-sub);
}

@media (max-width: 599px) {
  .trainee-partners-report__list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* --------------------------------------------------------------------------
   PDFなどへのリンク（P-5とP-7で共用）
   -------------------------------------------------------------------------- */
.trainee-partners-doc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-sm);
  background: var(--trainee-white);
  color: var(--trainee-text-dark);
  text-decoration: none;
  transition: border-color var(--trainee-ease), box-shadow var(--trainee-ease);
}

.trainee-partners-doc-link:hover {
  border-color: var(--trainee-green-dark);
  box-shadow: var(--trainee-shadow);
  color: var(--trainee-text-dark);
}

.trainee-partners-doc-link__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

/* 押す前に「PDFが別タブで開く」「どのくらいの大きさか」が分かるように、
   種類と容量をリンクの中に添えています。 */
.trainee-partners-doc-link__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--trainee-text-light);
}

.trainee-partners-doc-link__ext {
  padding: 2px 8px;
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-green-light);
  color: var(--trainee-green-dark);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.trainee-partners-doc-link__arrow {
  color: var(--trainee-green-dark);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   P-6 ご紹介からご利用開始まで（縦の番号リスト）
   --------------------------------------------------------------------------
   利用者向けページ（C-3）は横一列ですが、ここは1ステップの説明が長いので
   縦にしています。横に5列並べると1列が細くなりすぎて読めません。
   -------------------------------------------------------------------------- */
.trainee-partners-flow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.trainee-partners-flow__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 20px;
  padding: 0 0 28px;
  position: relative;
}

.trainee-partners-flow__step:last-child {
  padding-bottom: 0;
}

/* 番号どうしを縦線でつなぎます。最後の項目には線を引きません。 */
.trainee-partners-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: var(--trainee-green-mid);
}

.trainee-partners-flow__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-family: var(--trainee-font-en);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.trainee-partners-flow__step-body {
  padding-top: 8px;
}

.trainee-partners-flow__step-title {
  margin: 0 0 6px;
  font-family: var(--trainee-font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-partners-flow__step-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

/* --------------------------------------------------------------------------
   P-7 支援者向け資料
   -------------------------------------------------------------------------- */
.trainee-partners-docs__text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

.trainee-partners-docs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 767px) {
  .trainee-partners-docs__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   P-8 ご相談・ご紹介の連絡先
   --------------------------------------------------------------------------
   支援機関の方とご本人・ご家族で窓口を分けています。
   紹介の相談は電話のほうが早く、ご本人からの相談はフォームのほうが
   声をかけやすい、という違いによるものです。
   -------------------------------------------------------------------------- */
.trainee-partners-contact__cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}

.trainee-partners-contact__col {
  background: var(--trainee-white);
  border-radius: var(--trainee-radius-sm);
  border: 1px solid var(--trainee-border);
  padding: 26px 28px;
}

.trainee-partners-contact__col-title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--trainee-border-soft);
  font-family: var(--trainee-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-partners-contact__list {
  margin: 0;
}

.trainee-partners-contact__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 16px;
  margin-bottom: 14px;
}

.trainee-partners-contact__row:last-child {
  margin-bottom: 0;
}

.trainee-partners-contact__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

.trainee-partners-contact__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--trainee-text-dark);
  word-break: break-all;
}

.trainee-partners-contact__value a {
  color: var(--trainee-green-dark);
  text-decoration: none;
}

.trainee-partners-contact__value a:hover {
  color: var(--trainee-green-darker);
  text-decoration: underline;
}

.trainee-partners-contact__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--trainee-text-light);
  word-break: normal;
}

.trainee-partners-contact__text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

.trainee-partners-contact__btn-wrap {
  margin: 0;
}

.trainee-partners-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-green-dark);
  color: var(--trainee-white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--trainee-ease);
}

.trainee-partners-contact__btn:hover {
  background: var(--trainee-green-darker);
  color: var(--trainee-white);
}

@media (max-width: 767px) {
  .trainee-partners-contact__cols {
    grid-template-columns: 1fr;
  }
  .trainee-partners-contact__row {
    grid-template-columns: 64px 1fr;
  }
}

/* --------------------------------------------------------------------------
   スマホ（767px以下）共通の詰め
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .trainee-partners,
  .trainee-employment {
    padding: 48px 20px 52px;
  }
  .trainee-partners--lead {
    padding-bottom: 44px;
  }
  .trainee-biz__head {
    margin-bottom: 24px;
  }
  .trainee-partners-lead__text {
    font-size: 15px;
    line-height: 1.95;
  }
  .trainee-partners-lead__phone {
    padding: 20px 20px;
  }
  .trainee-partners-fit__col,
  .trainee-partners-contact__col {
    padding: 22px 20px;
  }
  /* リンクの中の「種類・容量」は、幅が足りないと折り返して
     2行になります。縦に積んで、文字が潰れないようにします。 */
  .trainee-partners-doc-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ===================== ページG ここまで ===================== */


/* ==========================================================================
   ページH：企業の皆様へ（/employment/）／2026-08-20 新規
   --------------------------------------------------------------------------
   支援機関ページ（/partners/）と土台を共有しています。全幅・背景・余白・
   親テーマの見出し打ち消しは、上の「ページG」の各ルールに
   .trainee-employment を並べる形で当ててあります。
   ここに書くのは、このページにしか出てこないパーツだけです。

   読む人は企業の採用担当者で、比較検討の途中で何十社も見ています。
   代表理事からも「情報を詰め込みたくない」とご指定があったので、
   セクションは5つに絞り、1セクションの縦の長さも抑えています。
   ========================================================================== */

/* 背景の割り当て。並びは
     E-1 リード（白）→ E-2 できること（グレー）→ E-3 在宅の提案（白）→ E-4 連絡先（グレー）
   で、白とグレーが交互になるようにしています。
   2026-08-20にE-2とE-3を入れ替えたので、背景も付け替えました。 */
.trainee-employment--support,
.trainee-employment--contact {
  background: var(--trainee-gray-bg);
}

.trainee-employment-lead__inner,
.trainee-employment-remote__inner,
.trainee-employment-support__inner,
.trainee-employment-contact__inner {
  max-width: 1040px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   E-1 リード文＋お電話
   -------------------------------------------------------------------------- */
.trainee-employment-lead__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 2;
  color: var(--trainee-text-dark);
}

.trainee-employment-lead__text:last-of-type {
  margin-bottom: 32px;
}

.trainee-employment-lead__phone {
  border: 1px solid var(--trainee-border);
  border-left: 4px solid var(--trainee-green-dark);
  border-radius: var(--trainee-radius-sm);
  background: var(--trainee-cream);
  padding: 22px 28px;
}

.trainee-employment-lead__phone-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--trainee-text-sub);
}

.trainee-employment-lead__phone-number {
  margin: 0 0 4px;
  font-family: var(--trainee-font-en);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.trainee-employment-lead__phone-number a {
  color: var(--trainee-green-dark);
  text-decoration: none;
}

.trainee-employment-lead__phone-number a:hover {
  color: var(--trainee-green-darker);
}

.trainee-employment-lead__phone-hours {
  margin: 0;
  font-size: 13px;
  color: var(--trainee-text-light);
}

/* --------------------------------------------------------------------------
   E-2 在宅勤務という新たな選択肢（左右の対比）
   --------------------------------------------------------------------------
   いただいたチラシと同じ「お困りごと → 在宅勤務なら」の並びです。
   矢印は真ん中の細い列に置いて、左右の行が必ず同じ高さで
   向かい合うようにしています（gridなので、文章の長さが変わっても
   ずれません）。
   -------------------------------------------------------------------------- */
.trainee-employment-remote__lead {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.95;
  font-weight: 700;
  color: var(--trainee-text-dark);
}

.trainee-employment-remote__pairs {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* 対比の1行。以前はグレーのセクションに白い箱を置いて輪郭を出していましたが、
   セクションが白背景に変わったので、細い枠線で輪郭を描くようにしました。
   右半分だけ淡い緑にしてあるので、左右のどちらが「在宅勤務なら」かは
   色でも分かります。 */
.trainee-employment-remote__pair {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 0;
  background: var(--trainee-white);
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-sm);
  overflow: hidden;
}

.trainee-employment-remote__problem,
.trainee-employment-remote__answer {
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.75;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.trainee-employment-remote__problem {
  color: var(--trainee-text-sub);
}

.trainee-employment-remote__answer {
  background: var(--trainee-green-light);
  color: var(--trainee-text-dark);
  font-weight: 700;
}

.trainee-employment-remote__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: var(--trainee-green-dark);
  font-size: 16px;
}

.trainee-employment-remote__note {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

.trainee-employment-remote__docs {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

@media (max-width: 767px) {
  /* スマホでは横に並べません。1列44pxの矢印を挟むと、
     左右がそれぞれ130pxほどになり、文章が3〜4行に折り返して読めません。
     上下の並びに変えて、矢印は下向きにします。 */
  .trainee-employment-remote__pair {
    grid-template-columns: 1fr;
  }
  .trainee-employment-remote__problem,
  .trainee-employment-remote__answer {
    padding: 14px 18px;
  }
  /* 横向きの「→」を、下向きの「▼」に差し替えます。
     文字そのものを入れ替えたいので、元の文字を font-size: 0 で消して、
     ::before に別の文字を出しています（HTMLは1つのままで済みます）。 */
  .trainee-employment-remote__arrow {
    justify-content: center;
    padding: 4px 0;
    font-size: 0;
  }
  .trainee-employment-remote__arrow::before {
    content: "▼";
    font-size: 11px;
  }
  .trainee-employment-remote__docs {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   E-3 TRAINEEができること（横3つ）＋ 実習のお願い
   --------------------------------------------------------------------------
   2026-08-20 代表理事より4つ→3つに。2列だと3つ目だけが下の段に
   ぽつんと残るので、横3列に変えました。
   900px未満では1列にします。3列のままだと1列が250pxを切って、
   説明文が5行以上に折り返してしまうためです。
   -------------------------------------------------------------------------- */
.trainee-employment-support__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  margin-bottom: 40px;
}

.trainee-employment-support__item {
  border-top: 2px solid var(--trainee-green-mid);
  padding-top: 18px;
}

.trainee-employment-support__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--trainee-font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--trainee-green-dark);
}

.trainee-employment-support__item-title {
  margin: 0 0 8px;
  font-family: var(--trainee-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--trainee-text-dark);
}

.trainee-employment-support__item-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-sub);
}

/* 実習の受け入れのお願い。
   このページで唯一、こちらから頼んでいる箇所なので、
   1つだけ色のついた箱にして、他と区別しています。 */
.trainee-employment-support__ask {
  background: var(--trainee-cream);
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-sm);
  padding: 26px 30px;
}

.trainee-employment-support__ask-title {
  margin: 0 0 8px;
  font-family: var(--trainee-font-heading);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--trainee-green-dark);
}

.trainee-employment-support__ask-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--trainee-text-dark);
}

@media (max-width: 899px) {
  .trainee-employment-support__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .trainee-employment-support__ask {
    padding: 22px 20px;
  }
}

/* --------------------------------------------------------------------------
   E-4 お問い合わせ
   --------------------------------------------------------------------------
   中身は支援機関ページと同じパーツ（.trainee-partners-contact__*）を
   そのまま使っています。同じ見た目のものを2つ作ると、片方だけ直して
   ちぐはぐになるためです。
   -------------------------------------------------------------------------- */
.trainee-employment-contact__inner .trainee-partners-contact__col {
  background: var(--trainee-white);
}

/* ===================== ページH ここまで ===================== */


/* ==========================================================================
   親テーマのリンク色を上書き／2026-08-20
   --------------------------------------------------------------------------
   ■ 何が起きていたか
     Lightning（VK）は、リンクのホバー色を CSS変数
     --vk-color-text-link-hover で持っていて、初期値が #1e73be という青です。
     この変数は「a:hover」という、クラスの付かない一番広い指定で使われるため、
     こちらで hover 色を書いていないリンクは、すべて青くなっていました。

   ■ どう直したか
     個々のリンクに hover 色を足していく方法もありますが、書き漏らしが
     出るたびに青が復活します。変数そのものをブランドの緑に置き換えました。
     これで、今あるリンクも、これから足すリンクも、まとめて緑になります。

   ■ html:root と書いている理由
     親テーマの定義も :root なので、詳細度が同じだと
     「あとから読み込まれたほう」が勝ちます。子テーマのCSSは
     親テーマのtheme-json用CSSより先に読み込まれるため、
     :root のままでは負けます。html を足して詳細度を1つ上げています。
   ========================================================================== */

html:root {
  /* ホバー時のリンク色。下線の色も同じ変数で描かれます */
  --vk-color-text-link-hover: var(--trainee-green-darker);
}

/* 濃い緑の帯・バーの上に白文字で置いているリンクは、
   ホバーで緑になると背景に溶けて読めなくなります。
   白のまま据え置きます（下線などの反応は各パーツ側で付けています）。 */
.trainee-sec8-cta__phone-number:hover,
.trainee-sec8-cta__phone-number:focus,
.trainee-sp-cta__btn:hover,
.trainee-sp-cta__btn:focus {
  color: var(--trainee-white);
}


/* ==========================================================================
   スマホ：フッターの「お問い合わせ」ボタンを隠す／2026-08-20
   --------------------------------------------------------------------------
   スマホでは画面下に追従バー（見学・相談申し込み）が出ているので、
   フッターにも同じ用件のボタンがあると、同じものが2つ並んで見えます。

   【重要】追従バーを出していないページ（支援機関・企業向け）では、
   フッターのボタンだけが問い合わせへの導線になります。そこまで
   消してしまわないよう、body に付くクラスで場合分けしています。
     trainee-no-float-cta … 追従バーを出していないページ
   クラスは functions.php の trainee_child_body_class() で付けています。
   ========================================================================== */

@media (max-width: 781px) {
  /* 【2026-08-20 修正】詳細度が足りず、隠れていませんでした。
     このページの少し上に .trainee-footer .trainee-footer-brand
     .trainee-footer-cta-btn { display: flex } という指定があり、
     クラス3つぶんの強さで勝っていたためです。
     こちらもクラス4つぶんにして、確実に隠れるようにしました。
     （!important を足すより、勝てるだけの詳細度を持たせるほうが、
       あとから別の指定を足したくなったときに詰みません） */
  body:not(.trainee-no-float-cta) .trainee-footer .trainee-footer-brand .trainee-footer-cta-btn {
    display: none;
  }
}


/* ==========================================================================
   ブログ個別ページ：親テーマの「前後の記事」ナビを隠す／2026-08-20
   --------------------------------------------------------------------------
   Lightningは記事の下に、前後の記事へのカード（.vk_posts.next-prev）を
   自動で出します。ただこのサイトでは、その下に自前の「ほかの記事をみる」を
   置いているので、似たものが2つ続いてしまいます。
   しかもLightning側のカードは、このサイトのデザインを当てていないため、
   文字のない空の箱のように見えていました。

   PHP側で出力ごと止める方法もありますが、Lightning本体のどのフックで
   出しているかはバージョンによって変わります。バージョンアップのたびに
   効かなくなるより、CSSで隠すほうが確実で、あとから戻すのも簡単です。
   ========================================================================== */

.vk_posts.next-prev {
  display: none;
}


/* ==========================================================================
   スマホメニュー：対象がちがう2ページへのリンク／2026-08-20
   --------------------------------------------------------------------------
   「企業の皆様へ」「医療機関・関係機関の皆様へ」は、利用を考えている
   ご本人・ご家族には関係のないページです。上のメニューと同じ大きさで
   並べると、探していない人の目にも同じ重さで飛び込んできます。
   探している人だけが見つければよいので、文字を小さく、色も落として、
   区切り線の下に控えめに置いています。
   ========================================================================== */

.trainee-header__drawer-links {
  margin: 4px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--trainee-border-soft);
}

.trainee-header__drawer-links li + li {
  margin-top: 10px;
}

.trainee-header__drawer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--trainee-text-sub);
  text-decoration: none;
}

.trainee-header__drawer-links a::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--trainee-green-soft);
  flex-shrink: 0;
}

.trainee-header__drawer-links a:hover,
.trainee-header__drawer-links a:focus {
  color: var(--trainee-green-dark);
}


/* ==========================================================================
   ブログ一覧・ブログ個別ページの2点修正／2026-08-20
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① ヒーローの上がヘッダーに隠れる → PHP側で直しました
   --------------------------------------------------------------------------
   ヘッダーは position: fixed で画面の上に浮いていて、本文は .site-body の
   padding-top でそのぶん下にずらして避けています。ブログのヒーローだけが
   この .site-body の外に出ていたため、余白を受け取れずヘッダーに
   潜り込んでいました。

   ここにCSSで同じだけの余白を足すこともできますが、その余白は画面幅で
   変わるうえ（実測でスマホ28px／中間35px／PC56px）、Lightning側が値を
   変えたときにこちらだけ取り残されます。
   なので、ヒーローの差し込み位置そのものを .site-body の内側に移しました。
   functions.php の trainee_child_blog_transform() を見てください。

   あわせて、オレンジの英字ラベル「Blog」もPHP側で足しています。
   ほかの下層ページには全部あるのに、ブログだけ抜けていました。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ② 一覧のカードが左に寄って、右に余白ができる
   --------------------------------------------------------------------------
   Lightningはカードに vk_post-col-xs-12 のような独自の横幅クラスを
   付けています。こちらはカードをCSSグリッドで並べているので、
   その横幅指定が残っていると、マス目より少し狭い幅で左に寄ってしまいます。
   （スマホで実測したところ、マス目346pxに対してカードは316pxでした）

   幅の決定はグリッドに任せます。
   -------------------------------------------------------------------------- */

body.blog .vk_posts > .vk_post {
  width: 100%;
  max-width: none;
}


/* ==========================================================================
   お問い合わせフォーム：選択肢の補足文／2026-08-20
   --------------------------------------------------------------------------
   「関係機関」がどこまでを指すのかは、業界の外にいる方には伝わりません。
   ただ、選択肢の文字そのものを長くすると、スマホで2行に折り返して
   選びにくくなります。選択肢は短いままにして、補足を下に小さく置きます。
   ========================================================================== */

.trainee-contact-form .trainee-form-note {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--trainee-text-light);
}


/* ==========================================================================
   404ページ／2026-08-20 新規
   --------------------------------------------------------------------------
   ここに来た人は、探しものが見つからなくて困っています。
   凝った見せ方は要りません。何が起きたかを一行で伝えて、
   行き先を並べるだけにしています。
   ========================================================================== */

.trainee-404 {
  background: var(--trainee-white);
  padding: 72px 24px 96px;
}

.trainee-404__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.trainee-404__lead {
  margin: 0 0 12px;
  font-family: var(--trainee-font-heading);
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--trainee-text-dark);
}

.trainee-404__text {
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--trainee-text-sub);
}

/* 行き先のリンク。ボタンのように見せると押す前に身構えられるので、
   下線のない文字のまま、中央にゆるく並べています。 */
.trainee-404__links {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 10px;
}

.trainee-404__links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--trainee-border);
  border-radius: var(--trainee-radius-pill);
  background: var(--trainee-white);
  font-size: 14px;
  font-weight: 700;
  color: var(--trainee-text-dark);
  text-decoration: none;
  transition: border-color var(--trainee-ease), color var(--trainee-ease);
}

.trainee-404__links a:hover,
.trainee-404__links a:focus {
  border-color: var(--trainee-green-dark);
  color: var(--trainee-green-dark);
}

.trainee-404__phone {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--trainee-border-soft);
}

.trainee-404__phone a {
  display: inline-block;
  font-family: var(--trainee-font-en);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--trainee-green-dark);
  text-decoration: none;
}

.trainee-404__hours {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--trainee-text-light);
}

@media (max-width: 767px) {
  .trainee-404 {
    padding: 48px 20px 64px;
  }
  .trainee-404__links {
    gap: 10px 8px;
  }
  .trainee-404__links a {
    padding: 9px 16px;
    font-size: 13px;
  }
}


/* ==========================================================================
   ヘッダー上部の帯：対象のちがう方への入口／2026-08-20 新規
   --------------------------------------------------------------------------
   「企業の皆様へ」「医療機関・関係機関の皆様へ」を、メインのメニューとは
   別の層に置きます。

   ■ 目立たせません
     ここを探している人は、目的を持って探しています。逆に、利用を考えている
     ご本人・ご家族には関係のないページなので、同じ強さで見せると
     選択肢が増えただけになります。文字は12px、色は落として、
     背景も本体とわずかに変えるだけにしています。

   ■ PCだけです
     992px以上でのみ表示します。スマホではハンバーガーメニューの下部に
     同じ2つを置いてあるので、二重になりません。

   【高さを変えるときの注意】
     この帯の高さは :root の --trainee-header-h（124px＝帯34px＋本体90px）に
     含まれています。片方だけ変えると、ヒーローの高さがずれます。
   ========================================================================== */

.trainee-header__utility {
  display: none;
  height: 34px;
  border-bottom: 1px solid var(--trainee-border-soft);
  background: var(--trainee-cream-deep);
}

.trainee-header__utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 100%;
  /* 【2026-08-20 修正】ヘッダー本体は max-width を外して「画面の端から
     一定の距離」に置く作りです。帯だけ1200pxの中央寄せのままだったので、
     右端の位置がずれていました。本体と同じ指定に合わせます。 */
  max-width: none;
  padding-left: clamp(20px, 2.5vw, 40px);
  padding-right: clamp(20px, 2.5vw, 40px);
}

.trainee-header__utility a {
  position: relative;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--trainee-text-sub);
  text-decoration: none;
  transition: color var(--trainee-ease);
}

/* 2つのあいだの仕切り。要素を足さずに描いています */
.trainee-header__utility a + a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: var(--trainee-border);
}

.trainee-header__utility a:hover,
.trainee-header__utility a:focus {
  color: var(--trainee-green-dark);
}

/* スクロールしてヘッダーが白くなったときは、帯も白に寄せます */
.trainee-header--scrolled .trainee-header__utility {
  background: var(--trainee-gray-bg);
}

@media (min-width: 992px) {
  .trainee-header__utility {
    display: block;
  }
}

/* 帯を足したぶん、下層ページのヒーローも下げます。
   PCでは、これまでタイトルがヘッダーの下端から81px空いていました。
   帯（34px）を足すと47pxまで詰まるので、同じ余白に戻します。
   帯を出していない991px以下は、これまでどおりです。 */
@media (min-width: 992px) {
  .trainee-page-hero {
    padding-top: 122px;  /* 88px（これまで）＋ 34px（帯の高さ） */
  }
}


/* ==========================================================================
   CTA：住所の一行／2026-08-20 追加
   --------------------------------------------------------------------------
   このサイトからアクセス（地図）ページを見に行く人がほとんどいないため、
   相談する一歩手前で「どこにある事業所なのか」が分かるようにしています。
   主役は申し込みボタンと電話番号なので、住所はそれより一段落とします。
   ========================================================================== */

/* 【2026-08-20 修正】置き場所を直しました。
   PCのCTAは「見出し／ボタン｜または｜電話」という3列のグリッドです。
   そこに住所をそのまま足すと、次の行の左端のマスに入ってしまい、
   ひとりだけ左に寄って浮いていました。全部の列にまたがる形にして中央へ。
   スマホでも受付時間のすぐ下にくっついて読みにくかったので、
   細い区切り線を1本引いて、別のまとまりだと分かるようにしています。 */
.trainee-sec8-cta__address {
  max-width: 520px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 900px) {
  .trainee-sec8-cta__address {
    grid-column: 1 / -1;   /* 3列ぶんをまたいで1行使います */
    justify-self: center;
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .trainee-sec8-cta__address {
    margin-top: 26px;
    padding-top: 18px;
    font-size: 11.5px;
  }
}


/* ==========================================================================
   トップページ Sec.7：Q&Aページへの入口／2026-08-20 追加
   --------------------------------------------------------------------------
   トップに載せている質問は3つだけです。ここで終わりだと思われないよう、
   Q&Aページ全体への出口を置きます。

   【2026-08-20 修正】最初はボタンの形にしていましたが、「特徴」「卒業生の声」
   「お知らせ」の“もっと見る”と形が違っていました。同じ役割のものは同じ形に。
   見た目は上の共通指定（.trainee-sec85-news__more-link などと同じ並び）に
   合流させ、ここでは土台と余白だけを書いています。位置も同じく右下です。
   ========================================================================== */

.trainee-sec7-faq__more-wrap {
  margin: 40px 0 0;
  text-align: center;
}

.trainee-sec7-faq__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}

/* 【2026-08-20 修正】リンクが左の列（見出しの下）に入っていました。
   このセクションは900px以上で「見出し｜質問リスト」の2列組みです。
   何も指定しないと3つ目の要素として左の列に置かれます。
   質問リストと同じ右の列に入れて、その右下に置きます。
   「卒業生の声をさらにみる」と同じ位置関係になります。 */
@media (min-width: 900px) {
  .trainee-sec7-faq__more-wrap {
    grid-column: 2;
    text-align: right;
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .trainee-sec7-faq__more-wrap {
    margin-top: 32px;
  }
}


/* ==========================================================================
   CTA：住所の一行／2026-08-20 追加
   --------------------------------------------------------------------------
   このサイトからアクセス（地図）ページを見に行く人がほとんどいないため、
   相談する一歩手前で「どこにある事業所なのか」が分かるようにしています。
   主役は申し込みボタンと電話番号なので、住所はそれより一段落とします。
   ========================================================================== */

/* 【2026-08-20 修正】置き場所を直しました。
   PCのCTAは「見出し／ボタン｜または｜電話」という3列のグリッドです。
   そこに住所をそのまま足すと、次の行の左端のマスに入ってしまい、
   ひとりだけ左に寄って浮いていました。全部の列にまたがる形にして中央へ。
   スマホでも受付時間のすぐ下にくっついて読みにくかったので、
   細い区切り線を1本引いて、別のまとまりだと分かるようにしています。 */
.trainee-sec8-cta__address {
  max-width: 520px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 900px) {
  .trainee-sec8-cta__address {
    grid-column: 1 / -1;   /* 3列ぶんをまたいで1行使います */
    justify-self: center;
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .trainee-sec8-cta__address {
    margin-top: 26px;
    padding-top: 18px;
    font-size: 11.5px;
  }
}




/* ==========================================================================
   ヘッダー上部の帯：トップページでの出し方／2026-08-20 修正
   --------------------------------------------------------------------------
   トップページは、スクロールする前だけヘッダーの背景を透明にして、
   メニューも隠し、ロゴだけを見せる作りになっています
   （ヒーローの絵を邪魔しないため）。

   ところが帯には背景色を付けていたので、そこだけベージュの棒が
   絵の上に残っていました。メニューと同じ条件で隠します。

   visibility で消しているので、隠れていても高さ34pxは残ります。
   スクロールした瞬間にヘッダーの高さが変わって、
   ページがガクッと動くのを避けるためです。
   ========================================================================== */

@media (min-width: 992px) {

  .trainee-header__utility {
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  body.home .trainee-header:not(.trainee-header--scrolled) .trainee-header__utility {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* キーボードのTabでヘッダーに入ったときは、メニューと一緒に出します */
  body.home .trainee-header:not(.trainee-header--scrolled):focus-within .trainee-header__utility {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}


/* ==========================================================================
   404ページ：サイドバーを消して1カラムに／2026-08-20 修正
   --------------------------------------------------------------------------
   Lightningの404は、標準では右にサイドバー（最新の投稿・カテゴリー・
   アーカイブ・検索）が出る2カラムでした。他のページはすべて1カラムなので、
   ここだけ形が違い、しかもウィジェットにはこのサイトのデザインを
   当てていないため、青い検索ボタンなどが浮いて見えていました。

   ページが見つからなくて困っている人に、関係のない一覧を見せても
   助けになりません。行き先の案内だけに絞ります。
   ========================================================================== */

body.error404 .main-section--col--two {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

body.error404 .sub-section--col--two,
body.error404 .site-body-container.container .sub-section {
  display: none;
}