/* =========================================================
   Fincs公式サイト site.css
   デザイントークン: 04-design-direction.md を :root に直訳
   コンポーネント: 05-component-spec.md（BEM、プレフィックス f-）
   ========================================================= */

/* ---------- 0. フォント（06 §5: サブセットwoff2をセルフホスト） ----------
   tools/subset-fonts.mjs が src/ 内で実際に使う字種だけを抽出して生成する。
   Google Fonts経由では49ファイル・929KBだったのを437KBに削減。
   配信するのは 400/500/700/900 の4ウェイトのみ。CSS側もこの4つ以外は書かないこと
   （600と書くと実装上は700で描画され、記述と実際がずれる）。 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hp/assets/fonts/noto-sans-jp-400.d76506d3.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hp/assets/fonts/noto-sans-jp-500.2b3cdff5.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/hp/assets/fonts/noto-sans-jp-700.a5f8d196.woff2) format("woff2");
}
/* 900は全ページのH1に出現する字だけを収録している（96字・33KB）。
   ⚠ H1以外で900を使うと、サブセットに無い字だけ他フォントで描画されて書体が混ざる
     （/companyのH1で「を」だけがBlackになる不具合が実際に起きた）。
     H1以外に900を使う場合は tools/subset-fonts.mjs の collectH1Chars を広げること */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/hp/assets/fonts/noto-sans-jp-900.345841a9.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hp/assets/fonts/instrument-serif-400.60c06664.woff2) format("woff2");
}

/* ---------- 1. デザイントークン（04 §2〜§4） ---------- */
:root {
  /* ブランドカラー */
  --fincs-blue: #2E4BFB;
  --fincs-cyan: #17CEF0;
  --fincs-gradient: linear-gradient(120deg, #2E4BFB, #17CEF0);

  /* ニュートラル */
  --ink-900: #17191C;
  --ink-700: #33363B;
  --ink-500: #6B7078;
  /* --ink-500 は --paper-warm 上で 4.45 しか出ずAAに届かないため、
     warm地に直接載る小さめの文字はこちらを使う（4.79） */
  --ink-500-warm: #666B73;
  /* カンプの #D9433C は白文字で4.26しか出ないため、AA(4.5)を満たす濃度に落とす */
  --alert-red: #C4352E;

  /* G09 ROIカードの枠線と数値。オーナー支給アイコンSVGに含まれる枠の色 */
  --roi-line: #0069DC;

  /* G11 Success Base。黄色は既存マーカーと同色、濃紺は明パネル上の文字用 */
  --accent-yellow: #FFE854;
  --support-ink: #143A72;

  /* G16 最終CTAのダーク地（オーナー支給デザイン） */
  --sfinal-navy: #191E40;

  /* ゴールド（G04タイムラインのゴールカード専用。ブランド3色の外側） */
  --gold-edge: linear-gradient(135deg, #C9A227 0%, #F0DCA6 22%, #A97F2E 48%, #E6CE8C 72%, #B4893A 100%);
  --gold-badge: linear-gradient(135deg, #E6CE8C, #B4893A);
  --gold-glow: 201, 162, 77;
  --paper: #FAF9F6;
  --paper-warm: #F4F2ED;
  --white: #FFFFFF;
  --line: #E5E2DB;

  /* セマンティック */
  --success: #0E9F6E;
  --error: #D92D20;

  /* タイポグラフィ */
  --font-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --text-hero: 4rem;        /* 64px / SP 40px */
  --text-h2: 2.75rem;       /* 44px / SP 30px */
  --text-h3: 1.75rem;       /* 28px / SP 22px */
  --text-stat: 4.5rem;      /* 72px / SP 44px */
  --text-body: 1.0625rem;   /* 17px / SP 16px */
  --text-caption: 0.8125rem;/* 13px */

  /* レイアウト */
  --container: 1152px;
  --container-pad: 24px;
  --section-y: 128px;

  /* 角丸・影 */
  --radius-card: 16px;
  --radius-shot: 12px;
  --radius-pill: 999px;
  --shadow-float: 0 1px 2px rgba(23, 25, 28, .06), 0 8px 24px rgba(23, 25, 28, .08);

  /* ヘッダー */
  --header-h: 72px;
}

@media (max-width: 600px) {
  :root {
    --text-hero: 2.5rem;   /* 40px */
    --text-h2: 1.875rem;   /* 30px */
    --text-h3: 1.375rem;   /* 22px */
    --text-stat: 2.75rem;  /* 44px */
    --text-body: 1rem;     /* 16px */
    --container-pad: 20px;
    --section-y: 72px;
  }
}
/* カンプ準拠: PCのページ左右余白は56px（1152コンテナ内） */
@media (min-width: 1024px) {
  :root { --container-pad: 56px; }
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden属性はコンポーネント側の display 指定に負けるため、リセットで優先させる */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-900);
  background: var(--paper);
  font-feature-settings: "tnum"; /* 04 §3: 数値の桁ズレ防止 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* フォーカス可視化（04 §8: 全インタラクティブ要素 2pxリング） */
:focus-visible {
  outline: 2px solid var(--fincs-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* reduced-motion で全アニメーション無効（04 §7 必須） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク（06 §8） */
.f-skip {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink-900);
  color: var(--white);
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 700;
  transition: top .15s ease;
}
.f-skip:focus-visible { top: 0; }

/* ---------- 3. レイアウト共通 ---------- */
.f-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* C15 セクションシェル */
.f-section { padding-block: var(--section-y); background: var(--paper); }
.f-section--warm { background: var(--paper-warm); }

/* 外部リンク（05 §4: 外部アイコン付与） */
.f-external::after {
  content: "↗";
  display: inline-block;
  margin-left: 4px;
  font-size: .85em;
  color: var(--ink-500);
}

/* スクロール出現（05 §4: .is-revealed 付与のみ。JSはreveal.js） */
.f-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease-out, transform .4s ease-out;
}
.f-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .f-reveal { opacity: 1; transform: none; }
}

/* ---------- 4. C03 ボタン f-btn ---------- */
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.f-btn__arrow { font-size: .85em; transition: transform .15s ease; }
.f-btn:hover .f-btn__arrow { transform: translateX(2px); }

/* サイズ: lg 56px / md 48px / sm 40px */
.f-btn--lg { height: 56px; padding-inline: 34px; font-size: 16px; }
.f-btn--md { height: 48px; padding-inline: 28px; font-size: 14px; }
.f-btn--sm { height: 40px; padding-inline: 22px; font-size: 13.5px; }

/* プライマリ: 黒ピル → hover でブルー（グラデーションボタン禁止） */
.f-btn--primary { background: var(--ink-900); color: var(--white); }
.f-btn--primary:hover { background: var(--fincs-blue); color: var(--white); }

/* ダーク背景上: 白地 */
.f-btn--inverse { background: var(--white); color: var(--ink-900); }
.f-btn--inverse:hover { background: var(--paper-warm); }

/* セカンダリ: ゴースト */
.f-btn--ghost { border: 1px solid var(--ink-900); background: transparent; color: var(--ink-900); }
.f-btn--ghost:hover { border-color: var(--fincs-blue); color: var(--fincs-blue); }
.f-section--dark .f-btn--ghost { border-color: rgba(255,255,255,.6); color: var(--white); }
.f-section--dark .f-btn--ghost:hover { border-color: var(--white); }

/* 送信中・無効（C14で使用） */
.f-btn[disabled], .f-btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* ---------- 5. C01 ヘッダー f-header ---------- */

/* ページ最上部のグラデーションアクセント（04 §2 ルール2④相当・カンプ準拠） */
.f-topbar { height: 5px; background: var(--fincs-gradient); }

.f-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.f-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  transition: height .2s ease;
}
/* 下スクロールで 72 → 60px（C01） */
.f-header.is-scrolled .f-header__inner { height: 60px; }

/* ロゴ画像は24pxだが、リンクとしての当たり判定は44px確保する（タップ領域の下限） */
.f-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.f-header__logo img { height: 24px; width: auto; }

.f-header__nav {
  display: flex;
  gap: 26px;
  font-size: 13.5px;
  font-weight: 500;
}
.f-header__nav a {
  color: var(--ink-700);
  transition: color .15s ease;
}
.f-header__nav a:hover {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.f-header__nav a[aria-current="page"] { color: var(--ink-900); font-weight: 700; }

.f-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
/* ログインは黒枠のピル。受講生がここから本体アプリへ入る導線なので、
   テキストリンクのままだと資料請求ボタンに埋もれて見つけられない */
.f-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 22px;
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.f-header__login:hover { border-color: var(--fincs-blue); color: var(--fincs-blue); }

/* ハンバーガー（<1024px） */
.f-header__toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 8px;
}
.f-header__toggle span:not(.visually-hidden) {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  transition: transform .2s ease, opacity .2s ease;
}
.f-header__toggle span:nth-child(1) { top: 17px; }
.f-header__toggle span:nth-child(2) { top: 25px; }
.f-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.f-header__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* フルスクリーンメニュー（<1024px）
   ヘッダーの兄弟要素として配置（backdrop-filter の包含ブロック問題を回避）。
   z-index はヘッダー(100)より下 → 半透明ヘッダー越しにロゴと閉じるボタンが見える */
.f-header__menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--container-pad) 40px;
  background: var(--paper);
  overflow-y: auto;
}
.f-header__menu[hidden] { display: none; }
.f-header__menu-nav {
  display: flex;
  flex-direction: column;
}
.f-header__menu-nav a {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 700;
}
.f-header__menu-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 32px;
}
/* ドロワー内では横幅いっぱいの黒枠ボタン（資料請求ボタンと同じ形に揃える） */
.f-header__menu-actions .f-header__login {
  display: flex;
  height: 48px;
  padding: 0 12px;
  font-size: 15px;
}
body.is-menu-open { overflow: hidden; }

@media (max-width: 1023px) {
  .f-header__nav, .f-header__actions { display: none; }
  .f-header__toggle { display: block; }
}
@media (min-width: 1024px) {
  .f-header__menu { display: none !important; }
}

/* ---------- 6. C02 フッター f-footer ---------- */
.f-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.f-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 72px var(--container-pad) 48px;
}
.f-footer__grid {
  display: flex;
  gap: 64px;
}
.f-footer__brand { flex: 1.4; }
.f-footer__brand img { height: 22px; width: auto; }
.f-footer__tagline {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-footer__col { flex: 1; }
.f-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-500);
}
.f-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
}
.f-footer__links a { color: var(--ink-700); transition: color .15s ease; }
.f-footer__links a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }

.f-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-500);
}

@media (max-width: 1023px) {
  .f-footer__grid { flex-wrap: wrap; gap: 40px; }
  .f-footer__brand { flex: 1 1 100%; }
  .f-footer__col { flex: 1 1 40%; }
}
@media (max-width: 600px) {
  .f-footer__inner { padding-top: 56px; }
  .f-footer__grid { flex-direction: column; gap: 32px; } /* C02: SPは縦積み */
  .f-footer__meta { margin-top: 48px; }
  /* モバイルは固定CTAバーと重ならない余白 */
  .f-footer__inner { padding-bottom: calc(48px + 64px + env(safe-area-inset-bottom)); }
}

/* ---------- 7. C16 モバイル固定CTAバー f-sticky-cta ---------- */
.f-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 8px var(--container-pad) calc(8px + env(safe-area-inset-bottom));
  background: rgba(250, 249, 246, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.f-sticky-cta.is-visible { transform: none; }
.f-sticky-cta .f-btn { width: 100%; max-width: 480px; }
.f-sticky-cta[hidden] { display: none; }

@media (min-width: 1024px) {
  .f-sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f-sticky-cta { transition: none; }
}

/* ---------- 8. S01 ヒーロー f-hero（C04） ---------- */
/* ヒーローの登場。**opacityを動かさない**のが要点。
   LCP要素（.f-hero__badge）はこのアニメーションの中にあり、opacity:0 起点にすると
   「アニメーションが始まるまで描画されない」状態になる。メインスレッドが混んでいる
   モバイルでは開始が数秒遅れ、実測でLCPのRender Delayが5,348msになっていた（11 §M-3）。
   transformだけなら初回描画で文字が出るのでLCPに影響しない */
@keyframes f-rise {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}
.f-hero {
  position: relative;
  overflow: hidden;
  /* 半透明ヘッダーの背後までメッシュ背景を届かせる（カンプではヘッダーがヒーロー内） */
  margin-top: calc(-1 * (var(--header-h) + 5px));
  padding-top: calc(var(--header-h) + 5px);
}

/* 背景1層目: 「上昇トレイル」シェーダーのCSS静的近似。
   初回ペイント（LCP）用の下地であり、WebGL不可・reduced-motion時はこれが最終表示になる。
   シェーダーと合わせるための対応:
     - レーン角: シェーダーは27.5°回転。CSSは軸がバンドに直交するので -27.5deg
     - ramp: 左下→右上へ露出（radial-gradientを右上に置いて再現）
     - 左側を base へ戻す: シェーダー末尾の smoothstep(0.58,0.0,uv.x)*0.66 に対応 */
.f-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(250, 249, 246, .92) 0%, rgba(250, 249, 246, .40) 42%, rgba(250, 249, 246, 0) 64%),
    repeating-linear-gradient(-27.5deg,
      rgba(46, 75, 251, 0) 0px, rgba(46, 75, 251, 0) 46px,
      rgba(46, 75, 251, .20) 50px, rgba(23, 206, 240, .22) 56px,
      rgba(46, 75, 251, 0) 61px, rgba(46, 75, 251, 0) 104px),
    radial-gradient(900px 620px at 92% 4%, rgba(23, 206, 240, .22), transparent 68%),
    radial-gradient(760px 560px at 68% 92%, rgba(46, 75, 251, .14), transparent 70%),
    #FAF9F6;
}

/* 背景2層目: WebGLメッシュ（hero.js）。初回描画完了で .is-ready を付けてフェードイン。
   描画できない場合は透明のまま＝1層目の静止背景が見える */
.f-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.f-hero__canvas.is-ready { opacity: 1; }

/* 背景3層目: オーバーレイ（カンプのz-index:1の2枚と同値。左側フェード＋右下の微暗） */
.f-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(250, 249, 246, .82) 0%, rgba(250, 249, 246, .42) 44%, rgba(250, 249, 246, 0) 68%),
    radial-gradient(1200px 460px at 78% 128%, rgba(23, 25, 28, .08), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .f-hero__canvas { display: none; }
}

.f-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 664px;
}

.f-hero__copy {
  flex: 0 0 470px;
  min-width: 0;
  animation: f-rise .9s ease both;
}

.f-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fincs-blue);
  box-shadow: 0 2px 8px rgba(46, 75, 251, .10);
}
.f-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fincs-blue);
  box-shadow: 0 0 0 4px rgba(46, 75, 251, .18);
}

.f-hero__title {
  margin-top: 18px;
  font-weight: 900;
  color: var(--ink-900);
  letter-spacing: .005em;
}
.f-hero__title-line {
  display: block;
  font-size: 78px;
  line-height: 1.12;
}
.f-hero__title-line--grad {
  background: linear-gradient(110deg, var(--fincs-blue), var(--fincs-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.f-hero__lead {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink-700);
  max-width: 25em;
  text-wrap: pretty;
}

.f-hero__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.f-hero__cta-main {
  padding: 16px 30px;
  height: auto;
  font-size: 15px;
  box-shadow: 0 8px 22px rgba(23, 25, 28, .22);
  transition: transform .15s ease, background-color .15s ease;
}
.f-hero__cta-main:hover { transform: translateY(-2px); }
.f-hero__cta-sub {
  padding: 14.5px 28px;
  height: auto;
  font-size: 15px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid var(--ink-900);
  color: var(--ink-900);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.f-hero__cta-sub:hover { background: var(--white); }

/* SCROLLインジケーター（コピー列の下・左端）。
   中央に置くと手前のトークカードと重なるため左に寄せている */
.f-hero__scroll {
  position: absolute;
  left: var(--container-pad);
  bottom: 26px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.f-hero__scroll-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-500);
}
.f-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(23, 25, 28, .35), transparent);
  animation: f-scrollhint 2.2s ease-in-out infinite;
}
@keyframes f-scrollhint {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}
@keyframes f-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ---- 浮遊UIカード3枚（3D遠近） ----
   前後関係は translateZ が担保する。z-index は使わない。
   親の transform-style: preserve-3d が無いと重なり順が壊れるので必須 */
.f-hero__visual {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  height: 560px;
}
.f-hero__cards {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 35% 50%;
  transform-style: preserve-3d;
}
.f-hcard {
  position: absolute;
  overflow: hidden;
  /* JS未実行・reduced-motion時にもこの基準transformで成立させる。
     JS側は data-base から毎フレーム組み直すので、値はHTMLと二重管理になる。
     変更するときは両方直すこと */
  will-change: transform;
}
.f-hcard--live {
  top: 0;
  right: 38px;
  width: 246px;
  border-radius: 14px;
  background: #0E0F12;
  transform: translateZ(70px) rotateY(-6deg) rotateX(1.5deg);
  box-shadow: 0 2px 6px rgba(23, 25, 28, .14), 0 26px 56px rgba(23, 25, 28, .34);
}
.f-hcard--stats {
  top: 84px;
  right: 4px;
  width: 520px;
  border-radius: 16px;
  background: var(--white);
  transform: translateZ(-60px) rotateY(-7deg) rotateX(2deg);
  box-shadow: 0 2px 6px rgba(23, 25, 28, .10), 0 36px 80px rgba(23, 25, 28, .30);
}
.f-hcard--talk {
  bottom: 8px;
  left: 10px;
  width: 286px;
  border-radius: 14px;
  background: #F7F6F3;
  transform: translateZ(120px) rotateY(-5deg) rotateX(1.5deg);
  box-shadow: 0 2px 6px rgba(23, 25, 28, .10), 0 30px 62px rgba(23, 25, 28, .32);
}

/* ① ライブ配信 */
.f-hcard__live-media { position: relative; line-height: 0; overflow: hidden; }
/* object-position は center。以前は top だったが、これは旧素材(cap-live3)向けの指定で、
   下端の入室ログを避けるためのものだった。現素材は動画の切り出しで**上端に動画自身の
   ラベル（「学びの道すじを、つくる」「NEW プラン別コンテンツ公開」）が入っており**、
   top のままだと LIVE / 視聴者数バッジと重なって読めない（§M-9） */
.f-hcard__live-media img,
.f-hcard__live-media video {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.f-hcard__badge {
  position: absolute;
  top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, .55);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}
.f-hcard__badge--live { left: 9px; }
.f-hcard__badge--count { right: 9px; }
.f-hcard__badge--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF4D4D;
  animation: f-pulse 1.6s ease infinite;
}
.f-hcard__live-foot {
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #B7BCC4;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ② 統計ダッシュボード（主役） */
.f-hcard__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid #EFECE5;
  background: #FBFAF7;
}
.f-hcard__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.f-hcard__chrome em {
  margin-left: 10px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
}
.f-hcard__stats-body { padding: 16px 17px 13px; }
.f-hcard__stats-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-hcard__stats-title span {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--fincs-blue);
}
/* キャンバスは親の実寸に追従させるので、親に明示的な高さが要る */
.f-hcard__chart { position: relative; height: 238px; margin-top: 12px; }
.f-hcard__chart canvas { width: 100%; height: 100%; display: block; }

/* ③ トークルーム（ライトモード） */
.f-hcard__talk-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  background: var(--white);
  border-bottom: 1px solid #ECEAE4;
}
.f-hcard__talk-head b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-hcard__talk-head i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 9px;
  color: var(--ink-500);
}
.f-hcard__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--fincs-gradient);
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}
.f-hcard__avatar--sm { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; }
.f-hcard__talk-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px 13px 0;
}
.f-hcard__msg { display: flex; align-items: flex-start; gap: 8px; }
.f-hcard__msg--me { justify-content: flex-end; }
.f-hcard__bubble {
  background: var(--white);
  border-radius: 4px 13px 13px 13px;
  padding: 8px 11px;
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(23, 25, 28, .06);
}
.f-hcard__bubble--me {
  max-width: 190px;
  background: #2E63FB;
  border-radius: 13px 4px 13px 13px;
  color: var(--white);
  box-shadow: none;
}
.f-hcard__chip {
  align-self: flex-start;
  margin-left: 32px;
  background: var(--white);
  border: 1px solid #ECEAE4;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 8.5px;
  color: var(--ink-500);
}
.f-hcard__talk-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px;
  background: var(--white);
  border: 1px solid #ECEAE4;
  border-radius: var(--radius-pill);
  padding: 8px 13px;
}
.f-hcard__talk-input span { flex: 1; font-size: 9.5px; color: var(--ink-400, #9AA0A8); }
.f-hcard__talk-input i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2E63FB;
  font-style: normal;
  font-size: 11px;
  color: var(--white);
}

/* SP: 1カラム。カードは主役の統計のみ残す（3枚を縮小すると文字が潰れて読めない）。
   マウス追従はタッチでは意味がないので perspective ごと無効化する */
@media (max-width: 1023px) {
  .f-hero__inner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding-top: 44px;
    padding-bottom: 36px;
    /* container-type: inline-size は上の 100cqw のためだけに置いていたので削除した。
       封じ込めを張ると副作用が読みにくいので、使わないなら持たない */
  }
  .f-hero__copy { flex: none; }
  .f-hero__title { letter-spacing: .01em; }
  .f-hero__title-line { font-size: 50px; line-height: 1.4; white-space: nowrap; }
  .f-hero__title-line--grad { line-height: 1.2; margin-top: 2px; }
  .f-hero__lead { margin-top: 18px; font-size: 14.5px; line-height: 1.95; max-width: none; }
  .f-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .f-hero__cta-main { justify-content: center; padding: 15px 0; font-size: 14.5px; }
  .f-hero__cta-sub { justify-content: center; padding: 13.5px 0; font-size: 14.5px; }
  .f-hero__scroll { display: none; }

  /* 統計カードは**等倍で横幅いっぱい**に置く。
     以前は520pxのカードを tan(atan2(長さ,長さ)) で求めた倍率に scale していたが、
     この「長さの割り算」ハックは相互運用性に難があり、**iOS(WebKit)でカードが回転して
     画面外に出る**不具合が出た（11 §M-9）。縮小をやめれば計算自体が不要になり、
     文字が縮んで潰れることもない。カード内部は padding と % 指定なので幅に追従し、
     グラフのcanvasは hero-cards.js が clientWidth/Height から描き直す */
  .f-hero__visual {
    flex: none;
    margin-top: 36px;
    /* デスクトップの height:560px を打ち消す。指定を消しただけだと
       560px が効いてカードの下に大きな余白が残る */
    height: auto;
  }
  .f-hero__cards {
    position: relative;
    inset: auto;
    width: 100%;
    /* タブレット幅では伸ばさず設計幅で止める。伸ばすと文字だけ元の大きさのまま
       間延びして見えるため */
    max-width: 520px;
    margin-inline: auto;
    height: auto;
    perspective: none;
    transform: none;
  }
  /* 3枚とも縦に積む。以前は「縮小すると文字が潰れる」という理由で統計以外を隠していたが、
     縮小をやめたので等倍で読める（2026-08-28 オーナー判断で3枚表示に変更・§M-9）。
     並び順はDOM順のまま（CSSのorderで入れ替えると読み上げ順と食い違うため） */
  .f-hero__cards { display: flex; flex-direction: column; gap: 16px; }
  .f-hcard--live, .f-hcard--talk {
    position: static;
    width: 100%;
    transform: none !important;
  }
  .f-hcard--stats {
    position: static;
    width: 100%;
    /* デスクトップの rotateY/rotateX と、JSがリサイズ跨ぎで残した inline transform の両方を消す。
       ここが効かないとカードが傾いたまま流し込まれる */
    transform: none !important;
    box-shadow: 0 2px 6px rgba(23, 25, 28, .10), 0 22px 48px rgba(23, 25, 28, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-hero__copy { animation: none !important; }
  .f-hcard__badge--live i, .f-hero__scroll-line { animation: none !important; }
}

/* JSによる逐次表示用（hidden属性は自前displayに負けるためクラスで制御） */
.is-hidden { display: none !important; }

/* PCのみ有効な改行／SPのみ有効な改行（04 §3: 改行位置をデザインで制御） */
.f-br-sp { display: none; }
@media (max-width: 600px) {
  .f-br-pc { display: none; }
  .f-br-sp { display: inline; }
}

/* ---------- 9. S02 実績バー f-stats（C05） ---------- */
.f-stats { background: var(--paper); }
.f-stats__divider {
  height: 2px;
  background: var(--fincs-gradient);
  opacity: .85;
}
.f-stats__grid {
  display: flex;
  padding-block: 52px;
}
.f-stats__item {
  flex: 1;
  padding-inline: 32px;
  border-left: 1px solid var(--line);
}
.f-stats__item:first-child { padding-left: 0; border-left: 0; }
.f-stats__item:last-child { padding-right: 0; }

.f-stats__num {
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-900);
}
.f-stats__unit { font-size: 24px; }
.f-stats__plus {
  font-size: 36px;
  vertical-align: 6px;
  background: var(--fincs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.f-stats__bar {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--fincs-gradient);
  margin-top: 12px;
}
.f-stats__label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
}
.f-stats__asof {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-500);
}

/* SP: 2×2グリッド（375pxアートボード 5a 準拠） */
@media (max-width: 1023px) {
  .f-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .f-stats__item { padding-inline: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .f-stats__grid { padding-block: 36px; }
  .f-stats__num { font-size: 38px; }
  .f-stats__unit { font-size: 19px; }
  .f-stats__plus { font-size: 26px; vertical-align: 4px; }
  .f-stats__bar { width: 30px; margin-top: 10px; }
  .f-stats__label { margin-top: 8px; font-size: 12px; }
  .f-stats__asof { margin-top: 2px; font-size: 10.5px; }
}

/* ---------- 10. S03 課題共感 f-empathy ---------- */
.f-empathy__inner { text-align: center; }
.f-empathy__title {
  font-size: 40px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-900);
}
.f-empathy__body {
  margin: 36px auto 0;
  font-size: 17px;
  line-height: 2.1;
  color: var(--ink-700);
  max-width: 37em;
  text-align: left;
  text-wrap: pretty;
}
.f-empathy__bar {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--fincs-gradient);
  margin: 44px auto 0;
}
.f-empathy__bridge {
  margin: 24px auto 0;
  font-size: 21px;
  line-height: 1.9;
  font-weight: 700;
  color: var(--ink-900);
}
@media (max-width: 600px) {
  .f-empathy__title { font-size: 22px; line-height: 1.7; }
  .f-empathy__body { margin-top: 28px; font-size: 15px; line-height: 2; }
  .f-empathy__bar { margin-top: 36px; }
  .f-empathy__bridge { margin-top: 20px; font-size: 17px; }
}

/* ---------- 11. S04 選ばれる理由 f-reason（C06） ---------- */
@keyframes f-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes f-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes f-row-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.f-reason-sec__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
}
.f-reason-sec__lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 38em;
  text-wrap: pretty;
}

.f-reason {
  display: flex;
  align-items: center;
  gap: 72px;
  margin-top: 112px;
}
.f-reason:first-of-type { margin-top: 104px; }
.f-reason--reverse { flex-direction: row-reverse; }

.f-reason__text { flex: 1 1 0; min-width: 0; }
.f-reason__num {
  font-family: var(--font-serif);
  font-size: 110px;
  line-height: 1;
  color: rgba(23, 25, 28, .12);
}
.f-reason__heading {
  margin-top: 18px;
  font-size: 28px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-900);
}
.f-reason__body {
  margin-top: 18px;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-700);
  text-wrap: pretty;
}

.f-reason__visual { flex: 0 0 480px; min-width: 0; }
.f-reason__visual--center { display: flex; justify-content: center; }

/* 理由1: 提案資料スライドカード（カンプのカルーセルを1枚目で静止表示） */
.f-reason__browser {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.f-reason__browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid #F0EEE8;
  background: var(--paper);
}
.f-reason__dots { display: flex; gap: 5px; }
.f-reason__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.f-reason__browser-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
}
.f-reason__browser-page { font-size: 10.5px; color: #9AA0A8; }

.f-reason__slides { overflow: hidden; }
.f-reason__slides-track {
  display: flex;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.f-reason__slide {
  flex: 0 0 100%;
  height: 300px;
  padding: 22px 24px;
}
.f-reason__slide-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--fincs-blue);
}
.f-reason__slide-title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-reason__plans { display: flex; gap: 12px; margin-top: 14px; }
.f-reason__plan {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
}
.f-reason__plan--hot {
  border: 1.5px solid var(--fincs-blue);
  background: #F7F9FF;
}
.f-reason__plan-label { font-size: 9.5px; font-weight: 700; color: var(--ink-500); }
.f-reason__plan--hot .f-reason__plan-label { color: var(--fincs-blue); }
.f-reason__plan-price {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink-900);
}
.f-reason__plan-price span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-500);
}
.f-reason__plan-list { margin-top: 8px; font-size: 9.5px; line-height: 1.8; color: var(--ink-700); }

/* スライド2: 週次カリキュラム */
.f-reason__slide-sub { margin-top: 4px; font-size: 9.5px; color: var(--ink-500); }
.f-reason__weeks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.f-reason__weeks p {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 9.5px;
  color: var(--ink-700);
}
.f-reason__weeks b { color: var(--fincs-blue); }

/* スライド3: コミュニティ設計セル */
.f-reason__cells {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.f-reason__cell {
  background: var(--paper);
  border-radius: 8px;
  padding: 11px 12px;
}
.f-reason__cell--hot { background: #EEF1FF; }
.f-reason__cell-title { font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-reason__cell--hot .f-reason__cell-title { color: var(--fincs-blue); }
.f-reason__cell-desc { margin-top: 3px; font-size: 9px; line-height: 1.7; color: var(--ink-500); }
.f-reason__cell--hot .f-reason__cell-desc { color: var(--ink-700); }

/* スライド4: 集客ファネル */
.f-reason__funnel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.f-reason__funnel-step {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.f-reason__funnel-step--dark { border: 0; background: var(--ink-900); color: #fff; }
.f-reason__funnel-step--grad { border: 0; background: var(--fincs-gradient); color: #fff; }
.f-reason__funnel-label { font-size: 9px; color: var(--ink-500); }
.f-reason__funnel-step--dark .f-reason__funnel-label { color: inherit; opacity: .7; }
.f-reason__funnel-step--grad .f-reason__funnel-label { color: inherit; opacity: .85; }
.f-reason__funnel-val { margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-reason__funnel-step--dark .f-reason__funnel-val,
.f-reason__funnel-step--grad .f-reason__funnel-val { color: inherit; font-size: 11px; }
.f-reason__funnel-arrow { color: #9AA0A8; font-size: 11px; }
.f-reason__funnel-note {
  margin-top: 14px;
  background: var(--paper);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 9.5px;
  line-height: 1.8;
  color: var(--ink-700);
}

/* 理由2: スマホモック（トークルーム） */
.f-reason__phone {
  width: 300px;
  background: #000;
  border-radius: 46px;
  padding: 10px;
  box-shadow: 0 28px 64px rgba(23, 25, 28, .35);
}
.f-reason__phone-screen {
  background: #0E0F12;
  border-radius: 37px;
  overflow: hidden;
  height: 560px;
  display: flex;
  flex-direction: column;
}
.f-reason__phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.f-reason__phone-batt {
  width: 16px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2.5px;
  display: inline-flex;
  padding: 1px;
  box-sizing: border-box;
}
.f-reason__phone-batt i { flex: 1; background: rgba(255, 255, 255, .85); border-radius: 1px; }
.f-reason__phone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.f-reason__phone-back { color: #fff; font-size: 16px; line-height: 1; }
.f-reason__phone-ch { min-width: 0; }
.f-reason__phone-ch-name { font-size: 12px; font-weight: 700; color: #fff; }
.f-reason__phone-ch-desc {
  margin-top: 2px;
  font-size: 9px;
  color: #8A8F98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-reason__phone-msgs {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.f-reason__phone-date {
  align-self: center;
  background: rgba(255, 255, 255, .08);
  color: #8A8F98;
  font-size: 8.5px;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.f-reason__msg {
  display: flex;
  gap: 8px;
  animation: f-msg-in .55s cubic-bezier(.22, 1, .36, 1) both;
}
.f-reason__msg--right { justify-content: flex-end; }
.f-reason__msg-av {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5A6472;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-reason__msg-av--grad { background: var(--fincs-gradient); }
.f-reason__msg-main { min-width: 0; max-width: 198px; }
.f-reason__msg-bubble {
  background: #1C1F26;
  border-radius: 4px 14px 14px 14px;
  padding: 8px 11px;
  font-size: 10.5px;
  line-height: 1.75;
  color: #F2F3F5;
}
.f-reason__msg--right .f-reason__msg-bubble {
  background: #2E63FB;
  border-radius: 14px 4px 14px 14px;
  color: #fff;
}
.f-reason__msg-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  background: #1C1F26;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  padding: 2.5px 8px;
  font-size: 8.5px;
  color: #B7BCC4;
}
.f-reason__msg-meta { margin-top: 4px; font-size: 8.5px; color: #8A8F98; }
.f-reason__msg--right .f-reason__msg-meta { text-align: right; }
.f-reason__phone-input {
  margin: 10px 12px 18px;
  background: #1C1F26;
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f-reason__phone-input span { font-size: 10px; color: var(--ink-500); }
.f-reason__phone-input i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2E63FB;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 理由3: 入金履歴カード */
.f-reason__paycard {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  padding: 26px 28px 20px;
}
.f-reason__paycard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f-reason__paycard-title { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.f-reason__paycard-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0A8A4A;
}
.f-reason__paycard-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0A8A4A;
  animation: f-pulse 2s ease infinite;
}
.f-reason__paycard-total {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--ink-900);
}
.f-reason__paycard-total span {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-500);
}
.f-reason__paycard-rows {
  margin-top: 14px;
  height: 270px;
  overflow: hidden;
}
.f-reason__payrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #F0EEE8;
  animation: f-row-in .55s cubic-bezier(.22, 1, .36, 1) both;
}
.f-reason__payrow-av {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #EEF1FF;
  color: var(--fincs-blue);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-reason__payrow-main { flex: 1; min-width: 0; }
.f-reason__payrow-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.f-reason__payrow-plan { margin-top: 1px; font-size: 10.5px; color: var(--ink-500); }
.f-reason__payrow-right { text-align: right; }
.f-reason__payrow-amt { font-size: 13px; font-weight: 700; color: #0A8A4A; }
.f-reason__payrow-time { margin-top: 1px; font-size: 10px; color: #9AA0A8; }
.f-reason__paycard-note {
  padding-top: 12px;
  border-top: 1px solid #F0EEE8;
  font-size: 10.5px;
  color: #9AA0A8;
}

/* 理由4: 会員管理スクリーンショット＋審査バッジ */
.f-reason__approve {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.f-reason__approve img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top center;
}

/* 端末モック（透過WebP・1:1）。器を外して地の上に直接置き、正方形のまま出す。
   cover で切ると端末が切れるので、高さ固定もトリミングもしない */
.f-reason__approve--phones {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.f-reason__approve--phones img {
  height: auto;
  object-fit: contain;
}
/* 端末モックの右上には端末が来るので、バッジは余白のある左上へ寄せる */
.f-reason__approve--phones .f-reason__approve-badge {
  top: 6px;
  right: auto;
  left: 0;
}
.f-reason__approve-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  box-shadow: 0 8px 24px rgba(23, 25, 28, .2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-reason__approve-badge i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0A8A4A;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SP: テキスト→ビジュアルの縦積み（C06） */
@media (max-width: 1023px) {
  .f-reason,
  .f-reason--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-top: 72px;
  }
  .f-reason:first-of-type { margin-top: 64px; }
  .f-reason__visual {
    flex: none;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
  .f-reason__num { font-size: 72px; }
  .f-reason__heading { font-size: 22px; }
  .f-reason__body { font-size: 15px; }
}

/* ---------- 12. S06 講師の声 f-voices / f-voice（C08・C20） ---------- */
.f-voices__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.f-voices__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
}
.f-voices__lead {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-700);
}
.f-voices__nav { display: flex; gap: 10px; }
.f-voices__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink-900);
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.f-voices__arrow:hover { background: var(--ink-900); color: var(--white); }

.f-voices__viewport {
  overflow: hidden;
  margin-top: 56px;
}
.f-voices__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.f-voice {
  flex: 0 0 480px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px 40px 36px;
  display: flex;
  flex-direction: column;
}
.f-voice__tagrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.f-voice__taglabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-500);
}
.f-voice__tag {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}
.f-voice__quote-mark {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: .6;
  color: var(--fincs-blue);
}
.f-voice__quote {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--ink-900);
  text-wrap: pretty;
}
.f-voice__hl {
  font-style: normal;
  background: linear-gradient(120deg, rgba(46, 75, 251, .20), rgba(23, 206, 240, .20)) 0 100% / 100% 9px no-repeat;
}
.f-voice__body {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.f-voice__body.is-open { -webkit-line-clamp: unset; }
/* 見た目の余白は据え置きたいので、marginを削った分をbuttonのpaddingに移して
   タップ領域だけを44pxに広げる（文字位置は元のまま） */
.f-voice__more { margin-top: 0; }
.f-voice__more button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  padding-block: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fincs-blue);
}
.f-voice__more button:hover { text-decoration: underline; text-underline-offset: 4px; }

.f-voice__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
}
.f-voice__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.f-voice__photo--contain {
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 6px;
}
.f-voice__photo--top { object-position: top center; }
.f-voice__name { font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.f-voice__role { margin-top: 2px; font-size: 12px; color: var(--ink-500); }
.f-voice__achv { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-900); }

.f-voice__course {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.f-voice__course img {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}
.f-voice__course-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.f-voice__course-note { margin-top: 2px; font-size: 11px; color: var(--ink-500); }

@media (max-width: 600px) {
  .f-voices__head { flex-wrap: wrap; }
  .f-voices__lead { font-size: 15px; }
  .f-voices__viewport { margin-top: 36px; }
  .f-voice { flex-basis: calc(100vw - 72px); padding: 28px 24px; }
  .f-voice__quote { font-size: 18px; }
}

/* ---------- 13. S07 機能 f-feats / f-featcard（C09） ---------- */
.f-feats__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
}
.f-feats__lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 40em;
  text-wrap: pretty;
}

.f-feats__group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 64px;
}
.f-feats__group-head:first-of-type { margin-top: 56px; }
.f-feats__group-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--fincs-blue);
}
.f-feats__group-name { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.f-feats__group-line { flex: 1; height: 1px; background: var(--line); }

.f-feats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.f-featcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.f-featcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.f-featcard[data-featcard-modal]:hover { border-color: var(--fincs-blue); }
.f-featcard--static { cursor: default; }
.f-featcard--wide {
  grid-column: span 2;
  display: flex;
  gap: 28px;
  align-items: center;
}
.f-featcard--wide .f-featcard__main { flex: 1; min-width: 0; }

/* カード背景テクスチャ（カンプのWebGL生成6種をキャプチャした静的PNG。k%6で巡回適用） */
.f-featcard[class*="f-featcard--bg"] {
  background-size: cover;
  background-position: center;
}
.f-featcard--bg1 { background-image: url(/hp/assets/img/card-bg-1.3842d465.webp); }
.f-featcard--bg2 { background-image: url(/hp/assets/img/card-bg-2.67bae0db.webp); }
.f-featcard--bg3 { background-image: url(/hp/assets/img/card-bg-3.3fee9a62.webp); }
.f-featcard--bg4 { background-image: url(/hp/assets/img/card-bg-4.b1ce8bf1.webp); }
.f-featcard--bg5 { background-image: url(/hp/assets/img/card-bg-5.3dbb7543.webp); }
.f-featcard--bg6 { background-image: url(/hp/assets/img/card-bg-6.d7620f83.webp); }

.f-featcard__open {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fincs-blue);
}
.f-featcard__name { margin-top: 14px; font-size: 16.5px; font-weight: 700; color: var(--ink-900); }
.f-featcard__desc { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--ink-500); }

/* モーダルを開くトリガー。見出し(h4)の中に <button> を置き、::after でカード全面を
   クリック領域にする。カード自体を role="button" にすると ARIA の
   「button の子孫は装飾扱い」規則で中の見出しが読み上げられなくなるため、
   見出しはボタンの外側（h4）に残したままこの形にしている。 */
.f-featcard__trigger {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.f-featcard__trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* カード内のモック（.f-mock-*）はDOM上あとに来るため、z-indexを上げないと
     オーバーレイがその下に敷かれてカード下半分がクリックできない */
  z-index: 2;
}
/* フォーカスリングはカード全体に出す（実体のボタンは見出しの文字幅しかないため） */
.f-featcard__trigger:focus-visible { outline: none; }
.f-featcard__trigger:focus-visible::after {
  outline: 2px solid var(--fincs-blue);
  outline-offset: 3px;
  border-radius: var(--radius-card);
}

/* ミニモック共通: ワイドカード右側 250px */
.f-mock-live, .f-mock-select, .f-mock-apps, .f-mock-talk, .f-mock-plans, .f-mock-step, .f-mock-stats { flex: 0 0 250px; }

/* ライブ配信モック */
.f-mock-live { background: var(--ink-900); border-radius: 12px; padding: 12px; }
.f-mock-live__screen {
  position: relative;
  height: 104px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1E2E66, #0E5B6E);
  overflow: hidden;
}
.f-mock-live__badge {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, .55);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.f-mock-live__badge span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF4D4D;
  animation: f-pulse 1.6s ease infinite;
}
.f-mock-live__viewers {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0, 0, 0, .55);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 9px;
  color: #fff;
}
.f-mock-live__caption {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
}
.f-mock-live__chat { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.f-mock-live__chat p {
  font-size: 8.5px;
  color: #B7BCC4;
  background: #1C1F26;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  width: fit-content;
}

/* 学習セレクションモック */
.f-mock-select { background: var(--paper); border: 1px solid #ECEAE4; border-radius: 12px; padding: 14px; }
.f-mock-select__title { font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-mock-select__list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.f-mock-select__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid #ECEAE4;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 9.5px;
  color: var(--ink-500);
}
.f-mock-select__item s { text-decoration: line-through; }
.f-mock-select__item.is-now { border: 1.5px solid var(--fincs-blue); font-weight: 700; color: var(--ink-900); }
.f-mock-select__item.is-now em { margin-left: auto; font-style: normal; font-size: 8px; font-weight: 700; color: var(--fincs-blue); }
/* 未着手の行。opacity:.6 だと文字が実測2.34でAAを割っていた（07 F3・11 §M-4）。
   opacityは0.9まで上げても4.00で届かないため、薄める手段を地色に変え、
   文字は --ink-500 のまま据え置く（#FAF9F6 上で 4.73）。
   「まだ着手していない」ことは灰色のリング（--idle）が引き続き示す */
.f-mock-select__item.is-next { background: var(--paper); border-color: #F1EFE9; }
.f-mock-select__check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0A8A4A;
  color: #fff;
  font-size: 8.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.f-mock-select__ring { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fincs-blue); flex: none; }
.f-mock-select__ring--idle { border-color: #D5D2CA; }

/* 外部アプリ連携モック */
.f-mock-apps { background: var(--paper); border: 1px solid #ECEAE4; border-radius: 12px; padding: 14px; }
.f-mock-apps__head { display: flex; align-items: baseline; justify-content: space-between; }
.f-mock-apps__head span:first-child { font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-mock-apps__head span:last-child { font-size: 8.5px; color: var(--ink-500); }
.f-mock-apps__list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.f-mock-apps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid #ECEAE4;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-mock-apps__item i {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--fincs-gradient);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.f-mock-apps__item em {
  margin-left: auto;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  color: var(--fincs-blue);
  background: #EEF1FF;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* トークルームモック */
.f-mock-talk { background: var(--ink-900); border-radius: 12px; padding: 12px; }
.f-mock-talk__head {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
}
.f-mock-talk__head span { margin-left: auto; font-size: 8px; font-weight: 400; color: #8A8F98; }
.f-mock-talk__msgs { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.f-mock-talk__msg { display: flex; gap: 6px; }
.f-mock-talk__msg--right { justify-content: flex-end; }
.f-mock-talk__av {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #5A6472;
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-mock-talk__av--grad { background: var(--fincs-gradient); }
.f-mock-talk__bubble {
  font-size: 8.5px;
  color: #F2F3F5;
  background: #1C1F26;
  border-radius: 3px 10px 10px 10px;
  padding: 5px 9px;
  line-height: 1.6;
}
.f-mock-talk__bubble--me { color: #fff; background: #2E63FB; border-radius: 10px 3px 10px 10px; }

/* スレッドモック（小カード内） */
.f-mock-thread {
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid #ECEAE4;
  border-radius: 10px;
  padding: 10px 12px;
}
.f-mock-thread__q { font-size: 9.5px; color: var(--ink-900); font-weight: 700; }
.f-mock-thread__replies {
  margin-top: 7px;
  border-left: 2px solid var(--line);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f-mock-thread__replies p { font-size: 9px; color: var(--ink-500); }
.f-mock-thread__count { margin-top: 8px; font-size: 8.5px; font-weight: 700; color: var(--fincs-blue); }

/* プラン設計モック */
.f-mock-plans { display: flex; gap: 8px; }
.f-mock-plans__box {
  flex: 1;
  background: var(--paper);
  border: 1px solid #ECEAE4;
  border-radius: 10px;
  padding: 12px;
}
.f-mock-plans__label { font-size: 8.5px; font-weight: 700; color: var(--fincs-blue); }
.f-mock-plans__price { margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.f-mock-plans__price span { font-size: 9px; color: var(--ink-500); font-weight: 400; }
.f-mock-plans__note { margin-top: 4px; font-size: 8.5px; line-height: 1.6; color: var(--ink-500); }

/* ステップ配信モック */
.f-mock-step { display: flex; align-items: center; gap: 6px; }
.f-mock-step__box {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.f-mock-step__label { font-size: 8.5px; font-weight: 700; color: var(--fincs-blue); }
.f-mock-step__name { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-mock-step__arrow { font-size: 9px; color: #9AA0A8; white-space: nowrap; }
.f-mock-step__dots { font-size: 12px; color: #9AA0A8; letter-spacing: 2px; }

/* 統計モック */
.f-mock-stats { background: var(--paper); border: 1px solid #ECEAE4; border-radius: 12px; padding: 14px; }
.f-mock-stats__head { display: flex; align-items: baseline; justify-content: space-between; }
.f-mock-stats__head span:first-child { font-size: 10px; font-weight: 700; color: var(--ink-900); }
.f-mock-stats__head span:last-child { font-size: 8.5px; color: var(--ink-500); }
.f-mock-stats__num { margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--ink-900); }
.f-mock-stats__num span { font-size: 11px; color: var(--ink-500); font-weight: 400; }
/* #0A8A4A は9px太字（=大文字扱いにならない）で実測4.20とAAを割っていた。
   4.76 になる #0A8046 へ（07 F3・11 §M-4）。丸バッジの方は白抜きなので変更不要 */
.f-mock-stats__num em { margin-left: 8px; font-style: normal; font-size: 9px; font-weight: 700; color: #0A8046; }
.f-mock-stats__bars {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}
.f-mock-stats__bars span {
  flex: 1;
  background: #D8DEF9;
  border-radius: 3px 3px 0 0;
}

/* フッター注記行 */
.f-feats__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
  font-size: 14px;
  color: var(--ink-700);
  flex-wrap: wrap;
}
.f-feats__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;       /* タップ領域の下限 */
  font-weight: 700;
  white-space: nowrap;
  color: var(--fincs-blue);
}
.f-feats__foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* SP: 1カラム化。ワイドカードは縦積み */
@media (max-width: 1023px) {
  .f-feats__grid { grid-template-columns: 1fr 1fr; }
  .f-featcard--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .f-feats__lead { font-size: 15px; }
  .f-feats__grid { grid-template-columns: 1fr; gap: 14px; }
  .f-featcard--wide {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
  }
  .f-mock-live, .f-mock-select, .f-mock-apps, .f-mock-talk, .f-mock-plans, .f-mock-step, .f-mock-stats { flex: none; }
  .f-feats__foot { justify-content: flex-start; gap: 12px; }
}

/* ---------- 14. S08 受講生体験 f-ux ---------- */
.f-ux__title {
  font-size: var(--text-h2);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-900);
}

.f-ux__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  margin-top: 72px;
  align-items: stretch;
}
/* 縦罫線は上下がフェードする1pxカラム（カンプ準拠） */
.f-ux__rule {
  background: linear-gradient(180deg, transparent, #D9D5CC 30%, #D9D5CC 70%, transparent);
}
.f-ux__item { padding: 8px 40px; }
.f-ux__item:first-child { padding-left: 0; }
.f-ux__item:last-child { padding-right: 0; }

.f-ux__num {
  font-family: var(--font-serif);
  font-size: 76px;
  line-height: 1;
  background: linear-gradient(160deg, var(--fincs-blue), var(--fincs-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.f-ux__heading {
  margin-top: 24px;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-900);
}
.f-ux__body {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-700);
  text-wrap: pretty;
}

/* 入会3ステップのフロー */
.f-ux__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.f-ux__flow-label { font-size: 13px; font-weight: 500; color: var(--ink-500-warm); }
.f-ux__step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}
.f-ux__step--last {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}
.f-ux__flow-arrow { color: var(--ink-500); }

@media (max-width: 1023px) {
  /* 罫線カラムを畳んで縦積み。区切りは各項目の上ボーダーで表現 */
  .f-ux__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 48px;
  }
  .f-ux__rule { display: none; }
  .f-ux__item { padding: 0; }
  /* 罫線spanはdisplay:noneでも兄弟として残るため、隣接(+)ではなく一般兄弟(~)で指定する */
  .f-ux__item ~ .f-ux__item { border-top: 1px solid #D9D5CC; padding-top: 40px; }
}
@media (max-width: 600px) {
  .f-ux__num { font-size: 60px; }
  .f-ux__heading { font-size: 19px; }
  /* 3ステップは横1行に収まらないため縦並びにし、矢印を下向きに回転させる
     （横並びのままだと折り返しで矢印が行末に取り残される） */
  .f-ux__flow {
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
  }
  .f-ux__flow-label { margin-bottom: 4px; }
  .f-ux__step { width: 100%; max-width: 260px; text-align: center; }
  .f-ux__flow-arrow { transform: rotate(90deg); }
}

/* ---------- 15. S09 料金 f-price（C10・04 §2ルール3の唯一のダークセクション） ---------- */
.f-price {
  position: relative;
  overflow: hidden;
  background: #0B1020;
  padding-block: var(--section-y);
}

/* 背景1層目: シェーダー出力のCSS静的近似（初回ペイント／フォールバック） */
.f-price__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 520px at 20% 12%, rgba(41, 77, 242, .62), transparent 66%),
    radial-gradient(680px 500px at 78% 30%, rgba(107, 61, 230, .52), transparent 68%),
    radial-gradient(720px 540px at 60% 92%, rgba(26, 168, 224, .42), transparent 68%),
    #0B1020;
}

/* 背景2層目: WebGLメッシュ（mesh.js の data-mesh="price"） */
.f-price__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.f-price__canvas.is-ready { opacity: 1; }

/* 背景3層目: 上下を締めるオーバーレイ（文字のコントラストを確保する役割）。
   中央stopはカンプの .25 では注記（12px）が4.5:1に届かなかったため .4 に濃くしている
   （実測した最明画素 rgb(31,130,227) に対して算出。04 §2ルール4のAA必須要件） */
.f-price__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 16, 32, .55) 0%, rgba(11, 16, 32, .4) 45%, rgba(11, 16, 32, .6) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .f-price__canvas { display: none; }
}

.f-price__inner { position: relative; z-index: 2; }

.f-price__title {
  font-size: var(--text-h2);
  line-height: 1.4;
  font-weight: 700;
  color: var(--white);
  text-align: center;
}
.f-price__lead {
  margin: 24px auto 0;
  font-size: 16.5px;
  line-height: 2;
  color: rgba(255, 255, 255, .72);
  max-width: 36em;
  text-align: center;
  text-wrap: pretty;
}

/* 手数料率＋決済手数料の大型数値 */
.f-price__fees {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 80px;
  margin-top: 72px;
}
.f-price__fee { text-align: center; }
.f-price__fee-label {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7); /* カンプは.6。AAの余裕確保のため引き上げ */
}
.f-price__fee-num {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 104px;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.f-price__fee-num span { font-size: 48px; }
.f-price__fee-bar {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--fincs-gradient);
  margin: 20px auto 0;
}
.f-price__plus {
  font-family: var(--font-serif);
  font-size: 44px;
  color: rgba(255, 255, 255, .35);
  padding-bottom: 28px;
}

/* 最低利用料。契約判断を最も左右する条件なので、12pxの※注記ではなく
   手数料率のすぐ下に独立した行として出す（見出しの「成功報酬型」だけを見て
   月額の下限を見落とすのを防ぐため） */
.f-price__floor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 14px;
  width: fit-content;
  margin: 40px auto 0;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.f-price__floor-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--white);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}
.f-price__floor-value {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.f-price__floor-note {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

/* 料金の重要な但し書き（最低利用料など）。カンプの白50%ではAA未達だったため75%に上げている */
.f-price__notes {
  margin: 44px auto 0;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .75);
  text-align: center;
}

/* 含まれるもの: 1pxの隙間を背景色で見せる横並び */
.f-price__specs {
  display: flex;
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 64px;
}
.f-price__spec {
  flex: 1;
  background: var(--ink-900);
  padding: 26px 24px;
  text-align: center;
}
.f-price__spec--wide { flex: 1.4; }
.f-price__spec--mid { flex: 1.2; }
.f-price__spec-label { font-size: 13px; color: rgba(255, 255, 255, .6); }
.f-price__spec-value { margin-top: 10px; font-size: 19px; font-weight: 700; color: var(--white); }

/* コンサルテーション小パネル */
.f-price__consult {
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-card);
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.f-price__consult-head { flex: none; }
.f-price__consult-title { font-size: 16px; font-weight: 700; color: var(--white); }
/* 「利用料+30%」を含む料金情報。カンプの白55%ではAA未達だったため70%に上げている */
.f-price__consult-sub { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.f-price__consult-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.f-price__consult-tags span {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
  white-space: nowrap;
}

.f-price__cta {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

@media (max-width: 1023px) {
  /* 含有スペックは2列グリッドへ。1pxギャップの見せ方は据え置き */
  .f-price__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .f-price__spec--wide, .f-price__spec--mid { flex: none; }
  .f-price__consult { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 600px) {
  .f-price__lead { font-size: 15px; }
  .f-price__fees { gap: 28px; margin-top: 48px; }
  .f-price__fee-num { font-size: 64px; }
  .f-price__fee-num span { font-size: 30px; }
  .f-price__plus { font-size: 30px; padding-bottom: 18px; }
  /* 狭い幅では丸ピルだと折り返しで不格好になるので角丸カードに切り替える */
  .f-price__floor {
    width: auto;
    margin-top: 32px;
    padding: 16px 20px;
    border-radius: 14px;
    text-align: center;
  }
  .f-price__floor-note { font-size: 12.5px; }
  .f-price__specs { grid-template-columns: 1fr; margin-top: 48px; }
  .f-price__spec { padding: 20px; }
  .f-price__cta { margin-top: 48px; }
  .f-price__cta .f-btn { width: 100%; }
}

/* ---------- 16. S10 業界向けサービス f-solutions / f-solcard（C13） ---------- */
.f-solutions__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
}
.f-solutions__lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 38em;
  text-wrap: pretty;
}

.f-solutions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.f-solcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}
.f-solcard__badge {
  display: inline-flex;
  border: 1px solid var(--line);
  color: var(--ink-500);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
/* カードはリンク（<a>）なので中身は span。ブロック整形は明示的に指定する */
.f-solcard__name { display: block; margin-top: 18px; font-size: 19px; font-weight: 700; color: var(--ink-900); }
.f-solcard__desc { display: block; margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ink-500); }

/* 近日募集カード: 提供前でも「先行案内を希望する」で問い合わせに繋ぐ。
   行き止まりのdivにしておくと、今ある需要を取りこぼすため */
.f-solcard--soon {
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.f-solcard--soon:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
  border-color: var(--fincs-blue);
}
.f-solcard--soon .f-solcard__desc { flex: 1; }
/* 提供中カードの「詳しく見る」と区別するため、こちらは控えめな色にする */
.f-solcard--soon .f-solcard__more { color: var(--ink-500); }
.f-solcard--soon:hover .f-solcard__more { color: var(--fincs-blue); }

/* 提供中カード（For School）: イラスト付き・リンク */
.f-solcard--live {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.f-solcard--live:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.f-solcard__art {
  display: block;
  background: linear-gradient(160deg, #EEF3FF, #E4F7FD);
  padding: 18px 18px 0;
}
.f-solcard__art img { width: 100%; height: auto; display: block; }
.f-solcard__body { display: block; padding: 22px 28px 30px; }
.f-solcard--live .f-solcard__name,
.f-solcard--live .f-solcard__desc { display: block; }
.f-solcard--live .f-solcard__name { margin-top: 14px; }
.f-solcard__badge--live {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
  padding: 4px 12px;
}
.f-solcard__more {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fincs-blue);
}

@media (max-width: 1023px) {
  .f-solutions__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .f-solutions__lead { font-size: 15px; }
  .f-solutions__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .f-solcard { padding: 24px; }
  .f-solcard--live { padding: 0; }
}

/* ---------- 17. S11 開始までの流れ f-flow（C11） ---------- */
.f-flow { border-top: 1px solid var(--line); }
.f-flow__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
}

.f-flow__steps {
  display: flex;
  align-items: stretch;
  margin-top: 64px;
}
.f-flow__step {
  flex: 1;
  text-align: center;
  padding-inline: 28px;
}
.f-flow__num {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  color: var(--ink-900);
}
.f-flow__bar {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--fincs-gradient);
  margin: 18px auto 0;
}
.f-flow__heading {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-flow__body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-700);
}
.f-flow__arrow {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--ink-500);
  font-size: 20px;
}

.f-flow__note {
  margin-top: 56px;
  font-size: 14px;
  color: var(--ink-500);
  text-align: center;
}

@media (max-width: 600px) {
  /* 375pxでは30pxだと「プ」だけが折り返されるため1行に収まるサイズに落とす */
  .f-flow__title { font-size: 26px; }
  /* 縦積み。矢印は下向きに回転させて流れを保つ */
  .f-flow__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 40px;
  }
  .f-flow__step { padding-inline: 0; }
  .f-flow__num { font-size: 44px; }
  .f-flow__heading { font-size: 18px; }
  .f-flow__arrow { justify-content: center; transform: rotate(90deg); }
  .f-flow__note { margin-top: 40px; }
}

/* ---------- 18. S12 FAQ f-faq（C12） ---------- */
.f-faq__inner {
  max-width: 880px;          /* カンプ準拠。他セクションより狭い */
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.f-faq__title {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
}

.f-faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 56px;
}

/* <details>/<summary>ベース。初期は全閉（05 C12） */
.f-faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.f-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  list-style: none;          /* Firefox等のデフォルトマーカーを消す */
}
.f-faq__q::-webkit-details-marker { display: none; }
/* 開閉インジケータ（カンプの ＋ / − と同じ見え方） */
.f-faq__q::after {
  content: "＋";
  flex: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-500);
}
.f-faq__item[open] .f-faq__q::after { content: "−"; }
.f-faq__q:focus-visible {
  outline: 2px solid var(--fincs-blue);
  outline-offset: -4px;
}

.f-faq__a {
  padding: 0 32px 26px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-700);
}

.f-faq__more {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
}
.f-faq__more a { font-weight: 700; color: var(--fincs-blue); }
.f-faq__more a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .f-faq__title { font-size: 26px; }
  .f-faq__list { margin-top: 36px; gap: 12px; }
  .f-faq__q { padding: 20px; font-size: 15px; }
  .f-faq__a { padding: 0 20px 22px; font-size: 14px; }
}

/* ---------- 19. S13 最終CTA f-final ---------- */
.f-final {
  background: var(--paper);
  /* カンプは下だけ 120px（フッター罫線との詰まりを避けるため） */
  padding: var(--section-y) 0 120px;
}
.f-final__inner { text-align: center; }
.f-final__title {
  font-size: 48px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-900);
}
.f-final__body {
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 34em;
  text-wrap: pretty;
}
.f-final__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
}
/* 最終CTAはヒーローより一段大きい（カンプ: padding 20px 44px / 17px） */
.f-final__cta {
  height: auto;
  padding: 20px 44px;
  font-size: 17px;
  gap: 12px;
}
.f-final__sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;       /* タップ領域の下限 */
  font-size: 14px;
  font-weight: 500;
  color: var(--fincs-blue);
}
.f-final__sub:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .f-final { padding-bottom: 80px; }
  .f-final__title { font-size: 28px; line-height: 1.5; }
  .f-final__body { margin-top: 22px; font-size: 15px; }
  .f-final__actions { margin-top: 32px; align-items: stretch; }
  .f-final__cta { justify-content: center; padding: 17px 24px; font-size: 15px; }
  .f-final__sub { text-align: center; }
}

/* ---------- 20. 簡易ヘッダー／パンくず（C17） ---------- */
/* 資料請求などCV集中ページ用: ロゴ＋パンくずのみ（ナビとCTAを置かない） */
.f-header--min { background: rgba(250, 249, 246, .85); border-bottom: 1px solid rgba(229, 226, 219, .7); }
.f-header--min .f-header__inner { gap: 24px; }

/* パンくず＋（任意の）CTAを右寄せで横並びにする */
.f-header__sub-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.f-breadcrumb {
  font-size: 12.5px;
  color: var(--ink-500);
  white-space: nowrap;
}
/* 狭い画面ではパンくずを隠す（ロゴがトップへのリンク、H1が現在地を示すため情報は失われない。
   検索エンジン向けの階層情報はBreadcrumbList構造化データで担保する） */
@media (max-width: 767px) {
  .f-breadcrumb { display: none; }
}
.f-breadcrumb a { color: var(--ink-500); }
.f-breadcrumb a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }
.f-breadcrumb__sep { margin: 0 8px; }
.f-breadcrumb [aria-current="page"] { color: var(--ink-900); font-weight: 500; }

/* ---------- 21. 資料請求 /request（C14） ---------- */
.f-request { position: relative; overflow: hidden; }
.f-request__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 8% -8%, rgba(46, 75, 251, .09), transparent 68%),
    radial-gradient(560px 380px at 88% 6%, rgba(23, 206, 240, .08), transparent 70%);
}
.f-request__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 72px;
  align-items: flex-start;
  padding-block: 80px 112px;
}
.f-request__lead-col { flex: 1 1 0; min-width: 0; padding-top: 8px; }

.f-request__title {
  font-size: 40px;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink-900);
}
.f-request__lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 30em;
  text-wrap: pretty;
}

/* 実績ミニバー（縦並び・左罫線） */
.f-request__stats {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 48px;
  border-left: 1px solid var(--line);
  padding-left: 32px;
}
.f-request__stat-num {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-900);
}
.f-request__stat-unit { font-size: 19px; }
.f-request__stat-plus {
  font-size: 24px;
  vertical-align: 4px;
  background: var(--fincs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.f-request__stat-label { margin-top: 6px; font-size: 12.5px; color: var(--ink-700); }
.f-request__stat-label span { color: var(--ink-500); font-size: 11px; }

/* 講師の声（1本） */
.f-request__voice {
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 30px;
  max-width: 420px;
}
.f-request__voice-mark {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: .6;
  color: var(--fincs-blue);
}
.f-request__voice-quote {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--ink-900);
}
.f-request__voice-body { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--ink-700); }
.f-request__voice-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.f-request__voice-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.f-request__voice-name { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.f-request__voice-role { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-500); }

/* ---------- 22. フォームカード＋入力欄（C14） ---------- */
.f-formcard {
  flex: 0 0 480px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(23, 25, 28, .06), 0 8px 24px rgba(23, 25, 28, .06);
  padding: 40px;
}
.f-formcard__title { font-size: 20px; font-weight: 700; color: var(--ink-900); }

.f-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 28px;
}
.f-field__label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.f-field__req { color: var(--error); font-size: 11px; }
.f-field__opt { color: var(--ink-500); font-size: 11px; font-weight: 500; }

.f-field__input {
  margin-top: 8px;
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  /* ユーザー入力の文字はサブセット外の漢字がありうるため、フォント指定は
     Noto Sans JPを先頭に置きつつシステムフォントへ自然に落ちるようinheritで揃える */
  font-family: inherit;
  color: var(--ink-900);
  background: var(--paper);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.f-field__input--area {
  height: auto;
  padding: 12px 14px;
  line-height: 1.8;
  resize: vertical;
}
.f-field__input:focus {
  border-color: var(--fincs-blue);
  box-shadow: 0 0 0 2px rgba(46, 75, 251, .2);
  background: var(--white);
}
/* エラーは文言＋色＋アイコンの三重表現（C14） */
.f-field__input.is-invalid {
  border-color: var(--error);
  background: #FEF6F5;
}
.f-field__input.is-invalid:focus { box-shadow: 0 0 0 2px rgba(217, 45, 32, .2); }
.f-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--error);
}
.f-field__error::before {
  content: "⚠";
  flex: none;
  font-size: 12px;
}

/* honeypot: 視覚・支援技術・タブ順のいずれからも外す */
.f-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.f-form__submit {
  justify-content: center;
  height: auto;
  padding: 17px 0;
  font-size: 15.5px;
}
/* 送信中はラベルの前にスピナーを出す */
.f-form.is-sending .f-form__submit-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: f-spin .7s linear infinite;
}
@keyframes f-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .f-form.is-sending .f-form__submit-label::before { animation: none; }
}

.f-form__status {
  margin-top: -6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-700);
}
.f-form__status.is-error { color: var(--error); }

.f-formcard__promises {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.f-formcard__promises li {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-700);
}
.f-formcard__promises span { color: var(--success); font-weight: 700; }
.f-formcard__fallback {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-500);
}
.f-formcard__fallback a { color: var(--fincs-blue); }
.f-formcard__fallback a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* SPはフォーム先行（04 §10のページ別指針） */
@media (max-width: 1023px) {
  .f-request__inner {
    flex-direction: column;
    gap: 48px;
    padding-block: 48px 80px;
  }
  .f-formcard { flex: none; width: 100%; order: -1; }
  .f-request__voice { max-width: none; }
}
@media (max-width: 600px) {
  .f-request__title { font-size: 26px; line-height: 1.6; }
  .f-request__lead { margin-top: 18px; font-size: 15px; }
  .f-request__stats { margin-top: 36px; padding-left: 20px; gap: 18px; }
  .f-request__stat-num { font-size: 30px; }
  .f-formcard { padding: 24px 20px; }
  .f-formcard__title { font-size: 18px; }
}

/* ---------- 23. 送信完了 /request/thanks ---------- */
.f-thanks { position: relative; overflow: hidden; }
.f-thanks__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 50% -10%, rgba(46, 75, 251, .10), transparent 68%),
    radial-gradient(520px 360px at 78% 12%, rgba(23, 206, 240, .08), transparent 70%);
}
.f-thanks__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
  padding-block: 120px 140px;
}
.f-thanks__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--fincs-gradient);
  color: var(--white);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-thanks__title {
  margin-top: 28px;
  font-size: 34px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-900);
}
.f-thanks__body {
  margin-top: 20px;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-700);
}
/* /contact/thanks のFAQ導線。返信を待たずに自己解決できる経路を残す */
.f-thanks__notice {
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
}
.f-thanks__notice-title { font-size: 15px; font-weight: 700; color: var(--ink-900); }
.f-thanks__notice-body { margin-top: 6px; font-size: 14px; line-height: 1.9; color: var(--ink-700); }
.f-thanks__notice p:last-child { margin-top: 10px; }
.f-thanks__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}
.f-thanks__sub { font-size: 14px; font-weight: 500; color: var(--fincs-blue); }
.f-thanks__sub:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .f-thanks__inner { padding-block: 72px 90px; }
  .f-thanks__title { font-size: 24px; }
  .f-thanks__body { font-size: 15px; }
  .f-thanks__notice { padding: 20px 20px; }
  .f-thanks__actions { align-items: stretch; }
  .f-thanks__actions .f-btn { justify-content: center; text-align: center; }
}

/* ---------- 24. 業界向けサービス /solutions（C13） ---------- */
.f-solpage { position: relative; overflow: hidden; }
.f-solpage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(760px 420px at 12% -8%, rgba(46, 75, 251, .08), transparent 68%);
}
.f-solpage__inner { position: relative; z-index: 1; padding-block: 96px 128px; }
.f-solpage__title { font-size: 52px; line-height: 1.3; font-weight: 900; color: var(--ink-900); }
.f-solpage__lead {
  margin-top: 26px;
  font-size: 17px;
  line-height: 2;
  color: var(--ink-700);
  max-width: 40em;
  text-wrap: pretty;
}
.f-solpage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}
.f-solpage__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px;
}
.f-solpage__card--live { transition: transform .15s ease, box-shadow .15s ease; }
.f-solpage__card--live:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.f-solpage__badge {
  display: inline-flex;
  border: 1px solid var(--line);
  color: var(--ink-500);
  border-radius: var(--radius-pill);
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.f-solpage__badge--live {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
  padding: 4px 14px;
}
.f-solpage__name { margin-top: 20px; font-size: 26px; font-weight: 700; color: var(--ink-900); }
.f-solpage__desc {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-700);
  text-wrap: pretty;
}
.f-solpage__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fincs-blue);
}
.f-solpage__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-solpage__cta { margin-top: 26px; }

@media (max-width: 600px) {
  .f-solpage__inner { padding-block: 56px 80px; }
  .f-solpage__title { font-size: 32px; }
  .f-solpage__lead { font-size: 15px; }
  .f-solpage__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .f-solpage__card { padding: 28px 24px; }
  .f-solpage__name { font-size: 22px; }
}

/* ---------- 25. 運営会社 /company（最も文書的・大型タイポ） ---------- */
.f-company__inner {
  max-width: 880px;
  margin-inline: auto;
  padding: 72px var(--container-pad) 128px;
}
.f-company__logo { height: 30px; width: auto; }
.f-company__title {
  margin-top: 44px;
  font-size: 48px;
  line-height: 1.6;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink-900);
}
.f-company__hero {
  margin-top: 72px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.f-company__hero img { width: 100%; height: 380px; object-fit: cover; }

.f-company__section { margin-top: 104px; }
.f-company__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--fincs-blue);
}
.f-company__h2 {
  margin-top: 16px;
  font-size: 34px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-900);
}

.f-company__creed-lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-700);
  text-wrap: pretty;
}
.f-company__creeds {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 36px;
}
.f-company__creed { display: flex; gap: 28px; align-items: baseline; }
.f-company__creed-num {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: rgba(23, 25, 28, .16);
  flex: none;
  width: 52px;
}
.f-company__creed-body { font-size: 15px; line-height: 2; color: var(--ink-700); min-width: 0; }
.f-company__creed-closing {
  margin-top: 36px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-700);
}

.f-company__trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 44px;
}
.f-company__trust-row {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 32px;
  display: flex;
  gap: 28px;
  align-items: baseline;
}
.f-company__trust-row dt { flex: 0 0 160px; font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.f-company__trust-row dd { font-size: 14px; line-height: 1.9; color: var(--ink-700); }

.f-company__photos { display: flex; gap: 16px; margin-top: 112px; }
.f-company__photos figure { border-radius: var(--radius-card); overflow: hidden; }
.f-company__photos figure:first-child { flex: 1.2; }
.f-company__photos figure:last-child { flex: 1; }
.f-company__photos img { width: 100%; height: 260px; object-fit: cover; }

.f-company__overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.f-company__overview-head img { height: 20px; width: auto; opacity: .9; }
.f-company__table { margin-top: 28px; border-top: 1px solid var(--line); }
.f-company__table-row {
  display: flex;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.f-company__table-row dt { flex: 0 0 200px; font-size: 13.5px; font-weight: 700; color: var(--ink-500); }
.f-company__table-row dd { font-size: 14.5px; color: var(--ink-900); }
.f-company__table-row a { color: var(--fincs-blue); }
.f-company__table-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .f-company__inner { padding-block: 48px 80px; }
  .f-company__title { margin-top: 28px; font-size: 26px; line-height: 1.7; }
  .f-company__hero { margin-top: 44px; }
  .f-company__hero img { height: 220px; }
  .f-company__section { margin-top: 64px; }
  .f-company__h2 { font-size: 24px; }
  .f-company__creed { gap: 16px; }
  .f-company__creed-num { font-size: 30px; width: 34px; }
  .f-company__trust-row { flex-direction: column; gap: 8px; padding: 20px 22px; }
  .f-company__trust-row dt { flex: none; }
  .f-company__photos { flex-direction: column; margin-top: 64px; }
  .f-company__photos img { height: 200px; }
  .f-company__table-row { flex-direction: column; gap: 6px; padding: 18px 0; }
  .f-company__table-row dt { flex: none; }
}

/* ---------- 26. お問い合わせ /contact 固有 ---------- */
/* 受講者向けの誘導ボックス */
.f-notice {
  margin-top: 32px;
  background: #EEF1FF;
  border: 1px solid rgba(46, 75, 251, .18);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  max-width: 34em;
}
.f-notice__title { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.f-notice__body { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: var(--ink-700); }
.f-notice__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fincs-blue);
}
.f-notice__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.f-request__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  max-width: 34em;
}
.f-request__info dt { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.f-request__info dd { margin-top: 6px; font-size: 13.5px; line-height: 1.9; color: var(--ink-700); }
.f-request__info a { color: var(--fincs-blue); }
.f-request__info a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 区分に応じた条件表示（form.jsが .is-hidden を付け外しする。JS無効時は常時表示） */
.f-form__hint {
  margin-top: -8px;
  background: var(--paper);
  border-left: 2px solid var(--fincs-blue);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-700);
}
.f-form__hint a { color: var(--fincs-blue); font-weight: 700; }

/* ---------- 27. 404 ---------- */
.f-notfound__code {
  font-family: var(--font-serif);
  font-size: 96px;
  line-height: 1;
  background: var(--fincs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.f-notfound__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .f-notfound__code { font-size: 68px; }
  .f-notfound__links { flex-direction: column; align-items: stretch; }
  .f-notfound__links .f-btn { justify-content: center; }
}

/* ---------- 28. 規約系4ページ f-legal（03 P7: 共通の軽量テンプレート） ---------- */
.f-legal__inner {
  max-width: 820px;
  margin-inline: auto;
  padding: 96px var(--container-pad) 112px;
}
.f-legal__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--fincs-blue);
}
.f-legal__title {
  margin-top: 16px;
  font-size: 36px;
  line-height: 1.5;
  font-weight: 900;
  color: var(--ink-900);
}
.f-legal__intro {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--ink-700);
  text-wrap: pretty;
}
.f-legal__intro:first-of-type { margin-top: 36px; }

/* 目次（ページ内リンク） */
.f-legal__toc {
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 30px;
}
.f-legal__toc-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-500);
}
/* リセットはクラス付きul/olのみ対象なので、目次のul（クラスなし）は個別に潰す */
.f-legal__toc ul { margin-top: 14px; list-style: none; padding-left: 0; }
.f-legal__toc > ul > li { margin-top: 12px; }
.f-legal__toc > ul > li:first-child { margin-top: 0; }
.f-legal__toc > ul > li > a { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.f-legal__toc-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  margin-top: 10px !important;
  padding-left: 2px;
}
.f-legal__toc-sub a { font-size: 13px; color: var(--ink-700); }
.f-legal__toc a:hover { color: var(--fincs-blue); text-decoration: underline; text-underline-offset: 3px; }

/* 章／条 */
.f-legal__chapter {
  margin-top: 56px;
  padding: 14px 0;
  border-top: 2px solid var(--ink-900);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.f-legal__article {
  margin-top: 32px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.f-legal__article-title { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.f-legal__body {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--ink-700);
}
.f-legal__body + .f-legal__body { margin-top: 0; }
.f-legal__body a { color: var(--fincs-blue); }
.f-legal__body a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 番号付きカード（反社方針） */
.f-legal__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 30px;
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin-top: 14px;
}
.f-legal__card:first-of-type { margin-top: 40px; }
.f-legal__card-num {
  flex: none;
  width: 28px;
  font-family: var(--font-serif);
  font-size: 28px;
  color: rgba(23, 25, 28, .3);
}
.f-legal__card-title { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.f-legal__card-body { margin-top: 6px; font-size: 13.5px; line-height: 1.9; color: var(--ink-700); }

/* 定義表（特商法） */
.f-legal__table { margin-top: 44px; border-top: 1px solid var(--line); }
.f-legal__row {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.f-legal__row dt { flex: 0 0 220px; font-size: 13.5px; font-weight: 700; color: var(--ink-500); }
.f-legal__row dd { flex: 1; }
.f-legal__row-line { font-size: 14px; line-height: 1.9; color: var(--ink-900); }
/* 2行目以降は補足なので一段小さく（カンプ準拠） */
.f-legal__row-line + .f-legal__row-line {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.f-legal__row-line a { color: var(--fincs-blue); }
.f-legal__row-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

.f-legal__note {
  margin-top: 40px;
  font-size: 13px;
  color: var(--ink-500);
}

@media (max-width: 600px) {
  .f-legal__inner { padding-block: 56px 80px; }
  .f-legal__title { font-size: 26px; }
  .f-legal__intro { font-size: 14px; }
  .f-legal__toc { padding: 20px 22px; }
  .f-legal__toc-sub { grid-template-columns: 1fr; }
  .f-legal__chapter { margin-top: 44px; font-size: 16px; }
  .f-legal__card { flex-direction: column; gap: 8px; padding: 20px 22px; }
  .f-legal__row { flex-direction: column; gap: 8px; }
  .f-legal__row dt { flex: none; }
}
/* ロゴ横の「for School」ラベル */
.f-header__suffix {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  border-left: 1px solid var(--line);
  padding-left: 20px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .f-header__suffix { font-size: 12px; padding-left: 12px; }
}

/* 蛍光ペン風のマーカー（下寄せグラデーション） */
mark {
  background: linear-gradient(transparent 62%, rgba(46, 75, 251, .16) 62%);
  color: inherit;
}

/* ---------- G01 ヒーロー ---------- */
.f-shero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * (var(--header-h) + 5px));
  padding-top: calc(var(--header-h) + 5px);
}

/* 背景3層目: 白文字のコントラストを確保するためのオーバーレイ。
   最小濃度0.34は実測から決めた値（これを下げると本文の白文字がAA未達になる） */
.f-shero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 40, 84, .40) 0%, rgba(4, 40, 84, .34) 42%, rgba(4, 40, 84, .46) 100%);
}
@keyframes f-gold-glow {
  0%, 100% { opacity: .3; }
  50% { opacity: .95; }
}
.f-roi__hl { color: var(--roi-line); }
.f-roi__u { font-size: 21px; }
.f-roi__op { font-size: 19px; font-weight: 700; color: var(--ink-700); }
.f-roi__muted { color: var(--ink-500); }
.f-roi__down { flex-basis: 100%; color: var(--roi-line); font-size: 22px; line-height: 1; }
/* 3枚目のみ、ロゴと金額を1行に並べる */
.f-roi__fincs { display: inline-flex; align-items: center; gap: 14px; }
.f-roi__fincs img { display: inline-block; height: 27px; width: auto; }

@media (max-width: 767px) {
  .f-roi__u { font-size: 16px; }
  .f-roi__op { font-size: 16px; }
  .f-roi__down { font-size: 19px; }
  .f-roi__fincs { gap: 10px; }
  .f-roi__fincs img { height: 21px; }
}

/* ---------- 30. 機能モーダル f-modal ---------- */
.f-modal {
  border: 0;
  padding: 0;
  background: var(--paper);
  border-radius: 20px;
  max-width: 960px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  box-shadow: 0 40px 100px rgba(23, 25, 28, .4);
  animation: f-msg-in .25s ease both;
}
.f-modal::backdrop {
  background: rgba(23, 25, 28, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.f-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 36px 0;
}
.f-modal__head > div { flex: 1; }
.f-modal__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--fincs-blue);
}
.f-modal__title { margin-top: 2px; font-size: 24px; font-weight: 700; color: var(--ink-900); }
.f-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ink-900);
  background: var(--white);
  transition: background-color .15s ease;
}
.f-modal__close:hover { background: var(--paper-warm); }

.f-modal__imgs { padding: 24px 36px 0; }
.f-modal__imgs > img,
.f-modal__slider {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
}
.f-modal__slider { position: relative; overflow: hidden; }
.f-modal__slider-track {
  display: flex;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.f-modal__slider-track img { flex: 0 0 100%; width: 100%; display: block; }
.f-modal__slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(23, 25, 28, .65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.f-modal__slider-btn--prev { left: 12px; }
.f-modal__slider-btn--next { right: 12px; }

.f-modal__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 24px 36px 36px;
}
.f-modal__points p {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-modal__points span {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;   /* Instrument Serifは400のみ配信。親の700を継承させない */
  color: var(--fincs-blue);
}

@media (max-width: 600px) {
  .f-modal { width: calc(100% - 24px); max-height: calc(100vh - 40px); }
  .f-modal__head { padding: 20px 20px 0; }
  .f-modal__imgs { padding: 16px 20px 0; }
  .f-modal__points { grid-template-columns: 1fr; padding: 16px 20px 24px; }
}

/* ---------- 29. 読み物 /articles/* f-post（代表執筆記事。旧サイトから移設） ----------
   一覧ページ（ブログ）は作らない。3本しかなく更新も止まっているため、
   「更新され続ける箱」に見せると逆効果になる。関連セクションから直接リンクする方針。 */
.f-post {
  background: var(--paper-warm);
}
.f-post__article {
  max-width: 760px;
  margin-inline: auto;
  padding: 72px var(--container-pad) 96px;
}
.f-post__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--fincs-blue);
}
.f-post__title {
  margin-top: 16px;
  font-size: 34px;
  line-height: 1.55;
  font-weight: 900;
  color: var(--ink-900);
  text-wrap: pretty;
}
.f-post__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.f-post__avatar { width: 40px; height: 40px; border-radius: 50%; }
.f-post__byline b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
/* ink-500だと11.5pxで4.45:1とAAに0.05足りなかったため1段濃くしている（実測） */
.f-post__byline i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--ink-700); }

/* ---- 本文（抽出したHTMLをそのまま流し込むので、要素セレクタで組む） ---- */
.f-post__body { margin-top: 8px; }
/* 本文見出しは700にする。900にすると tools/subset-fonts.mjs の収集が
   「.f-post__body の部分木ぜんぶ」を900の対象と見なし、本文8,000字が
   preload対象の900サブセットに入って36KB→133KBに膨らむ（実測）。
   900はページタイトル（.f-post__title）だけに留める */
.f-post__body h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink-900);
}
.f-post__body h3 {
  margin-top: 40px;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--ink-900);
}
.f-post__body h4 {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}
.f-post__body p {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--ink-700);
  text-wrap: pretty;
}
.f-post__body strong { font-weight: 700; color: var(--ink-900); }
.f-post__body a { color: var(--fincs-blue); text-decoration: underline; text-underline-offset: 3px; }
/* リセットはクラス付きのul/olだけを潰すので、本文のリストは既定の記号を活かす */
.f-post__body ul, .f-post__body ol { margin-top: 20px; padding-left: 1.4em; }
.f-post__body li {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--ink-700);
}
.f-post__body blockquote {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--fincs-blue);
  background: var(--white);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-900);
}
.f-post__body blockquote strong { font-weight: 700; }
.f-post__body figure { margin-top: 32px; }
.f-post__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
}
/* 表は本文幅を超えることがあるので、ページ全体ではなく表だけを横スクロールさせる。
   overflow は table 自身ではなく外側の .f-post__scroll（build.mjs の wrapPostTables が
   付ける）に持たせる。table を display:block にすると横スクロールはできるが、
   表としての意味づけがスクリーンリーダーから消えるため。 */
/* 見出しに id を振ってあるので、アンカーで飛んだとき追従ヘッダーの下に隠れないようにする */
.f-post__body h2, .f-post__body h3 { scroll-margin-top: 88px; }
.f-post__scroll {
  margin-top: 28px;
  overflow-x: auto;
  /* スクロールできる領域なのでキーボードでも動かせる必要がある（tabindex は build.mjs 側）。
     フォーカスリングは :focus-visible のグローバル指定がそのまま効く */
}
.f-post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.f-post__body th, .f-post__body td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  line-height: 1.8;
  vertical-align: top;
  white-space: nowrap;
}

/* 2列の表はセルを折り返して本文幅に収める（画面幅を問わず）。
   折り返さないと、1セルに長文が入っている表が1700px超になり、
   スマホの335pxはもちろんPCの648pxでも横に引きずらないと読めない。
   3列以上は折り返すと列の対応が読めなくなるので、横スクロールのまま残す。 */
.f-post__table--stack th,
.f-post__table--stack td {
  white-space: normal;
}
.f-post__table--stack th:first-child { width: 30%; }
.f-post__body th { background: var(--white); font-weight: 700; color: var(--ink-900); }
.f-post__body td { color: var(--ink-700); }

/* ---- 記事末のCTA ---- */
.f-post__foot {
  margin-top: 64px;
  padding: 36px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: center;
}
.f-post__foot-lead {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-700);
}
.f-post__foot-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.f-post__foot-sub {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fincs-blue);
}
.f-post__foot-sub:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
  .f-post__article { padding-top: 48px; padding-bottom: 64px; }
  .f-post__title { font-size: 25px; }
  .f-post__body h2 { margin-top: 44px; font-size: 19px; }
  .f-post__body p, .f-post__body li { font-size: 15px; line-height: 1.95; }
  .f-post__foot { padding: 28px 20px; }
  .f-post__foot-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .f-post__foot-actions .f-btn { justify-content: center; }
}

/* 理由／講師の声から記事への導線。一覧ページを作らない代わりの入口（29節の方針） */
.f-reason__more, .f-voices__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;          /* タップ領域の下限 */
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fincs-blue);
}
.f-reason__more:hover, .f-voices__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-voices__more { margin-top: 10px; }

/* ---------- 記事一覧 /hp/articles/ ---------- */
.f-alist { background: var(--paper); padding: 56px 0 96px; }
.f-alist__inner { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.f-alist__title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: var(--ink-900); letter-spacing: .01em; }
.f-alist__lead { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--ink-700); }
.f-alist__group { margin-top: 48px; }
.f-alist__cat { font-size: 20px; font-weight: 700; color: var(--ink-900); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.f-alist__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.f-alist__card {
  position: relative; display: block; padding: 22px 48px 22px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.f-alist__card:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); }
.f-alist__tag {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--paper-warm); color: var(--ink-700);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.f-alist__card-title { display: block; margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink-900); }
.f-alist__card-desc { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.85; color: var(--ink-500-warm); }
.f-alist__card-more { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--fincs-blue); font-size: 16px; }
@media (max-width: 640px) {
  .f-alist__card { padding: 18px 18px 18px; }
  .f-alist__card-more { display: none; }
}

/* ---------- 講師向け機能FAQ /hp/features/ ---------- */
.f-ffaq { background: var(--paper); padding: 56px 0 96px; }
.f-ffaq__inner { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.f-ffaq__title { font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: var(--ink-900); line-height: 1.4; }
.f-ffaq__lead { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--ink-700); }
.f-ffaq__group { margin-top: 56px; }
.f-ffaq__cat { font-size: 20px; font-weight: 700; color: var(--ink-900); padding-bottom: 10px; border-bottom: 2px solid var(--ink-900); }
.f-ffaq__item { margin-top: 32px; }
/* 章の先頭に置く、その章の質問リスト。44問から探す動作を「カテゴリ→質問」の2段にする。
   テキストとして常に存在するので、どの抽出経路でも消えない */
ul.f-ffaq__catnav { margin-top: 16px; padding-left: 1.2em; list-style: disc; }
.f-ffaq__catnav li { margin-top: 7px; }
.f-ffaq__catnav li::marker { color: var(--ink-500-warm); }
/* 本文リンクと同じ見え方にする。リンクだと分かる必要があるため色と下線は落とさない */
.f-ffaq__catnav a {
  font-size: 14px; line-height: 1.7;
  color: var(--fincs-blue); text-decoration: underline; text-underline-offset: 3px;
}
/* アンカーで飛んだとき、追従ヘッダーの下に見出しが隠れないようにする */
.f-ffaq__q { scroll-margin-top: 88px; }
.f-ffaq__q { font-size: 17px; font-weight: 700; line-height: 1.65; color: var(--ink-900); }
.f-ffaq__a { margin-top: 10px; }
.f-ffaq__a p { font-size: 14.5px; line-height: 1.95; color: var(--ink-700); }
.f-ffaq__a p + p { margin-top: 12px; }
.f-ffaq__a strong { font-weight: 700; color: var(--ink-900); }
/* 回答内のリンク。本文と同じ色・装飾なしだと、リンクがあることに気づけない。
   記事本文（.f-post__body a）と章内リンクに揃える */
.f-ffaq__a a { color: var(--fincs-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .f-ffaq__group { margin-top: 40px; }
  .f-ffaq__item { margin-top: 26px; }
}

.f-ffaq__updated { margin-top: 14px; font-size: 12.5px; color: var(--ink-500-warm); }
.f-ffaq__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.f-ffaq__toc a {
  display: inline-block; padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-700); text-decoration: none;
}
.f-ffaq__toc a:hover { border-color: var(--fincs-blue); color: var(--fincs-blue); }