/* =========================================================
   FFA TOP プロトタイプ v3 — editorial / cinematic
   （余白・大型タイポ・写真主役・巨大装飾欧文・スクロール演出）
   出典トークン: design-tokens/tokens.md
   配色: オレンジ #F5700A × ネイビー #0D1F3C / 白基調
   見出し: IBM Plex Sans JP / 本文: Noto Sans JP / 数字英字: Inter
   ========================================================= */

:root {
  --color-primary-600: #D4590A;
  --color-primary-500: #F5700A;
  --color-primary-400: #FF8A35;
  --color-primary-100: #FFF0E3;
  --color-secondary-900: #0D1F3C;
  --color-secondary-700: #1A3A6B;
  --color-secondary-500: #2B5BA8;
  --color-neutral-900: #1A1A1A;
  --color-neutral-700: #444444;
  --color-neutral-500: #777777;
  --color-neutral-300: #BBBBBB;
  --color-neutral-100: #F5F5F5;
  --color-neutral-50:  #FAFAFA;
  --color-white: #FFFFFF;
  --color-line: #06C755;

  /* 2026-07-22 参考sankou-rにフォントを寄せる: 和文=Zen Kaku Gothic New（Google Fonts無料・sankouと同一）／欧文=Montserrat（proxima-nova無料近似）。ヒーロー見出しの --font-display-ja（Shippori Mincho B1）は先方確定のため不変 */
  --font-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1120px;
  --container-narrow: 760px;
  --pad: 24px;

  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 16px 50px rgba(13,31,60,0.12);

  --section-pad: 104px; /* 2026-07-22 余白圧縮 150→104（内部指摘「余白が多い」） */

  --font-display-ja: "Shippori Mincho B1", serif; /* 主役見出し専用。--font-head とは別系統・sec-titleには使わない */

  --fs-label: 13px;
  --fs-h1: clamp(34px, 5vw, 68px);
  --fs-h2: clamp(28px, 3.5vw, 52px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-body: 17px; /* 2026-07-22 本文拡大 16→17（指摘「文字が小さい」・§2規定16px以上内） */
  --lh-body: 1.75; /* 2026-07-22 間延び解消 1.8→1.75 */

  --space-section-lg: 104px; /* = 既存 --section-pad と同値 */
  --space-section-md: 80px;
  --space-section-sm: 48px;

  --hairline: 1px solid rgba(13,31,60,.12);
  --hairline-inverse: 1px solid rgba(255,255,255,.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-neutral-900);
  font-size: 17px;
  line-height: 1.8;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 2026-07-23 和文の折り返しを文節（bunsetsu）境界で行い、モバイルでの語中改行（例:「向いてい／るかも」）を防ぐ。
     word-break は継承するため body に置く。auto-phrase 非対応ブラウザは normal にフォールバック（現状維持・欧文には影響なし）。 */
  word-break: auto-phrase;
}
/* 2026-07-31 今岡様指摘⑥⑨系: 助詞・複合語の結合部（例:「全国各地において」の「に」と「おいて」の間）で
   auto-phraseが機能せず不自然に割れることがある（fluid font-size×固定コンテナ幅で発生・幅により再現/非再現）。
   割れると読みにくい語句だけを明示的に囲んで保護する（多用しない・本当に危険な箇所のみ） */
.no-break { white-space: nowrap; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease, opacity .25s ease; }
em { font-style: normal; color: var(--color-primary-500); font-weight: 700; }

.is-en { font-family: var(--font-en); font-feature-settings: "tnum"; }
.sp-only { display: none; }
.pc-only { display: inline; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 2; }
.container--narrow { max-width: var(--container-narrow); }

/* --- 巨大背景欧文 --- */
.bgtext {
  position: absolute; top: 32px; left: -0.04em; z-index: 0;
  max-width: 100%; overflow: hidden;
  font-size: clamp(80px, 12vw, 190px);
  font-weight: 700; letter-spacing: -.04em;
  color: var(--color-neutral-900);
  opacity: .045;
  line-height: .85; pointer-events: none; user-select: none;
  white-space: nowrap;
}
/* VOICE（暗背景）は白 */
.voice .bgtext { color: var(--color-white); opacity: .05; }

/* 2026-07-22 単調解消: 巨大英字透かしを左上一辺倒にせず、セクションごとに左右・上下を振り分け、
   「同じ入り方の反復」を崩す（CSSのみ・マークアップ非変更・overflow:hiddenで端はクリップ） */
.strength .bgtext,
.achievement .bgtext,
.flow .bgtext { left: auto; right: -0.04em; }
.message .bgtext { left: auto; right: -0.04em; top: auto; bottom: 16px; }
.faq .bgtext { top: auto; bottom: 8px; }


/* --- スクロール演出 --- */
.reveal       { opacity: 0; transform: translateY(28px);  transition: opacity .85s ease, transform .85s ease; }
.reveal-left  { opacity: 0; transform: translateX(-48px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity: 0; transform: translateX( 48px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .voice-scroll-hint::after { animation: none; opacity: 1; }
  .hero-title { animation: none; background-position: 0% 100%; }
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-child(1) { opacity: 1; }
  /* sec-title 文字スタッガー・罫線リストの行スタッガーは下部（Wave3）で定義するが、
     ソース順の後勝ちで opacity:0 に上書きされないよう !important で強制的に読める状態にする */
  .sec-title .char,
  .course-row,
  .voice-row,
  .blog-card--row { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- 下層ページ写真加工（角度カット + デュオトーン） --- */
.photo-doc {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
.photo-doc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.85) contrast(1.1) brightness(.92);
  transition: filter .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.photo-doc::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(245,112,10,.5) 0%, rgba(245,112,10,0) 45%, rgba(13,31,60,.68) 100%);
  mix-blend-mode: color;
  opacity: .9;
  transition: opacity .6s ease;
  pointer-events: none;
}
/* 発色は画面内に入った時点（is-visible）で起こす。ホバーは拡大のみを担う。
   img の grayscale 解除と ::after のデュオトーン退避は2層で1つの効果なので必ず連動させる。 */
.photo-doc.is-visible img { filter: grayscale(0) contrast(1) brightness(1); }
.photo-doc.is-visible::after { opacity: .28; }
.photo-doc:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.05); }
.photo-doc:hover::after { opacity: .28; }
@media (max-width: 600px) {
  .photo-doc { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-doc img,
  .photo-doc::after { transition: none; }
}
/* 小型サムネイル用（顔写真120px角等）。角の切り欠きを控えめにする modifier。
   duotone/hover 演出は .photo-doc 本体を継承する（2026-07 Wave2） */
.photo-doc--sm { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }

/* セクション見出し */
.sec-head { margin-bottom: 52px; text-align: left; }
.sec-en {
  font-size: 13px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--color-primary-500);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 16px;
}
.sec-en::before {
  content: ''; display: block; flex-shrink: 0;
  width: 28px; height: 1.5px; background: currentColor;
}
.sec-title {
  font-family: var(--font-head);
  font-size: 36px; font-weight: 700; letter-spacing: .05em;
  color: var(--color-secondary-900); margin: 0; line-height: 1.4;
}
.sec-lead { color: var(--color-neutral-700); margin: 20px 0 0; max-width: 600px; }

/* 画面幅で改行位置を出し分けるユーティリティ（2026-08-03 新設）。
   今岡様のご指定でPCとスマホの改行位置が異なる箇所があるため、DOMは1本のまま表示だけ切り替える
   （PC用・SP用の二重DOMを作らない＝文言修正が1箇所で済む）。 */
.br-sp { display: none; }
.br-sp-flex { display: none; }
/* ボタン内ラベルを「{コース名}を」「相談する」の2行に必ず割る（2026-08-03 今岡様ご指示⑦）。
   .ffa-button は inline-flex（nowrap）なので、inline-block を並べるだけでは改行されない。
   縦積みのラッパーで包んで2行を確定させる。矢印（::after）はラッパーの右側に残る。 */
.cta-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.45;
}
.cta-chunk { display: block; }
@media (max-width: 768px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
  .br-sp-flex { display: flex; }
}
/* Contact のLINEボタンもスマホだけ2行にする（PCは横幅に余裕があり1行が締まって見える）。
   コース詳細のCTAは 2026-08-03 のご指定どおりPCでも2行のままにする（.line-cta-mid 配下のみ対象）。 */
@media (min-width: 769px) {
  .line-cta-mid .cta-label { flex-direction: row; }
}

/* =========================================================
   ボタン / リンク
   ========================================================= */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-500); color: var(--color-white);
  font-family: var(--font-head); font-weight: 600; letter-spacing: .04em;
  padding: 17px 44px; border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(245,112,10,.32);
}
.btn-cta:hover { background: var(--color-primary-600); }
.btn-cta--header { padding: 11px 26px; font-size: 14px; box-shadow: none; }
.btn-cta--header:hover { transform: none; }

/* --- FFA button system --- */
.ffa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 32px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}
/* コースの相談ボタン等・少し大きめの主要CTA */
.ffa-button--lg { min-height: 60px; padding: 0 60px; font-size: 18px; }
.course-cta-wrap { text-align: center; margin-top: 48px; margin-bottom: 48px; }
.ffa-button--line { background: var(--color-line); color: var(--color-white); }
.ffa-button--internal { background: var(--color-primary-500); color: var(--color-white); }
.ffa-button--ghost {
  background: transparent;
  color: var(--color-secondary-900);
  border: 1px solid currentColor;
}
.ffa-button:hover { transform: translateY(-2px); }
/* どの状態でも下線を出さない（a:hover 等のグローバル下線に負けないよう a.ffa-button で固定） */
a.ffa-button,
a.ffa-button:hover,
a.ffa-button:focus,
a.ffa-button:active,
a.ffa-button:visited { text-decoration: none; }
.ffa-button--block { width: 100%; }
.ffa-button__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-neutral-500);
}

.link-arrow {
  font-family: var(--font-head); font-weight: 600;
  color: var(--color-secondary-900);
  border-bottom: 1px solid var(--color-neutral-300);
  padding-bottom: 4px;
}
.link-arrow:hover { color: var(--color-primary-500); border-color: var(--color-primary-500); }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* 最初からネイビーグラデで帯を作る — 右側の明るい写真でも視認確保 */
  background: linear-gradient(
    to bottom,
    rgba(13,31,60,.82) 0%,
    rgba(13,31,60,.55) 60%,
    rgba(13,31,60,.0) 100%
  );
  transition: background .4s ease, box-shadow .4s ease;
}
/* スクロール後: 白背景 */
.site-header.is-scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(13,31,60,.08), 0 4px 24px rgba(13,31,60,.08);
}
.header-inner {
  display: flex; align-items: center; gap: 40px;
  height: 76px; max-width: 1280px; margin-inline: auto; padding-inline: 32px;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
/* スクロール後に高さ縮小 */
.site-header.is-scrolled .header-inner { height: 64px; }

.logo { display: flex; align-items: center; gap: 10px; }
/* 白抜きロゴと通常ロゴを重ね、ヘッダーの地色に合わせて入れ替える */
.logo-mark {
  position: relative;
  display: block;
  height: 40px;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
.logo-img {
  width: auto; height: 100%; display: block; object-fit: contain;
  transition: opacity .3s ease;
}
.logo-img--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* 白地（スクロール後・下層ページ）では通常ロゴへ */
.site-header.is-scrolled .logo-img--light,
body.is-subpage .logo-img--light { opacity: 0; }
.site-header.is-scrolled .logo-img--dark,
body.is-subpage .logo-img--dark { opacity: 1; }

.site-header.is-scrolled .logo-mark { height: 34px; }
.logo-text { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--color-white); transition: color .3s ease, font-size .4s ease; }

/* ナビ */
.gnav { margin-left: auto; }
.gnav ul { display: flex; gap: 0; }
.gnav a {
  font-family: var(--font-en); font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.88); transition: color .25s ease;
  position: relative; padding-bottom: 3px;
}
/* ホバー下線: オレンジが左から右へスライドイン */
.gnav a::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1.5px;
  background: var(--color-primary-400);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.gnav a:hover { color: var(--color-primary-400); }
.gnav a:hover::after { transform: scaleX(1); }
/* E. スラッシュ区切り */
.gnav li { display: flex; align-items: center; }
.gnav li::before {
  content: '/';
  font-family: var(--font-en); font-size: 15px; font-weight: 300;
  color: var(--color-primary-400); opacity: .7;
  margin: 0 10px;
}
.gnav ul::after {
  content: '/';
  font-family: var(--font-en); font-size: 15px; font-weight: 300;
  color: var(--color-primary-400); opacity: .7;
  margin-left: 10px;
}
/* スクロール後: 白背景なのでテキストをネイビーに（nav-toggle はドロワー節でまとめて指定） */
.site-header.is-scrolled .logo-text { color: var(--color-secondary-900); }
.site-header.is-scrolled .gnav a { color: var(--color-secondary-900); }
.site-header.is-scrolled .gnav a:hover { color: var(--color-primary-500); }

/* =========================================================
   ヒーロー（フルスクリーン写真・シネマティック）
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  overflow: hidden;
  --hero-panel-p: 0;
  background: var(--color-secondary-900);
}
/* 写真はビューポート高さに収める（下部のネイビーゾーンには写り込まない） */
.hero-media {
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  height: calc(100vh + 32px);
  height: calc(100svh + 32px);
  z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: hero-crossfade 18s ease-in-out infinite;
}
.hero-slide:nth-child(1) { opacity: 1; animation-delay:  0s; }
.hero-slide:nth-child(2) {            animation-delay:  6s; }
.hero-slide:nth-child(3) {            animation-delay: 12s; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hero-crossfade {
  0%   { opacity: 1; }
  28%  { opacity: 1; }   /* 約5s 表示 */
  39%  { opacity: 0; }   /* 約2s でフェードアウト */
  96%  { opacity: 0; }
  100% { opacity: 1; }   /* ループ接続 */
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgba(13,31,60,.5), rgba(13,31,60,.5)),
    linear-gradient(108deg, transparent 50%, rgba(245,112,10,.08) 65%, rgba(245,112,10,.14) 100%);
  pointer-events: none;
}
/* 左側：スクロールで右に広がるネイビーパネル */
.hero-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,20,72,.12) 0%, rgba(13,31,60,.08) 55%, rgba(13,31,60,.04) 100%);
  clip-path: polygon(
    0 0,
    calc(63% + 37% * var(--hero-panel-p)) 0,
    calc(47% + 53% * var(--hero-panel-p)) 100%,
    0 100%
  );
  will-change: clip-path;
}
/* 下部：サブテキスト・ボタン背後を暗くして炎から視認性を確保 */
.hero-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,31,60,.18) 0%, rgba(13,31,60,.08) 30%, transparent 58%);
  pointer-events: none;
}
.hero-side {
  position: absolute; right: 32px; top: 50%; z-index: 2;
  transform: rotate(90deg) translateX(50%); transform-origin: right center;
  font-size: 13px; letter-spacing: .28em; color: rgba(255,255,255,.8); font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  width: min(600px, 80%);
  margin-left: 10%;
  margin-right: auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(6vh + 70px);
}
.hero-about { position: relative; z-index: 2; width: 100%; padding-block: 100px 80px; }
.hero-stats { position: relative; z-index: 2; width: 100%; padding-block: 60px 120px; border-top: 1px solid rgba(255,255,255,.08); }
.hero-en { font-size: 15px; font-weight: 600; letter-spacing: .32em; color: var(--color-primary-400); margin: 0 0 28px; text-transform: uppercase; }
.hero-cat {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255,255,255,.78);
}
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(40px, 4.6vw, 68px); font-weight: 700; line-height: 1.2; letter-spacing: .04em;
  margin: 0 0 24px;
  /* 炎テキスト: グラデーションを文字形でクリップ */
  background-image: linear-gradient(
    to top,
    #FF2800 0%,
    #FF6400 14%,
    #FF9200 27%,
    #FFD000 40%,
    #FFFFFF 56%,
    #FFFFFF 100%
  );
  background-size: 100% 260%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fire-flicker 6s ease-in-out infinite;
}
.hero-title::after {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
  transform: scaleX(0);
  transform-origin: left center;
  margin-top: 16px;
  border-radius: 2px;
}
body.splash-done .hero-title {
  opacity: 1;
}
body.splash-done .hero-title::after {
  animation: heroUnderline .55s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes heroUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fire-flicker {
  0%   { background-position: 0% 100%; }
  18%  { background-position: 0%  83%; }
  33%  { background-position: 0%  97%; }
  51%  { background-position: 0%  76%; }
  65%  { background-position: 0%  90%; }
  80%  { background-position: 0%  78%; }
  93%  { background-position: 0%  95%; }
  100% { background-position: 0% 100%; }
}
.hero-sub { font-size: 20px; font-weight: 700; line-height: 1.8; color: rgba(255,255,255,.97); margin: 0 0 12px; text-shadow: 0 2px 20px rgba(0,0,0,.62), 0 4px 40px rgba(0,0,0,.35); }
.hero-sub em { color: var(--color-primary-400); }
.hero-note { margin: 0 0 10px; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.86); }
.hero-trust { margin: 0 0 24px; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72); }
.hero-actions { display: flex; gap: 12px; align-items: stretch; }
.hero-actions .ffa-button { flex: 1 1 0; padding-inline: 20px; font-size: 14px; }
.hero-content > .ffa-button__note { color: rgba(255,255,255,.72); }
.hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,1); z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero-scroll::after { content: ""; display: block; width: 1px; height: 48px; background: linear-gradient(rgba(255,255,255,1), transparent); margin: 12px auto 0; animation: scrollPulse 2s ease-in-out infinite; }
/* Hero底部→次セクションへのグラデーションフェード */
.hero-veil {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 42vh; z-index: 2; pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,.55) 68%,
    rgba(255,255,255,.85) 84%,
    #fff 100%
  );
}
@keyframes scrollPulse { 0%,100% { opacity: .3; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }


/* =========================================================
   炎ヘイズ（hero全体の薄いモヤ）
   ========================================================= */
.flame-haze {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; user-select: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 80%,
    transparent 100%
  );
}
.flame-haze__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.18;
  filter: blur(8px);
}
.flame-haze--footer {
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 75%,
    transparent 100%
  );
}
.flame-haze--footer .flame-haze__video { opacity: 0.35; filter: blur(6px); }

/* =========================================================
   ステートメント（About FFA）— ネイビー背景
   ========================================================= */
.statement { position: relative; padding-block: 88px 64px; overflow: visible; z-index: 2; background: var(--color-secondary-900); }
.statement .bgtext { color: var(--color-white); opacity: .05; }
.statement .sec-title { color: var(--color-white); }
.statement-inner {
  display: grid; grid-template-columns: 1fr; gap: 0; align-items: center;
}
.statement-left { position: relative; }
.statement-left .sec-en { margin-bottom: 20px; }
.statement-big {
  display: block;
  font-family: var(--font-en); font-size: clamp(120px, 18vw, 260px);
  font-weight: 900; line-height: .85; letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,112,10,.30);
  user-select: none; pointer-events: none;
  margin-top: 8px;
  position: relative; z-index: 2;
}
.statement-right { position: relative; }
.statement-text {
  font-family: var(--font-head);
  font-size: 23px; font-weight: 500; line-height: 1.95; letter-spacing: .04em;
  color: rgba(255,255,255,.88); margin: 0;
}

/* =========================================================
   実績（大型数字）— 中央を炎オレンジで強調
   ========================================================= */
.stats { background: var(--color-secondary-900); padding-block: 0 88px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0; align-items: end; }
.stat { text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: rgba(255,255,255,.1); }
.stat-num { display: flex; align-items: flex-end; justify-content: center; min-height: 110px; font-weight: 800; line-height: 1; font-size: 96px; color: var(--color-primary-500); letter-spacing: -.01em; user-select: none; }
.stat-num--ja { font-family: var(--font-head); font-size: 96px; color: var(--color-primary-500); }
.stat-plus { color: rgba(255,255,255,.45); font-size: 60px; }
.stat-label { display: block; font-size: 16px; color: rgba(255,255,255,.7); margin-top: auto; padding-top: 20px; letter-spacing: .04em; font-weight: 600; }

/* =========================================================
   STRENGTH — 写真と本文の交互スタック
   ========================================================= */
.strength {
  position: relative;
  background: var(--color-neutral-50);
  padding-block: var(--space-section-lg);
  overflow: hidden;
}
.strength .container { position: relative; z-index: 1; }
.strength .sec-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: left;
}
.strength-list {
  display: grid;
  gap: clamp(56px, 6vw, 88px);
}
.strength-card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
}
.strength-card-media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.strength-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 2026-07-30 今岡様指摘②: 縦長写真2枚を並べる構成（Strength 03のみ）。
   2026-08-01 スマホのモックアップに入れて見せる形へ変更（Hayato指示）。
   端末フレームの高さでメディア領域の高さが決まるため、3/2の枠は解除する。 */
.strength-card-media--duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  aspect-ratio: auto;
  padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px);
  background: linear-gradient(155deg, #eff2f7 0%, #dee3ec 100%);
}
/* picture を端末の筐体（ベゼル）として使う */
.strength-card-media--duo picture {
  display: block;
  flex: 0 0 auto;
  width: clamp(118px, 14vw, 208px);
  aspect-ratio: 740 / 1511;
  padding: clamp(4px, 0.55vw, 9px);
  background: #15171c;
  border-radius: clamp(16px, 1.8vw, 30px);
  box-shadow: 0 20px 44px rgba(15, 20, 32, .30), 0 3px 8px rgba(15, 20, 32, .20);
  overflow: hidden;
}
.strength-card-media--duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(11px, 1.3vw, 22px);
}
.strength-card:nth-child(even) .strength-card-media { order: 2; }
/* 2026-07-22 単調解消: 写真を左右交互にセクション端へブリード（エディトリアル／様式F語彙）。
   .strength は overflow:hidden の全幅セクションなので端でクリップされ横スクロールは出ない。
   左右マージンが確保される 1200px 以上でのみ適用（それ未満は通常グリッド）。 */
@media (min-width: 1200px) {
  .strength-card { gap: clamp(48px, 5vw, 72px); }
  .strength-card:nth-child(odd) .strength-card-media {
    margin-left: calc((var(--container-max) - 100vw) / 2 - var(--pad));
  }
  .strength-card:nth-child(even) .strength-card-media {
    margin-right: calc((var(--container-max) - 100vw) / 2 - var(--pad));
  }
  /* モックアップ構成は端末が画面外へずれるためブリードさせない（2026-08-01） */
  .strength-card:nth-child(odd) .strength-card-media--duo,
  .strength-card:nth-child(even) .strength-card-media--duo {
    margin-left: 0;
    margin-right: 0;
  }
}
.strength-card-no {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(72px, 8vw, 112px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.02em;
  color: var(--color-primary-500);
  margin-bottom: 20px;
}
.strength-card-body { min-width: 0; }
.strength-card-en {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-primary-500);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.strength-card-en::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}
.strength-card-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-secondary-900);
  margin: 0 0 20px;
  letter-spacing: .03em;
}
.strength-card-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-neutral-900);
  margin: 0;
}
.field-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.field-tags li { font-family: var(--font-head); font-size: 13px; font-weight: 500; padding: 6px 16px; border: 1px solid var(--color-neutral-300); border-radius: 0; color: var(--color-secondary-900); }

/* =========================================================
   コース — 薄オレンジ背景・カード縦ずれ
   ========================================================= */
.course {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
  background: linear-gradient(158deg, #B84208 0%, #D4590A 60%, #E06510 100%);
  z-index: 8;
}
.course .bgtext { color: var(--color-white); opacity: .05; }
.course .sec-en { color: rgba(255,255,255,.7); }
.course .sec-en::before { background: rgba(255,255,255,.7); }
.course .sec-title { color: var(--color-white); }
.course .sec-lead { color: var(--color-white); font-size: 18px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 900px;
  margin-inline: auto;
}
.course-card {
  background: var(--color-white); border: var(--hairline-inverse);
  border-radius: var(--radius-lg); padding: 48px 36px;
  box-shadow: none;
  display: flex; flex-direction: column;
  min-height: 540px;
  transition: border-color .25s ease;
}
.course-card:hover { border-color: rgba(255,255,255,.38); }

/* フィーチャードカード（画像背景） */
.course-card--featured {
  position: relative; overflow: hidden;
  background: var(--color-secondary-900);
  padding: 0;
}
.course-card__bg-wrap {
  position: absolute; inset: 0; z-index: 0;
}
.course-card__bg-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,20,.12) 0%, rgba(5,11,20,.48) 52%, rgba(5,11,20,.9) 100%);
}
.course-card__bg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.course-card--featured:hover .course-card__bg { transform: scale(1.025); }
.course-card__body {
  position: relative; z-index: 1;
  padding: 44px 36px 40px;
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.course-card--featured .course-en {
  color: var(--color-primary-400);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: .16em;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.course-card--featured .course-name {
  color: var(--color-white); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.45; letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  margin-bottom: 20px;
}
.course-card--featured .course-desc {
  color: rgba(255,255,255,.92); font-size: var(--fs-body); line-height: var(--lh-body);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  margin-bottom: 28px;
}
.course-card--featured .link-arrow {
  color: var(--color-primary-400); border-color: var(--color-primary-400);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.course-card--featured .link-arrow:hover { color: var(--color-primary-400); border-color: var(--color-primary-400); }
/* カード全体をリンクにする（article→a タグ前提） */
a.course-card { cursor: pointer; text-decoration: none; }
.course-en { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--color-primary-500); margin-bottom: 18px; }
.course-name { font-family: var(--font-head); font-size: 23px; font-weight: 700; color: var(--color-secondary-900); margin: 0 0 16px; }
.course-desc { font-size: 16px; line-height: 1.85; color: var(--color-neutral-900); margin: 0 0 32px; flex-grow: 1; }

/* サブカード（2・3枚目）の写真ヘッダー */
.course-card__header-img {
  height: 180px;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -1px -1px 0;
  flex-shrink: 0;
}
.course-card__header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .6s ease;
  filter: brightness(.82);
}
.course-card:hover .course-card__header-img img {
  transform: scale(1.05);
  filter: brightness(.92);
}
.course-card__sub-body {
  padding: 28px 32px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =========================================================
   代表メッセージ（写真大きく・左右分割）
   ========================================================= */
.message {
  position: relative;
  padding-block: var(--section-pad);
  overflow: hidden;
  background: var(--color-white);
  z-index: 7;
}
.message-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
  margin-top: 48px;
}
.message-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.message-media {
  margin: 0;
  overflow: hidden;
}
.message-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* about代表挨拶: 非対称5:7（トップの.message-innerは変更しない・2026-07 Wave3） */
.message-inner--split { grid-template-columns: 5fr 7fr; gap: 64px; }
.message-panel { position: relative; display: flex; flex-direction: column; justify-content: center; max-width: var(--container-narrow); }
.message-quote {
  font-family: var(--font-display-ja); font-size: clamp(32px, 3.2vw, 44px); font-weight: 700; line-height: 1.6;
  color: var(--color-secondary-900); letter-spacing: .03em;
  margin: 0 0 44px;
}
.message-text { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-900); margin: 0 0 28px; }
.message-cta { align-self: flex-start; margin-top: 12px; }
.message-name { display: flex; flex-direction: column; gap: 6px; }
.message-role { font-size: 13px; color: var(--color-neutral-500); }
.message-person { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--color-secondary-900); }

/* =========================================================
   合格者の声 — ネイビー背景でコントラスト
   ========================================================= */
/* VOICEセクション：stickyスクロール型 */
.voice-scroll-wrap {
  /* 高さはJSで動的に設定 */
  position: relative;
  z-index: 4;
}
.voice {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  background: var(--color-secondary-900);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 104px;
  overflow: hidden;
}
.voice .container { position: relative; z-index: 1; padding-inline: 0; max-width: none; }
.voice .sec-head {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad);
  margin-bottom: 48px;
  text-align: left;
}
.voice .sec-en { color: var(--color-primary-400); }
.voice .sec-title { color: var(--color-white); }

/* 横スクロールエリア */
.voice-list-outer { overflow: hidden; }
.voice-list {
  display: flex; flex-wrap: nowrap;
  gap: 56px;   /* 箱枠を外したぶん、余白で証言どうしを分ける（sankou-r的なフラット編集） */
  will-change: transform;
}
.voice-card {
  flex: 0 0 440px;
  min-width: 0;
  /* 箱枠・塗りを外し、余白と罫線で見せるフラット編集（脱カード） */
  padding: 0;
  display: flex;
  flex-direction: column;
}
.voice-card:first-child {
  margin-left: max(var(--pad), calc((100vw - var(--container-max)) / 2 + var(--pad)));
}
.voice-list::after { content: ''; display: block; flex: 0 0 var(--pad); }

/* 写真前面：縦ポートレート＋引用を横並び、人物名を主役にした証言カード */
.voice-top { display: flex; gap: 20px; align-items: flex-start; margin-bottom: auto; }
.voice-portrait {
  position: relative;
  flex: 0 0 212px;
  width: 212px;
  height: 298px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.voice-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.voice-portrait::after { /* 下端をネイビーに落として写真の質感を全カードで統一 */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(13,31,60,.4) 100%);
}
.voice-quote-col { flex: 1; min-width: 0; }
.voice-qdeco {
  font-family: var(--font-en);
  font-size: 44px;
  line-height: .7;
  color: var(--color-primary-400);
  display: block;
  margin-bottom: 12px;
}
.voice-quote {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.8;
  color: rgba(255,255,255,.95);
  margin: 0;
}
.voice-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.voice-name {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.voice-name span { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 2px; }
.voice-dept {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-primary-400);
  margin: 6px 0 0;
  line-height: 1.4;
}
.voice-dept-ja { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6); margin-top: 2px; }
.voice-more {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(245,112,10,.4);
  padding-bottom: 2px;
  white-space: nowrap;
}
.voice-more:hover { color: var(--color-primary-500); border-color: var(--color-primary-500); }

/* =========================================================
   CTA（写真背景・ネイビーオーバーレイ）
   ========================================================= */
.cta { position: relative; color: var(--color-white); padding-block: var(--section-pad); overflow: hidden; }
.cta-media { position: absolute; inset: 0; z-index: 0; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(13,31,60,.92) 0%, rgba(13,31,60,.72) 60%, rgba(120,40,0,.65) 100%);
}
.cta-inner { text-align: center; }
.cta-inner .sec-en { text-align: center; }
.cta-title { font-family: var(--font-head); font-size: 42px; font-weight: 700; line-height: 1.4; color: var(--color-white); margin: 16px 0 20px; letter-spacing: .03em; }
.cta-lead { font-size: 18px; color: rgba(255,255,255,.94); margin: 0 0 44px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.cta-line { box-shadow: 0 14px 44px rgba(6,199,85,.32); }

/* =========================================================
   D. スクロール進捗バー（右端縦ライン）
   ========================================================= */
#scroll-progress {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  height: 36vh; width: 1px; z-index: 90;
  background: rgba(255,255,255,.12);
  transition: background .3s ease;
}
.is-scrolled ~ #scroll-progress,
body.has-light #scroll-progress { background: rgba(13,31,60,.12); }

#scroll-bar {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 0%;
  background: var(--color-primary-500);
}
#scroll-dot {
  position: absolute; left: 50%; top: 0%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary-500);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(245,112,10,.9);
}
@media (max-width: 900px) { #scroll-progress { display: none; } }

/* =========================================================
   C. 縦書きセクションラベル
   ========================================================= */

/* =========================================================
   B. フッター全面リデザイン
   ========================================================= */
.site-footer {
  background: #050b14;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  padding-top: 0;
  z-index: 11;
}

.footer-cta-wrap {
  position: relative; z-index: 1;
  text-align: center; padding: 100px 24px 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; width: 100%;
}

.footer-bgtext {
  position: absolute; inset: 0;
  font-family: var(--font-en); font-weight: 900;
  font-size: clamp(100px, 18vw, 220px); line-height: .85;
  letter-spacing: -.02em; text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0;
  user-select: none;
}
.footer-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .5em;
  color: var(--color-primary-400); margin: 0 0 20px;
}
.footer-lead {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.8vw, 42px); font-weight: 700;
  color: rgba(255,255,255,.9); margin: 0 0 20px; letter-spacing: .03em;
  line-height: 1.5;
}
.footer-desc {
  font-size: 17px; line-height: 1.85;
  color: rgba(255,255,255,.55); margin: 0 0 44px;
}
.footer-cta-btn { font-size: 18px; padding: 20px 60px; }

.footer-bottom {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
  padding-top: 32px;
}
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.logo-img--footer { height: 36px; width: auto; }
.footer-company { font-size: 13px; color: rgba(255,255,255,.45); }
.footer-nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); letter-spacing: .04em; transition: color .25s ease; }
.footer-nav a:hover { color: var(--color-primary-400); }
.footer-sns { display: flex; gap: 8px; }
.footer-sns a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.12);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.footer-sns a:hover {
  color: var(--color-primary-400);
  border-color: var(--color-primary-400);
  background: rgba(245,112,10,.08);
}
/* 規約リンクとコピーライトを1行に収める（フッター最下段） */
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  padding-block: 20px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.copyright { font-size: 12px; color: rgba(255,255,255,.18); letter-spacing: .12em; margin: 0; }

@media (max-width: 768px) {
  .footer-meta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   受講の流れ（FLOW）— 大番号とhairlineで順序を示す
   ========================================================= */
.flow {
  position: relative;
  padding-block: var(--space-section-lg);
  overflow: hidden;
  z-index: 9;
  background: var(--color-neutral-100);
}
.flow .sec-title,
.faq--top .sec-title { font-size: var(--fs-h2); }
.flow .sec-en,
.faq--top .sec-en { font-size: var(--fs-label); }
.flow-list {
  --flow-gap: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--flow-gap);
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: start;
}
.flow-item {
  position: relative;
  padding-top: 28px;
  border-top: var(--hairline);
}
.flow-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -1px;
  right: calc(var(--flow-gap) * -1);
  width: var(--flow-gap);
  height: 1px;
  background: rgba(13,31,60,.12);
}
.flow-no {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-en);
  font-size: clamp(64px, 6vw, 84px);
  font-weight: 900;
  line-height: .85;
  color: var(--color-primary-500);
}
.flow-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.55; color: var(--color-secondary-900); margin: 0 0 12px; }
.flow-text { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-900); margin: 0; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { position: relative; padding-block: var(--section-pad); background: var(--color-white); overflow: hidden; z-index: 10; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid rgba(13,31,60,.12);
  border-radius: var(--radius-md);
  padding: 0 28px;
  box-shadow: 0 6px 24px rgba(13,31,60,.05);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover {
  border-color: rgba(245,112,10,.35);
  box-shadow: 0 8px 32px rgba(13,31,60,.1);
}
.faq-q {
  display: block; width: 100%; text-align: left;
  font-family: var(--font-head); font-size: 18px; font-weight: 600;
  color: var(--color-secondary-900); background: none; border: none;
  padding: 26px 40px 26px 0; cursor: pointer; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en); font-size: 26px; font-weight: 400;
  color: var(--color-primary-500);
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
/* アニメーション用ラッパー */
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity: 0;
}
.faq-a.is-open { opacity: 1; }
.faq-a[hidden] { display: block !important; }
.faq-a-inner { padding: 0 0 28px; color: var(--color-neutral-900); font-size: 16px; line-height: 2.0; }
.faq-a-inner p { margin: 0; }

/* TOP FAQはカード化せず、罫線と余白でグルーピングする */
.faq--top { padding-block: var(--space-section-lg); }
.faq--top .faq-list { gap: 0; border-top: var(--hairline); }
.faq--top .faq-item {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.faq--top .faq-item:hover { border-color: rgba(13,31,60,.12); box-shadow: none; }
.faq--top .faq-q {
  min-height: 72px;
  padding: 22px 56px 22px 0;
  line-height: 1.6;
}
.faq--top .faq-q::after { right: 4px; }
.faq--top .faq-a-inner {
  padding: 0 56px 24px 0;
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.faq--top .faq-a-inner a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.faq--top .faq-a-inner a:hover { color: var(--color-primary-500); }

/* =========================================================
   レスポンシブ — タブレット
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --section-pad: 88px;
    --space-section-lg: 88px;
    --space-section-md: 64px;
    --space-section-sm: 40px;
  }
  .strength-row { gap: 48px; }
  .course-list { grid-template-columns: 1fr; grid-template-rows: auto; max-width: 680px; margin-inline: auto; }
  .course-card { min-height: 500px; }
  .course-card:nth-child(1) { grid-row: auto; padding: 0; background: var(--color-secondary-900); border-color: rgba(255,255,255,.14); box-shadow: none; }
  .course-card:nth-child(1) .course-name { font-size: clamp(24px, 3.4vw, 30px); }
  .course-card:nth-child(1) .course-desc { font-size: var(--fs-body); line-height: var(--lh-body); }
  /* voice-listはflex（stickyスクロール）なのでgrid上書きなし */
  .stat-num { font-size: 72px; }
  .stat:nth-child(2) .stat-num { font-size: 96px; }
  .flow-list { grid-template-columns: 1fr 1fr; gap: 48px 36px; }
  .flow-item:not(:last-child)::after { display: none; }
  .statement-inner { grid-template-columns: 1fr 1.4fr; gap: 48px; }
  .statement-big { font-size: clamp(100px, 18vw, 200px); }
}

/* =========================================================
   ハンバーガーボタン / ドロワー
   ========================================================= */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 0; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
  transform-origin: center;
}
/* ヘッダーが白地のとき（スクロール後・下層ページ）はネイビーに。
   ドロワーはヘッダーより下(z-index 99 < 100)に潜るので、開いている間もヘッダーは白地のまま */
.site-header.is-scrolled .nav-toggle span,
body.is-subpage .nav-toggle span { background: var(--color-secondary-900); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  pointer-events: none; visibility: hidden;
}
.drawer.is-open { pointer-events: auto; visibility: visible; }
/* 2026-08-04 「TOP」追加で項目が7つになり、小さい端末でCTAが画面外へはみ出した。
   高さは 100dvh 基準（iOSのアドレスバー分を含めない）とし、項目の余白は画面高に応じて
   可変にして、7〜8項目までは必ずCTAごと1画面に収まるようにする。
   それでも足りない端末（項目をさらに増やした場合など）は、ナビ側だけスクロールさせる。 */
.drawer-inner {
  position: absolute; top: 0; right: 0;
  width: min(320px, 86vw);
  height: 100%;
  height: 100dvh;
  background: var(--color-secondary-900);
  padding: clamp(72px, 11vh, 100px) 36px clamp(24px, 4vh, 48px);
  display: flex; flex-direction: column; gap: clamp(20px, 4vh, 48px);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.drawer.is-open .drawer-inner { transform: translateX(0); }
.drawer-nav {
  display: flex; flex-direction: column; gap: 0;
  min-height: 0;              /* flex子が縮めるようにする（はみ出しの主因） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-nav li a {
  display: block;
  font-family: var(--font-en); font-size: 17px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  padding: clamp(9px, 1.5vh, 16px) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s ease, padding-left .2s ease;
}
.drawer-nav li a:hover { color: var(--color-primary-400); padding-left: 6px; }
.drawer-cta { width: 100%; text-align: center; flex-shrink: 0; }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(13,31,60,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(2px);
}
.drawer.is-open ~ .drawer-overlay { opacity: 1; pointer-events: auto; }

/* =========================================================
   スプラッシュ
   ========================================================= */
#splash {
  position: fixed; inset: 0; z-index: 99999;
  background-color: #0D1F3C;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* 2026-07-22 演出中もヒーローCTAへのクリックを遮らない（初回CVR配慮・審査差し戻し対応） */
  pointer-events: none;
  /* 退場は要素ごと消すのではなく背景色だけを抜く。
     キャッチコピーは不透明のままヒーロー見出しの位置へ変位するため。 */
  transition: background-color .45s ease;
}
/* 紺 → 透明。下に敷かれたヒーロー写真がそのまま現れる */
#splash.is-launch {
  background-color: transparent;
  pointer-events: none;
}
#splash.is-launch .splash-logo-img,
#splash.is-launch .splash-tagline {
  opacity: 0;
  transition: opacity .45s ease;
}

/* グリッド */
.splash-grid {
  position: absolute; inset: 0;
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.7,0,.3,1), opacity .4s ease .15s;
}
.splash-grid.is-collapse { transform: scale(0.02); opacity: 0; }

.splash-vline,
.splash-hline {
  position: absolute; background: rgba(245,112,10,.22); opacity: 0;
}
.splash-vline {
  width: 1px; height: 100%;
  transform: scaleY(0); transform-origin: center top;
  animation: splashVIn .45s cubic-bezier(.16,1,.3,1) forwards;
}
.splash-hline {
  height: 1px; width: 100%;
  transform: scaleX(0); transform-origin: center left;
  animation: splashHIn .45s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes splashVIn {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes splashHIn {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ロゴ */
.splash-logo {
  position: relative; z-index: 2; text-align: center;
  opacity: 0; transform: scale(0.68);
  transition: opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.splash-logo.is-visible { opacity: 1; transform: scale(1); }

.splash-ffa {
  display: block;
  font-family: "Bebas Neue", sans-serif; font-size: 140px; line-height: 1;
  color: #fff; letter-spacing: .12em;
  text-shadow:
    0 0 30px rgba(245,112,10,1),
    0 0 80px rgba(245,112,10,.7),
    0 0 160px rgba(245,112,10,.35);
}
.splash-tagline {
  display: block;
  font-family: "Bebas Neue", sans-serif; font-size: 13px; letter-spacing: .5em;
  color: rgba(255,255,255,.4); margin-top: 12px;
}

/* スプラッシュ中はheroアニメーション停止（hero-titleはアニメーションなしのため除外） */
body:not(.splash-done) .hero-sub,
body:not(.splash-done) .hero-actions,
body:not(.splash-done) .hero-scroll {
  animation-play-state: paused;
}
body:not(.splash-done) .hero-title {
  opacity: 0;
}

/* =========================================================
   E. カスタムカーソル（マウス環境のみ）
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button { cursor: none; }

  #cursor-dot {
    position: fixed; top: -20px; left: -20px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-primary-500);
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: left, top;
  }
  #cursor-ring {
    position: fixed; top: -20px; left: -20px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid rgba(245,112,10,.5);
    pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width .28s ease, height .28s ease,
                border-color .25s ease, background .25s ease;
    will-change: left, top;
  }
  body.cursor-hover #cursor-ring {
    width: 44px; height: 44px;
    border-color: var(--color-primary-400);
    background: rgba(245,112,10,.06);
  }
}

/* =========================================================
   C. ヒーロー時差入場
   ========================================================= */
.hero-en {
  opacity: 0;
  animation: heroFadeUp .7s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.hero-title {
  opacity: 0;
}
.hero-sub {
  opacity: 0;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) .85s forwards;
}
.hero-actions {
  opacity: 0;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: heroScrollFade .8s ease 1.6s forwards;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroScrollFade {
  to { opacity: 1; }
}

/* 2026-07-22 reduced-motion時、JSスプラッシュ演出（splash-done付与）を待たずに
   ヒーロー要素を可視化する。splash-gating（body:not(.splash-done) …）と同一詳細度で
   ソース順を後ろに置き上書きする（§8: モーション無効環境でも最終状態が読めること）。 */
@media (prefers-reduced-motion: reduce) {
  body:not(.splash-done) .hero-en,
  body:not(.splash-done) .hero-title,
  body:not(.splash-done) .hero-sub,
  body:not(.splash-done) .hero-actions,
  body:not(.splash-done) .hero-scroll {
    opacity: 1;
    animation: none;
  }
}

/* =========================================================
   C. sec-title 文字スタッガー
   ========================================================= */
.sec-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.sec-title.is-visible .char {
  opacity: 1;
  transform: none;
}

/* =========================================================
   罫線リストの reveal スタッガー（CSSのみ・2026-07 Wave3）
   course-row / voice-row / blog-card--row は個別に observe せず、祖先の
   .reveal 要素が .is-visible を受け取ったタイミングで transition-delay により
   順番に立ち上がる（JS変更なし・sub.js 側の追加実装は不要）。
   ========================================================= */
.course-row,
.voice-row,
.blog-card--row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
/* 行自身が is-visible を受け取る経路と、祖先 .reveal 経由の経路の両方で表示する。
   祖先だけに依存させると、.reveal の付け忘れや背の高いセクションで行が永久に消える。 */
.reveal.is-visible .course-row,
.reveal.is-visible .voice-row,
.reveal.is-visible .blog-card--row,
.course-row.is-visible,
.voice-row.is-visible,
.blog-card--row.is-visible { opacity: 1; transform: none; }

.course-row:nth-child(1), .voice-row:nth-child(1), .blog-card--row:nth-child(1) { transition-delay: .05s; }
.course-row:nth-child(2), .voice-row:nth-child(2), .blog-card--row:nth-child(2) { transition-delay: .1s; }
.course-row:nth-child(3), .voice-row:nth-child(3), .blog-card--row:nth-child(3) { transition-delay: .15s; }
.course-row:nth-child(4), .voice-row:nth-child(4), .blog-card--row:nth-child(4) { transition-delay: .2s; }
.course-row:nth-child(5), .voice-row:nth-child(5), .blog-card--row:nth-child(5) { transition-delay: .25s; }
.course-row:nth-child(n+6), .blog-card--row:nth-child(n+6) { transition-delay: .3s; }


/* =========================================================
   レスポンシブ — モバイル
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --section-pad: 64px;
    --space-section-lg: 64px;
    --space-section-md: 48px;
    --space-section-sm: 32px;
  }
  .ffa-button { min-height: 52px; }
  .sp-only { display: inline; }
  .pc-only { display: none; }

  /* 2026-07-22 ハードコード余白のモバイル圧縮（従来160/140pxのまま縮まなかった帯を揃える） */
  .worry { padding-block: 64px 56px; }
  .line-cta-mid { padding-block: 64px 56px; }
  .voice { padding-block: 64px; }
  .statement { padding-block: 56px 40px; }
  .stats { padding-block: 0 56px; }

  .gnav { display: none; }
  .btn-cta--header { display: none; }
  .nav-toggle { display: flex; }
  .header-inner { gap: 14px; padding-inline: 20px; height: 64px; }
  .logo-text { font-size: 15px; }

  .hero { min-height: 100svh; }
  /* モバイルは斜めパネル無効→全面グラデーションに戻す */
  .hero-overlay { background: rgba(13,31,60,.5); }
  .hero-overlay::before {
    clip-path: none;
    background:
      linear-gradient(0deg, rgba(13,31,60,.16) 0%, rgba(13,31,60,.08) 40%, transparent 70%);
  }
  .hero-overlay::after { display: none; }
  .hero-side { display: none; }
  .hero-scroll { display: none; }
  .hero-content { width: 100%; max-width: none; margin: 0; padding: 96px 24px 48px; justify-content: center; }
  .hero-title { font-size: clamp(34px, 10.6vw, 42px); }
  .hero-sub { font-size: 16px; }
  .hero-sub br { display: none; }
  /* 2026-08-03 今岡様ご指示④で「一人で抱え込まず〜」はスマホでも指定改行にする方針へ変更。
     2026-07-23 に入れていた `.line-cta-mid-desc br { display:none }` は撤去した。 */
  /* ① ヒーロー背景は人物の顔が右寄りにあるため、縦長のスマホでは右へ寄せて顔が入るようにする
     （既定の center だと誰の顔も映らない・2026-08-03 今岡様ご指摘） */
  .hero-slide img { object-position: 74% center; }
  .hero-note { font-size: 15px; }
  .hero-trust { font-size: 13px; margin-bottom: 20px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .ffa-button { width: 100%; flex-basis: auto; }

  .sec-head { margin-bottom: 48px; }
  .sec-title { font-size: 27px; }
  .statement-inner { grid-template-columns: 1fr; gap: 32px; }
  .statement-big { font-size: clamp(80px, 28vw, 140px); }
  .statement-text { font-size: 18px; line-height: 2; }

  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat + .stat::before { display: none; }
  .stat-num { font-size: 80px; }
  .stat:nth-child(2) .stat-num { font-size: 104px; }
  .voice-card:nth-child(2),
  .voice-card:nth-child(3) { margin-top: 0; }

  /* strength: 番号・見出し→本文→写真の縦積み。
     2026-08-03 今岡様ご指示②で「写真→文章」から「文章→写真」へ変更
     （本文を読んでから、その内容を裏づける写真が出てくる順にする）。 */
  .strength-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .strength-card .strength-card-body,
  .strength-card:nth-child(even) .strength-card-body { order: 1; }
  .strength-card .strength-card-media,
  .strength-card:nth-child(even) .strength-card-media { order: 2; }
  .strength-card-no { font-size: clamp(68px, 22vw, 92px); margin-bottom: 16px; }
  .strength-card-title { font-size: clamp(22px, 6.4vw, 27px); }

  /* voice-listはflex（stickyスクロール）なのでgrid上書きなし。モバイルはネイティブ横スクロール。
     2026-08-03 今岡様ご指示③: 横スクロールできることが伝わらなかったため、
     (a) カード幅を詰めて次のカードを画面端から覗かせる (b) スクロールヒントを出す
     (c) スナップを効かせて1枚ずつ気持ちよく送れるようにする、の3点でアフォーダンスを作る。
     自動で流す案は「読んでいる最中に動く」ストレスと reduced-motion 対応を避けるため採らない。 */
  .voice-list-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
  }
  .voice-card { flex: 0 0 80vw; scroll-snap-align: start; }
  .voice-scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(255,255,255,.72);
  }
  .voice-scroll-hint::after {
    content: '';
    width: 22px; height: 1px;
    background: currentColor;
    animation: voiceSwipeHint 1.8s ease-in-out infinite;
  }
  @keyframes voiceSwipeHint {
    0%, 100% { transform: translateX(0); opacity: .5; }
    50%      { transform: translateX(8px); opacity: 1; }
  }
  .voice-media img { aspect-ratio: 16 / 10; }
  /* モバイルは引用列が痩せすぎないようポートレートを小さく・引用を14pxに */
  .voice-top { gap: 16px; }
  .voice-portrait { flex-basis: 156px; width: 156px; height: 220px; }
  .voice-quote { font-size: 16px; line-height: 1.8; }

  .message-inner { grid-template-columns: 1fr; gap: 40px; }
  .message-media img { aspect-ratio: 1 / 1; }
  .message-quote { font-size: clamp(28px, 7.5vw, 38px); margin-bottom: 36px; }

  .cta-title { font-size: 29px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-nav ul { flex-wrap: wrap; gap: 10px 20px; }
  .footer-nav a { white-space: nowrap; }

  .flow-list {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow-list::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 25px;
    width: 1px;
    background: rgba(13,31,60,.14);
  }
  .flow-item {
    min-height: 112px;
    padding: 0 0 36px 72px;
    border-top: 0;
  }
  .flow-item:last-child { padding-bottom: 0; }
  .flow-no {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    margin: 0;
    padding-bottom: 8px;
    background: var(--color-neutral-100);
    font-size: 54px;
    line-height: .9;
  }
  .flow-title { margin-bottom: 8px; }
  .faq-item { padding: 0 20px; }
  .faq-q { font-size: 16px; padding-right: 32px; }
  .faq--top .faq-item { padding: 0; }
  .faq--top .faq-q { min-height: 64px; padding: 18px 44px 18px 0; }
  .faq--top .faq-a-inner { padding: 0 44px 22px 0; }

  /* 合格実績 モバイル */
  .achievement-stats { flex-direction: column; gap: 0; padding-block: 0; border: none; }
  .achievement-stat { padding: 28px 0; border-bottom: 1px solid rgba(13,31,60,.1); }
  .achievement-stat:first-child { border-top: 1px solid rgba(13,31,60,.1); }
  .achievement-stat + .achievement-stat::before { display: none; }
  .achievement-stat-num { font-size: 64px; }
}

/* =========================================================
   スプラッシュ：ロゴ画像 + キャッチコピー
   ========================================================= */
.splash-logo-img {
  display: block;
  width: clamp(120px, 18vw, 200px);
  height: auto;
  margin: 0 auto 18px;
  filter:
    drop-shadow(0 0 24px rgba(245,112,10,.9))
    drop-shadow(0 0 72px rgba(245,112,10,.55))
    drop-shadow(0 0 140px rgba(245,112,10,.25));
}
.splash-tagline {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: .5em;
  color: rgba(255,255,255,.4);
  margin-top: 4px;
}
/* ヒーロー見出し(.hero-title)へ変位させるため、行間・折り返し位置を揃えておく。
   フォントと字間は「ヒーロータイトル フォント」節で .hero-title と共通指定している。
   変位時の transform-origin は main.js が字面の左上に合わせて上書きする
   （このボックスは隣の "FIRE FIGHTER ACADEMY" に幅を引き延ばされるため、
   要素の左上とテキストの左上が一致しない）。 */
.splash-catch {
  font-size: clamp(20px, 3.6vw, 36px);
  color: rgba(255,255,255,.95);
  line-height: 1.05;
  margin: 28px 0 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease .35s, transform .75s cubic-bezier(.16,1,.3,1) .35s;
  will-change: transform;
}
.splash-logo.is-visible .splash-catch {
  opacity: 1;
  transform: none;
}


/* =========================================================
   フッター：ロゴウォーターマーク
   ========================================================= */
.footer-logo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 40vw, 560px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.04;
}
.footer-logo-mark img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* =========================================================
   ヒーロータイトル フォント（案C: Shippori Mincho B1／力強い明朝・2026-06-29 先方確定）
   ========================================================= */
.hero-title,
.splash-catch {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  letter-spacing: .08em;
}

/* =========================================================
   悩み共感（2026-06-27 新規追加・旧ステートメントを置き換え）
   ========================================================= */
.worry {
  position: relative;
  padding-block: 104px 96px;
  overflow: hidden;
  background: var(--color-secondary-900);
  z-index: 2;
}
.worry .bgtext { color: var(--color-white); opacity: .05; }
.worry .sec-title { color: var(--color-white); }
.worry .sec-en { color: var(--color-primary-400); }
.worry .sec-en::before { background: var(--color-primary-400); }

.worry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-top: 48px;
}
.worry-item {
  position: relative;
  overflow: hidden;
  border-top: var(--hairline-inverse);
  border-radius: var(--radius-lg);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color .25s ease;
}
.worry-item:hover {
  border-color: rgba(255,255,255,.32);
}
.worry-item-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.worry-item-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.worry-item-bg-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,11,20,.06) 0%, rgba(5,11,20,.42) 58%, rgba(6,12,22,.92) 100%);
}
.worry-item:hover .worry-item-bg { transform: scale(1.025); }
.worry-item-body {
  position: relative;
  z-index: 1;
  padding: 32px 28px;
}
.worry-item-no {
  display: block;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--color-primary-400);
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  line-height: 1;
  margin-bottom: 12px;
}
.worry-item-text {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.75;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  margin: 0;
}
.worry-cta {
  margin-top: 64px;
  text-align: center;
}
.worry-cta-note {
  font-size: 15px;
  color: rgba(255,255,255,.5);
  margin: 0 0 28px;
}
@media (max-width: 1024px) {
  .worry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worry-item { min-height: 400px; }
}
@media (max-width: 768px) {
  .worry-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .worry-item { min-width: 0; min-height: 380px; }
}

/* =========================================================
   合格者ギャラリー — フルブリード・エディトリアルモザイク
   ========================================================= */
.graduates-gallery {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding-block: 104px 0;
  background: var(--color-secondary-900);
  color: var(--color-white);
}
.graduates-gallery__wordmark {
  position: absolute;
  top: 16px;
  left: -.035em;
  z-index: 0;
  max-width: none;
  color: var(--color-white);
  font-size: clamp(76px, 15vw, 230px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.065em;
  opacity: .055;
  pointer-events: none;
  white-space: nowrap;
}
.graduates-gallery__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
  padding-bottom: 64px;
}
.graduates-gallery__head,
.graduates-gallery__head.sec-head {
  margin: 0;
}
.graduates-gallery .sec-en { color: var(--color-primary-400); }
.graduates-gallery .sec-title {
  color: var(--color-white);
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.45;
}
.graduates-gallery__lead {
  margin: 0 0 .35em;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.76);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.graduates-gallery__mosaic {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a a b c c"
    "a a a b c c"
    "d d e e e f"
    "d d e e e f"
    "g g g h i i"
    "g g g h i i"
    "j j j k k k"
    "j j j k k k";
  grid-auto-rows: clamp(116px, 10.5vw, 168px);
  gap: 10px;
  width: 100%;
}
.graduates-gallery__photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--color-secondary-700);
}
.graduates-gallery__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(13,31,60,.04), rgba(13,31,60,.2));
  pointer-events: none;
  transition: opacity .6s ease;
}
.graduates-gallery__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.graduates-gallery__photo:hover img { transform: scale(1.025); }
.graduates-gallery__photo:hover::after { opacity: .35; }
.graduates-gallery__photo--01 { grid-area: a; }
.graduates-gallery__photo--02 { grid-area: b; }
.graduates-gallery__photo--03 { grid-area: c; }
.graduates-gallery__photo--04 { grid-area: d; }
.graduates-gallery__photo--05 { grid-area: e; }
.graduates-gallery__photo--06 { grid-area: f; }
.graduates-gallery__photo--07 { grid-area: g; }
.graduates-gallery__photo--08 { grid-area: h; }
.graduates-gallery__photo--09 { grid-area: i; }
.graduates-gallery__photo--10 { grid-area: j; }
.graduates-gallery__photo--11 { grid-area: k; }
/* 縦位置は各写真の主役（今岡氏または卒業生）の顔が中央に来るよう個別調整 */
.graduates-gallery__photo--02 img,
.graduates-gallery__photo--06 img { object-position: center 22%; }
.graduates-gallery__photo--08 img { object-position: center 26%; }
.graduates-gallery__photo--05 img { object-position: center 30%; }
.graduates-gallery__photo--10 img { object-position: center 38%; }
.graduates-gallery__photo--11 img { object-position: center 32%; }

@media (max-width: 900px) {
  .graduates-gallery { padding-top: 88px; }
  .graduates-gallery__intro {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 48px;
  }
  .graduates-gallery__lead { max-width: 620px; }
  .graduates-gallery__mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "a a b"
      "a a b"
      "c d d"
      "c e e"
      "f f g"
      "f f g"
      "h i i"
      "h j j"
      "k k k"
      "k k k";
    grid-auto-rows: clamp(108px, 16vw, 132px);
    gap: 8px;
  }
}
@media (max-width: 600px) {
  .graduates-gallery {
    padding-top: 64px;
  }
  .graduates-gallery__wordmark {
    top: 18px;
    font-size: 25vw;
  }
  .graduates-gallery__intro {
    gap: 28px;
    padding-bottom: 40px;
  }
  .graduates-gallery .sec-title {
    font-size: 29px;
    line-height: 1.5;
  }
  .graduates-gallery__lead {
    padding-top: 18px;
  }
  .graduates-gallery__lead br { display: none; }
  /* 2026-08-03 今岡様ご指摘⑨: 全幅の d・g だけ1行分しか高さが無く、写真が縦に潰れて
     顔が切れていた（他の枠はすべて2行分）。全枠を2行分に揃えて解消する。 */
  .graduates-gallery__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "a a"
      "b c"
      "b c"
      "d d"
      "d d"
      "e f"
      "e f"
      "g g"
      "g g"
      "h i"
      "h i"
      "j k"
      "j k";
    grid-auto-rows: 118px;
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .graduates-gallery__photo img,
  .graduates-gallery__photo::after { transition: none; }
}

/* =========================================================
   合格実績（2026-06-27 新規追加）
   ========================================================= */
.achievement {
  position: relative;
  overflow: hidden;
  background: var(--color-secondary-900);
  z-index: 5;
}
/* 写真背景を全体に1枚だけ敷く → パネル間に境界が生まれない */
.achievement::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(
    url(../img/cta.avif) type("image/avif"),
    url(../img/cta.webp) type("image/webp"),
    url(../img/cta.jpg) type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  filter: brightness(.15) saturate(.4);
  z-index: 0;
}

/* テキスト色（セクション全体） */
.achievement .bgtext { color: var(--color-white); opacity: .05; z-index: 1; }
.achievement .sec-en { color: var(--color-primary-400); }
.achievement .sec-en::before { background: var(--color-primary-400); }
.achievement .sec-title { color: rgba(255,255,255,.95); }
.achievement .achievement-table-head { color: rgba(255,255,255,.85); }
.achievement .achievement-table th { color: rgba(255,255,255,.7); }
.achievement .achievement-table td { color: rgba(255,255,255,.85); }
.achievement .achievement-table tr { border-bottom-color: rgba(255,255,255,.12); }
.achievement .achievement-note { color: rgba(255,255,255,.6); }
.achievement .link-arrow { color: var(--color-primary-400); border-color: rgba(245,112,10,.5); }

/* 両パネルとも透明ラッパー: z-index と padding のみ管理 */
.achievement-head-panel {
  position: relative;
  z-index: 1;
  padding-block: var(--section-pad) 48px;
}
.achievement-head-bg { display: none; }
.achievement-head-panel .container,
.achievement-table-panel .container { position: relative; z-index: 2; }

.achievement-table-panel {
  position: relative;
  z-index: 1;
  padding-block: 0 var(--section-pad);
}

/* 数字帯セパレータ（白） */
.achievement-stats--dark { border-color: rgba(255,255,255,.12); }
.achievement-stats--dark .achievement-stat + .achievement-stat::before {
  background: rgba(255,255,255,.12);
}
.achievement-stats--dark .achievement-stat-label {
  color: rgba(255,255,255,.7);
}

/* 大型数字帯 */
.achievement-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid rgba(13,31,60,.1);
  border-bottom: 1px solid rgba(13,31,60,.1);
  padding-block: 28px;
}
.achievement-stat {
  flex: 1;
  text-align: center;
  position: relative;
}
.achievement-stat + .achievement-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; height: 80%;
  width: 1px;
  background: rgba(13,31,60,.12);
}
.achievement-stat-num {
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary-500);
  /* 数字ブロックの高さを固定して中央に揃える。これで直下のラベルのY位置が3列で揃う */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.achievement-stat-num--ja {
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  /* 欧文(Bebas)は字面が行ボックス上寄り・和文(全国)は下寄りにレンダリングされるため、
     中央揃えだけでは全国が約0.1em下にずれて低く見える。em指定で持ち上げ、
     ブレークポイントでフォントサイズが変わっても比率で追従させる（数字の字面中心に合わせる） */
  transform: translateY(-0.1em);
}
.achievement-stat-plus { font-size: .5em; }
.achievement-stat-label {
  display: block;
  font-size: 14px;
  color: rgba(13,31,60,.55);
  margin-top: 12px;
  letter-spacing: .06em;
}
.achievement-more { text-align: center; margin-top: 40px; }

/* 消防本部一覧 */
.achievement-table-wrap {
  margin-top: 40px;
}
.achievement-table-head {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  color: rgba(13,31,60,.7);
  margin: 0 0 28px;
  text-align: center;
  letter-spacing: .06em;
}
.achievement-table {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  border-collapse: collapse;
}
.achievement-table th,
.achievement-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(13,31,60,.07);
  font-size: 18px;
}
.achievement-table th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(13,31,60,.4);
  text-transform: uppercase;
}
.achievement-table td { color: rgba(13,31,60,.82); }
.achievement-table td:last-child {
  color: var(--color-primary-500);
  font-weight: 700;
  font-feature-settings: "tnum";
}
.achievement-note {
  text-align: center;
  color: rgba(13,31,60,.4);
  font-size: 13px;
  margin-top: 20px;
}

/* =========================================================
   LINE誘導CTA（中間・2026-06-27 新規追加）
   ========================================================= */
.line-cta-mid {
  position: relative;
  padding-block: 104px 96px;
  background: var(--color-secondary-900);
  text-align: center;
  z-index: 6;
  overflow: hidden;
}
#line-cta-1 {
  z-index: 8;
}
#line-cta-2 {
  z-index: 12;
}
.line-cta-mid-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .5em;
  color: var(--color-primary-400);
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.line-cta-mid-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.8vw, 42px);
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin: 0 0 20px;
  line-height: 1.5;
  letter-spacing: .03em;
  position: relative;
  z-index: 1;
}
.line-cta-mid-desc {
  font-size: 17px;
  color: rgba(255,255,255,.55);
  margin: 0 0 44px;
  line-height: 1.85;
  position: relative;
  z-index: 1;
}
.line-cta-mid .ffa-button {
  font-size: 18px;
  padding: 20px 60px;
  position: relative;
  z-index: 1;
}
/* スマホは左右60pxのpaddingで文字の幅が足りず、「LINEで自分に合う対策を」が
   さらに割れて3行になっていた（2026-08-04 実測）。ご指定の2行に収まるまで詰める。 */
@media (max-width: 768px) {
  .line-cta-mid .ffa-button { font-size: 16px; padding: 18px 24px; }
}
.line-cta-mid .ffa-button__note {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.62);
}
/* 2026-07-23 LINE主CTAの副次リンク（フォーム派の受け皿）。主CTAと競合しない控えめな扱い */
.line-cta-mid-alt {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: 13px;
}
.line-cta-mid-alt a {
  color: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.line-cta-mid-alt a:hover {
  color: var(--color-primary-400);
  border-color: var(--color-primary-400);
}

.message-career {
  margin: 0 0 24px;
}
.message-career-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-secondary-900);
  margin: 0 0 16px;
}
.message-career-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.message-career-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 4px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--color-primary-500), rgba(245,112,10,.15));
}
.message-career-timeline li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--color-neutral-700);
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.message-career-timeline li:last-child { margin-bottom: 0; }
.message-career-timeline li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(245,112,10,.1);
}
.message-career-year {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-secondary-900);
  flex-shrink: 0;
  min-width: 38px;
}

/* =========================================================
   理念ステートメント（about専用・写真ゼロで成立する「顔」・2026-07 Wave3）
   ========================================================= */
.philosophy { position: relative; overflow: hidden; padding-block: var(--space-section-lg); background: var(--color-white); }
.philosophy-text {
  font-family: var(--font-display-ja);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--color-secondary-900);
  margin: 0 0 36px;
  max-width: 920px;
}
.philosophy-sub {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-neutral-700);
  margin: 0;
  max-width: 480px;
}

/* =========================================================
   サブページ共通
   ========================================================= */

/* サブページ時はスクロールが最初から発生するためヘッダーを最初から白にする */
body.is-subpage .site-header {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(13,31,60,.08), 0 4px 24px rgba(13,31,60,.08);
}
body.is-subpage .logo-text,
body.is-subpage .gnav a { color: var(--color-secondary-900); }

/* ページヒーロー
   トップの .hero-overlay::before と同じ「左から斜めに開くネイビーパネル」の語彙を使い、
   写真を全幅に敷いた汎用テンプレート然としたヘッダーにしない。 */
.page-hero {
  position: relative;
  height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 64px;
  background: var(--color-secondary-900);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* 左半分はパネルで暗くなるため、写真そのものは沈めすぎない */
  filter: brightness(.62) saturate(.78);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8,20,72,.30) 0%, rgba(13,31,60,.90) 55%, rgba(13,31,60,.94) 100%);
  clip-path: polygon(0 0, 68% 0, 52% 100%, 0 100%);
}
/* パネルの斜辺に沿うオレンジのアクセント線 */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(245,112,10,.85), rgba(245,112,10,.30));
  clip-path: polygon(68% 0, calc(68% + 2px) 0, calc(52% + 2px) 100%, 52% 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.page-hero-en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--color-primary-400);
  display: block;
  margin-bottom: 10px;
}
.page-hero-title {
  font-family: var(--font-display-ja);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
  margin: 0;
  line-height: 1.3;
}
.page-hero-lead {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  margin: 14px 0 0;
  line-height: 1.8;
}

/* タイポグラフィックヒーロー（写真スロットを使わない modifier）
   temp AI人物画像（about/course/blog）の代替。HTML構造は写真あり版と同一の
   .page-hero-overlay / .page-hero-content を保つ。実写が届いたら
   .page-hero-bg の <img> を差し戻し、この modifier クラスを外すだけで済む。 */
.page-hero--typo {
  background: var(--color-secondary-900);
}
.page-hero--typo .page-hero-overlay,
.page-hero--typo::after {
  display: none;
}
.page-hero-typo-mark {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero-typo-mark span {
  position: absolute;
  right: -0.04em;
  bottom: -0.12em;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(120px, 20vw, 320px);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--color-white);
  opacity: .07;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 600px) {
  .page-hero-typo-mark span { font-size: clamp(100px, 30vw, 200px); }
}

/* achievement専用: 写真の使い回しをやめ「令和6年度 合格72名」の特大数字を主役にする
   （2026-07 Wave2）。.page-hero--typo と併用し、実写到着後は通常の .page-hero に戻せる。 */
.page-hero.page-hero--achievement { height: auto; min-height: 460px; padding-bottom: 56px; }
.page-hero-stat { display: flex; align-items: flex-end; gap: 12px; margin: 2px 0 18px; }
.page-hero-stat-num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(76px, 11vw, 148px);
  line-height: .82;
  color: var(--color-primary-400);
}
.page-hero-stat-text {
  font-family: var(--font-display-ja);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.3;
  padding-bottom: .12em;
}
@media (max-width: 768px) {
  .page-hero.page-hero--achievement { min-height: 380px; padding-bottom: 44px; }
  .page-hero-stat-num { font-size: clamp(64px, 18vw, 108px); }
}
@media (max-width: 600px) {
  .page-hero.page-hero--achievement { min-height: 340px; }
}

/* パンくず */
.breadcrumb {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-neutral-100);
  margin-bottom: 0;
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-neutral-500);
}
.breadcrumb-inner a { color: var(--color-primary-500); }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--color-neutral-300); }

/* =========================================================
   合格実績ページ
   ========================================================= */
.achievement-page { position: relative; overflow: hidden; padding-block: var(--section-pad); }

/* 合格者の声セクション（数字実績と共通のcontainer内に置くラッパー） */
.achievement-voice-section { position: relative; overflow: hidden; margin-top: var(--space-section-md); }

/* --- featured 1（村松さん）: ネイビー塗りはこの1箇所だけ許可（§7脱カード） --- */
.voice-featured {
  display: grid;
  grid-template-columns: 5fr 7fr;
  background: var(--color-secondary-900);
  margin-top: 56px;
  overflow: hidden;
}
.voice-featured-photo { position: relative; display: block; aspect-ratio: 4 / 5; }
.voice-featured-play {
  position: absolute; left: 28px; bottom: 28px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: rgba(13,31,60,.72);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.voice-featured-body {
  padding: 56px 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.voice-featured-no {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: .28em;
  color: rgba(255,255,255,.4);
  display: block; margin-bottom: 8px;
}
.voice-featured-qdeco {
  font-family: var(--font-en);
  font-size: 72px; line-height: .6;
  color: var(--color-primary-400);
  display: block; margin-bottom: 8px;
}
.voice-featured-text {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 600; line-height: 1.9;
  color: rgba(255,255,255,.95);
  margin: 0 0 28px;
}
.voice-featured-foot { padding-top: 24px; border-top: var(--hairline-inverse); }
.voice-featured-meta { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--color-primary-400); margin: 0; line-height: 1.6; }
.voice-featured-meta-ja { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.72); letter-spacing: 0; }

/* --- 残り5名: hairline罫線区切りの縦リスト（塗りカードでなく罫線で仕切る・§7） --- */
.voice-row-list { border-top: var(--hairline); }
.voice-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: center;
  padding-block: 32px;
  border-bottom: var(--hairline);
}
.voice-row-photo { display: block; width: 120px; height: 120px; flex-shrink: 0; }
.voice-row-body { min-width: 0; }
.voice-row-no {
  font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--color-primary-500); display: block; margin-bottom: 8px;
}
.voice-row-text { font-size: 15px; line-height: 1.85; color: var(--color-neutral-900); margin: 0 0 14px; }
.voice-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--color-neutral-500); margin: 0; }
.voice-row-play {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--color-primary-500);
  border-bottom: 1px solid rgba(245,112,10,.4);
  padding-bottom: 2px;
}
.voice-row-play:hover { color: var(--color-primary-600); border-color: var(--color-primary-600); }

/* コピーライトと同格の補助リンクとして扱う（フッターナビより一段控えめに） */
.footer-legal-link { font-size: 12px; color: rgba(255,255,255,.4); letter-spacing: .04em; text-decoration: none; transition: color .25s ease; }
.footer-legal-link:hover { color: var(--color-primary-400); }

/* 実績テーブル（詳細版） */
.achievement-table-full {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
}
.achievement-table-full th,
.achievement-table-full td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: 15px;
}
.achievement-table-full th {
  background: var(--color-secondary-900);
  color: rgba(255,255,255,.9);
  font-weight: 600;
  letter-spacing: .06em;
}
.achievement-table-full td:last-child {
  color: var(--color-primary-500);
  font-weight: 700;
  font-family: var(--font-en);
  font-size: 17px;
}
/* 東京消防庁22名の行をfeatured化（同型反復のテーブルに強弱をつける・§7） */
.achievement-table-full tr.is-featured { background: var(--color-primary-100); }
.achievement-table-full tr.is-featured td:first-child { font-weight: 700; color: var(--color-secondary-900); }
.achievement-table-full tr.is-featured td:last-child { font-size: 28px; color: var(--color-primary-600); }

/* =========================================================
   コースページ
   ========================================================= */
.course-intro { padding-block: var(--space-section-sm) 0; background: var(--color-white); }
/* 2026-07-31 今岡様指摘⑥の再修正: <br>で区切った各セグメント内で通常の折返しが機能せず、
   「もちろ／ん」「するた／めの」のように末尾1〜2文字だけが孤立行になる（幅によって発生・
   1024px等で再現）。全幅でbalanceを効かせ、セグメント内の行を均等配分して孤立を防ぐ */
/* 2026-07-31 今岡様指摘⑥の再々修正: フォント縮小をやめ、--fs-h2(60px)を維持したまま
   .contact-page-headと同じブリード手法でcontainer制約(1120px)から解放し、
   1366px以上の一般的なデスクトップ幅では2行に収まるようにする。それ未満の幅は
   balanceで自然に3行程度へ分散（孤立文字は出ない） */
.course-intro-head {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--pad);
  box-sizing: border-box;
}
.course-intro .sec-title { text-wrap: balance; max-width: 1300px; margin-inline: auto; }
.course-intro-head .sec-en { max-width: 1300px; margin-inline: auto; }
/* 見出しの改行は PC=3行（2026-08-02 ③）／スマホ=4行（2026-08-03 ⑥）で位置が異なるため
   .br-pc / .br-sp で出し分ける（定義はユーティリティ節）。
   スマホでは text-wrap:balance が指定改行の各行をさらに割って7行にしてしまうため無効化し、
   4行がそのまま収まるサイズまで詰める（今岡様も「文字を少し小さくしても構いません」とご了承済み）。 */
@media (max-width: 768px) {
  .course-intro .sec-title.course-intro-title {
    text-wrap: wrap;
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.5;
  }
}

.course-page { padding-block: var(--section-pad); position: relative; overflow: hidden; }

.course-detail-list {
  margin-top: 64px;
}
/* クラスごとの区切り（CPTループ・§7脱カード＝塗りでなく罫線で仕切る） */
.course-detail-block { padding-top: var(--space-section-md); border-top: var(--hairline); scroll-margin-top: 96px; }
.course-detail-block:first-child { padding-top: 0; border-top: 0; }
/* 写真なしクラス（スタンダード／東消合格／スパルタ2件）：1カラムで成立させる */
.course-detail-item--full { grid-template-columns: 1fr; }
.course-detail-item--full .course-detail-body { max-width: 720px; }
.course-detail-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* アカデミー概要のみ 7:5 の非対称に倒す（Wave1・写真側を優勢に） */
.course-detail-item--wide-media { grid-template-columns: 7fr 5fr; }
.course-detail-item:nth-child(even) .course-detail-img { order: 2; }
.course-detail-item:nth-child(even) .course-detail-body { order: 1; }
.course-detail-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.course-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-detail-no {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--color-primary-500);
  display: block;
  margin-bottom: 12px;
}
.course-detail-name {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-secondary-900);
  margin: 0 0 20px;
  line-height: 1.4;
}
.course-detail-desc {
  color: var(--color-neutral-700);
  line-height: 1.9;
  margin: 0 0 28px;
}
.course-detail-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-detail-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-neutral-700);
}
.course-detail-features li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-primary-500);
  margin-top: 8px;
}
.course-detail-tag {
  display: inline-block;
  padding: 5px 14px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-right: 8px;
  margin-bottom: 8px;
}

/* --- コースの強み・チップ（アカデミー/筆記サポート共通） --- */
.strength-chip {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(245,112,10,.12);
  color: var(--color-primary-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 6px 6px 0;
}
.course-writing-band .strength-chip { background: rgba(255,255,255,.1); color: var(--color-primary-400); }

/* --- 数字帯（散在していた実績数字を1本に集約・§7脱カード） --- */
.course-stat-band {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding-block: 40px;
  margin-top: var(--space-section-sm);
}
.course-stat { flex: 1 1 20%; text-align: center; padding: 12px 20px; position: relative; }
.course-stat + .course-stat::before {
  content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 1px;
  background: rgba(13,31,60,.12);
}
.course-stat-num {
  display: flex; align-items: flex-end; justify-content: center;
  font-weight: 800; line-height: 1; font-size: 40px; color: var(--color-secondary-900);
  font-family: var(--font-en);
}
.course-stat-num small { font-size: .5em; margin-left: 2px; color: var(--color-primary-500); }
.course-stat-label { display: block; margin-top: 10px; font-size: 12px; color: var(--color-neutral-500); letter-spacing: .02em; line-height: 1.6; }

/* --- サポート内容：hairline罫線の縦リスト（content-box ×10 の代替・§7） --- */
.course-row-list { display: flex; flex-direction: column; margin-top: var(--space-section-sm); border-top: var(--hairline); }
.course-row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 30px 0; border-bottom: var(--hairline); }
.course-row-index { display: flex; align-items: baseline; gap: 14px; }
.course-row-no { font-family: var(--font-en); font-weight: 700; font-size: 56px; line-height: .9; color: var(--color-primary-500); }
.course-row-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-500); }
.course-row-title { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--color-secondary-900); margin: 0 0 8px; line-height: 1.5; }
.course-row-text { font-size: 14px; line-height: 1.85; color: var(--color-neutral-700); margin: 0; }

.course-row-list--inverse { border-top-color: rgba(255,255,255,.14); }
.course-row-list--inverse .course-row { border-bottom-color: rgba(255,255,255,.14); }
.course-row-list--inverse .course-row-no { color: var(--color-primary-400); }
.course-row-list--inverse .course-row-label { color: rgba(255,255,255,.45); }
.course-row-list--inverse .course-row-title { color: #fff; }
.course-row-list--inverse .course-row-text { color: rgba(255,255,255,.72); }

/* --- 料金ブロック（アカデミーは金額未確定のためフォールバック文言・§金額欠落の吸収） --- */
.course-price-block {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100);
  padding: 24px 28px;
  margin-top: 28px;
}
.course-price-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-neutral-500); margin: 0 0 10px; }
.course-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course-price-main { font-family: var(--font-en); font-size: 32px; font-weight: 700; color: var(--color-secondary-900); }
.course-price-unit { font-size: 14px; color: var(--color-neutral-500); }
.course-price-note { font-size: 12px; color: var(--color-neutral-500); margin: 8px 0 0; line-height: 1.7; }
.course-price-fallback-text { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--color-secondary-900); margin: 0; line-height: 1.7; }

/* 月額3クラスの料金比較（フラット・罫線区切り・箱塗りなし） */
.course-tiers { display: flex; margin-top: 28px; border-top: var(--hairline); }
.course-tier { flex: 1; padding: 24px 24px 22px; border-bottom: var(--hairline); }
.course-tier + .course-tier { border-left: var(--hairline); }
.course-tier-name { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--color-secondary-900); margin: 0 0 12px; }
.course-tier-price { display: flex; align-items: baseline; gap: 3px; margin: 0; }
.course-tier-num { font-family: var(--font-en); font-size: 40px; font-weight: 900; line-height: 1; color: var(--color-primary-500); }
.course-tier-unit { font-size: 12px; color: var(--color-neutral-700); }
.course-tier-sub { font-size: 12px; color: var(--color-neutral-500); margin: 12px 0 0; }
.course-tier-note { font-size: 13px; color: var(--color-neutral-500); margin: 16px 0 0; line-height: 1.7; }
@media (max-width: 768px) {
  .course-tiers { flex-direction: column; }
  .course-tier { padding: 20px 4px; }
  .course-tier + .course-tier { border-left: none; }
}

.course-price-block--inverse { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.course-price-block--inverse .course-price-label { color: rgba(255,255,255,.5); }
.course-price-block--inverse .course-price-main { color: #fff; }
.course-price-block--inverse .course-price-unit,
.course-price-block--inverse .course-price-note { color: rgba(255,255,255,.55); }

/* --- FFAの強み（単発の featured ブロック。§7＝カードを使うなら強弱をつける） --- */
.course-why { margin-top: var(--space-section-md); padding-top: 40px; border-top: var(--hairline); }
.course-why-title {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--color-secondary-900); margin: 0 0 28px; line-height: 1.5;
}
.course-why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
/* 2026-07-30 今岡様指摘⑧: 3項目それぞれに写真を追加（.photo-doc の角欠き演出を踏襲） */
.course-why-item-media { aspect-ratio: 4 / 3; overflow: hidden; margin: 0 0 16px; }
.course-why-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-why-item-title { font-weight: 700; color: var(--color-secondary-900); margin: 0 0 8px; }
.course-why-item-text { font-size: 14px; color: var(--color-neutral-700); line-height: 1.85; margin: 0; }

/* --- 筆記サポートクラス：ネイビー全幅反転帯（同型反復を崩す・§反復させない） --- */
.course-writing-band { background: var(--color-secondary-900); padding-block: var(--space-section-lg); }
.course-writing-band .course-detail-no { color: var(--color-primary-400); }
.course-writing-band .course-detail-name { color: #fff; }
.course-writing-band .course-detail-desc { color: rgba(255,255,255,.72); }
.course-writing-band .sec-en { color: var(--color-primary-400); }
.course-writing-band .sec-en::before { background: var(--color-primary-400); }
.course-writing-band .sec-title { color: #fff; }

/* --- スパルタクラス：比較カードは維持（先方ボツ語彙＝浮き上がりhoverは撤去、border変化のみ） --- */
.sparta-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; }
.sparta-plan {
  border: 1px solid var(--color-neutral-100);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease;
}
.sparta-plan:hover { border-color: rgba(245,112,10,.4); }
.sparta-plan-no {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .28em;
  color: var(--color-primary-500); display: block; margin-bottom: 12px;
}
.sparta-plan-name { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--color-secondary-900); margin: 0 0 16px; }
.sparta-plan-desc { font-size: 15px; color: var(--color-neutral-700); line-height: 1.85; margin: 0 0 24px; }
.sparta-plan-features { list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.sparta-plan-features li { font-size: 14px; color: var(--color-neutral-700); display: flex; align-items: flex-start; gap: 10px; }
.sparta-plan-features li::before {
  content: ''; display: block; flex-shrink: 0;
  width: 5px; height: 5px; background: var(--color-primary-500); margin-top: 9px;
}
.sparta-plan-price { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-neutral-100); }
.sparta-plan-price-num { font-family: var(--font-en); font-size: 38px; font-weight: 700; color: var(--color-secondary-900); line-height: 1; }
.sparta-plan-price-unit { font-size: 14px; color: var(--color-neutral-500); margin-left: 4px; }
.sparta-plan-price-note { font-size: 12px; color: var(--color-neutral-500); margin: 8px 0 20px; line-height: 1.7; }

@media (max-width: 768px) {
  .course-detail-item--wide-media { grid-template-columns: 1fr; }
  .course-row { grid-template-columns: 1fr; gap: 12px; }
  .course-row-no { font-size: 44px; }
  .course-stat-band { flex-direction: column; }
  .course-stat + .course-stat::before { display: none; }
  .course-stat { border-top: 1px solid rgba(13,31,60,.08); padding-block: 20px; }
  .course-stat:first-child { border-top: none; }
  .sparta-plans { grid-template-columns: 1fr; }
}

/* =========================================================
   お問い合わせページ
   ========================================================= */
.contact-page { padding-block: var(--section-pad); }
.contact-page-head {
  margin-bottom: 64px;
  text-align: center;
  /* 2026-07-31 今岡様指摘⑩の再々修正: 「まずは、LINEで気軽に相談しませんか？」(20字)は
     --fs-h2(60px)実測1112pxで、親.containerの実効幅(1072px)を超える。他の画像ブリード
     （L669-672と同じ手法）を見出しにも適用し、.containerの制約から独立させて中央寄せの
     まま画面幅いっぱいまで使えるようにする。max-width:1200pxで暴走を防止 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--pad);
  box-sizing: border-box;
}
.contact-page-head-en,
.contact-form-head-en { justify-content: center; }
.contact-page-head-title,
.contact-form-head-title,
.contact-form-head-lead { text-align: center; }
.sec-title.contact-page-head-title { text-wrap: balance; max-width: 1200px; margin-inline: auto; }
.contact-page-head-en { max-width: 1200px; margin-inline: auto; }
/* 2026-07-30 今岡様指摘⑩: justify-content:centerでもロゴ罫線(::before)込みで中央になるため、
   文字だけを見ると右にずれて見える。お問い合わせページのバッジ見出しは罫線を外して文字のみ中央揃え */
.contact-page-head-en::before,
.contact-ask-head .sec-en::before,
.contact-form-head-en::before { display: none; }

.contact-main {
  max-width: 640px;
  margin: 0 auto 80px;
  text-align: center;
}
.contact-main-icon {
  font-family: var(--font-en);
  font-size: 56px;
  color: var(--color-line);
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}
/* 2026-07-23 「LINE」テキスト→LINEアイコン（SVG）。font-size(56px)を基準に 1em で描画・中央寄せ */
.contact-main-icon svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}
.contact-main-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-secondary-900);
  margin: 0 0 16px;
}
.contact-main-desc {
  color: var(--color-neutral-700);
  line-height: 1.9;
  margin: 0 0 36px;
}
.contact-note {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 24px 0 0;
}
.contact-main-button { font-size: 18px; padding: 20px 64px; }
.contact-ask { max-width: 760px; margin: 80px auto 0; }
/* 2026-07-31 今岡様指摘⑩の再々修正: 「こんなこと、相談できます」(12字)は
   サイト全体のcontainer上限(1120px)内で計算すると--fs-h2(60px)のまま1行に収まる
   （60px×12字≈720px）。他のsec-titleと同じ迫力を保つため縮小をやめ、
   代わりにコンテナ側(680→760px)を拡張して1行を確保する */
.contact-ask-head { margin-bottom: 40px; text-align: center; }
.contact-ask-head .sec-en { justify-content: center; }
.sec-title.contact-ask-title { text-wrap: balance; }
/* 2026-07-31 ユーザー指摘: 見出し「こんなこと、相談できます」が中央揃えなのに対し、
   リストがコンテナ左端に張り付いて見えて違和感。リストブロック自体を中央へ寄せる
   （各行の文字はマーカー+テキストのため引き続き左揃えのまま） */
.contact-ask-list { gap: 16px; max-width: fit-content; margin-inline: auto; }
/* 2026-07-31 ユーザー指摘: リスト文字が小さい（15px）ので「よくある質問」の項目
   （.faq-q・デスクトップ20px/モバイル16px）と揃える */
.contact-ask-list li { font-size: 20px; }
@media (max-width: 768px) {
  .contact-ask-list li { font-size: 16px; }
}

/* --- お問い合わせフォーム --- */
.contact-form-section { padding-block: var(--section-pad); background: var(--color-neutral-50); }
/* 2026-07-31 今岡様指摘⑩の再々修正: 「メールでのお問い合わせ」(11字)も同様に
   --fs-h2(60px)のまま1行に収まる計算（60px×11字≈660px）。コンテナを拡張して対応 */
.contact-form-head { max-width: 680px; margin-inline: auto; text-align: center; }
.sec-title.contact-form-head-title { text-wrap: balance; }
.contact-form-message {
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 20px 24px;
  border-left: 3px solid;
  font-size: 14px;
  line-height: 1.8;
}
.contact-form-message--success {
  border-color: var(--color-primary-500);
  background: var(--color-primary-100);
  color: var(--color-secondary-900);
}
.contact-form-message--error {
  border-color: #C0392B;
  background: rgba(192,57,43,.06);
  color: #7A2318;
}
.contact-form {
  max-width: 640px;
  margin: 0 auto;
}
.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form-row {
  margin-bottom: 28px;
}
.contact-form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-secondary-900);
  margin-bottom: 10px;
}
.contact-form-label .required,
.contact-form-label .optional {
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: .04em;
}
.contact-form-label .required { color: var(--color-primary-500); }
.contact-form-label .optional { color: var(--color-neutral-500); font-weight: 500; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-neutral-300);
  background: transparent;
  padding: 12px 4px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--color-secondary-900);
  transition: border-color .3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.8;
}
.contact-form-submit { margin-top: 8px; }
.contact-form-note {
  font-size: 12px;
  color: var(--color-neutral-500);
  margin-top: 16px;
}
.contact-faq { background: var(--color-neutral-50); }

/* =========================================================
   法務ページ（利用規約・プライバシーポリシー・特商法 共通）
   ========================================================= */
.legal-body {
  max-width: 760px;
  margin-inline: auto;
}
.legal-body h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary-900);
  margin: 40px 0 16px;
}
.legal-body h3:first-child { margin-top: 0; }
.legal-body p,
.legal-body li {
  font-size: 15px;
  color: var(--color-neutral-700);
  line-height: 1.9;
}
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 1.4em;
}
.legal-updated {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin-top: 56px;
  text-align: right;
}
.tokushoho-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.tokushoho-table th,
.tokushoho-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-neutral-100);
  text-align: left;
  line-height: 1.8;
  font-size: 15px;
  vertical-align: top;
}
.tokushoho-table th { width: 240px; font-weight: 700; color: var(--color-secondary-900); }
.tokushoho-table td { color: var(--color-neutral-700); }
@media (max-width: 600px) {
  .tokushoho-table th,
  .tokushoho-table td { display: block; width: 100%; }
  .tokushoho-table th { padding-bottom: 4px; border-bottom: none; }
  .tokushoho-table td { padding-top: 0; }
}

@media (max-width: 768px) {
  .voice-featured { grid-template-columns: 1fr; }
  .voice-featured-photo { aspect-ratio: 16 / 10; }
  .voice-featured-body { padding: 36px 28px; }
  .voice-featured-qdeco { font-size: 56px; }
  .voice-row { grid-template-columns: 88px 1fr; gap: 18px; padding-block: 24px; }
  .voice-row-photo { width: 88px; height: 88px; }
  .course-detail-item { grid-template-columns: 1fr; gap: 32px; }
  .course-detail-item:nth-child(even) .course-detail-img { order: 0; }
  .course-detail-item:nth-child(even) .course-detail-body { order: 0; }

  /* タブレット: パネルを深くして写真の露出を細める */
  .page-hero { height: 340px; padding-bottom: 48px; }
  .page-hero-overlay { clip-path: polygon(0 0, 84% 0, 70% 100%, 0 100%); }
  .page-hero::after { clip-path: polygon(84% 0, calc(84% + 2px) 0, calc(70% + 2px) 100%, 70% 100%); }
}

@media (max-width: 600px) {
  /* スマホ: トップのヒーローと同様に斜めを解除し、可読性を優先して全幅の紺グラデにする */
  .page-hero { height: 280px; padding-bottom: 40px; }
  .page-hero-overlay {
    clip-path: none;
    background: linear-gradient(to top, rgba(13,31,60,.94) 0%, rgba(13,31,60,.62) 55%, rgba(13,31,60,.34) 100%);
  }
  .page-hero::after { display: none; }
  .page-hero-bg { filter: brightness(.5) saturate(.72); }
}

/* =========================================================
   ブログ（一覧・カード・ページ送り）
   2026-07 Wave2: 均一グリッド(auto-fill)を廃止し、featured 1（横組み・最新1件）
   ＋ hairline罫線区切りのリスト行へ再構成（§7脱カード）。
   template-parts/blog-card.php の $args['variant'] で featured/row を切替。
   ========================================================= */
.blog-list { display: flex; flex-direction: column; }

.blog-card { border: none; }
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-thumb { overflow: hidden; background: var(--color-neutral-50); }
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100);
}
.blog-card-thumb-empty span { font-family: var(--font-en); font-size: 13px; letter-spacing: .32em; color: var(--color-neutral-300); }

.blog-card-date { font-size: 12px; color: var(--color-neutral-500); margin: 0 0 8px; }
.blog-card-cat {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--color-primary-600);
  background: var(--color-primary-100);
  padding: 4px 12px;
  margin-bottom: 14px;
}
.blog-card-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-secondary-900);
  line-height: 1.6;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card:hover .blog-card-title { color: var(--color-primary-500); }
.blog-card-excerpt {
  color: var(--color-neutral-700);
  line-height: 1.8;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- featured（横組み・最新1件） --- */
.blog-card--featured { margin-bottom: var(--space-section-sm); }
.blog-card--featured .blog-card-link { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.blog-card--featured .blog-card-thumb { aspect-ratio: 16/9; }
.blog-card--featured .blog-card-date { font-size: 13px; }
.blog-card--featured .blog-card-title { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 16px; -webkit-line-clamp: 3; }
.blog-card--featured .blog-card-excerpt { font-size: 15px; -webkit-line-clamp: 3; }

/* --- row（hairline罫線区切りの縦リスト・2件目以降） --- */
.blog-list-rows { border-top: var(--hairline); }
.blog-card--row { border-bottom: var(--hairline); }
.blog-card--row .blog-card-link { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; padding-block: 28px; }
.blog-card--row .blog-card-thumb { aspect-ratio: 16/9; }
.blog-card--row .blog-card-date { font-size: 12px; }
.blog-card--row .blog-card-title { font-size: 16px; margin: 4px 0 8px; -webkit-line-clamp: 2; }
.blog-card--row .blog-card-excerpt { font-size: 13px; -webkit-line-clamp: 1; }

@media (max-width: 768px) {
  .blog-card--featured .blog-card-link { grid-template-columns: 1fr; gap: 20px; }
  .blog-card--row .blog-card-link { grid-template-columns: 96px 1fr; gap: 16px; padding-block: 20px; }
  .blog-card--row .blog-card-excerpt { display: none; }
}

.blog-empty {
  margin-top: 64px;
  text-align: center;
  font-size: 15px;
  color: var(--color-neutral-700);
  line-height: 2;
}

.blog-pagination { margin-top: 64px; }
/* 親テーマ(SWELL)が .page-numbers に背景色・固定高・影を当てるため打ち消す */
.blog-pagination .page-numbers {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  height: auto;
  background: transparent;
  box-shadow: none;
}
.blog-pagination .page-numbers li { margin: 0; }
.blog-pagination a,
.blog-pagination span.current,
.blog-pagination span.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--font-head);
  font-size: 14px;
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  color: var(--color-secondary-900);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.blog-pagination a:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.blog-pagination span.current {
  background: var(--color-secondary-900);
  border-color: var(--color-secondary-900);
  color: var(--color-white);
}
.blog-pagination span.dots { border-color: transparent; background: transparent; }

/* =========================================================
   ブログ（記事詳細）
   ========================================================= */
.article { padding-block: var(--section-pad); background: var(--color-white); }
.article-inner { max-width: 760px; margin-inline: auto; }

.article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.article-date { font-family: var(--font-head); font-size: 13px; color: var(--color-neutral-500); margin: 0; }
.article-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.article-cat {
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--color-secondary-900);
  border: 1px solid var(--color-neutral-300);
  transition: border-color .3s ease, color .3s ease;
}
.article-cat:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

.article-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-secondary-900);
  margin: 20px 0 0;
}

.article-thumb { margin-top: 40px; }
.article-thumb img { width: 100%; height: auto; display: block; }

.article-body { margin-top: 48px; font-size: 16px; line-height: 1.8; color: var(--color-neutral-900); }
.article-body > * + * { margin-top: 1.6em; }
.article-body p + p { margin-top: 24px; }

/* 記事目次（自前・sub.js が .p-toc シェルを置換して生成。デザインは罫線＋余白で刷新側に統一） */
.article-toc {
  margin: 0 0 48px;
  padding: 28px 32px;
  border: var(--hairline);
  background: var(--color-neutral-50);
}
.article-toc__ttl {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--color-primary-500);
}
.article-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.article-toc__item { margin: 0; }
.article-toc__item + .article-toc__item { border-top: var(--hairline); }
/* .article-body a（オレンジ）より詳細度を上げて目次リンク色を確定させる */
.article-body .article-toc__link {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-secondary-900);
  text-decoration: none;
  transition: color .2s ease;
}
.article-body .article-toc__link:hover { color: var(--color-primary-500); }
.article-body .article-toc__item.-sub .article-toc__link {
  padding-left: 20px;
  font-size: 14px;
  color: var(--color-neutral-700);
}
/* アンカージャンプ時に固定ヘッダー（64px）の下へ隠れないよう余白を確保 */
.article-body h2,
.article-body h3 { scroll-margin-top: 88px; }

.article-body h2 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-secondary-900);
  margin-top: 72px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary-500);
}
.article-body h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-secondary-900);
  margin-top: 44px;
}
.article-body a { color: var(--color-primary-600); text-underline-offset: 3px; }
.article-body img { max-width: 100%; height: auto; }
.article-body ul,
.article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: .6em; }
.article-body blockquote {
  padding: 20px 24px;
  background: var(--color-neutral-50);
  border-left: 3px solid var(--color-neutral-300);
  color: var(--color-neutral-700);
}

.article-author {
  margin-top: 72px;
  padding: 28px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.article-author-label,
.article-related-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--color-primary-500);
}
.article-author-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary-900);
}
.article-author-name span {
  margin-right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-500);
}
.article-author-bio {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-neutral-700);
}
.article-related { margin-top: 72px; }
.article-related-title {
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--color-secondary-900);
}
.article-related-list { margin: 0; padding: 0; list-style: none; border-top: var(--hairline); }
.article-related-item { border-bottom: var(--hairline); }
.article-related-item a {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  align-items: baseline;
  padding-block: 20px;
  color: var(--color-secondary-900);
  text-decoration: none;
  transition: color .25s ease;
}
.article-related-item a:hover { color: var(--color-primary-500); }
.article-related-date { font-size: 12px; color: var(--color-neutral-500); }
.article-related-post-title { font-size: 15px; font-weight: 700; line-height: 1.7; }

.article-nav {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--color-neutral-100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.article-nav-item {
  display: block;
  text-decoration: none;
  color: var(--color-secondary-900);
  transition: color .3s ease;
}
.article-nav-item:hover { color: var(--color-primary-500); }
.article-nav-item--next { text-align: right; }
.article-nav-label { display: block; font-family: var(--font-head); font-size: 12px; color: var(--color-neutral-500); margin-bottom: 8px; }
.article-nav-title { font-size: 14px; line-height: 1.7; }

.article-back { margin-top: 56px; text-align: center; }

/* =========================================================
   ブログ（アーカイブ見出し）
   ========================================================= */
.archive-intro { text-align: center; margin-bottom: 56px; }
.archive-intro-label { font-family: var(--font-head); font-size: 12px; letter-spacing: .16em; color: var(--color-primary-500); }
.archive-intro-title { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--color-secondary-900); margin: 12px 0 0; }
.archive-intro-desc { font-size: 14px; color: var(--color-neutral-700); line-height: 1.9; margin: 12px 0 0; }

@media (max-width: 600px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-item--next { text-align: left; }
  .article-related-item a { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================================
   TOPページ ブラッシュアップ統合（Hayato FB・PR #6 design/grit-top-brushup-2026-07-25 合意分）
   2026-07-26 Yutaro 反映。サンドボックス（design-improvement/assets/css/improvements.css）の
   改善内容をそのまま統合。以下は今回のスコープ外（除外・別途対応）:
   - 角丸化（--round-img/--round-btn）: design-spec.md の「全体的にシャープ（角丸なし）」方針を
     維持。Hayato本人もCSSコメントで先方トーン再確認を推奨していたため、今回は見送り。
     採用する場合は先方確認後に別PRで対応する。
   - ヒーロー見出しフォント: Shippori Mincho B1 のまま維持（2026-06-29 先方確定・design-constraints.md）。
     太さ・字間の強化のみ反映。
   - モバイル最適化の追加調整・「こんなお悩み」セクションの集約は別途対応（PR #6 本文の残課題）。
   ========================================================================= */

/* ---- ②④ トークン一括更新（cascadeで全体に効く・!important不要） -------- */
:root {
  /* ② 角ゴシックの力強い系へ。見出し=Noto Sans JP 900（heavyで力感）／本文=Zen Kaku Gothic New 継続 */
  --font-head: "Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* ④ 文字を2周り大きく（現状→拡大） */
  --fs-label: 15px;                        /* 13 → 15 */
  --fs-h1: clamp(44px, 6.2vw, 88px);       /* 34-68 → 44-88 */
  --fs-h2: clamp(34px, 4.4vw, 60px);       /* 28-52 → 34-60 */
  --fs-h3: clamp(25px, 2.6vw, 36px);       /* 22-28 → 25-36 */
  --fs-lead: clamp(20px, 1.7vw, 24px);     /* 17-20 → 20-24 */
  --fs-body: 20px;                         /* 17 → 20 */
  --lh-body: 1.85;

  /* ① 余白圧縮（104 → 72前後） */
  --section-pad: 72px;
  --space-section-lg: 72px;
  --space-section-md: 56px;
  --space-section-sm: 40px;
}

/* ④ ベース本文（body に直値17pxが入っているので上書き） */
body { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---- ②④ 見出し：力強い角ゴシック・大型化・字間を締める ------------------ */
.sec-en {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .22em;
}
.sec-en::before { width: 40px; height: 2px; }   /* ⑤ ラベル線も少し強く */

.sec-title {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 900;               /* 700 → 900：力感 */
  letter-spacing: .02em;          /* 締める */
  line-height: 1.28;
}

/* ③ 各セクションの主要見出し／本文サイズを統一トークンへ寄せる（バラつき解消） */
.strength-card-title,
.course-name,
.flow-title { font-family: var(--font-head); font-weight: 900; font-size: var(--fs-h3); letter-spacing: .01em; line-height: 1.3; }

.strength-card-text,
.course-desc,
.flow-text,
.worry-item-text,
.message-text,
.voice-quote,
.faq-q,
.faq-a-inner p { font-size: var(--fs-body); line-height: var(--lh-body); }

.hero-sub  { font-size: clamp(18px, 1.8vw, 22px); }
.hero-note,
.hero-trust { font-size: clamp(15px, 1.3vw, 17px); }

/* ① セクション見出し下の余白を詰める（間延び解消） */
.sec-head { margin-bottom: 40px; }
.sec-lead { margin-top: 14px; font-size: var(--fs-lead); }
/* 2026-07-31 今岡様指摘⑨関連: 実績の数字セクションのリード文は共通max-width:600pxのままだと
   デスクトップで不必要に行数が増える（3行で足りる分量が5行になる）。このセクションに限り拡張 */
.achievement-page .sec-lead { max-width: 800px; }

/* ---- ⑤ ボタン：素の矩形 → 押したくなる存在感 -------------------------- */
.ffa-button {
  min-height: 62px;              /* 54 → 62 */
  padding: 0 40px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;               /* 16 → 18 */
  letter-spacing: .04em;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(13,31,60,.16);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
}
.ffa-button::after {             /* 前進を示す矢印（内容の後ろに付与） */
  content: "→";
  font-family: var(--font-en);
  transform: translateX(0);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.ffa-button:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(13,31,60,.24); }
.ffa-button:hover::after { transform: translateX(5px); }
.ffa-button--line { box-shadow: 0 10px 28px rgba(6,199,85,.30); }
.ffa-button--line:hover { box-shadow: 0 16px 40px rgba(6,199,85,.40); }
.ffa-button--internal { box-shadow: 0 10px 28px rgba(245,112,10,.32); }
.hero-actions .ffa-button { font-size: 16px; min-height: 60px; }

.btn-cta {
  padding: 18px 46px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .04em;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(245,112,10,.42); }
.btn-cta--header { padding: 13px 30px; font-size: 15px; }

.link-arrow { font-size: 17px; font-weight: 700; border-bottom-width: 2px; }

/* ---- ⑤ 画像：素の貼り付け → エディトリアルな額装＋ホバーで寄る ---------- */
/* 主役写真（強み・代表・コース）に共通の枠＋ズーム。overflow:hidden は既存。 */
.strength-card-media,
.message-media,
.course-card__bg-wrap {
  position: relative;
  box-shadow: 0 24px 60px rgba(13,31,60,.20);
}
.strength-card-media img,
.message-media img {
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.strength-card:hover .strength-card-media img,
.message-left:hover .message-media img { transform: scale(1.05); }

/* オレンジのオフセット罫（額装のアクセント）。写真の左下に効かせて単調さを消す */
.strength-card-media::after,
.message-media::after {
  content: "";
  position: absolute;
  left: -12px; bottom: -12px;
  width: 64px; height: 64px;
  border-left: 3px solid var(--color-primary-500);
  border-bottom: 3px solid var(--color-primary-500);
  pointer-events: none;
}

/* 悩みグリッドの写真タイル：ホバーで少し寄って"生きてる"感 */
.worry-item { overflow: hidden; }
.worry-item-bg { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.worry-item:hover .worry-item-bg { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .ffa-button, .ffa-button::after, .btn-cta,
  .strength-card-media img, .message-media img, .worry-item-bg { transition: none; }
  .ffa-button:hover, .btn-cta:hover { transform: none; }
  .strength-card:hover .strength-card-media img,
  .message-left:hover .message-media img,
  .worry-item:hover .worry-item-bg { transform: none; }
}

/* ---- ⑥ スプラッシュ：ロゴ・文字を画面いっぱいに ----------------------- */
.splash-logo-img {
  width: clamp(260px, 48vw, 660px);   /* 120-200 → 260-660 */
  margin: 0 auto clamp(20px, 3vw, 40px);
}
.splash-tagline {
  font-size: clamp(15px, 2.2vw, 24px);  /* 13 → 15-24 */
  letter-spacing: .55em;
  color: rgba(255,255,255,.55);
  margin-top: 10px;
}
.splash-catch {
  font-size: clamp(34px, 8.5vw, 104px);  /* 20-36 → 34-104：画面いっぱい */
  line-height: 1.02;
  margin-top: clamp(24px, 4vw, 48px);
}

/* =========================================================================
   ⚠ 制約に触れる可能性がある変更（Yutaro/先方と要確認）
   - ② ヒーロー見出し(.hero-title)フォントは Shippori Mincho B1（2026-06-29 先方確定）
     のため、ここでは"力強い明朝"の意図を尊重しフォントは変えず、太さ/サイズのみ強化。
     角ゴシックへ寄せる場合は先方の再確認が必要（下の1行をコメント解除して比較用に切替可）。
   ========================================================================= */
/* .hero-title, .splash-catch { font-family: "Noto Sans JP", sans-serif !important; font-weight: 900 !important; } */

/* ② ④ ヒーロー見出しは明朝のまま太さ・字間を強化（力感アップ） */
.hero-title { font-weight: 800; letter-spacing: .06em; }


/* =========================================================================
   2巡目（2026-07-25 追加フィードバック）
   ④ 統一の徹底（監査で外れ値を発見） ⑤ 代表名 ⑥ 合格実績 ② 斜め区切り ③ round化
   ========================================================================= */

/* ---- ④ 文字サイズ統一：監査で見つかった外れ値を是正 -------------------- */
/* 小見出しh3の不統一：course-name が 30px だった → 36px（strength/flowと統一） */
.course-card .course-name { font-size: var(--fs-h3); }

/* ボタンの文字サイズ混在（16/15）を統一 */
.ffa-button { font-size: 18px; }
.btn-cta { font-size: 17px; }
.hero-actions .ffa-button { font-size: 16px; }   /* ヒーローのみ横幅の都合で16 */

/* 補助テキストの最小サイズ底上げ（12〜14px の小さすぎを 15〜16px へ） */
.voice-more { font-size: 15px; }
.faq-q { font-size: 20px; }

/* ---- ⑤ 代表メッセージ：名前・肩書・経歴が小さい ------------------------ */
.message-role   { font-size: 16px; letter-spacing: .04em; }
.message-person { font-size: clamp(26px, 2.4vw, 32px); font-weight: 900; letter-spacing: .02em; }
.message-career-label    { font-size: 16px; }
.message-career-year     { font-size: 16px; }
.message-career-timeline li { font-size: 16px; line-height: 1.9; }

/* ---- ⑥ 合格実績：見出し・表・注記が小さく不揃い ------------------------ */
.achievement-table-head  { font-size: clamp(22px, 2vw, 28px); font-weight: 900; }
.achievement-table th    { font-size: 16px; }
.achievement-table td    { font-size: 20px; }     /* 本文と統一 */
.achievement-note        { font-size: 15px; }
.achievement-stat-label  { font-size: 16px; line-height: 1.6; }

/* ---- ② セクションの斜め区切り（対比の強い境目を斜めにカット）------------ */
/* clip-path で solid背景セクションの上下端を浅い角度で斜めに。前セクションが覗いて"斜めの継ぎ目"になる。
   セクション上下パディング(72px)内に収まる浅さ(約2.4vw)なので本文はカットしない。 */
.course {
  clip-path: polygon(0 2.4vw, 100% 0, 100% 100%, 0 calc(100% - 2.4vw));
  margin-top: -2vw;                 /* 継ぎ目を前セクションへ食い込ませる */
  padding-top: calc(var(--section-pad) + 2.4vw);
}
.line-cta-mid {
  clip-path: polygon(0 0, 100% 2.4vw, 100% 100%, 0 100%);
}
.flow {
  clip-path: polygon(0 2.4vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--section-pad) + 2.4vw);
}
@supports not (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  .course, .line-cta-mid, .flow { clip-path: none; }  /* 非対応ブラウザは通常の水平境界 */
}


/* =========================================================================
   3巡目（2026-07-25 追加フィードバック）
   カーソル撤去 / ヘッダー視認性 / ヒーロー視認性・border撤去・補足文字 / スプラッシュ画面内化 / 斜め区切りの色バグ修正
   ========================================================================= */

/* ---- カスタムカーソルは不要 → 通常カーソルへ戻す -------------------------- */
@media (hover: hover) and (pointer: fine) {
  body, a, button, .ffa-button, .btn-cta { cursor: auto; }
  a, button, .ffa-button, .btn-cta, .faq-q, .voice-more, .link-arrow { cursor: pointer; }
}
#cursor-dot, #cursor-ring { display: none !important; }

/* ---- ヘッダー文言の視認性（写真の上で白文字が沈む）----------------------- */
/* 未スクロール時だけ上部に暗いスクリムを敷き、白ナビ/ロゴを読めるようにする */
.site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(10,20,40,.62) 0%, rgba(10,20,40,.20) 60%, rgba(10,20,40,0) 100%);
}
.site-header:not(.is-scrolled) .gnav a,
.site-header:not(.is-scrolled) .logo-text { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.gnav a { font-weight: 700; }
.logo-text { font-weight: 700; }
/* サブページは最初から白背景ヘッダー（body.is-subpage）のため、
   写真背景用の黒text-shadowが残るとロゴ/ナビがぼやけて見える。無効化する。 */
body.is-subpage .site-header .gnav a,
body.is-subpage .site-header .logo-text { text-shadow: none; }

/* ---- ヒーロー：視認性UP・見出しを目立たせる・下線border撤去・補足文字拡大 --- */
/* 見出し下の下線（::after）は不要 */
.hero-title::after { display: none !important; }

/* 見出しを大きく＋強い影で写真から浮かせる（Shippori Mincho B1 800は据え置き=先方確定）
   ※「試験官の目が、」を1行に保てる上限に抑える（大きすぎると4行化して破綻） */
.hero-title {
  font-size: clamp(44px, 5.7vw, 84px);
  line-height: 1.16;
  text-shadow: 0 4px 30px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.45);
}
/* スマホは下限44pxのままだと「消防士を生む。」が2行に割れて計3行になる。
   ご指定の2行（試験官の目が／消防士を生む。）に収まるまで詰める（2026-08-03 今岡様ご指示①）。
   ※モバイル指定は上部（レスポンシブ節）にもあるが、このルールより前のため後勝ちで無効化されていた。 */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(30px, 8.4vw, 36px); }
}

/* 見出し周りに局所スクリム（画像全体は暗くせず、テキスト帯だけ沈める）。
   基底の width:600px を上書きし、大型見出しが2行（試験官の目が、／消防士を生む。）で収まる幅に広げる */
.hero-content { position: relative; width: min(720px, 90vw); max-width: 720px; }
.hero-content::before {
  content: "";
  position: absolute; inset: -32px -48px -32px -56px;
  background: radial-gradient(130% 105% at 22% 48%, rgba(6,13,26,.60) 0%, rgba(6,13,26,.30) 45%, rgba(6,13,26,0) 72%);
  z-index: -1; pointer-events: none;
}

/* 補足文字（「消防士採用試験 専門スクール」等）が小さい → 底上げ＋コントラスト */
.hero-cat   { font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; letter-spacing: .22em; color: rgba(255,255,255,.92); }
.hero-sub   { font-size: clamp(19px, 1.7vw, 23px); }
.hero-note  { font-size: clamp(15px, 1.3vw, 17px); color: rgba(255,255,255,.92); }
.hero-trust { font-size: clamp(14px, 1.15vw, 16px); color: rgba(255,255,255,.86); }

/* ---- スプラッシュ：文言が画面外へ出ないよう縮める（"画面いっぱい"は維持）--- */
.splash-logo-img { width: clamp(200px, 38vw, 440px); margin: 0 auto clamp(14px, 2.4vw, 28px); }
.splash-tagline  { font-size: clamp(13px, 1.7vw, 20px); }
.splash-catch    { font-size: clamp(30px, 6.2vw, 74px); line-height: 1.08; margin-top: clamp(18px, 3vw, 36px); }

/* ---- ② 斜め区切りの色バグ修正 ------------------------------------------- */
/* 2巡目の clip-path 方式はオレンジのグラデ角が"別色の帯"として出ていた。撤回し、
   前後が白のコース(message⇄course⇄flow)に「白のウェッジ」を重ねる方式へ（隣接色と完全一致で継ぎ目クリーン）。 */
.course, .flow, .line-cta-mid { clip-path: none !important; }
.course { margin-top: 0; padding-top: var(--section-pad); position: relative; }
.flow   { padding-top: var(--section-pad); }
.course::before, .course::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 3.4vw;
  background: var(--color-white); z-index: 1; pointer-events: none;
}
.course::before { top: -1px;    clip-path: polygon(0 0, 100% 0, 0 100%); }          /* 上辺: 左下がりの白斜め */
.course::after  { bottom: -1px; clip-path: polygon(0 100%, 100% 100%, 100% 0); }    /* 下辺: 右上がりの白斜め */
@supports not (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  .course::before, .course::after { display: none; }
}


/* =========================================================================
   4巡目（2026-07-25・frontend-design skill でブラッシュアップ）
   ヒーロー見出しの視認性再設計 / 斜め区切りを追加 / 実績数字を主役級に
   ========================================================================= */

/* ---- ヒーロー見出し：炎グラデ(上端が白へ抜けて写真に溶ける)を廃し、
        温白色ソリッド＋炎のアンダーグローで"常に読める炎"に。強調語だけ橙。 ---- */
.hero-title {
  background-image: none;
  -webkit-text-fill-color: #FFF6EC;
  color: #FFF6EC;
  animation: none;                    /* フリッカー廃止（明滅で可読性が落ちる・過剰モーション回避） */
  text-shadow:
    0 2px 4px  rgba(0,0,0,.55),
    0 10px 36px rgba(0,0,0,.5),
    0 0 46px   rgba(255,122,24,.30);  /* 炎のアンダーグロー（ブランドの火を光で残す） */
}
/* 感情の核「消防士」だけを炎の橙に（白地の中で一語が灯る） */
.hero-title-accent {
  -webkit-text-fill-color: #FF8A2B;
  color: #FF8A2B;
  text-shadow: 0 2px 5px rgba(0,0,0,.5), 0 0 28px rgba(255,122,24,.6);
}

/* 見出し帯の局所スクリムを強めて写真から確実に浮かせる */
.hero-content::before {
  inset: -36px -60px -40px -64px;
  background: linear-gradient(100deg, rgba(5,11,22,.72) 0%, rgba(5,11,22,.5) 40%, rgba(5,11,22,.12) 68%, rgba(5,11,22,0) 84%);
}

/* ---- ② 斜め区切りを増やす（高コントラストの navy⇄light 境界に）------------
   方式は course と同じ「隣接(前)セクション色の斜めウェッジを上端に重ねる」。
   前色: worry=navy / line-cta-1=navy / faq=white 。方向は交互。 */
.strength, .message { position: relative; }
.strength::before, .message::before, #line-cta-2::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: 3.4vw; z-index: 1; pointer-events: none;
}
/* worry(navy) → strength(light): 右上がり */
.strength::before { background: var(--color-secondary-900); clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* line-cta-1(navy) → message(white): 左下がり */
.message::before  { background: var(--color-secondary-900); clip-path: polygon(0 0, 100% 0, 0 100%); }
/* faq(white) → line-cta-2(navy): 右上がり */
#line-cta-2::before { background: var(--color-white); clip-path: polygon(0 0, 100% 0, 100% 100%); }
@supports not (clip-path: polygon(0 0, 1px 0, 0 1px)) {
  .strength::before, .message::before, #line-cta-2::before { display: none; }
}

/* ---- ③ 実績数字を主役級に（結果セクションの証明＝一番大きく）-------------- */
.achievement-stat-num {
  font-size: clamp(72px, 9vw, 132px);
  height: auto; line-height: .95;
  letter-spacing: -.02em;
}
.achievement-stat-num--ja { letter-spacing: .02em; }   /* 「全国」は日本語なので詰めすぎない */
.achievement-stat-plus { font-size: .5em; }
.achievement-stat-label { font-size: clamp(14px, 1.2vw, 17px); margin-top: 6px; }
/* 表の「合格者数」列も数字を強調（橙・太字）で読ませる */
.achievement-table td:last-child {
  font-weight: 900;
  color: var(--color-primary-400);
  font-size: clamp(20px, 1.7vw, 26px);
}

/* =========================================================================
   TOPページ ブラッシュアップ 追加修正（中村様FB・2026-07-26）
   統合直後の目視レビューで指摘された5点を修正。
   ========================================================================= */

/* ---- 斜め区切りを撤去（コース／LINE誘導②／強み／代表メッセージの境目） ---- */
.course::before, .course::after,
.strength::before, .message::before, #line-cta-2::before {
  display: none;
}

/* ---- ヒーロー見出し背後のローカルスクリムを撤去 ----
   楕円グラデーションに変えても矩形box自体の縁（テキストの上下）で
   既存の .hero-overlay（ページ全体の均一な暗幕）との境目が見えてしまうため、
   ローカルスクリム自体を廃止し、既存の全体オーバーレイ＋見出しのtext-shadowのみで
   視認性を確保する（本来 .hero-overlay 側で既に対応済みの領域と二重になっていた）。 */
.hero-content::before {
  display: none;
}

/* ---- ヘッダーの無料相談ボタン：本番既定の控えめなサイズへ戻す ----
   統合時に .btn-cta の後方定義に引っ張られ box-shadow が付き肥大化していた。 */
.btn-cta--header { padding: 11px 26px; font-size: 14px; box-shadow: none; }
.btn-cta--header:hover { transform: none; box-shadow: none; }

/* ---- 合格者の声：写真拡大に対して文字列幅が窮屈で改行過多だったため、
   カード幅を広げてテキスト列に余白を戻す（写真サイズは変更しない） ---- */
.voice-card { flex: 0 0 500px; }

/* ---- スマホの「合格者の声」（2026-08-03 今岡様ご指示③⑧）----
   上の 500px 指定より後ろに置いて後勝ちさせる（レスポンシブ節は前方にあり無効化されていた）。
   ③ 次のカードを画面端から覗かせ、横に続くことが一目で分かるようにする。
   ⑧ 「文章量が多い＝圧迫感」の実体は引用列の細さだったため、写真を小さくして
      テキストに幅を戻す（合格者ご本人の言葉は変えずに読みやすさを上げる）。 */
@media (max-width: 768px) {
  .voice-list { gap: 20px; padding-inline: 24px; }
  .voice-card { flex: 0 0 78vw; }
  .voice-scroll-hint { padding-inline: 24px; }
  .voice-portrait { flex-basis: 116px; width: 116px; height: 164px; }
  /* 2026-08-03（2巡目）今岡様ご指示: 引用の文字をもう一段小さくして圧迫感を下げる。
     前方の 16px 指定より後ろに置いて後勝ちさせる。 */
  .voice-quote { font-size: 14px; line-height: 1.75; }
  /* 自動スクロール中はスナップが引き戻してしまうため無効化する（手動操作は従来どおり可能） */
  .voice-list-outer.is-autoscroll { scroll-snap-type: none; }
  .voice-list-outer.is-autoscroll .voice-card { scroll-snap-align: none; }
}

/* ---- スプラッシュ最初の網線（グリッド装飾）は不要 ---- */
.splash-grid { display: none; }

/* ===== 2026-07-31 CMS化対応（追記のみ・既存ブロックは編集していない） ===== */

/* 旧アンカー（course-monthly-class 等）のエイリアス。実体を持たない高さ0のスパンで、
   .course-detail-block と同じ scroll-margin-top を持たせて着地位置を合わせる。 */
.course-anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 96px;
}

/* トップページのコース紹介カードがCPT連動になり枚数可変になったことへの対応。
   .course-list の2枚固定グリッド（739-746行）は編集せず、枚数別の上書きを
   デスクトップ幅限定（min-width:1025px）で追記する。モバイルの1列レイアウト
   （1273行の @media (max-width:1024px)）と衝突しないよう明示的に幅を絞る。 */
@media (min-width: 1025px) {
  .course-list--count-1 {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
  }
  .course-list--count-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
  }
  .course-list--count-3 .course-card {
    min-height: 480px;
  }
  /* 5枚・6枚は3列。5枚のとき最終行の2枚が左寄せで取り残されないよう、
     グリッドではなく中央寄せのフレックスで組む（2026-07-31 掲載枚数可変への対応）。 */
  .course-list--count-5,
  .course-list--count-6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
  }
  .course-list--count-5 > *,
  .course-list--count-6 > * {
    flex: 0 1 calc((100% - 48px) / 3);
    min-height: 480px;
  }
}

/* ============================================================
   Contact Form 7 互換スタイル（2026-07-31 CF7移植）
   既存の .contact-form 系デザインをCF7の出力へ適用する
   ============================================================ */
.contact-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.contact-form .wpcf7-spinner { display: block; margin: 8px auto 0; }
/* 応答メッセージ: 既存 .contact-form-message と同じ見た目に揃える */
.contact-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  border: none;
}
form.wpcf7-form.sent .wpcf7-response-output {
  background: rgba(46, 125, 50, 0.08);
  color: #2e7d32;
}
form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.aborted .wpcf7-response-output,
form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.unaccepted .wpcf7-response-output,
form.wpcf7-form.payment-required .wpcf7-response-output {
  background: rgba(198, 40, 40, 0.08);
  color: #c62828;
}
/* 項目ごとのエラー表示 */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #c62828;
}