@charset "UTF-8";
/* CSS Document */

/* ===================================================
   共通の基本設定（Noto Sans JP統一 ＆ フォント滲み防止）
   =================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1C1C1C;
  line-height: 1.6;
  background-color: #F2F2F2;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   共通設定：ヘッダー（最初に非表示 ＆ メイン演出の最後にフワッと表示）
   ========================================================================== */
/* メインビジュアルの一文字ずつのパラパラ演出を邪魔しないように、
   最初はヘッダー全体を非表示（opacity: 0）にしておき、3.8秒後にフワッと出現させます */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 10px;
  z-index: 100;
  opacity: 0;
  animation: fadeInFinalParts 0.6s ease 3.8s forwards;
}
@media (min-width: 768px) {
  /* PC版：背景を透明にしてコンテンツの上にすっきりと重ねます */
  .site-header {
    background-color: transparent;
    padding: 25px 40px;
    opacity: 0;
    animation: fadeInFinalParts 0.6s ease 3.8s forwards;
  }
}

/* ヘッダーの内側：ロゴとナビゲーションを横並びにする白い箱 */
/* 画面が広がりすぎないように最大幅を1200pxに制限し、中央に美しく収めます */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 10px 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header-logo a {
  display: block;
}
.header-logo img {
  width: 50px;
  height: auto;
}
/* スマホ用ハンバーガーメニューの三本線ボタン（クリックエリアの設定） */
/* ボタンの透明な土台を作り、タップしやすいサイズ（30px × 22px）を確保しています */
.menu-trigger {
  position: relative;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200; /* メニューが開いた時もボタンが上に乗るように高い数値を指定 */
}
/* 三本線の形を作るための共通の線スタイル設定 */
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #211e55; /* 線の色はスクールカラーの濃い紺 */
  transition: all 0.3s; /* 変形する時のアニメーションの滑らかさ */
}
/* 上から順番に、1本目、2本目、3本目の線をきれいに配置します */
.menu-trigger span:nth-child(1) { top: 0; }
.menu-trigger span:nth-child(2) { top: 10px; }
.menu-trigger span:nth-child(3) { top: 20px; }

/* スマホ版：メニューが開いたとき（is-activeが付いたとき）の「✕」ボタンへの変形設定 */
/* 2本目の線を透明にして消し、1本目と3本目を斜めに傾けることで綺麗な✕印を作ります */
.menu-trigger.is-active span:nth-child(1) { transform: translateY(10px) rotate(-45deg); }
.menu-trigger.is-active span:nth-child(2) { opacity: 0; }
.menu-trigger.is-active span:nth-child(3) { transform: translateY(-10px) rotate(45deg); }

/* サイト全体のメニューを包む箱（スライド式ナビゲーションリンク） */
/* 最初は画面の右端（right: -85%）に隠しておき、メニュー幅を80%に設定しています */
.header-nav {
  position: fixed;
  top: 0;
  right: -85%;
  width: 80%;
  height: 100vh;
  background-color: #ffffff;
  padding-top: 80px; /* 閉じるボタンと文字が被らないための上のタメ（余白） */
  transition: all 0.3s; /* スライドして出てくる時の滑らかさ */
  z-index: 150;
  box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 開いたときに左側にうっすら影をつける */
}
/* JavaScriptによってメニューが開いたとき、画面内にぴったり吸着（right: 0）させます */
.header-nav.is-open {
  right: 0;
}
.nav-list {
  list-style: none;
  padding: 0;
}
/* スマホの指でタップしやすいように、上下のクリックエリアを20pxと広めに確保 */
.nav-list li a {
  display: block;
  padding: 20px 30px;
  text-decoration: none;
  color: #211E55;
  font-weight: bold;
  border-bottom: 1px solid #eee; /* メニュー同士の区切り線 */
}

/* メニュー内の「お問い合わせ」黄色いボタンの装飾（スマホ版） */
/* 他の通常リンクと違って、下線を消して目立つスクールカラーの黄色いカプセル型にします */
.nav-list li.nav-btn-item {
  padding: 20px 30px;
}
.nav-list li .nav-btn {
  background-color: #FFDB0D; /* アカデミーの象徴である鮮やかな黄色 */
  color: #211E55;
  text-align: center;
  border-radius: 6px;
  border-bottom: none;
  padding: 12px;
}
/* ==========================================================================
   【PC版】ヘッダー共通スタイル（画面幅768px以上でのレイアウト調整）
   ========================================================================== */
@media (min-width: 768px) {
  /* PCの大画面に合わせ、背景を完全に透明化（transparent）してコンテンツの上に美しく重ねます */
  .site-header {
    background-color: transparent;
    padding: 25px 40px; /* 大画面に合わせて周囲の余白をたっぷりと広げます */
  }
  .header-inner {
    padding: 12px 24px;
  }
  
  /* スマホ専用だったハンバーガー三本線ボタンはPC版では不要になるため非表示にします */
  .menu-trigger {
    display: none;
  }
  
  /* スマホ用ドロワー（固定画面）を解除し、上部に常に固定される通常のヘッダーメニューに戻します */
  /* スマホ版のfixedや横幅、背景色、影、スライドアニメーション of 命令をすべて綺麗に打ち消します */
  .header-nav {
    position: static;
    width: auto;
    height: auto;
    padding-top: 0;
    background-color: transparent;
    box-shadow: none;
    transition: none;
  }
  
  /* 縦積みだったメニューリンクの並びを、Flexboxを使って綺麗に「横並び」へと配置転換します */
  .nav-list {
    display: flex;
    align-items: center;
    gap: 50px; /* メニューの文字同士の間隔をFigmaの設計通り「50px」と広めに確保します */
  }
  
  /* PCの大画面に合わせて、スマホ版の大きな内側余白（padding）や下線をリセットします */
  .nav-list li a {
    padding: 0;
    border-bottom: none;
    color: #211E55;
    font-size: 16px;
    font-weight: bold;
  }

  /* 【PC版】お問い合わせボタン（ヘッダー右端の黄色いボタンの装飾） */
  /* スマホ用メニュー内の表示から、ヘッダーの白い帯の中にスマートに収まるサイズに形を整え直します */
  .nav-list li .nav-btn {
    display: inline-block;
    background-color: #FFDB0D; /* スクールカラーの鮮やかな黄色 */
    color: #211E55;
    padding: 12px 28px; /* パソコンのクリックがしやすい絶妙なボタンの厚み */
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s; /* ホバー時に色がじわっと変わる滑らかさ */
  }
  /* お問い合わせボタンにマウスのカーソルを乗せたとき（ホバー時）の演出 */
  /* 色を少し濃いめの黄色（#e6b800）に変えて、しっかりと「押せる」感覚をユーザーに伝えます */
  .nav-list li .nav-btn:hover {
    background-color: #e6b800;
  }
  .nav-list li.nav-btn-item {
    padding: 0;
  }
}
/* ==========================================================================
   下層ページ限定：共通ヘッダーのアニメーションを確実に強制解除して最初から表示
   ========================================================================== */
/* トップページ（index.html）には存在せず、下層ページ（contact.htmlなど）にだけ存在する
   「下層ページ用メインビジュアル（.sub-page-mv）」を起点にして、下層ページだけのヘッダーを狙い撃ちします。
   これにより、トップページの設定には1ミリも影響を与えずに、下層ページのヘッダーだけを
   ページを開いた瞬間から100%普通に表示させることが完全に可能になります */
.sub-page-mv ~ .site-header,
.sub-page-mv ~ * .site-header,
main:has(.sub-page-mv) ~ .site-header,
header:has(~ main .sub-page-mv),
body:has(.sub-page-mv) .site-header {
  opacity: 1 !important;        /* 開いた瞬間から最初から100%普通に表示します */
  animation: none !important;    /* 3.8秒待つトップページ用のアニメーションを完全に無効化します */
}


/* ==========================================================================
   共通パーツ：中身の横幅を揃えるコンテナ（中央寄せ ＆ 画面端のクッション）
   ========================================================================== */
/* 画面がどんなに横に広がっても、中の文字やカードが広がりすぎてバラバラに崩れないように、
   見やすい一定の最大幅に制限して、常に画面の真ん中に収めるための必須の器です */
.container {
  width: 100%;
  padding: 60px 20px; /* スマホ版：上下に60pxの余白、左右に20pxの画面端クッション */
  margin: 0 auto;     /* 左右の余白をブラウザに自動計算させて、強制的に「中央寄せ」にします */
}
@media (min-width: 768px) {
  /* PC版：大画面に合わせてコンテンツの最大横幅を1200pxに固定し、上下余白をたっぷり広げます */
  .container {
    max-width: 1200px;
    padding: 100px 20px;
  }
}
/* ==========================================================================
   共通設定：二重タイトル（英語表記 ＋ 日本語表記の見出し）
   ========================================================================== */
/* 各セクションの顔となる見出しです。Figmaの設計通りに視線がスッと集まる中央配置にします */
.section-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px; /* 下に続くコンテンツ（カードや文章）との間のすき間 */
}
@media (min-width: 768px) {
  /* PC版：大画面の迫力に合わせて文字サイズを大きくし、下のすき間も広くしてゆとりを持たせます */
  .section-title {
    font-size: 32px;
    margin-bottom: 30px;
  }
}


/* ==========================================================================
   共通ボタン：サイト全体の主要ボタン（3つの基本スタイル）
   ========================================================================== */
/* サイト内で何度も繰り返し登場するボタンの「ベース（丸角や文字の太さなど）」をまとめて定義します */
.btn-primary, .btn-secondary, .btn-white {
  display: inline-block; /* 横幅を文字量に合わせつつ、上下のpadding（厚み）が正しく効く性質にします */
  padding: 15px 40px;    /* ボタンにしっかりとした押しやすさを持たせる上下左右の厚み設定 */
  border-radius: 30px;   /* デザイン画像通りの美しいカプセル型を作るための丸角指定 */
  text-decoration: none; /* リンク（aタグ）の標準の下線を消し去ります */
  font-weight: bold;     /* 文字を太字にして視認性を高めます */
  text-align: center;
}

/* 1. プライマリーボタン（サイト内で1番目立たせたい「無料体験申し込み」などの主役ボタン） */
.btn-primary {
  background-color: #FFDB0D; /* アカデミーの象徴である鮮やかな黄色 */
  color: #211E55;            /* 文字色は背景に映える上品な濃い紺色 */
}
/* ==========================================================================
   1. メインビジュアル確定スタイル（全画面 ＆ 二大一文字演出リレー連動版）
   ========================================================================== */
/* 画面いっぱいに広がる100vhの全画面仕様にし、背景画像の上からスクールカラーのネイビーを
   透明度0.85で重ねることで、文字を際立たせつつリッチな重厚感を演出しています */
.main-visual {
  position: relative; 
  background-image: linear-gradient(rgba(23, 28, 76, 0.85), rgba(23, 28, 76, 0.85)), url('../images/mv-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 120px 20px 60px 20px; /* スマホ画面で文字がヘッダーと被るのを防ぐ安全余白 */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 文字や背景が画面外にはみ出して横スクロールバグが出るのを防ぎます */
}

/* メインビジュアル内の中身を中央に綺麗に収めるための箱 */
.mv-inner {
  position: relative;
  z-index: 95;
  width: 100%;
  max-width: 800px;
}

/* オープニング演出：画面全体を覆うスクールカラーの濃い紺色の幕 */
/* 最初は画面を完全に隠しておき、文字が出終わる 3.8秒後に自動でスーッと消え去る設定です */
.mv-mask {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: /*#211e55*/#171c4c;
  z-index: 90;
  animation: fadeOutMask 0.8s ease 3.8s forwards;
}

/* メイン ＆ サブキャッチの一文字ずつパラパラ出るアニメーション（JS連動設定） */
/* JavaScriptで分解された1文字（spanタグ）を、わずかに下から上へ浮かび上がらせます */
.js-split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInChar 0.4s ease forwards;
}
.js-split-sub-text .sub-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(5px);
  animation: fadeInChar 0.4s ease forwards;
}
/* サブキャッチとリード文を、背景写真が浮かび上がるのと同じタイミングで出す設定 */
/* 文字列のパラパラ演出が終わるのを待ち、3.8秒後にフワッと出現させて視線を誘導します */
.js-fade-later {
  opacity: 0;
  animation: fadeInFinalParts 0.8s ease 3.8s forwards;
}

/* 下部の無料体験ボタンも、ヘッダーのメニューと同じ最後にフワッと出す設定（スマホ版） */
.mv-buttons {
  display: flex;
  flex-direction: column; /* スマホ版：押しやすさを優先して縦に2つ積みます */
  gap: 15px;              /* ボタン同士の上下のすき間 */
  align-items: center;
  opacity: 0;
  animation: fadeInFinalParts 0.8s ease 3.8s forwards;
}
@media (min-width: 768px) {
  /* 【PC版】下部の体験ボタン：横並びレイアウトへの切り替え */
  /* パソコンの大画面に合わせて、2つのカプセルボタンを美しく中央寄せの横並びに変更します */
  .mv-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 25px; /* 横並びになった時のボタン同士の適度なすき間 */
    opacity: 0;
    animation: fadeInFinalParts 0.8s ease 3.8s forwards;
  }
}

/* ===================================================
   アニメーション用キーフレーム登録エリア（完全版）
   =================================================== */
@keyframes fadeInChar {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutMask {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes fadeInFinalParts {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* メインキャッチ（育成とは、～） */
.mv-title {
  font-size: 5.8vw; /* スマホの画面幅に合わせて自動計算する魔法の単位。絶対に2行に折り返さないサイズ */
  font-weight: bold;
  letter-spacing: 0.05em; /* 文字と文字の間隔を少し広げて上品に */
  margin-bottom: 24px;
}

/* サブキャッチ（日本人が～） */
.mv-subtitle {
  font-size: 3.8vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 35px;
}

/* 本文のブロック（ラグビーは、～） */
.mv-lead {
  font-size: 12px;
  line-height: 1.8; /* 行の間隔をゆったりあける */
  letter-spacing: 0.03em;
  margin-bottom: 45px;
}
.mv-lead p {
  margin-bottom: 4px; /* 行ごとの隙間 */
}

/* ボタンを包むコンテナ */
.mv-buttons {
  display: flex;
  flex-direction: column; /* スマホでは縦に並べる */
  gap: 15px; /* ボタン同士の隙間 */
  align-items: center;
}

/* 画像通りの白い丸角ボタン */
.btn-white-round {
  display: inline-block;
  background-color: #ffffff;
  color: #211E55; /* 文字色は背景と同じネイビー */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  max-width: 280px; /* スマホで広がりすぎないように横幅を制限 */
  padding: 15px 0; /* ボタンの上下の厚み */
  border-radius: 30px; /* きれいなカプセル型の丸角 */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ウッストラ影をつけて浮き立たせる */
  transition: all 0.3s;
}
.btn-white-round:hover {
  background-color: #FFDB0D; /* カーソルを乗せたときに黄色に */
  transform: translateY(-2px); /* ほんの少し上に浮き上がる演出 */
}
/* ==========================================================================
   アニメーションの具体的な動き（キーフレーム）の登録設定
   ========================================================================== */

/* 文字をフワッと浮かび上がらせる動き */
@keyframes fadeInText {
  0% {
    opacity: 0;
    transform: translateY(10px); /* ほんの少し下から上に浮かび上がってくる演出を付けます */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクールカラーの幕（マスク）を透明にして消し去る動き */
@keyframes fadeOutMask {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden; /* 完全に透明になったら、後ろにあるボタンを邪魔なく押せるように存在自体を消します */
  }
}

/* ==========================================================================
   【PC版】画面幅768px以上（大画面用の横並びレイアウトへの切り替え）
   ========================================================================== */
@media (min-width: 768px) {
  /* PCの横長画面を活かして、上下の余白をダイナミックに広げて開放感を持たせます */
  .main-visual {
    padding: 180px 20px 120px 20px; 
  }
  
  /* パソコン用の迫力ある大きな文字サイズへ一挙に引き上げます */
  .mv-title {
    font-size: 50px; 
    margin-bottom: 30px;
  }
  .mv-subtitle {
    font-size: 40px;
    margin-bottom: 45px;
  }
  .mv-lead {
    font-size: 20px;
    margin-bottom: 55px;
    font-weight: bold;
  }
  
  /* スマホ版では押しやすさ重視で縦積みだった2つのボタンを、PC版では美しい「横並び」に配置転換します */
  .mv-buttons {
    flex-direction: row; 
    justify-content: center; /* 横並びにした2つのボタンを画面の真ん中に中央寄せします */
    gap: 25px;               /* 左のボタンと右のボタンの間のすっきりとした隙間（横幅） */
  }
  
  /* 大画面でボタンがだらしなく横に広がりすぎないように、Figmaの設計に合わせてちょうど良い幅でブレーキをかけます */
  .btn-white-round {
    max-width: 250px; 
  }
}
/* ==========================================================================
   2. 導入（リード文セクション）の余白調整（スマホ版）
   ========================================================================== */
/* メインビジュアルの全画面スクロール後に、ユーザーが最初に読む大切なメッセージエリアです */
.lead-section {
  text-align: center;
  background-color: #F2F2F2;
  font-size: 16px;
  font-weight: bold;
  padding: 60px 20px; /* スマホ画面で窮屈に見えないように上下にしっかり60pxのタメ（余白）を作ります */
  margin-bottom: 0;
  line-height: 2.2; /* 行の間隔をこれまでの標準的な1.5倍から「2.2倍」へと広くあけて読みやすくする設定 */
  letter-spacing: 0.03em; /* 文字同士の左右の間隔もほんの少し広げて上品で高級感のある空気感にします */
}


/* ==========================================================================
   共通設定：二重タイトルのエリア（スマホ版のレイアウト設定）
   ========================================================================== */
.section-title-wrap {
  text-align: center;
  margin-bottom: 20px; /* タイトルからその下に続くコンテンツ（図やカード）までのすき間を20pxに設定 */
  margin-top: 0;
}


/* ==========================================================================
   【PC版】画面幅768px以上での距離・文字サイズの微調整
   ========================================================================== */
@media (min-width: 768px) {
  /* PCの大画面に合わせて、リード文の文字を大きくし、上下の余白もたっぷり100pxに広げます */
  .lead-section {
    font-size: 20px;
    padding: 100px 20px; 
  }
  
  .section-title-wrap {
    margin-bottom: 30px; /* PC版では、下につづくコンテンツまでのすき間をゆったり30pxにキープします */
    margin-top: 0;        /* 背景色の一体化を美しく見せるため、上の余計なすき間を完全にリセットします */
  }
}
/* ==========================================================================
   共通設定：二重タイトル（英語表記 ＋ 日本語表記）スタイル
   ========================================================================== */
.section-title-wrap {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0; 
}

.section-title {
  display: flex;
  flex-direction: column; /* 英語（上）と日本語（下）を縦にきれいに並べます */
  align-items: center;
  line-height: 1.4;
}

/* 上側の英語表記（例: FLOW、ABOUT TRIAL など） */
.section-title .title-en {
  font-size: 11px;            /* 主役の日本語の邪魔をしないよう小さく上品に */
  font-weight: bold;
  color: #666666;             /* 画像通りの洗練された薄いグレー */
  letter-spacing: 0.4em;     /* 文字同士の間隔を大きく広げることで、海外のサイトのような高級感を演出 */
  margin-bottom: 8px;         /* 英語と、その下にある日本語とのすき間 */
  text-transform: uppercase;  /* HTML側で万が一小文字で書いてしまっても、自動で美しい大文字に変換するお守り */
}

/* 下側の日本語表記（例: 体験までの流れ、体験について など） */
.section-title .title-ja {
  font-size: 24px;            /* スマホ画面でもパッと目を引くしっかりした大きさ */
  font-weight: bold;
  color: #211e55;             /* 画像通りの上品で深みのあるスクールカラーの紺色 */
  letter-spacing: 0.03em;
}

/* ==========================================================================
   【PC版】画面幅768px以上での二重タイトルサイズ調整
   ========================================================================== */
@media (min-width: 768px) {
  .section-title-wrap {
    margin-bottom: 30px;
    /* PC版：タイトル自体の上のすき間を「0」にして余計な余白をカットします */
    margin-top: 0;
  }
  .section-title .title-en {
    font-size: 13px;           /* PC版の英語見出しサイズ */
    margin-bottom: 12px;       /* PC版の英語と日本語の間のすき間 */
  }
  .section-title .title-ja {
    font-size: 32px;           /* PC版の大画面に負けないしっかりとした日本語見出しサイズ */
  }
}
/* ==========================================================================
   3. 育成モデル（縦並び・タイムライン型完全再現スマホ版ベース）
   ========================================================================== */
.model-section {
  background-color: #F2F2F2;
  text-align: center;
  padding: 0 0 60px 0; /* 上のリード文の背景と隙間なく地続きに一体化させるため、上パディングを0にします */
  margin-top: 0; 
}

/* タイムライン全体を包み込む、大きな白い背景の座布団枠 */
.model-timeline-wrapper {
  background-color: #ffffff; /* ベースとなる白い背景色 */
  border-radius: 16px;       /* 白い外枠自体の大きな角丸設定 */
  padding: 10px;             /* ここを10pxにすることで、中のカラーブロックとの間に10pxの美しい白いフチが生まれます */
  width: 100%;
  max-width: 640px;          /* パソコン大画面で見ても横に広がりすぎないようにスマートに横幅を制限します */
  margin: 0 auto;            /* 画面の中央にぴったり配置します */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 外枠全体に上品で繊細な影を落とします */
}

/* 中のタイムライン本体（Flexboxの縦並び） */
.model-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 各カラーブロックの共通設定 */
/* 各カラーブロック（.timeline-block）の角丸を外枠（16px）より一回り小さい「8px」にすることで、
   入れ子にした際の隙間の幅が均等に美しく馴染む視覚マジックを仕込んでいます */
.timeline-block {
  width: 100%;
  padding: 30px 20px;
  border-radius: 8px; /* 外枠の角丸バランスに合わせて少し引き締める設定 */
  text-align: center;
}

/* 各ブロック固有 of 背景色と文字色の設定 */
.block-blue {
  background-color: #1a1e53; /* 画像通りの上品な濃い紺色 */
  color: #ffffff;
}
.block-green {
  background-color: #008200; /* 画像通りの鮮やかな緑色 */
  color: #ffffff;
}
.block-yellow {
  /* Figmaの高級感あるEliteクラスに合わせて、上から下へうっすら変わる美しい金色グラデーション背景を再現 */
  background: linear-gradient(to bottom, #eae1ac, #c2ae70); 
  color: #ffffff;
}

/* 英語表記の大きなタイトル（Fundamental など） */
.block-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
  letter-spacing: 0.03em;
}

/* 白い角丸インナーボタンを包み込む縦積みコンテナ */
.block-inner-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 白いボタン同士の上下の適度なすき間 */
  align-items: center;
  width: 100%;
}
/* 各カラーブロックの内側にある白いカプセル型のボタン風パーツ */
.model-inner-btn {
  display: block;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 0;
  width: 100%;
  max-width: 500px; /* 白いボタンが横に広がりすぎないための最大横幅 */
  border-radius: 25px; /* 美しいカプセル型を作るための丸角指定 */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 各カラーブロックごとの中に入っている文字の色の微調整 */
.block-blue .model-inner-btn { color: #1a1e53; }
.block-green .model-inner-btn { color: #008200; }
.block-yellow .model-inner-btn { color: #b0964c; } /* 金色背景の上でも真っ白なボタンの中で文字がボケないように、少し濃いめの金色に引き締めます */

/* CSSの重ね合わせ（borderとafterの応用）だけで描く、下向きのグレーの大きな矢印 */
.timeline-arrow {
  width: 40px;
  height: 25px;
  position: relative;
  background-color: #b3b3b3; /* 矢印の細い直線（棒）にあたる部分 */
  z-index: 10;               /* 矢印をカラーブロックの手前に確実に重ね合わせるためのお守り設定 */
  
  /* ▼ ここ：上下の余白にマイナスの数値（マイナスマージン）を指定し、ブロック同士を綺麗に引き寄せます ▼ */
  margin: -5px 0 5px 0; /* スマホ版：上・右・下・左 の順の設定 */
}

/* 疑似要素を使って矢印の三角形の頭部分を形作ります */
.timeline-arrow::after {
  content: "";
  position: absolute;
  bottom: -15px; /* 三角形の先端が突き出る位置の調整 */
  left: 50%;
  transform: translateX(-50%);
  border-left: 35px solid transparent; /* 左右を透明な斜め線にして三角形を作ります */
  border-right: 35px solid transparent;
  border-top: 20px solid #b3b3b3; /* 矢印の三角形の頭となるグレー色 */
}

/* 白い大きなタイムライン外枠から、下のまとめ文章までの距離を包むラッパー */
.model-summary-outer {
  text-align: center;
  padding-top: 40px; /* 白い大きな箱（座布団）との間のすき間（スマホ版） */
}

/* まとめ文章のテキスト（ラグビーは短距離走ではありません～） */
.model-summary-text {
  font-size: 13px;
  color: #333333;
  line-height: 2.0; /* リード文と同様に、ポスターのコピーのようにゆったりと広げた心地よい行間設定 */
  margin-bottom: 30px; /* 下に続く「育成モデルについて知る」ボタンとの間のすき間 */
  letter-spacing: 0.03em;
}
.model-summary-text p {
  margin-bottom: 8px; /* 行や段落ごとのすき間 */
}
/* 文章の中の特に目立たせたい強調単語 */
.model-summary-text .font-bold {
  font-weight: bold;
  color: #211e55; /* スクールカラーの濃い紺色で力強くアピールします */
}

/* 下部のカプセルボタンを中央に綺麗に配置するためのFlexboxコンテナ */
.model-summary-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* ==========================================================================
   共通ボタン：フチ線カプセルボタン（真ん中中央寄せ版）
   ========================================================================== */
/* サイト全体の共通パーツです。単なるリンク（aタグ）を、中央寄せで押しやすい
   フチ線デザインのカプセルボタンに仕立てています */
.btn-outline-capsule {
  display: block;        /* 横幅いっぱいに広げつつ、上下のpadding（厚み）が正しく効く性質にします */
  background-color: #ffffff;
  color: #211e55;        /* 文字色はスクールカラーの上品な濃い紺色 */
  border: 1.5px solid #211e55; /* ボタンの輪郭を形作る細いフチ線 */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none; /* リンクの標準の下線を消し去ります */
  width: 100%;
  max-width: 280px;      /* スマホ画面で横にだらしなく広がりすぎないようにブレーキをかけます */
  margin: 0 auto;        /* 左右の余白を自動計算させ、ボタン自体を画面の真ん中に中央寄せします */
  padding: 14px 0;       /* ボタンにしっかりとした押しやすさを持たせる上下の厚み設定 */
  text-align: center;
  border-radius: 25px;   /* デザイン画像通りの美しいカプセル型を作るための角丸指定 */
  box-sizing: border-box; /* paddingやフチ線の太さを、max-widthの中に含めて計算させるお守り */
  transition: all 0.3s;  /* ホバーしたときに色がじわっと変わるアニメーションの滑らかさ */
}
.btn-capsule {
  display: block;        /* 横幅いっぱいに広げつつ、上下のpadding（厚み）が正しく効く性質にします */
  background-color: #ffffff;
  color: #211e55;        /* 文字色はスクールカラーの上品な濃い紺色 */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none; /* リンクの標準の下線を消し去ります */
  width: 100%;
  max-width: 280px;      /* スマホ画面で横にだらしなく広がりすぎないようにブレーキをかけます */
  margin: 0 auto;        /* 左右の余白を自動計算させ、ボタン自体を画面の真ん中に中央寄せします */
  padding: 14px 0;       /* ボタンにしっかりとした押しやすさを持たせる上下の厚み設定 */
  text-align: center;
  border-radius: 25px;   /* デザイン画像通りの美しいカプセル型を作るための角丸指定 */
  box-sizing: border-box; /* paddingやフチ線の太さを、max-widthの中に含めて計算させるお守り */
  transition: all 0.3s;  /* ホバーしたときに色がじわっと変わるアニメーションの滑らかさ */
}

/* ボタンにマウスのカーソルを乗せたとき（ホバー時）の背景色と文字色反転 */
.btn-outline-capsule:hover {
  background-color: #211e55; /* 背景を濃い紺色に染めます */
  color: #ffffff;            /* 文字色を白に反転させて、押せる感覚をクッキリ伝えます */
}
.btn-capsule:hover {
  background-color: #211e55; /* 背景を濃い紺色に染めます */
  color: #ffffff;            /* 文字色を白に反転させて、押せる感覚をクッキリ伝えます */
}

/* ==========================================================================
   【PC版】画面幅768px以上での育成モデルサイズ・距離の微調整
   ========================================================================== */
@media (min-width: 768px) {
  .model-section {
    /* PC版：上側（導入リード文の背景と隙間なく地続きに一体化させるため）の余白は0にし、
       下側は他のセクションと合わせた100pxのゆったりした余白にします */
    padding: 0 0 100px 0;
  }
  .block-title {
    font-size: 32px; /* パソコンの大画面に合わせて英語タイトルをさらに大きく引き上げます */
  }
  .timeline-arrow {
    margin: -5px 0 5px 0;   /* PC版でのグレーの下向き矢印の引き寄せ具合の調整 */
  }
  .model-summary-outer {
    padding-top: 60px; /* PC版では白い大きな箱（座布団）から下の文章までのすき間を少し広げてゆったり見せます */
  }
  .model-summary-text {
    font-size: 15px; /* PC版での見やすい文字サイズに調整 */
    margin-bottom: 35px;
  }
  .btn-outline-capsule {
    max-width: 320px;        /* PC版の大画面に合わせてボタンの横幅をワイドに広げます */
    font-size: 15px;         /* ボタンの中の文字も一回り大きく調整 */
  }
}
/* ==========================================================================
   4. 育成クラス：画像レイアウト完全再現（スマホ版ベーススタイル）
   ========================================================================== */
.class-section {
  background-color: #022859;
  color: #ffffff;
  padding: 60px 0;
}


/* 共通設定の二重タイトルは本来ネイビーですが、このセクションは背景が濃い紺色のため、
   文字が同化して消えないように日本語タイトル（.title-ja）だけを真っ白に上書き指定します */
.class-section .section-title .title-ja {
  color: #ffffff; /* 画像通りの真っ白な文字に変更 */
}
/* 上段グループ（基礎クラス）と下段グループ（発展クラス）の大きな塊ごとの設定 */
.class-block-group {
  width: 100%;
  max-width: 1100px; /* パソコン画面でコンテンツが横に広がりすぎてバラバラになるのを防ぐ制限 */
  margin: 0 auto 60px auto;
  padding: 0 20px;
}
.class-block-group:last-child {
  margin-bottom: 0;
}

/* 黄色のグラデーション見出し（各ブロックの頭に付くステップバッジタグ） */
.class-block-tag {
  display: block;
  width: fit-content;
  margin: 0 auto 30px auto;
  padding: 8px 25px;
  background: linear-gradient(to bottom, #ffe45e, #f0cc1e); /* Figmaの鮮やかな立体感のある黄色グラデ */
  color: #211e55;
  font-weight: bold;
  font-size: 13px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* スマホ版でのカード縦積み設定（Flexboxの縦並び） */
.class-row-top, .class-row-bottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  margin-bottom: 40px;
}

/* 白いクラスカード自体のデザイン（影を薄くして上品ですっきりとした質感にする） */
.class-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.class-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.class-body {
  padding: 20px;
  text-align: left;
}


/* カードの中の「全員参加型」や「定員制」などの小さな属性バッジ */
.card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 3px;
  margin-right: 6px;
}
/* 各クラスのテーマカラーに合わせて、バッジ of 背景色を2パターンに塗り分けます */
.bg-blue { background-color: #211e55; }
.bg-orange { background-color: #d68522; }

.card-badge-text {
  font-size: 11px;
  color: #666666;
}
/* クラス個別のタイトル（h4見出し） */
.class-body h4 {
  font-size: 16px;
  font-weight: bold;
  color: #211e55;
  margin: 12px 0 10px 0;
  border-left: 3px solid #211e55; /* タイトルの左側にアクセントとして引くスクールカラーの細い縦線 */
  padding-left: 8px;
}
/* 発展・特化クラス側の見出しは、テーマカラーに合わせて縦線の色をオレンジに変更します */
.class-body h4.color-orange {
  color: #d68522;
  border-left-color: #d68522;
}

/* カード内の強調文章（太字で目立たせる一文） */
.class-body .p-highlight {
  font-weight: bold;
  font-size: 13px;
  color: #211e55;
  margin-bottom: 12px;
  line-height: 1.4;
}
.class-body .p-highlight.color-orange {
  color: #d68522;
}

/* カード内の細かなクラス説明文 */
.class-body p {
  font-size: 12px;
  line-height: 1.6;
  color: #444444;
}

/* --- 各ブロック下部のまとめテキスト ＆ 白い丸角ボタン --- */
.class-block-summary {
  text-align: center;
  padding-top: 30px;
}
.summary-lead {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
  text-decoration: underline; /* 画像に合わせた美しい下線装飾 */
  text-underline-offset: 4px;
}
.summary-and-desc {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 25px;
}
/* ボタンを包み込むFlexboxコンテナ */
.summary-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%; /* 横幅いっぱいに広げる */
  
  /* 上側の余白を一度リセット */
  margin-top: 0;
  
  /* ▼ ここ：点線からその下へと続く次のブロックの見出しまでのすき間を設定します ▼ */
  margin-bottom: 40px; 
  
  /* ▼ ここ：ボタンの真すぐ真下にグレーの点線がくっついて窮屈に見える表示バグを防ぐタメ（余白）を設定します ▼ */
  padding-bottom: 40px; 
  
  border-bottom: 1px dotted #b3b3b3; /* 各クラスグループを区切るグレーのきれいな点線 */
}
/* ボタン配置のバグ修正：ボタン自体の標準配置が「inline-block」のため、
   外側の箱のpadding-bottomが正しく反応するように、ブロックの性質を上書き指定します */
.summary-btn-wrap .btn-white-round {
  display: block; /* blockに変えることで、上のpadding-bottomが完璧に効くようになります */
  width: 100%;
  max-width: 280px;
}
/* 一番最後のブロック（発展クラスグループ）のボタンの下には、次のコンテンツがないため点線を出さない自動設定 */
.class-block-group:last-child .summary-btn-wrap {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* ===================================================
   育成クラス：ボタンの上の文字との隙間を強制的に広げる設定
   =================================================== */
.summary-btn-wrap .btn-white-round,
.class-block-summary .btn-white-round {
  margin-top: 25px !important; /* 文字との間に25pxの美しい隙間を強制的に作ります */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ここを書き換えます：ボタンから下の点線まで、および点線から次の見出しまでの隙間を25pxずつ拡大 */
.summary-btn-wrap {
  padding-bottom: 65px !important; /* ボタンから点線までの隙間を広げる */
  margin-bottom: 65px !important;  /* 点線から次の黄色の見出しまでの隙間を広げる */
}


/* ==========================================================================
   【PC版】画面幅768px以上（Figmaのデザイン画像通りにカラムを横並びに配置）
   ========================================================================== */
@media (min-width: 768px) {
  .class-section {
    padding: 80px 0 0; /* PC版の大画面に合わせてセクションの上下のタメ（余白）をたっぷりと広げます */
  }
  
  /* 上段グループ：3つのクラスカード（基礎系）を左右いっぱいに綺麗に横並びします */
  .class-row-top {
    flex-direction: row;
    justify-content: space-between; /* 3枚のカードの両端を画面幅にぴったり合わせ、自動で均等な隙間を作ります */
  }
  .class-row-top .class-card {
    width: 31.5%; /* 3枚のカード（合計94.5%）を並べ、残り5.5%の余白を隙間として美しく分配する絶妙なパーセント計算 */
  }

  /* 下段グループ：2つのクラスカード（発展・特化系）を横並びにし、画面の真ん中へ中央寄せします */
  .class-row-bottom {
    flex-direction: row;
    justify-content: center; /* 2枚 of カードを左詰めではなく、綺麗に真ん中寄せにします */
    gap: 40px; /* 2つのカードの間に生まれる、Figmaのデザインに合わせたゆったりとした隙間 */
  }
  .class-row-bottom .class-card {
    width: 36%; /* 2カラム構成のため、上段の3カラムと同じ幅だと中央がポッカリ空いて寂しく見えるのを防ぐワイド調整 */
  }
  
  /* PC大画面での読みやすさに合わせて、見出しや強調文章の文字サイズをひと回り大きく引き上げます */
  .class-body h4 {
    font-size: 18px;
  }
  .class-body .p-highlight {
    font-size: 14px;
  }
  .summary-btn-wrap {
    margin-bottom: 40px;
    padding-bottom: 40px; /* PC版大画面における点線上下の適度なすき間バランスの確保 */
  }
  .summary-btn-wrap .btn-white-round {
    max-width: 320px; /* パソコン画面での押しやすさを考慮し、ボタンの最大幅を320pxに広げます */
  }
}
/* ==========================================================================
   5. バナーセクション（画像レイアウト完全再現スタイル）
   ========================================================================== */
.banner-section {
  /* プロの技術：背景写真（about-bg.jpg）の上から、うっすら暗いネイビーの幕（透明度0.65）を
     重ね合わせることで、夕日の質感を美しく残しつつ、上に乗る白い文字の視認性を劇的に高めます */
  background-image: linear-gradient(rgba(17, 20, 64, 0.65), rgba(17, 20, 64, 0.65)), url("../images/about-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 80px 20px; /* スマホ版の上下左右の余白設定 */
}

.banner-inner {
  width: 100%;
  max-width: 900px; /* 大画面で読ませるメッセージ文章が、横に広がりすぎて読みづらくなるのを防ぐ制限 */
  margin: 0 auto;
}

/* このセクション専用の白文字タイトル設定 */
.title-white .title-en {
  color: rgba(255, 255, 255, 0.6); /* 英語表記はあえてうっすら半透明の白にして主役を譲ります */
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.2em; /* 字間を少し広げて、洗練された「抜け感」を作ります */
  margin-bottom: 12px;
}
.title-white .title-ja {
  color: #ffffff; /* 日本語表記は100%クッキリとした白文字にして力強く主張します */
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
}

/* 中央のメッセージ文章 */
.banner-message {
  color: rgba(255, 255, 255, 0.9); /* 純粋な白（1.0）より少しだけ不透明度を下げて、画面に馴染む上品な色にします */
  font-size: 13px;
  line-height: 2.2; /* リード文と同様に、ポスターのコピーのようにゆったり広げた心地よい行間 */
  margin-top: 40px;
  margin-bottom: 40px;
  letter-spacing: 0.03em;
}
.banner-message p {
  margin-bottom: 8px;
}

/* ボタンの配置エリア（Flexboxコンテナ） */
.banner-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* メインビジュアルで作成した共通の白い丸角カプセルボタン（.btn-white-round）の幅だけをここで上書き制御します */
.banner-btn-wrap .btn-white-round {
  width: 100%;
  max-width: 280px; /* スマホ画面でボタンが大きく広がりすぎないように最大幅を制限 */
}
/* ==========================================================================
   【PC版】画面幅768px以上でのサイズ・余白の微調整
   ========================================================================== */
@media (min-width: 768px) {
  .banner-section {
    padding: 140px 20px; /* パソコンの横長大画面では、写真をダイナミックに広く見せるために上下の余白をたっぷりと確保します */
  }
  .title-white .title-en {
    font-size: 13px;
  }
  .title-white .title-ja {
    font-size: 38px; /* パソコンの大画面で圧倒的なアイキャッチ効果を生む大きな見出しサイズへ引き上げ */
  }
  .banner-message {
    font-size: 15px; /* PC版での快適なメッセージの文字サイズ */
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .banner-btn-wrap .btn-white-round {
    max-width: 300px; /* PC版の大画面に合わせてボタンの横幅をワイドに広げます */
  }
}

/* ==========================================================================
   6. 保護者の皆さまへ（アコーディオン完全再現スタイル）
   ========================================================================== */
.parent-section {
  /* 背景写真の上に、明るい薄グレー（透明度0.5）の膜を重ね合わせることで、
     グラウンドのうっすらとした空気感を残しつつ、文字やカードを読みやすくします */
  background-image: linear-gradient(rgba(247, 249, 252, 0.5), rgba(247, 249, 252, 0.5)), 
    url('../images/faq-bg.jpg');
  background-size: cover;       /* 画像を画面いっぱいに広げる */
  background-position: center;   /* 画像の中心を基準に配置する */
  background-repeat: no-repeat;  /* 画像が繰り返されるのを防ぐ */
  background-color: #F2F2F2; /* 画像通りの明るい薄グレー背景色 */
  color: #211e55; /* タイトルや重要な文字色（濃い紺） */
  padding: 60px 0;
}

/* リード文 */
.faq-lead-area {
  text-align: center;
  margin-bottom: 40px;
}
.faq-lead-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 25px;
}
.faq-lead-sub {
  font-size: 0.9em;
  color: #666666; /* 薄いグレーの文字 */
	font-weight: bold;
}

/* アコーディオン全体を包み込む縦積みコンテナ */
.faq-accordion-wrap {
  width: 100%;
  max-width: 800px; /* 1行の文字数が多くなりすぎて視線が泳ぐのを防ぐ、最も読みやすい横幅制限 */
  margin: 0 auto 40px auto;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 白いカードボックス同士の縦の隙間 */
}


/* 白い角丸アコーディオンボックスのベース（ブラウザ標準の不格好な三角形矢印は消去します） */
.faq-item {
  background-color: #ffffff;
  border-radius: 8px; /* Figmaの角丸の数値 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* ほんのり優しい繊細な影 */
  overflow: hidden;
	border: solid #D9D9D9 1px;
}
.faq-item summary::-webkit-details-marker {
  display: none; /* WebKit系ブラウザ（ChromeやSafari）の標準の矢印を非表示にします */
}
.faq-item summary {
  list-style: none; /* Firefoxなどの標準の矢印を非表示にします */
}
/* 質問エリア（ユーザーがクリック・タップできる領域全体の共通設定） */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 右端のプラスマークと質問テキストの上下中央をぴったり揃えます */
  padding: 18px 20px;
  cursor: pointer;
  user-select: none; /* 何度もクリックした際に文字が青く選択されてしまうのを防ぐ設定 */
}

/* 「Q.」の記号と質問テキストを横並びにするコンテナ */
.faq-q-box {
  display: flex;
  align-items: flex-start; /* 2行になっても「Q.」の記号が1行目の先頭の高さに美しく固定される設定 */
  gap: 8px;                /* 「Q.」の文字とテキストの間の絶妙なすき間 */
  text-align: left;
  padding-right: 15px;     /* 右側のプラスマークと文字が被って潰れるのを防ぐための余白 */
}

/* プレフィックス（Q. の文字） */
.faq-q-prefix {
  font-size: 14px;
  font-weight: bold;
  color: #211e55;          /* スクールカラーの濃い紺 */
  flex-shrink: 0;          /* 画面幅が狭まった時も「Q.」の幅がブラウザに絶対に押し潰されないためのお守り */
}

/* 質問のテキスト自体 */
.faq-q-text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
}

/* 右側の「＋」マークを画像パーツを使わずにCSSだけで描写 */
.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background-color: #211e55; /* ＋線を構成する紺色 */
  transition: transform 0.3s; /* 開閉時に線が滑らかに回転・変形するための速度設定 */
}
/* 横線 */
.faq-icon::before {
  top: 6px;
  left: 0;
  width: 100%;
  height: 2px;
}
/* 縦線 */
.faq-icon::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 100%;
}

/* アコーディオンが開いたとき（open状態）に、縦線をクルッと回して消し去り、綺麗な「ー」にする魔法の設定 */
.faq-item[open] .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-item[open] .faq-icon::before {
  transform: rotate(180deg);
}

/* 回答のエリア（最初は自動で隠れており、クリックして開くと下から出現する領域） */
.faq-answer {
  display: flex;           /* 「A.」の記号と回答テキストを美しく横並びに配置します */
  align-items: flex-start; /* 2行以上になっても「A.」が常に1行目の先頭の高さに固定される設定 */
  gap: 8px;                /* 「A.」とテキストの間のすき間 */
  
  padding: 0 20px 20px 20px;
  border-top: 1px dashed #f0f2f5; /* 質問エリアと回答エリアを区切る上品な点線 */
  padding-top: 15px;
  text-align: left;
}

/* プレフィックス（A. の文字） */
.faq-a-prefix {
  font-size: 14px;
  font-weight: bold;
  color: #d68522;          /* 画像通りの「A.」の文字をアカデミーのオレンジにして直感的に目立たせます */
  flex-shrink: 0;          /* 画面幅が狭まった時も「A.」の文字幅が絶対に潰れないためのお守り */
}

/* 回答のテキスト自体 */
.faq-a-text {
  font-size: 13px;
  line-height: 1.7;
  color: #555555;
}
.faq-a-text p {
  margin-bottom: 0;        /* 余計な下隙間（マージン）が出ないように初期リセット */
}

/* 下部にあるボタンの配置調整コンテナ */
.faq-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.faq-btn-wrap .btn-outline-capsule {
  width: 100%;
  max-width: 280px; /* スマホ画面でボタンが横に広がりすぎないように制限 */
}
/* ==========================================================================
   【PC版】画面幅768px以上でのアコーディオンサイズ・距離の微調整
   ========================================================================== */
@media (min-width: 768px) {
  .faq-lead-title {
    font-size: 18px; /* パソコン画面での読みやすさを考慮し、リード文の文字を一回り大きめに調整 */
  }
  
  /* クリックできる質問エリア全体の余白を広げ、パソコンのマウスでも押しやすいようにゆとりを持たせます */
  .faq-question {
    padding: 22px 30px;
  }
  
  .faq-q-prefix,
  .faq-q-text {
    font-size: 16px;       /* PC版の大画面に合わせて質問の文字サイズを一回り大きく引き上げ */
  }
  
  /* 開いたときに出てくる回答エリアの内側余白を広げます */
  .faq-answer {
    padding: 0 30px 25px 30px;
    padding-top: 15px;
    gap: 12px;             /* PC版では「A.」の記号と文章の間のすき間を少し広げて、ゆったりと見せます */
  }
  
  .faq-a-prefix {
    font-size: 16px;       /* 回答の「A.」の文字サイズも質問（Q.）に合わせて大きく調整 */
  }
  .faq-a-text {
    font-size: 14px;       /* PC版での快適な回答本文の文字サイズ */
  }
  
  .faq-btn-wrap .btn-outline-capsule {
    max-width: 320px; /* パソコンの画面幅に負けないように、最下部のカプセルボタンの横幅をワイドに広げます */
  }
}
/* ==========================================================================
   7. 体験ステップ（画像レイアウト完全再現スタイル・スマホ版ベース）
   ========================================================================== */
.step-section {
  /* プロの技術：背景写真（step-bg.jpg）の上から、うっすら暗いネイビーの幕（透明度0.55）を
     重ね合わせることで、夕日の質感を美しく残しつつ、上に乗る白文字をクッキリ浮かび上がらせます */
  background-image: linear-gradient(rgba(17, 20, 64, 0.55), rgba(17, 20, 64, 0.55)), url('../images/step-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 60px 20px; /* スマホ版の上下左右の適切な余白設定 */
}

.step-container-inner {
  width: 100%;
  max-width: 1100px; /* パソコン画面で全体の締まりをよくするための横幅制限設定 */
  margin: 0 auto;
}

/* リード文 */
.step-lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 40px;
}
.step-lead p {
  margin-bottom: 4px;
}

/* 白いステップカード自体の共通デザイン設定 */
.step-card-box {
  background-color: #ffffff;
  color: #211e55; /* 文字色はアカデミーの気品ある濃い紺色を指定 */
  width: 100%;
  max-width: 320px; /* スマートフォンの画面幅で横に広がりすぎないようにしっかりとブレーキをかけます */
  padding: 30px 20px;
  border-radius: 8px; /* Figmaのデザインに準拠した角丸の数値指定 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 白い箱をくっきりと浮き立たせるリッチな立体影 */
  text-align: center;
}
.step-box-num {
  display: block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.step-card-box h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.step-box-icon {
  width: auto;
  height: 65px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-box-icon img {
  max-width: 100%;
  max-height: 100%;
}
.step-card-box p {
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
}

/* 黄色の丸い矢印ボタン（スマホでは縦積みの下向き、PCでは横並びの右向きに自動変化する設定） */
.step-cards-wrap {
  display: flex;
  flex-direction: column; /* スマホ版：まずはFlexboxの縦並びでカードと矢印を一本に積みます */
  align-items: center;
  gap: 0; 
  width: 100%;
  margin-bottom: 40px;
}

/* 新しくなった矢印画像の設定（スマホ版：下向きに回転させてカードの上下に少し潜り込ませます） */
.step-card-arrow {
  width: 60px;
  height: 60px;
  z-index: 10;  /* 矢印を前後の白い箱の手前に確実に重ね合わせるためのお守り設定 */
  flex-shrink: 0;
  
  /* ▼ ここ：上下の白いブロックを引き寄せて、黄色の円を少し重ね合わせる絶妙なマイナスマージン設定 */
  margin-top: -15px;
  margin-bottom: -15px;
  
  transform: rotate(90deg); /* 元画像が右向きのため、スマホ版では90度回転させて下向きに変更します */
}
.step-card-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}


/* 最下部にある体験ボタンの配置調整コンテナ */
.step-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.step-btn-wrap .btn-white-round {
  width: 100%;
  max-width: 280px;
}
/* ==========================================================================
   【PC版】画面幅768px以上（画像通りの横並びレイアウトへの切り替え）
   ========================================================================== */
@media (min-width: 768px) {
  .step-section {
    padding: 100px 20px; /* PC版では背景の写真をさらにのびのびと見せるために上下の余白を広くします */
  }
  .step-lead {
    font-size: 15px;
    margin-bottom: 55px;
  }
  
  /* カードと矢印を1列に横並びさせる */
  /* カードと矢印を横並びにするコンテナ（Flexbox） */
  .step-cards-wrap {
    flex-direction: row;     /* パソコンの大画面に合わせて、縦積みから「横並び」に切り替えます */
    justify-content: center; /* 中央寄せにして全体の左右の間隔を綺麗に固定します */
    align-items: center;
    gap: 0; /* 一旦全体のすき間（gap）をリセットし、個別のmarginでミリ単位の精密な重なりを作ります */
  }

  /* 白いステップカードのPC版の横幅 */
  .step-card-box {
    width: 30%; /* 3枚のカードが画面幅にバランスよく収まるパーセント設定 */
    max-width: 320px;
    padding: 40px 20px;
    flex-shrink: 0;
  }

  /* 新しく追加した矢印画像の設定（PC版：右向きに戻して左右のカードの下に潜り込ませる設定） */
  .step-card-arrow {
    transform: rotate(0deg); /* スマホ版の下向き回転を解除し、元の「右向き」の角度に戻します */
    flex-shrink: 0;          /* 画面をググッと縮めても、黄色の丸ボタンが楕円形に潰れないためのお守り */
    z-index: 10;             /* 白い箱のフチの手前に確実に重なって見えるようにする設定 */

    /* 1. 画像のサイズをFigmaの設計通り60pxに固定します */
    width: 60px;  
    height: 60px; 

    /* 2. ここが重要：マイナスの数値（マイナスマージン）を使って、左右の白いカードの下に潜り込ませます */
    margin-left: -18px;  /* 元の「12px」から「-18px」に変更（※Figmaの重なりを完全再現するための数値） */
    margin-right: -18px; /* 左右とも同じマイナス値にして均等に潜り込ませます */
  }
}
/* ==========================================================================
   【共通】フッター（スマホ版ベーススタイル）
   ========================================================================== */
.site-footer {
  background-color: #011C40; /* 画像通りの深みのある濃紺色 */
  color: #ffffff;
  padding: 40px 20px;
  font-size: 13px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- フッター上段（ロゴ ＆ SNSエリア） --- */
.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 上段と中段を区切るうっすらとした白線 */
  padding-bottom: 25px;
  margin-bottom: 30px;
}
.footer-catch {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 10px;
}
.footer-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-logo-mark {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 28px;
}
.footer-academy-name {
  font-size: 16px;
  font-weight: normal;
}
.footer-sns {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}
.footer-sns img {
  width: 20px;
  height: 20px;
  /* 共通：フッター・SNSアイコン白黒反転のカラーマジック */
  /* Figmaから書き出した元の黒いSNSアイコン画像を、画像編集ソフトを使わずに
     CSSの計算だけで真っ白（invert(1)）に反転させて背景になじませるプロの技です */
  filter: brightness(0) invert(1); 
}
/* --- フッター中段：4カラム構成（スマホ版縦積み） --- */
.footer-main {
  display: flex;
  flex-direction: column; /* スマホ版：メニューや拠点のブロックをまずは縦1列に積みます */
  gap: 30px;
}
/* 2番目の子要素（カラム2）の上側の隙間を打ち消す */
.footer-main > .footer-col:nth-child(2) {
  margin-top: -30px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 15px;
}
.footer-col ul li a {
  color: #ffffff;
  text-decoration: none;
}
/* 左側2カラム（主要なメニューリンク）の文字を太めにする設定 */
.font-bold-links a {
  font-weight: bold;
  font-size: 14px;
}

/* 右側2カラム（拠点・アクセス情報） */
.info-col p {
  line-height: 1.8;
  margin-bottom: 3px;
  color: #B3B3B3;
}
.col-title {
  font-size: 14px;
  font-weight: bold;
  color: #B3B3B3;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px; /* 四角いマークと見出し文字との間のすき間 */
}
/* 見出し文字の前に、画像を使わずCSSだけで小さな正方形のドットを自動描写する疑似要素 */
.col-title::before {
  content: ""; /* 記号を描くための空っぽの箱を生成します */
  display: inline-block;
  
  /* 正方形の大きさを設定（現在は 10px × 10px） */
  width: 10px;  
  height: 10px; 
  
  background-color: #ffffff; /* 四角の塗りつぶし色（白） */
  opacity: 0.8; /* うっすら透明度を落として全体のデザインに上品に馴染ませます */
  flex-shrink: 0; /* 画面幅が狭まった時も四角マークが楕円形に潰れないようにするお守り */
}
.col-title-icon {
  font-size: 20px;
  alignment-baseline: center;
}
.map-link {
  display: inline-block;
  color: #ffffff;
  opacity: 0.6;
  text-decoration: underline;
  margin-top: 5px;
}
.map-link:hover {
  opacity: 1;
}
/* --- フッター下段（コピーライトエリア） --- */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
}
.copyright {
  font-size: 11px;
  opacity: 0.5;
}


/* ==========================================================================
   【PC版】画面幅768px以上（Figmaのデザイン画像通りに美しい4カラム展開に調整）
   ========================================================================== */
@media (min-width: 768px) {
  .site-footer {
    padding: 60px 40px; /* 大画面に合わせてフッター周囲の余白をたっぷりと広げます */
  }
  
  /* 上段グループを横並びに（左側にアカデミーのロゴ、右側にSNSアイコン） */
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* ロゴとSNSのそれぞれの底辺の高さをピシッと揃えます */
  }
  .footer-sns {
    margin-top: 0; /* スマホ版で指定されていた不要な上のすき間をリセットします */
  }

  /* 中段のメニューやアクセス情報を、Flexboxを使って綺麗な「4カラムの横並び」に配置転換します */
  .footer-main {
    flex-direction: row;
    justify-content: space-between;
  }
  /* 共通：フッターPC4カラム比率（主要メニューリンクの幅を設定） */
  .footer-main .footer-col:nth-child(1),
  .footer-main .footer-col:nth-child(2) {
    width: 15%;
  }

  /* 右側のカラム3・4（拠点情報・アクセス情報）の横幅を「各32%」とワイドに広く確保します */
  .footer-main .footer-col:nth-child(3),
  .footer-main .footer-col:nth-child(4) {
    width: 32%; /* ここをしっかりと広げることで、長い住所やスクール名が不自然に途中で折り返すのを防ぎます */
  }
	/* 2番目の子要素（カラム2）の上側の隙間を打ち消す */
.footer-main > .footer-col:nth-child(2) {
  margin-top: 0;
}

}
/* ==========================================================================
   contact.html：体験ステップ ＆ 体験Q&A 1セクション完全統合スタイル
   ========================================================================== */
/* ご提示いただいた「#f7f9fc」の上品な薄いブルーグレー背景を1枚のセクション全体に適用します */
.contact-combined-section {
  background-color: #f7f9fc;
  padding: 60px 20px; /* スマホ版：上下60px、左右20pxのゆったりとした余白 */
}

/* ご提示いただいたお気に入りの数値：体験までの流れの下に付く注記文章のサイズ調整 */
.contact-step-notice {
  font-size: 16px;            /* 文字をしっかり読める大きめの16pxに設定 */
  color: #211E55;            /* スクールカラーの上品な濃い紺色 */
  text-align: center;         /* 中央寄せ */
  margin-top: 30px;           /* 上のカード図とのすき間 */
  max-width: 900px;           /* フォームの横幅とぴったり揃う、最大幅900pxの美しい制限 */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* 前半（ステップ）と後半（Q&A）の間に、画像通りの美しい距離を作るための見えない透明スペース */
.combined-section-divider {
  width: 100%;
  height: 1px;
  background-color: transparent;
  margin-top: 60px;
  margin-bottom: 60px; /* 上下に60pxずつ、合計120pxの美しい「タメ（空間）」を作ります */
}

/* 【PC版】画面幅768px以上での大画面レスポンシブ微調整 */
@media (min-width: 768px) {
  /* PCの大画面に合わせて、セクション全体の上下の余白をたっぷりと100pxに広げます */
  .contact-combined-section {
    padding: 100px 20px;
  }
  
  /* PC版：大画面での文字のバランスを考慮し、注記のサイズとすき間をご提示通りの数値に調整 */
  .contact-step-notice {
    font-size: 13px; 
    margin-top: 40px; 
  }
  
  /* 前半と後半を区切る透明スペースも、PCの大画面に合わせてさらに広く拡張します */
  .combined-section-divider {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}
/* ==========================================================================
   contact.html：お問い合わせフォーム（きれいな2カラムレスポンシブ）
   ========================================================================== */
.form-section { background-color: #022859; color: #ffffff; padding: 60px 20px; }
.form-container { width: 100%; max-width: 900px; margin: 0 auto; }
.form-section-title { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 35px; letter-spacing: 0.05em; }
.form-white-box { background-color: #ffffff; color: #333333; border-radius: 12px; padding: 20px; }
.form-row { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-bottom: 1px solid #eef2f6; }
.form-row.border-none { border-bottom: none; }
.form-label-area { display: flex; align-items: center; gap: 10px; }
.form-label-area label { font-weight: bold; font-size: 14px; color: #211e55; }

.badge-required, .badge-optional { display: inline-block; font-size: 11px; font-weight: bold; padding: 4px 10px; border-radius: 4px; text-align: center; flex-shrink: 0; background: linear-gradient(to bottom, #ffe45e, #f0cc1e); color: #211e55; }
.badge-optional { background: #eef2f6; color: #666666; }

.form-input-area { width: 100%; }
.form-input-area input[type="text"], .form-input-area input[type="email"], .form-input-area select, .form-input-area textarea { width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; background-color: #ffffff; box-sizing: border-box; font-family: inherit; transition: border-color 0.3s; }
.form-input-area input:focus, .form-input-area select:focus, .form-input-area textarea:focus { border-color: #ffcc00; outline: none; }

.form-checkbox-wrap, .form-radio-wrap { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 5px; }
.choice-label { font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.form-policy-text { font-size: 12px; line-height: 1.6; text-align: center; margin-top: 25px; color: rgba(255, 255, 255, 0.8); }
.form-policy-text a { color: #ffcc00; text-decoration: underline; }

.form-yellow-btn { display: block; background: linear-gradient(to bottom, #ffe45e, #f0cc1e); color: #211e55; border: none; font-size: 15px; font-weight: bold; width: 100%; max-width: 320px; padding: 15px 0; border-radius: 30px; cursor: pointer; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s; }
.form-yellow-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

@media (min-width: 768px) {
  .form-section { padding: 100px 20px; }
  .form-section-title { font-size: 32px; margin-bottom: 50px; }
  .form-white-box { padding: 40px 50px; }
  .form-row { flex-direction: row; align-items: flex-start; padding: 25px 0; }
  .form-label-area { width: 30%; padding-top: 10px; }
  .form-input-area { width: 70%; }
}
/* ==========================================================================
   contact.html：フォーム最下部（個人情報文章 ＆ 送信ボタン完全再現）
   ========================================================================== */
/* 個人情報の取り扱い文章全体の幅と位置の調整 */
.form-policy-block {
  width: 100%;
  max-width: 900px; /* 大画面でも文章が横に広がりすぎず綺麗に読める幅に制限します */
  margin: 35px auto 0 auto; /* 白い箱との間に程よいすき間を開け、中央寄せにします */
  text-align: left; /* 画像の指示通り、文章の始まりを左寄せにします */
}

/* 個人情報の取り扱いについて の小見出し */
.policy-title {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px; /* 下の本文とのすき間 */
  letter-spacing: 0.03em;
}

/* 個人情報の取り扱い本文 */
.policy-text {
  font-size: 11px; /* 画像に合わせた少し小さめの読みやすい文字サイズ */
  line-height: 1.8; /* 行の間隔をゆったり広げて読みやすくします */
  color: rgba(255, 255, 255, 0.85); /* ほんの少しだけ透明度を落として上品な白にします */
  margin: 0;
}

/* 黄色の送信ボタンを中央に配置するコンテナ */
.form-submit-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px; /* 上の文章との間のすき間 */
}

/* 画像デザイン通りの黄色い丸角送信ボタン */
.form-yellow-btn {
  display: block;
  background-color: #FFDB0D; /* アカデミーの象徴である鮮やかな黄色 */
  color: #211E55;            /* 文字色は背景のネイビーに映える濃い紺色 */
  border: none;              /* 標準のグレーのフチ線を消し去ります */
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  max-width: 340px;          /* 画像の比率に合わせた絶妙なボタンの最大横幅 */
  padding: 14px 0;           /* ボタンにしっかりとした厚みを持たせる上下の余白 */
  border-radius: 8px;        /* カプセル型ではなく、画像通りの上品な「少し控えめの丸角」に設定 */
  cursor: pointer;           /* マウスを乗せたときに指マークに変化させます */
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ボタンの下にうっすらと立体感を出す影を落とします */
  transition: all 0.3s;      /* 触ったときにじわっと反応させる滑らかさ */
}

/* ボタンにマウスのカーソルを乗せたとき（ホバー時）の演出 */
.form-yellow-btn:hover {
  background-color: #ffe45e; /* 色をパッと明るくして、しっかりと押せる感覚をユーザーに伝えます */
  transform: translateY(-1px); /* ほんの少しだけ上に浮き上がらせるプロの味付け */
}
@media (min-width: 768px) {
  /* 【PC版】大画面に合わせてすき間や文字サイズを微調整 */
  .form-policy-block {
    margin-top: 45px;
  }
  .policy-title {
    font-size: 14px;
  }
  .policy-text {
    font-size: 12px;
  }
  .form-submit-btn-wrap {
    margin-top: 50px;
  }
  .form-yellow-btn {
    font-size: 15px;
    max-width: 360px; /* パソコン画面に合わせてボタン幅を一回りワイドに */
  }
}
/* ==========================================================================
   contact.html：体験アコーディオン ＆ 箇条書き（注記カット・余白最適化版）
   ========================================================================== */
/* セクション全体の背景色 */
/*.bg-graphic-style {
  background-image: linear-gradient(rgba(247, 249, 252, 0.5), rgba(247, 249, 252, 0.5)), 
    url('../images/faq-bg.jpg');
  padding: 60px 20px;
}*/

/* 画像上部のメインメッセージテキストエリア */
.faq-top-intro-area {
  text-align: center;
  margin-bottom: 40px; /* アコーディオンの白い箱との間のすき間を、窮屈に見えない絶妙な距離（40px）に調整します */
}

/* 画像の中央にあるメインのメッセージ本文 */
.intro-main-box {
  font-size: 14px; /* パッとひと目で読みやすいように、スマホ版での文字サイズをわずかに大きく調整 */
  line-height: 2.1; /* 2本の文章が綺麗にまとまって見える、ゆったりとした心地よい行間設定 */
  color: #211e55; /* ご指示の画像に合わせて、テキスト全体の文字色をスクールカラーの上品な「濃い紺色」に統一して引き締めます */
  font-weight: bold; /* メッセージ性を高めるために、細字から「やや太字」に変更してデザインに負けない存在感を出します */
}
.intro-main-box p {
  margin-bottom: 6px; /* 1行目と2行目の間の絶妙な隙間 */
}

/* 画像下部の「体験について」エリア */
.faq-bottom-summary-area {
  text-align: center;
  margin-top: 65px; /* 2つのアコーディオンの白い箱との間の、広めのすっきりとしたすき間 */
}
.summary-headline {
  font-size: 26px; /* 画像のようなパッと大画面でも目を引く、大きな紺色の主役見出し */
  font-weight: bold;
  color: #211e55;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}
.summary-list {
  display: inline-block; /* 箇条書きの「・」の頭を左側で綺麗に揃えたまま、全体を画面の中央に寄せるプロの技 */
  text-align: left;
  list-style: none; /* ブラウザ標準の黒いドット（丸）を消し去ります */
  padding: 0;
  margin: 0;
}
.summary-list li {
  font-size: 14px;
  line-height: 2.1;
  color: #333333;
  position: relative;
  padding-left: 18px; /* 左側に引く「・」のマーカーを入れるための安全なスペース */
}
/* 各リストの先頭に、デザイン画像通りの綺麗な「・」をCSSの力だけで描写します */
.summary-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #333333;
  font-weight: bold;
}
@media (min-width: 768px) {
  /* 【PC版】パソコンの大画面に合わせて、すき間や文字サイズを画像通りの比率に自動微調整します */
  .bg-graphic-style {
    padding: 85px 20px;
  }
  .faq-top-intro-area {
    margin-bottom: 50px;
  }
  .intro-main-box {
    font-size: 15px; /* PC版の大画面で読んだときに最も美しく整う文字の大きさ */
  }
  .faq-bottom-summary-area {
    margin-top: 80px;
  }
  .summary-headline {
    font-size: 32px; /* パソコン画面で圧倒的な美しさを見せる大きな見出しサイズ */
  }
}

/* ==========================================================================
   共通パーツ：画面右端の追従バナー ＆ ↑ TOPボタン（黄色バナー高さ引き上げ版）
   ========================================================================== */
/* 2つのボタンを右端に配置する、見えない固定コンテナ */
.right-floating-sticky-area {
  position: fixed;
  right: 0; 
  
  /* 下からの高さを「30px ➡ 120px」へ大きく引き上げ、黄色いボタンをグッと上に持ち上げます */
  bottom: 120px; 
  
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
  gap: 25px; 
  z-index: 999; 
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s ease; 
}
/* 1. 体験についての黄色い縦書きフローティングボタン */
.floating-banner-yellow {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFDB0D; 
  color: #211E55;
  width: 50px !important; 
  padding: 35px 0;           
  border-radius: 12px 0 0 12px; 
  text-decoration: none;
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15); 
  transition: all 0.3s ease;
}
.floating-banner-yellow .vertical-text {
  writing-mode: vertical-rl;
  text-combine-upright: none;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.12em;
}
.floating-banner-yellow:hover {
  background-color: #ffe45e;
  transform: translateX(-5px); 
  width: 88px !important; 
}

/* 2. スクロール出現する正円の「↑ TOP」ボタン */
.go-to-top-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #211e55;
  width: 58px;
  height: 58px;
  border-radius: 50%; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: all 0.3s ease;
  margin-right: 10px; 
  
  /* 【最重要】ここを追加：黄色いボタンが上に持ち上がったため、丸いTOPボタンだけを画面の底（元の押しやすい位置）に独立して残すために、下方向に「90px」分だけ強制的に引き戻します */
  position: relative;
  top: 90px; 
}
.go-to-top-btn .arrow-up {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
}
.go-to-top-btn .btn-text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.go-to-top-btn:hover {
  background-color: #f7f9fc;
  transform: scale(1.05) translateY(85px); /* 元の位置を維持したまま少し拡大するホバー調整 */
}

/* 画面を少しスクロールしてJSの「is-show」というクラスがコンテナに付いた瞬間に、同時に出現します */
.right-floating-sticky-area.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1240px) {
  /* PC版：大画面に合わせて、下からの高さをさらに心地よいバランスに自動微調整します */
  .right-floating-sticky-area {
    right: 0;
    bottom: 140px;
  }
.floating-banner-yellow {
  width: 76px !important; 
  padding: 35px 0;
}
.floating-banner-yellow .vertical-text {
  font-size: 16px;
}
}
/* ==========================================================================
   バグバスター：↑ TOPボタンのホバー時の位置ズレ・沈み込みを完全に修正
   ========================================================================== */
/* ホバー時に余計な縦移動をさせず、位置をガチッと固定したまま綺麗に1.05倍にふんわり拡大させます */
.go-to-top-btn:hover {
  transform: scale(1.05) !important; /* 最優先で沈み込みのバグを上書き消去します */
  background-color: #f7f9fc !important;
}

/* ==========================================================================
   バグバスター：体験についてボタンのホバー時右端隙間バグを完全に修正
   ========================================================================== */
/* ホバーしたときに左にスライドさせるのではなく、ボタン自体の横幅を「64px ➡ 74px」へと
   左側に向かってグッと広げる設定にします。これにより、右端は画面に100%密着したまま、
   横幅だけがワイドに広がる洗練されたホバー演出になり、隙間バグが完全に消滅します */
.floating-banner-yellow:hover {
  transform: none !important;      /* 左側へ隙間を作ってずれる古い命令を完全に無効化します */
  width: 74px !important;          /* 触った瞬間に横幅を10pxワイドに広げます */
  background-color: #ffe45e !important;
}

/* ==========================================================================
   下層ページ共通：紹介文章入りメインビジュアル（デザイン完全再現・1本化完了）
   ========================================================================== */
/* about、contact、index以外の全下層ページ（faq、price、modelなど）で使い回せる共通の器です。
   ファイル内でダブっていた古いコンパクト版の記述をすべて消去し、最新仕様に集約しました。 */
.sub-page-mv {
  position: relative;
  /* 背景画像は最新デザインに合わせて「mv-bg.png」に統一しています */
  background-image:/* linear-gradient(rgba(23, 28, 76, 0.85), rgba(23, 28, 76, 0.85)),*/ url("../images/title-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  /* スマホ版：ヘッダーの白い帯の真下に潜り込みつつ、文章が入るため上下の余白をゆったり「150px」に広げます */
  padding: 105px 0 15px 0; 
  text-align: left; /* Figmaのデザイン通り、中央寄せではなく「左寄せ」にします */
}

/* ナビゲーションの横幅の端と、タイトルの左端のラインが寸分違わぬ綺麗な一本線で揃うようにします */
.sub-mv-inner {
  width: 100%;
}

/* 「よくある質問 ｜ Q&A」の大見出し */
.sub-mv-title {
  font-size: 28px; /* スマホ版での見やすい文字の大きさ */
  font-weight: bold;
  letter-spacing: 0.03em;
  margin: 0 0 20px 0; /* 下の紹介文章との間に20pxのきれいなすき間を作ります */
  padding: 0;
  line-height: 1.3;
}

/* 見出しの間にある「｜」の縦棒マーク */
.sub-mv-title-pipe {
  margin: 0 8px; /* 左右に程よいすき間を開けます */
  font-weight: normal;
  opacity: 0.7;
}

/* 見出しの右側に並ぶ英語サブ（Q&Aなど） */
.sub-mv-title-sub {
  font-size: 24px; /* 日本語よりわずかに小さく上品に */
  font-weight: bold;
}

/* タイトル下の紹介文章エリア */
.sub-mv-lead-text {
  font-size: 14px; /* スマホ版での読みやすい標準サイズ */
  line-height: 1.8; /* 2行の文章が綺麗にまとまって見える心地よい行間設定 */
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.95); /* ほんの少しだけ不透明度を落として、洗練された白にします */
}
.sub-mv-lead-text p {
  margin-bottom: 4px; /* 1行目と2行目の間の細かなすき間 */
}
.sub-mv-lead-text p:last-child {
  margin-bottom: 0;
}

/* 【PC版】画面幅768px以上での大画面レスポンシブ調整（ダブっていたPC設定もここに綺麗に合体） */
@media (min-width: 768px) {
  .sub-page-mv {
    /* PCの大画面で、ヘッダーの下に画像通りの広大で美しいディープネイビーの空間（200px）を確保します */
    padding: 120px 0 25px 0; 
  }
  .sub-mv-title {
    font-size: 38px; /* パソコン画面でパッと目を引く、Figma通りのしっかりとした大きな見出しサイズ */
    margin-bottom: 24px;
  }
  .sub-mv-title-sub {
    font-size: 34px;
  }
  .sub-mv-lead-text {
    font-size: 18px; /* 画像通りの、パソコンの大画面でも圧倒的に読みやすいゆったりとした文字サイズへ引き上げます */
    line-height: 1.9;
  }
}
/* ==========================================================================
   faq.html：メインコンテンツエリア背景ネイビー化 ＆ 文字色白反転
   ========================================================================== */
/* よくある質問ページのメインコンテンツエリアを、美しいディープネイビー（#022859）に変更します */
.faq-page-section {
  background-color: #022859 !important; /* 最優先で背景色を濃いネイビーに塗り替えます */
}

/* 背景が暗くなったのに合わせて、アコーディオン（白い箱）の外側のテキストをクッキリ白文字にします */
.faq-page-section .faq-lead-title,
.faq-page-section .faq-lead-sub,
.faq-page-section .intro-main-box {
  color: #ffffff !important; /* 導入文などのテキストをすべて真っ白に反転 */
}

/* アコーディオンの「Q.」の文字と「質問本文」も、ネイビー背景に映える美しい白に変更します */
.faq-page-section .faq-q-prefix,
.faq-page-section .faq-q-text {
  color: #211e55 !important; /* 注意：白いカードの内側（Q.と質問文）は、元通り読みやすい濃い紺色をキープします */
}

/* アコーディオンの右側にあるプラス・マイナスの「＋線」の色調整 */
.faq-page-section .faq-icon::before,
.faq-page-section .faq-icon::after {
  background-color: #211e55 !important; /* 白い箱の中のアイコンなので濃い紺色をキープ */
}

/* カテゴリー見出し（英語 ＋ 日本語 横並びデザイン完全再現） */
/* 見出し全体を包むヘッダーの箱（下の白いアコーディオンボックスの最大幅800pxとピッタリ合わせます） */
.faq-category-header {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 10px auto; /* 画面の真ん中に寄せつつ、下のアコーディオンとの間に20pxの隙間を作ります */
  text-align: left;
  
  display: flex;
  flex-direction: row;      /* 縦積みを解除し、画像通りの「横並び」に配置転換します */
  align-items: center;    /* 文字サイズが違っても、英語と日本語の「文字の底辺」がピシッと一直線に揃うプロの技 */
  gap: 16px;                /* SECTION 1 と日本語の間の、画像通りの程よい横のすき間 */
}

/* 左側の英語表記（例: SECTION 1） */
.faq-section-num {
  font-size: 12px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6); /* ネイビー背景に美しく映えるうっすら半透明の薄グレー */
  letter-spacing: 0.05em;
  text-transform: uppercase;       /* 小文字で書いても自動で美しい大文字に変換するお守り */
  flex-shrink: 0;                  /* 画面が狭くなっても英語の幅が潰れないためのお守り */
}

/* 右側の日本語表記（例: 初めて方へ） */
.faq-category-title {
  font-size: 24px;                 /* スマホ版での見やすく力強い文字サイズ */
  font-weight: bold;
  color: #ffffff;                  /* クッキリとした真っ白な文字 */
  margin: 0;
  padding: 0;
}

/* 【PC版】画面幅768px以上での大画面調整 */
@media (min-width: 768px) {
  .faq-category-header {
    margin-bottom: 14px;           /* パソコン画面に合わせて、下のカードとのすき間を30pxにゆったり広げます */
    gap: 20px;                     /* 大画面に合わせて横のすき間も少し広げます */
  }
  .faq-section-num {
    font-size: 20px;               /* PC版でのバランスの良い英語サイズ */
  }
  .faq-category-title {
    font-size: 32px;               /* パソコンの大画面で圧倒的に美しく映える見出しサイズへ引き上げます */
  }
}
/* ==========================================================================
   model.html：メインコンテンツエリア背景薄グレー化調整
   ========================================================================== */
/* 育成モデルページのメインエリア（.model-detail-section）を、ご指示通りの上品な薄グレー（#F2F2F2）に塗り替えます。
   これで、先ほど作成した3色カードや最下部のネイビー線メッセージの輪郭がクッキリと引き締まります */
.model-detail-section {
  background-color: #F2F2F2 !important; /* 最優先でこのページだけの背景色を上書き指定します */
}

/* ==========================================================================
   model.html：3ステップ詳細スペックカード（Figma画像デザイン完全再現）
   ========================================================================== */
/* カード全体を横一列（スマホは縦一列）に綺麗に整列させるコンテナ */
.model-cards-row-wrap {
  display: flex;
  flex-direction: column; /* スマホ版：まずは縦に1列に積みます */
  align-items: center;
  width: 100%;
  max-width: 1080px; /* 大画面でFigmaの比率を保つための最大幅 */
  margin: 0 auto;
}

/* 3色共通のカードの土台 */
.model-spec-card {
  width: 100%;
  max-width: 330px; /* 1マスの綺麗な幅 */
  border-radius: 12px; /* 画像通りの上品な角丸 */
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* 各カラーバリエーションの背景色と文字色の設定 */
.stage-color-navy { background-color: #1a1e53; color: #ffffff; }
.stage-color-green { background-color: #008200; color: #ffffff; }
.stage-color-gold { background-color: #FFF2A1; color: #b0964c; } /* STEP3は文字色を少し濃い金（カーキゴールド）にして読みやすく調整 */

/* STEP3の背景色だけを、画像通りのリッチな淡いグラデーションに上書きします */
.stage-color-gold {
  background: linear-gradient(135deg, #efe8a3, #EAD78D);
}

/* カードの一番上のヘッダー（STEP表記と半透明バッジ） */
.spec-card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.spec-step-num {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.05em;
  opacity: 0.9;
}
/* 全員参加型 / 選抜型 の半透明バッジ */
.spec-badge-type {
  font-size: 10px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.25); /* 背景色に綺麗に馴染むプロの半透明白バッジ */
}
/* 金色カードの時だけ、バッジの中の文字色を読みやすく濃い色に自動調整します */
.stage-color-gold .spec-badge-type {
  background-color: rgba(255, 255, 255, 0.45);
  color: #7c621d;
}

/* 各種テキストサイズ（Figma比率再現） */
.spec-title-en { font-size: 15px; font-weight: bold; letter-spacing: 0.02em; margin-bottom: 4px; }
.spec-title-ja { font-size: 22px; font-weight: bold; margin-bottom: 12px; letter-spacing: 0.03em; }

/* 金色カード内の文字色の個別上書き（画像通りの白文字） */
.stage-color-gold .spec-title-en { color: #ffffff; }
.stage-color-gold .spec-title-ja { color: #ffffff; }

/* サブキャッチリード */
.spec-lead-summary { font-size: 12px; font-weight: normal; margin-bottom: 15px; opacity: 0.95; }
.stage-color-gold .spec-lead-summary { color: #ffffff; }

/* 最大の特徴：中の3本の白い座布団帯リスト */
.spec-white-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px; /* 帯同士の隙間 */
}
.spec-white-list li {
  background-color: #ffffff;
  color: #211e55; /* 文字色は引き締まる濃いネイビー */
  font-size: 13px;
  font-weight: bold;
  padding: 8px 10px;
  border-radius: 4px; /* 控えめな美しい角丸 */
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
/* 金色カードの時だけ、白い帯の文字色を専用のゴールド色に染めます */
.stage-color-gold .spec-white-list li {
  color: #c2ae70;
}

/* カードの最下部の一言メッセージ */
.spec-card-footer-text {
  font-size: 11px;
  opacity: 0.8;
  margin: 0;
	font-weight: bold;
}
.stage-color-gold .spec-card-footer-text {
  color: #ffffff;
  opacity: 0.9;
}

/* ==========================================================================
   【PC版】画面幅768px以上での大画面横並び展開（Figma完全再現）
   ========================================================================== */
@media (min-width: 768px) {
  /* スマホ版の縦積みを解除し、画像通りの「美しい3カラムの横並び」に一発配置転換します */
  .model-cards-row-wrap {
    flex-direction: row;
    justify-content: center;
    align-items: stretch; /* 3つのマスの縦の長さを自動でピシッと均等に揃えます */
  }
  /* 2. カード自体の横幅をパーセント（30%）ではなく、Figmaの設計通りの固定幅（320px）にガチッと固定します。
        これでブラウザが余白の計算で迷わなくなり、マイナスマージンが100%正確に効くようになります */
  .model-cards-row-wrap .model-spec-card {
    width: 320px; 
    flex-shrink: 0;
  }
  .model-spec-card {
    width: 30%; /* 3枚が綺麗に収まる横幅比率 */
    max-width: 320px;
    padding: 30px 20px;
  }
}

/* ==========================================================================
   model.html：カードの間のグレー矢印（サイズダウン・上下中央センター揃え版）
   ========================================================================== */
/* スマホ版（縦積み時）：上下のカードを引き寄せて綺麗に吸着させます */
.model-spec-arrow {
  width: 30px; 
  height: 20px;
  position: relative;
  background-color: #b3b3b3; 
  z-index: 10;               
  flex-shrink: 0;
  margin: -10px 0 10px 0; 
}

/* スマホ版：下向きの三角形の頭部分 */
.model-spec-arrow::after {
  content: "";
  position: absolute;
  bottom: -12px; 
  left: 50%;
  transform: translateX(-50%);
  border-left: 25px solid transparent; 
  border-right: 25px solid transparent;
  border-top: 15px solid #b3b3b3; 
}

/* ==========================================================================
   【PC版】画面幅768px以上での横向き矢印のサイズ・上下中央揃えの決定版
   ========================================================================== */
@media (min-width: 768px) {
  /* コンテナ全体の整列ルール（中央寄せ吸着） */
  .model-cards-row-wrap {
    flex-direction: row;
    justify-content: center; 
    align-items: stretch;
  }
  
  /* カード自体の横幅（固定幅320px） */
  .model-cards-row-wrap .model-spec-card {
    width: 320px; 
    flex-shrink: 0;
  }

  /* PC版：小さくスマートになった矢印を、元の美しい「上下中央（センター）」に戻します */
  .model-spec-arrow {
    /* ⬇️ここを修正：一番上（flex-start）を解除し、カードの「上下のど真ん中（center）」へ戻します */
    align-self: center; 
    
    width: 25px;   
    height: 30px;  
    
    /* ⬇️ここを修正：中央揃えに戻したため、上マージン（52px）を完全に消去し、
       カード同士の美しい隙間を維持して潜り込ませる左右マージン（-6px）のみにスッキリとリセットします */
    margin: 0 -6px; 
    
    background-color: #b3b3b3;
  }
  
  /* PC版：右向き（横向き）のシャープな三角形の頭部分 */
  .model-spec-arrow::after {
    bottom: auto;
    left: auto;
    right: -12px; 
    top: 50%;
    transform: translateY(-50%);
    border-left: 15px solid #b3b3b3; 
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: none;
  }
}
/* ==========================================================================
   model.html：最下部メッセージエリア（左右から伸びる水平線完全再現）
   ========================================================================== */
.model-bottom-message-box {
  width: 100%;
  max-width: 1080px; /* 画面が広がりすぎても綺麗に収まるようにFigmaの幅と合わせます */
  margin: 60px auto 0 auto;
  padding: 0 20px; /* スマホ画面で端に文字がくっつくのを防ぐ安全クッション */
  
  display: flex;
  align-items: center; /* 文字と、左右から伸びる線を上下の「中央」でピシッと一直線に揃えます */
  justify-content: center;
  gap: 20px; /* 文字と、左右の線の始まりとの間の絶妙なすき間（お好みに合わせて調整可能） */
}

.model-bottom-message-box p {
  font-size: 16px; /* スマホ版での読みやすい太字サイズ */
  font-weight: bold;
  color: #211E55; /* スクールカラーの濃い紺色 */
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
  white-space: nowrap; /* スマホ版でも文字の途中でだらしなく改行されず、1行で読ませる設定 */
  flex-shrink: 0; /* 線に押し潰されて文字の横幅が狭まらないようにする絶対的なお守り */
}

/* 最大の特徴：Flexboxの性質を利用して、文字の「左側」と「右側」の余った空間に
   画面の端まで100%ぴったり自動で広がる濃紺の水平線をリアルタイムで描写します */
.model-bottom-message-box::before,
.model-bottom-message-box::after {
  content: "";
  flex-grow: 1; /* 左右に余った余白スペースを、この線が残さず100%すべて使い切って横に伸びます */
  height: 1.5px; /* 画像通りの、太すぎず細すぎない上品な線の厚み */
  background-color: #211e55; /* 線の色（文字と同じ濃い紺色） */
}

/* 【PC版】画面幅768px以上での大画面調整 */
@media (min-width: 768px) {
  .model-bottom-message-box {
    margin-top: 80px;
    gap: 30px; /* パソコンの大画面に合わせて、文字と線の間のすき間を少し広げて開放感を出します */
  }
  .model-bottom-message-box p {
    font-size: 24px; /* パソコン画面で圧倒的なアイキャッチ効果を放つ大きな文字サイズへ */
  }
}
/* ==========================================================================
   model.html：育成モデル詳細ページ・全レイアウト完全統合スタイル（上下入れ替え版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. セクション背景・全体レイアウトの出し分け
   -------------------------------------------------------------------------- */
/* 前半（3色横並び＋最下部メッセージ）：ページトップに配置し、背景は明るい薄グレーを維持 */
.model-section-top-gray {
  background-color: #F2F2F2 !important;
  padding: 60px 20px 60px 20px;
  width: 100%;
}
/* 後半（導入＋STEP1縦長カード）：ページの後半に配置し、背景をご指示通りのディープネイビーにします */
.model-section-bottom-navy {
  background-color: #022859 !important;
  padding: 80px 20px 90px 20px;
  width: 100%;
}
.model-section-top-gray .container { padding: 0; }
.model-section-bottom-navy .container { padding: 0; }

/* --------------------------------------------------------------------------
   B. 前半：3色横並びミニスペックカード ＆ 上下中央スマート矢印
   -------------------------------------------------------------------------- */
.model-cards-row-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.model-spec-card {
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.stage-color-navy { background-color: #1a1e53; color: #ffffff; }
.stage-color-green { background-color: #008200; color: #ffffff; }
.stage-color-gold { background: linear-gradient(135deg, #FFF7C2, #EAD78D); color: #7c621d; }

.spec-card-header { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 15px; }
.spec-step-num { font-size: 11px; font-weight: bold; letter-spacing: 0.05em; opacity: 0.9; }
.spec-badge-type { font-size: 10px; font-weight: bold; padding: 3px 10px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.25); color: #ffffff; }
.stage-color-gold .spec-badge-type { background-color: rgba(255, 255, 255, 0.45); color: #7c621d; }

.spec-title-en { font-size: 15px; font-weight: bold; letter-spacing: 0.02em; margin-bottom: 4px; }
.spec-title-ja { font-size: 22px; font-weight: bold; margin-bottom: 12px; letter-spacing: 0.03em; }
.stage-color-gold .spec-title-en, .stage-color-gold .spec-title-ja { color: #ffffff; }
.spec-lead-summary { font-size: 12px; margin-bottom: 15px; opacity: 0.95; }
.stage-color-gold .spec-lead-summary { color: #ffffff; }

.spec-white-list { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-direction: column; gap: 6px; }
.spec-white-list li { background-color: #ffffff; color: #211e55; font-size: 13px; font-weight: bold; padding: 8px 10px; border-radius: 4px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); }
.stage-color-gold .spec-white-list li { color: #c2ae70; }
.spec-card-footer-text { font-size: 13px; opacity: 0.8; margin: 0; }
.stage-color-gold .spec-card-footer-text { color: #ffffff; }

/* 上下中央センター揃えのスマートグレー矢印パーツ */
.model-spec-arrow {
  width: 30px; 
  height: 20px;
  position: relative;
  background-color: #b3b3b3; 
  z-index: 10;               
  flex-shrink: 0;
  margin: -10px 0 10px 0; 
}
.model-spec-arrow::after {
  content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 15px solid #b3b3b3;
}

/* --------------------------------------------------------------------------
   C. 前半：最下部メッセージ（左右から横幅いっぱいに伸びる水平線）
   -------------------------------------------------------------------------- */
.model-bottom-message-box {
  width: 100%;
  max-width: 1080px;
  margin: 60px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.model-bottom-message-box p {
  font-size: 16px; font-weight: bold; color: #211e55; line-height: 1.6; letter-spacing: 0.05em; margin: 0; text-align: center; white-space: nowrap; flex-shrink: 0;
}
.model-bottom-message-box::before,
.model-bottom-message-box::after {
  content: ""; flex-grow: 1; height: 1.5px; background-color: #211e55;
}

/* --------------------------------------------------------------------------
   D. 後半：最上部・導入メッセージブロック
   -------------------------------------------------------------------------- */
.model-top-intro-block {
  text-align: center;
  margin-bottom: 50px;
  color: #ffffff;
}
.model-intro-headline {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}
.model-intro-text-wrap {
  font-size: 14px;
  line-height: 2.2;
  font-weight: normal;
  opacity: 0.95;
}
.model-intro-text-wrap p { margin-bottom: 25px; }
.model-intro-text-wrap p:last-child { margin-bottom: 0; }
.model-intro-text-wrap .font-accent { font-weight: bold; }


/* ==========================================================================
   【PC版】画面幅768px以上でのレスポンス・完全横並び配置への修正
   ========================================================================== */
@media (min-width: 768px) {
  /* 前半：薄グレーセクション全体のPC用上下余白 */
  .model-section-top-gray { 
    padding: 90px 20px; 
  }
  
  /* 1. 3つのカードと矢印を、中央に吸着させたまま「絶対に変形させず横一列」に固定します */
  .model-cards-row-wrap { 
    flex-direction: row !important; /* 縦並び指令を最優先で完全に打ち消します */
    justify-content: center; 
    align-items: stretch; /* 3つのカードの縦の長さをピシッと均等に揃えます */
    flex-wrap: nowrap; /* 画面が狭くなっても絶対に下の行へ折り返さないお守り */
  }
  
  /* 2. カードの横幅をパーセント（30%）に変更し、画面幅に合わせて滑らかに伸縮（伸縮自在）させます。
        これで画面が狭いノートパソコンでも、外側に押し出されずに美しい横並びが100%キープされます */
  .model-cards-row-wrap .model-spec-card { 
    width: 30% !important; 
    max-width: 320px; /* 画面が広がりすぎたときは、Figma通りの320pxで美しくブレーキをかけます */
    flex-shrink: 1; /* 画面幅に合わせてスマートに縮むことを許可 */
  }
  
  /* 3. 小さめの横向き（右向き）グレー矢印の位置バランスを、カードの伸縮に合わせて再固定します */
  .model-spec-arrow {
    align-self: center; 
    width: 25px; 
    height: 30px; 
    margin: 0 -8px; /* 左右のカードの下に心地よく潜り込ませるマイナスマージン */
    background-color: #b3b3b3;
    flex-shrink: 0; /* 矢印の形だけは絶対に押し潰されないように死守 */
  }
  .model-spec-arrow::after {
    bottom: auto; left: auto; right: -12px; top: 50%; 
    transform: translateY(-50%);
    border-left: 15px solid #b3b3b3; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-right: none;
  }
  
  /* 最下部メッセージのPC版の距離と文字サイズ調整 */
  .model-bottom-message-box { 
    margin-top: 80px; 
    gap: 30px; 
  }
  .model-bottom-message-box p { 
    font-size: 24px; 
  }
}

/* ==========================================================================
   model.html：白いリッチ解説カード（1200pxコンテナ最大幅・完全最適化版）
   ========================================================================== */
/* 白いカードを縦に綺麗に積み重ねるコンテナ */
.model-rich-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  
  /* ⬇️ここを修正：最大幅を「860px ➡ 1200px」へ一気に拡大し、共通コンテナと横幅を揃えます */
  max-width: 1200px; 
  
  margin: 0 auto;
}

/* 白い大きなリッチカード本体の土台 */
.model-rich-card {
  position: relative !important; 
  background-color: #F5F4FF; 
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  min-height: 480px; 
}

/* 左側のテキストコンテンツエリア（スマホ版） */
.card-text-content-left {
  position: relative;
  z-index: 5; /* 文字を常に最前面に引き上げて可読性を死守 */
  text-align: left;
}
/* 最大の特徴：スマホ版（縦積み画面）では少年の画像を完全に消去して、テキストに集中させます */
.card-bg-player-img {
  display: none !important; /* ⬇️スマホの狭い画面では画像を完全に非表示（非表示）にします */
}
/* 通常の文字装飾パーツ（ここはそのままキープ） */
.card-program-en { font-size: 20px; font-weight: bold; color: #1a1e53; letter-spacing: 0.02em; margin-bottom: 2px; }
.card-program-ja { font-size: 16px; font-weight: bold; color: #444444; margin-bottom: 30px; }
.card-sub-headline { font-size: 14px; font-weight: bold; color: #1a1e53; margin: 25px 0 12px 0; padding-left: 10px; border-left: 3.5px solid #FFDB0D; }
.card-desc-paragraph { font-size: 13px; line-height: 1.7; color: #333333; margin-bottom: 15px; }
.card-desc-paragraph .font-quote { font-weight: bold; color: #1a1e53; display: block; margin: 6px 0; }
.card-number-list { list-style: none; padding: 0; margin: 15px 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.card-number-list li { background-color: #ffffff; color: #1a1e53; font-size: 13px; font-weight: bold; padding: 10px 15px; border-radius: 4px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); }
.card-number-list li .num-box { color: #b3b3b3; font-weight: bold; display: inline-block; width: 15px; }
.card-dot-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.card-dot-list li { font-size: 13px; font-weight: bold; color: #333333; line-height: 1.6; }
/* 1. 英語メインタイトル、および黄色の縦線が入った小見出しの文字色をグリーンにします */
.item-stage-green .card-program-en,
.item-stage-green .card-sub-headline {
  color: #008200 !important;
}
/* ==========================================================================
   model.html：STEP2解説カード専用 カラーリング指定（ピンポイントグリーン版）
   ========================================================================== */
.item-stage-green {
  margin-top: 30px !important; 
}

/* （これ以降の .item-stage-green .card-program-en などの記述はそのまま変更なし） */

/* 2. ご指示の追加：1, 2, 3 の四角い白座布団リストの中の文字色も、美しいグリーンへ上書きします */
.item-stage-green .card-number-list li {
  color: #008200 !important;
}

/* 3. 本文の中のエディー氏の英語引用文（.font-quote）も、濃紺から美しいグリーンへ変更します */
.item-stage-green .card-desc-paragraph .font-quote {
  color: #008200 !important;
}
/* ==========================================================================
   model.html：STEP3解説カード専用 カラーリング指定（上品なゴールドグラデ版）
   ========================================================================== */
/* STEP3のカードだけ、高級感あふれる上品な淡いゴールドグラデーション背景に変更します。
   あわせて、2枚目のカードとの間にも、ご指示通り「30pxの美しいすき間」を確実に作ります */
.item-stage-gold {
  margin-top: 30px !important; /* 上側に30pxのすき間を強制的に作成 */
}

/* ご指示通り、先ほどSTEP2でグリーンにした箇所だけを、深みのあるゴールド（#B67715）へと変更します */

/* 1. 英語メインタイトル、および黄色の縦線が入った小見出しの文字色をゴールドにします */
.item-stage-gold .card-program-en,
.item-stage-gold .card-sub-headline {
  color: #B67715 !important;
}

/* 2. 1, 2, 3 の四角い白座布団リストの中の文字色も、美しいゴールドへ上書きします */
.item-stage-gold .card-number-list li {
  color: #B67715 !important;
}

/* 3. 本文の中の英語引用文（※今後テキストが入った場合の安全策）も、美しいゴールドへ変更します */
.item-stage-gold .card-desc-paragraph .font-quote {
  color: #B67715 !important;
}

/* 注意：日本語タイトル（.card-program-ja）、解説文や箇条書きドットリストの文字色は、
   STEP1・2と同じ読みやすい濃いグレーを100%維持し、抜群の可読性とメリハリを守ります */

/* ==========================================================================
   【PC版】画面幅768px以上での 1200pxワイドスケール最適化調整
   ========================================================================== */
@media (min-width: 768px) {
  .model-rich-card {
    padding: 60px 70px; /* 横幅の広がりに合わせて、内側の余白もさらにたっぷりと広げて贅沢な空間を作ります */
    flex-direction: row;
    justify-content: space-between;
    min-height: 540px; 
  }
  
  /* ⬇️ここを修正：カードが1200pxに広がったため、左側のテキスト幅のゆとりを「60% ➡ 70%」へワイドに拡張します。
     これで、長い文章やエディー氏の英語引用文も1行にスッキリ収まり、より読みやすくなります */
  .card-text-content-left {
    width: 70%;
  }
  
 /* PC版：パソコンの大画面になった瞬間、非表示を解除して右下に100%クッキリと少年を出現させます */
  .card-bg-player-img {
    display: block !important;    /* ⬇️パソコン画面でのみ画像を堂々と復活（出現）させます */
    position: absolute !important; 
    right: 0;    
    bottom: 0;   
    width: 50%;  
    max-width: 700px;
    margin: 0 !important;
    opacity: 1 !important; 
    z-index: 1; 
  }
  
  .card-program-en { font-size: 26px; } /* ワイド画面に合わせてタイトル文字もわずかに大きくスケールアップ */
  .card-program-ja { font-size: 20px; margin-bottom: 35px; }
  .card-sub-headline { font-size: 16px; margin: 30px 0 15px 0; }
  .card-desc-paragraph { font-size: 14px; line-height: 1.8; }
  .card-number-list { margin: 20px 0; }
  .card-number-list li { font-size: 14px; padding: 12px 20px; }
  .card-dot-list li { font-size: 14px; }
}
/* ==========================================================================
   model.html：なぜ育成コース制（専用クラス独立・背景画像バグ完全消滅版）
   ========================================================================== */
/* HTML側から共通の画像クラスを外したため、裏側から写真が漏れてくるバグが永久に消滅しました。
   セクション全体を、ご指示通りのフラットで均一な薄グレー（#F2F2F2）のみで100%固定します */
.model-reason-section {
  background-color: #F2F2F2; 
  padding: 45px 0 0 0; /* 左右の余白を0にし、背景色の帯と線が画面幅いっぱいに広がるようにします */
  width: 100%;
}

/* 中央配置の濃紺大見出し */
.model-reason-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a1e53;
  text-align: center;
  margin-top: 0;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
  padding: 0 20px;
}

/* アコーディオン全体を包み込むコンテナ */
.model-reason-accordion-wrap {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* 各質問行の土台：標準時の背景色（#F5F4FF）と区切り線を画面の横幅いっぱいに100%広げます */
.reason-faq-item {
  width: 100%;
  background-color: #F5F4FF; /* 標準時は #F5F4FF のフラットな帯 */
  border-bottom: 1px solid #cbd5e1; 
  overflow: hidden;
  transition: background-color 0.3s ease; /* 背景色が白へじわっと変わる滑らかなアニメーション */
}
.reason-faq-item:first-child {
  border-top: 1px solid #cbd5e1;
}

/* テキストの表示の限界幅（最大960px）をガチッと固定するインナー制限 */
.reason-faq-question,
.reason-faq-answer {
  width: 100%;
  max-width: 960px; /* テキストの読みやすい範囲は最大960pxをキープ */
  margin: 0 auto;   /* 画面の真ん中に寄せます */
  box-sizing: border-box;
}

/* 質問エリアのパディング */
.reason-faq-question {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 22px 20px;
  cursor: pointer;
}

/* 01の数字とテキストを美しく横に並べる箱 */
.reason-faq-q-box {
  display: flex;
  align-items: center;
  gap: 30px; 
  text-align: left;
  width: 100%;
  overflow: hidden;
}

/* プレフィックス（01、02 などのナンバリング数字） */
.reason-faq-q-prefix {
  font-size: 16px;
  font-weight: bold;
  color: #1a1e53;
  flex-shrink: 0;
}

/* 質問のメインタイトルテキスト：絶対に途中で折り返させません */
.reason-faq-q-text {
  font-size: 16px;
  font-weight: bold;
  color: #1a1e53;
  letter-spacing: 0.03em;
  white-space: nowrap; /* どんな画面幅でも絶対に文字を折り返させない防衛命令 */
  text-overflow: ellipsis;
  overflow: hidden;
}


/* 最初は高さを「0」にして綺麗に隠す回答エリア */
.reason-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

/* 回答の中のテキスト文章の装飾 */
.reason-faq-a-text {
  padding: 5px 20px 25px 65px; /* 左側に余白を作り、上の「01」を避けて文字の縦ラインを揃えます */
  text-align: left;
  font-size: 13px;
  line-height: 1.8;
  color: #444444;
}
.reason-faq-a-text p {
  margin-bottom: 8px;
}
.reason-faq-a-text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   カーソルが乗った（hover）瞬間の全自動背景変化・開閉連動システム
   ========================================================================== */
/* カーソルが乗って答えが開くと、行全体の背景色を画面横幅いっぱいに真っ白（#FFFFFF）へ変身させます */
.reason-faq-item:hover {
  background-color: #ffffff;
}

/* カーソルが乗った時、中身の文章をスーッと出現させます */
.reason-faq-item:hover .reason-faq-answer {
  max-height: 300px; /* 文章が収まる高さを解放 */
  transition: max-height 0.4s ease-in-out;
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面調整
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .model-reason-section { padding: 55px 0 0 0; }
  .model-reason-main-title { font-size: 32px; margin-bottom: 35px; }
  
  .reason-faq-question { padding: 26px 20px; }
  .reason-faq-q-prefix { font-size: 20px; }
  .reason-faq-q-text { font-size: 20px; } 
  
  .reason-faq-a-text {
    font-size: 15px;
    line-height: 2.0;
    padding: 10px 20px 30px 85px; /* PCの大画面に合わせて、文頭の揃えラインを「85px」へと自動最適化 */
  }
}

/* ==========================================================================
   model.html：次のステップへ ＆ 最後に（デザイン画像完全再現スタイル）
   ========================================================================== */
/* セクション全体：画像通りの深いディープネイビー（#022859）背景 */
.model-next-step-section {
  background-image: linear-gradient(rgba(2, 40, 89, 0.65), rgba(2, 40, 89, 0.65)), url('../images/next-step-bg.png');
  background-size: cover;       /* 写真を画面いっぱいに、縦横比を崩さずに拡大縮小します */
  background-position: center;   /* 写真の中心を常に基準にして配置します */
  background-repeat: no-repeat;  /* 画面が広くても写真がタイル状に繰り返されるのを防ぎます */
  padding: 80px 20px;
  width: 100%;
  color: #ffffff;
  text-align: center; /* 画像のデザイン通り、すべての文章やボタンを「中央寄せ」にします */
}

/* 1. 各大見出し（次のステップへ / 最後に） */
.next-step-main-title,
.final-message-title {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 35px 0;
  letter-spacing: 0.05em;
}

/* 導入メッセージのゆったりとした行間テキスト */
.next-step-intro-text,
.final-message-text-wrap {
  font-size: 14px;
  line-height: 2.1;
  opacity: 0.95;
  margin-bottom: 50px;
}
.next-step-intro-text p,
.final-message-text-wrap p {
  margin-bottom: 8px;
}
.next-step-intro-text p:last-child,
.final-message-text-wrap p:last-child {
  margin-bottom: 0;
}

/* 2. クラスグループ（対応するクラスのブロック） */
.next-step-class-group {
  width: 100%;
  max-width: 600px; /* ボタンが横に広がりすぎないように美しく制限します */
  margin: 0 auto 60px auto;
}
.next-step-class-group:last-of-type {
  margin-bottom: 80px; /* 「最後に」のブロックとの間の広めのすき間 */
}

/* 各グループの小見出し（アンダーライン無し・細字で上品に） */
.class-group-sub-title {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 25px;
  letter-spacing: 0.03em;
}

/* 最大の特徴：画像完全再現の「角丸カプセル型」の白いクラス名表示バッジ */
.class-capsule-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* カプセル同士の縦の隙間 */
  margin-bottom: 20px;
}
.class-capsule-item {
  background-color: #ffffff;
  color: #211e55; /* スクールカラーの濃い紺色の文字 */
  font-size: 14px;
  font-weight: bold;
  padding: 14px 20px;
  border-radius: 8px; /* 画像通りの、上品で控えめな角丸カプセル型に設定 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.font-uppercase {
  text-transform: uppercase; /* 英語名を自動できれいな大文字にします */
}

/* カプセルの下の補足説明文 */
.class-group-desc-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

/* 画像完全再現：最下部にある、白い丸角カプセルのリンクボタン */
.class-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.class-link-btn-white {
  display: inline-block;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 0;
  width: 100%;
  max-width: 240px; /* 上のバッジより一回りスリムな、画像通りの絶妙な最大横幅 */
  border-radius: 30px; /* ここは完璧な正円のカプセル型にします */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.class-link-btn-white span {
  display: inline-block;
  margin-left: 4px; /* 矢印との間の細かなすき間 */
  transition: transform 0.3s ease;
}

/* ボタンにマウスが乗った時（ホバー時）の滑らかな反応 */
.class-link-btn-white:hover {
	color: #211e55;
  background-color: #ffffff;
  transform: translateY(-1px); /* ほんの少し浮き上がらせるプロの味付け */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
/* ホバーした時に、中の「→」の矢印だけが右側にピョコッと動く、遊び心のあるオシャレな演出 */
.class-link-btn-white:hover span {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面レスポンシブ最適化
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .model-next-step-section { padding: 110px 20px; }
  .next-step-main-title, .final-message-title { font-size: 36px; margin-bottom: 45px; }
  .next-step-intro-text, .final-message-text-wrap { font-size: 16px; line-height: 2.3; margin-bottom: 65px; }
  
  .class-group-sub-title { font-size: 16px; margin-bottom: 30px; }
  .class-capsule-item { font-size: 16px; padding: 16px 30px; }
  .class-group-desc-text { font-size: 14px; margin-bottom: 35px; }
  .class-link-btn-white { font-size: 14px; padding: 14px 0; max-width: 260px; }
}
/* ==========================================================================
   model.html：最下部よくある質問 ＆ 2連カプセルボタン（CSS一括管理版）
   ========================================================================== */
/* ==========================================================================
   model.html / recruit.html共通：最下部アコーディオン背景（拡大・動く・余白バグ完全解決版）
   ========================================================================== */
.model-faq-section {
  position: relative !important; /* 背景画像の絶対基準点 */
  padding: 60px 20px;
  width: 100%;
  text-align: center;
}

/* 核心：アコーディオンがどれだけ下に長く伸びても、画像自体の「大きさ（倍率）」は1ミリも変えず、
   かつ下端に絶対に余白（切れ目）を作らないプロの背景スタンプ敷き詰め構造です */
.model-faq-section::before {
  content: "";
  position: absolute !important; /* 他の文字と一緒に上へスクロール（連動）させます */
  top: 0;
  left: 0;
  width: 100% !important;
  
  /* ⬇️ここを修正：100vh（画面ぴったり）を解除し、「100%（セクションの底の底まで）」に広げます。
     これで、アコーディオンが開いて下にどれだけ伸びても、下に不自然な余白は120%絶対に発生しません */
  height: 100% !important; 
  
  z-index: -1; /* 白い質問カード（文字）の後ろ側に潜り込ませる安全指定 */
  
  /* ご自身が作った、美しい半透明の膜と背景画像のセット */
  background-image: linear-gradient(rgba(247, 249, 252, 0.5), rgba(247, 249, 252, 0.5)), 
                    url('../images/faq-bg.jpg') !important;
  
  /* 💡 1枚の画像をセクション全体に隙間なくきれいにトリミング＆自動拡大縮小 */
  background-size: cover !important;
  
  /* 💡 画像のリピートを完全に禁止 */
  background-repeat: no-repeat !important;
  
  /* 💡 画像の中心を基準にして配置 */
  background-position: center center !important;
}



/* 中央配置の濃紺大見出し */
.model-faq-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #211e55; /* アカデミーの気品ある濃紺色 */
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

/* アコーディオンコンテナ（Figma通りに最大幅800pxでスマートに中央寄せ） */
.model-faq-accordion-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 50px auto; /* 下の2連ボタンとの間に50pxのきれいなすき間を作ります */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 白いカード同士の間の縦の隙間 */
}

/* --------------------------------------------------------------------------
   F. 最下部：2連カプセル型並びリンクボタン（Figmaデザイン完全再現）
   -------------------------------------------------------------------------- */
.model-faq-btn-row {
  display: flex;
  flex-direction: column; /* スマホ版：まずは押しやすいように縦に2つ積み上げます */
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 680px; /* ボタンが離れ小島にならない美しい最大幅 */
  margin: 0 auto;
}

/* 白地ベースに濃紺のフチ線をまとった、画像通りの洗練された丸角カプセルボタン */
.model-faq-btn-item {
  display: inline-block;
  background-color: #ffffff;
  color: #211e55;
  /*border: 1.5px solid #211e55;*/ /* 画像通りの、クッキリとした濃紺の美しいフチ線 */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  padding: 13px 0;
  width: 100%;
  max-width: 290px; /* 画像通りの、太すぎず細すぎない最高のボタン幅 */
  border-radius: 30px; /* 完璧な正円のカプセル丸角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}
.model-faq-btn-item span {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

/* ボタンにマウスが乗った時（ホバー時）の滑らかなカラー反転モーション */
.model-faq-btn-item:hover {
  background-color: #211e55; /* 色がパッと反転して高級感あふれる濃紺ボタンに変身します */
  color: #ffffff;
}
.model-faq-btn-item:hover span {
  transform: translateX(3px); /* 矢印だけがピョコッと右に動く小粋な演出 */
}

/* ==========================================================================
   【PC版】画面幅768px以上での大画面横並びレイアウト（Figma完全再現）
   ========================================================================== */
@media (min-width: 768px) {
  .model-faq-section { padding: 90px 20px; }
  .model-faq-main-title { font-size: 32px; margin-bottom: 55px; }
  
  /* PCの大画面になった瞬間、2つのカプセルボタンをご指示通り「綺麗な真横一列」に整列させます */
  .model-faq-btn-row {
    flex-direction: row;
    justify-content: center; /* 2つのボタンを真ん中へ上品にギュッと吸着寄せします */
    gap: 25px; /* ボタン同士の間の、画像通りの快適なすき間 */
  }
}

/* ==========================================================================
   recruit.html：共通する価値観 4連2カラムグリッドカード（Figmaデザイン完全再現）
   ========================================================================== */
/* セクション全体：画像通りのクリーンでフラットな薄グレー（#F2F2F2）背景 */
.recruit-values-section {
  background-color: #F2F2F2 !important;
  padding: 80px 20px;
  width: 100%;
  color: #333333;
  text-align: center;
}

/* 1. 最上部・最下部の中央寄せメッセージテキスト */
.recruit-top-message-block {
  font-size: 14px;
  line-height: 2.2; /* 画像のようなゆったりとした心地よい行間 */
  font-weight: bold;
  color: #1a1e53; /* 深みのある濃紺 */
  margin-bottom: 60px;
}
.recruit-top-message-block p {
  margin-bottom: 12px;
}
.recruit-top-message-block p:last-child {
  margin-bottom: 0;
}

/* セクションメイン大見出し（気品ある濃紺の大きな文字） */
.recruit-values-main-title {
  font-size: 26px;
  font-weight: bold;
  color: #1a1e53;
  margin: 0 auto 40px auto;
  letter-spacing: 0.05em;
}

/* 2. 4つの白いカードを綺麗に並べるコンテナ */
.recruit-values-grid-wrap {
  display: flex;
  flex-direction: column; /* スマホ版：まずは押しやすいよう縦に1列に積みます */
  gap: 16px; /* カード同士の間の絶妙な縦の隙間 */
  width: 100%;
  max-width: 960px; /* 画像のようなスマートな全体の最大横幅 */
  margin: 0 auto 50px auto;
}

/* 3. 白い角丸カード本体の土台（Figmaデザイン完全再現） */
.value-card-item {
  width: 100%;
  background-color: #ffffff !important;
  border-radius: 8px; /* 画像通りの、上品で控えめな美しい角丸 */
  overflow: hidden;   /* 左側の黄色いボックスの角丸をフチにフィットさせます */
  display: flex;
  align-items: center; /* 左のアイコンと右の文字の上下中央をピシッと一直線に揃えます */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* 白いカードを浮き上がらせる優しい影 */
  text-align: left;
}

/* カードの左端にある、鮮やかな黄色の正方形アイコンボックス */
.value-icon-yellow-box {
  width: 60px;
  height: 60px;
  background-color: #FFDB0D !important; /* アカデミーの象徴である黄色 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center; /* 常に上下左右の真ん中にアイコンを固定します */
  background-size: 32px auto;         /* アイコンの大きさを画像通りのスマートなサイズ（横幅24px）に指定 */
}
/* 1. 電球アイコン（カード1） */
.icon-lightbulb {
  background-image: url('../images/icon-lightbulb.png') !important; /* お手元の正しい画像名（.svgや.pngなど）に打ち替えてください */
}

/* 2. 矢印・順序アイコン（カード2） */
.icon-arrows {
  background-image: url('../images/icon-arrows.png') !important;
}

/* 3. 芽・成長アイコン（カード3） */
.icon-sprout {
  background-image: url('../images/icon-sprout.png') !important;
}

/* 4. チーム・地域アイコン（カード4） */
.icon-community {
  background-image: url('../images/icon-community.png') !important;
}

/* 右側のテキストエリア */
.value-card-text-right {
  padding: 0 25px;
  flex-grow: 1;
}
.value-card-text-right p {
  font-size: 14px;
  font-weight: bold;
  color: #1a1e53; /* 文字は引き締まる濃いネイビー */
  margin: 0;
  padding: 0;
  letter-spacing: 0.03em;
	line-height: 1.5em;
}

/* 4. 最下部・締めくくりメッセージ */
.recruit-bottom-summary-block {
  font-size: 14px;
  font-weight: bold;
  color: #1a1e53;
  letter-spacing: 0.03em;
  margin-top: 20px;
}

/* ==========================================================================
   【PC版】画面幅768px以上での2列×2段・2カラムレイアウト（Figma完全再現）
   ========================================================================== */
@media (min-width: 768px) {
  .recruit-top-message-block { font-size: 16px; margin-bottom: 80px; }
  .recruit-values-main-title { font-size: 32px; margin-bottom: 50px; }
  
  /* PCの大画面になった瞬間、スマホの縦積みから画像通りの「美しい2列の横並び」へ一発変換します */
  .recruit-values-grid-wrap {
    flex-direction: row;
    flex-wrap: wrap; /* 横幅がいっぱいになったら、自動で綺麗に2段目に折り返させます */
    justify-content: space-between;
    gap: 24px 2%; /* 縦の隙間を24px、左右の隙間を絶妙な「2%」に保ちます */
  }
  
  /* 左右のカードがそれぞれ「全体の横幅の49%」ずつを美しく分け合い、ピシッと2列に揃います */
  .value-card-item {
    width: 49%; 
    min-height: 70px; /* カードの縦の厚みをPC版に合わせてゆったりさせます */
  }
  
  .value-icon-yellow-box {
    width: 70px; /* パソコン画面に合わせて、黄色い正方形を一回り大きくスケールアップ */
    height: 70px;
  }
  .value-card-text-right p {
    font-size: 16px; /* パソコン画面で最も見やすい文字サイズへ引き上げ */
  }
  
  .recruit-bottom-summary-block { font-size: 16px; margin-top: 40px; }
  .value-icon-yellow-box {
    background-size: 30px auto; 
  }
}
/* ==========================================================================
   recruit.html：職種別 募集要項リッチアコーディオン（Figmaデザイン完全再現）
   ========================================================================== */
/* セクション全体：ご指示通りの深いディープネイビー（#022859）背景に完全固定 */
.recruit-jobs-section {
  background-color: #022859 !important;
  padding: 80px 20px;
  width: 100%;
}

/* アコーディオン全体を包むコンテナ（上の価値観カードの最大幅960pxと綺麗に揃えます） */
.recruit-jobs-accordion-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 白いカード同士の間の美しい縦の隙間 */
}

/* 1. 白い大きなアコーディオンカード本体の土台 */
.recruit-job-item {
  width: 100%;
  background-color: #ffffff !important;
  border-radius: 12px; /* 画像通りの上品な角丸カプセル型 */
  overflow: hidden;   /* 開いた時の中身の写真が角丸からはみ出すのを防止 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  list-style: none;   /* 標準の三角形マークを完全に消去 */
}
/* Safariブラウザ用の標準矢印消去お守り */
.recruit-job-item summary::-webkit-details-marker {
  display: none;
}

/* 2. クリックを待ち受ける見出し行 */
.recruit-job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  background-color: #ffffff;
}

/* 見出し行の左側のパーツをまとめる横並びコンテナ */
/*.job-header-left-box {
  display: flex;
  align-items: center; 
  gap: 15px;
  text-align: left;
}*/
.job-header-left-box {
  display: flex;
  flex-direction: column;   /* 縦並びにする */
  align-items: flex-start;  /* 左揃え */
  gap: 6px;                 /* タイトルとバッジの上下間隔 */
  text-align: left;
  position: relative;
  padding-left: 59px;       /* アイコン幅(44px) + 間隔(15px) の余白を確保 */
  min-height: 44px;         /* アイコンの高さを考慮して崩れを防止 */
  justify-content: center;  /* テキストの高さが低い場合の上下中央寄せ */
}
/* 左端にある、気品ある濃紺の正方形アイコンボックス */
.job-icon-navy-box {
	position: absolute;       /* 親要素の左端に固定 */
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background-color: #1a1e53 !important; /* 価値観カードと対になる濃いネイビー */
  border-radius: 6px; /* 控えめで美しい角丸 */
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px auto; /* アイコン画像のサイズ（手元の素材に合わせて自由に変えられます） */
}

/* アイコン画像の個別呼び出し（手元の画像フォルダ内の正しいファイル名に打ち替えてください） */
.icon-coach { background-image: url('../images/icon-job-coach.png'); }
.icon-student { background-image: url('../images/icon-job-student.png'); }
.icon-mentor { background-image: url('../images/icon-job-mentor.png'); }
.icon-study { background-image: url('../images/icon-job-study.png'); }
.icon-operation { background-image: url('../images/icon-job-operation.png'); }

/* 職種名のテキストタイトル */
.job-title-text {
  font-size: 16px;
  font-weight: bold;
  color: #1a1e53;
  margin: 0;
  padding: 0;
  letter-spacing: 0.03em;
	line-height: 1.3;
}

/* 雇用形態の薄グレーのバッジバナー */
.job-badge-type {
  display: inline-block;
  background-color: #f1f5f9; /* 画像通りの、上品で控えめな薄グレー */
  color: #475569;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
	white-space: nowrap; /* 「アルバイト・インターン」などの途中の折返しを防止 */
}

/* 3. 右端にあるシャープなプラス（＋）マーク */
.recruit-job-icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.5;
}
.recruit-job-icon::before,
.recruit-job-icon::after {
  content: ""; position: absolute; background-color: #1a1e53; transition: all 0.3s ease;
}
.recruit-job-icon::before { top: 5px; left: 0; width: 100%; height: 2px; } /* 横線 */
.recruit-job-icon::after { top: 0; left: 5px; width: 2px; height: 100%; }  /* 縦線 */

/* 4. 【クリック開閉アニメーション】最初は非表示にする、中身全体の器 */
.recruit-job-content-body {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); /* スーッと滑らかに滑り出てくる躍動感 */
}

/* 最重要：クリックして開いた状態（[open]）になった瞬間、中身の高さを解放します */
.recruit-job-item[open] .recruit-job-content-body {
  max-height: 100%; /* 画像やテキストが綺麗に収まる十分な高さを解放 */
  transition: max-height 0.5s ease-in-out;
}
/* 開いた時に、右端のプラスの縦線を消して綺麗な「ー」に変化させます */
.recruit-job-item[open] .recruit-job-icon::after { transform: rotate(90deg); opacity: 0; }
.recruit-job-item[open] .recruit-job-icon::before { transform: rotate(180deg); }

/* 5. 開いた中身：グラウンドのイメージ写真（カード内の一番上のフチに吸着） */
.job-content-banner-img {
  width: 100%;
  overflow: hidden;
}
.job-content-banner-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 6. 開いた中身：役割 ＆ 求める人物像のテキストエリア */
.job-content-text-row {
  padding: 30px 20px;
  display: flex;
  flex-direction: column; /* スマホ版：まずは縦に1列に並べます */
  gap: 30px;
  text-align: left;
}

/* 各テキスト列（役割 / 求める人物像） */
.job-text-col {
  width: 100%;
}
/* 各列の小見出し（アンダーライン無し・濃紺の太字） */
.job-col-title {
  font-size: 15px;
  font-weight: bold;
  color: #1a1e53;
  margin-bottom: 15px;
  letter-spacing: 0.03em;
}

/* 画像完全再現：左側に「＞」が入った役割のリスト */
.job-list-style-arrow,
.job-list-style-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-list-style-arrow li {
  font-size: 13px;
  color: #444444;
  line-height: 1.6;
  position: relative;
  padding-left: 16px;
}
.job-list-style-arrow li::before {
  content: "＞";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 10px;
  color: #b3b3b3; /* 画像のような上品なライトグレーの矢印 */
}

/* 画像完全再現：左側に「✓」が入った求める人物像のリスト */
.job-list-style-check li {
  font-size: 13px;
  color: #444444;
  line-height: 1.6;
  position: relative;
  padding-left: 18px;
}
.job-list-style-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 13px;
  font-weight: bold;
  color: #cbd5e1; /* 画像のような優しく馴染むグレーのチェックマーク */
}

/* ==========================================================================
   【PC版】画面幅768px以上での2カラム ＆ テキスト左右セパレート（Figma完全再現）
   ========================================================================== */
@media (min-width: 768px) {
  .recruit-jobs-section { padding: 100px 20px; }
  .recruit-jobs-accordion-wrap { gap: 25px; }
  
  .recruit-job-header { padding: 18px 25px; }
  .job-icon-navy-box { width: 48px; height: 44px; background-size: 24px auto; }
  .job-title-text { font-size: 20px; }
  .job-badge-type { font-size: 12px; padding: 5px 14px; }
  
  /* PCの大画面では、開いたテキストエリアをご指示通り「美しい左右の2カラム」に一発変換します */
  .job-content-text-row {
    padding: 40px 50px;
    flex-direction: row;
    justify-content: space-between;
    gap: 0; /* 左右にセパレートするため隙間を自動にします */
  }
  
  /* 左右の列がそれぞれ45%ずつの横幅を美しく分け合い、中央に開放的な空間を作ります */
  .job-text-col {
    width: 45%;
  }
  
  .job-col-title { font-size: 18px; margin-bottom: 20px; }
  .job-list-style-arrow li, .job-list-style-check li { font-size: 14px; line-height: 1.7; }
  .job-header-left-box {
    flex-direction: row;     /* 横並びに戻す */
    align-items: center;    /* 上下中央揃え */
    gap: 15px;              /* パーツ同士のすき間 */
    padding-left: 0;        /* スマホ用の左パディングを解除 */
    min-height: auto;
  }

  .job-icon-navy-box {
    position: static;       /* absolute解除して並び順に戻す */
  }
}
/* ==========================================================================
   recruit.html：アコーディオン上の共通デザイン大見出し（model.html完全同期）
   ========================================================================== */
/* model.htmlの .model-intro-headline と文字サイズ・太さ・余白を完全に一致させ、
   深いネイビー背景の中にクッキリと美しく浮かび上がらせる見出し設定です */
.recruit-jobs-main-headline {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff; /* ネイビー背景に映える真っ白な文字 */
  text-align: center;
  
  /* 下の白いアコーディオンカードとの間の、画像通りの程よい縦のすき間（35px） */
  margin-top: 0;
  margin-bottom: 35px;
  
  letter-spacing: 0.05em;
}

/* 【PC版】画面幅768px以上での大画面サイズ調整 */
@media (min-width: 768px) {
  /* パソコンの大画面に広がった瞬間、model.htmlと息を合わせて大きな30pxサイズへ自動スケールアップします */
  .recruit-jobs-main-headline {
    font-size: 30px; 
    margin-bottom: 45px; /* 大画面に合わせて下のカードとの隙間もゆったりと広げます */
  }
}
/* ==========================================================================
   recruit.html：GMRAで働く意味（エモーショナル背景画像 ＆ センターメッセージ）
   ========================================================================== */
/* セクション全体：新しく用意した夕日のグラフィック背景写真をCSS側から呼び出します。
   パディングを上下ゆったりと広く取り、写真のドラマチックな広がりを演出します */
.recruit-meaning-section {
  background-image: linear-gradient(rgba(2, 40, 89, 0.45), rgba(2, 40, 89, 0.55)), url('../images/recruit-meaning-bg.jpg'); /* お手元の新しい夕日の画像名（拡張子は .jpg や .png ）に正確に変えてください */
  background-size: cover;       /* 写真を画面いっぱいに、縦横比を崩さずに全自動で拡大縮小します */
  background-position: center;   /* 写真の中心を常に基準にして綺麗に画面の真ん中に収めます */
  background-repeat: no-repeat;  /* 画面がどれだけ広くても写真がタイル状に繰り返されるのを防ぎます */
  
  padding: 100px 20px;
  width: 100%;
  color: #ffffff;               /* テキストはすべて画像通りの美しい「白文字」に統一 */
  text-align: center;           /* すべての見出しと文章を完璧な「中央寄せ」にします */
}

/* 圧倒的な情緒と存在感を放つ、中央配置の白文字大見出し */
.recruit-meaning-main-title {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 auto 45px auto;
  letter-spacing: 0.05em;
}

/* 画像のデザインを完全再現する、1行ずつ噛み締めるような美しいメッセージ文章 */
.recruit-meaning-text-wrap {
  font-size: 14px;
  line-height: 2.3; /* 画像のような、静かで洗練された空間を感じさせるゆったりとした広い行間 */
  font-weight: bold;
  letter-spacing: 0.03em;
  opacity: 0.95;
}
.recruit-meaning-text-wrap p {
  margin: 0;
  padding: 0;
}

/* 画像完全再現：段落（メッセージの塊）ごとの、絶妙な「下のすき間（余白）」を調整する専用パーツ */
.recruit-meaning-text-wrap .margin-b-30 {
  margin-bottom: 35px; /* 段落同士の心地よい縦の距離感 */
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面ダイナミック調整
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* パソコンの大画面では、上下のパディングをさらに広げて、背後の夕日グラフィックを絵画のように美しく魅せます */
  .recruit-meaning-section {
    padding: 140px 20px;
  }
  
  .recruit-meaning-main-title {
    font-size: 36px; /* パソコン画面で圧倒的なメッセージ性を放つ大きな文字サイズへ */
    margin-bottom: 60px;
  }
  
  .recruit-meaning-text-wrap {
    font-size: 16px; /* パソコン画面で最も美しく読みやすい文字サイズへスケールアップ */
    line-height: 2.5;
  }
  
  .recruit-meaning-text-wrap .margin-b-30 {
    margin-bottom: 45px; /* 大画面に合わせて、段落同士のすき間もゆったりと広げて開放感を出します */
  }
}
/* ==========================================================================
   about.html：スクール理念 導入メッセージ（文字色 #211E55 完全統一版）
   ========================================================================== */
/* セクション全体：背景写真を呼び出し、基本の文字色をはじめからすべて #211E55 に固定します */
.about-intro-section {
  position: relative;
  background-color: #f7f9fc !important; 
  
  /* お手元の新しい背景グラフィック画像名（拡張子は .jpg や .png ）に正確に変えてください */
  background-image: linear-gradient(rgba(247, 249, 252, 0.85), rgba(247, 249, 252, 0.85)), url('../images/about-intro-bg.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  padding: 60px 20px;
  width: 100%;
  
  /* ⬇️ここを修正：全体の文字色をスクール共通の象徴ネイビー（#211E55）へ完全固定します */
  color: #211e55 !important; 
  
  text-align: center; /* すべての文章を完璧な「中央寄せ」にします */
}

/* 1. 最上部：キャッチコピー大見出し */
.about-intro-catchphrase {
  font-size: 22px;
  font-weight: bold;
  color: #211e55 !important; /* ここも #211E55 へ変更 */
  margin: 0 auto 40px auto;
  letter-spacing: 0.05em;
}

/* 2. 中央：メッセージ文章全体のラッパー */
.about-intro-text-wrap {
  width: 100%;
  max-width: 800px; /* 最も文章が美しく読めるスタイリッシュな横幅に制限 */
  margin: 0 auto;
  font-size: 14px;
  line-height: 2.3; /* ゆったりとした空間を感じさせる広い行間 */
  letter-spacing: 0.03em;
}
.about-intro-text-wrap p {
  margin: 0 0 30px 0; /* 段落同士の心地よい縦の距離感 */
  
  /* ⬇️ここを修正：すべての段落の文字を漏れなく #211E55 に染め上げます */
  color: #211e55 !important;
  font-weight: bold; /* 背景写真に負けないクッキリとした視認性を確保 */
}

/* 中央にある「基礎を積み上げ〜」の特に力強く強調されている太字 */
.about-intro-text-wrap .font-bold-navy {
  font-size: 15px;
  font-weight: bold;
  color: #211e55 !important; /* ここも #211E55 へ変更 */
  margin-bottom: 35px;
}

/* 一番最後にある、3行の結びのメッセージの塊 */
.about-intro-summary-box {
  margin-top: 45px;
}
.about-intro-summary-box p {
  margin-bottom: 0;
  
  /* ⬇️ここを修正：結びのテキストも、残さず美しい #211E55 に完全統一します */
  color: #211e55 !important; 
}

/* スマホ版では改行を無視して画面幅に合わせて自然に流します */
.about-intro-text-wrap .pc-only {
  display: none;
}


/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面ダイナミック最適化
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .about-intro-section {
    padding: 100px 20px; /* 大画面に合わせて上下の余白をゆったり広げます */
  }
  
  .about-intro-catchphrase {
    font-size: 32px; /* パソコン画面で圧倒的なアイキャッチ効果を放つ大きなサイズへ */
    margin-bottom: 55px;
  }
  
  .about-intro-text-wrap {
    font-size: 16px; /* パソコンの大画面で最も美しく読みやすい文字サイズへスケールアップ */
    line-height: 2.5;
  }
  .about-intro-text-wrap p {
    margin-bottom: 40px;
  }
  
  .about-intro-text-wrap .font-bold-navy {
    font-size: 18px; /* 強調の一文もさらにドラマチックに大きく */
    margin-bottom: 45px;
  }
  
  /* パソコンの大画面では、ご指示いただいた画像通りの美しい位置でピッタリ改行させます */
  .about-intro-text-wrap .pc-only {
    display: inline;
  }
}
/* ==========================================================================
   about.html：フルワイド・2カラム 左右交互スプリットセクション（50%固定・テキスト最大幅拡張版）
   ========================================================================== */
/* セクション全体の器 */
.about-philosophy-split-section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 1段ごとの横长ブロック */
.split-row-block {
  width: 100%;
  display: flex;
  flex-direction: column; /* スマホ版：まずは縦積みに並べます */
}
.split-row-block-under {
  width: 100%;
  display: flex;
  flex-direction: column-reverse; /* スマホ版：まずは縦積みに並べます */
}


/* 画面幅いっぱいに広がる写真カラム */
.split-media-col {
  width: 100%;
  height: 260px; /* スマホ版での適切な写真の高さ */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 深いネイビー（スクールカラー #211E55）のテキストカラム */
.split-text-col {
  width: 100%;
  background-color: #022859 !important; 
  color: #ffffff !important; /* テキストをすべて真っ白に統一 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 最大の特徴：テキストが並ぶ内側のインナーの最大横幅の上限を、
   Figmaの設計を越えて「最大900px」まで一気にガバッとワイドに拡張します！ */
.split-text-inner-pad {
  width: 100%;
  
  /* ⬇️ここを修正：640px のブレーキを解除し、大画面に合わせて大きく 900px まで広げます */
  max-width: 900px; 
  
  padding: 50px 25px; 
  text-align: left; 
  box-sizing: border-box;
}

/* 各ブロックのメイン大見出し */
.split-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff !important; 
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
  white-space: nowrap !important; /* 絶対に途中で折り返させない防衛命令 */
}

/* 小見出し：真っ白に統一 */
.split-sub-title {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff !important; 
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

/* 解説テキスト：すべて真っ白に統一 */
.split-desc-paragraph {
  font-size: 13px;
  line-height: 2.0; 
  color: #ffffff !important;
}
.split-desc-paragraph p {
  margin-top: 0;
  margin-bottom: 8px !important;
  color: #ffffff !important;
}
.split-desc-paragraph p:last-child {
  margin-bottom: 0;
}

/* 下段ブロックのリード文：すべて真っ白に統一 */
.split-lead-text {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #ffffff !important;
}

/* 1, 2, 3 の四角い白座布団ナンバリングリスト */
.split-step-white-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
  display: flex;
  flex-direction: column;
  gap: 10px; 
  width: 100%;
}
.split-step-white-list li {
  background-color: #ffffff;
  color: #211e55 !important; /* 白座布団の中身のテキストは象徴ネイビーに */
  font-size: 14px;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.split-step-white-list li .step-num-box {
  color: #b3b3b3;
  font-weight: bold;
  display: inline-block;
  width: 12px;
}

/* 下段ブロックの結びのメッセージ：すべて真っ白に統一 */
.split-footer-summary {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  color: #ffffff !important;
}

/* ==========================================================================
   【PC版】画面幅768px以上でのフルワイド・50:50比率死守 ＆ インナー横幅大拡張
   ========================================================================== */
@media (min-width: 768px) {
  .split-row-block,
  .split-row-block-under {
    flex-direction: row;
    width: 100%;
    min-height: 540px; /* 左右の高さがピシッと美しく連動する安全ブレーキ */
  }
  .type-text-left {
    flex-direction: row;
  }
  
  /* ⬇️ここを修正：ご指示通り、写真とネイビーの表示面積比率は「完璧なジャスト50%ずつ（半分ずつ）」を死守します！ */
  .split-text-col,
  .split-media-col {
    width: 50% !important; 
    min-height: 540px;
    height: auto;
  }
  
  /* ⬇️ここを修正：50%の幅いっぱいに文字がのびのびと広がるよう、
     PC版での内側の左右のクッション余白を「80px ➡ 50px」へと少しタイトに引き締めます。
     これによって、写真エリアを縮めることなく、テキストが使える有効範囲が劇的に広くなります */
  .split-text-inner-pad {
    padding: 60px 50px;
  }
  
  .split-main-title { font-size: 32px; margin-bottom: 12px; }
  .split-sub-title { font-size: 18px; margin-bottom: 35px; }
  .split-desc-paragraph { font-size: 15px; line-height: 2.2; }
  .split-lead-text { font-size: 15px; margin-bottom: 30px; }
  .split-step-white-list { margin-bottom: 30px; gap: 12px; }
  .split-step-white-list li { font-size: 15px; padding: 14px 25px; }
  .split-footer-summary { font-size: 14px; line-height: 1.8; }
}
/* ==========================================================================
   about.html：世界基準を目指す理由 2連リッチホワイトカード（専用背景独立版）
   ========================================================================== */
/* HTML側から共通の芝生画像クラスを外したため、裏側から無関係な写真が漏れてくるバグが完全に消滅しました。
   セクション全体を、ご指示通りの深いディープネイビー（#022859）背景に固定します */
.about-global-reason-section {
  background-color: rgba(2, 40, 89, 0.9)  !important;
  padding: 80px 20px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 最大の特徴：アコーディオンの時と同様の手法を採用。
   このセクション専用の「新しい世界地図や幾何学模様のグラフィック画像」を、
   CSSの url() を使ってこのページ限定で一番奥（最背面）にうっすらと美しく敷き詰めます */
.about-global-reason-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 白いカードや文字の下側に潜り込ませる安全指定 */
  
  /* お手元の新しい世界地図グラフィック画像名（拡張子は .png や .jpg）に正確に変えてください */
  background-image: url('../images/about-global-bg.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* 中央配置の眩しい白文字大見出し */
.global-reason-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 auto 50px auto;
  letter-spacing: 0.05em;
}

/* 2つの白いカードを綺麗に並べるコンテナ */
.global-reason-card-row {
  display: flex;
  flex-direction: column;
  gap: 25px; 
  width: 100%;
  max-width: 1080px; 
  margin: 0 auto;
}

/* 白い大きな角丸リッチカード本体の土台 */
.reason-white-card-item {
  width: 100%;
  background-color: #ffffff !important;
  border-radius: 12px; 
  padding: 40px 25px;  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 各カードの内側にあるタイトル（スクール象徴カラーの濃紺 #211E55） */
.reason-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #211e55; 
  margin: 0 0 25px 0;
  padding: 0;
  letter-spacing: 0.03em;
  text-align: center; 
}

/* 各カードの内側の本文文章テキストブロック */
.reason-card-text-body {
  font-size: 13px;
  line-height: 2.0; 
  color: #333333;
}
.reason-card-text-body p {
  margin: 0 0 15px 0; 
}
.reason-white-card-item p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での 2連ホワイトカード絶対横並び・伸縮自在レイアウト
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .about-global-reason-section { padding: 110px 20px; }
  .global-reason-main-title { font-size: 32px; margin-bottom: 65px; }
  
  .global-reason-card-row {
    flex-direction: row !important; 
    justify-content: center;
    align-items: stretch; /* 左右のカードの縦の長さをピシッと均等に揃えます */
    flex-wrap: nowrap; 
    gap: 30px; 
  }
  
  .reason-white-card-item {
    width: 48.5% !important;
    max-width: 520px; 
    padding: 50px 45px; 
    flex-shrink: 1; 
  }
  
  .reason-card-title { font-size: 24px; margin-bottom: 30px; }
  .reason-card-text-body { font-size: 14px; line-height: 2.2; }
}
/* ==========================================================================
   about.html：考えさせる育成 3連ホワイトカード（Figmaデザイン完全再現）
   ========================================================================== */
/* セクション全体：画像通りの、明るくクリーンな薄グレー（#F2F2F2）背景 */
.about-thinking-education-section {
  background-color: #F2F2F2 !important;
  padding: 80px 20px;
  width: 100%;
  text-align: center;
}

/* メイン大見出し：象徴ネイビー（#211E55）に完全統一 */
.thinking-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0 auto 10px auto;
  letter-spacing: 0.05em;
}

/* グレーの細字のサブリード文 */
.thinking-sub-lead {
  font-size: 14px;
  color: #b3b3b3 !important;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

/* 導入のメッセージ段落 */
.thinking-intro-text {
  font-size: 13px;
  line-height: 1.8;
  color: #211e55 !important;
  font-weight: bold;
  margin-bottom: 45px;
}
.thinking-intro-text p {
  margin: 0 0 6px 0;
}
.thinking-intro-text p:last-child {
  margin-bottom: 0;
}

/* 3つのカードを綺麗に横に並べるコンテナ */
.thinking-card-row-wrap {
  display: flex;
  flex-direction: column; /* スマホ版：まずは縦に1列に積みます */
  gap: 16px;
  width: 100%;
  max-width: 960px; /* 画像のような最も美しく並ぶ最大横幅に制限 */
  margin: 0 auto 45px auto;
}

/* 画像完全再現：うっすら細いグレーのフチ線で囲まれた、白い角丸カード本体 */
.thinking-white-card {
  width: 100%;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1; /* 画像通りの、自己主張しすぎない上品なフチ線 */
  border-radius: 12px; /* 優しく馴染む丸角 */
  padding: 35px 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center; /* 中身のアイコンと文字を完璧に上下左右の中央に集めます */
  justify-content: center;
  box-sizing: border-box;
}

/* カードの内側の上半分にあるアイコンエリア：CSS側だけで大きさとセンター配置を一括管理します */
.thinking-card-icon {
  width: 100%;
  height: 60px; /* アイコンが綺麗に収まる高さ */
  background-repeat: no-repeat;
  background-position: center center; /* 常にど真ん中にアイコンを固定します */
  background-size: contain; /* アイコンの形に合わせて美しくジャストフィット */
  margin-bottom: 20px;
}

/* 各アイコンの個別呼び出し（お手元の画像名に正確に打ち替えてください） */
.icon-brain-choice { background-image: url('../images/icon-brain-choice.png'); }
.icon-arrow-split { background-image: url('../images/icon-arrow-split.png'); }
.icon-player-next { background-image: url('../images/icon-player-next.png'); }

/* カードの下半分にあるラベル文字テキスト */
.thinking-card-label {
  font-size: 13px;
  font-weight: bold;
  color: #211e55 !important; /* 象徴ネイビーに完全統一 */
  margin: 0;
  padding: 0;
  letter-spacing: 0.02em;
}

/* 最下部・まとめメッセージ */
.thinking-bottom-summary {
  font-size: 13px;
  line-height: 1.8;
  color: #211e55 !important;
  font-weight: bold;
  letter-spacing: 0.03em;
}
.thinking-bottom-summary p {
  margin: 0 0 6px 0;
}
.thinking-bottom-summary p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   【PC版】画面幅768px以上での 3連ホワイトカード絶対横並び（Figma完全再現）
   ========================================================================== */
@media (min-width: 768px) {
  .about-thinking-education-section { padding: 100px 20px; }
  .thinking-main-title { font-size: 32px; margin-bottom: 12px; }
  .thinking-sub-lead { font-size: 24px; margin: 35px 0; }
  .thinking-intro-text { font-size: 15px; line-height: 2.0; margin-bottom: 60px; }
  
  /* PCの大画面になった瞬間、中央寄せに吸着させたまま「絶対に変形させず真横一列」にロックします */
  .thinking-card-row-wrap {
    flex-direction: row !important; /* 縦並びの指令を最優先で完全に打ち消します */
    justify-content: center;
    align-items: stretch; /* 3つのカードの縦の長さをピシッと均等に揃えます */
    flex-wrap: nowrap; /* 画面が狭くなっても絶対に下の行へ折り返させないお守り */
    gap: 25px; /* カード同士の間の、画像通りの快適な横のすき間 */
  }
  
  /* 3つのカードがそれぞれ「全体の横幅の31%」ずつを美しく等分し、大画面幅に合わせて伸縮します */
  .thinking-white-card {
    width: 31% !important;
    max-width: 300px; /* 広がりすぎたときは美しくブレーキをかけます */
    padding: 45px 20px;
    flex-shrink: 1; /* ノートPCなどの幅に合わせてスマートに縮むことを許可 */
  }
  
  .thinking-card-icon { height: 70px; margin-bottom: 25px; }
  .thinking-card-label { font-size: 14px; }
  .thinking-bottom-summary { font-size: 15px; line-height: 2.0; margin-top: 15px; }
}
/* ==========================================================================
   about.html：関係性 ＆ 保護者の皆さまへ 2連ネイビーボックス（Figma完全再現）
   ========================================================================== */
/* セクション全体の器：明るい薄グレー（#F2F2F2）背景を敷き、中の濃紺ボックスを引き立てます */
.about-relations-and-parents-section {
  background-color: #F2F2F2 !important;
  padding: 0 20px 80px 20px; /* 上の3連カードの余白と息を合わせ、上のパディングをあえて0にして綺麗にドッキングさせます */
  width: 100%;
}

/* 画像完全再現：お気に入りの深いディープネイビー（#022859）で染め上げられた大きな角丸ボックス */
.about-navy-box-block {
  width: 100%;
  max-width: 1200px; /* 共通コンテナと同じ横幅いっぱいにガバッと広げます */
  background-color: #022859 !important;
  border-radius: 12px; /* 画像通りの上品で滑らかな角丸 */
  padding: 40px 25px; /* スマホ版での内側の快適な読みやすさ空間 */
  margin: 0 auto 40px auto; /* ボックス同士の間の絶妙な縦の隙間 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column; /* スマホ版：まずは縦積み（見出しの下に本文）に並べます */
  box-sizing: border-box;
}
.about-navy-box-block:last-child {
  margin-bottom: 0; /* 一番最後のボックスの下マージンは不要なので消去 */
}

/* ── 左側：大見出しカラム（スマホ版） ── */
.about-navy-left-title-col {
  width: 100%;
  text-align: center; /* スマホの狭い画面では見やすく「中央寄せ」にします */
  margin-bottom: 30px;
}
/* 白文字メイン大見出し */
.about-navy-left-title-col .relations-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff !important; /* 文字色を真っ白に統一 */
  line-height: 1.4;
  margin: 0 0 12px 0;
  letter-spacing: 0.05em;
}
/* ライトグレーの上品なサブタイトル */
.about-navy-left-title-col .relations-sub-title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7) !important; /* 文字色は真っ白ベースの薄塗りに */
  margin: 0;
  letter-spacing: 0.03em;
}

/* ── 中央：点線カラム（スマホ版は邪魔になるため非表示） ── */
.about-navy-center-line-col {
  display: none;
}

/* ── 右側：解説本文テキストカラム（スマホ版） ── */
.about-navy-right-text-col {
  width: 100%;
  text-align: left;
  font-size: 13px;
  line-height: 2.0; /* 画像のようなゆったりとした広い行間 */
  color: #ffffff !important; /* 文字色はすべて真っ白に統一 */
}
.about-navy-right-text-col p {
  margin: 0 0 10px 0; /* 先ほど導き出した完璧な段落同士の引き締め余白 */
  color: #ffffff !important;
}
.about-navy-right-text-col p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   about.html：関係性 ＆ 保護者の皆さまへ 2連ネイビーボックス（PC版レスポンシブ最適化）
   ========================================================================== */
@media (min-width: 768px) {
  .about-relations-and-parents-section { 
    padding: 0 20px 100px 20px; 
  }
  
  /* エリア調整による根本解決：左右のパディング（内側の壁）を「70px ➡ 40px」へとスマートに引き締めます。
     大きな箱のサイズはそのままに、文字が横にのびのびと使える幅が合計60pxもガバッと広がります */
  .about-navy-box-block {
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* 左右の文字の上下中央を、真ん中の点線と一直線に揃えます */
    padding: 60px 40px;  /* 左右の余白を40pxに最適化しました */
    margin-bottom: 50px;
    box-sizing: border-box;
  }
  
  /* 💻左側見出し：全体の「32%」の幅を美しく割り当て、左寄せにします */
  .about-navy-left-title-col {
    width: 32% !important;
    text-align: left; /* PC版ではピシッと「左寄せ」にします */
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .about-navy-left-title-col .relations-main-title {
    font-size: 28px;
    margin-bottom: 15px;
    white-space: nowrap !important; /* 「保護者の皆さまへ」が1行で美しく突き抜ける絶対命令 */
  }
  .about-navy-left-title-col .relations-sub-title { 
    font-size: 16px; 
  }
  
  /* 💻中央：左右を上品に分かつ「白い垂直の点線（破線）」を自動描写します。
     エリア調整による根本解決：点線の左右の隙間を「40px ➡ 25px」へと少しタイトに削ることで、
     さらに右側のテキストエリアがのびのびと横に広がるためのスペースをプレゼントします */
  .about-navy-center-line-col {
    display: block;
    width: 1px;
    height: 140px; /* 下段（保護者の皆さまへ）の点線の縦の長さは元の完璧なバランスを維持 */
    border-left: 1.5px dashed rgba(255, 255, 255, 0.4); /* 白を40%透過させた上品な破線 */
    margin: 0 35px 0 5px;
    flex-shrink: 0;
  }
  
  /* 💻右側本文：余白を削った分、横幅の比率を「60% ➡ 63%」へと最大拡張します！
     これにより、「今後もチームを作る予定はなく〜」の重要メッセージが、
     特定の1行だけの無理な個別命令に頼ることなく、エリア全体の広がりによって自然に美しい一直線の1行に収まりきります */
  .about-navy-right-text-col {
    width: 63% !important; /* 横幅の比率を63%へ最大拡張しました */
    font-size: 15px;
    line-height: 2.2;
    flex-grow: 1;
  }
  .about-navy-right-text-col p {
    margin-bottom: 12px;
  }

  /* 💻上段ブロック限定：ご自身で300pxに引き上げられたお気に入りの長い点線設定です。
     別々のメディアクエリに分かれていた記述を、同じ「768px」のこのブロックの最下部へスマートに合流・一本化しました */
  .about-navy-box-block:first-of-type .about-navy-center-line-col {
    height: 300px !important; /* 右側の7行の文章の厚みに完璧に調和する、美しい長い点線を100%維持します */
  }
}
/* ==========================================================================
   about.html：最期に… 代表のご挨拶（エモーショナル背景画像 ＆ センターメッセージ）
   ========================================================================== */
/* セクション全体：新しく用意したグラウンドの背景写真をCSS側から呼び出します。
   パディングを上下ゆったりと広く取り、写真のドラマチックな広がりを演出します */
.about-ceo-message-section {
  background-image: linear-gradient(rgba(2, 40, 89, 0.55), rgba(2, 40, 89, 0.65)), url('../images/about-ceo-bg.jpg'); /* お手元の新しいグラウンドの画像名（拡張子は .jpg や .png ）に正確に変えてください */
  background-size: cover;       /* 写真を画面いっぱいに、縦横比を崩さずに全自動で拡大縮小します */
  background-position: center;   /* 写真の中心を常に基準にして綺麗に画面の真ん中に収めます */
  background-repeat: no-repeat;  /* 画面がどれだけ広くても写真がタイル状に繰り返されるのを防ぎます */
  
  padding: 100px 20px;
  width: 100%;
  color: #ffffff;               /* テキストはすべて画像通りの美しい「白文字」に統一 */
  text-align: center;           /* すべての見出しと文章を完璧な「中央寄せ」にします */
}

/* 「最期に…」の文字バッジ */
.ceo-message-sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 15px 0;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* 中央配置の白文字大見出し */
.ceo-message-main-title {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 auto 50px auto;
  letter-spacing: 0.05em;
}

/* 画像のデザインを完全再現する、1行ずつ噛み締めるような美しいメッセージ文章 */
.ceo-message-text-wrap {
  font-size: 14px;
  line-height: 2.3; /* 画像のような、静かで洗練された空間を感じさせるゆったりとした広い行間 */
  font-weight: bold;
  letter-spacing: 0.03em;
  opacity: 0.95;
}
.ceo-message-text-wrap p {
  margin: 0;
  padding: 0;
}

/* 画像完全再現：「憧れるのをやめましょう。」の一文の下に空く絶妙なすき間 */
.ceo-message-text-wrap .quote-text-line {
  margin-bottom: 45px;
}

/* 画像完全再現：段落（メッセージの塊）ごとの、絶妙な「下のすき間（余白）」を調整する専用パーツ */
.ceo-message-text-wrap .margin-b-40 {
  margin-bottom: 40px; /* 段落同士の心地よい縦の距離感 */
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面ダイナミック調整
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* パソコンの大画面では、上下のパディングをさらに広げて、背後のドラマチックなグラフィックを美しく魅せます */
  .about-ceo-message-section {
    padding: 140px 20px;
  }
  
  .ceo-message-sub-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .ceo-message-main-title {
    font-size: 38px; /* パソコン画面で圧倒的な存在感を放つ大きな文字サイズへ */
    margin-bottom: 65px;
  }
  
  .ceo-message-text-wrap {
    font-size: 16px; /* パソコン画面で最も美しく読みやすい文字サイズへスケールアップ */
    line-height: 2.5;
  }
  
  .ceo-message-text-wrap .quote-text-line {
    margin-bottom: 55px;
  }
  
  .ceo-message-text-wrap .margin-b-40 {
    margin-bottom: 50px; /* 大画面に合わせて、段落同士のすき間もゆったりと広げて開放感を出します */
  }
}
/* ==========================================================================
   about.html専用：最下部フィナーレ 3連カプセルボタン横並び制御（768px同期版）
   ========================================================================== */
/* スマホ版（画面幅767px以下）：ボタンが3つ押しやすいように、まずは中央寄せのまま縦に3つ積み上げます */
.about-3button-row {
  max-width: 290px !important; /* スマホでの1マスのボタン幅に綺麗に揃えます */
  margin: 0 auto !important;
}

/* ==========================================================================
   【PC版】画面幅768px以上での 3連ボタン絶対横並び・伸縮調整
   ========================================================================== */
@media (min-width: 768px) {
  /* 既存の2連用の最大幅（680px）の壁を最優先で解除し、
     3つのボタンが1行にのびのびと並ぶための広大な「960px」の横幅へと拡張します */
  .model-faq-section .model-faq-btn-row.about-3button-row {
    display: flex !important;
    flex-direction: row !important;     /* 縦積みを確実に解除し、横並びにします */
    justify-content: center !important; /* 3つのボタンを画面中央へ上品にギュッと集めます */
    align-items: center !important;
    gap: 20px !important;               /* ボタン同士の間の、画像通りのスマートな横のすき間 */
    width: 100% !important;
    max-width: 960px !important;        /* 3連用に幅の上限を広げます */
    flex-wrap: nowrap !important;       /* 画面幅が少し狭くなっても、絶対にボタンを2行に折り返させない防衛線 */
  }

  /* 3つのボタンが全体の横幅のなかで均等に美しく縮むことを許可します */
  .model-faq-section .about-3button-row .model-faq-btn-item {
    width: 100% !important;
    max-width: 280px !important;       /* 3枚が一番綺麗に整列する、絶妙な1バッジあたりの最大幅 */
    flex-shrink: 1 !important;          /* 画面幅に合わせてスマートに伸縮することをブラウザに許可 */
  }
}
/* ==========================================================================
   class.html：クラス一覧ロードマップ（不要な重複CSS消去・完全一括管理版）
   ========================================================================== */
/* セクション全体：画像通りの、明るくクリーンなフラット薄グレー（#F2F2F2）背景 */
.class-intro-roadmap-section {
  background-color: #F2F2F2 !important;
  padding: 80px 20px;
  width: 100%;
  text-align: center;
}

/* 最上部：中央寄せメッセージテキスト（すべて象徴ネイビーに完全統制） */
.class-roadmap-top-message {
  font-size: 14px;
  line-height: 2.2; /* ゆったりとした心地よい広い行間 */
  font-weight: bold;
  color: #211e55 !important; /* スクール共通の象徴ネイビーへ一括ロック */
  margin-bottom: 50px;
}
.class-roadmap-top-message p {
  margin: 0 0 10px 0;
  color: #211e55 !important;
}
.class-roadmap-top-message p:last-child {
  margin-bottom: 0;
}

/* 最大の特徴：indexから持ってきた正しい図が、横に広がりすぎて不格好にならないよう、
   Figmaのデザイン画像に息を合わせて「最大幅640px」にスマートに中央寄せ制限をかけます。
   余計なデザイン命令はすべて共通CSSから自動で引っ張ってくるため、幅のブレーキだけで100%完璧に動きます */
.class-intro-roadmap-section .model-timeline-wrapper {
  width: 100%;
  max-width: 640px; /* Figmaの図の縦横比と1ミリの狂いもなく一致する黄金の横幅 */
  margin: 0 auto 55px auto; /* 下の引用テキストとの間の絶妙な縦のすき間 */
}

/* 最下部：中央寄せの締めくくり引用メッセージ */
.class-roadmap-bottom-quote {
  font-size: 14px;
  line-height: 1.8;
  font-weight: bold;
  color: #211e55 !important; /* 象徴ネイビーに統一 */
  letter-spacing: 0.03em;
}
.class-roadmap-bottom-quote p {
  margin: 0;
  padding: 0;
  color: #211e55 !important;
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面調整
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .class-intro-roadmap-section { padding: 100px 20px; }
  .class-roadmap-top-message { font-size: 16px; line-height: 2.4; margin-bottom: 65px; }
  .class-roadmap-bottom-quote { font-size: 16px; }
}
/* ==========================================================================
   class.html：3大個別クラス統合セクション（前半：スマホ基本ベース ＆ 全装飾）
   ========================================================================== */
/* セクション全体の器：画面幅いっぱいに深いディープネイビー（#022859）を展開 */
.class-all-details-section {
  background-color: #022859 !important;
  padding: 60px 10px;
  width: 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* 白ボード本体：ボード同士の縦の隙間を、ご指示通り現在の「ジャスト半分（35px）」に大圧縮ロック！ */
.individual-class-white-board {
  width: 100%;
  max-width: 960px;
  background-color: #ffffff !important; /* ボードを確実に真っ白にします */
  border-radius: 12px;
  padding: 40px 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  
  /* 次のボードとの隙間を、だらしなく空いていた状態の半分（35px）へ強制大圧縮 */
  margin: 0 auto 35px auto !important; 
}
.individual-class-white-board:last-child {
  margin-bottom: 0 !important;
}

/* 見出しヘッダー */
.class-block-main-header {
  text-align: left; 
  margin-bottom: 40px;
  position: relative;
  padding-top: 0 !important;
}

/* 筆記体英字画像：ご自身が開発された、スマホ版での最高の突き抜け高さ（-80px）を3連ボードすべてに一括同期！ */
.class-all-details-section .class-cursive-img-label {
  position: absolute;
  top: -80px !important;        /* スマホ版の黄金比（-80px） */
  left: -15px !important;
  width: 100%;
  max-width: 180px !important;
  z-index: 5;
  pointer-events: none;
}
.class-all-details-section .class-cursive-img-label img {
  width: 100%; height: auto; display: block; opacity: 0.85;
}

/* 日本語のメインタイトル */
.class-name-title {
  font-size: 24px; font-weight: bold; color: #211e55 !important;
  margin-top: 0 !important; /* 重なりバグを防ぐため、上の余白を0にリセット */
  margin-bottom: 18px; letter-spacing: 0.05em;
}

/* キャッチコピーの下線（テキストの長さぴったりで止まる inline-block 設計） */
.class-catchphrase-text {
  font-size: 14px; font-weight: bold; color: #211e55 !important;
  margin: 0 0 20px 0; line-height: 1.5; letter-spacing: 0.02em; width: 100%;
}
.catchphrase-underline-target {
  display: inline-block;
  border-bottom: 2px solid #211e55 !important; /* 文字の端っこで線がピタッと止まります */
  padding-bottom: 6px;
}
.class-intro-sub-paragraph {
  font-size: 13px; line-height: 1.7; color: #1c1c1c !important; font-weight: bold; margin: 0;
}

/* 3つの丸型グラフィックエリア（画像通りの × と ＝ 仕様の横並び） */
.class-graphic-visual-area {
  width: 100%; margin: 0 0 45px 0; display: flex; justify-content: flex-start; 
}
.kick-three-circles-flex {
  display: flex; align-items: center; gap: 8px; 
}
.circle-item {
  width: 62px; height: 62px; border-radius: 50%; color: #ffffff; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); flex-shrink: 0;
}
.item-green { background-color: #7BC143 !important; }
.item-blue { background-color: #4A90E2 !important; }
.item-orange { background-color: #D59B33 !important; }
.circle-sign-text { font-size: 13px; font-weight: bold; color: #666666; }
.circle-equal-text { font-size: 13px; font-weight: bold; color: #211e55 !important; white-space: nowrap; }
/* ==========================================================================
   class.html：3大個別クラス統合セクション（後半：箇条書き・テーブル・PC版）
   ========================================================================== */
/* 箇条書き：画像完全再現の「左側に走る黄色の美しいアクセント縦棒バッジ」を一括発動 */
.class-content-info-wrap { display: flex; flex-direction: column; gap: 35px; text-align: left; }
.class-info-bullet-box { width: 100%; }
.bullet-box-title-bar {
  font-size: 15px; font-weight: bold; color: #211e55 !important;
  margin: 0 0 15px 0; padding-left: 12px; position: relative; display: flex; align-items: center;
}
.bullet-box-title-bar::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
  background-color: #FFDB0D !important; /* スクールカラーの鮮やかな黄色 */
  border-radius: 2px;
}

/* 箇条書き（・）リストの文字色ネイビー化 */
.bullet-list-style-line { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bullet-list-style-line li { font-size: 13px; color: #1c1c1c !important; font-weight: bold; position: relative; padding-left: 2em; }
.bullet-list-style-line li::before { content: "・"; position: absolute; left: 0; top: 0; color: #1c1c1c; padding-left: 1em; }
.bullet-box-lead-p { font-size: 13px; line-height: 1.8; color: #1c1c1c !important; font-weight: bold; }
.bullet-box-lead-p p {
	margin-bottom: 6px;
	padding-left: 1em;       /* 左側に1文字分の隙間を確保 */
}
.bullet-box-lead-p p:last-child { margin-bottom: 0; }

/* キック限定コーチカード */
/* コーチ一覧全体（横並びコンテナ） */
.coach-list {
  display: flex;
  flex-wrap: wrap;       /* 画面幅に応じて折り返す */
  gap: 24px;             /* コーチ同士の間隔（デザインに合わせて調整してください） */
  justify-content: center; /* 中央揃えにする場合（左揃えが良い場合は削除） */
}

/* 各コーチのカード */
.coach-card {
  flex: 1;               /* 幅を均等に広げる */
  min-width: 280px;      /* 折り返される最小幅 */
  max-width: 400px;      /* 広がりすぎないための最大幅 */
}

/* 既存クラスの参考調整（必要に応じて） */
.coach-name-row-flex {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 20px;           /* 名前と「詳しくは →」の間の余白（お好みで調整） */
  justify-content: flex-start; /* 左端に寄せる（デフォルトで左揃えになります） */
  margin-bottom: 8px;  /* 画像との間の余白 */
}
.coach-main-name {
	font-size: 15px;
	font-weight: bold;
	color: #1c1c1c !important;
	margin: 0;
}
.coach-detail-link {
	font-size: 0.75rem; 
  text-decoration: none;
  white-space: nowrap;
	color: #666666;
	font-weight: bold;
}
.coach-photo-box-rect { 
	width: 100%;
	max-width: 400px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.coach-photo-box-rect img {
  width: 100%;
  height: auto;
  display: block;
}
/*.coach-name-row-flex { 
	display: flex;
	align-items: baseline;
	gap: 15px;
	margin-bottom: 15px;
}

/* クラス概要テーブル */
.table-intro-aim { font-size: 13px; font-weight: bold; color: #1c1c1c !important; margin: 0 0 12px 0; padding-left: 1em; }
.table-responsive-scroll-guard { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; border: 1px solid #e2e8f0; }
.individual-class-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 580px; text-align: center; }
.individual-class-table th { background-color: #211e55 !important; color: #ffffff; font-weight: bold; padding: 12px 10px; }
.individual-class-table td { padding: 12px 10px; border-bottom: 1px solid #e2e8f0; color: #211e55 !important; font-weight: bold; vertical-align: middle; }
.individual-class-table tr:last-child td { border-bottom: none; }
.individual-class-table tbody tr:nth-child(even) { background-color: #f8fafc; }
.price-num { color: #211e55 !important; }
.class-table-footer-notice { font-size: 11px; color: #666666; margin: 6px 0 0 0; text-align: left; padding-left: 1em; }

/* 開催場所＆リンク */
.location-text-content { font-size: 13px; line-height: 1.6; color: #1c1c1c !important; font-weight: bold; text-align: left; padding-left: 1em;}
.location-name-bold { font-size: 14px; margin-bottom: 6px !important; }
.google-maps-link { display: inline-block; color: #4A90E2; text-decoration: underline; margin-top: 5px; font-size: 12px; }

/* ゲームセンス専用のサイクル円形図の、美しい左寄せ設定 */
.gamesense-cycle-img-box { width: 100%; max-width: 320px; margin: 0 !important; }
.gamesense-cycle-img-box img { width: 100%; height: auto; display: block; }


/* ==========================================================================
   【PC版】画面幅768px以上での大画面ダイナミック一括完全同期（768px同期）
   ========================================================================== */
@media (min-width: 768px) {
  .class-all-details-section { padding: 80px 20px; }
  
  /* 💻PC大画面：すべてのボードが、お望み通りこれまでの半分以下に引き締まった最高の等間隔【45px】にガチッと一括ロックされます */
  .individual-class-white-board {
    padding: 65px 60px; border-radius: 16px;
    margin: 0 auto 45px auto !important; 
  }
  
  .class-block-main-header { margin-bottom: 50px; padding-top: 0 !important; }
  
  /* 💻PC大画面：ご自身が開発された、PC版の最高の飛び出し高さ（-100px）を3つのクラスすべてに一括強制適用！ */
  .class-all-details-section .class-cursive-img-label {
    top: -100px !important;       /* 💻PC版の黄金比（-100px） */
    left: -50px !important; max-width: 280px !important;
  }
  
  .class-name-title { font-size: 32px; margin-top: 25px; }
  .class-catchphrase-text { font-size: 18px; }
  .catchphrase-underline-target { padding-bottom: 10px; }
  .class-intro-sub-paragraph { font-size: 15px; }
  
  /* PC大画面でのグラフィックの横並び展開 */
  .kick-three-circles-flex { gap: 16px; }
  .circle-item { width: 85px; height: 85px; font-size: 13px; }
  .circle-sign-text { font-size: 18px; }
  .circle-equal-text { font-size: 16px; margin-left: 10px; }
  
  .bullet-box-title-bar { font-size: 18px; padding-left: 15px; margin-bottom: 20px; }
  .bullet-box-title-bar::before { width: 5px; }
  .bullet-list-style-line li, .bullet-box-lead-p { font-size: 14px; line-height: 1.9; }
  
  .table-intro-aim { font-size: 15px; margin-bottom: 15px; }
  .individual-class-table { font-size: 14px; }
  .individual-class-table th, .individual-class-table td { padding: 15px 20px; border-left: 1px solid rgba(33, 30, 85, 0.15) !important;
  border-right: 1px solid rgba(33, 30, 85, 0.15) !important;}
  .class-table-footer-notice { font-size: 12px; }
  .location-text-content { font-size: 14px; line-height: 1.7; }
  .location-name-bold { font-size: 16px; }
  
  .gamesense-cycle-img-box { max-width: 440px; margin: 0 !important; }
}
/* ==========================================================================
   class.html：週間スケジュール総合一覧テーブルセクション（Figma完全再現）
   ========================================================================== */
/* セクション全体：画像通りの、明るくクリーンなフラット薄グレー（#F2F2F2）背景 */
.class-weekly-schedule-section {
  background-color: #F2F2F2 !important;
  padding: 60px 20px 80px 20px;
  width: 100%;
  text-align: center;
}

/* セクション大見出し：象徴ネイビー（#211E55）に完全統一 */
.weekly-schedule-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0 auto 40px auto;
  letter-spacing: 0.05em;
}

/* 核心：スマホはみ出し安全ガードラッパー。
   スマホの狭い画面で表が横に割れて飛び出すバグを完全に封じ込め、指でスルスルとスクロールできるようにします */
.weekly-table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  border-radius: 4px; /* うっすらとした柔らかな角丸 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  margin-bottom: 35px;
}

/* 総合テーブル表本体 */
.weekly-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px; /* スマホでも文字が潰れてグチャグチャに改行されないための最低横幅の防衛線 */
  text-align: center; /* 画像通り、文字はすべて美しく「中央寄せ」にします */
}

/* テーブルのヘッダー：サイト共通の深い濃紺スタイル */
.weekly-schedule-table th {
  background-color: #1a1e53 !important; /* 深いネイビーのヘッダー面 */
  color: #ffffff !important;
  font-weight: bold;
  padding: 14px 10px;
  letter-spacing: 0.03em;
  border: 1px solid #1a1e53;
}

/* テーブル内の基本データセル */
.weekly-schedule-table td {
  padding: 12px 10px;
  color: #211e55 !important; /* 文字色は象徴ネイビーに統一 */
  font-weight: bold;         /* 写真の通りのクッキリとした太字表現 */
  border: 1px solid rgba(33, 30, 85, 0.15); /* マスを区切る上品なうっすら線 */
  vertical-align: middle;
}

/* 曜日カラムと月謝定員カラムの幅を綺麗に固定ロック */
.weekly-td-day { width: 12%; }
.weekly-td-price-cap { width: 25%; }

/* 🎨 画像完全再現：Figma指定の各クラスカラー背景（不透明度を調整した極上のライトパステル調） */
.row-kick-yellow td { background-color: #FFF6AD !important; }      /* 月曜：キックのライトイエロー */
.row-contact-blue td { background-color: #D3E7FF !important; }     /* 火曜：コンタクトのライトブルー */
.row-gamesense-green td { background-color: #D0F7EE !important; }  /* 水曜：ゲームセンスのライトグリーン */
.row-elite-white td { background-color: #ffffff !important; }      /* 木曜：エリート（選抜）のピュアホワイト */

/* 最下部：注記テキストエリア（左寄せ） */
.weekly-schedule-footer-notes {
  max-width: 960px; /* テーブル幅とピシッと揃えます */
  margin: 0 auto;
  text-align: left; /* 画像のデザイン通り、注記は「左寄せ」になります */
  font-size: 12px;
  line-height: 1.8;
}
.weekly-schedule-footer-notes p {
  margin: 0 0 8px 0;
}
.weekly-schedule-footer-notes p:last-child {
  margin-bottom: 0;
}

/* ■付きのメイン重要注記（ネイビーの太字） */
.note-bold-navy {
  color: #211e55 !important;
  font-weight: bold;
  font-size: 13px;
}

/* うっすらとしたグレーの補足注記項目 */
.note-gray-item {
  color: #666666 !important;
  font-weight: normal;
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面ダイナミック最適化
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .class-weekly-schedule-section {
    padding: 90px 20px 100px 20px;
  }
  
  .weekly-schedule-main-title {
    font-size: 32px;
    margin-bottom: 55px;
  }
  
  /* PC大画面では、コンテナの幅（最大960px）に合わせてのびのびとジャストフィット展開させます */
  .weekly-table-responsive-wrapper {
    max-width: 960px;
    margin: 0 auto 40px auto;
  }
  
  .weekly-schedule-table {
    font-size: 14px; /* パソコン画面で最も見やすいサイズへスケールアップ */
  }
  .weekly-schedule-table th,
  .weekly-schedule-table td {
    padding: 16px 15px; /* マスの中の余白を広げて、圧倒的なラグジュアリー感を出します */
  }
  
  .weekly-schedule-footer-notes {
    font-size: 14px;
  }
  .note-bold-navy {
    font-size: 15px;
  }
}
/* ==========================================================================
   academy.html：Academyとは何か ＆ 成長の流れフローチャート（Figma完全再現）
   ========================================================================== */
/* セクション全体：画像通りの、明るくクリーンなフラット薄グレー（#F2F2F2）背景 */
.academy-intro-roadmap-section {
  background-color: #F2F2F2 !important;
  padding: 80px 20px;
  width: 100%;
  text-align: center; /* 基本はすべて美しい「中央寄せ」にします */
}

/* 各大きなブロック（前半・後半）の上下の間隔 */
.academy-definition-block {
  margin-bottom: 90px;
}

/* セクション共通大見出し：象徴ネイビー（#211E55）に完全統一 */
.academy-main-title {
  font-size: 24px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0 auto 30px auto;
  letter-spacing: 0.05em;
}

/* 画像完全再現：中央寄せの「2行の深いネイビーのメッセージ座布団」 */
.academy-navy-cushion-box {
  background-color: #022859 !important; /* ディープネイビー */
  color: #ffffff !important;
  display: inline-block; /* 横幅いっぱいに広がらず、文字の長さに心地よく吸着させます */
  padding: 16px 30px;
  border-radius: 4px; /* ほんの少しの丸角 */
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.academy-navy-cushion-box p {
  margin: 0;
}

/* 前半：中央寄せ解説メッセージ */
.academy-intro-text-wrap {
  font-size: 13px;
  line-height: 2.0; /* 画像のような、ゆったりとした広い行間 */
  color: #211e55 !important; /* 文字色は象徴ネイビー */
  font-weight: bold;
  max-width: 800px;
  margin: 0 auto;
}
.academy-intro-text-wrap p {
  margin: 0 0 25px 0;
}
.academy-intro-text-wrap p:last-child {
  margin-bottom: 0;
}
/* 強調される力強い一文 */
.academy-intro-text-wrap .font-bold-navy {
  font-size: 14px;
  color: #022859 !important; /* より引き締まった深い色味に */
}

/* ─── 後半：フローチャート図の描画（最大幅600pxのスマートグリッド） ─── */
.academy-vertical-chart-wrapper {
  width: 100%;
  max-width: 600px; /* 画像のような最もスタイリッシュに見える縦長比率にブレーキ */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像完全再現：白ベースに薄グレーフチ線の、細長い角丸ボックス */
.chart-step-box-white {
  width: 100%;
  background-color: #ffffff !important;
  border: 1px solid #b3b3b3; /* 上品な細いフチ線 */
  border-radius: 12px; /* 柔らかな丸角丸 */
  padding: 20px 15px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
}
.chart-step-title-bold {
  font-size: 16px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0 0 5px 0;
}
.chart-step-sub-text {
  font-size: 13px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0;
}
.chart-step-mid-text {
  font-size: 14px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0;
}

/* 画像完全再現：CSS側だけで描画する、上下の箱を繋ぐ「太いグレーの下向き矢印（▼）」 */
.chart-vertical-arrow {
  width: 2px;
  height: 35px; /* 画像通りの、箱と箱の間の絶妙な距離感の線 */
  background-color: #b3b3b3; /* 線の色 */
  position: relative;
  margin: 5px 0; /* 上下のすき間 */
}
/* 線の最下部に、▲をひっくり返した「矢印の先端（▼）」を自動合成します */
.chart-vertical-arrow::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;  /* 矢印のハネの左側 */
  border-right: 6px solid transparent; /* 矢印のハネの右側 */
  border-top: 8px solid #b3b3b3;       /* これでシャープな下向きの三角形（▼）が全自動で完成します */
}

/* 画像完全再現：終着駅である、深いディープネイビー（#022859）の大きな箱 */
.chart-step-box-dark-navy {
  width: 100%;
  background-color: #022859 !important; /* 完璧なディープネイビー */
  border-radius: 12px;
  padding: 35px 30px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.chart-navy-main-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff !important;
  margin: 0 0 15px 0;
  letter-spacing: 0.03em;
}
/* 箱の中の箇条書き（インデント付き） */
.chart-navy-program-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-navy-program-list li {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff !important;
  letter-spacing: 0.02em;
}

/* フロー図の真下の、2行の締めくくり注記メッセージ */
.chart-footer-notice-p {
  margin-top: 30px;
  font-size: 13px;
  line-height: 1.8;
  font-weight: bold;
  color: #211e55 !important;
}
.chart-footer-notice-p p {
  margin: 0 0 4px 0;
}
.chart-footer-notice-p p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   【PC版】画面幅768px以上での大画面ダイナミックバランス最適化（768px同期）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .academy-intro-roadmap-section { padding: 100px 20px; }
  .academy-definition-block { margin-bottom: 110px; }
  
  .academy-main-title { font-size: 32px; margin-bottom: 40px; }
  .academy-navy-cushion-box { font-size: 18px; padding: 18px 45px; margin-bottom: 50px; }
  .academy-intro-text-wrap { font-size: 15px; line-height: 2.3; }
  .academy-intro-text-wrap .font-bold-navy { font-size: 17px; }
  
  /* 💻PC大画面：フローチャート全体の縦横比を最も美しく安定させるため、最大幅を600pxにガチッとロック */
  .academy-vertical-chart-wrapper { max-width: 600px; }
  .chart-step-box-white { padding: 25px 20px; }
  .chart-step-title-bold { font-size: 18px; }
  .chart-step-sub-text, .chart-step-mid-text { font-size: 15px; }
  
  .chart-vertical-arrow { height: 45px; } /* 💻PC大画面に合わせて、縦の線を少し長くのびやかに */
  
  .chart-step-box-dark-navy { padding: 45px 50px; }
  .chart-navy-main-title { font-size: 22px; margin-bottom: 20px; }
  .chart-navy-program-list { gap: 12px; }
  .chart-navy-program-list li { font-size: 16px; }
  
  .chart-footer-notice-p { font-size: 15px; line-height: 2.0; margin-top: 40px; }
}

/* ==========================================================================
   academy.html：【JGMA詳細】2連コーチカードセクション
   ========================================================================== */
/* セクション全体：画面幅いっぱいに完璧なプレミアムディープネイビー（#022859）を展開 */
.academy-program-detail-section.dark-premium-theme {
  background-color: #022859 !important;
  padding: 60px 10px;
  width: 100%;
  box-sizing: border-box;
}

.individual-program-navy-wrap {
  width: 100%;
  max-width: 960px; /* サイト全体の美しいグリッド共通幅 */
  background-color: #023373 !important; /* 囲みの中をご指定のカラーに固定ロック */
  border-radius: 12px; /* 上品で滑らかな角丸 */
  padding: 35px 25px;  /* 囲みの内側の快適な余白 */
  margin: 0 auto;
  text-align: left; /* テキストや見出しはすべて美しく左寄せ */
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 1. 見出しヘッダーエリア（画像通りの白フチボックス仕様） */
.program-block-main-header {
  margin-bottom: 40px;
}
.program-white-border-title-box {
  display: inline-block; /* 横幅いっぱいに広がらず、文字の長さに心地よく吸着 */
  border: 1.5px solid #ffffff !important; /* 画像完全再現：上品な細い白いフチ線 */
  border-radius: 4px; /* ほんの少しの丸角 */
  padding: 12px 20px;
  margin-bottom: 25px;
}
.program-main-title-text {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff !important; /* 眩しい白文字 */
  margin: 0;
  padding: 0;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* キャッチコピーの下線：文字の長さぴったりで美しくブレーキがかかる inline-block 設計 */
.program-catchphrase-text {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff !important;
  margin: 0 0 25px 0;
  line-height: 1.5;
  letter-spacing: 0.02em;
  width: 100%;
}
.program-catchphrase-text .catchphrase-underline-target {
  display: inline-block;
  border-bottom: 2px solid #ffffff !important; /* 白文字の最後の文字の端っこで線がピタッと止まります */
  padding-bottom: 6px;
}

/* 真っ白な本文紹介メッセージ段落 */
.program-intro-body-text {
  font-size: 13px;
  line-height: 1.8; /* 洗練されたゆったり空間の行間 */
  color: #ffffff !important;
  opacity: 0.95;
}
.program-intro-body-text p {
  margin: 0 0 15px 0;
  color: #ffffff !important;
}
.program-intro-body-text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   academy.html：JGMA コーチ紹介エリア（スマホ版＆PC版完全同期スタイル）
   ========================================================================== */

/* 📱【スマホ版基本：画面幅767px以下での挙動】
   ────────────────────────────────────────────────========================== */
/* コーチ紹介エリア全体のスマホ版ラッパー */
.program-coach-section-wrap {
  width: 100%;
  margin-top: 40px;
}

/* スマホ版タイトル：すでに十分綺麗に見えている、中央寄せの真っ白な大見出し文字 */
.program-coach-section-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff !important;   /* 眩しい白文字 */
  text-align: center !important; /* 中央寄せに固定 */
  margin: 0 auto 30px auto;
  letter-spacing: 0.03em;
}

/* スマホ版カードコンテナ：液晶画面をはみ出さないよう、まずは綺麗に縦「1列」に積みます */
.program-coach-card-row-flex {
  display: flex !important;
  flex-direction: column !important; /* スマホでは絶対に縦積み */
  gap: 25px !important;               /* スマホの時にカード同士の間に生まれる快適な縦の隙間 */
  width: 100% !important;
}

/* スマホ版カード本体の土台 */
.coach-rich-white-card-item {
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: 8px;
  overflow: hidden; /* 写真が角丸からはみ出すのを綺麗にカット */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* カードの上半分：顔写真スペース（綺麗な1:1の正方形を全自動で死守） */
.coach-card-top-photo-media {
  width: 100%;
  height: auto;
  /* ⬇️ここを修正：正方形（1 / 1）から、写真本来の美しさが活きるワイド横長（3 / 2）へ変更します！
     （※もしもっと平べったい超横長にしたい場合は 16 / 9 などにいつでも自由に変更できます） */
  aspect-ratio: 3 / 2 !important; 
  overflow: hidden;
  background-color: #f1f5f9;
}
.coach-card-top-photo-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* カードの下半分：名前・解説テキストエリア */
.coach-card-bottom-info {
  padding: 25px 20px;
  text-align: left; /* テキストは左寄せ */
  display: flex;
  flex-direction: column;
}

/* 「SOコーチ / SHコーチ」の小さな濃紺バッジ */
.coach-role-badge {
  display: inline-block;
  background-color: #1a1e53 !important;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 3px;
  width: max-content;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

/* コーチのお名前 */
/* スマホ版・PC版共通：コーチ名（.coach-profile-name-title）の左側に
   class.htmlと1ミリの狂いもない共通の黄色い縦棒（幅4px・角丸仕様）を自動で合成します */
.coach-profile-name-title {
	font-size: 15px;
  font-weight: bold;
  color: #211e55 !important;
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
  position: relative;
  padding-left: 12px !important; /* 縦線が文字とぶつからないように、左側に綺麗なすき間を作ります */
  display: flex;
  align-items: center;
}

/* 擬似要素（::before）を使って、HTMLを汚さずに黄色い長方形を描写します */
.coach-profile-name-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* お名前の文字の高さに対して、常に「上下ど真ん中」に自動固定します */
  width: 4px;                  /* 縦棒の太さ（class.htmlと同期） */
  height: 18px;                /* 縦棒の長さ（お名前にジャストフィットする高さ） */
  background-color: #FFDB0D !important; /* スクールカラーの鮮やかな黄色 */
  border-radius: 2px;          /* ほんのりとした上品な丸角 */
}
/* お名前の下の、クッキリとした太字解説 */
.coach-profile-mini-summary {
  font-size: 12px; line-height: 1.5; color: #666666 !important; font-weight: bold; margin: 0 0 15px 0;
}

/* 「詳しくは →」のリンクボタン */
.coach-profile-more-arrow-link {
  font-size: 11px; color: #211e55 !important; text-decoration: none; font-weight: bold; margin-top: auto; align-self: flex-end;
}


/* 💻【PC版：画面幅768px以上でのダイナミック変身挙動】
   ────────────────────────────────────────────────========================== */
@media (min-width: 768px) {
  .academy-program-detail-section.dark-premium-theme {
    padding: 90px 20px;
  }
  
  /* 💻PC大画面：ご指示の通り、PC版でのみ内側のクッション余白を上下60px、左右100pxへとダイナミックに大拡張！
     これにより中のコンテンツが中央に向かって綺麗に引き締まり、最高の高級感を演出します */
  .individual-program-navy-wrap {
    padding: 60px 100px !important; /* ご指定の贅沢余白を最優先でロック */
    border-radius: 16px;
  }
  
  .program-block-main-header { margin-bottom: 60px; }
  .program-white-border-title-box { padding: 14px 30px; margin-bottom: 30px; }
  .program-main-title-text { font-size: 26px; }
  .program-catchphrase-text { font-size: 18px; margin-bottom: 30px; }
  .program-catchphrase-text .catchphrase-underline-target { padding-bottom: 8px; }
  .program-intro-body-text { font-size: 15px; line-height: 2.1; }
  
  .program-coach-section-wrap { margin-top: 50px; }
  
  /* 💻PC大画面・ご指示反映：コーチ紹介のタイトルを完璧な「中央寄せ（center）」に固定し、
     ネイビー背景の中でも眩しく視認できる「真っ白（#ffffff）」へと一括統制します */
  .program-coach-section-title { 
    font-size: 24px; 
    margin-bottom: 40px; 
    color: #ffffff !important;   /* 文字色を完璧な真っ白に上書き */
    text-align: center !important; /* Figmaのデザイン通り中央寄せに完全固定 */
  }
  
  /* 💻PC大画面・ご指示反映：スマホの縦積みから「絶対に変形させず真横一列」の2カラムへ一発変換！
     justify-content: center を掛け合わせることで、2枚のカードを画面の中央寄せに美しくギュッと集めます */
  .program-coach-card-row-flex {
    display: flex !important;
    flex-direction: row !important;     /* 縦積みを確実に打ち消して横並びへ */
    justify-content: center !important; /* 2枚のホワイトカードを中央寄せに集めます */
    align-items: stretch !important;    /* 左右のカードの縦の長さを中身に関わらず自動で一直線に揃えます */
    flex-wrap: nowrap !important;       /* 画面幅が少し狭くなっても絶対に2行に折り返させないお守り */
    gap: 12px !important;               /* カードとカードの間の、快適な横のすき間 */
    width: 100% !important;
  }
  
  /* 💻PC大画面：左右のカードがそれぞれ全体の横幅の半分ずつ（48%）を均等に分け合い、大画面幅に合わせて伸縮します */
  .coach-rich-white-card-item {
    width: 48% !important;
    max-width: 340px; /* 広がりすぎないように安全ブレーキ */
    flex-shrink: 1 !important; /* ノートPCなどの画面幅に合わせてスマートに縮むことを許可 */
  }
  
  .coach-card-bottom-info { padding: 30px 25px; }
  /* 💻PC大画面：お名前の文字が18pxに大きくなるのに合わせ、黄色い縦線もバランスよくスケールアップさせます */
  .coach-profile-name-title {
    padding-left: 15px !important; /* 隙間を15pxに広げてラグジュアリーに */
  }
  .coach-profile-name-title::before {
    width: 4px;
    height: 22px; /* 💻PCの大文字に合わせた、頼りがいのある高さ22pxへ拡張 */
  }
  .coach-profile-mini-summary { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
  .coach-profile-more-arrow-link { font-size: 13px; }
  
  /* 核心の隙間バグ完全消滅命令：
     1枚目のカード（左側）の右のフチに対して、絶対に消えない30pxの隙間（壁）をPC版限定で直接命令します。
     これにより、ブラウザが gap の命令をサボるバグを100%力ずくでねじ伏せ、美しいネイビーの隙間を強制発生させます！ */
  .program-coach-card-row-flex .coach-rich-white-card-item:first-child {
    margin-right: 12px !important;
    margin-bottom: 0 !important; /* スマホ用の縦隙間マージンをクリアします */
  }
	/* 💻PC大画面：パソコンの広いモニターで見比べたときにも、
     スマホ版と完璧に連動した美しい横長ワイド（3 / 2）の比率を最優先でキープします */
  .coach-card-top-photo-media {
    aspect-ratio: 3 / 2 !important; /* ここをPC版の中にも合流させます */
  }
}
/* ==========================================================================
   academy.html：JGMA専用 プレミアムQ&A（透過ネイビー画像シールド仕様）
   ========================================================================== */
/* ご指示：背景画像の上に、CSS側だけで美しい「透過ネイビー（不透明度85%）」のシールド膜を重ねます。
   これにより、背後の写真の空気感を活かしたまま、白文字が浮き彫りのようにクッキリ浮かび上がります */
.academy-premium-qa-block {
  background-image: linear-gradient(rgba(2, 40, 89, 0.5), rgba(2, 40, 89, 0.5)), url('../images/faq-bg.png') !important; /* ※お好みのスタジアムやグラウンドの写真名に変えてください */
  background-color: #022859; /* 画像通りの明るい薄グレー背景色 */
}

/* 1. 上半身：見出しヘッダー周り */
.premium-qa-top-header {
  margin-bottom: 45px;
}
.premium-qa-main-title {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff !important;
  margin: 0 auto 15px auto;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.premium-qa-sub-lead {
  font-size: 13px;
  line-height: 1.8;
  color: #ffffff !important;
  opacity: 0.9;
  font-weight: bold;
}

/* 2. 中半身：「JGMA Q&A」の独立小タイトル */
.premium-qa-section-label {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff !important;
  margin: 0 auto 25px auto;
  letter-spacing: 0.05em;
}



/* 3. 下半身：コンタクトへのアクションエリア */
.premium-qa-bottom-action {
  margin-top: 45px;
}
.premium-qa-action-lead {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff !important;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}
.premium-qa-action-lead-Naby {
  font-size: 13px;
  font-weight: bold;
  color: #211E55 !important;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}

/* ボタンの特別カスタム：画像通りの「白フチ×透明背景」のプレミアムカプセルボタンに変身させます */
.model-faq-section .model-faq-btn-row .model-faq-btn-item.jgma-consult-btn {
  background-color: transparent !important; /* 背景を透明に抜きます */
  border: 1.5px solid #ffffff !important;    /* 眩しい白フチ線 */
  color: #ffffff !important;                /* 文字色も白 */
  max-width: 290px !important;
  margin: 0 auto;
}
/* ホバーした瞬間、画像と反転して「真っ白な座布団×文字色ネイビー」へ美しく切り替わる極上モーション */
.model-faq-section .model-faq-btn-row .model-faq-btn-item.jgma-consult-btn:hover {
  background-color: #ffffff !important;
  color: #022859 !important;
}

/* ==========================================================================
   【PC版】画面幅768px以上での プレミアムQ&A大画面最適化（768px同期）
   ========================================================================== */
@media (min-width: 768px) {
  .academy-premium-qa-block { padding: 90px 20px !important; }
  .premium-qa-top-header { margin-bottom: 55px; }
  
  .premium-qa-main-title { font-size: 32px; margin-bottom: 20px; }
  .premium-qa-sub-lead { font-size: 15px; line-height: 2.0; }
  
  .premium-qa-section-label { font-size: 24px; margin-bottom: 35px; }
  
  .premium-qa-bottom-action { margin-top: 55px; }
  .premium-qa-action-lead,.premium-qa-action-lead-Navy { font-size: 15px; margin-bottom: 25px; }
  
  .model-faq-section .model-faq-btn-row .model-faq-btn-item.jgma-consult-btn {
    max-width: 320px !important; /* PC大画面用に見栄えのいいボタン幅へ */
  }
}
/* ==========================================================================
   academy.html：【EDA詳細】4連ナンバリングカード（前半：スマホ版基本装飾）
   ========================================================================== */
/* 後半：4連カードエリア全体のラッパー */
.eda-numbered-cards-section-wrap {
  width: 100%;
  margin-top: 40px;
  text-align: left; /* 画像通り左寄せベース */
}

/* 「EDAで大切にしていること」の白い中見出し */
.eda-numbered-section-title {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff !important;
  margin: 0 0 20px 0;
  letter-spacing: 0.03em;
}

/* 4つのカードを綺麗に縦に積み重ねるコンテナ */
.eda-numbered-card-list-box {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 画像通りの、詰まり気味のスタイリッシュな縦の間隔 */
  width: 100%;
  margin-bottom: 25px;
}

/* 画像完全再現：白く細長い、上品なナンバリングカード本体 */
.eda-numbered-white-card-item {
  width: 100%;
  background-color: #ffffff !important; /* ピュアホワイトな座布団 */
  border-radius: 4px; /* 画像のようなシャープでごくわずかな角丸 */
  padding: 12px 15px;
  display: flex;
  align-items: center; /* 数字バッジと右側の文章の上下中央を一直線に揃えます */
  gap: 15px; /* 数字とテキストの間の心地よい隙間 */
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ご指示通り修正：左端に佇む、グレー背景なし・文字色グレー（#94A3B8）の数字バッジ */
.card-number-badge {
  /* ⬇️ここを修正：横長長方形のサイズ制限（width / height）と薄グレー背景を完全に消去（ゴミ箱へポイ）します */
  background-color: transparent !important; /* 背景色を完全に透明（なし）に抜きます */
  color: #B3B3B3 !important;                /* 画像のデザイン通り、数字の文字自体を上品なグレーに染め上げます */
  
  font-size: 16px;                          /* 文字が引き立つようにフォントサイズを少しだけスケールアップ */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                           /* 画面が狭くなっても数字が潰れるのを絶対に防ぐお守り */
}

/* カード内のテキストメッセージ */
.card-numbered-text-content {
  font-size: 12px;
  font-weight: bold;
  color: #211e55 !important; /* 文字色は安心のネイビー */
  margin: 0;
  line-height: 1.4;
}

/* 4連カードのすぐ下にある、締めくくりの白いメッセージ一文 */
.eda-footer-bottom-notice-text {
  font-size: 12px;
  font-weight: bold;
  color: #ffffff !important;
  opacity: 0.95;
  margin: 25px 0 0 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
/* ==========================================================================
   academy.html：アカデミー総合スケジュール・対象学年料金表（Figma完全再現）
   ========================================================================== */
/* 📱【スマホ版基本：画面幅767px以下でのテーブル装飾】
   ────────────────────────────────────────────────────────────────========== */
/* セクション全体：画像通りの明るくクリーンなフラット薄グレー（#F2F2F2）背景 */
.academy-weekly-schedule-section {
  background-color: #F2F2F2 !important;
  padding: 60px 20px;
  width: 100%;
  text-align: center;
}

/* スマホはみ出し安全ガードラッパー */
.academy-table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  margin-bottom: 25px;
}

/* テーブル表本体 */
.academy-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 580px; /* スマホで数字や英語が窮屈に折り返して崩れるのを100%ガード */
  text-align: center; /* 文字はすべて見やすく中央寄せ */
  background-color: #ffffff !important;
}

/* テーブルヘッダー：サイト共通のディープな濃紺スタイル */
.academy-schedule-table th {
  background-color: #1a1e53 !important;
  color: #ffffff !important;
  font-weight: bold;
  padding: 14px 10px;
  letter-spacing: 0.03em;
  border: 1px solid #1a1e53;
}

/* テーブル内の基本セルデータ：左右に「上品な縦の内枠線」を這わせます */
.academy-schedule-table td {
  padding: 14px 10px;
  color: #211e55 !important;
  font-weight: bold;
  border: 1px solid rgba(33, 30, 85, 0.15) !important; /* 縦線・横線ともに薄いネイビーで一括ロック */
  vertical-align: middle;
}

/* 曜日カラムと月謝定員カラムの幅を綺麗に固定 */
.academy-td-day { width: 15%; }
.academy-td-price { width: 20%; }
.academy-td-main-content { width: 50%; }

/* アカデミーの正式英語名 */
.academy-full-name {
  font-size: 13px;
  color: #444444;
  margin: 0 0 6px 0;
  font-weight: normal;
}

/* 画像完全再現：黄色いスタイリッシュな角丸ミニバッジ（JGMA / EDA） */
.academy-yellow-badge {
  display: inline-block;
  background-color: #FFDB0D !important; /* スクールカラーの鮮やかな黄色 */
  color: #211e55 !important;            /* 文字はクッキリとしたネイビー */
  font-size: 11px;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 4px; /* 上品な角丸 */
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(255, 219, 13, 0.2);
}

/* 画像完全再現：最下部の「対象学年」の横一文字の白い合体行 */
.row-target-grade-footer td.td-target-grade-text {
  background-color: #ffffff !important; /* 背景はピュアな真っ白 */
  color: #211e55 !important;
  font-size: 13px;
  font-weight: bold;
  padding: 15px 10px;
  text-align: center;
}

/* 表の真下の補足注記（左寄せ） */
.academy-schedule-footer-notes {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.academy-note-gray-item {
  font-size: 11px;
  color: #666666 !important;
  margin: 0;
  line-height: 1.5;
  font-weight: normal;
}

/* 【PC版：画面幅768px以上での大画面ダイナミック最適化】
   ────────────────────────────────────────────────────────────────========== */
@media (min-width: 768px) {
  .academy-weekly-schedule-section {
    padding: 80px 20px 100px 20px;
  }
  
  /* PC大画面では、コンテナ幅（最大960px）に合わせてのびのびとジャスト展開 */
  .academy-table-responsive-wrapper {
    max-width: 960px;
    margin: 0 auto 35px auto;
  }
  
  .academy-schedule-table {
    font-size: 15px; /* PC大画面で見やすいサイズへスケールアップ */
  }
  .academy-schedule-table th,
  .academy-schedule-table td {
    padding: 18px 20px; /* マスの中の余白を広げて圧倒的なラグジュアリー感を演出 */
  }
  
  .academy-full-name { font-size: 15px; margin-bottom: 8px; }
  .academy-yellow-badge { font-size: 12px; padding: 5px 22px; }
  
  .row-target-grade-footer td.td-target-grade-text {
    font-size: 15px;
    padding: 18px 20px;
  }
  
  .academy-note-gray-item {
    font-size: 13px;
  }
}
.faq-link {
  display: inline-block;
  color: #211e55;
  opacity: 0.6;
  text-decoration: underline;
  margin-top: 5px;
}
.faq-link:hover {
  opacity: 1;
}
/* ==========================================
   学生コーチ 育成・サポート環境BOX（枠線タイプ）
========================================== */
.job-support-box {
  margin: 0 40px 40px;
  padding: 20px;
  background-color: #F5F5F5; 
  border-radius: 8px;
  box-sizing: border-box;
}
.job-support-box-WHITE {
  margin: 30px 50px 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
}
.job-support-box-WHITE2 {
  margin: 0 50px 50px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
}
.job-support-box-liUnder {
  margin: 20px 0 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
}

.job-support-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #444444;
  margin: 0;
}
.job-support-text-NAVY {
  font-size: 1rem;
  line-height: 1.8;
  color: #211e55;
  margin: 0;
	font-weight: bold;
}
/* ------------------------------------------
   レスポンシブ（スマホ対応：767px以下）
------------------------------------------ */
@media screen and (max-width: 767px) {
  .job-support-box, .job-support-box-WHITE, .job-support-box-WHITE2, .job-support-box-liUnder {
    margin: 20px;
    padding: 14px 16px; /* スマホ画面の横幅を圧迫しないようパディング調整 */
  }
	
  .job-support-text,.job-support-text-NAVY {
    font-size: 0.875rem; /* 14px相当 */
    line-height: 1.7;
  }
}

.sp-br {
  display: none; /* PCでは非表示（改行しない） */
}

@media screen and (max-width: 767px) {
  .sp-br {
    display: block; /* スマホでは表示（改行する） */
  }
}
.small-text {
	font-size: 12px;
}
@media (min-width: 768px) {
	.small-text {
	font-size: 16px;
}
	}