@charset "UTF-8";
/* =============================================================================
   WILL renewal layer — v0.1（2026-06-17）
   役割：APPAREL デザインシステム v1.0 へ視覚言語を合流させる上書きレイヤー。
        style.css の後に読み込み、トークン変数起点で旧デザインを段階置換する。
   原則：モノクロ基調＋WILL GREEN 一点 / Noto Sans JP（KV・セクション見出しのみ Instrument Serif）/ 角丸0・罫線で構造 /
        200ms ease-out・濃度で動かす。トップの入口は温度B（温度高め）。
   ロールバック：functions.php の 'will-renewal' enqueue を外すだけ。
   注意：JS フック（js_ 接頭辞・swiper）と意図的な円形は触らない。
============================================================================= */

/* ===== 0. トークン（APPAREL と共有） ===== */
:root {
  /* ブランドガイド v0.1（DON GRAPHICS / 2026-07）04_COLOR の指定3色が正本。
     Will Green #14733f / Black #231815 / White #ffffff。paper・surface はサイト固有の中間色。 */
  --ink: #231815; /* ガイド Black（赤み寄りの墨）。旧 #0a0a0a から変更 */
  --ink-raised: #2f2320; /* club「浮いた黒」：ink から少し持ち上げた面（白抜き長文の可読性確保） */
  --paper: #fbfaf7;
  --paper-pure: #ffffff;
  --surface: #f0ede6;
  --will-green: #14733f; /* ガイド Will Green。旧 #0d7640 から変更 */
  --will-green-dark: #105a31; /* --will-green を同比率で暗くした派生色（ガイド外・ホバー等の内部用） */
  --will-green-bright: #14733f; /* 初期は基本色と同値。club黒地で沈む箇所用に後で明るい緑へ振る受け皿 */
  --line-green: #00c400; /* LINE公式色（サイト内 line_button.webp と同値）。LINE導線のホバー等に使用 */
  --gray-100: #e6e3dc;
  --gray-300: #c9c5bc;
  --gray-500: #8a877e;
  --gray-700: #3a3a3a;
  /* ガイド 09_TYPOGRAPHY。DISPLAY(Instrument Serif) は KV コピーとセクション大見出しだけに使い（§12）、
     それ以外の英字（ナビ・日付・番号・装飾英字など UI 階層）は和文と同じ Noto Sans JP で通す。 */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-en: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.2s;
}

/* ===== 1. 基盤（全ページ共通の地） ===== */
/* paper地は html に置く。body を透明にして、背面パーティクル(#fs-particles: body直下・z-index:-1)を
   root へpropagateする背景に隠されず、コンテンツ(透明セクション)の背後に浮かせる。 */
html {
  background: var(--paper);
}
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ja);
  letter-spacing: 0.02em; /* 旧 .1em は詰める */
  line-height: 1.7;
}
a {
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
::selection {
  background: var(--will-green);
  color: #fff;
}

/* 面背景は透明に（paper地は html が担当）。背面の浮遊パーティクル(#fs-particles)を各ページで透かす。 */
.top_section,
.info_section,
.school_section,
.club_section,
.contact_section,
.l_contents-sm,
.about_section {
  background: transparent;
}

/* オープニング（タイポ系ミニマル）：背景はTOPページと同じ paper地＋浮遊パーティクル。
   WILLワードマークがマスクから立ち上がり、黒/白ボール2個が遠くから一直線に飛来してLLにハマる。
   最後に緑の細罫が左→右に引かれる（eyebrow罫線と同じ draw-on 言語）。 */
#opening {
  background: transparent; /* 背面の #fs-particles（paper地＋緑四角）を見せる */
}
/* OP中は他コンテンツを隠し、#opening（透過）越しに背面 paper＋パーティクルを見せる。
   #fs-particles は body直下・z-index:-1 のまま（コンテンツを隠せば透ける）。JS完了で is-opening 解除。 */
/* 2026-10-19 速度改善: OP 中も本文を visibility:hidden にしない。隠すと KV の描画が OP 終了後（約 2.8 秒）になり、
   Lighthouse / PageSpeed Insights の模擬計算が「OP 中に届いた資源（フォント・画面外の画像）」を全部 LCP の待ち時間に
   積んで 12〜14 秒と出る。代わりに paper 色の覆い（z 9997）とパーティクル（z 9998）を本文の上・#opening（z 9999）の下に
   挟み、本文は覆いの下で先に描いておく。見た目は従来どおり（paper 地＋緑の四角＋ロゴ）。 */
body.is-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 9997;
  pointer-events: none;
}
body.is-opening #fs-particles {
  z-index: 9998;
}
/* ヘッダー常駐CTA(.l_header-cta)は is-cta-visible で visibility:visible を持ち、
   上の非表示を上書きして OP中に右上へ漏れる。OP中は強制的に隠す。 */
body.is-opening .l_header-cta {
  visibility: hidden !important;
  opacity: 0 !important;
}
.op_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.2vh, 34px);
  /* load前は隠す。GSAPが初期配置を決めてから可視化＝“定位置で一瞬見えて消える”ちらつき防止 */
  visibility: hidden;
}
/* ロックアップ：wordmark（マスク付き）＋飛来するボールの基準枠 */
.op_logo-lockup {
  position: relative;
  display: block;
  width: clamp(190px, 26vw, 300px);
}
/* マスク：wordmark の下端を隠し、translateY で下から立ち上がらせる */
.op_logo-mask {
  display: block;
  overflow: hidden;
  line-height: 0;
}
/* 正方形viewBoxの上下余白を aspect-ratio + object-fit:cover でタイトにクロップ */
.op_logo {
  display: block;
  width: 100%;
  aspect-ratio: 462 / 223;
  object-fit: cover;
  object-position: center 55%;
  /* 初期transformはJS(gsap yPercent)で付与。CSSのtranslateY(%)はgsapのyPercentと成分が競合するため置かない */
}
/* ボール：公式ロゴ(WILL-logo.svg)の該当ボール領域を切り出して表示＝黒/白バスケの実質感をそのまま。
   位置・径は公式ロゴの実測値に合わせる（黒=x66.5% 白=x74.9% で隣接・縦中央やや下・径8.4%）。 */
.op_ball {
  position: absolute;
  width: 10.5%; /* 円(可視径8.4%)の外側に余白を持たせた窓。円が端で切れる(八角形化)のを防ぐ */
  aspect-ratio: 1 / 1;
  top: 27.7%;
  background-image: url(../img/WILL-logo-op.webp); /* 2026-10-19: WILL-logo.svg（206KB・中身は PNG 埋め込み）を Chrome で描画した 1400px の WebP（11KB）に。位置は同じ */
  background-repeat: no-repeat;
  background-size: 948% 948%; /* 円(44.3px)の周囲に余白を含む55.4px窓を要素幅に */
  clip-path: circle(40% at 50% 50%); /* ボール外周＝隣接ボール/文字の写り込みを円でクリップし真円に */
}
.op_ball--l {
  /* 黒バスケ（公式ロゴ 左のボール領域）。円の中心を要素中央に */
  left: 61.25%;
  background-position: 68.4% 46.7%;
  transform: translateX(-640px) scale(0.12); /* 初期＝遠く左（JSと同値） */
}
.op_ball--r {
  /* 白バスケ（公式ロゴ 右のボール領域）。円の中心を要素中央に */
  left: 69.65%;
  background-position: 77.9% 46.7%;
  transform: translateX(640px) scale(0.12); /* 初期＝遠く右（JSと同値） */
}
.op_rule {
  position: relative;
  display: block;
  width: clamp(150px, 21vw, 230px);
  height: 2px;
  background: var(--gray-300);
}
.op_rule-fill {
  position: absolute;
  inset: 0;
  background: var(--will-green);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ===== club：硬派の黒基調（ダークモード）。body.p_club（header.php が is_page('club') 時に付与）配下のみ。
   地=黒(--ink)／文字=白抜き(--paper)／罫線=白系／緑(--will-green)は一点アクセントのまま（黒地で映える）。
   反転は本文領域 .l_main にスコープ＝共通ヘッダー/フッターは不変。
   各セクションの面/パネル/番号などの詳細あしらいは後続ステップで適用。 ===== */
.p_club {
  /* club は全域が黒地。緑が沈むため、club スコープ内の --will-green を bright の受け皿に切替。
     今は bright=基本色(#14733f)で見た目不変。後で --will-green-bright を明るい緑にすれば club の緑が一括で浮く。
     対象＝eyebrow緑文字／＋マーク／MISSION「強くなる」「準優勝」／THE WILL「BREAK THROUGH」／VISION・VALUE番号 など。 */
  --will-green: var(--will-green-bright);
  --fs-section-rule: var(--paper); /* eyebrow 上下罫を白系へ（黒地用・緑文字は据え置き） */
  --club-logo-outline-w: 1.5px; /* ONE WILL ロゴの白フチ太さ（当たり・実機で調整可。ここ1か所で管理） */
  /* ロゴ白フチ一式（4方向）。grayscale と同一 filter に合成して使う */
  --club-logo-outline:
    drop-shadow(0 var(--club-logo-outline-w) 0 var(--paper-pure))
    drop-shadow(0 calc(-1 * var(--club-logo-outline-w)) 0 var(--paper-pure))
    drop-shadow(var(--club-logo-outline-w) 0 0 var(--paper-pure))
    drop-shadow(calc(-1 * var(--club-logo-outline-w)) 0 0 var(--paper-pure));
}
.p_club .l_main {
  background: transparent; /* 黒地は背面 #fs-particles(body.p_club時ink) が担当＝canvasの緑四角形を透かす */
  color: var(--paper);
}
/* club は硬派の黒基調。セクションは透明にして、背面 #fs-particles（地色＋緑四角形）を見せる。
   地色は #fs-particles 側で切替（body.p_club #fs-particles を ink に）。 */
.p_club .top_section,
.p_club .club_section {
  background: transparent;
}
/* 英語ヒーロー見出しは白抜き */
.p_club .m_section_title_main {
  color: var(--paper);
}
/* 黒地で沈む既存の濃色見出し・コピーを白抜きへ（文言は不変） */
.p_club .top_school_copy,
.p_club .club_mission_title {
  color: var(--paper);
}

/* ===== club 8-2 見せ場（KV直後パンチライン）：回転リングは黒地に薄い白、
   キャッチ「育成で勝つ。結果で語る。」は「大」（特大は MISSION の一文に温存＝乱発しない）。 ===== */
.p_club .m_ring text {
  fill: var(--paper); /* 黒地で見えるよう白系（svg opacity 0.14 で薄く） */
}
.p_club .top_club .top_school_copy {
  font-size: clamp(24px, 4.5vw, 44px);
  line-height: 1.4;
  text-align: left;
}
/* リングがセクション境界で見切れないよう、top_club の縦クリップを解除（横だけ clip で右のはみ出しは抑止）。
   リングは positioned(z:0) のため下のセクションの黒地より上に描画され、跨いでも連続して見える。 */
.p_club .top_club {
  overflow-x: clip;
  overflow-y: visible;
}
/* 各 club セクションの本文はリング(z:0)より前面へ＝跨いできたリングに文字が隠れない */
.p_club .club_section .l_contents {
  position: relative;
  z-index: 1;
}

/* ===== club 8-3 MISSION：ステートメント特大（club唯一の見せ場）／ジグザグ整形／実績の罫線リスト ===== */
/* 「道はつくる。全員で強くなる。」＝特大（英語ヒーロー最大40pxより明確に大きく）。強くなる=緑 */
.p_club .club_mission_copy {
  font-size: clamp(30px, 6.5vw, 60px);
  line-height: 1.3;
  font-weight: 900;
  margin-top: clamp(28px, 5vw, 48px);
}
.p_club .club_mission_copy_accent {
  color: var(--will-green);
}
/* ジグザグの写真：旧パステルかぶせ overlay と角丸を除去（角丸ゼロ・モノクロ基調） */
.p_club .club_mission_img-wrapper {
  border-radius: 0;
}
.p_club .club_mission_img-wrapper::before {
  display: none;
}
.p_club .club_mission_img-wrapper img {
  border-radius: 0;
  display: block;
}
/* 実績タイトルの装飾バー：角丸ゼロ＋緑の細罫へ */
.p_club .club_mission_title::after {
  border-radius: 0;
  height: 3px;
  background: var(--will-green);
}
/* 実績：罫線リスト（白〜グレー罫）。順位は英字大、準優勝のみ緑で強調 */
.p_club .club_mission_record {
  list-style: none;
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0;
}
.p_club .club_mission_record_item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 4px;
  border-top: 1px solid var(--gray-500);
  font-size: 14px;
  text-align: left;
}
.p_club .club_mission_record_item:last-child {
  border-bottom: 1px solid var(--gray-500);
}
.p_club .club_mission_record_rank {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--gray-300);
}
.p_club .club_mission_record_item--top .club_mission_record_name {
  font-weight: 700;
  color: var(--paper);
}
.p_club .club_mission_record_item--top .club_mission_record_rank {
  font-size: clamp(20px, 4vw, 28px);
  color: var(--will-green);
}

/* ===== club 8-4 THE WILL／募集 ===== */
/* ONE WILL ロゴ：黒地でロゴの黒い放射ライン/外円が溶けるため、透過素材の形状に沿った白フチを
   drop-shadow で常時付与（box-shadow は四角枠にしか効かないため不可）。grayscale と同一 filter で共存。
   ベース（モバイル/タッチ＝ホバー不可）は最初から原色＋白フチ。 */
.p_club .club_team_logo-img {
  filter: grayscale(0) var(--club-logo-outline);
  transition: filter var(--dur) var(--ease);
}
/* ホバー可能デバイス（PC等）のみ：通常はモノクロ→ホバーで原色（白フチは常時維持）。
   トップの3つのWILLと統一の所作。タッチ端末はホバーが無いため上のベース＝常時原色。 */
@media (hover: hover) {
  .p_club .club_team_logo-img {
    filter: grayscale(1) var(--club-logo-outline);
  }
  .p_club .club_team_logo-img:hover {
    filter: grayscale(0) var(--club-logo-outline);
  }
}
/* テーマの BREAK THROUGH を緑・大きく（英字） */
.p_club .club_team_text_accent {
  color: var(--will-green);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 1.15em;
  letter-spacing: 0.04em;
}
/* 募集：浮いた黒パネル（角丸ゼロ・罫線）2カラム。旧パステル box-010 / 水色下線 / LINE を置換 */
.p_club .club_cta {
  padding: clamp(40px, 8vw, 80px) 0;
}
.p_club .club_recruit_title {
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: var(--paper);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.p_club .club_recruit_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 780px) {
  .p_club .club_recruit_grid {
    grid-template-columns: 1fr 1fr;
  }
}
.p_club .club_recruit_panel {
  background: var(--ink-raised); /* 浮いた黒（黒地から少し持ち上げた面） */
  border: 1px solid var(--gray-700);
  padding: clamp(24px, 4vw, 32px);
  max-width: 480px;
  margin: 0 auto;
}
.p_club .club_recruit_panel-title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--paper);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gray-700);
}
.p_club .club_recruit_panel-row {
  font-size: 14px;
  line-height: 1.7;
}
.p_club .club_recruit_panel-row + .club_recruit_panel-row {
  margin-top: 14px;
}
.p_club .club_recruit_term {
  display: block;
  font-weight: 700;
  color: var(--paper);
}
.p_club .club_recruit_cta {
  text-align: center;
  margin-top: clamp(28px, 5vw, 44px);
}

/* ===== club 8-5 VISION：番号付き罫線リスト（01-03・番号緑・角丸0）。旧FAバスケ装飾は廃止 ===== */
.p_club .club_vision_leads {
  list-style: none;
  counter-reset: vision;
  max-width: 760px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 0;
}
.p_club .club_vision_lead {
  counter-increment: vision;
  position: relative;
  margin-top: 0; /* base の :not(:first-child) margin を打ち消し（罫線で区切る） */
  padding: clamp(20px, 3vw, 28px) 0 clamp(20px, 3vw, 28px) clamp(60px, 11vw, 110px);
  border-top: 1px solid var(--gray-500);
  font-size: clamp(15px, 2vw, 18px);
}
.p_club .club_vision_lead:last-child {
  border-bottom: 1px solid var(--gray-500);
}
.p_club .club_vision_lead::before {
  content: counter(vision, decimal-leading-zero);
  position: absolute;
  left: 5%;
  top: clamp(20px, 3vw, 28px);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1;
  color: var(--will-green);
}

/* ===== club 8-6 VALUE：浮いた黒パネル（角丸0・罫線）＋番号01-04（緑・大）。旧パステル枠/緑ラベル/チェック廃止 ===== */
.p_club .club_value_list {
  counter-reset: value;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 56px);
}
@media (min-width: 768px) {
  /* PC幅でも 2×2（田の字）を維持。行を均一高さにして4枚を最大カードに揃える */
  .p_club .club_value_list {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }
}
.p_club .club_value_item {
  margin-top: 0;
  display: flex; /* 中のカードをセル高さいっぱいに伸ばす＝4枚同サイズ */
}
.p_club .club_value_box {
  counter-increment: value;
  width: 100%; /* li(flex)いっぱいに広げる＝セルと同サイズ */
  max-width: none;
  margin: 0;
  border: 1px solid var(--gray-700);
  border-radius: 0;
  background: var(--ink-raised); /* 浮いた黒パネル */
  box-shadow: none;
  color: var(--paper);
  padding: clamp(26px, 3.5vw, 36px) clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 28px);
}
.p_club .club_value_box::before {
  content: counter(value, decimal-leading-zero);
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  color: var(--will-green);
  margin-bottom: 16px;
}
.p_club .club_value_box-title {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  color: var(--paper);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
}
.p_club .club_value_box-title::before {
  display: none; /* 緑チェック廃止 */
}
.p_club .club_value_box-text {
  color: var(--paper);
  padding: 0;
}

/* ===== club 8-7 末尾CTA：school と同じ仕様（黒地＋モノクロ写真マーキーが横スライド＋暗レイヤー＋白ボタン）。
   共通 cta-exp(footer) の既定挙動をそのまま使うため club 専用の上書きは置かない。 ===== */

/* ===== club 8-8 共通あしらい：緑い＋／eyebrow罫線ドローオンは共通システムで適用済み。
   透かし文字は要所1か所＝MISSION背面のみ（黒地用に白・極薄）。リング(top_club)とは別セクション＝重ねない。 ===== */
.p_club .club_mission {
  position: relative;
  overflow: hidden;
}
.p_club .club_mission .l_contents {
  position: relative;
  z-index: 1;
}
.p_club .m_watermark {
  color: var(--paper); /* 黒地では白の透かし（ink だと沈むため） */
  opacity: 0.05;
}

/* ===== club 8-9 2026-10 構成変更（Philosophy／About／Environment／Results を新設・Value 廃止）。
   見出しは共通 .m_section_title、罫線・番号・緑一点は Vision／実績と同じ言語で揃える。 ===== */
/* PC（768px〜）だけの改行。スマホでは自然に折り返させる（u_md_dn の逆） */
.p_club .club_br-pc {
  display: none;
}
@media (min-width: 768px) {
  .p_club .club_br-pc {
    display: inline;
  }
}
/* Philosophy：一文だけのステートメント（特大は Mission に温存＝ここは「中」） */
.p_club .club_philosophy_text {
  max-width: 760px;
  margin: clamp(28px, 5vw, 48px) auto 0;
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
/* About：本文は読み幅を絞る。「居場所」ではなく「成長の場」の一文だけ大きく */
.p_club .club_about_body {
  max-width: 760px;
  margin: clamp(28px, 5vw, 48px) auto 0;
}
.p_club .club_about_text {
  font-size: 14px;
  line-height: 1.9;
}
.p_club .club_about_text + .club_about_text {
  margin-top: 1.4em;
}
.p_club .club_about_catch {
  margin: clamp(28px, 4vw, 40px) 0;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 768px) {
  .p_club .club_about_text {
    letter-spacing: 0.1em;
    text-align: center;
  }
}
/* Mission：特大コピーの後ろにサブコピーが来る並びに変わったため、間を空ける */
.p_club .club_mission_copy + .club_mission_sub-copy {
  margin-top: clamp(20px, 3vw, 32px);
}
.p_club .club_mission_text + .club_mission_text {
  margin-top: 1em;
}
/* Environment：01・02＝写真上のカード2枚を横並び（PC）。03＝文章が長いので全幅の特集ブロック。
   番号は Vision（緑・太いゴシック）と被らないよう、見出しと同じ明朝の「No.01」＋緑の短い罫。 */
.p_club .club_env_pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 8vw, 64px);
  margin-top: clamp(32px, 5vw, 56px);
}
@media (min-width: 768px) {
  .p_club .club_env_pair {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.p_club .club_env_img-wrapper {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.p_club .club_env_img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p_club .club_env_no {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.p_club .club_env_no::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--will-green);
}
.p_club .club_env_title {
  margin-top: 12px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--paper);
}
.p_club .club_env_text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  text-wrap: pretty; /* 行末に1〜2文字だけ残る折り返しを避ける（未対応ブラウザは通常の折り返し） */
  word-break: auto-phrase; /* 和文を文節で折り返す（Chrome 119〜。未対応ブラウザは通常の折り返し） */
}
@media (min-width: 768px) {
  .p_club .club_env_text {
    letter-spacing: 0.06em;
  }
}
/* 03 特集：上に罫線で区切り、リード（中）→横長写真→3段落→結び */
.p_club .club_env_feature {
  margin-top: clamp(56px, 9vw, 96px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--gray-500);
}
.p_club .club_env_feature .club_env_no {
  margin-top: 0;
}
.p_club .club_env_lead {
  margin-top: clamp(20px, 3vw, 28px);
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--paper);
}
.p_club .club_env_img-wrapper--wide {
  margin-top: clamp(24px, 4vw, 40px);
}
@media (min-width: 768px) {
  .p_club .club_env_img-wrapper--wide {
    aspect-ratio: 16 / 7;
  }
}
/* 3段落：各段落の書き出し（県外遠征では／海外遠征では／コートの外では）を太字の見出し代わりに */
.p_club .club_env_cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 40px);
}
.p_club .club_env_cols .club_env_text {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--gray-700);
}
@media (min-width: 1024px) {
  .p_club .club_env_cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.p_club .club_env_key {
  font-weight: 700;
  color: var(--paper);
}
.p_club .club_env_closing {
  margin-top: clamp(32px, 5vw, 48px);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--paper);
}
/* 03 のリード・結びも文節で折り返す（Chrome 119〜。未対応ブラウザは通常の折り返し） */
.p_club .club_env_lead,
.p_club .club_env_closing {
  word-break: auto-phrase;
}
/* Philosophy：語のまとまり単位でしか折り返さない（中間幅で「育／て」のように割れるのを防ぐ） */
.p_club .club_phrase {
  display: inline-block;
}
/* Results：女子／男子の2つの罫線リスト（見出しは実績タイトルの緑バーを流用） */
.p_club .club_results .club_mission_title {
  margin-top: clamp(40px, 6vw, 56px);
}
/* Recruit：見出しを共通 .m_section_title にしたので、パネルとの間を他セクションと揃える */
.p_club .club_cta .m_section_title + .club_recruit_grid {
  margin-top: clamp(32px, 5vw, 56px);
}
.p_club .club_recruit_note {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 20px;
}
/* LINEボタンは白地前提の黒罫。club は黒地なので白罫・白文字に（ホバーの LINE 緑は共通のまま） */
.p_club .m_btn-line {
  border-color: var(--paper);
  color: var(--paper);
}

/* ===== 2. ヘッダー ===== */
.l_header {
  height: 76px;
  padding: 0 20px;
}
@media screen and (min-width: 1080px) {
  .l_header {
    padding: 0 40px;
  }
}

/* (A) フロント固定ヘッダー：KV上は背景透過、スクロールで paper＋下細罫へ200msで切替。
   .l_header--overlay は front のヘッダーにのみ付与（下層ページ header.php の .l_header は従来どおり=不変）。
   切替は JS の独立スクロール監視で .is-scrolled をトグル＝既存 ScrollTrigger / pin には非干渉。 */
:root {
  --fs-header-rule: var(--gray-300); /* ヘッダー下の細罫線色／要調整 */
}
.l_header--overlay {
  position: fixed; /* 固定ヘッダー化（base の absolute を上書き） */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.l_header--overlay.is-scrolled {
  background: var(--paper);
  border-bottom-color: var(--fs-header-rule);
}
/* 共通ヘッダーを全ページへ展開：下層ページ(header.php 系)は固定オーバーレイを
   最初から地色＋下細罫で表示＝暗い写真KV上でもロゴ/ナビ(ink)が読める（白ロゴ素材なしのため透過は不可）。
   front(header-front)の透過→スクロールsolidは従来どおり不変。
   - p_kv-header（club/school）：全面写真KVは先頭のまま、ヘッダーは上部に重ねる（本文オフセットなし）
   - p_solid-header（contact/about/staff 等）：本文をヘッダー高(76px)ぶん下げて被りを回避 */
.p_kv-header .l_header--overlay,
.p_solid-header .l_header--overlay {
  background: var(--paper);
  border-bottom-color: var(--fs-header-rule);
}
.p_solid-header {
  padding-top: 76px;
}

/* ロゴは PNG をそのまま使用（モノクロ差し替えは後続）。高さだけ整える */
.l_header-logo {
  width: 96px;
}

/* 全画面ナビ：ウォーム白＋静かな本文 */
.l_header-nav {
  background: var(--paper);
}
.l_header-nav_link {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 15px;
}
/* 英字ラベルは途中で改行しない（「U15 CLUB」が PC ヘッダーで2行に割れるのを防ぐ） */
.l_header-nav_en {
  white-space: nowrap;
}


/* ===== ハンバーガー：開くと四角ボタンが45°回転して「緑の菱形」＋白X（内側は逆回転でXを水平保持） ===== */
.m_hamburger-circle {
  background: var(--ink); /* 閉＝ink四角 */
  border-radius: 0;
  transition:
    transform 0.45s cubic-bezier(0.7, 0, 0.2, 1),
    background 0.45s cubic-bezier(0.7, 0, 0.2, 1),
    border-radius 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.btn-trigger span {
  background: #fff; /* バー＝白（開いても白X） */
}
/* 開：45°回転しながら角丸0→100%＝スピンして緑の円に＋ink→緑 */
.js_body.is-active .m_hamburger-circle {
  transform: rotate(45deg);
  background: var(--will-green);
  border-radius: 100%;
}
/* 内側（バー群）は逆回転して、Xを画面の水平基準に保つ */
.btn-trigger {
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
#btn07.active {
  transform: rotate(-45deg);
}

/* 体験申込 CTA（ヘッダー常駐・PC のみ表示／モバイルは KV と末尾CTAで担保） */
.l_header-cta {
  display: none;
}
@media screen and (min-width: 1080px) {
  /* PC ではヘッダーの SNS を畳み、右上は CTA＋ハンバーガーに整理（SNS はフッター存置） */
  header.l_header .btn-social-giza {
    display: none;
  }
  .l_header-cta {
    position: fixed;
    top: 18px;
    right: 96px; /* 右上ハンバーガー(60px+余白)を避ける */
    z-index: var(--z-index-menu);
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ja);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--will-green);
    border: 1.5px solid var(--will-green);
    padding: 12px 20px;
    border-radius: 0;
    transition:
      background var(--dur) var(--ease),
      border-color var(--dur) var(--ease);
  }
  .l_header-cta:hover {
    background: var(--will-green-dark);
    border-color: var(--will-green-dark);
    opacity: 1;
  }
}

/* (B) front：ヘッダー常駐CTAのバトンタッチ。
   KV内の緑CTA(.top_kv_cta)が画面から出たら JS(IntersectionObserver)が .is-cta-visible を付与→フェードイン、以降常駐。SP・PC共通。
   下層ページ(header.php)の .l_header-cta は上の従来ルールのまま（この節は l_header--overlay 配下のみ）。 */
.l_header--overlay .l_header-cta {
  /* (1)(2) ヘッダーバー内の flex 要素に（固定配置をやめ重なり・はみ出しを解消）。右グループの先頭＝CTA→ハンバーガーの順 */
  position: static;
  order: 1;
  margin-left: auto; /* ロゴの右へ寄せる（右寄せグループの起点） */
  z-index: var(--z-index-menu);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--paper-pure);
  background: var(--will-green);
  border: 1.5px solid var(--will-green);
  padding: 10px 16px;
  border-radius: 0;
  /* 初期は非表示。固定コピーがはけたら（IOで付与される .is-cta-visible で）フェードイン */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.l_header--overlay.is-cta-visible .l_header-cta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* contact/privacy 以外の下層ページ：ヘッダーCTAを常時表示（TOPと同配置＝PC右端/SPハンバーガー左）。
   front は is-cta-visible(スクロール)で従来どおり。header.php が body.p_header-cta を付与。 */
.p_header-cta .l_header--overlay .l_header-cta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.l_header--overlay .l_header-cta:hover {
  background: var(--will-green-dark);
  border-color: var(--will-green-dark);
  opacity: 1;
}
@media (min-width: 768px) {
  .l_header--overlay .l_header-cta {
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* ===== (C) ヘッダーナビ：SPドロワー / PCインライン。ロゴ=Wマーク。色はモノクロ＋CTAのみ緑。
   いずれも front の .l_header--overlay 配下のみ＝下層ページ header.php のナビは従来どおり不変。 ===== */
:root {
  --fs-nav-rule: var(--gray-300); /* ナビ項目の区切り罫線色／要調整 */
  --fs-nav-pc-min: 1080px; /* PCインラインに切り替える幅（未満はドロワー）／要調整 */
}

/* ロゴ：元の画像ロゴ(WILL-logo.PNG)を使用（下層ページと共通）。CSS製の白Wは撤去。サイズは base/§2の .l_header-logo に従う */

/* ハンバーガー：固定ヘッダーのドロワー開閉に常時必要＝常時表示（旧GSAPフェードインは廃止）。PC(≥1080)は非表示。 */
.m_hamburger-circle {
  opacity: 1;
  transform: none;
}
/* (1)(2) front：固定配置をやめヘッダーバー内の flex 要素に。CTAの右・縦中央・ヘッダー高(76px)に収まるサイズ */
.l_header--overlay .m_hamburger-circle {
  position: static;
  order: 2;
  margin-left: 14px; /* CTAとの間隔 */
  width: 44px;
  height: 44px;
}
.l_header--overlay .btn-social-giza {
  display: none; /* front は回転丸SNSを使わずドロワー内の専用SNSに集約 */
}

/* --- SP ドロワー（base）：既存の全画面オーバーレイ(.js_navigation の opacity トグル)を流用しドロワー化 --- */
/* ドロワー（768px未満のみ。PCは下の min-width:768px でインラインナビに戻る）。
   方針：中身の幅は 400px 上限で中央寄せ。地(paper)は全面のまま＝背後のページは見せない。
   高さは画面ぴったりに収め、スクロールは起こさない（overflow:hidden ＋ 項目を可変にして詰める）。 */
.l_header--overlay .l_header-nav {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center; /* 中身(最大400px)を中央に置く */
  /* bottom:0 ではなく dvh 指定。iOS でアドレスバーが出ている間、
     fixed の bottom:0 は実際の可視領域より下になり、CTAがバーに隠れてしまうため。 */
  bottom: auto;
  height: 100vh; /* dvh 非対応ブラウザ向けフォールバック */
  height: 100dvh;
  padding: clamp(72px, 10vh, 92px) 28px clamp(16px, 3vh, 40px); /* 上=固定ヘッダーぶんの余白 */
  overflow: hidden; /* スクロールさせない（収まらないぶんは下の flex で詰める） */
}
/* 中身の横幅：リストもフッター(SNS＋CTA)も 400px を上限に揃える */
.l_header--overlay .l_header-nav_list,
.l_header--overlay .l_header-nav_foot {
  width: 100%;
  max-width: 400px;
}
/* 高さをぴったりにする仕組み：
   リストが余った縦スペースを受け持ち、6項目が等分してその中に必ず収まる。
   画面が低いほど項目が自動で薄くなるので、どの端末高さでもスクロールが出ない。 */
.l_header--overlay .l_header-nav_list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.l_header--overlay .l_header-nav_item {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}
/* フッター(SNS＋CTA)は縮めない＝CTAの押しやすさを優先し、しわ寄せはリスト側で吸収する */
.l_header--overlay .l_header-nav_foot {
  flex: 0 0 auto;
}
.l_header--overlay .l_header-nav_list {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
}
.l_header--overlay .l_header-nav_item {
  height: auto;
  text-align: left;
  border-top: 1px solid var(--fs-nav-rule);
}
.l_header--overlay .l_header-nav_item:last-child {
  border-bottom: 1px solid var(--fs-nav-rule);
}
.l_header--overlay .l_header-nav_item:not(:first-child) {
  margin-top: 0;
}
.l_header--overlay .l_header-nav_link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  /* 項目(flex:1)の高さいっぱいに広げ、上下パディングは画面が低いほど詰まる */
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(6px, 1.4vh, 17px) 4px;
}
.l_header--overlay .l_header-nav_en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.l_header--overlay .l_header-nav_ja {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  transition: color var(--dur) var(--ease);
}
/* ホバー/フォーカス時：英字・日本語とも WILL GREEN に（200ms） */
.l_header--overlay .l_header-nav_link:hover .l_header-nav_en,
.l_header--overlay .l_header-nav_link:focus-visible .l_header-nav_en,
.l_header--overlay .l_header-nav_link:hover .l_header-nav_ja,
.l_header--overlay .l_header-nav_link:focus-visible .l_header-nav_ja {
  color: var(--will-green);
}
/* ドロワー下部：SNS(モノクロ)＋緑CTA */
.l_header--overlay .l_header-nav_foot {
  margin-top: auto;
  padding-top: 32px;
}
.l_header--overlay .l_header-nav_sns {
  display: flex;
  gap: 24px;
  margin: 0 0 22px;
  padding: 0;
}
.l_header--overlay .l_header-nav_sns-link {
  display: inline-flex;
  font-size: 22px;
  color: var(--ink); /* モノクロ。緑は使わない */
  transition: opacity var(--dur) var(--ease);
}
.l_header--overlay .l_header-nav_sns-link:hover {
  opacity: 0.55;
}
.l_header--overlay .l_header-nav_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--paper-pure);
  background: var(--will-green);
  border: 1.5px solid var(--will-green);
  border-radius: 0;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.l_header--overlay .l_header-nav_cta:hover {
  background: var(--will-green-dark);
  border-color: var(--will-green-dark);
  opacity: 1;
}
/* 画面が極端に低いとき（横向きスマホなど）。
   6項目＋SNS＋CTA を縦に詰めきれず、項目が潰れて英字と和文が重なってしまうため、
   補助情報である和文ラベルを落とし、余白も詰めて「スクロールなし」を維持する。 */
@media (max-height: 560px) {
  .l_header--overlay .l_header-nav {
    padding-top: 60px;
    padding-bottom: 12px;
  }
  .l_header--overlay .l_header-nav_ja {
    display: none;
  }
  /* 英字も1段小さく。body の line-height 1.7 のままだと1行で35px使い、
     6項目が割り当てられる高さを超えて文字が枠からあふれるため詰める。 */
  .l_header--overlay .l_header-nav_en {
    font-size: 17px;
    line-height: 1.25;
  }
  .l_header--overlay .l_header-nav_link {
    padding-block: 4px;
  }
  .l_header--overlay .l_header-nav_foot {
    padding-top: 14px;
  }
  .l_header--overlay .l_header-nav_sns {
    margin-bottom: 12px;
  }
  .l_header--overlay .l_header-nav_sns-link {
    font-size: 19px;
  }
  .l_header--overlay .l_header-nav_cta {
    padding: 11px;
  }
}

/* --- PC(≥1080)：インラインナビ（ドロワー解除） --- */
@media screen and (min-width: 1080px) {
  .l_header--overlay .m_hamburger-circle {
    display: none; /* PCはハンバーガー不要 */
  }
  .l_header--overlay .l_header-nav {
    position: static;
    inset: auto;
    /* ドロワー側で height:100dvh を指定しているため、ここで必ず打ち消す。
       inset:auto では height は戻らず、PCのインラインナビが画面高になってしまう。 */
    height: auto;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    flex-direction: row;
    align-items: center;
    padding: 0;
    overflow: visible;
    margin-left: auto; /* ロゴの右、CTAの手前まで右寄せ */
  }
  .l_header--overlay .l_header-nav_list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
    width: auto;
    /* ドロワー側で掛けている max-width:400px を必ず打ち消す。
       残すと横並びナビが400pxの箱に押し込まれ、項目がはみ出して
       右のCTAボタンに重なる。 */
    max-width: none;
  }
  .l_header--overlay .l_header-nav_item {
    border: 0;
  }
  .l_header--overlay .l_header-nav_item:last-child {
    border: 0;
  }
  .l_header--overlay .l_header-nav_link {
    position: relative; /* 日本語(絶対配置)の基準。フロー上の中身は英字だけ＝英字がヘッダー縦中央に揃う */
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
  }
  .l_header--overlay .l_header-nav_en {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  /* (4) PC：日本語は初期非表示、ホバー/フォーカスでフェードイン。
     日本語は絶対配置で英字の「上」へ（フロー外）＝英字の縦位置を動かさない（ガタつかない）。
     少し下から上へスライドしながらフェードイン。 */
  .l_header--overlay .l_header-nav_ja {
    position: absolute;
    bottom: 100%; /* 英字の上へ */
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap; /* 1行に収め英字直上・ヘッダー内に納める（折返し防止） */
    font-size: 10px;
    letter-spacing: 0.04em;
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      color var(--dur) var(--ease);
  }
  .l_header--overlay .l_header-nav_link:hover .l_header-nav_ja,
  .l_header--overlay .l_header-nav_link:focus-visible .l_header-nav_ja {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* SNS＋CTA のドロワー下部はPCインラインでは不要 */
  .l_header--overlay .l_header-nav_foot {
    display: none;
  }
  /* (B)のヘッダーCTA：PCではヘッダーバー内のフレックス要素として右端へ（バトンタッチのopacity制御は維持） */
  .l_header--overlay .l_header-cta {
    position: static;
    top: auto;
    right: auto;
    margin-left: clamp(16px, 2vw, 32px);
  }
}

/* ===== 3. KV ヒーロー（温度B：白地・上コピー／下に右寄り写真・あえて100vh超え） =====
   参考：STMN 型。白地に大きなコピーを上、下に大きな写真（スライドショー）を少し右寄りで置き、
   写真の下端を 100vh より下に出してスクロールを誘う。 */
.top_kv {
  height: 100vh; /* ピンされるステージ。スライダーは絶対配置でこの上に重ね、scrubで全画面へ拡大 */
  background: transparent; /* 透明＝固定中に背後の理念が透けて合流できる。地の白は body */
  display: block;
  position: relative;
  overflow: hidden; /* 開始時にフォールド外へ出る分をクリップ（過剰なはみ出し・次セクション重なり防止） */
}
/* 上：コピー領域（白地に大きく） */
.top_kv-inner {
  position: relative;
  height: auto;
  max-width: none;
  width: auto;
  margin: 0;
  display: block;
  padding: 104px 24px 24px; /* base=SP（PCは min-width:768px で拡張） */
  z-index: 2; /* スライダー(z1)より前面＝コピーを上に */
}
.top_kv_box {
  position: static;
  width: auto;
  max-width: none;
  transform: none;
  text-align: left;
  background: none;
  background-image: none; /* 旧 KV-copy.webp を解除 */
  padding: 0;
  z-index: 2;
}
.top_kv_copy {
  font-family: var(--font-en);
  font-weight: 900;
  color: var(--fs-dark); /* 重なり時に JS で var(--fs-light) へ切替 */
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-shadow: none;
  font-size: clamp(40px, 15vw, 110px); /* base=SP（15vwまで拡大）。PCは min-width:768px で別途指定 */
}
.top_kv_sub-copy {
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--gray-700);
  font-size: clamp(15px, 1.8vw, 21px);
  letter-spacing: 0.12em;
  /* SP：THE WILL と本コピーの間に背高の心電図(右側の山2倍ぶん高い)を置く余白を確保（PCは下で18pxに戻す） */
  margin-top: 88px;
}
@media (min-width: 768px) {
  .top_kv_sub-copy {
    margin-top: 18px;
  }
}
/* KV の緑CTA（header-front.php に追加した anchor） */
.top_kv_cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--will-green);
  border: 1.5px solid var(--will-green);
  padding: 15px 28px;
  border-radius: 0;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.top_kv_cta::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.top_kv_cta:hover {
  background: var(--will-green-dark);
  border-color: var(--will-green-dark);
  opacity: 1;
}

/* 右側：スクロール指標（SP=非表示／PCは min-width ブロックで表示） */
.top_kv_scroll {
  display: none; /* base=SP */
}
.top_kv_scroll-img-wrapper::before,
.top_kv_scroll-img-wrapper::after {
  background: var(--gray-500);
}

/* KV 直後の淡い青の帯（旧 .top_copy-box）を除去 */
.top_copy-box {
  background: var(--paper);
  height: 0;
}

/* ===== KV スライダー（fs-）— Step 1: 自動クロスフェード単体 =====
   ※スクロール演出（拡大・ピン）は Step 3 以降。ここは自動フェード切替のみ。 */
:root {
  --fs-kv-slide-interval: 4000; /* ms・unitless（JSで取得）／要調整 */
  --fs-kv-fade-dur: 1.2s; /* クロスフェード時間／要調整 */
  --fs-kv-slider-w-start: 80vw; /* 開始幅(SP)。PCは min-width:768px で 70%／要調整 */
  --fs-kv-slider-w-end: 100%; /* 終了幅（scrubで拡大）／要調整 */
  --fs-kv-slider-h-start: 70vh; /* 開始高さ／要調整 */
  --fs-kv-slider-h-end: 100vh; /* 終了高さ（scrubで拡大）／要調整 */
  --fs-kv-slider-top-start: 56vh; /* 開始の上位置＝コピーの下。scrubで 0 へ／要調整 */
  --fs-dark: var(--ink); /* コピー初期色（白地の上） */
  --fs-light: var(--paper-pure); /* 重なり時のコピー色（写真の上＝白） */
  --fs-kv-overlay-opacity: 0.45; /* スライダー上の黒オーバーレイ濃度／要調整 */
}
.fs-kv__slider {
  position: absolute;
  top: var(--fs-kv-slider-top-start);
  right: 0;
  width: var(--fs-kv-slider-w-start); /* 開始幅（SP80vw / PC70%）。右寄せは right:0 */
  height: var(--fs-kv-slider-h-start);
  z-index: 1;
  overflow: hidden;
}
.fs-kv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fs-kv-fade-dur) var(--ease);
}
.fs-kv__slide.is-active {
  opacity: 1;
}
.fs-kv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fs-kv-sp-x, 50%) 50%; /* SPは縦長で左右が大きく切れるので、写真ごとに横位置を img の style で指定 */
  display: block;
}
@media (min-width: 768px) {
  .fs-kv__img {
    object-position: 50% 50%; /* PCは横長なので中央固定 */
  }
}
/* スライダー上の黒オーバーレイ（重なり時に JS でフェードイン＝コピー白を読みやすく） */
.fs-kv__overlay {
  position: absolute;
  inset: 0;
  background: var(--fs-dark);
  opacity: 0; /* scrub で --fs-kv-overlay-opacity まで */
  pointer-events: none;
  z-index: 2; /* スライド画像より前面・コピー(z-index:2 の .top_kv-inner)より背面 */
}

/* ===== KV PC 拡張（min-width:768px）— 開始レイアウト ===== */
@media (min-width: 768px) {
  /* コピー領域：白地に大きく（左上） */
  .top_kv-inner {
    padding: clamp(120px, 20vh, 240px) clamp(20px, 5vw, 72px) clamp(28px, 4vh, 56px);
  }
  .top_kv_copy {
    font-size: clamp(56px, 9vw, 150px);
  }
  /* スクロール指標：コピー領域の右上に縦置き */
  .top_kv_scroll {
    display: block;
    position: absolute;
    left: auto;
    bottom: auto;
    top: clamp(130px, 20vh, 240px);
    right: clamp(20px, 4vw, 56px);
    transform: none;
  }
  /* PC：開始幅を 70% に（right:0 で右寄せ／拡大は scrub で 100% へ） */
  :root {
    --fs-kv-slider-w-start: 70%;
  }
}

/* ===== KV→理念 合流：理念を右カラムへ（PC・左は固定コピーぶんを空ける） =====
   左の固定コピー(.top_kv 内・fixed)と理念本文を横並びに見せる。SP は通常配置(Step4)。 */
:root {
  --fs-merge-left-w: 48%; /* 左カラム(固定コピー)の幅＝コピーの max-width／要調整 */
  --fs-merge-gutter: 4%; /* 左コピー列と理念・右カラムの間のガター／要調整 */
  --fs-concept-pad-top: clamp(
    260px,
    35vh,
    360px
  ); /* PC：退場画像と見出しの被り回避。100vh退場に合わせ高さ追従(vh)。MacBookで≈300-330px／要調整 */
  --fs-concept-cover-z: 5; /* SP：理念を固定コピー(position:fixed=stacking context auto)より前面に重ねる層／要調整 */
  --fs-concept-sp-lead: clamp(
    28px,
    6vh,
    52px
  ); /* SP：理念登場の初動リードイン（KVとの“間”）。paper帯が先に覆う分。以前リーチを壊した80pxより小さく＝戻しすぎ防止／要調整 */
}

/* SP：理念を不透明(paper)にし固定コピーより前面へ＝上がってくる理念がコピーをきれいに覆う。
   JS のピン設定には触れず、描画順と背景の追加のみで被りを解消。PC は下記 min-width で合流に戻す。 */
.top_concept {
  position: relative;
  z-index: var(--fs-concept-cover-z);
  background: var(--paper);
}
.top_concept > .l_contents {
  padding-top: var(
    --fs-concept-sp-lead
  ); /* SP：登場初動の“間”。本文の前に空きpaper帯を先に覆わせる（cover開始・end・pinは不変） */
}
@media (min-width: 768px) {
  /* PC：合流（左固定コピー＋右カラム理念を同時に見せる）に戻す＝理念は覆わない */
  .top_concept {
    z-index: auto;
    background: transparent;
  }
  /* 左コピーを左カラム幅に制約＝「THE WILL」が右カラムへ侵入しない */
  .top_kv-inner {
    max-width: var(--fs-merge-left-w);
    padding-right: 0; /* 左寄せコピーなので右パディング不要。実効幅を確保し THE WILL を2行に保つ */
  }
  /* 理念の右カラムは「左コピー幅＋ガター」から開始＝水平に重ならない */
  .top_concept > .l_contents {
    padding-left: calc(var(--fs-merge-left-w) + var(--fs-merge-gutter)); /* 左コピー幅＋ガター */
    padding-top: var(--fs-concept-pad-top); /* 画像が抜けきってから見出しが現れるよう下げる */
    padding-right: 36px;
  }
}

/* ===== TOP：セクション間の間延びを締める（縦padding 120→80px）。
   合流演出(concept)の上部/左padding・pin/scrubは不変。末尾paddingのみ詰めて次セクションを引き上げる。 ===== */
.top_brothers > .l_contents,
.top_thought > .l_contents,
.top_info > .l_contents {
  padding-top: 56px;
  padding-bottom: 56px;
}
.top_concept > .l_contents {
  padding-bottom: 56px; /* SP：末尾余白を詰める（合流の padding-top は不変） */
}
@media (min-width: 768px) {
  .top_brothers > .l_contents,
  .top_thought > .l_contents,
  .top_info > .l_contents {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .top_concept > .l_contents {
    padding-bottom: 80px; /* PC：理念末尾→THE WILL を引き上げ */
  }
}

/* ===== 理念 top_concept：写真なし・コピーで語る（タイポで強弱／静かな強さ） =====
   山は2つ＝ステートメント「未来を豊かに」と強調引用。リード・補足は中〜小で静かに。
   装飾は緑の細罫＋余白のみ（写真・黒丸なし）。サイズ/太さは下記の type-scale 変数で管理。 */
:root {
  --fs-concept-statement: clamp(30px, 5vw, 48px); /* ステートメント＝山1／要調整 */
  --fs-concept-statement-w: 900;
  --fs-concept-lead: clamp(16px, 1.9vw, 21px); /* リード＝中／要調整 */
  --fs-concept-lead-w: 500;
  --fs-concept-quote: clamp(24px, 3.0vw, 40px); /* 強調引用＝山2／要調整 */
  --fs-concept-quote-w: 700;
  --fs-concept-quote-sub: clamp(15px, 1.7vw, 19px); /* 引用の補足 */
  --fs-concept-note: clamp(14px, 1.5vw, 17px); /* 補足＝小／要調整 */
}
/* 右カラムは左寄せのテキスト列（eyebrow・見出し・ボタンも左へ） */
.top_concept .m_section_title,
.top_concept .m_section_title_main {
  text-align: center;
}

/* ステートメント（山1）：「テーマは」小 → 「未来を豊かに」大・太 */
.top_concept_statement {
  margin-top: clamp(28px, 4vh, 56px);
}
.top_concept_statement-lead {
  display: block;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: var(--fs-concept-note);
  color: var(--gray-700);
  letter-spacing: 0.08em;
}
.top_concept_statement-em {
  display: block;
  font-family: var(--font-ja);
  font-weight: var(--fs-concept-statement-w);
  font-size: var(--fs-concept-statement);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-top: 0.2em;
}
/* リード（中・静か） */
.top_concept_lead {
  font-family: var(--font-ja);
  font-weight: var(--fs-concept-lead-w);
  font-size: var(--fs-concept-lead);
  color: var(--gray-700);
  line-height: 1.9;
  margin-top: clamp(20px, 3vh, 36px);
  max-width: 30em;
  text-align: right;
}
/* 強調引用（山2）：緑の細罫＋余白で浮かせる */
.top_concept_quote {
  margin: clamp(44px, 7vh, 96px) 0;
  padding-top: clamp(44px, 7vh, 96px);
  border-top: 2px solid var(--will-green);
}
.top_concept_quote-main {
  display: block;
  font-family: var(--font-ja);
  font-weight: var(--fs-concept-quote-w);
  font-size: var(--fs-concept-quote);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.top_concept_quote-sub {
  display: block;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: var(--fs-concept-quote-sub);
  color: var(--gray-700);
  line-height: 1.7;
  margin-top: clamp(12px, 1.6vh, 20px);
  text-align-last: right;
}
/* 補足（小・静か） */
.top_concept_note {
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: var(--fs-concept-note);
  color: var(--gray-700);
  line-height: 1.9;
  margin-top: clamp(24px, 4vh, 48px);
}

/* ===== 4. セクション見出し（英字ラベルを上下罫線で挟む／参照あしらいに統一） ===== */
:root {
  --fs-section-rule: var(--ink); /* セクション見出しの細罫線色 */
  --fs-section-rule-w: 1px; /* 細罫線の太さ／要調整 */
  --fs-section-label-size: clamp(11px, 1.4vw, 13px); /* 英字ラベルのサイズ／要調整 */
  --fs-section-title-size: clamp(28px, 6vw, 40px); /* 和文タイトルのサイズ（SP→PC・要調整） */
  --fs-section-title-weight: 900; /* 和文タイトルの太さ */
}
.m_section_title {
  text-align: center; /* 英字ラベル(inline-block)・和文を中央寄せ */
}
/* セクション起点の緑い＋マーク（CSSのみ・画像不要・1セクション1つ） */
.m_plus {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 8px; /* eyebrow との間隔（横・縦位置はvertical-align:middleで揃える） */
}
.m_plus::before,
.m_plus::after {
  content: "";
  position: absolute;
  background: var(--will-green);
}
.m_plus::before {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.m_plus::after {
  top: 50%;
  left: 0;
  height: 2px;
  width: 100%;
  transform: translateY(-50%);
}
/* 旧・左右に伸びる側罫線は撤去（上下罫線のあしらいに置換） */
.m_section_title::before,
.m_section_title::after {
  display: none;
}
/* 英字ラベル：上下を細罫線で挟む（罫線幅＝テキスト＋左右パディングぶん） */
.m_section_title_sub {
  display: inline-block;
  position: relative;
  font-family: var(--font-en);
  color: var(--will-green);
  font-weight: 800;
  font-size: var(--fs-section-label-size);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: none;
  padding: 0.5em 1.2em; /* 上下=罫線との間隔／左右=罫線をテキストより少し広く */
}
/* eyebrow上下罫を border→実体(::before/::after)化し、入場で左→右に伸びる draw-on */
.m_section_title_sub::before,
.m_section_title_sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--fs-section-rule-w);
  background: var(--fs-section-rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-out;
}
.m_section_title_sub::before {
  top: 0;
}
.m_section_title_sub::after {
  bottom: 0;
}
.m_section_title_sub.is-in::before,
.m_section_title_sub.is-in::after {
  transform: scaleX(1);
}
/* 共通：実体のある線（.m_rule）の入場ドローオン */
.m_rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-out;
}
.m_rule.is-in {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .m_rule,
  .m_section_title_sub::before,
  .m_section_title_sub::after,
  .school_teaching_point-title::before,
  .school_schedule_table::before,
  .school_schedule_table::after {
    transform: none;
    transition: none;
  }
}
.m_section_title_main,
.m_category_main {
  font-family: var(--font-ja);
  font-weight: var(--fs-section-title-weight);
  font-size: var(--fs-section-title-size);
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* スクール/クラブ見出しの色文字（旧パステル）→ 緑の一点 */
.top_school_title__color,
.top_school_title__color2,
.top_club_title__color,
.top_club_title__color2 {
  color: var(--will-green);
}
.top_school_title {
  font-family: var(--font-en);
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* ===== 5. ボタン（角丸0・濃度hover・緑は一点） ===== */
.m_btn-wrapper {
  width: auto;
  height: auto;
  max-width: 280px;
}
.m_btn-link {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  border: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 26px;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.m_btn-link:hover {
  background: var(--ink);
  color: #fff;
}
.m_btn-link::after {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  margin-left: 16px;
  transition: border-color var(--dur) var(--ease);
}
.m_btn:hover {
  background: var(--ink);
  color: #fff;
}

/* ===== 6. CTA ブロック（緑を主役に） ===== */
.m_cta {
  background:
    linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.55)),
    url(../img/top_club04.JPEG) center/cover;
}
@media screen and (min-width: 900px) {
  .m_cta {
    background: var(--ink);
  }
}
.m_cta_txt {
  font-family: var(--font-ja);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}
.m_cta-btn,
.m_btn__mail {
  border-radius: 0;
  background: var(--will-green);
  color: #fff;
  border: 1.5px solid var(--will-green);
  font-family: var(--font-ja);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.m_cta-btn:hover,
.m_btn__mail:hover {
  background: var(--will-green-dark);
  border-color: var(--will-green-dark);
}

/* ===== 7. 活動情報カード（角丸0・罫線） ===== */
.m_post_link {
  display: block;
  text-decoration: none;
}
/* ホバーの合図はサムネのズーム＋タイトル緑（下部で定義）。全体opacityフェードは廃止 */
.m_post_thumb,
.m_post_thumb-wrapper {
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.m_post_cat {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--will-green);
}
.m_post_date {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.06em;
}
.m_post_title {
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--ink);
}

/* ===== 8. SNS：ギザ装飾を外しモノクロのアイコンへ ===== */
.btn-social-giza .fa-stack-2x {
  display: none;
} /* 回る certificate の縁を消す */
.btn-social-giza .fa-stack-1x {
  color: var(--ink);
}
.btn-social-giza a {
  transition: opacity var(--dur) var(--ease);
}
.btn-social-giza a:hover .fa-stack-1x {
  color: var(--will-green);
}
.btn-social-giza a:hover {
  opacity: 1;
}

/* ===== 9. フッター ===== */
.l_footer {
  background: var(--surface);
}
.l_footer_logo-txt {
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.06em;
}
.l_footer_link {
  font-family: var(--font-ja);
  font-weight: 500;
  color: var(--ink);
}
.l_footer_link:hover {
  color: var(--will-green);
}
.l_footer-copyright {
  background: var(--ink);
}
.l_footer-copyright_txt {
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  color: #fff;
}

/* ===== 10. モーション配慮 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Phase 2 — トップ各セクションを温度Bへ（理念/思想/school/club/活動情報/流れる帯）
============================================================================= */

/* ----- 3つのWILL 入口カード（ACADEMY/CLUB/APPAREL）。SP縦並び=横罫線 / PC3カラム=縦罫線 ----- */
:root {
  --fs-brand-rule: var(--gray-300); /* カード間の罫線色／要調整 */
  --fs-brand-rule-w: 1px;
  --fs-brand-logo-h: clamp(72px, 12vw, 104px); /* ロゴ表示枠の高さ（全カード共通・object-fitで内接）／要調整 */
}
.top_brothers_list {
  margin-top: clamp(32px, 5vh, 48px);
  display: grid;
  grid-template-columns: 1fr; /* SP：縦1列 */
  gap: clamp(16px, 3.4vw, 20px); /* SP：囲んだカード同士の余白（PCは下で0に戻す） */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.top_brothers_item {
  border: var(--fs-brand-rule-w) solid var(--fs-brand-rule); /* SP：1枚ずつ枠線で囲ってカード化＝押せる入口を明示 */
}
@media (min-width: 768px) {
  .top_brothers_list {
    grid-template-columns: repeat(3, 1fr); /* PC：横3カラム */
    gap: 0; /* PCは囲みではなく通し罫で区切る */
    border-top: var(--fs-brand-rule-w) solid var(--fs-brand-rule); /* PC：上辺の通し罫 */
  }
  .top_brothers_item {
    border: 0; /* SPの囲み枠を解除 */
  }
  .top_brothers_item:not(:last-child) {
    border-right: var(--fs-brand-rule-w) solid var(--fs-brand-rule); /* PC：カード間=縦罫線 */
  }
}
.top_brothers_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 16px);
  padding: clamp(28px, 4vh, 40px) clamp(24px, 3vw, 36px);
  height: 100%;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
  position: relative;
}
a.top_brothers_card:hover,
a.top_brothers_card:focus-visible {
  background: var(--surface);
  opacity: 1;
}
/* ロゴ：モノクロ原版＋WILL GREEN版を重ね、ホバーで緑へクロスフェード（200ms） */
.top_brothers_logo {
  position: absolute;
  width: 120px;
  height: 120px;
  bottom: 0;
  right: 0;
}
.top_brothers_logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center; /* 左寄せ＝本文の左揃えと合わせる */
}
.top_brothers_logo-img--green {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.top_brothers_card:hover .top_brothers_logo-img--green,
.top_brothers_card:focus-visible .top_brothers_logo-img--green {
  opacity: 1;
}
.top_brothers_tagline {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(17px, 2.0vw, 20px);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.top_brothers_teaser {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--gray-500);
}
.top_brothers_link {
  margin-top: auto; /* カード下端へ＝3カードでリンク位置を揃える */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--will-green);
}
.top_brothers_arrow {
  font-family: var(--font-en);
  transition: transform var(--dur) var(--ease);
}
.top_brothers_card:hover .top_brothers_arrow {
  transform: translateX(4px);
}
/* APPAREL：Coming Soon・リンク無効（緑クロスフェードは活かす） */
.top_brothers_card.is-soon {
  cursor: default;
}
.top_brothers_badge {
  margin-top: auto;
  display: inline-block;
  font-family: var(--font-en);
  font-size: clamp(10px, 1.1vw, 11px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  border: var(--fs-brand-rule-w) solid var(--fs-brand-rule);
  padding: 4px 10px;
}

/* ----- 理念 top_concept ----- */
.top_concept_copy {
  font-family: var(--font-ja);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.top_concept_circle {
  background: var(--ink);
} /* 紺 → ink。円形は維持 */
.top_concept_main-txt {
  font-family: var(--font-ja);
  font-weight: 700;
  color: #fff;
}
.top_concept_txt-right,
.top_concept_txt-left {
  color: var(--gray-700);
}
/* 浮遊画像の色付き背景 → ウォームな offset ブロックへ（静かな構造） */
.top_concept_img-wrapper__01::before,
.top_concept_img-wrapper__02::before,
.top_concept_img-wrapper__03::before,
.top_concept_img-wrapper__04::before {
  background-image: none;
  background-color: var(--surface);
}

/* ----- 思想 top_thought ----- */
.top_thought_txt {
  color: var(--gray-700);
}
/* (A) 上半分：リード＝muted・小さめ・字間広めのラベル調前置き（隣接セレクタで上半分のリードのみ対象） */
.m_section_title + .top_thought_txt {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.9;
}
/* (A) リード→パンチを近づけ「静かな前置き → 言い切り」の緩急に（txt-box内の本文には波及させない） */
.m_section_title + .top_thought_txt + .top_thought_txt {
  margin-top: 16px;
}
/* 黄マーカー → 緑の控えめな下地（緑は一点の強調） */
.top_thought_txt__emphasis {
  font-family: var(--font-ja);
  font-weight: 900;
  color: var(--ink);
  background: linear-gradient(transparent 0%, transparent 72%, var(--will-green) 72%, var(--will-green) 100%);
  /* (A) パンチ本体を主役に：リード(14px)から大きくサイズジャンプ */
  font-size: 30px;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .m_section_title + .top_thought_txt + .top_thought_txt {
    margin-top: 24px;
  }
  .top_thought_txt__emphasis {
    font-size: 46px;
  }
}
/* リボン見出し → 罫線＋ink の静かな見出し */
.top_thought_contents-title {
  background-image: none;
  height: auto;
  font-family: var(--font-ja);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.04em;
  padding: 12px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
/* 人/環境カード：(1)surfaceベタ→paper地の罫線ボックス。(2)上部に番号+英ラベル。(4)ぼかし0のハードシャドウ */
:root {
  --fs-thought-card-shadow: var(--gray-700); /* (4) カードのぼかし0シャドウ色（ink系・薄め）。濃さ要調整 */
}
.top_thought_item {
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  /* (4) blur=0・offsetのみ＝角丸0と合わせカクッと面がずれる影。左右カードで向き・量は揃える */
  box-shadow: 6px 6px 0 var(--fs-thought-card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* (2) 番号(緑・小)＋英ラベル(muted・字間広め・小) を上部に */
.top_thought_item-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.top_thought_item-no {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--will-green);
}
.top_thought_item-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.top_thought_item-name {
  font-family: var(--font-ja);
  font-weight: 900;
  color: var(--ink);
}
/* (3) × を WILL GREEN に（人と環境の掛け合わせ＝緑一点） */
.top_thought_item-box::before,
.top_thought_item-box::after {
  background: var(--will-green);
}
/* (B) フレーム下：見出し頭に緑バー（will-green・22×2px）を添えて「見出し」であることを示す */
.top_thought_contents-txt {
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.top_thought_contents-txt::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  background: var(--will-green);
}
/* (B) 本文：行間ゆったり＋muted（gray-700）で落ち着いた読み物に（PCは右カラム幅で1行に収まる） */
.top_thought_txt-box .top_thought_txt {
  line-height: 2;
}
/* (B) STAFF CTA（囲み罫は既設）：上余白を 60→32/40 に詰め、フレーム下の密度を上げる */
.top_thought_txt-box .top_concept_btn-wrapper {
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .top_thought_txt-box .top_concept_btn-wrapper {
    margin-top: 40px;
  }
}

@media screen and (min-width: 550px) {
  .u_550dn{
    display: none;
  }
}

/* ----- school / club タイトル・要素 ----- */
.top_school_title {
  -webkit-text-stroke: 0;
  color: var(--ink);
}
.top_school_title__color,
.top_school_title__color2,
.top_club_title__color,
.top_club_title__color2 {
  color: var(--will-green);
  -webkit-text-stroke: 0;
}
.top_school_copy {
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.top_school_text {
  color: var(--gray-700);
}
/* swiper ページネーション：パステル → ink / active 緑 */
.top_school_dots .swiper-pagination-bullet {
  background: var(--gray-300);
  border: 0;
}
.top_school_dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--will-green);
}
/* 価値タグ：右向き五角形シェブロンの連結（楽しい → うまくなりたい → 勝ちたい）。黒地・白抜き・clip-path。
   .m_steps/.m_step は page-school 導入で使用。旧 .top_school_circle* は撤去。 */
.top_school_content .m_steps {
  margin-top: 56px;
}

@media screen and (min-width: 768px) {
  .top_school_content .m_steps{
    margin-top: 80px;
  }
}

.m_steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px; /* SPで1行に収めるため詰める（PCは下で広げる） */
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.m_step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper-pure); /* 白抜き(#fff) */
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap; /* 文字は折り返さない */
  padding: 10px 16px 10px 13px; /* SPは1行確保のため圧縮（右は尖り分を少し多め） */
  /* 右辺を三角に尖らせ、左辺に同角度の凹みを入れて噛み合わせる五角形シェブロン */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.m_step:first-child {
  /* 先頭だけ左辺はまっすぐ（凹みなし） */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-left: 13px;
}

.m_step:not(:first-child){
  padding-left: 24px;
}

@media screen and (min-width: 768px) {
  .m_step:not(:first-child){
  padding-left: 34px;
}
}

@media screen and (min-width: 768px) {
  .m_step {
    font-size: 20px;
    letter-spacing: 1px;
    padding: 14px 34px 14px 28px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  }
  .m_step:first-child {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    padding-left: 28px;
  }
}

/* ===== 7-1 school KV（写真全面・75vh・暗幕＋重ねテキスト） =====
   共有 .m_kv（club_kv / kv と共用）は触らず school 専用 .p_school_kv を新設。写真は既存KV画像を流用。 */
.p_school_kv {
  position: relative;
  height: 75vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* 全要素を左下に集約（下端寄せ） */
  padding-bottom: 40px;
}
.p_school_kv_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p_school_kv_bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* object-position は既定（中央）。club/about/staff/contact はこのまま中央 */
  display: block;
}
/* school KV のみ：SP=縦長 school-kv-sp を下端基準、PC=横長 school-kv-pc は上寄り20%でcover（中央だとコーチの頭が切れる） */
.p_school_kv--bottom .p_school_kv_bg-img {
  object-position: center bottom;
}
/* 横長画像の条件は picture の source と同じ（768px以上 or 縦横比3/4以上＝中間幅でも横長画像） */
@media (min-width: 768px), (min-aspect-ratio: 3/4) {
  .p_school_kv--bottom .p_school_kv_bg-img {
    object-position: center 20%;
  }
}
/* staff KV だけヘッダー高(76px)ぶん下げる：固定ヘッダーの下に写真の上端が潜ると、スタッフの頭が隠れるため */
.p_staff_kv {
  margin-top: 76px;
}
/* 下層KVのクロスフェード（staff：4人を1枚ずつ）。間隔・フェード時間は TOP KV と共通の変数。
   枠の比率しだいで上下が切れるので、写真ごとの上下位置を img の --kv-y で指定（頭が切れない位置） */
.p_kv_fade_slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity var(--fs-kv-fade-dur) var(--ease);
}
.p_kv_fade_slide.is-active {
  opacity: 1;
}
/* 切り替えのたびにズームアウト（1.08倍→等倍）。基準点は枠の上端中央＝拡大しても上端がずれず、頭が切れない。
   JS が動く時だけ（.is-zooming）拡大を効かせる＝reduced-motion / JS なしでは等倍のまま。
   消える写真はフェードアウト中は等倍を保ち、見えなくなってから（fade-dur 後）一瞬で 1.08 に戻して次回に備える */
.p_kv_fade.is-zooming .p_school_kv_bg-img {
  transform: scale(var(--kv-zoom-from, 1.08));
  transform-origin: 50% 0%;
  transition: transform 0s linear var(--fs-kv-fade-dur);
}
.p_kv_fade.is-zooming .p_kv_fade_slide.is-zoom .p_school_kv_bg-img {
  transform: scale(1);
  transition: transform var(--kv-zoom-dur, 5.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.p_kv_fade .p_school_kv_bg-img {
  object-position: 50% var(--kv-y, 50%);
}
/* 横長画像（picture の source と同じ条件）：正方形に近い枠では左右も切れるので --kv-x も効かせる */
@media (min-width: 768px), (min-aspect-ratio: 3/4) {
  .p_kv_fade .p_school_kv_bg-img {
    object-position: var(--kv-x, 50%) var(--kv-y, 50%);
  }
}
/* 薄い暗オーバーレイ：ink から色混合で導出（hexベタ書き回避） */
.p_school_kv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  z-index: 1;
}
.p_school_kv_inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.p_school_kv_body {
  text-align: left;
}
/* KV内の m_section_title：暗幕上のため 上下罫=白・hero=白（eyebrowは緑のまま＝あしらいの軽い例外） */
.p_school_kv .m_section_title {
  text-align: left;
}
.p_school_kv .m_section_title_sub {
  color: var(--paper); /* KVは暗幕上のため eyebrow も白（罫＋文字とも白） */
}
.p_school_kv .m_section_title_sub::before,
.p_school_kv .m_section_title_sub::after {
  background: var(--paper); /* KVは白罫 */
}
.p_school_kv .m_section_title_main {
  color: var(--paper);
  font-size: clamp(44px, 12vw, 92px);
  line-height: 1.05;
  text-align: left; /* base .m_section_title_main の center を上書き（左揃えhero） */
}
.p_school_kv_tagline {
  margin-top: 14px;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.p_school_kv_cta {
  margin-top: 28px;
}
/* about KV は school/club と同じ左下寄せ（base の .p_school_kv を使用）。中央寄せの上書きは廃止。 */
/* 体験CTA（最重要CV・緑ベタ）。Step5/8で共通体験CTAとして再利用予定。 */
.m_cta-exp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--will-green);
  border: 1.5px solid var(--will-green);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.m_cta-exp::after {
  content: "→";
  font-family: var(--font-en);
}
.m_cta-exp:hover {
  background: var(--will-green-dark);
  border-color: var(--will-green-dark);
}

/* ===== 7-4 体験CTA（共通バンド）。中間=明るいバンド／末尾(footer)はStep8で追加 ===== */
.m_exp-cta_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.m_exp-cta_lead {
  font-family: var(--font-ja);
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* 中間バンド：黒背景＋背面の巨大透かし文字（極薄）。一言=白・緑はボタン一点 */
.m_exp-cta--middle {
  position: relative;
  overflow: hidden;
  background: var(--ink); /* 黒背景 */
  padding: 48px 0;
}
.m_exp-cta--middle .l_contents {
  position: relative;
  z-index: 1; /* コピー/CTA を前面に */
}
.m_exp-cta--middle .m_exp-cta_lead {
  color: var(--paper); /* 黒地なので白 */
  font-size: 18px;
}
/* 黒地では白の透かし。ink地のため opacity を少し上げる（0.04→0.06・要調整） */
.m_exp-cta--middle .m_watermark {
  color: var(--paper);
  opacity: 0.06;
}
@media screen and (min-width: 768px) {
  .m_exp-cta--middle {
    padding: 64px 0;
  }
  .m_exp-cta--middle .m_exp-cta_lead {
    font-size: 20px;
  }
}
/* 中間CTAの背景＝バスケのハーフコート線画。バンドを高めにしてコートを見せ、本文は前面(z-index:1)。
   線は白・極薄、dashoffset で徐々に描画（main.js）。 */
.m_exp-cta--middle {
  min-height: clamp(300px, 42vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m_exp-cta--middle .l_contents {
  width: 100%;
}
.m_exp-cta_lineart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0; /* 本文(z-index:1)より背面 */
  pointer-events: none;
  overflow: hidden;
}
.m_exp-cta_lineart svg {
  width: auto;
  height: 130%; /* バンド高さの1.3倍（はみ出しは overflow:hidden でclip） */
  max-width: 100%; /* SPは幅に収め横スクロールを出さない（PCはband幅に収まり1.3x） */
  opacity: 0.18; /* 背景の気配（要調整） */
}
.m_exp-cta_lineart-path {
  fill: none;
  stroke: var(--paper); /* 黒地に白線 */
  stroke-width: 4; /* センターライン（単線）化で軽くなった分、旧・塗り二重線の重みに合わせて補正 */
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* 末尾バンド：暗い写真マーキー背景（黒レイヤー固定）。一言=白、ボタンは反転（白地×緑文字＝緑一点） */
.m_exp-cta--footer {
  position: relative;
  overflow: hidden;
  background: var(--ink); /* マーキー画像のフォールバック暗地（旧・緑ベタを置換） */
  padding: 56px 0;
}
.m_exp-cta--footer .l_contents {
  position: relative;
  z-index: 1; /* コピー/CTA を前面に */
}
.m_exp-cta--footer .m_exp-cta_lead {
  color: var(--paper);
  font-size: 20px;
}
.m_exp-cta--footer .m_cta-exp {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--will-green);
}
.m_exp-cta--footer .m_cta-exp:hover {
  background: var(--will-green);
  border-color: var(--will-green);
  color: var(--paper-pure);
}
@media screen and (min-width: 768px) {
  .m_exp-cta--footer {
    padding: 72px 0;
  }
  .m_exp-cta--footer .m_exp-cta_lead {
    font-size: 24px;
  }
}
/* ===== 横流れ写真マーキー（汎用 .m_marquee）：grayscale＋黒レイヤー固定・reduced-motionで停止 ===== */
.m_marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.m_marquee_track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: m_marquee 40s linear infinite;
}
.m_marquee_track img {
  height: 100%;
  width: auto;
  object-fit: cover;
  filter: grayscale(1); /* モノクロ厳守 */
  display: block;
}
.m_marquee_layer {
  position: absolute;
  inset: 0;
  background: var(--ink); /* 黒レイヤー（ガイド Black #231815 = ink）固定 */
  opacity: 0.6;
}
@keyframes m_marquee {
  to {
    transform: translateX(-50%); /* 同一2セット並べて-50%＝シームレスループ */
  }
}
@media (prefers-reduced-motion: reduce) {
  .m_marquee_track {
    animation: none;
  }
}
@media screen and (min-width: 768px) {
  .p_school_kv {
    padding-bottom: 64px;
  }
  .p_school_kv_tagline {
    font-size: 18px;
  }
}

/* ===== 7-2 REASON（選ばれる理由）：番号付き罫線リスト・写真なし・角丸0 ===== */
.school_reason_lead,
.school_class_text {
  text-align: center;
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-top: 18px;
}
/* CLASS lead を REASON lead とあしらい統一（base の nowrap・15px を解除） */
.school_class_text {
  white-space: normal;
  font-size: inherit;
}
.school_reason_list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--gray-300); /* 上の細罫 */
}
.school_reason_item {
  display: grid;
  grid-template-columns: 1fr; /* SP：番号→見出し→説明 の縦積み */
  gap: 6px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--gray-300); /* 行間＝細罫で区切る */
  padding-left:20px;
}
.school_reason_no {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--will-green); /* 番号＝緑の一点 */
}
.school_reason_head {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 17px;
  color: var(--ink);
}
.school_reason_desc {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.9;
  color: var(--gray-700); /* muted */
}
@media screen and (min-width: 768px) {
  /* PC：中央寄せ（見出し・リードと軸をそろえる）。番号｜見出し｜説明 の横3カラム */
  .school_reason_list {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .school_reason_item {
    grid-template-columns: 64px 1fr 2fr;
    gap: 28px;
    align-items: center;
    padding: 28px 0;
    padding-left:32px;
  }
  .school_reason_no {
    font-size: 28px;
  }
  .school_reason_head {
    font-size: 19px;
  }
  .school_reason_desc {
    font-size: 15px;
  }
}
/* REASON：3項目をスクロール時に左から順次スライドイン（GSAP＝main.js）。
   すべり出しのはみ出しを clip して横スクロールを出さない。 */
.school_reason_area {
  overflow: hidden;
}

/* ===== 7-3 CLASS（フリップカード）：角丸0・モノクロ＋緑一点。
   フリップ挙動(js-flip-card)・3D変形(perspective/rotateY/backface)はベース継承、装飾と配置のみ上書き。 ===== */
/* レイアウト：SP1列／PC3列(3+2) */
.school_flip-card-list {
  width: 100%;
  max-width: 343px;
  margin: 48px auto 0;
  /* flex+wrap+中央寄せ：端数行（2枚だけ等）が自動で中央に寄る。満杯行は calc 幅で両端揃い。 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.school_flip-card {
  width: 100%; /* SP：1列 */
  max-width: none;
  height: 240px;
}
.school_flip-card-inner {
  height: 100%;
}
/* カード画像：高さ240px・上40pxをカット（280pxにして上40pxをクリップ） */
.school_flip-card-front img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center top;
  margin-top: -40px;
}
/* 面：角丸0 */
.school_flip-card-front,
.school_flip-card-back {
  border-radius: 0;
}
/* iPhone(Safari)対策：面の中で z-index を持つ子（文字・ボタン・暗グラデ）には親の backface-visibility が効かず、
   裏返した時に表の文字が左右反転して透ける。裏面非表示に頼らず、回転の半分（0.6s の 0.3s 時点）で
   見せる面を visibility で切り替える。is-spin-back は初回ヒントの一回転中に main.js が付け外し（遅延なしで切替）。 */
/* 回転は前後対称（ease-in-out）にして、ちょうど半分（90°）＝0.3s で面を切り替える */
.school_flip-card-inner {
  transition: transform 0.6s ease-in-out;
}
.school_flip-card-front {
  transition: visibility 0s linear 0.3s;
}
.school_flip-card-back {
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.school_flip-card.is-flipped .school_flip-card-front,
.school_flip-card.is-spin-back .school_flip-card-front {
  visibility: hidden;
}
.school_flip-card.is-flipped .school_flip-card-back,
.school_flip-card.is-spin-back .school_flip-card-back {
  visibility: visible;
}
.school_flip-card.is-spinning .school_flip-card-front,
.school_flip-card.is-spinning .school_flip-card-back {
  transition: none;
}
/* 表：写真＋下部に クラス名(白)＋対象(緑)。可読性のため下に暗グラデ */
.school_flip-card-front {
  background: var(--ink);
}
.school_flip-card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, color-mix(in srgb, var(--ink) 80%, transparent) 100%);
  pointer-events: none;
  z-index: 1;
}
.school_flip-card-front-body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  text-align: left;
}
.school_flip-card-name {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.3;
  color: var(--paper);
}
.school_flip-card-target {
  padding: 4px;
  margin-top: 4px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--will-green); /* 対象＝緑の一点 */
  background: var(--paper);
  display: inline-block;
}
/* 「詳しく見る ↻」：右下の小さな手がかり（角丸0） */
.school_flip-card-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--paper) 70%, transparent);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  color: var(--paper);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 12px;
}
/* 裏：ink地・白文字。クラス名＋緑短罫＋キャッチ(大)＋説明 */
.school_flip-card-back {
  background: var(--ink);
  color: var(--paper);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.school_flip-card-back-title {
  margin-top: 0;
  background: none; /* base の黄グラデマーカーを除去 */
  text-align: left;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.school_flip-card-rule {
  display: block;
  width: 32px;
  height: 3px;
  margin: 10px 0;
  background: var(--will-green); /* 緑い短罫 */
}
.school_flip-card-copy {
  margin-top: 0;
  text-align: left;
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--paper);
}
.school_flip-card-text {
  margin-top: 12px;
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.8;
  color: var(--paper);
}
@media screen and (min-width: 768px) {
  .school_flip-card-list {
    max-width: 1080px;
    gap: 28px;
  }
  .school_flip-card {
    width: calc((100% - 28px) / 2); /* 768+：2列（gap 28px×1） */
    height: 240px;
  }
}
@media screen and (min-width: 1080px) {
  .school_flip-card {
    width: calc((100% - 56px) / 3); /* PC：3列（gap 28px×2）。5枚→3+2で2行目は中央寄せ */
  }
}

/* ===== 7-5 SCHEDULE：罫線テーブル（角丸0・モノクロ＋緑一点）。
   データはACF(schedule_html)＝編集容易のまま、書式（クラス）のみ確定。 ===== */
/* 白カード（角丸・白地・パディング）を解除＝罫線テーブルに */
.school_schedule_table-wrapper__sp12,
.school_schedule_table-wrapper__sp1,
.school_schedule_table-body__pc {
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.school_schedule_table {
  position: relative;
  width: 100%;
  color: var(--ink);
}
/* 上下の太い黒罫を border→実体(::before/::after)化し draw-on（入場で左→右に伸びる） */
.school_schedule_table::before,
.school_schedule_table::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-out;
  z-index: 1;
}
.school_schedule_table::before {
  top: 0;
}
.school_schedule_table::after {
  bottom: 0;
}
.school_schedule_table.is-in::before,
.school_schedule_table.is-in::after {
  transform: scaleX(1);
}
/* 月見出し（thead）：ink。本文との境はやや強い黒罫 */
.school_schedule_thead {
  border-bottom: 1.5px solid var(--ink);
}
.school_schedule_thead-th {
  border-left: 0;
  border-right: 0;
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 900;
}
/* 月見出し行（5月/6月＋左の空欄セル）をグレー地で揃える */
.school_schedule_thead-th,
.school_schedule_thead-td {
  background: var(--gray-100);
}
/* 行間＝細罫 */
.school_schedule_tr {
  background: transparent;
  border-bottom: 1px solid var(--gray-300);
}
/* 曜日列＝緑の一点アクセント */
.school_schedule_tbody-th {
  color: var(--will-green);
  font-family: var(--font-ja);
  font-weight: 800;
}
/* 会場＝ink。縦罫は除去し行間細罫で構造化 */
.school_schedule_tbody-td {
  color: var(--ink);
  border-left: 0;
  border-right: 0;
}
/* LINEお問い合わせ：緑画像 → モノクロの罫線ボタン（角丸0・LINEアイコン） */
.school_schedule_line {
  margin-top: 24px;
  text-align: center;
}
.m_btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 14px;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.m_btn-line .fa-line {
  font-size: 18px;
}
/* ホバーで LINE 公式色（緑地・白文字）に＝LINEへの導線であることを色で示す */
.m_btn-line:hover {
  background: var(--line-green);
  border-color: var(--line-green);
  color: var(--paper-pure);
}

/* ===== 7-6 TEACHING（指導方針）：写真×本文のジグザグ・角丸0・モノクロ＋緑一点 ===== */
.school_teaching_bridge {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-ja);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.school_teaching_points {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.school_teaching_point {
  display: flex;
  flex-direction: column; /* SP：写真→本文の縦積み */
  gap: 20px;
}
.school_teaching_point-img-el {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.school_teaching_point-title {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.school_teaching_point-title::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--will-green); /* 緑一点（見出し上の短罫） */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease-out;
}
.school_teaching_point-title.is-in::before {
  transform: scaleX(1);
}
.school_teaching_point-em {
  margin-top: 14px;
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.school_teaching_point-text {
  margin-top: 14px;
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.9;
  color: var(--gray-700);
}
.school_teaching_point-em + .school_teaching_point-text {
  margin-top: 10px; /* 太字（リード）に続く本文は詰める */
}
.school_teaching_staff {
  margin-top: 48px;
  text-align: center;
}
.school_teaching_staff-lead {
  margin-bottom: 16px;
  font-family: var(--font-ja);
  color: var(--gray-700);
}
@media screen and (min-width: 768px) {
  .school_teaching_points {
    gap: 72px;
  }
  .school_teaching_point {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .school_teaching_point--reverse {
    flex-direction: row-reverse; /* PC：左右交互（ジグザグ） */
  }
  .school_teaching_point-img,
  .school_teaching_point-body {
    flex: 1;
    min-width: 0;
  }
  .school_teaching_point-title {
    font-size: 22px;
  }
  .school_teaching_point-em {
    font-size: 17px;
  }
  .school_teaching_point-text {
    font-size: 15px;
  }
}

/* ===== 見せ場の背景：回転英字リング（汎用 .m_ring）。reduced-motionで停止 ===== */
.m_ring {
  position: absolute;
  right: 0;
  top: 40%;
  width: 78vh; /* SP：見える形にスケール縮小 */
  height: 78vh;
  transform: translate(25%, -50%); /* 自幅25%だけ右にはみ出す＝75%は必ず見える */
  z-index: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .m_ring {
    width: 150vh; /* PC：spec通り 150vh を維持 */
    height: 150vh;
  }
}
.m_ring svg {
  width: 100%;
  height: 100%;
  opacity: 0.14;
  animation: m_ring_spin 44s linear infinite;
  transform-origin: center;
}
.m_ring text {
  font-family: var(--font-en); /* サンセリフ固定（最太） */
  font-weight: 900;
  font-size: 46px;
  letter-spacing: 1px;
  fill: var(--ink);
}
@keyframes m_ring_spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m_ring svg {
    animation: none;
  }
}
/* 見せ場（school/club 導入ブロック）：リング=背面、コピー=前面。リングは overflow で内側にクリップ */
.top_school,
.top_club {
  position: relative;
  overflow: hidden;
}
.top_school .l_contents,
.top_club .l_contents {
  position: relative;
  z-index: 1;
}
/* リングがセクション境界で見切れないよう、top_school も縦クリップを解除（横だけ clip で右のはみ出しは抑止）。
   リングは positioned(z:0) のため下のセクション地より上に連続描画＝跨いでも途切れない。 */
.top_school {
  overflow-x: clip;
  overflow-y: visible;
}
/* 後続 school セクションの本文をリング(z:0)より前面へ＝跨いできたリングに文字が隠れない */
.school_section .l_contents {
  position: relative;
  z-index: 1;
}
/* ===== 要所セクションの巨大透かし文字（汎用 .m_watermark）。1ページ1か所・極薄 ===== */
.m_watermark {
  position: absolute;
  left: -4%;
  bottom: 0%;
  font-family: var(--font-en); /* サンセリフ固定 */
  font-weight: 900;
  font-size: 21vw;
  line-height: 1;
  color: var(--ink);
  opacity: 0.04; /* 極薄（本文可読性優先・0.03〜0.05で調整可） */
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}
/* 見せ場パンチライン（school 導入コピー）：特大・左寄せ。font-size拡大（weightは不変・club へは波及させない） */
.top_school .top_school_copy {
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.4;
  text-align: left;
  font-weight: 900;
}
.top_school_copy_accent {
  color: var(--will-green); /* 「WILL」をアクセントカラー（緑） */
}
/* school / club 導入カルーセル：パンチラインからの余白（SP=80px / PC=300px+）＋ゆっくり連続フロー（タイル状） */
.top_school .top_school_list-wrapper,
.top_club .top_school_list-wrapper {
  margin-top: 40px;
}
/* 2段目（逆方向に流れる段）：上段との間隔を横の間隔(20px)にそろえる */
.top_school .js_school-flow--reverse,
.top_club .js_school-flow--reverse {
  margin-top: 0;
}
.top_school .js_school-flow--reverse .top_school_list,
.top_club .js_school-flow--reverse .top_school_list {
  margin-top: 20px;
}

.js_school-flow .swiper-wrapper {
  transition-timing-function: linear; /* 連続フローを滑らかに（イージング無し） */
}
.js_school-flow .top_school_item {
  width: clamp(240px, 55vw, 340px);
  height: 220px;
}
.js_school-flow .swiper-pagination {
  display: none; /* 連続フローのためドットは非表示 */
}

/* ----- 活動情報 top_info / 投稿カード ----- */
.top_info_txt {
  color: var(--gray-700);
}
/* ===== 投稿一覧＝縦線で日付ノードを繋ぐタイムライン（TOP INFORMATION と /blog 共通・角丸ゼロ） ===== */
.m_post_list {
  position: relative;
  display: block; /* base の flex/grid を解除＝縦のタイムライン */
  max-width: 580px; /* SPの最大幅（PCは下の min-width:768px で800px） */
  margin: 40px auto 0; /* 中央寄せ */
  padding-left: 44px; /* 線＋ノードのぶん本文を右へ */
}
.m_post_list::before {
  content: ""; /* 縦の連結線 */
  position: absolute;
  left: 8px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--gray-300);
}
.m_post_item {
  position: relative;
  max-width: none;
  border: 0; /* SPの囲み枠・カード枠を解除 */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 clamp(40px, 6vh, 60px); /* エントリ間の余白＝線が続く */
  overflow: visible;
}
.m_post_item:last-child {
  padding-bottom: 0;
}
/* 日付＝線上のノード。丸い点を日付に重ねて線上に配置 */
.m_post_date {
  position: relative;
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px); /* 大きめに */
  letter-spacing: 0.06em;
  color: var(--ink);
}
.m_post_list .m_post_date::before {
  content: "";
  position: absolute;
  left: -42px; /* 本文 padding-left:44 → 点を x=2 に＝線(left:8,幅2)と中心一致 */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%; /* 丸ノード */
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--paper); /* 線が点の裏で透けないよう paper リング */
}
/* 本文：SP縦積み／PC横並び（左＝タイトル・カテゴリ／右＝画像） */
.m_post_body {
  display: block;
}
.m_post_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.m_post_title {
  margin: 0; /* 旧 margin-top:16px を打ち消し */
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.5;
  color: var(--ink);
}
.m_post_title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.m_post_cat {
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--will-green);
  padding: 2px 8px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--will-green);
}
/* 画像＝リンク。角丸ゼロ・ホバーで軽くズーム */
.m_post_link {
  display: block;
  text-decoration: none;
}
.m_post_thumb-wrapper {
  display: block;
  overflow: hidden; /* ズームを枠内にclip */
  border-radius: 0;
  aspect-ratio: 4/3; /* 縦長め（切れを軽減） */
}
.m_post_thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.45s var(--ease);
}
.m_post_link:hover .m_post_thumb,
.m_post_link:focus-visible .m_post_thumb {
  transform: scale(1.05);
}
/* ホバー：タイトルも緑へ（アイテム全体のホバーでも・タイトルリンク自体のフォーカスでも） */
.m_post_item:hover .m_post_title-link,
.m_post_title-link:hover,
.m_post_title-link:focus-visible {
  color: var(--will-green);
}
@media (prefers-reduced-motion: reduce) {
  .m_post_thumb {
    transition: none;
  }
  .m_post_link:hover .m_post_thumb,
  .m_post_link:focus-visible .m_post_thumb {
    transform: none;
  }
}
@media (min-width: 768px) {
  .m_post_list {
    max-width: 800px; /* PCの最大幅 */
  }
  .m_post_body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px; /* 左テキスト可変：右画像は固定320px */
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  .m_post_text {
    margin-bottom: 0;
    padding-top: 32px; /* PC：タイトルを少し下げる（画像上端より下に） */
  }
}
/* ===== INFO（活動情報 /blog）：カテゴリーナビ＋ページネーションを新パレットに ===== */
/* カテゴリーナビ：旧サーモンのピル→角丸ゼロのink枠チップ、緑ホバー。内容幅で中央寄せ折返し。 */
.info_info_nav {
  margin-top: 28px;
}
.info_info_nav-list {
  gap: 12px;
  justify-content: center;
}
.info_info_nav-item {
  width: auto; /* 旧の2/3列固定幅を解除＝内容幅 */
  height: auto;
  border-radius: 0;
}
.info_info_nav-link {
  width: auto;
  height: auto;
  padding: 9px 18px;
  border: 1px solid var(--gray-300);
  border-radius: 0; /* 角丸ゼロ */
  box-shadow: none; /* 旧サーモンの外リング除去 */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 15px);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.info_info_nav-link:hover,
.info_info_nav-link:focus-visible {
  border-color: var(--will-green);
  color: var(--will-green);
}
.info_info_nav-link::after {
  content: none; /* 旧チェブロン除去 */
}
/* 今いるカテゴリー（全ての記事を含む）＝緑の塗りで区別 */
.info_info_nav-link.is-current {
  border-color: var(--will-green);
  background: var(--will-green);
  color: var(--paper);
}
/* ページネーション：page-numbers を角丸ゼロのink枠ボタンに。current/hover は緑一点。 */
.pagination {
  margin: clamp(32px, 6vh, 56px) 0 clamp(48px, 8vh, 72px); /* リスト下・フッター上の余白 */
}
.nav-links {
  gap: 10px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
  border-color: var(--will-green);
  color: var(--will-green);
}
.pagination .page-numbers.current {
  background: var(--will-green);
  border-color: var(--will-green);
  color: var(--paper);
}
.pagination .page-numbers.dots {
  border: 0;
  min-width: 0;
}

/* ===== 単一記事ページ（single）：一覧とトンマナ統一 ===== */
/* 日付＋カテゴリは左寄せの一行（旧 space-around・タイムラインの縦マージン/丸ノードは解消済み） */
.m_post_meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.m_post_meta .m_post_date {
  margin: 0;
}
.single_post_title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  color: var(--ink);
}
/* 記事下ページネーション（前/一覧/次）：旧サーモン枠→角丸ゼロのink枠・緑ホバー */
.single_pagination {
  margin: clamp(40px, 7vh, 64px) 0;
}
.single_pagination .pagination-item {
  border: 1px solid var(--gray-300);
  border-radius: 0;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.single_pagination .pagination-item a,
.single_pagination .pagination-item_link {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-ja);
}
.single_pagination .pagination-item:hover {
  border-color: var(--will-green);
}
.single_pagination .pagination-item:hover a,
.single_pagination .pagination-item:hover .pagination-item_link {
  color: var(--will-green);
}

/* ===== CONTACT（お問い合わせ）＋FAQ：旧カラー/角丸を新パレットに ===== */
/* KV撤去に伴い、よくあるご質問リンクを見出し直下へ（INFOのnavと同じ配置・余白） */
.contact_navigation {
  margin-top: 28px;
}
/* よくあるご質問リンク：旧ニューモーフィズムのピル→角丸ゼロのink枠・緑ホバー */
.contact_navigation_link {
  width: auto;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 600;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact_navigation_link:hover {
  box-shadow: none;
  border-color: var(--will-green);
  color: var(--will-green);
}
/* LINE案内：角丸16→0、ink枠＋ぼかし0オフセット影のカードに */
.contact_contact_line {
  border-radius: 0;
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--fs-thought-card-shadow);
  background: var(--paper);
}
/* LINEボタン：派手な画像＋点滅(zoomLoop)を廃し、school/clubと同じ .m_btn-line（罫線→ホバーで公式LINE緑）に。中央寄せ */
.contact_contact_line-btn {
  margin-top: 28px;
  text-align: center;
}
/* フォーム入力：角丸4→0、gray-300枠、focusで緑 */
.contact_form_input,
.contact_form_textarea {
  border: 1px solid var(--gray-300);
  border-radius: 0;
  background: var(--paper-pure);
  font-family: var(--font-ja);
  color: var(--ink);
}
.contact_form_input:focus,
.contact_form_textarea:focus {
  outline: none;
  border-color: var(--will-green);
  box-shadow: 0 0 0 1px var(--will-green);
}
/* フォーム(dl)の上余白 40px→120px に拡大 */
.contact_form_list {
  margin-top: 120px;
}
/* 記入例が薄すぎ(#dbdbdb)て見えない → 濃いめグレーに */
.contact_form_example {
  color: var(--gray-500);
}
/* 入力欄の高さを約1.3倍（40→52px）に */
.contact_form_input {
  height: 52px;
}
/* 必須バッジ：旧サーモン→緑一点（角丸ゼロ） */
.contact_form_required {
  background: var(--will-green);
  color: var(--paper);
  border-radius: 0;
}
/* プライバシーリンク：旧サーモン→緑 */
.contact_form_privacy-link {
  color: var(--will-green);
  text-decoration-color: var(--will-green);
}
/* 送信ボタン：旧シアン→緑（角丸ゼロ）。CF7の .wpcf7-submit にも適用 */
.contact_btn_input,
.wpcf7-submit {
  background: var(--will-green);
  border-radius: 0;
  border: 0;
  color: var(--paper);
  font-family: var(--font-ja);
  font-weight: 700;
  transition: background var(--dur) var(--ease);
}
.contact_btn_input:hover,
.wpcf7-submit:hover {
  background: var(--will-green-dark);
}
/* FAQ：Q.＝緑、A.＝ink、+/−マーク＝ink（角丸ゼロは元から） */
.service_faq_icon__q {
  color: var(--will-green);
}
.service_faq_icon__a {
  color: var(--ink);
}
.service_faq_mark::before,
.service_faq_mark::after {
  background: var(--ink);
}
/* プライバシー同意チェックボックス：角丸4→0、チェック色サーモン→緑、focusも緑 */
input[type="checkbox"]::before {
  border-radius: 0;
}
input[type="checkbox"]::after {
  border-bottom-color: var(--will-green);
  border-left-color: var(--will-green);
}
input[type="checkbox"]:focus-visible::before {
  border-color: var(--will-green);
}

/* ----- 流れる画像帯 ----- */
.flow-grid_item img {
  border-radius: 0;
}

/* ===== FV：信念の鼓動＝心電図ライン（フルブリード） =====
   .top_kv(ScrollTriggerでpin=fixed化)の外＝body直下に置き、position:absoluteで文書アンカー。
   ＝固定コピーに相乗りせず、スクロールで普通に上へ退場する。pin/scrub/コピー退場には不干渉。 */
:root {
  /* SP：THE WILL(コピー)下端と 〜未来を豊かに〜 の間に、背高の山を置く縦位置。
     コピー高さ=15vw×2行=27vw連動なので px+vw で追従（下の sub-copy 余白拡張とセット）／要調整 */
  --fs-fv-hb-top: calc(107px + 27vw);
}
.p_fv_heartbeat {
  position: absolute;
  left: 0;
  right: 0; /* left/rightで全幅（100vwのスクロールバー溢れを避ける） */
  top: var(--fs-fv-hb-top);
  z-index: 3; /* KV(pin=stacking auto)より前面・ヘッダー(z-index-menu)より背面 */
  pointer-events: none; /* 装飾：CTA等のクリックを妨げない */
}
.p_fv_heartbeat_svg {
  display: block;
  width: 100%;
  height: auto;
}
.p_fv_heartbeat_svg--pc {
  display: none; /* SP は背高版(--sp)のみ表示 */
}
@media (min-width: 768px) {
  :root {
    --fs-fv-hb-top: 42vh; /* PC：右側の山2倍ぶんSVGが背高化したので少し上げ、山が上の空きへ伸びるように／要調整 */
  }
  .p_fv_heartbeat_svg--sp {
    display: none; /* PC は横長版(--pc)に切替 */
  }
  .p_fv_heartbeat_svg--pc {
    display: block;
  }
}

/* =============================================================================
   about ページ（明るい paper 基調）
============================================================================= */
/* ===== about 8-2 NURTURE：見せ場の一文を特大化（about唯一の見せ場・育てる=緑）。写真は角丸0・旧パステルoverlay除去 ===== */
.about_nurture_copy {
  margin-top: clamp(20px, 4vw, 36px);
  font-size: clamp(28px, 5vw, 49px); /* 英語ヒーロー最大40pxより明確に大きく */
  line-height: 1.35;
  font-weight: 900;
  white-space: normal; /* base の nowrap を解除（SPで折返し・横スクロール防止） */
  text-align: center;
}
.about_nurture_copy_accent {
  color: var(--will-green);
  white-space: nowrap; /* 緑のアクセント語「育てる」を行末で割らない */
}
/* 旧パステルかぶせ overlay を撤去（要素自体は新レイアウトで不使用） */
.about_nurture_img-wrapper::before {
  display: none;
}
/* NURTURE：左=本文（ゆとり）／右=2枚重ね（パララックス）。container-lg で2カラム */
.about_nurture_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  margin-top: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 768px) {
  .about_nurture_grid {
    grid-template-columns: 1fr 1.1fr; /* 右(画像)をやや大きく */
    gap: clamp(40px, 5vw, 80px);
  }
}
.about_nurture_contents {
  max-width: none;
}
.about_nurture_sub-copy {
  text-align: left;
}
.about_nurture_text {
  max-width: none;
  margin: clamp(18px, 2.5vw, 28px) 0 0;
  text-align: left; /* 長文は左揃え＝ゆとりある行長で読みやすく */
}
/* 右：メイン大＋サブ小を右下に重ねる。GSAPでパララックス＝スクロールで重なりが可変（reduced-motionはJSで無効） */
.about_nurture_media {
  position: relative;
  padding-bottom: clamp(40px, 9%, 110px); /* サブのはみ出し＋パララックス可動域 */
}
.about_nurture_media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.about_nurture_media-main {
  width: 84%;
  will-change: transform;
}
.about_nurture_media-sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 2;
  border: 5px solid var(--paper); /* 重なりに白の見切り＝浮きを明確に */
  will-change: transform;
}

/* ===== about 8-3 4 PILLARS：パステル黄→罫線・角丸0＋オフセット影（思想カードと同手法）。番号01-04=緑・大、アイコン廃止 ===== */
.about_4pillars_box {
  position: relative; /* アイコン（右上）の絶対配置基準 */
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--fs-thought-card-shadow); /* ぼかし0のオフセット影 */
  padding: clamp(24px, 3.5vw, 36px) clamp(20px, 2.5vw, 28px);
  line-height: 1.7;
}
/* 各柱の線画アイコン（補助・右上）：モノクロ(ink)・stroke のみ・番号より小さく。緑は乗せない */
.about_4pillars_icon {
  position: absolute;
  top: clamp(20px, 2.8vw, 30px);
  right: clamp(18px, 2.4vw, 26px);
  width: clamp(34px, 4.4vw, 44px); /* 番号(最大48px)より小さく＝補助のまま少し大きく */
  color: var(--ink);
  line-height: 0;
}
.about_4pillars_icon svg {
  width: 100%;
  height: auto;
  display: block;
}
.about_4pillars_box-number {
  position: static; /* base の絶対配置を解除＝カード先頭に */
  font-family: var(--font-en);
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--will-green); /* 番号＝緑・大 */
  -webkit-text-stroke: 0; /* base の黒フチを解除 */
  margin-bottom: 12px;
}
.about_4pillars_item-title {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  text-align: left;
}
.about_4pillars_item-sub {
  text-align: left;
  color: var(--gray-500); /* 小ラベル＝muted */
  margin-top: 6px;
}
.about_4pillars_item-text {
  text-align: left;
  margin-top: 16px;
}

/* ===== about 8-4 会社概要：罫線テーブル（角丸0・モノクロ＋緑一点）。実務情報なので静かに（見せ場にしない） ===== */
.company_section_table {
  width: 100%;
  max-width: 640px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  border-collapse: collapse;
}
.company_section_table caption {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.company_section_table caption::after {
  width: 40px;
  height: 3px;
  border-radius: 0; /* 角丸0 */
  background: var(--will-green); /* 緑一点 */
}
.company_section_tr {
  border-bottom: 1px solid var(--gray-300); /* 行＝細罫で区切る */
}
.company_section_tr:first-of-type {
  border-top: 1px solid var(--gray-300);
}
.company_section_tr:nth-of-type(2n + 1) {
  background: transparent; /* 旧 white 縞を解除 */
}
.company_section_th {
  text-align: left;
  vertical-align: top;
  width: 96px;
  padding: 16px 8px;
  font-weight: 700;
  color: var(--ink);
}
@media screen and (min-width: 768px) {
  .company_section_th {
    width: 140px;
  }
}
.company_section_td {
  vertical-align: top;
  padding: 16px 8px;
  font-size: 15px;
  color: var(--ink);
}
.company_section_td__small {
  color: var(--gray-500);
}

/* ===== about 8-6 背景流れコピー（新あしらい）：ページ最背面を右→左へ流れる巨大英字。
   固定(z:0)＝非配置のセクション地より上・前面コンテンツ(z:1)より下に薄く流れる。1ページ1つ・リングは使わない。 ===== */
.m_bgflow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.m_bgflow_track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: m_bgflow 60s linear infinite;
}
.m_bgflow_track span {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 22vh;
  line-height: 1;
  color: var(--ink);
  opacity: 0.05; /* 極薄（本文可読性優先・0.03〜0.06で調整可） */
  padding-right: 0.3em;
}
@keyframes m_bgflow {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m_bgflow_track {
    animation: none;
  }
}
/* 前面化：about の各セクション本文・KV・フッターを背景流れの上に乗せる */
.about_section .l_contents {
  position: relative;
  z-index: 1;
}
.p_about_kv {
  position: relative;
  z-index: 1; /* KV写真で背景流れを覆う（最前面ではなくヘッダーより下） */
}
.about_section ~ .l_footer,
.l_footer {
  position: relative;
  z-index: 1;
}

/* ===== STAFF カード：人物切り抜き＋緑あしらい（リニューアル） ===== */
/* レイアウト枠（PC2列 / SP1列）は既存 .staff_staff_card-wrapper / .staff_staff_card を流用。 */
/* カードは角丸ゼロ。視覚領域に切り抜きPNG＋緑シェイプ（緑シェイプは別ブロック）。 */
/* カードは最大400px。基本1列（中央）。横に2枚並べられる幅(≈700px)になった瞬間に2列グリッドへ。
   4枚なので最大2列(2×2)を維持し、狭幅でも minmax(0,400) で横スクロールを出さない。min-widthのみ。 */
.staff_staff_card-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
  gap: 48px 24px;
}
@media (min-width: 700px) {
  .staff_staff_card-wrapper {
    grid-template-columns: repeat(2, minmax(0, 400px));
  }
}
.staff_staff_card-wrapper .staff_staff_card {
  max-width: 400px;
  width: auto; /* グリッドセルを満たす（旧 width:450px を打ち消し） */
  margin: 0; /* 間隔は grid gap に任せる（旧 margin-top を打ち消し） */
  background: transparent;
}
/* 視覚領域：背面に緑シェイプ、前面に人物切り抜き。はみ出しは clip。 */
.staff_card_visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* 背景なし（透明）＝ベージュ矩形を廃し、緑シェイプと人物だけのクリーンな構成 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer; /* 画像クリックで開閉できる合図 */
}
.staff_card_img {
  position: relative;
  z-index: 1; /* 緑シェイプ(z:0)より前面＝人物が前に立つ */
  width: 100%;
  height: 100%;
  object-fit: contain; /* 全身を切らない */
  object-position: center bottom; /* 下端＝接地、頭も切れない */
  border-radius: 0; /* 旧8pxを打ち消し */
  filter: grayscale(1); /* 初期は白黒 */
  transform-origin: center top; /* 上基準でズーム＝頭（上端）を絶対に見切らせない（下＝脚側が見切れる） */
  transition: filter 0.3s ease, transform 1.3s var(--ease); /* ズームはゆっくり */
}
/* 経歴を開いているカードだけ：人物をフルカラーに戻し、上半身まで思いっきりズーム（下は見切れる） */
.staff_staff_card.is-open .staff_card_img {
  filter: grayscale(0);
  transform: scale(2);
}
@media (prefers-reduced-motion: reduce) {
  .staff_card_img {
    transition: none; /* 即時切替 */
  }
  .staff_staff_card.is-open .staff_card_img {
    transform: none; /* 動きは出さない（色のみ切替） */
  }
}
.staff_card_body {
  padding: 18px 14px 8px;
}
.staff_card_name-en {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--gray-500);
}
.staff_card_toggle {
  width: 100%;
  margin-top: 4px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.staff_card_name-ja {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
/* ＋/− マーク：角丸ゼロの四角枠＋緑一点のバー（横棒は常時、縦棒は閉時のみ＝＋→−） */
.staff_card_mark {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 0; /* 旧丸を打ち消し */
}
.staff_card_mark::before,
.staff_card_mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto; /* 四角形の中央に確実に配置 */
  border: 0; /* 旧三角形の border 指定を打ち消し */
  transform: none; /* 旧 translateX(-50%) を打ち消し（横ずれ防止） */
  background: var(--will-green); /* 緑一点 */
}
.staff_card_mark::before {
  width: 12px;
  height: 2px;
}
.staff_card_mark::after {
  width: 2px;
  height: 12px;
  transition: opacity var(--dur) var(--ease);
}
.staff_card_mark.is-open::after {
  opacity: 0; /* 開いたら − */
}
/* 旧 style.css の .js_staff_mark.is-open（top:2px＋translateX/rotate）を打ち消し、開状態でも中央維持 */
.js_staff_mark.is-open::before,
.js_staff_mark.is-open::after {
  top: 0;
  transform: none;
}
/* 経歴：初期は閉じる（height0・不可視）。JSで開閉。 */
.staff_card_career {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.staff_card_text {
  font-family: var(--font-ja);
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  color: var(--gray-700);
  margin-top: 4px;
  padding: 16px;
  border-top: 1px solid var(--gray-300); /* 罫線区切り */
}
/* 実績の順位・成績の一点強調（緑） */
.staff_em {
  color: var(--will-green);
  font-weight: 700;
}

/* ===== STAFF：幾何学あしらい（全カード統一フォルム＝B案・規律 / 配色はアーバンA案 2026-08-05） =====
   配色方針：WILL GREEN 一色をやめ、グレー寄りのグリーンを地に、WILL GREEN を重ねる2色構成。
   重なった部分だけが濃くなる（::before の multiply）ことで、色数を増やさずに層をつくる。
   色は既存トークンの color-mix で作る（hex 直書きはしない）。 */
/* 角丸ゼロの不規則多角形を全カード共通で使用。人物(z:1)の背面(z:0)。はみ出しは visual の overflow:hidden でclip。 */
.staff_card_shape {
  position: absolute;
  z-index: 0; /* 位置指定＋z-index で stacking context を作る＝::before の multiply をシェイプ内に閉じ込める */
  left: 5%;
  right: 5%;
  top: 7%;
  bottom: -3%;
  /* 地：グレーに寄せたグリーン（WILL GREEN と --gray-700 の掛け合わせ） */
  background: color-mix(in srgb, var(--will-green) 52%, var(--gray-700));
  clip-path: polygon(16% 5%, 95% 15%, 100% 68%, 72% 100%, 8% 90%, 0% 32%);
  transform-origin: center; /* 中心で回転 */
  transition: transform 1.3s var(--ease); /* 人物ズームと同じテンポでゆっくり回す */
}
/* 経歴を開いているカード：背面の緑シェイプを大きく回転（約45度）＋拡大（人物ズームと連動） */
.staff_staff_card.is-open .staff_card_shape {
  transform: rotate(45deg) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .staff_card_shape {
    transition: none;
  }
  .staff_staff_card.is-open .staff_card_shape {
    transform: none; /* 動きは出さない */
  }
}
/* --- カードごとの振り分け（スタッフごとに固定・2026-08-05） ---
   4人それぞれに違う柄を割り当てる。同じ人はいつ見ても同じ柄になる（読み込みごとには変わらない）。
   変えるのは「地の多角形の形」と「グレーと緑の配合比」の2つだけ。
   重ねの多角形・ハッチングの角度・線は全カード共通のまま＝バラバラに見えず“同じシリーズ”に収まる。
   配合比は 44〜60% の範囲に収めている（振りすぎると別ブランドの色に見えるため）。
   スタッフが増えたら --5 以降を足す。修飾クラスが無いカードは上の既定値で出る。 */
.staff_card_shape--1 {
  background: color-mix(in srgb, var(--will-green) 52%, var(--gray-700));
  clip-path: polygon(16% 5%, 95% 15%, 100% 68%, 72% 100%, 8% 90%, 0% 32%);
}
.staff_card_shape--2 {
  background: color-mix(in srgb, var(--will-green) 44%, var(--gray-700));
  clip-path: polygon(6% 12%, 78% 0%, 100% 44%, 88% 96%, 22% 100%, 0% 62%);
}
.staff_card_shape--3 {
  background: color-mix(in srgb, var(--will-green) 60%, var(--gray-700));
  clip-path: polygon(28% 0%, 100% 22%, 92% 74%, 54% 100%, 4% 82%, 6% 26%);
}
.staff_card_shape--4 {
  background: color-mix(in srgb, var(--will-green) 48%, var(--gray-700));
  clip-path: polygon(10% 8%, 88% 4%, 100% 56%, 64% 96%, 14% 100%, 0% 40%);
}
.staff_card_shape--5 {
  background: color-mix(in srgb, var(--will-green) 56%, var(--gray-700));
  clip-path: polygon(20% 2%, 92% 10%, 100% 50%, 80% 100%, 10% 94%, 0% 36%);
}

/* 2枚目の多角形：WILL GREEN をそのまま乗せ、multiply で重なりだけを濃くする。
   単色を重ねるだけなので実質の色数は増えず、面の層だけが増える。
   ここは全カード共通（カードごとに変えるのは地の形と配合比だけ）。 */
.staff_card_shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--will-green);
  clip-path: polygon(40% 0%, 100% 12%, 90% 60%, 28% 76%, 14% 26%);
  opacity: 0.9;
  mix-blend-mode: multiply;
}
/* 斜めの細線（ハッチング）。面に質感を与えるためのテクスチャで、色は紙色の半透明。
   親の clip-path に収まるのでシェイプ内だけに出る。回転・拡大も親に追従する。 */
.staff_card_shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    58deg,
    transparent 0 13px,
    color-mix(in srgb, var(--paper-pure) 55%, transparent) 13px 14px
  );
  opacity: 0.5;
  pointer-events: none;
}
/* 斜めの動線ライン（控えめ・人物の背面）。上のハッチングと競合しないよう細く・薄くする */
.staff_card_visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -20%;
  top: 58%;
  width: 140%;
  height: 1px;
  background: var(--paper-pure);
  opacity: 0.28;
  transform: rotate(-22deg);
  transform-origin: left center;
  pointer-events: none;
}

/* ===== STAFF：MESSAGE（保護者への約束）＝ink枠＋ぼかし0オフセット影のカード ===== */
.staff_message_box {
  max-width: none;
  height: 100%; /* 3枚を等高に */
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--fs-thought-card-shadow); /* ぼかし0のオフセット影（4PILLARSと共通） */
  background: var(--paper); /* 不透明paper地＝背面の浮遊パーティクルを透かさない */
  padding: clamp(28px, 3.5vw, 36px) clamp(22px, 2.5vw, 30px);
  color: var(--ink);
  text-align: left;
  line-height: 1.9;
}
/* 旧・左右のブラケット縦線（サーモン）を撤去 */
.staff_message_box::before,
.staff_message_box::after {
  content: none;
}
.staff_message_text {
  color: var(--ink);
}

/* ===== サイト全体：背景の浮遊パーティクル（固定canvas・本文の背面/paperの前面） ===== */
/* JSが body 直下に生成。z-index:-1 で paper 地の上・コンテンツ(z:auto)の背面に敷く。 */
#fs-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--paper); /* ページの地色はcanvas自身に持たせ、その前面(描画面)に粒子を乗せる */
}
body.p_club #fs-particles {
  background: var(--ink); /* club は黒地（緑四角形がよく映える） */
}
/* =============================================================================
   §12 ブランドガイド v0.1 整合：DISPLAY 書体（Instrument Serif）の適用範囲（2026-08-04）
   ガイド 09_TYPOGRAPHY の EN 書体 Instrument Serif は、KV コピーとセクション大見出しの
   2箇所に限定して使う。ナビ・日付・番号・装飾英字などの UI 階層は Noto Sans JP（--font-en）。
   Instrument Serif は Regular(400) と Italic しか無いため、適用箇所は weight を 400 に
   正規化する（合成ボールド＝ガイド 06_RULES の Don't「文字の形を改変する」の回避）。
   ロールバック：このブロックを削除するだけ。
============================================================================= */
/* KV コピー（トップ「BUILD THE WILL」／下層KVのタグライン Grow・SPARK・BUILD・TRUST THE WILL） */
.top_kv_copy,
.p_school_kv_tagline {
  font-family: var(--font-display);
  font-weight: 400;
}
/* セクション大見出し（Philosophy / Education / Information など）。
   --ja 修飾子は「大見出しに和文が入る場合」の逃がし口。
   2026-08-05 に staff の見出しを他ページと同じ並び（サブ=和文／大見出し=英字）へ直した結果、
   現在この修飾子を使っている箇所は無い。将来また和文の大見出しが出たとき用に定義だけ残す
   （Instrument Serif に和文グリフが無く、付けないと明朝へフォールバックしてしまうため）。 */
.m_section_title_main,
.m_category_main {
  font-family: var(--font-display);
  font-weight: 400;
}
.m_section_title_main--ja,
.m_category_main--ja {
  font-family: var(--font-ja);
  font-weight: var(--fs-section-title-weight);
}

/* --- §12-2 セリフ体のサイズ補正（2026-08-05・B案採用を受けて） -------------------
   Instrument Serif には太字が無く、同じ級数だと線が細く「小さく」見える。
   その不足を、DISPLAY 書体を当てている箇所のサイズだけ 1.25 倍にして補う。
   倍率は --fs-serif-scale の1箇所で調整できる（1.2 / 1.3 に振るのもここだけ）。
   元の値は各セクションの定義に残したまま、ここで上書きしている（撤回＝この節を消すだけ）。
   セクション大見出しはトークン経由なので、和文の --ja も同率で大きくなる。
   同じ見出しコンポーネントでサイズが食い違わないよう、意図してそう揃えている。 */
:root {
  --fs-serif-scale: 1.25;
  /* 元: clamp(28px, 6vw, 40px) — 通常セクションの大見出し */
  --fs-section-title-size: clamp(
    calc(28px * var(--fs-serif-scale)),
    calc(6vw * var(--fs-serif-scale)),
    calc(40px * var(--fs-serif-scale))
  );
}
/* トップKVコピー「BUILD THE WILL」。元: base clamp(40px,15vw,110px) / PC clamp(56px,9vw,150px) */
.top_kv_copy {
  font-size: clamp(
    calc(40px * var(--fs-serif-scale)),
    calc(15vw * var(--fs-serif-scale)),
    calc(110px * var(--fs-serif-scale))
  );
}
@media (min-width: 768px) {
  .top_kv_copy {
    font-size: clamp(
      calc(56px * var(--fs-serif-scale)),
      calc(9vw * var(--fs-serif-scale)),
      calc(150px * var(--fs-serif-scale))
    );
  }
}
/* 下層ページKVの大見出し（ACADEMY / ONE WILL / ABOUT など）。元: clamp(44px, 12vw, 92px) */
.p_school_kv .m_section_title_main {
  font-size: clamp(
    calc(44px * var(--fs-serif-scale)),
    calc(12vw * var(--fs-serif-scale)),
    calc(92px * var(--fs-serif-scale))
  );
}
/* 下層ページKVのタグライン（SPARK THE WILL など）。元: SP 16px（継承）/ PC 18px */
.p_school_kv_tagline {
  font-size: calc(16px * var(--fs-serif-scale));
}
@media screen and (min-width: 768px) {
  .p_school_kv_tagline {
    font-size: calc(18px * var(--fs-serif-scale));
  }
}

/* =============================================================================
   §13 レビュー用：英字ディスプレイ書体の2案を URL で切替（?kv=sans / ?kv=serif）
   クライアント比較用（kv-compare.html から参照）。指定が無ければ §12 の既定＝serif。
   対象は §12 と同じ2箇所（KVコピー／セクション大見出し）。
   A案＝どちらも Noto Sans JP の最太（リニューアル当初の見た目）。
   B案＝どちらも Instrument Serif（ブランドガイド 09_TYPOGRAPHY の DISPLAY 指定）。
   比較の公平性のため、変えるのは font-family と weight だけ。
   サイズ・字間・行間（clamp / -0.02em / 0.9 など）は両案とも共通のまま。
   書体が確定したら functions.php の zpcorp_kv_type_body_class と
   js/main.js の kvCompare 判定ごと、このブロックを削除する。
============================================================================= */
/* A案：全てサンセリフ */
body.is-kvtype-sans .top_kv_copy,
body.is-kvtype-sans .p_school_kv_tagline {
  font-family: var(--font-en);
  font-weight: 900;
}
body.is-kvtype-sans .m_section_title_main,
body.is-kvtype-sans .m_category_main {
  font-family: var(--font-ja);
  font-weight: var(--fs-section-title-weight);
}
/* B案：KVコピーとセクション大見出しをセリフに */
body.is-kvtype-serif .top_kv_copy,
body.is-kvtype-serif .p_school_kv_tagline {
  font-family: var(--font-display);
  font-weight: 400;
}
/* 和文が入る見出し（staff の2件）は :not() で除外。
   除外しないと Instrument Serif に和文グリフが無く、明朝へフォールバックしてしまう。 */
body.is-kvtype-serif .m_section_title_main:not(.m_section_title_main--ja),
body.is-kvtype-serif .m_category_main:not(.m_category_main--ja) {
  font-family: var(--font-display);
  font-weight: 400;
}

/* =============================================================================
   §12-3 トップKVコピーの3行化に伴う SP レイアウト追従（2026-08-05）
   コピーが「Build / the / WILL」の3行になり、1.25倍と合わせて SP で約66px 背が伸びた。
   KV の縦積み（コピー→心電図→サブコピー→CTA→写真）のうち、心電図と写真の開始位置は
   コピー2行を前提にした固定値だったため、3行だと心電図がコピーに重なり、
   CTAが写真に食い込む。どちらもコピーの実高さに追従させて解消する。
   PC は元から余白に収まっているため据え置き（この節は SP だけを動かす）。
============================================================================= */
:root {
  /* 心電図の縦位置＝コピー下端の少し下。
     コピー高さ = 15vw × --fs-serif-scale × line-height0.9 × 3行 = 15vw × scale × 2.7 */
  --fs-fv-hb-top: calc(107px + 15vw * var(--fs-serif-scale) * 2.7);
  /* 写真の開始位置。元 56vh はコピー2行のときの「CTAの下」。3行ぶん下げる */
  --fs-kv-slider-top-start: 62vh;
}
@media (min-width: 768px) {
  :root {
    /* PC はコピー3行でも CTA 下端が画面内に収まるため、写真の開始位置は元のまま */
    --fs-kv-slider-top-start: 56vh;
    /* 上の :root（SP用の式）はこのブロックより前にある PC 指定を上書きしてしまうため、
       PC の値（42vh）をここで再宣言して元に戻す */
    --fs-fv-hb-top: 42vh;
  }
}

/* =============================================================================
   §12-4 セリフ体の適用を「日付」と「セクション見出しのサブコピー（和文）」へ拡張（2026-08-05）
   - 日付（2026.05.30 など）：数字なので Instrument Serif をそのまま当てる。
   - サブコピー：和文なので Instrument Serif には字がない。和文明朝の Noto Serif JP を受け皿に置く。
     「3つのWILL」のような和欧混在があるため、欧文=Instrument Serif → 和文=Noto Serif JP の順で
     フォールバックさせ、1つの文字列の中で自動的に切り替わるようにしている。
   weight は 400 に揃える。Instrument Serif が 400 しか持たないため、他の太さを指定すると
   欧文だけ合成ボールドになり和文と釣り合わなくなる。
============================================================================= */
:root {
  --font-display-ja: "Instrument Serif", "Noto Serif JP", "Hiragino Mincho ProN", serif;
}
/* 日付：トップINFO・お知らせ一覧・カテゴリ一覧（小）と、記事詳細（大）の両方 */
.m_post_date {
  font-family: var(--font-display);
  font-weight: 400;
}
/* セクション見出しのサブコピー（活動情報／人が、人を育てる／3つのWILL など） */
.m_section_title_sub {
  font-family: var(--font-display-ja);
  font-weight: 400;
}

/* =============================================================================
   §15 FAQ の回答（投稿タイプ「よくある質問」の本文）2026-08-06
   本文はエディタ出力なので wpautop で <p> に包まれる。
   reset.css で p の margin が 0 のため、回答を複数段落で書くと行が続いて読めなくなる。
   段落間だけ空ける（1段落しか書かない場合は見た目が変わらないよう :first-child は据え置き）。
============================================================================= */
.service_faq_content__a .service_faq_txt > * + * {
  margin-top: 0.9em;
}
.service_faq_content__a .service_faq_txt ul,
.service_faq_content__a .service_faq_txt ol {
  padding-left: 1.3em;
  list-style: revert; /* reset.css の list-style:none を戻す（回答で箇条書きを使えるように） */
}

/* =============================================================================
   §14 2026-10-19 速度改善
   ============================================================================= */
/* KV コピーは main.js の出現アニメまで隠す（オープニング無しの訪問で、JS 到着前にコピーが一瞬見えてから消えるのを防ぐ）。
   header-front.php 冒頭の JS が付け、startKvAnimation() が外す。4 秒経っても外れなければ同 JS の保険で外す */
body.is-kv-pending .js_kv_box,
body.is-kv-pending .js_kv_scroll {
  visibility: hidden;
}
/* Font Awesome 撤去に伴うアイコン（functions.php の will_icon() が出すインライン SVG）。<i> の字形と同じ 1em 基準 */
.will-icon {
  display: inline-block;
  height: 1em;
  vertical-align: -0.125em;
  overflow: visible;
}
.fa-stack {
  display: inline-block;
  position: relative;
  width: 2.5em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack .fa-stack-1x {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}