/* ===== リセット・CSS変数（キャリアカ ブランドカラー：濃紺＋ゴールド＋ホワイト） ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 濃紺ベース（ブランド主色） */
  --navy: #0E1320;          /* 最も濃い・ヘッダー/ヒーロー用 */
  --navy-mid: #1A2236;      /* 中間調・本文の見出しなど */
  --navy-soft: #2A3450;     /* 柔らかめ・サブテキスト */
  --navy-pale: #E8EBF0;     /* 極薄・背景バッジなど */

  /* ゴールド（アクセント主色） */
  --gold: #C9A653;          /* メインアクセント・ボタン強調 */
  --gold-light: #D9BC78;    /* ホバー/グラデ */
  --gold-deep: #A8862E;     /* 押下/濃いめ */
  --gold-pale: #F7EFD7;     /* 極薄ゴールド・背景バッジ */

  /* ★ Step 18: データ視覚化用 4色パレット
     ブランドカラー（navy / gold）はそのまま維持し、
     データ表現（数値・スコア・ステータス）にこの4色を使う。
     "品のよさ"を保つため、彩度はやや控えめに調整。 */
  --c-teal: #0A8A94;            /* 主要メトリック・スコア */
  --c-teal-light: #11A8B2;      /* ホバー */
  --c-teal-pale: #E6F4F1;       /* 背景バッジ */
  --c-teal-deep: #076A72;       /* 押下・テキスト */

  --c-green: #03C1CD;           /* 完了・成功 */
  --c-green-light: #2DD4DE;
  --c-green-pale: #E8F5EE;

  --c-amber: #D97706;           /* 待機・要注意 */
  --c-amber-light: #F59E0B;
  --c-amber-pale: #FEF3E2;

  --c-red: #DC2626;             /* エラー・警告 */
  --c-red-light: #EF4444;
  --c-red-pale: #FEEAEA;

  /* ★ Step 18: --teal を真のティール色に向ける。
     これまで --teal は --gold にマッピングされていたが、データ視覚化に
     ふさわしい寒色のティールへと意味を再定義。
     名前が "teal" のクラス（badge-teal / btn-outline-teal / dash-sidebar nav-item.active 等）
     も自動的に真のティールに切り替わる。 */
  --teal: var(--c-teal);
  --teal-light: var(--c-teal-light);
  --teal-pale: var(--c-teal-pale);

  /* 中性色 */
  --bg: #FAFAF7;            /* 全体背景・少しウォームなオフホワイト */
  --bg-alt: #F4F4EE;        /* 交互セクション背景 */
  --surface: #FFFFFF;       /* カード/フォーム背景 */
  --border: #E6E6E0;        /* 枠線（少し温かみ） */
  --border-light: #F0F0EA;
  --border-strong: #C9C9C0;

  /* テキスト */
  --text: #0E1320;          /* 本文・最濃 */
  --text-sub: #4A5168;      /* 副次テキスト */
  --text-mute: #8B91A1;     /* 弱い情報 */
  --text-on-dark: #F4F4EE;  /* 濃紺背景上の文字 */

  /* ステータス色（Step 18 で新4色パレットと揃えた） */
  --red: var(--c-red);
  --green: var(--c-green);
  --orange: var(--c-amber);

  /* 形・影 */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow: 0 2px 12px rgba(14,19,32,0.06);
  --shadow-lg: 0 8px 32px rgba(14,19,32,0.10);
  --shadow-gold: 0 4px 16px rgba(201,166,83,0.25);
}

html { scroll-behavior: smooth; }

body {
  /* ★ Step 11: 全体のデフォルトをゴシックに統一。
     LP 2画面（home / corporate）の h1/h2 のみ末尾の上書きで明朝になる */
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ★ 2026-06-19: スマホ表示時のみbody横スクロールを抑制。
   何らかの要素がスマホ幅を超えた場合に、画面全体が横スクロールするのを防ぐ。
   PC表示には影響なし（PCではbodyがフル幅を使えるよう制御しない）。 */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
}

a { color: var(--gold-deep); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }
img { max-width: 100%; }
/* ★ C5 (2026-05-16): SVG がレスポンシブで親要素を突き抜けないよう既定値を補正
   - 明示的に width/height 属性が設定された SVG (アイコン用など) は影響を受けない
   - 親が指定した width(%)・height 属性なしで描画される SVG だけが対象 */
svg:not([width]) { max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: 'Noto Sans JP', sans-serif; }

/* ===== ユーティリティ ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.sans { font-family: 'Noto Sans JP', sans-serif; }
.text-center { text-align: center; }
.text-mute { color: var(--text-mute); }
.text-sub { color: var(--text-sub); }
.text-teal { color: var(--gold-deep); }
.text-gold { color: var(--gold-deep); }
.text-navy { color: var(--navy); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }

/* ===== ヘッダー（公開・白背景版） ===== */
.header {
  background: #ffffff;
  color: var(--navy);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(14,19,32,0.08);
  box-shadow: 0 2px 12px rgba(14,19,32,0.04);
}
.header-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1;
}
.header-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(14,19,32,.65);
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.header-logo-img {
  height: 30px;
  width: auto;
  display: block;
}
.logo-mark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--navy);
  font-family: 'Noto Sans JP', sans-serif;
}
.logo-sub {
  font-size: 10px;
  color: var(--gold-deep);
  letter-spacing: 2px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-nav a, .header-nav button {
  color: rgba(14,19,32,.75);
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: none;
  transition: all .2s;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav a:hover, .header-nav button:hover {
  color: var(--navy);
  background: rgba(14,19,32,.05);
  opacity: 1;
}
.header-nav .btn-outline {
  border: 1px solid rgba(14,19,32,.25);
  color: var(--navy);
}
.header-nav .btn-outline:hover {
  border-color: var(--navy);
  background: rgba(14,19,32,.04);
}
.header-nav .btn-primary-sm {
  background: var(--teal);
  color: #fff;
}
.header-nav .btn-primary-sm:hover { background: var(--teal-light); }

/* ===== ヘッダー（ログイン後） ===== */
.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-user .user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
}
.header-user .user-name {
  font-size: 13px;
  color: rgba(14,19,32,.75);
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== ボタン共通 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: all .25s;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  min-height: 52px;
}
.btn-primary {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.btn-primary:hover {
  background: var(--teal-light);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10,138,148,.28);
}
.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: var(--navy-mid); opacity: 1; box-shadow: 0 4px 16px rgba(14,19,32,.25); }
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; opacity: 1; }
.btn-outline-teal {
  background: transparent;
  color: var(--c-teal-deep);
  border: 2px solid var(--c-teal);
}
.btn-outline-teal:hover { background: var(--c-teal); color: #fff; opacity: 1; }
.btn-outline-gold {
  background: transparent;
  color: var(--gold-deep);
  border: 2px solid var(--gold);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); opacity: 1; }
.btn-ghost {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); opacity: 1; }
.btn-lg { padding: 20px 48px; font-size: 16px; border-radius: 10px; min-height: 60px; }
.btn-sm { padding: 8px 20px; font-size: 13px; min-height: auto; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ===== カード ===== */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  padding: 28px;
}
.card-flat {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  padding: 20px;
}

/* ===== ヒーローセクション ===== */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--navy-soft) 100%);
  color: #fff;
  padding: 80px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,166,83,.15) 0%, transparent 60%);
  pointer-events: none;
}
.hero h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  position: relative;
}
.hero .subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.7);
  margin-top: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  position: relative;
}
.hero .hero-btns {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.hero-accent {
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(201,166,83,.4);
}
.hero-trust {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(244,244,238,.55);
  letter-spacing: 1px;
  position: relative;
}

/* ===== ヒーロー2カラムレイアウト(TOP用) ===== */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}
.hero-grid .hero-text {
  min-width: 0;
  text-align: left;
}
.hero-grid .hero-text h1 {
  font-size: 32px;
  letter-spacing: 1.5px;
  text-align: left;
}
.hero-grid .hero-text .subtitle {
  font-size: 15px;
  text-align: left;
}
.hero-grid .hero-text .hero-btns {
  justify-content: flex-start;
}
.hero-grid .hero-text .hero-trust {
  text-align: left;
}
.hero-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.hero-illust svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  opacity: 0.95;
}
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-grid .hero-text,
  .hero-grid .hero-text h1,
  .hero-grid .hero-text .subtitle,
  .hero-grid .hero-text .hero-trust {
    text-align: center;
  }
  .hero-grid .hero-text .hero-btns {
    justify-content: center;
  }
  .hero-grid .hero-text h1 {
    font-size: 26px;
  }
  .hero-illust {
    order: -1;
  }
  .hero-illust svg {
    max-width: 420px;
    opacity: 0.85;
  }
}

/* ===== スマホ向けヒーロー: ファーストビューでCTAを見せる最適化
       (2026-05-05 追加) ===== */
@media (max-width: 768px) {
  /* ヒーロー全体の上下余白を大幅削減 */
  .hero {
    padding: 24px 0 40px;
  }
  /* hero-grid の gap を詰める */
  .hero-grid {
    gap: 16px;
  }
  /* イラストを表示 (CTAはファーストビュー外でもOK・文字視認性優先) */
  .hero-illust svg {
    max-width: 320px;
    opacity: 0.92;
  }
  /* h1: フォントサイズと行間を詰めて高さを最小化 */
  .hero-grid .hero-text h1,
  .hero h1 {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 1px;
  }
  /* subtitle: モバイルでは小さく簡潔に */
  .hero-grid .hero-text .subtitle,
  .hero .subtitle {
    font-size: 13px;
    line-height: 1.7;
    margin-top: 12px;
  }
  /* CTA ボタンのマージンを詰める */
  .hero-grid .hero-text .hero-btns,
  .hero .hero-btns {
    margin-top: 20px;
    gap: 10px;
  }
  /* trust テキストのマージン詰め */
  .hero-grid .hero-text .hero-trust,
  .hero .hero-trust {
    margin-top: 14px;
    font-size: 11px;
  }
  /* CTAボタンを大きめでタップしやすく */
  .hero .btn-lg {
    padding: 14px 28px;
    font-size: 15px;
  }
}

/* さらに小さい画面 (iPhone SE等) では追加で詰める */
@media (max-width: 380px) {
  .hero {
    padding: 16px 0 32px;
  }
  .hero-illust svg {
    max-width: 280px;
  }
  .hero-grid .hero-text h1,
  .hero h1 {
    font-size: 22px;
  }
}

/* ===== セクション共通 ===== */
.section {
  padding: 72px 0;
}
.section-title {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  color: var(--navy);
  letter-spacing: 1px;
}
.section-subtitle {
  text-align: center;
  color: var(--text-sub);
  margin-top: 10px;
  font-size: 14px;
}
.section-line {
  width: 40px;
  height: 3px;
  background: var(--teal);
  margin: 16px auto 0;
  border-radius: 2px;
}

/* ===== 統計バー ===== */
.stats-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
}
.stats-bar .container {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.stat-item {
  text-align: center;
}
.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--teal);
}
.stat-label {
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 2px;
}

/* ===== 3カラムグリッド ===== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* ===== モバイル用ヘッダー要素（768px以上では非表示） ===== */
.header-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
.btn-mobile-login,
.btn-mobile-register {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
  letter-spacing: 0.3px;
}
.btn-mobile-login {
  color: var(--navy);
  border: 1px solid rgba(14,19,32,.25);
  background: transparent;
}
.btn-mobile-login:hover { background: rgba(14,19,32,.05); }
.btn-mobile-register {
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
}
.btn-mobile-register:hover { background: #D9BC78; }

/* ハンバーガーボタン */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  margin-left: 4px;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transition: all .25s ease;
  transform-origin: center;
}
.hamburger-btn.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.header-mobile-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
}

/* モバイルメニュー（ドロワー） */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
  pointer-events: none;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 19, 32, 0.55);
  backdrop-filter: blur(2px);
}
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 82%;
  max-width: 320px;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  padding: 64px 0 24px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
}
.mobile-menu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 28px;
  color: var(--navy);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
.mobile-menu-close:hover { background: rgba(14,19,32,.05); }
.mobile-menu-item {
  display: block;
  padding: 16px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .2s;
}
.mobile-menu-item:hover,
.mobile-menu-item.active {
  background: var(--navy-pale);
  color: var(--navy);
}
.mobile-menu-logout {
  margin-top: auto;
  color: var(--text-sub);
  border-top: 1px solid var(--border-light);
  border-bottom: none;
  font-size: 13px;
}
.mobile-menu-external {
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.mobile-menu-external:hover {
  color: var(--navy);
}
/* 未ログインメニューでは「運営会社」を最下部に配置 */
.mobile-menu-panel > .mobile-menu-external:last-child {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
}
.mobile-menu-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 20px;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 8px;
}
.mobile-menu-user .user-avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  /* ヘッダー: padding を確保してハンバーガーがはみ出さないように */
  .header {
    padding: 0 16px;
    height: 88px;
    gap: 12px;
    box-sizing: border-box;
  }
  .header-nav { display: none !important; }
  .header-mobile-actions {
    display: flex;
    flex-shrink: 0;
    margin-right: 0;
  }
  .container { padding: 0 16px; }
  /* モバイルではタグラインを非表示にしてロゴ画像のみ(ボタンとの干渉回避) */
  .header-tagline,
  .company-header .header-tagline {
    display: none !important;
  }
  .header-logo-img { height: 26px; }
  .company-header .header-logo-img { height: 26px !important; }
  .header-logo {
    gap: 0;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
  }
  .header-logo .logo-mark,
  .header-logo .logo-sub { display: none; }
  /* ハンバーガーがはみ出さないようサイズ固定 */
  .hamburger-btn {
    width: 32px;
    height: 32px;
    padding: 6px 4px;
    flex-shrink: 0;
  }
}
@media (max-width: 380px) {
  .header { padding: 0 12px; height: 84px; }
  .header-logo-img { height: 22px; }
  .company-header .header-logo-img { height: 22px !important; }
  .header-tagline {
    font-size: 8px;
    letter-spacing: 0;
    margin-bottom: 3px;
  }
  /* 極小画面ではログイン文字も短縮 */
  .btn-mobile-login,
  .btn-mobile-register {
    padding: 6px 10px;
    font-size: 11px;
  }
  .company-header-nav { gap: 5px; }
  .company-header-nav .company-btn-outline,
  .company-header-nav .company-btn-primary {
    font-size: 11.5px;
    padding: 7px 9px;
  }
}

/* ===== 課題カード ===== */
.pain-card {
  text-align: center;
  padding: 36px 24px;
}
.pain-card .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
}
.pain-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.pain-card p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.8;
}

/* ===== ステップ ===== */
.steps {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.step-item {
  flex: 1;
  min-width: 200px;
  max-width: 240px;
  text-align: center;
  position: relative;
}
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
}
.step-item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.step-item p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}

/* ===== FAQ ===== */
.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
}
.faq-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-q::after {
  content: '+';
  font-size: 22px;
  color: var(--teal);
  font-weight: 300;
  transition: transform .2s;
}
.faq-item.open .faq-q::after { content: '-'; }
.faq-a {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.8;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding-top: 0;
}
.faq-item.open .faq-a {
  max-height: 200px;
  padding-top: 12px;
}

/* ===== CTAセクション ===== */
.cta-section {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: #fff;
  text-align: center;
  padding: 64px 24px;
}
.cta-section h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
}
.cta-section p {
  margin-top: 12px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
}

/* ===== フッター ===== */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,.6);
  padding: 48px 0 32px;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand .logo-mark { font-size: 20px; }
.footer-brand p { margin-top: 10px; font-size: 12px; line-height: 1.7; }
.footer h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: .5px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a { color: rgba(255,255,255,.55); font-size: 12px; }
.footer a:hover { color: #fff; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 32px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-legal a {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-decoration: none;
  letter-spacing: .3px;
  transition: color .2s;
}
.footer-legal a:hover {
  color: #fff;
}
@media (max-width: 480px) {
  .footer-legal { gap: 6px 16px; font-size: 11px; }
}
.footer-copy {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11px;
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-external {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.3px;
  transition: color .2s;
}
.footer-external:hover {
  color: rgba(255,255,255,.9);
}
@media (max-width: 480px) {
  .footer-copy { gap: 8px; flex-direction: column; }
}

/* ===== ログイン / 登録 ===== */
.auth-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 520px;
}
.auth-card h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 32px;
}
.auth-tab {
  flex: 1;
  padding: 16px;
  text-align: center;
  font-size: 15px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  color: var(--text-mute);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
  cursor: pointer;
}
.auth-tab:hover {
  color: var(--gold-deep);
}
.auth-tab.active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}
.form-group {
  margin-bottom: 22px;
}
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-mid);
  margin-bottom: 8px;
  font-family: 'Noto Sans JP', sans-serif;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input:not([type]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
  min-height: 56px;
  font-family: 'Noto Sans JP', sans-serif;
}
.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group input[type="password"]:hover,
.form-group input[type="tel"]:hover,
.form-group input[type="url"]:hover,
.form-group input[type="number"]:hover,
.form-group input:not([type]):hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--gold-light);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="number"]:focus,
.form-group input:not([type]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,166,83,.15);
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: var(--text-mute);
  font-size: 15px;
}
.form-group textarea { min-height: 120px; resize: vertical; line-height: 1.7; }

/* チェックボックス・ラジオボタンは標準サイズに */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  margin: 3px 0 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.form-group input[type="radio"] { border-radius: 50%; }
.form-group input[type="checkbox"]:hover,
.form-group input[type="radio"]:hover {
  border-color: var(--gold);
}
.form-hint {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  line-height: 1.6;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-check span { flex: 1; }
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-mute);
  font-size: 12px;
  margin: 24px 0;
  font-family: 'Noto Sans JP', sans-serif;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.demo-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== ダッシュボード ===== */
.dash-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 60px);
}
@media (max-width: 880px) {
  /* ★ Step 12: スマホでサイドバーを完全に非表示にし、
     メイン領域を全幅に。メニュー項目はヘッダーのハンバーガーに集約。 */
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-main { padding: 20px 16px; }
}
.dash-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border-light);
  padding: 28px 20px;
}
.dash-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 4px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dash-sidebar .nav-item:hover { background: var(--bg); color: var(--text); }
.dash-sidebar .nav-item.active { background: var(--teal-pale); color: var(--teal); font-weight: 500; }

/* ★ Phase 5 拡張 (2026-05-08): 求職者サイドバーのSVGアイコン枠 */
.dash-sidebar .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}
.dash-sidebar .nav-item:hover .nav-icon,
.dash-sidebar .nav-item.active .nav-icon {
  opacity: 1;
}
.dash-sidebar .nav-label {
  flex: 1;
  min-width: 0;
}
.dash-main {
  padding: 32px;
  overflow-y: auto;
  /* ★ Step 17: grid item は min-width: auto がデフォルトのため、
     子要素（テーブル等）が画面幅より大きいと main 自体が広がってしまう。
     min-width: 0 で grid item の縮みを許可し、overflow-x: hidden で
     はみ出しを止める（はみ出しは内側の .table-wrap で吸収）。 */
  min-width: 0;
  overflow-x: hidden;
}
.dash-welcome {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
}
.dash-welcome h2 {
  font-size: 22px;
  font-weight: 600;
}
.dash-welcome p {
  color: rgba(255,255,255,.7);
  margin-top: 8px;
  font-size: 14px;
}
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  padding: 20px;
  text-align: center;
}
.stat-card .num {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);  /* デフォルトは黒（ニュートラル） */
}
.stat-card .label {
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 4px;
}
/* ★ Step 18: stat-card の色バリエーション
   依頼数=黒（ニュートラル） / 完了=グリーン / 待ち=アンバー / スコア=ティール */
.stat-card.s-teal  .num { color: var(--c-teal); }
.stat-card.s-green .num { color: var(--c-green); }
.stat-card.s-amber .num { color: var(--c-amber); }
.stat-card.s-red   .num { color: var(--c-red); }

/* ===== テーブル ===== */
.table-wrap {
  overflow-x: auto;
  /* iOS でスムーズスクロール */
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
}
thead th {
  background: var(--bg);
  padding: 10px 14px;
  text-align: left;
  font-weight: 500;
  color: var(--text-sub);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.badge-green { background: var(--c-green-pale); color: var(--c-green); }
.badge-orange { background: var(--c-amber-pale); color: var(--c-amber); }
.badge-gray { background: var(--bg); color: var(--text-mute); }
.badge-teal { background: var(--c-teal-pale); color: var(--c-teal-deep); }
.badge-navy { background: #E8EDF3; color: var(--navy); }
.badge-coming {
  background: linear-gradient(135deg, #E8EDF3, var(--teal-pale));
  color: var(--navy-soft);
  font-weight: 600;
  padding: 6px 16px;
  font-size: 12px;
}

/* ===== パスポート閲覧 ===== */
.context-bar {
  background: #fff;
  color: #4A5168;
  border: 1px solid #E3E8EE;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* ★ モバイル対策: 狭幅時は自動改行 */
  font-family: 'Noto Sans JP', sans-serif;
}
.context-bar > span:not([class*="badge"]) { flex: 1; min-width: 140px; } /* ★ 真ん中テキストは縮みすぎないように (badge は除外) */
.context-bar > a { flex-shrink: 0; } /* ★ リンクは縮まない */
/* ★ プラン badge 系は文字を縦にしない (プレミアム/スタンダード/フリー) */
.context-bar .plan-badge,
.context-bar [class*="badge"] {
  white-space: nowrap;
  word-break: keep-all;
  flex: 0 0 auto; /* ★ shrink:0 + grow:0 + basis:auto = 自然なサイズ固定 */
}
@media (max-width: 640px) {
  .context-bar {
    padding: 10px 16px;
    gap: 8px;
  }
}
.context-bar strong { color: var(--c-teal); }
.passport-layout {
  /* ★ Step 7 bugfix19: 認証バッジを全体コンテナの左端に揃えるため、
     固定幅と中央寄せを解除。親（max-width:1100px）の幅に追従させる */
  max-width: none;
  margin: 0;
  padding: 32px 0;
}
.profile-header {
  display: flex;
  gap: 28px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 28px;
}
/* ★ 2026-07-06 スマホ: アバターを上、プロフィール内容を下に縦積み */
@media (max-width: 600px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .profile-header .profile-info { width: 100%; }
}
.profile-photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  flex-shrink: 0;
}
.profile-info h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
}
.profile-info .meta {
  font-size: 13px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 4px;
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-pale);
  color: var(--teal);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  margin-top: 8px;
}

/* スコアサークル */
.score-circle-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.score-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: conic-gradient(var(--teal) 0% 78%, var(--border-light) 78% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.score-circle-inner {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.score-circle-inner .num {
  font-size: 36px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.score-circle-inner .max {
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}
.score-meta .rank {
  font-size: 28px;
  font-weight: 700;
  color: var(--teal);
}
.score-meta .benchmark {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 4px;
}
.score-meta .evaluators {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 8px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ★ C4/C5 (2026-05-16): スマホでスコア分布・カテゴリ別スコアが画像枠を突き抜ける問題対応
   - 800px 以下では grid-template-columns: 1fr で縦積み (320px minmax を解除)
   - SVG が親要素を超えないよう max-width:100% / overflow:hidden で内包
   - card 自体にも overflow-x:hidden を保険として
*/
.score-dist-grid {
  width: 100%;
  max-width: 100%;
}
.score-dist-grid > div {
  min-width: 0; /* grid item の縮小を許可 (デフォルトの auto では minmax の最小値が効かない) */
  overflow: hidden;
}
.score-dist-grid svg,
.score-dist-grid img,
.cat-bars svg,
.cat-bars img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 800px) {
  .score-dist-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 480px) {
  .score-dist-grid {
    gap: 16px !important;
  }
  /* カテゴリラベル幅を詰めて表示領域を確保 */
  .cat-bar-label {
    width: 72px !important;
    font-size: 11px !important;
  }
  .cat-bar-item {
    gap: 8px !important;
  }
}

/* カテゴリバー */
.cat-bars { margin-top: 28px; }
.cat-bar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cat-bar-label {
  width: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  text-align: right;
  flex-shrink: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
.cat-bar-track {
  flex: 1;
  height: 22px;
  background: var(--bg);
  border-radius: 11px;
  overflow: hidden;
  position: relative;
}
.cat-bar-fill {
  height: 100%;
  border-radius: 11px;
  background: var(--teal);
  transition: width .8s ease;
}
.cat-bar-val {
  width: 40px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  font-family: 'Noto Sans JP', sans-serif;
}
.strongest-badge {
  font-size: 11px;
  background: var(--teal-pale);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* コメント */
.comment-card {
  border-left: 3px solid var(--teal);
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.comment-card .author {
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 6px;
}
.comment-card p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.8;
}
.blurred {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.blur-overlay {
  position: relative;
}
.blur-overlay::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--bg));
}
.upgrade-cta {
  text-align: center;
  padding: 24px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 16px;
}
.upgrade-cta p {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 12px;
}

/* Coming Soon */
.coming-soon-box {
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, #F0F3F7 0%, var(--teal-pale) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}
.coming-soon-box h3 {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
}
.coming-soon-box p {
  font-size: 13px;
  color: var(--text-sub);
}

/* ===== 料金プラン ===== */
.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--border-light);
  border-radius: var(--radius);
  padding: 4px;
  width: fit-content;
  margin: 0 auto 40px;
}
.pricing-tab {
  padding: 10px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .2s;
}
.pricing-tab.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.plan-card {
  border: 2px solid var(--border-light);
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.plan-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
}
.plan-card.recommended {
  border-color: var(--teal);
}
.plan-card .rec-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.plan-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.plan-card .price {
  font-size: 36px;
  font-weight: 700;
  color: var(--navy);
  margin: 12px 0 4px;
}
.plan-card .price-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sub);
}
.plan-card .price .price-yen {
  font-size: 0.46em;
  font-weight: 700;
  vertical-align: 0.18em;
  margin-right: 1px;
}
.desc .price-yen {
  font-size: 0.85em;
}
.plan-card .desc {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 20px;
}
.plan-card ul {
  list-style: none;
  margin-bottom: 24px;
  padding-left: 0;
}
.plan-card li {
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text);
  padding: 6px 0;
  position: relative;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plan-card li::before {
  content: '✓';
  flex: 0 0 16px;
  color: var(--teal);
  font-weight: 700;
  text-align: center;
}

/* ===== 評価フォーム ===== */
.eval-header {
  background: var(--navy);
  color: #fff;
  padding: 24px 32px;
  text-align: center;
}
.eval-header h2 { font-size: 20px; font-weight: 600; }
.eval-header p { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.progress-bar-wrap {
  background: var(--bg);
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
}
.progress-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 700px;
  margin: 0 auto;
}
.progress-step {
  flex: 1;
  text-align: center;
}
.progress-step .dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all .3s;
}
.progress-step.active .dot {
  background: var(--teal);
  color: #fff;
}
.progress-step.done .dot {
  background: var(--navy);
  color: #fff;
}
.progress-step .step-label {
  font-size: 10px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}
.progress-step.active .step-label { color: var(--teal); font-weight: 500; }
.progress-step.done .step-label { color: var(--navy); }
.eval-body {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.eval-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.rating-group {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.rating-btn {
  width: 48px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all .15s;
  font-family: 'Noto Sans JP', sans-serif;
}
.rating-btn:hover { border-color: var(--teal); color: var(--teal); }
.rating-btn.selected {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.rating-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}
.question-block {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-light);
}
.question-block .q-num {
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
}
.question-block .q-cat {
  font-size: 11px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  margin-left: 8px;
}
.question-block h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  margin: 6px 0 4px;
}
.question-block p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 12px;
}
.agree-list { list-style: none; }
.agree-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
}
.agree-list input { margin-top: 3px; flex-shrink: 0; }

/* ===== プロフィール写真 ===== */
.dash-photo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dash-photo {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
  border: 3px solid rgba(255,255,255,.3);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.dash-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  transition: all .2s;
}
.dash-photo-btn:hover {
  background: rgba(255,255,255,.25);
}
.profile-avatar-sm {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* ===== 写真アップロードエリア（プロフィール編集） ===== */
.photo-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  background: var(--bg);
  transition: all .2s;
  cursor: pointer;
  position: relative;
}
.photo-upload-zone:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}
.photo-upload-zone.has-photo {
  padding: 20px;
  border-style: solid;
  background: var(--surface);
}
.photo-upload-preview {
  width: 150px; height: 150px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background-size: cover;
  background-position: center;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.photo-upload-hint {
  font-size: 13px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 10px;
}
.photo-upload-hint .accent {
  color: var(--teal);
  font-weight: 500;
}

/* ===== 評価依頼フォーム ===== */
.evaluator-form-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
}
.evaluator-form-card h4 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.evaluator-form-card .rm-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-mute);
  font-size: 14px;
  cursor: pointer;
}
.evaluator-form-card .rm-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.msg-preview {
  background: var(--bg);
  border-left: 3px solid var(--teal);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.8;
}
.msg-preview .subj {
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
  font-size: 14px;
}

/* ===== ページ遷移 ===== */
#app {
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: fadeIn .3s ease;
}

/* ===== セットアップウィザード（求職者 初期設定） ===== */
.setup-layout {
  min-height: calc(100vh - 62px);
  background: linear-gradient(160deg, var(--bg) 0%, #EAEEF3 100%);
  padding: 48px 24px 64px;
}
.setup-container {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  position: relative;
}
.setup-header {
  text-align: center;
  margin-bottom: 32px;
}
.setup-header h1 {
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: .03em;
}
.setup-header p {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  font-size: 13px;
}
.setup-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 36px;
}
.setup-progress-dot {
  width: 32px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  transition: background .3s;
}
.setup-progress-dot.active { background: var(--teal); }
.setup-progress-dot.done { background: var(--teal-light); }
.setup-step-head {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
  font-weight: 500;
}
.setup-step-desc {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  font-size: 13px;
  margin-bottom: 24px;
}
.setup-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.setup-skip {
  background: none;
  border: none;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.setup-skip:hover { color: var(--navy); }

/* ===== 繰り返しフィールド（経歴・スキル） ===== */
.repeat-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.exp-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}
.exp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.exp-card-head h5 {
  font-size: 13px;
  color: var(--navy);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}
.exp-card-rm {
  background: none;
  border: none;
  color: var(--red);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: background .15s;
}
.exp-card-rm:hover { background: rgba(192,57,43,.08); }
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.skill-tag {
  background: var(--teal-pale);
  color: var(--teal);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.skill-tag .rm {
  cursor: pointer;
  font-weight: 500;
  padding: 0 2px;
  color: var(--teal);
}
.skill-tag .rm:hover { color: var(--red); }
.skill-input-wrap {
  display: flex;
  gap: 8px;
}
.skill-input-wrap input {
  flex: 1;
}

.btn-add-row {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--teal);
  border-radius: var(--radius);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.btn-add-row:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
}

/* ===== 現プラン表示カード ===== */
.current-plan-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.current-plan-card .label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.current-plan-card .plan-name {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}
.current-plan-card .plan-meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 16px;
}
.current-plan-card .plan-info-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.current-plan-card .plan-info-row .item {
  flex: 1;
  min-width: 120px;
}
.current-plan-card .plan-info-row .item-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.current-plan-card .plan-info-row .item-value {
  font-size: 16px;
  font-weight: 500;
}

/* ===== 公開URL発行モーダル / カード決済モーダル ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,19,32,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn .2s ease;
}
.modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.modal-card h3 {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
}
.modal-card .modal-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 20px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--bg); color: var(--navy); }
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.url-copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.url-copy-row code {
  flex: 1;
  font-size: 13px;
  color: var(--navy);
  word-break: break-all;
  font-family: 'Noto Sans JP', sans-serif;
}
.card-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.credit-brand-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.credit-brand {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  letter-spacing: .05em;
}

/* ===== 企業向け UI（旧・黒基調） — 後続ブロックに統合 ===== */

/* ===== 設定ページ ===== */
.settings-section {
  border-bottom: 1px solid var(--border-light);
  padding: 24px 0;
}
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}
.settings-section p.lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 14px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--border-light);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
}
.settings-row .desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.danger-zone {
  background: rgba(192,57,43,.05);
  border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 16px;
}
.danger-zone h4 {
  color: var(--red);
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  margin-bottom: 8px;
}
.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 7px 16px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.btn-danger:hover { background: var(--red); color: #fff; }

/* ===== 評価者 情報入力・自動保存バナー ===== */
.eval-save-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s;
  pointer-events: none;
  z-index: 1000;
}
.eval-save-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== スクロール可能モーダル内の form-group 上書き ===== */
.modal-card .form-group { margin-bottom: 12px; }

/* ========================================================
   新UI: トースト / 自動保存インジケータ
   ======================================================== */
.app-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 10000;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.auto-save-indicator {
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--teal);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  opacity: 0;
  transform: translateX(20px);
  transition: all .25s;
  pointer-events: none;
  z-index: 10000;
}
.auto-save-indicator.show { opacity: 1; transform: translateX(0); }

/* ========================================================
   アプリモーダル（カード決済など）
   ======================================================== */
.app-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
  z-index: 9000;
  padding: 20px;
}
.app-modal-bg.visible { opacity: 1; }
.app-modal-bg.dark { background: rgba(0,0,0,.75); }
.app-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: scale(.96);
  transition: transform .25s;
  font-family: 'Noto Sans JP', sans-serif;
}
.app-modal-bg.visible .app-modal { transform: scale(1); }
.app-modal-bg.dark .app-modal {
  background: #15151C;
  color: #EAEAF0;
  border: 1px solid #2A2A36;
}
.app-modal-bg.dark .app-modal input,
.app-modal-bg.dark .app-modal select,
.app-modal-bg.dark .app-modal textarea {
  background: #0A0A0E;
  border: 1px solid #2A2A36;
  color: #EAEAF0;
}
.app-modal h3 {
  color: var(--navy);
  font-size: 18px;
  margin-bottom: 4px;
}
.app-modal-bg.dark .app-modal h3 { color: #fff; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ========================================================
   セットアップウィザード（新規登録後）
   ======================================================== */
.setup-layout {
  min-height: calc(100vh - 62px);
  background: linear-gradient(160deg, var(--bg) 0%, #EAEEF3 100%);
  padding: 32px 20px 48px;
}
.setup-container {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.setup-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border-light);
}
.setup-header h1 {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 6px;
}
.setup-header p {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 20px;
}
.setup-progress-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}
.setup-progress-bar::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.setup-step {
  flex: 1;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  position: relative;
  z-index: 1;
}
.setup-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 6px;
  transition: all .25s;
}
.setup-step.active span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.setup-step.active { color: var(--navy); font-weight: 600; }
.setup-step.done span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.setup-step.done span::before {
  content: '✓';
}
.setup-step.done span { font-size: 0; }
.setup-step.done span::before { font-size: 14px; }
.setup-body {
  padding: 28px 32px;
}
.setup-pane {
  display: none;
}
.setup-pane.active {
  display: block;
  animation: fadeIn .3s;
}
.setup-pane h2 {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 4px;
}
.setup-pane .section-hint {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.setup-footer {
  padding: 16px 32px;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-light);
}
.setup-footer > div { display: flex; gap: 8px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

/* ========================================================
   リピート入力（職歴カード / スキルタグ）
   ======================================================== */
.form-row { margin-bottom: 16px; }
.form-row > label {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 6px;
}
.form-row .req {
  display: inline-block;
  background: #C84837;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}
.form-hint {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
}

.repeat-card, .exp-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.repeat-head, .exp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.repeat-head .idx, .exp-idx {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
}
.repeat-remove, .exp-remove {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.repeat-remove:hover, .exp-remove:hover {
  background: #FFE5E2;
  color: #C84837;
  border-color: #C84837;
}

.repeat-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.repeat-remove-mini {
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mute);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.repeat-remove-mini:hover { background: #FFE5E2; color: #C84837; border-color: #C84837; }

.btn-add-row {
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
}
.btn-add-row-sm {
  font-size: 12px;
  padding: 6px 14px;
  margin-top: 4px;
}

.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  min-height: 42px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-pale);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}
.tag-chip button {
  background: none;
  border: none;
  color: var(--teal);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.tag-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 4px;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
}

.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  cursor: pointer;
}

/* ========================================================
   現在のプラン表示カード（求職者）
   ======================================================== */
.current-plan-card {
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  font-family: 'Noto Sans JP', sans-serif;
}
.current-plan-card .cp-label {
  font-size: 11px;
  opacity: .8;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.current-plan-card .cp-name {
  font-size: 24px;
  margin: 6px 0 4px;
}
.current-plan-card .cp-price {
  font-size: 14px;
  opacity: .9;
  margin-bottom: 10px;
}
.current-plan-card .cp-meta {
  font-size: 12px;
  opacity: .75;
}
.plan-card.current {
  border-color: var(--teal);
  box-shadow: 0 6px 20px rgba(201, 166, 83, 0.15);
}

/* ========================================================
   設定ページ
   ======================================================== */
.page-title {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 20px;
}
.card-title {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 16px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-nav-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}
.settings-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .2s;
}
.settings-tab:hover { color: var(--navy); }
.settings-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 600;
}
.settings-pane { display: none; }
.settings-pane.active { display: block; animation: fadeIn .25s; }

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  gap: 16px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
}
.toggle-desc {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch span {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 12px;
  transition: .25s;
}
.toggle-switch span::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + span { background: var(--teal); }
.toggle-switch input:checked + span::before { transform: translateX(20px); }
.toggle-switch input:disabled + span { opacity: .4; cursor: not-allowed; }

.pw-strength {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.pw-strength-bar {
  height: 100%;
  width: 0%;
  background: #C84837;
  transition: all .3s;
}

.payment-method-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
}
.card-brand {
  background: var(--navy);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .5px;
}
.card-number {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--navy);
}
.card-meta {
  font-size: 11px;
  color: var(--text-mute);
}
.card-default {
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Noto Sans JP', sans-serif;
}
.card-remove {
  grid-column: 3;
  grid-row: 1 / -1;
  background: none;
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-mute);
}

/* ========================================================
   企業ヘッダー / テーマ（黒基調）
   ======================================================== */
/* ===== 企業向け UI（白ベース + 黒/ゴールドアクセント） ===== */
.company-theme {
  background: #FFFFFF;
  color: #1A2236;
  min-height: 100vh;
}
.company-theme input[type="text"],
.company-theme input[type="email"],
.company-theme input[type="password"],
.company-theme input[type="tel"],
.company-theme input[type="url"],
.company-theme input[type="number"],
.company-theme input[type="search"],
.company-theme input[type="date"],
.company-theme input[type="time"],
.company-theme input:not([type]),
.company-theme select,
.company-theme textarea {
  background: #FFFFFF;
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  padding: 16px 18px;
  font-size: 16px;
  min-height: 56px;
  border-radius: var(--radius);
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.company-theme input[type="text"]:hover,
.company-theme input[type="email"]:hover,
.company-theme input[type="password"]:hover,
.company-theme input[type="tel"]:hover,
.company-theme input[type="url"]:hover,
.company-theme input:not([type]):hover,
.company-theme select:hover,
.company-theme textarea:hover {
  border-color: var(--gold-light);
}
.company-theme input[type="text"]:focus,
.company-theme input[type="email"]:focus,
.company-theme input[type="password"]:focus,
.company-theme input[type="tel"]:focus,
.company-theme input[type="url"]:focus,
.company-theme input:not([type]):focus,
.company-theme select:focus,
.company-theme textarea:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,166,83,.15);
}
.company-theme input::placeholder,
.company-theme textarea::placeholder {
  color: var(--text-mute);
  font-size: 15px;
}
/* 企業テーマでもチェックボックス・ラジオは標準サイズ */
.company-theme input[type="checkbox"],
.company-theme input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  margin: 3px 0 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.company-theme input[type="radio"] { border-radius: 50%; }
.company-theme label { color: var(--navy-mid) !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.company-theme .form-row { margin-bottom: 22px; }

/* 企業テーマでもヘッダー内の画像はデフォルトサイズ・blockで表示 */
.company-theme .company-header img {
  max-width: none;
}

.company-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(14,19,32,0.08);
  padding: 0 36px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--navy);
  box-shadow: 0 2px 12px rgba(14,19,32,0.04);
  position: sticky;
  top: 0;
  z-index: 100;
}
.company-header .header-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer;
  line-height: 1 !important;
}
.company-header .header-logo-img {
  height: 28px;
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
}
.company-header .header-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(14,19,32,.65);
  letter-spacing: 0.08em;
}
.company-header .header-logo > div {
  display: none !important;
}
.company-header .logo-mark,
.company-header .logo-sub {
  display: none !important;
}
.company-header-nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  flex-shrink: 0;
}
.company-header-nav a {
  color: rgba(14,19,32,.75);
  text-decoration: none;
  transition: color .2s;
}
.company-header-nav a:hover { color: var(--navy); opacity: 1; }

.company-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(14,19,32,.12);
}
.company-header-user .user-name {
  font-size: 12px;
  color: rgba(14,19,32,.75);
}
.company-header-user .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* 企業レイアウト */
.company-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 62px);
  background: #FFFFFF;
}
.company-sidebar {
  background: #FAFAF7;
  padding: 24px 16px;
  border-right: 1px solid #C9C9C0;
}
.brand-block {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #C9C9C0;
}
.brand-block .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0E1320;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  margin: 0 auto 10px;
}
.brand-block .name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
  font-weight: 500;
}
.brand-block .role {
  font-size: 10px;
  color: #8B8B96;
  margin-top: 2px;
}

/* ★ Phase E (2026-05-06): サイドバー グループ見出し */
.company-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8B8B96;
  text-transform: uppercase;
  padding: 16px 14px 6px 14px;
  margin-top: 4px;
}
/* グループ見出し直後のアイテムは間隔を詰める */
.company-nav-group-label + .company-nav-item {
  margin-top: 2px;
}
/* グループ見出し内の NEW バッジ */
.company-nav-group-label .company-nav-badge-new {
  margin-left: 4px;
  vertical-align: middle;
}

.company-nav-item {
  /* ★ Phase 5 拡張 (2026-05-08): SVGアイコンとラベルを横並びにするため Flex 化 */
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #1A2236;
  padding: 10px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all .2s;
}
.company-nav-item:hover {
  background: #F5F5F2;
  color: #0E1320;
}
.company-nav-item.active {
  background: #FFFFFF;
  color: #0E1320;
  font-weight: 600;
  border-left: 3px solid var(--c-teal);
  padding-left: 11px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ★ Phase 5 拡張 (2026-05-08): サイドバーのSVGアイコン枠 */
.company-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* SVG の色は currentColor で親の color を継承 */
  color: inherit;
  opacity: 0.85;
}
.company-nav-item:hover .company-nav-icon,
.company-nav-item.active .company-nav-icon {
  opacity: 1;
}
.company-nav-label {
  flex: 1;
  min-width: 0;
}
/* バッジ "NEW" などはラベル右側に並ぶ */
.company-nav-item .company-nav-badge-new {
  flex-shrink: 0;
}
.company-main {
  padding: 32px 40px;
  color: #1A2236;
  background: #FFFFFF;
  /* ★ Step 17: grid item の min-width: auto による横はみ出しを防ぐ。
     min-width: 0 で grid item の縮みを許可し、overflow-x: hidden で
     はみ出しを止める（はみ出しは内側の .company-table-wrap などで吸収）。 */
  min-width: 0;
  overflow-x: hidden;
}
.company-page-title {
  font-size: 24px;
  color: #0E1320;
  margin-bottom: 6px;
}
.company-subtitle {
  color: #6B6B7A;
  font-size: 13px;
  margin-bottom: 24px;
}
.company-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.company-card {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: var(--radius-lg);
  padding: 24px;
  color: #1A2236;
}
.company-card h3 {
  font-size: 16px;
  color: #0E1320;
  margin-bottom: 16px;
}
.company-card .card-head h3 { margin-bottom: 0; }
.company-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .company-grid-2 { grid-template-columns: 1fr; }
  .company-layout { grid-template-columns: 1fr; }
  .company-sidebar { display: none; }
}

.company-stats-grid {
  display: grid;
  /* ★ Step 20: 平均スコアカード削除に伴い 3 列に変更 */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .company-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .company-stats-grid { grid-template-columns: 1fr; } }

/* ★ Phase 5 拡張 (2026-05-08): 逆オファータブ用の4列バリエーション
   送信中/登録済み/閲覧可能/終了 の4ステータスを横並びに配置する */
.company-stats-grid.company-stats-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .company-stats-grid.company-stats-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .company-stats-grid.company-stats-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ★ Phase 5 拡張 (2026-05-08): ダッシュボードのタブUI
   通常閲覧 / 逆オファー の切替。既存のネイビー基調デザインに合わせる。 */
.company-dash-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  /* タブヘッダー全体は左寄せ。狭幅では横スクロール可能 */
  overflow-x: auto;
  scrollbar-width: thin;
}
.company-dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* border-bottom と重ねる */
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
  position: relative;
}
.company-dash-tab:hover {
  color: var(--navy);
  background: rgba(14, 19, 32, 0.03);
}
.company-dash-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
.company-dash-tab-icon {
  /* SVGを内包するinline-flex枠。サイズはJS側で指定 (data-icon-sizeまたは関数引数) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: inherit;
  opacity: 0.85;
}
.company-dash-tab.active .company-dash-tab-icon {
  opacity: 1;
}
.company-dash-tab-label {
  letter-spacing: 0.3px;
}
.company-dash-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--gold-deep, #C9A653);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
}
.company-dash-tab.active .company-dash-tab-badge {
  background: var(--navy);
}
.company-dash-tab-badge[hidden] {
  display: none;
}

/* タブパネル: 切替アニメーション (シンプルなフェード) */
.company-dash-panel {
  animation: companyDashPanelFade 0.2s ease-out;
}
@keyframes companyDashPanelFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.company-dash-panel[hidden] { display: none; }

/* ヘッダー右側のCTAエリア */
.company-dash-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.company-stat-card {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.company-stat-card .stat-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: #8B8B96;
  letter-spacing: .5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.company-stat-card .stat-value {
  font-size: 30px;
  color: #0E1320;
  line-height: 1.1;
}
/* ★ Step 19: 企業統計カードの色バリエーション。
   主要指標（平均スコア等）はティール、その他はニュートラルが基本。
   求職者ダッシュの .stat-card と同じネーミング規則。 */
.company-stat-card.s-teal  .stat-value { color: var(--c-teal); }
.company-stat-card.s-green .stat-value { color: var(--c-green); }
.company-stat-card.s-amber .stat-value { color: var(--c-amber); }
.company-stat-card.s-red   .stat-value { color: var(--c-red); }
.company-stat-card .stat-delta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: #8B8B96;
  margin-top: 6px;
}
.company-stat-card .stat-delta.positive { color: var(--c-green); }

.company-btn-primary {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  letter-spacing: 0.5px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.company-btn-primary:hover:not(:disabled) {
  background: var(--teal-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10,138,148,.28);
}
.company-btn-primary:disabled { opacity: .5; cursor: default; }

.company-btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.company-btn-outline:hover:not(:disabled) { background: var(--navy); color: var(--gold); }
.company-btn-outline:disabled { opacity: .5; cursor: default; }

/* ★ 項目外NEW (2026-05-20): 企業用 コンパクトサイズ ボタン
   メアド変更フォーム等のインラインボタン向け */
.company-btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.company-btn-secondary:hover:not(:disabled) {
  background: var(--navy);
  color: var(--gold);
}
.company-btn-secondary:disabled { opacity: .5; cursor: default; }

.company-btn-ghost {
  background: transparent;
  color: var(--text-sub, #6B7280);
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.company-btn-ghost:hover:not(:disabled) {
  background: #F0F1F4;
  color: var(--navy);
}
.company-btn-ghost:disabled { opacity: .5; cursor: default; }
.company-link {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
}

/* 候補者プレビューリスト */
.company-candidate-preview-list { display: flex; flex-direction: column; gap: 10px; }
.company-candidate-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.company-candidate-row:hover { border-color: #0E1320; background: #FAFAF7; }
.c-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5F5F2;
  color: #0E1320;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid #C9C9C0;
}
.c-name { font-size: 14px; color: #0E1320; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }
.c-meta { font-size: 11px; color: #8B8B96; margin-top: 2px; font-family: 'Noto Sans JP', sans-serif; }
.c-sub { color: #8B8B96; font-size: 11px; font-family: 'Noto Sans JP', sans-serif; }
.c-score { color: var(--c-teal); font-size: 18px; font-weight: 500; }
.c-score span { font-size: 10px; color: #8B8B96; margin-left: 2px; }
.c-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
/* ★ Step 18: ランクバッジ（候補者一覧の円形バッジ）
   S = ゴールド（最上位、ブランド色）, A〜D は新4色パレット */
.c-rank.rank-s { background: var(--gold); color: var(--navy); }
.c-rank.rank-a { background: var(--c-teal); color: #fff; }
.c-rank.rank-b { background: var(--c-green); color: #fff; }
.c-rank.rank-c { background: var(--c-amber); color: #fff; }
.c-rank.rank-d { background: var(--c-red); color: #fff; }
.c-rank.rank-na { background: var(--border-strong); color: var(--text-sub); }
/* ★ 2026-06-22: +付きランク(B+等、2文字)は丸内に収まるよう文字を少し詰める */
.c-rank.c-rank-plus { font-size: 11px; letter-spacing: -0.5px; }

/* 企業プラン */
.company-plan-summary .plan-name-big {
  font-size: 22px;
  color: #0E1320;
  margin-bottom: 6px;
}
.company-plan-summary .plan-price-big {
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}
.plan-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.plan-features-list li {
  padding: 6px 0;
  color: #1A2236;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  padding-left: 18px;
  position: relative;
}
.plan-features-list li::before {
  content: '✓';
  color: var(--gold);
  position: absolute;
  left: 0;
}

.company-scout-card {
  background: linear-gradient(135deg, #FAFAF7, #F5F5F2);
  border: 1px solid var(--gold);
  text-align: center;
  padding: 32px;
}
.badge-soon {
  display: inline-block;
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.company-scout-card h3 { font-size: 22px; color: #0E1320; }
.company-scout-card p {
  color: #1A2236;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 12px 0 20px;
  line-height: 1.8;
}

/* 候補者一覧テーブル */
.company-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.company-search, .company-select {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  color: #1A2236;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
}
.company-search { flex: 1; min-width: 220px; }
.company-table-wrap {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
}
.company-table th {
  background: #FAFAF7;
  color: #6B6B7A;
  text-align: left;
  padding: 12px 14px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid #C9C9C0;
}
.company-table td {
  padding: 14px;
  border-bottom: 1px solid #C9C9C0;
  color: #1A2236;
}
.company-table tr:last-child td { border-bottom: none; }
.company-table tr:hover td { background: #FAFAF7; }
.score-val { color: var(--c-teal); font-size: 16px; font-weight: 500; }
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
}
.pill-paid { background: var(--c-green-pale); color: var(--c-green); }
.pill-free { background: #F5F5F2; color: #1A2236; }
/* ★ Step 21: 候補者一覧の「閲覧時プラン」ピル
   free=ニュートラル / standard=ティール / premium=ゴールド（プレミアム感） */
.pill-plan-free     { background: #F5F5F2; color: var(--text-mute); }
.pill-plan-standard { background: var(--c-teal-pale); color: var(--c-teal-deep); }
.pill-plan-premium  { background: var(--gold-pale); color: var(--gold-deep); }

.company-empty-hint {
  text-align: center;
  padding: 30px;
  color: #8B8B96;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 支払いページ */
.company-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.usage-item {
  background: #FAFAF7;
  border: 1px solid #C9C9C0;
  border-radius: 8px;
  padding: 12px 14px;
}
.usage-item .u-label {
  font-size: 11px;
  color: #8B8B96;
  margin-bottom: 4px;
  font-family: 'Noto Sans JP', sans-serif;
}
.usage-item .u-val {
  color: #0E1320;
  font-size: 18px;
}
.usage-item .u-val span { font-size: 11px; color: #8B8B96; margin-left: 2px; }

.company-payment-method {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #FAFAF7;
  border: 1px solid #C9C9C0;
  border-radius: 8px;
}
.pm-brand {
  background: #0E1320;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
}
.pm-number { font-family: 'Courier New', monospace; color: #0E1320; font-size: 15px; }
.pm-meta { font-size: 11px; color: #8B8B96; margin-top: 4px; font-family: 'Noto Sans JP', sans-serif; }
.pm-default {
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 企業プラン（プラン選択カード） */
.company-plans {
  margin-bottom: 24px;
}
.company-plan-card {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  color: #1A2236;
}
.company-plan-card.recommended {
  border-color: var(--gold);
  box-shadow: 0 6px 20px var(--gold-pale);
}
.company-plan-card.current {
  border-color: #0E1320;
  border-width: 2px;
}
.company-plan-card .plan-badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: #0E1320;
  color: var(--gold);
  padding: 3px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
}
.company-plan-card h3 {
  font-size: 18px;
  color: #0E1320;
  margin-bottom: 8px;
}
.company-plan-card .price {
  font-size: 32px;
  color: #0E1320;
  margin-bottom: 4px;
}
.company-plan-card .price-unit { font-size: 13px; color: #8B8B96; }
.company-plan-card .price .price-yen {
  font-size: 0.46em;
  vertical-align: 0.18em;
  margin-right: 1px;
}
.company-plan-card .desc {
  font-size: 12px;
  color: #6B6B7A;
  margin-bottom: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}
.company-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.company-plan-card ul li {
  padding: 5px 0 5px 20px;
  color: #1A2236;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  position: relative;
}
.company-plan-card ul li::before { content: '✓'; color: var(--gold); position: absolute; left: 0; }

.company-current-plan-card {
  background: linear-gradient(135deg, #0E1320, #1A2236);
  border: 1px solid #0E1320;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
}
.company-current-plan-card .cp-label {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.company-current-plan-card .cp-name {
  font-size: 24px;
  color: #FFFFFF;
  margin: 6px 0 4px;
}
.company-current-plan-card .cp-meta {
  font-size: 12px;
  color: var(--gold);
}

.company-coming-soon {
  background: linear-gradient(135deg, #FAFAF7, #F5F5F2);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 24px;
  text-align: center;
}
.company-coming-soon h3 { color: #0E1320; font-size: 18px; margin: 8px 0; }
.company-coming-soon p { color: #1A2236; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.8; }

/* 企業認証ページ */
.company-auth-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #FAFAF7;
}
.company-auth-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 540px;
  color: var(--navy-mid);
  box-shadow: 0 20px 60px rgba(14,19,32,.08);
}
.company-auth-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin-bottom: 28px;
  flex-direction: column;
}
.company-auth-logo .auth-logo-img {
  height: 64px;
  width: auto;
}
.company-auth-logo .logo-mark {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 2px;
}
.company-auth-logo .logo-sub {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-deep);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
}
.company-auth-title {
  font-size: 24px;
  color: var(--navy);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.company-auth-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-sub);
  text-align: center;
  margin-bottom: 28px;
}
.company-auth-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--navy-mid);
  margin-bottom: 16px;
  line-height: 1.6;
  cursor: pointer;
}
.company-auth-inline input[type="checkbox"],
.company-auth-inline input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.company-auth-link {
  color: #0E1320;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  font-size: 12px;
}
.company-auth-divider {
  text-align: center;
  margin: 20px 0;
  position: relative;
}
.company-auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #C9C9C0;
}
.company-auth-divider span {
  background: #FFFFFF;
  padding: 0 12px;
  position: relative;
  color: #8B8B96;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}
.company-auth-register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #8B8B96;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn-full { width: 100%; }

/* URL コピー行 */
.url-copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.eval-url {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--navy);
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px;
}

/* Plan card for pricing - current state */
.plan-card.current { position: relative; }
.plan-card.current .rec-badge { background: var(--teal) !important; }

/* ==========================================================
   プレミアム・パスポート閲覧（企業側・¥19,800/人プラン想定）
   全評価者 × 全設問の定量＋定性回答を表示
   ========================================================== */
.premium-passport-wrap {
  background: #FFFFFF;
  min-height: calc(100vh - 62px);
}
.premium-passport-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
}

/* トップバー */
.premium-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.premium-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: linear-gradient(135deg, #0E1320, #1A2236);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  min-width: 280px;
}
.premium-badge {
  background: linear-gradient(135deg, var(--gold), #B8903F);
  color: #0E1320;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 4px;
}
.premium-ctx-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #E8E8EE;
}

/* プロフィールカード */
.premium-profile-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.02);
}
.pp-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0E1320, #2A2A36);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.pp-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pp-name-row h2 {
  font-size: 24px;
  color: #0E1320;
  margin: 0;
}
.pp-verified {
  background: #F5F5F2;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 3px 10px;
  border-radius: 10px;
}
.pp-meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
  line-height: 1.7;
}
.pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pp-tag {
  background: #FAFAF7;
  border: 1px solid #C9C9C0;
  color: #1A2236;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
}

/* スコアサマリー */
.premium-score-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 820px) { .premium-score-grid { grid-template-columns: 1fr; } }
.premium-score-card, .premium-cat-card {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-radius: 12px;
  padding: 24px;
}
.premium-score-card { text-align: center; }
.ps-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: #8B8B96;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ps-circle {
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 78%, #F5F5F2 78% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-circle-inner {
  width: 116px;
  height: 116px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ps-num {
  font-size: 40px;
  color: #0E1320;
  line-height: 1;
}
.ps-max {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #8B8B96;
  margin-top: 2px;
}
.ps-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
}
.ps-rank strong {
  font-size: 22px;
  color: var(--gold);
  margin-left: 4px;
}
.ps-bench {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #8B8B96;
  margin-top: 8px;
}
.premium-cat-row {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.cat-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
}
.cat-tag {
  display: inline-block;
  margin-left: 6px;
  background: var(--gold);
  color: #0E1320;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.cat-track {
  height: 8px;
  background: #F5F5F2;
  border-radius: 4px;
  overflow: hidden;
}
.cat-fill {
  height: 100%;
  background: linear-gradient(90deg, #0E1320, var(--gold));
  border-radius: 4px;
}
.cat-val {
  font-size: 14px;
  color: #0E1320;
  text-align: right;
}

/* セクションタイトル */
.premium-section-title {
  margin: 0 0 16px;
}
.premium-section-title h3 {
  font-size: 20px;
  color: #0E1320;
  margin: 0 0 4px;
  position: relative;
  padding-left: 14px;
}
.premium-section-title h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.premium-section-title p {
  font-size: 12px;
  color: #8B8B96;
  padding-left: 14px;
  margin: 0;
}

/* 評価者カード */
.premium-evaluator-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 860px) { .premium-evaluator-cards { grid-template-columns: 1fr; } }
.premium-evaluator-card {
  background: #FAFAF7;
  border: 1px solid #C9C9C0;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}
.eval-avatar {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #0E1320;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.eval-name {
  font-size: 15px;
  color: #0E1320;
  margin-bottom: 2px;
}
.eval-rel {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
}
.eval-sub, .eval-submit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: #8B8B96;
  margin-top: 4px;
}

/* タブ */
.premium-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #FAFAF7;
  border: 1px solid #C9C9C0;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .premium-tabs { grid-template-columns: 1fr; } }
.premium-tab {
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  font-family: inherit;
}
.premium-tab:hover { background: #F5F5F2; }
.premium-tab.active {
  background: #0E1320;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,13,18,.2);
}
.premium-tab.active .pt-name { color: #fff; }
.premium-tab.active .pt-rel { color: var(--gold); }
.pt-name {
  font-size: 14px;
  color: #0E1320;
}
.pt-rel {
  font-size: 11px;
  color: #8B8B96;
  margin-top: 2px;
}

/* パネル */
.premium-eval-panel { display: none; }
.premium-eval-panel.active { display: block; }

.premium-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #FAFAF7, #F5F5F2);
  border: 1px solid #C9C9C0;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.pph-left { display: flex; align-items: center; gap: 12px; }
.pph-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0E1320;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.pph-name {
  font-size: 17px;
  color: #0E1320;
}
.pph-meta {
  font-size: 12px;
  color: #8B8B96;
  margin-top: 2px;
}
.pph-right { text-align: right; }
.pph-avg-label {
  font-size: 10px;
  color: #8B8B96;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pph-avg-value {
  font-size: 26px;
  color: #0E1320;
  line-height: 1.1;
}
.pph-avg-value span {
  font-size: 13px;
  color: #8B8B96;
}

/* QA セクション */
.premium-qa-section { margin-bottom: 24px; }
.premium-sec-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  background: #0E1320;
  color: #fff;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}
.premium-sec-title h4 {
  font-size: 15px;
  color: #fff;
  margin: 0;
}
.sec-count {
  font-size: 11px;
  color: var(--gold);
}

/* コア18問: カテゴリブロック */
.qa-cat-block {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-top: none;
  padding: 16px 20px;
}
.qa-cat-block:last-child { border-radius: 0 0 8px 8px; }
.qa-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #C9C9C0;
}
.qa-cat-badge {
  display: inline-block;
  background: #0E1320;
  color: var(--gold);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.qa-cat-count {
  font-size: 11px;
  color: #8B8B96;
}

/* 個別QA */
.qa-item {
  background: #FAFAF7;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.qa-item:last-child { margin-bottom: 0; }
.qa-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.qa-q {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
  flex: 1;
}
.qa-no {
  display: inline-block;
  background: #C9C9C0;
  color: #1A2236;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
}
.qa-text { color: #1A2236; }
.qa-score {
  font-size: 18px;
  white-space: nowrap;
}
.qa-score span {
  font-size: 11px;
  color: #8B8B96;
  font-family: 'Noto Sans JP', sans-serif;
}
.qa-comment {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  color: #1A2236;
  line-height: 1.7;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 4px;
}

/* 人間性 */
.humanity-list {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px 20px;
}
.humanity-item {
  padding: 12px 0;
  border-bottom: 1px dashed #C9C9C0;
}
.humanity-item:last-child { border-bottom: none; padding-bottom: 0; }
.humanity-item.is-summary {
  background: #FAFAF7;
  padding: 14px 16px;
  margin-top: 8px;
  border-radius: 6px;
  border-bottom: none;
  border-left: 3px solid var(--gold);
}
.humanity-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.humanity-key {
  font-size: 14px;
  color: #0E1320;
}
.humanity-badge {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
/* ★ Step 19: humanity-badge を新4色パレットで統一。
   段階的に意味（とても良い → 低い）に応じて緑〜赤までグラデ。 */
.humanity-badge.very-good { background: var(--c-green-pale); color: var(--c-green); }
.humanity-badge.good { background: var(--c-teal-pale); color: var(--c-teal); }
.humanity-badge.normal { background: var(--c-amber-pale); color: var(--c-amber); }
.humanity-badge.low { background: var(--c-red-pale); color: var(--c-red); }
.humanity-desc {
  font-size: 11px;
  color: #8B8B96;
  margin-bottom: 6px;
}
.humanity-comment {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #1A2236;
  line-height: 1.85;
  padding: 8px 12px;
  background: #FAFAF7;
  border-radius: 4px;
}
.humanity-item.is-summary .humanity-comment {
  background: #FFFFFF;
}

/* エピソード */
.episode-card {
  background: #FFFFFF;
  border: 1px solid #C9C9C0;
  border-top: none;
  padding: 16px 20px;
}
.episode-card:last-child { border-radius: 0 0 8px 8px; }
.episode-card + .episode-card {
  border-top: 1px dashed #C9C9C0;
}
.episode-num {
  display: inline-block;
  background: var(--gold);
  color: #0E1320;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.episode-title {
  font-size: 15px;
  color: #0E1320;
  margin-bottom: 8px;
}
.episode-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #1A2236;
  line-height: 1.8;
  padding: 12px 14px;
  background: #FAFAF7;
  border-radius: 6px;
  border-left: 3px solid var(--gold);
}

/* Coming Soon */
.premium-coming-soon {
  background: linear-gradient(135deg, #FAFAF7, #F5F5F2);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  margin-top: 24px;
}
.premium-coming-soon h3 {
  font-size: 20px;
  color: #0E1320;
  margin: 8px 0 8px;
}
.premium-coming-soon p {
  font-size: 13px;
  color: #1A2236;
  line-height: 1.7;
}

/* ==========================================================
   運営者UI（管理者・スーパーアドミン専用）
   深いネイビー＋ゴールド × データ密度高めのガバナンス感
   ========================================================== */

:root {
  --admin-bg: #0E1320;
  --admin-bg-2: #161D2E;
  --admin-surface: #1A2236;
  --admin-surface-2: #232C44;
  --admin-border: #2A3450;
  --admin-border-soft: #1F2740;
  --admin-text: #E8EBF2;
  --admin-text-sub: #A5ADC0;
  --admin-text-mute: #6E7891;
  --admin-gold: #C9A653;
  --admin-gold-soft: #E0BD68;
  --admin-accent: #4A8FB8;
  --admin-success: #3BA76B;
  --admin-danger: var(--c-red);
  --admin-warning: #E0A12B;
}

/* ===== 運営者ログイン画面 ===== */
.admin-login-bg {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(201,166,83,0.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(74,143,184,0.08), transparent 40%),
    var(--admin-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.admin-login-card {
  width: 100%;
  max-width: 440px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 44px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.admin-login-brand {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--admin-border-soft);
}
.admin-login-brand .badge-internal {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft));
  color: #0E1320;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.admin-login-brand h1 {
  font-size: 26px;
  color: var(--admin-text);
  font-weight: 600;
}
.admin-login-brand .sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--admin-text-mute);
  letter-spacing: 1.5px;
  margin-top: 4px;
}
.admin-login-card .form-group label {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--admin-text-sub);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.admin-login-card input[type="text"],
.admin-login-card input[type="email"],
.admin-login-card input[type="password"] {
  width: 100%;
  padding: 16px 18px;
  background: var(--admin-bg-2);
  border: 1.5px solid var(--admin-border);
  border-radius: var(--radius);
  color: var(--admin-text);
  font-size: 16px;
  min-height: 56px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.admin-login-card input:focus {
  outline: none;
  border-color: var(--admin-gold);
  box-shadow: 0 0 0 4px rgba(201,166,83,0.18);
}
.admin-login-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft));
  color: #0E1320;
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 1.5px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: transform .1s, box-shadow .2s;
  min-height: 60px;
}
.admin-login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,166,83,0.4); }
.admin-login-warning {
  margin-top: 24px;
  padding: 14px;
  background: rgba(217,83,79,0.08);
  border: 1px solid rgba(217,83,79,0.3);
  border-radius: 6px;
  font-size: 12px;
  color: #F1B8B6;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}

/* ===== 運営者ヘッダー ===== */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  background: var(--admin-bg-2);
  border-bottom: 1px solid var(--admin-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-header .header-logo { cursor: pointer; }
.admin-header .logo-mark {
  font-size: 18px;
  font-weight: 600;
  color: var(--admin-text);
}
.admin-header .logo-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--admin-gold);
  margin-left: 8px;
}
.admin-header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-header-nav a {
  color: var(--admin-text-sub);
  font-size: 13px;
  font-weight: 500;
  transition: color .2s;
}
.admin-header-nav a:hover { color: var(--admin-gold); opacity: 1; }
.admin-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 100px;
}
.admin-header-user .name {
  font-size: 12px;
  color: var(--admin-text);
  font-weight: 500;
}
.admin-header-user .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft));
  color: #0E1320;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-btn-outline {
  background: transparent;
  border: 1px solid var(--admin-border);
  color: var(--admin-text-sub);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
}
.admin-btn-outline:hover { color: var(--admin-text); border-color: var(--admin-gold); }

/* ===== 運営者レイアウト ===== */
.admin-shell {
  min-height: 100vh;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 60px);
}

/* ===== 運営者サイドバー ===== */
.admin-sidebar {
  background: var(--admin-bg-2);
  border-right: 1px solid var(--admin-border);
  padding: 24px 16px;
}
.admin-brand-block {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--admin-border-soft);
}
.admin-brand-block .avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft));
  color: #0E1320;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-brand-block .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-text);
}
.admin-brand-block .role {
  font-size: 10px;
  color: var(--admin-gold);
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  color: var(--admin-text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.admin-nav-item:hover {
  background: var(--admin-surface);
  color: var(--admin-text);
}
.admin-nav-item.active {
  background: linear-gradient(90deg, rgba(201,166,83,0.15), transparent);
  color: var(--admin-gold);
  border-left: 2px solid var(--admin-gold);
  font-weight: 500;
}

/* ===== 運営者メイン ===== */
.admin-main {
  padding: 32px 36px;
  overflow-x: auto;
}
.admin-page-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-page-title h1 {
  font-size: 24px;
  color: var(--admin-text);
  font-weight: 600;
}
.admin-page-title .desc {
  font-size: 12px;
  color: var(--admin-text-mute);
  margin-top: 4px;
}
.admin-page-title .actions { display: flex; gap: 10px; }

/* ===== 運営者KPIカード ===== */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.admin-kpi-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.admin-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--admin-gold);
  opacity: 0.5;
}
.admin-kpi-card .label {
  font-size: 11px;
  color: var(--admin-text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.admin-kpi-card .value {
  font-size: 28px;
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.2;
}
.admin-kpi-card .unit {
  font-size: 14px;
  color: var(--admin-text-sub);
  margin-left: 4px;
}
.admin-kpi-card .delta {
  font-size: 11px;
  margin-top: 6px;
}
.admin-kpi-card .delta.up { color: var(--admin-success); }
.admin-kpi-card .delta.down { color: var(--admin-danger); }
.admin-kpi-card .delta.flat { color: var(--admin-text-mute); }

/* ===== 運営者カード（汎用） ===== */
.admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}
.admin-card h3 {
  font-size: 16px;
  color: var(--admin-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-card h3 .more {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--admin-gold);
  font-weight: 400;
  cursor: pointer;
}

/* ===== 運営者2カラム ===== */
.admin-grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

/* ===== 運営者テーブル ===== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--admin-bg-2);
  color: var(--admin-text-mute);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--admin-border);
}
.admin-table td {
  padding: 12px;
  color: var(--admin-text-sub);
  border-bottom: 1px solid var(--admin-border-soft);
}
.admin-table tr:hover td { background: rgba(201,166,83,0.04); color: var(--admin-text); }
.admin-table .strong { color: var(--admin-text); font-weight: 500; }
.admin-table .muted { color: var(--admin-text-mute); font-size: 11px; }

/* ===== 運営者バッジ ===== */
.admin-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.admin-badge.active { background: rgba(59,167,107,0.2); color: var(--admin-success); }
.admin-badge.pending { background: rgba(224,161,43,0.2); color: var(--admin-warning); }
.admin-badge.suspended { background: rgba(217,83,79,0.2); color: var(--admin-danger); }
.admin-badge.free { background: rgba(110,120,145,0.2); color: var(--admin-text-mute); }
.admin-badge.paid { background: rgba(201,166,83,0.2); color: var(--admin-gold); }
.admin-badge.scout { background: rgba(74,143,184,0.2); color: var(--admin-accent); }

/* ===== 運営者ボタン ===== */
.admin-btn-primary {
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft));
  color: #0E1320;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.5px;
  transition: transform .1s, box-shadow .2s;
}
.admin-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,166,83,0.3); }
.admin-btn-secondary {
  background: var(--admin-surface-2);
  color: var(--admin-text-sub);
  border: 1px solid var(--admin-border);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
}
.admin-btn-secondary:hover { color: var(--admin-text); border-color: var(--admin-gold); }
.admin-btn-danger {
  background: rgba(217,83,79,0.15);
  color: var(--admin-danger);
  border: 1px solid rgba(217,83,79,0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-btn-danger:hover { background: rgba(217,83,79,0.25); }
.admin-btn-link {
  background: transparent;
  border: none;
  color: var(--admin-gold);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-btn-link:hover { text-decoration: underline; }

/* ===== 運営者検索バー ===== */
.admin-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-search-bar input,
.admin-search-bar select {
  background: var(--admin-bg-2);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--admin-text);
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-search-bar input { min-width: 240px; }
.admin-search-bar input:focus,
.admin-search-bar select:focus {
  outline: none;
  border-color: var(--admin-gold);
}

/* ===== 運営者収益分布バー ===== */
.admin-revenue-bar {
  display: flex;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  margin: 16px 0 12px;
  border: 1px solid var(--admin-border);
}
.admin-revenue-bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #0E1320;
}
.admin-revenue-bar .seg.s1 { background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-soft)); }
.admin-revenue-bar .seg.s2 { background: linear-gradient(135deg, #5B9FCB, #4A8FB8); color: #fff; }
.admin-revenue-bar .seg.s3 { background: linear-gradient(135deg, #5BBA85, #3BA76B); color: #fff; }
.admin-revenue-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--admin-text-sub);
}
.admin-revenue-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ===== 運営者アラートリスト ===== */
.admin-alert-list { list-style: none; }
.admin-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--admin-border-soft);
  font-size: 12px;
}
.admin-alert-item:last-child { border-bottom: none; }
.admin-alert-item .icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.admin-alert-item .icon.warn { background: rgba(224,161,43,0.18); color: var(--admin-warning); }
.admin-alert-item .icon.info { background: rgba(74,143,184,0.18); color: var(--admin-accent); }
.admin-alert-item .icon.danger { background: rgba(217,83,79,0.18); color: var(--admin-danger); }
.admin-alert-item .body { flex: 1; }
.admin-alert-item .title { color: var(--admin-text); font-weight: 500; margin-bottom: 2px; }
.admin-alert-item .meta { color: var(--admin-text-mute); font-size: 11px; }

/* ===== 運営者レスポンシブ ===== */
@media (max-width: 1024px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 200px 1fr; }
}
@media (max-width: 720px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { padding: 20px 16px; }
  .admin-header { padding: 12px 16px; }
  .admin-header-nav a { display: none; }
  .admin-kpi-grid { grid-template-columns: 1fr; }

  /* スマホでは admin-main の内部スクロールに依存せず、ヘッダーをビューポート固定する */
  .admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  .admin-layout { padding-top: 60px; }
  .admin-main { overflow-y: visible; }
}

/* ===== 強み番号（TOPセクション 02-1〜03） ===== */
.strength-num {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 1;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 4px;
}

/* ===== 比較表（企業向けLP） ===== */
.comparison-table {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
}
.comparison-table thead th {
  padding: 18px 24px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
}
.comparison-table thead th.highlight {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: var(--navy);
  font-weight: 700;
}
.comparison-table thead th:first-child {
  background: var(--navy-mid);
  width: 25%;
}
.comparison-table tbody th {
  padding: 16px 24px;
  background: var(--navy-pale);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  border-top: 1px solid var(--border);
  width: 25%;
}
.comparison-table tbody td {
  padding: 16px 24px;
  font-size: 14px;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border-light);
  text-align: center;
  line-height: 1.6;
}
.comparison-table tbody td.highlight {
  background: var(--gold-pale);
  color: var(--navy);
  font-weight: 600;
  border-left: 2px solid var(--gold);
}
@media (max-width: 720px) {
  .comparison-table table { font-size: 12px; table-layout: fixed; }
  .comparison-table thead th,
  .comparison-table tbody th,
  .comparison-table tbody td { padding: 12px 6px; font-size: 12px; }
  /* スマホでは列幅を 1行目ヘッダー固定・キャリアカ広めに */
  .comparison-table colgroup col:nth-child(1) { width: 18% !important; }
  .comparison-table colgroup col:nth-child(2) { width: 41% !important; }
  .comparison-table colgroup col:nth-child(3) { width: 41% !important; }
  /* ヘッダーの改行を許容(「従来のリファレンスチェック」がはみ出すのを防ぐ) */
  .comparison-table thead th {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.4;
    letter-spacing: 0;
  }
  /* キャリアカ列のテキストは折り返して可読性を上げる */
  .comparison-table tbody td.highlight,
  .comparison-table tbody td {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
  }
}
@media (max-width: 480px) {
  .comparison-table table { font-size: 11px; }
  .comparison-table thead th,
  .comparison-table tbody th,
  .comparison-table tbody td { padding: 10px 4px; font-size: 11px; }
  .comparison-table thead th { font-size: 11px; }
}

/* ================================================================
   評価依頼ページ：発行済み一覧（Phase 2 機能B）
   ================================================================ */
.eval-req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background .15s;
}
.eval-req-row:hover {
  background: var(--bg);
}
.eval-req-main {
  flex: 1;
  min-width: 0;
}
.eval-req-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.eval-req-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.eval-req-dates {
  font-size: 12px;
  color: var(--text-sub);
}
.eval-req-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.status-pill,
.rel-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.rel-pill {
  background: var(--navy-pale);
  color: var(--navy);
}

/* URL表示ボックス（モーダル内） */
.url-display-box {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 14px 16px;
  word-break: break-all;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--navy);
  user-select: all;
}
.url-display-box code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  padding: 0;
}

/* ================================================================
   共有URL管理ページ（Phase 4 Step 4）
   ================================================================ */
.share-token-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background .15s;
}
.share-token-row:hover {
  background: var(--bg);
}
.share-token-main {
  flex: 1;
  min-width: 0;
}
.share-token-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.share-token-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.share-token-views {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-sub);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.share-token-url-row {
  margin-bottom: 6px;
}
.share-token-url-code {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--navy-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.share-token-dates {
  font-size: 12px;
  color: var(--text-sub);
}
.share-token-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .share-token-row {
    flex-direction: column;
    gap: 10px;
  }
  .share-token-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .share-token-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* 閲覧履歴テーブル */
.view-logs-table {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}
.view-logs-head,
.view-logs-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
}
.view-logs-head {
  background: var(--bg);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-light);
}
.view-logs-row {
  border-bottom: 1px solid var(--border-light);
  transition: background .15s;
}
.view-logs-row:last-child {
  border-bottom: none;
}
.view-logs-row:hover {
  background: var(--bg);
}
@media (max-width: 600px) {
  .view-logs-head { display: none; }
  .view-logs-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ================================================================
   無料サマリー画面（Phase 4 Step 6）
   ================================================================ */

/* ロックチップ（「詳細閲覧にはプラン購入が必要」） */
.cp-summary-locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.cp-summary-locked-chip:hover {
  background: var(--gold-deep);
  color: #fff;
}

/* コメント抹粋リスト */
.cp-summary-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.cp-summary-comment-item {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cp-summary-comment-author {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-summary-comment-relation {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(10, 138, 148, 0.10);
  color: #0A8A94;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cp-summary-comment-qtitle {
  display: inline-block;
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
}
.cp-summary-comment-qtitle::before {
  content: "・";
  color: var(--text-mute);
  margin-right: 2px;
}
.cp-summary-comment-snippet {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* ボケシ表現：抹粋の末尾に「...続きを読む」を付け、グラデーションで読みにくく */
.cp-summary-comment-blur {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--gold-deep);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 166, 83, 0.15) 50%,
    rgba(201, 166, 83, 0.25) 100%);
  border-radius: 4px;
  filter: blur(0.4px);
  font-weight: 500;
  cursor: pointer;
}

/* CTAエリア */
.cp-summary-cta-area {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--teal-pale);
  border-radius: 8px;
  text-align: center;
}

/* モーダル共通 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.55);
  backdrop-filter: blur(2px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}
.modal-close:hover {
  background: var(--bg);
  color: var(--navy);
}

/* btn-success（コピー成功時） */
.btn-success {
  background: #3BA76B !important;
  color: #fff !important;
  border-color: #3BA76B !important;
}

/* スマホ対応 */
@media (max-width: 640px) {
  .eval-req-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .eval-req-actions {
    justify-content: flex-end;
  }
  .modal-card {
    padding: 20px 18px;
  }
}

/* ================================================================
   機能C 評価者用フォーム（独立レイアウト）
   ================================================================ */

/* ヘッダー：通常のSPAヘッダーとは別 */
.evaluator-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding: 14px 24px;
}
.evaluator-header-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.evaluator-header .logo-mark { color: #fff; font-size: 18px; }
.evaluator-header-logo {
  height: 30px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .evaluator-header-logo { height: 26px; }
  .gratitude-meter-sticky { top: 54px; }
}
@media (max-width: 600px) {
  .gratitude-meter-msg { display: none; }
  .gratitude-meter { gap: 10px; padding: 7px 12px; }
  .gratitude-meter-inner { gap: 10px; }
  .gratitude-meter-hearts { gap: 5px; }
  /* ラベルは文字を隠してアイコンのみに（1行に確実に収める） */
  .gratitude-meter-label { font-size: 0; gap: 0; }
  .gratitude-meter-label svg { width: 17px; height: 17px; }
  /* 星を一回り小さく（段階差は保ちつつ全体を縮小）。狭い時は縮小許可 */
  .gratitude-meter-hearts { transform: scale(0.82); transform-origin: left center; min-width: 0; }
  .gratitude-meter-pct { font-size: 16px; margin-left: auto; }
}
@media (max-width: 480px) {
  .evaluator-header-logo { height: 22px; }
  .gratitude-meter-sticky { top: 50px; padding: 6px 10px; }
  .gratitude-meter { gap: 8px; padding: 6px 10px; }
  .gratitude-meter-hearts { gap: 4px; }
}

/* メインコンテナ */
.evaluator-main {
  min-height: calc(100vh - 60px);
  background: var(--bg);
  padding: 32px 16px 64px;
}
.evaluator-form-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* ローディング */
.evaluator-loading {
  text-align: center;
  padding: 80px 0;
}
.spinner-lg {
  width: 36px; height: 36px;
  border: 4px solid var(--border-light);
  border-top-color: var(--navy);
  border-radius: 50%;
  margin: 0 auto;
  animation: loader-spin 0.8s linear infinite;
}

/* プログレスバー */
.evaluator-progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.evaluator-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, #D9BC78 100%);
  transition: width .4s ease;
}
.evaluator-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

/* === ありがとうメーター（重厚版：ネイビー×ゴールド／上部固定） === */
.gratitude-meter-sticky {
  position: sticky;
  top: 58px;
  z-index: 50;
  background: var(--navy, #0E1320);
  padding: 7px 16px;
  border-bottom: 1px solid rgba(201,166,83,0.22);
  box-shadow: 0 4px 14px rgba(8,11,20,0.28);
}
.gratitude-meter-sticky:empty {
  display: none;
}
.gratitude-meter-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.gratitude-meter {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(201,166,83,0.10) 0%, rgba(201,166,83,0) 48%),
    linear-gradient(135deg, #131A2C 0%, #0E1320 55%, #090D17 100%);
  border: 1px solid rgba(201,166,83,0.38);
  border-radius: 12px;
  padding: 8px 16px;
  margin-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 28px rgba(201,166,83,0.05),
    0 4px 14px rgba(8,11,20,0.28);
}
.gratitude-meter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #E7D6A8;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.gratitude-meter-label svg {
  fill: var(--gold, #C9A653);
  filter: drop-shadow(0 0 5px rgba(201,166,83,0.6));
}
.gratitude-meter-pct {
  flex-shrink: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 700;
  color: #F2E3B6;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(201,166,83,0.35);
}
.gratitude-meter-hearts {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  min-height: 25px;
}
.gratitude-heart-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
}
.gratitude-heart {
  fill: #2C3550;
  transition: fill .4s ease, transform .4s ease, filter .4s ease;
  transform: scale(0.9);
}
.gratitude-heart.is-lit {
  fill: var(--gold, #C9A653);
  transform: scale(1);
  filter: drop-shadow(0 0 6px rgba(201,166,83,0.75));
}
/* 新しく点灯した星：豪華に弾けるポップ＋グロー演出 */
.gratitude-heart.just-lit {
  animation: gratitudeHeartPop .75s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes gratitudeHeartPop {
  0%   { transform: scale(.3) rotate(-25deg); fill: #6B5A2E; filter: drop-shadow(0 0 0 rgba(201,166,83,0)); }
  40%  { transform: scale(1.6) rotate(8deg);  fill: #F2E3B6; filter: drop-shadow(0 0 14px rgba(242,227,182,0.95)); }
  65%  { transform: scale(.88) rotate(-3deg); }
  100% { transform: scale(1) rotate(0);       fill: var(--gold, #C9A653); filter: drop-shadow(0 0 6px rgba(201,166,83,0.75)); }
}
/* 新しく点灯した星から舞うゴールドの火花（6粒） */
.gratitude-heart-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gratitude-heart-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #F2E3B6;
  box-shadow: 0 0 6px rgba(242,227,182,0.9);
  opacity: 0;
  animation: gratitudeBurst .8s ease-out .05s both;
}
.gratitude-heart-burst i:nth-child(1) { --bx: -14px; --by: -13px; }
.gratitude-heart-burst i:nth-child(2) { --bx:  15px; --by: -10px; background: var(--gold-light, #D9BC78); }
.gratitude-heart-burst i:nth-child(3) { --bx: -12px; --by: 13px;  background: var(--gold, #C9A653); }
.gratitude-heart-burst i:nth-child(4) { --bx:  13px; --by: 14px; }
.gratitude-heart-burst i:nth-child(5) { --bx:  -2px; --by: -17px; background: var(--gold-light, #D9BC78); }
.gratitude-heart-burst i:nth-child(6) { --bx:   3px; --by: 17px;  background: var(--gold, #C9A653); }
@keyframes gratitudeBurst {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.1); }
}
/* メーター内の細いゴールドプログレスライン */
/* メーター全体に一瞬だけゴールドの光が走るシャイン演出 */
.gratitude-meter.is-advanced::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(242,227,182,0.32) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: gratitudeShine 1s ease-out .1s 1;
  pointer-events: none;
}
@keyframes gratitudeShine {
  0%   { left: -60%; }
  100% { left: 130%; }
}
/* 満タン時：ゴールドの縁取りをほのかに脈動させる */
.gratitude-meter.is-full {
  border-color: rgba(201,166,83,0.6);
  animation: gratitudeFullGlow 2.4s ease-in-out infinite;
}
@keyframes gratitudeFullGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 32px rgba(201,166,83,0.06), 0 6px 20px rgba(8,11,20,0.32); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 40px rgba(201,166,83,0.16), 0 6px 26px rgba(8,11,20,0.4), 0 0 18px rgba(201,166,83,0.25); }
}
/* アニメーションを抑制したいユーザーには演出をオフ */
@media (prefers-reduced-motion: reduce) {
  .gratitude-heart.just-lit { animation: none; }
  .gratitude-heart-burst i { animation: none; opacity: 0; }
  .gratitude-meter.is-advanced::after { animation: none; content: none; }
  .gratitude-meter.is-full { animation: none; }
}
.gratitude-meter-msg {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #C9CEDA;
  margin: 0;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gratitude-meter-sparkle {
  fill: #F2E3B6;
  vertical-align: -2px;
  margin-left: 4px;
  filter: drop-shadow(0 0 5px rgba(242,227,182,0.7));
}
/* 完了時：星がページ全体に舞い落ちるフィナーレ */
.star-finale-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.star-finale-piece {
  position: absolute;
  top: -40px;
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(201,166,83,0.55));
  animation: starFall var(--dur, 3s) cubic-bezier(.4, 0, .7, 1) var(--delay, 0s) 1 forwards;
}
@keyframes starFall {
  0%   { opacity: 0; transform: translate(0, -40px) rotate(0deg) scale(.6); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0), 102vh) rotate(var(--rot, 360deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .star-finale-layer { display: none; }
}
.evaluator-progress-step.is-current {
  color: var(--navy);
  font-weight: 600;
}
.evaluator-progress-step.is-done {
  color: var(--gold-deep);
}
.evaluator-progress-step.is-done::before {
  content: "✓ ";
}

/* セクションカード */
.evaluator-section-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.evaluator-section-head {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.evaluator-section-head h2 {
  font-size: 22px;
  color: var(--navy);
  margin-top: 4px;
  letter-spacing: 1px;
}
.evaluator-section-num {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--gold-deep);
  letter-spacing: 1px;
  font-weight: 600;
}

/* 1問のカード */
.question-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
  transition: box-shadow .2s, border-color .2s;
}
.question-card.question-error {
  border-color: var(--c-red);
  box-shadow: 0 0 0 4px rgba(217,83,79,0.12);
}
.question-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.question-id {
  background: var(--navy);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.importance-badge {
  font-size: 12px;
  color: var(--gold-deep);
  letter-spacing: 1px;
}
.question-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.question-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-main);
  margin: 8px 0 16px;
}

/* スコア選択（5段階） */
.score-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.score-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
}
.score-option:hover {
  border-color: var(--gold);
  background: #FEFBF5;
}
.score-option.is-selected {
  border-color: var(--gold);
  background: #FEFBF5;
  box-shadow: 0 0 0 2px rgba(201,166,83,0.15);
}
.score-option input[type="radio"] {
  display: none;
}
.score-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.score-option.is-selected .score-radio {
  border-color: var(--gold);
}
.score-option.is-selected .score-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: 50%;
}
.score-num {
  font-weight: 700;
  font-size: 16px;
  min-width: 20px;
}
.score-label {
  color: var(--text-main);
}

/* コメント欄 */
.comment-wrap { margin-top: 12px; }
.comment-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.required-mark {
  background: var(--c-red);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.optional-mark {
  background: var(--border-light);
  color: var(--text-sub);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.comment-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
  resize: vertical;
  min-height: 100px;
  color: var(--text-main);
}
/* ★ 2026-06-22: コメントが本人に非表示であることを伝える注釈バー */
.comment-privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-teal-pale);
  color: var(--c-teal-deep);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 7px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.comment-privacy-note svg { flex-shrink: 0; }
.comment-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,166,83,0.1);
}

/* ナビゲーションボタン */
.evaluator-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

/* 確認画面 */
.confirm-section {
  margin-bottom: 32px;
}
.confirm-section h3 {
  font-size: 16px;
  color: var(--navy);
  border-left: 3px solid var(--gold);
  padding-left: 10px;
  margin-bottom: 14px;
}
.confirm-item {
  background: var(--bg);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.confirm-q-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.confirm-q-id {
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.confirm-score {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.confirm-comment {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.7;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.confirm-comment-empty {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
}

/* サンクスページ */
.evaluator-thanks-card {
  max-width: 680px;
  margin: 40px auto;
  padding: 56px 40px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  font-family: 'Noto Sans JP', sans-serif;
}
.evaluator-thanks-card h1 {
}

/* スマホ調整 */
@media (max-width: 640px) {
  .evaluator-main { padding: 16px 8px 48px; }
  .evaluator-section-card { padding: 20px 16px; border-radius: 8px; }
  .evaluator-section-head h2 { font-size: 18px; }
  .question-card { padding: 16px 14px; }
  .question-text { font-size: 13px; }
  .evaluator-nav { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .evaluator-nav .btn { width: 100%; }
  .evaluator-progress-steps { font-size: 10px; }
  .evaluator-thanks-card { padding: 32px 20px; }
}

/* ================================================================
   機能D マイパスポート 新UI
   ================================================================ */
.comment-group {
  margin-bottom: 24px;
}
.comment-group .author {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-light);
}
.comment-group .comment-card:last-child {
  margin-bottom: 0;
}
.comment-q-head {
  display: block;
}

/* 人間性評価グリッド */
.humanity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.humanity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  gap: 8px;
}
.humanity-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
}
.humanity-badge {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

@media (max-width: 640px) {
  .humanity-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   関係性別スコア & カテゴリ×関係性クロス分析（2026/5/1 追加）
   キャリアカ独自クラスは cp- プレフィックス
   ================================================================ */

/* 関係性別スコアカード（横並びグリッド） */
.cp-rel-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.cp-rel-score-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--teal);
}
.cp-rel-score-card__label {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-rel-score-card__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cp-rel-score-card__score {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-rel-score-card__max {
  font-size: 13px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-rel-score-card__rank {
  margin-left: auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-deep, #C9A653);
}
.cp-rel-score-card__count {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-rel-score-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
}

/* カテゴリ×関係性 クロス表 */
.cp-cross-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cp-cross-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  min-width: 360px;
}
.cp-cross-th {
  text-align: center;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cp-cross-th--name {
  text-align: left;
  width: 90px;
}
.cp-cross-th--overall {
  background: var(--bg);
}
.cp-cross-th__count {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 400;
}
.cp-cross-td-name {
  text-align: left;
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--border-soft, #ECECE6);
}
.cp-cross-td {
  text-align: center;
  padding: 12px 6px;
  font-size: 14px;
  color: var(--navy);
  border-bottom: 1px solid var(--border-soft, #ECECE6);
}
.cp-cross-td--strongest {
  background: var(--teal-pale);
  color: var(--teal);
  font-weight: 700;
}
.cp-cross-td--overall {
  background: var(--bg);
  font-weight: 600;
  color: var(--text-sub);
}
.cp-cross-td--empty {
  color: var(--text-mute);
}
.cp-cross-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}

@media (max-width: 640px) {
  .cp-rel-score-grid {
    grid-template-columns: 1fr;
  }
  .cp-cross-th, .cp-cross-td, .cp-cross-td-name {
    padding: 8px 4px;
    font-size: 13px;
  }
}

/* ================================================================
   職務経歴 編集カード（2026/5/1 Phase 3 追加）
   ================================================================ */
.cp-workexp-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s;
}
.cp-workexp-card:hover {
  border-color: var(--text-mute);
}
.cp-workexp-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.cp-workexp-card__header:hover {
  background: var(--bg);
}
.cp-workexp-card__header-text {
  flex: 1;
  min-width: 0;
}
.cp-workexp-card__header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  font-family: 'Noto Sans JP', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-workexp-card__header-meta {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-workexp-card__toggle {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.cp-workexp-card__body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
}
.cp-workexp-card__body .form-group {
  margin-bottom: 14px;
}
.cp-workexp-card__body input[type="month"] {
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-workexp-card__body input[disabled] {
  background: var(--bg);
  color: var(--text-mute);
  cursor: not-allowed;
}

/* ================================================================
   職務経歴 閲覧表示（マイパスポート用、2026/5/1 Phase 3 追加）
   ================================================================ */
.cp-workexp-view__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cp-workexp-view__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-workexp-view__item:first-child {
  padding-top: 0;
}
.cp-workexp-view__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.cp-workexp-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.cp-workexp-view__company {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-workexp-view__current-badge {
  font-size: 11px;
  background: var(--teal);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cp-workexp-view__period {
  font-size: 13px;
  color: var(--text-sub);
  margin-left: auto;
}
.cp-workexp-view__title {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.cp-workexp-view__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.cp-workexp-view__tag {
  font-size: 11px;
  background: var(--bg);
  color: var(--text-sub);
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}
.cp-workexp-view__desc {
  font-size: 14px;
  color: var(--navy);
  line-height: 1.85;
  margin-top: 4px;
  white-space: pre-wrap;
}
.cp-workexp-view__card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #E3EAEA;
}
.cp-workexp-view__card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.cp-workexp-view__card-thumb {
  display: flex;
  align-items: center;
  min-height: 60px;
}

@media (max-width: 640px) {
  .cp-workexp-view__period {
    margin-left: 0;
    width: 100%;
  }
}
/* ================================================================
   ★★★ style.css への追加分（B2: 評価依頼上限カード）★★★
   ----------------------------------------------------------------
   既存の style.css の末尾に追記してください
   ================================================================ */

/* ===== B2: 評価依頼の利用状況カード ===== */
.cp-usage-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cp-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.cp-usage-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-usage-plan-label {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}

.cp-usage-plan-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}

.cp-usage-plan-price {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 2px;
}

.cp-usage-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-usage-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cp-usage-count {
  font-size: 14px;
  font-weight: 500;
}

.cp-usage-count strong {
  font-size: 18px;
  font-weight: 700;
  margin-right: 2px;
}

.cp-usage-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
}

.cp-usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease, background 0.3s ease;
}

.cp-usage-note {
  font-size: 13px;
  color: var(--text-sub);
  margin: 8px 0 0 0;
  line-height: 1.5;
}

.cp-usage-note-sub {
  font-size: 11px;
  color: var(--text-mute);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.cp-usage-note a {
  text-decoration: underline;
}

/* モバイル: ヘッダーを縦並びに */
@media (max-width: 600px) {
  .cp-usage-header {
    flex-direction: column;
    align-items: stretch;
  }
  .cp-usage-header .btn {
    align-self: flex-end;
  }
}

/* ===== B3: 料金プラン画面の解約ボタン ===== */
.cp-cancel-btn {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
}
.cp-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ===== B3: プランカードの slot エリア（高さ揃え用） ===== */
.plan-card-btn-slot {
  margin-top: auto;
}

/* ================================================================
   Phase 4 Step 7：詳細閲覧画面用スタイル
   ================================================================ */

/* アンロック残数プログレスバー */
.cp-unlock-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cp-unlock-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 評価カード（折りたたみ式） */
.cp-eval-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-eval-card {
  background: #fff;
  border: 1px solid #E6EAF2;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.cp-eval-card[open] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.cp-eval-card > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  user-select: none;
}
.cp-eval-card > summary::-webkit-details-marker {
  display: none;
}
.cp-eval-card[open] > summary {
  border-bottom-color: #E6EAF2;
  background: #fff;
}
.cp-eval-card > summary > div:first-child {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--navy);
}
.cp-eval-card-toggle {
  font-size: 16px;
  color: var(--text-mute);
  transition: transform 0.2s;
}
.cp-eval-card[open] .cp-eval-card-toggle {
  transform: rotate(180deg);
}
.cp-eval-card-body {
  padding: 16px;
}

/* コメント領域 */
.cp-eval-comments-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #E6EAF2;
}
.cp-eval-comment {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.cp-eval-comment-cat {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.cp-eval-comment p {
  font-size: 15px;
  color: var(--navy);
  line-height: 1.85;
  margin: 0;
}

/* セクションタイトル */
.cp-eval-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* スコアタイルのグリッド */
.cp-eval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* 個別スコアタイル */
.cp-item-tile {
  background: var(--bg);
  border: 1px solid #E6EAF2;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  position: relative;
  transition: all 0.15s ease;
}
.cp-item-tile.unlocked {
  background: #fff;
  border-color: var(--teal-light);
}
.cp-item-tile.locked {
  background: rgba(0, 0, 0, 0.03);
  border-style: dashed;
  border-color: #C9CDD4;
  cursor: pointer;
}
.cp-item-tile.locked:hover {
  background: var(--teal-pale);
  border-color: var(--teal);
  border-style: solid;
}
.cp-item-tile-key {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.cp-item-tile-score {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.cp-item-tile.locked .cp-item-tile-score {
  font-size: 18px;
  color: var(--text-mute);
}
.cp-item-tile-label {
  font-size: 10px;
  color: var(--text-sub);
  line-height: 1.4;
  min-height: 26px;
}
.cp-item-tile-cta {
  font-size: 10px;
  color: var(--teal);
  margin-top: 4px;
  font-weight: 600;
}

/* クロス分析マトリクス */
.cp-matrix-wrap {
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px;
}
.cp-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  min-width: 540px;
}
.cp-matrix-table th {
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 600;
  padding: 8px 6px;
  text-align: center;
  background: var(--bg);
  border-radius: 4px;
}
.cp-matrix-table td {
  text-align: center;
  padding: 4px;
  font-size: 12px;
  color: var(--navy);
}
.cp-matrix-cell {
  display: inline-block;
  min-width: 44px;
  padding: 6px 8px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  border-radius: 4px;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .cp-eval-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .cp-item-tile {
    padding: 8px;
  }
}

/* ================================================================
   Step 7 bugfix15：評価者サマリー（プロフィール直下）
   ================================================================ */

/* キャリアカ認証（縦積みバッジ）+ 求職者名（横並び・左寄せ）
   ★ Step 7 bugfix22: 親を block にして親幅100%を確保し、
     その内側で flex 横並びを実現する */
.cp-name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 0 24px 0;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--border-light, #E6EAF2);
}
.cp-cert-stack {
  flex-shrink: 0;
  margin-left: 0 !important;
}
.cp-name-block {
  flex: 1 1 auto;
  min-width: 0;
}

/* ★ Step 7 bugfix23: paid view では profile-photo は使わないので強制非表示
   （古い HTML が残っている場合の安全策） */
.passport-layout > .profile-header,
.passport-layout > .profile-photo,
.passport-layout > * > .profile-photo {
  display: none !important;
}

/* ロゴ＋認証テキストを縦に積んだパスポート風バッジ */
.cp-cert-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  flex-shrink: 0;
  min-width: auto;
}
.cp-cert-passport {
  width: 72px;
  height: 79px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(168, 126, 41, 0.25));
}
.cp-cert-stack-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.cp-cert-stack-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep, #B8902F);
  letter-spacing: 0.22em;
  text-shadow: none;
  padding-left: 0.22em;  /* letter-spacing による右寄せ補正 */
  line-height: 1;
}

.cp-name-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.cp-seeker-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.cp-name-block .meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-sub);
  margin: 0;
}

@media (max-width: 600px) {
  .cp-name-row {
    gap: 14px;
  }
  .cp-cert-stack {
    padding: 0;
    min-width: auto;
    gap: 4px;
  }
  .cp-cert-passport {
    width: 56px;
    height: 62px;
  }
  .cp-cert-stack-logo {
    width: 44px;
    height: 44px;
  }
  .cp-cert-stack-text {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .cp-seeker-name {
    font-size: 22px;
  }
}

.cp-evaluator-summary {
  margin: 16px 0 24px;
}
.cp-evaluator-summary-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light, #E6EAF2);
}
.cp-evaluator-summary-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.cp-evaluator-summary-sub {
  font-size: 12px;
  color: var(--text-mute);
}
.cp-evaluator-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 880px) {
  .cp-evaluator-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .cp-evaluator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cp-evaluator-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border: 1px solid #E5E7E0;
  border-radius: 10px;
  padding: 14px 8px 12px;
  min-height: 96px;
}
.cp-evaluator-tile--total {
  background: var(--c-teal, #0A8A94);
  border-color: var(--c-teal, #0A8A94);
  color: #fff;
}
.cp-evaluator-tile--total .cp-evaluator-tile-num {
  color: #fff;
  font-size: 32px;
}
.cp-evaluator-tile--total .cp-evaluator-tile-label {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cp-evaluator-tile--muted {
  opacity: 0.45;
}
.cp-evaluator-tile-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
  filter: grayscale(0.1);
}
.cp-evaluator-tile-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.cp-evaluator-tile-num-suffix {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 2px;
  font-family: 'Noto Sans JP', sans-serif;
}
.cp-evaluator-tile-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ================================================================
   Step 7 仕様変更：人間性評価セクション
   ================================================================ */
.cp-humanity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.cp-humanity-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #F7F8F5;
  border: 1px solid #E5E7E0;
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
}
.cp-humanity-tile-label {
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.4;
}
.cp-humanity-tile-rank {
  font-size: 14px;
  font-weight: 700;
  background: #EAF4EE;
  padding: 4px 12px;
  border-radius: 16px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cp-humanity-tile-rank-emoji {
  font-size: 18px;
  line-height: 1;
}
.cp-humanity-tile-rank-text {
  white-space: nowrap;
}

.cp-humanity-comments-wrap {
  border-left: 3px solid var(--teal-light, #7CC09E);
  padding-left: 16px;
}
.cp-humanity-comment {
  padding: 12px 0;
  border-bottom: 1px dashed #E5E7E0;
}
.cp-humanity-comment:last-child {
  border-bottom: none;
}
.cp-humanity-comment-head {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--navy);
}
.cp-humanity-comment p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy);
  margin: 0;
}

/* ================================================================
   Step 7 仕様変更：評価コメント設問単位カード
   ================================================================ */
.cp-q-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-q-card {
  background: #fff;
  border: 1px solid #E5E7E0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.cp-q-card[open] {
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.cp-q-card > summary {
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #FAFAF7;
  border-bottom: 1px solid transparent;
  transition: background .12s;
}
.cp-q-card > summary::-webkit-details-marker { display: none; }
.cp-q-card[open] > summary {
  border-bottom-color: #E5E7E0;
  background: #F4F6F1;
}
.cp-q-card > summary:hover {
  background: #F0F2EC;
}
.cp-q-card-summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.cp-q-card-summary-left strong {
  font-size: 14px;
  color: var(--navy);
}
.cp-q-card-summary-right {
  font-size: 12px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cp-q-key {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-deep, #C9A653);
  letter-spacing: 0.02em;
}
.cp-q-cat {
  display: inline-block;
  font-size: 11px;
  background: #F0F2EC;
  color: var(--text-sub);
  padding: 2px 8px;
  border-radius: 12px;
}

.cp-q-card-body {
  padding: 14px 16px;
  background: #fff;
}
.cp-q-comment {
  padding: 10px 0;
  border-bottom: 1px dashed #E5E7E0;
}
.cp-q-comment:last-child {
  border-bottom: none;
}
.cp-q-comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--navy);
}
.cp-q-comment-score {
  font-size: 12px;
  background: #EAF4EE;
  color: var(--teal, #3BA76B);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 600;
}
.cp-q-comment p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy);
  margin: 0;
}

/* ロック中設問カード */
.cp-q-card-locked {
  background: #F7F8F5;
  border-style: dashed;
  position: relative;
  padding: 14px 16px;
}
.cp-q-card-locked:hover {
  background: #F0F2EC;
}
.cp-q-card-locked-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cp-q-lock-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: #FFF7E6;
  color: #B8862C;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .cp-humanity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* スマホ: 2列を維持しつつ、余白とフォントを詰めて枠内に収める */
  .cp-humanity-tile {
    padding: 12px 8px;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }
  .cp-humanity-tile-label {
    font-size: 12.5px;
    line-height: 1.35;
  }
  .cp-humanity-tile-rank {
    font-size: 12px;
    padding: 3px 8px;
    gap: 3px;
    max-width: 100%;
  }
  .cp-humanity-tile-rank-emoji {
    font-size: 15px;
  }

  /* スマホ: AI分析カードの余白・フォントを詰めて1行の文字数を増やす */
  .ai-personality-card,
  .ai-gap-card,
  .ai-personality-headline,
  .ai-strength-card,
  .ai-growth-card,
  .ai-culture-card {
    padding: 13px 14px !important;
  }
  .ai-personality-card p.sans,
  .ai-gap-card p.sans,
  .ai-personality-headline p.sans {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  .ai-personality-grid,
  .ai-gap-grid {
    gap: 10px !important;
  }
  .cp-q-card > summary,
  .cp-q-card-locked {
    padding: 12px;
  }
  .cp-q-card-summary-left strong {
    font-size: 13px;
  }
}

/* ================================================================
   ★ Step 11: タイポグラフィ統一ルール（2026/05/04）
   --------------------------------------------------------------
   全体方針:
     - 本文・管理画面のすべて → 游ゴシック（Noto Sans JP）に統一
     - LP 2画面（home / corporate）の h1/h2 のみ → 游明朝（Noto Serif JP）

   実装の仕組み:
     router.js が <div id="app"> に data-page 属性を付与する。
       例) /         → data-page="home"
           /corporate → data-page="corporate"
     その属性をフックに、LP 2画面の h1/h2 だけ明朝に上書きする。
   --------------------------------------------------------------
   この一括変更により、以前の管理画面で使われていた明朝体の
   見出し・スコア表示は全てゴシック体に置き換わる（意図通り）。
   ================================================================ */
#app[data-page="home"] h1,
#app[data-page="home"] h2,
#app[data-page="corporate"] h1,
#app[data-page="corporate"] h2 {
  font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
}


/* === 2026-05-05: 企業ヘッダーの新規登録ボタン黒い四角バグ修正 === */
.company-header-nav a.company-btn-primary { color: #fff; }
.company-header-nav a.company-btn-primary:hover { color: #fff; }
.company-header-nav a.company-btn-outline { color: var(--navy); }
.company-header-nav a.company-btn-outline:hover { color: var(--gold); }
.company-header-nav .company-btn-primary,
.company-header-nav .company-btn-outline {
  padding: 8px 18px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
}


/* ================================================================
   AOS スマホ対応 (2026-05-05 追加)
   ----------------------------------------------------------------
   AOS の disable: 'mobile' 設定だけだと初回ロード時に
   opacity:0 のフラッシュが発生するケースがあるため、
   CSS側でスマホでは AOS のスタイルを完全無効化する。
   ================================================================ */
@media (max-width: 768px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================================
   逆オファー機能 — 企業画面（Phase D）
   ================================================================ */

/* サイドバーの NEW バッジ */
.company-nav-badge-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0E1320;
  background: linear-gradient(135deg, #D9BC78, #C9A653);
  border-radius: 3px;
  vertical-align: 1px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* D-1: 残高ヒーローカード */
.balance-hero {
  background: #fff;
  color: #1F2937;
  border: 1px solid #E3E8EE;
  border-left: 4px solid #076A72;
  border-radius: 0 14px 14px 0;
  position: relative;
  overflow: hidden;
}
.balance-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(10,138,148,.08) 0%, rgba(10,138,148,0) 65%);
  pointer-events: none;
}
.balance-hero h3 { color: #0E1320; }
.balance-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.balance-hero-main { flex: 1 1 280px; }
.balance-hero-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4A5168;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.balance-hero-value {
  font-family: 'Noto Serif JP', serif;
  font-size: 48px;
  font-weight: 600;
  color: var(--c-teal, #0A8A94);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.balance-hero-credits {
  margin-top: 6px;
  font-size: 14px;
  color: #A8862E;
  font-weight: 500;
}
.balance-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}
.balance-hero-actions .company-btn-primary,
.balance-hero-actions .company-btn-outline {
  width: 100%;
}
.balance-hero-actions .company-btn-outline {
  background: transparent;
  border-color: var(--c-teal, #0A8A94);
  color: var(--c-teal, #0A8A94);
}
.balance-hero-actions .company-btn-outline:hover:not(:disabled) {
  background: rgba(10,138,148,.08);
  border-color: var(--c-teal-deep, #076A72);
}
.balance-hero-note {
  margin-top: 16px;
  padding: 10px 14px;
  background: #FEF3E2;
  border: 1px solid #EAD9A8;
  border-radius: 6px;
  color: #A8862E;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .balance-hero-value { font-size: 36px; }
  .balance-hero-row { flex-direction: column; align-items: flex-start; }
  .balance-hero-actions { width: 100%; }
}

/* D-1: クイックアクション */
.balance-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.balance-quick-actions .company-btn-outline {
  text-align: left;
  justify-content: flex-start;
  font-weight: 500;
}

/* D-1: 仕組み案内 */
.balance-howto {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-sub);
  padding-left: 22px;
  margin: 0;
}
.balance-howto li { margin-bottom: 6px; }
.balance-howto li strong { color: var(--navy); }

/* ================================================================
   D-2: チャージ画面（パッケージカード + 履歴）
   ================================================================ */

/* 上部: 現在残高ピル */
.charge-current-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 18px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  min-width: 160px;
}

/* 3パッケージカード共通 */
.charge-packages {
  margin-top: 24px;
}
.charge-package-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.charge-package-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 19, 32, .08);
  border-color: #C9A653;
}
/* プラン名はゴシック (Noto Sans JP) で「料金案内」と統一 */
.charge-package-card h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px;
  text-align: center;
}
/* 価格もゴシック */
.charge-package-price {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.charge-package-credits {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #C9A653;
  text-align: center;
  margin: 4px auto 12px;
  display: inline-block;
  background: rgba(201, 166, 83, .10);
  padding: 4px 16px;
  border-radius: 999px;
  letter-spacing: .02em;
}
/* 件数バッジを中央に配置するためのラッパ */
.charge-package-credits-wrap {
  text-align: center;
  margin-bottom: 8px;
}
.charge-package-rate {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--text-mute);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-light);
  letter-spacing: .02em;
}
/* 「20% お得」「33% お得」のバッジ強調 */
.charge-package-rate-discount {
  display: inline-block;
  color: #fff;
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(185, 28, 28, .25);
}
.charge-package-feat {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}
.charge-package-feat li {
  padding: 4px 0 4px 20px;
  position: relative;
}
.charge-package-feat li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 4px;
  color: #C9A653;
  font-weight: 700;
}
.charge-package-feat li strong { color: var(--navy); }

/* おすすめ強調 */
.charge-package-card.recommended {
  border: 2px solid #C9A653;
  box-shadow: 0 6px 20px rgba(201, 166, 83, .15);
  transform: translateY(-4px);
}
.charge-package-card.recommended:hover {
  transform: translateY(-6px);
}
/* おすすめバッジは「料金案内」と同じ濃紺地+白文字スタイル */
.charge-package-card.recommended .plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy, #0E1320);
  color: #FAFAFA;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(14, 19, 32, .25);
}

@media (max-width: 880px) {
  .grid-3.charge-packages { grid-template-columns: 1fr; }
  .charge-package-card.recommended { transform: none; order: -1; }
  .charge-package-card.recommended:hover { transform: translateY(-2px); }
}

/* ================================================================
   D-3: 逆オファー新規作成画面
   ================================================================ */

/* 残高プレビューカード（横並び） */
.offer-balance-preview {
  background: linear-gradient(135deg, #FFFCF5 0%, #fff 100%);
  border-color: #E5DDC4;
}
.offer-balance-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.offer-balance-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}
.offer-balance-label {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.offer-balance-value {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.01em;
}
.offer-balance-value.offer-balance-after {
  color: #C9A653;
}
.offer-balance-value.offer-balance-consume {
  color: #B91C1C;
  font-size: 18px;
}
.offer-balance-arrow {
  font-size: 22px;
  color: var(--text-mute);
}
.offer-balance-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  color: #92400E;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
}
.offer-balance-warning strong { color: #78350F; }

@media (max-width: 720px) {
  .offer-balance-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .offer-balance-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

/* フォーム表示 */
.form-row {
  margin-bottom: 20px;
}
.form-row:last-child { margin-bottom: 0; }
.form-required {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  font-family: 'Noto Sans JP', sans-serif;
  vertical-align: 1px;
}
.form-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  font-family: 'Noto Sans JP', sans-serif;
  vertical-align: 1px;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-mute);
}
.form-counter {
  text-align: right;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-mute);
  font-family: 'Noto Sans JP', sans-serif;
}
.form-counter span { font-weight: 600; }

/* 確認ボックス */
.offer-confirm-box {
  background: #F0F9FF;
  border-left: 4px solid #0EA5E9;
}
.offer-confirm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.9;
}
.offer-confirm-list li {
  padding-left: 22px;
  position: relative;
}
.offer-confirm-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  color: #0EA5E9;
  font-weight: 700;
}

/* ページアクション（左キャンセル / 右送信） */
.company-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.company-page-actions .company-btn-outline {
  min-width: 120px;
}
.company-page-actions .company-btn-primary {
  min-width: 180px;
}
@media (max-width: 720px) {
  .company-page-actions {
    flex-direction: column-reverse;
  }
  .company-page-actions button { width: 100%; }
}

/* ================================================================
   D-4: 逆オファー一覧画面（フィルタタブ + ステータスバッジ）
   ================================================================ */

/* フィルタタブ */
.offer-filter-card {
  padding: 8px 8px;
}
.offer-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.offer-filter-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-sub);
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.offer-filter-tab:hover {
  background: var(--bg);
  color: var(--navy);
}
.offer-filter-tab.active {
  background: var(--navy);
  color: #FAFAFA;
  border-color: var(--navy);
}
.offer-filter-count {
  font-size: 11px;
  background: rgba(255,255,255,.18);
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}
.offer-filter-tab:not(.active) .offer-filter-count {
  background: var(--bg);
  color: var(--text-mute);
}

/* ステータスバッジ */
.offer-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* sent: 黄色（送信済・進行中・未登録） */
.badge-status-sent {
  background: #FEF3C7;
  color: #92400E;
}
/* registered: 青（登録済） */
.badge-status-registered {
  background: #DBEAFE;
  color: #1E40AF;
}
/* active: 緑（評価到着・閲覧権アクティブ） */
.badge-status-active {
  background: #B8F0F3;
  color: #076A72;
}
/* expired: グレー（期限切れ） */
.badge-status-expired {
  background: #F3F4F6;
  color: #6B7280;
}
/* declined: 黒系（辞退） */
.badge-status-declined {
  background: #1F2937;
  color: #F9FAFB;
}
/* cancelled: 赤（取消） */
.badge-status-cancelled {
  background: #FEE2E2;
  color: #991B1B;
}

/* テーブル内のリンクの調整 */
#reverseOffersList table td { vertical-align: top; }
#reverseOffersList table td:first-child { line-height: 1.5; }

/* ================================================================
   ★ Phase D-5: 逆オファー詳細画面
   ================================================================ */

/* ----- 基本情報グリッド ----- */
.offer-detail-grid {
  display: grid;
  gap: 12px;
}
.offer-detail-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.offer-detail-row:last-child {
  border-bottom: none;
}
@media (max-width: 640px) {
  .offer-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.offer-detail-label {
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.offer-detail-value {
  color: var(--text);
  font-size: 14px;
  word-break: break-all;
}
.offer-detail-message {
  font-family: 'Noto Sans JP', sans-serif;
}

/* ----- タイムライン ----- */
.offer-timeline {
  display: flex;
  flex-direction: column;
}
.offer-timeline-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding-bottom: 24px;
}
.offer-timeline-item:last-child {
  padding-bottom: 0;
}
.offer-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.offer-timeline-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.offer-timeline-done {
  background: #2DD4DE;
  color: white;
}
.offer-timeline-current {
  background: var(--gold, #C9A653);
  color: white;
  position: relative;
}
.offer-timeline-current::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--gold, #C9A653);
  opacity: 0.4;
  animation: timelinePulse 1.8s ease-in-out infinite;
}
@keyframes timelinePulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0; }
}
.offer-timeline-cancelled {
  background: #6B7280;
  color: white;
}
.offer-timeline-pending {
  background: #E5E7EB;
  color: #9CA3AF;
  border: 2px solid #E5E7EB;
}
.offer-timeline-line {
  flex: 1;
  width: 2px;
  background: var(--border-light, #E5E7EB);
  margin-top: 4px;
  min-height: 32px;
}
.offer-timeline-content {
  padding-top: 2px;
  min-width: 0;
}
.offer-timeline-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.offer-timeline-desc {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 4px;
}
.offer-timeline-time {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

/* ----- アクションボタン: danger スタイル（キャンセル用） ----- */
.company-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: white;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.company-btn-danger:hover {
  background: #FEF2F2;
}
.company-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================================================================
   ★ Phase 5 拡張: 追加質問機能 (改善版・モダンSaaSデザイン)
   作成日: 2026-05-07
   関連: pageCompanyReverseOfferNew, 評価者画面, 結果表示
   ================================================================ */

/* === コンテナ全体 === */
.custom-q-card {
  background: #fff;
  border: 1px solid rgba(14, 19, 32, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 24px;
  transition: border-color 0.15s ease;
}

/* === ヘッダー部 === */
.custom-q-card-head {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(14, 19, 32, 0.06);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.custom-q-head-left {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.custom-q-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #C9A653 0%, #d4b574 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(201, 166, 83, 0.25);
}
.custom-q-head-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}
.custom-q-head-text {
  flex: 1;
  min-width: 0;
}
.custom-q-head-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.custom-q-head-title-row h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--navy, #0E1320);
}
.custom-q-badge-optional {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  letter-spacing: 0.05em;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-head-desc {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-head-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.custom-q-counter-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy, #0E1320);
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-counter-num .counter-max {
  font-size: 14px;
  color: #9ca3af;
  font-weight: 400;
}
.custom-q-counter-label {
  font-size: 11px;
  color: #9ca3af;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-counter-num.is-full {
  color: #C8392E;
}

/* === 空状態 === */
.custom-q-empty-state {
  padding: 36px 24px;
  text-align: center;
}
.custom-q-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.custom-q-empty-icon svg {
  width: 28px;
  height: 28px;
  stroke: #9ca3af;
  stroke-width: 1.5;
}
.custom-q-empty-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 4px;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-empty-desc {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 20px;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === 質問アイテム (リスト時) === */
.custom-q-list-wrap {
  padding: 16px 20px;
}
.custom-q-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-q-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  transition: all 0.15s ease;
}
.custom-q-item:hover {
  border-color: rgba(14, 19, 32, 0.18);
}
.custom-q-item:focus-within {
  border-color: var(--gold, #C9A653);
  box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.1);
}
.custom-q-item.has-error {
  border-color: #fca5a5;
  background: #fef2f2;
}

.custom-q-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.custom-q-item-no {
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  min-width: 28px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-type-select {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  color: #374151;
  transition: border-color 0.15s ease;
}
.custom-q-type-select:hover {
  border-color: #9ca3af;
}
.custom-q-type-select:focus {
  outline: none;
  border-color: var(--gold, #C9A653);
  box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.1);
}
.custom-q-type-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
}
.custom-q-type-badge.type-rating {
  background: #dbeafe;
  color: #1e40af;
}
.custom-q-type-badge.type-text {
  background: #B8F0F3;
  color: #076A72;
}
.custom-q-type-badge.type-yesno {
  background: #ede9fe;
  color: #5b21b6;
}
.custom-q-item-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.custom-q-item-remove:hover {
  color: #dc2626;
  background: #fef2f2;
}
.custom-q-item-remove svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
}

.custom-q-item-input {
  width: 100%;
  font-size: 14px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--navy, #0E1320);
  line-height: 1.5;
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.custom-q-item-input:hover {
  border-bottom-color: #9ca3af;
}
.custom-q-item-input:focus {
  outline: none;
  border-bottom-color: var(--gold, #C9A653);
}
.custom-q-item-input::placeholder {
  color: #9ca3af;
}
.custom-q-item-counter {
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
  margin-top: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-item-counter.is-near-limit {
  color: #C8392E;
}

/* === アクションボタン (リスト下) === */
.custom-q-list-actions {
  display: flex;
  gap: 8px;
  padding: 14px 0 4px;
  border-top: 1px solid #f3f4f6;
  margin-top: 14px;
}

/* === ボタン共通 === */
.custom-q-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.custom-q-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  flex-shrink: 0;
}
.custom-q-btn-primary {
  background: var(--navy, #0E1320);
  color: #fff;
  border-color: var(--navy, #0E1320);
}
.custom-q-btn-primary:hover:not(:disabled) {
  background: #1a2438;
  border-color: #1a2438;
}
.custom-q-btn-primary:disabled {
  background: #9ca3af;
  border-color: #9ca3af;
  cursor: not-allowed;
}
.custom-q-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.custom-q-btn-secondary:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}
.custom-q-btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === テンプレートモーダル === */
.custom-q-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: cqFadeIn 0.15s ease;
}
@keyframes cqFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.custom-q-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: cqSlideUp 0.2s ease;
}
@keyframes cqSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.custom-q-modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-q-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy, #0E1320);
}
.custom-q-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  border-radius: 6px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.custom-q-modal-close:hover {
  color: var(--navy, #0E1320);
  background: #f3f4f6;
}
.custom-q-modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}
.custom-q-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.custom-q-modal-intro {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 20px;
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid var(--gold, #C9A653);
}

/* テンプレートカテゴリ */
.custom-q-tmpl-category {
  margin-bottom: 24px;
}
.custom-q-tmpl-category:last-child {
  margin-bottom: 0;
}
.custom-q-tmpl-category-head {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-tmpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-q-tmpl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
  text-align: left;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}
.custom-q-tmpl-item:hover:not(:disabled) {
  border-color: var(--gold, #C9A653);
  background: rgba(201, 166, 83, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.custom-q-tmpl-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.custom-q-tmpl-text {
  font-size: 14px;
  color: var(--navy, #0E1320);
  line-height: 1.5;
  flex: 1;
  text-align: left;
}
.custom-q-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}
.custom-q-modal-foot-info {
  font-size: 12px;
  color: #6b7280;
  font-family: 'Noto Sans JP', sans-serif;
}

/* === スマホ対応 === */
@media (max-width: 768px) {
  .custom-q-card-head {
    padding: 18px 18px;
    flex-wrap: wrap;
  }
  .custom-q-head-counter {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .custom-q-list-wrap {
    padding: 14px 16px;
  }
  .custom-q-empty-state {
    padding: 28px 18px;
  }
  .custom-q-empty-actions {
    flex-direction: column;
  }
  .custom-q-empty-actions .custom-q-btn {
    width: 100%;
    justify-content: center;
  }
  .custom-q-list-actions {
    flex-direction: column;
  }
  .custom-q-list-actions .custom-q-btn {
    width: 100%;
    justify-content: center;
  }
  .custom-q-item-head {
    gap: 6px;
  }
  .custom-q-modal {
    max-height: 95vh;
  }
  .custom-q-modal-head { padding: 16px 18px; }
  .custom-q-modal-body { padding: 16px 18px; }
  .custom-q-modal-foot { padding: 12px 18px; flex-direction: column; gap: 10px; align-items: stretch; }
  .custom-q-modal-foot .custom-q-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   ★ Phase 5 拡張: 求職者ダッシュボード - 受諾済みオファーセクション
   作成日: 2026-05-07
   ================================================================ */
.dash-accepted-offers {
  background: #fff;
  border: 1px solid rgba(14, 19, 32, 0.08);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.dash-accepted-offers-head {
  background: linear-gradient(135deg, #f8f5ed 0%, #fff 100%);
  border-bottom: 1px solid rgba(14, 19, 32, 0.06);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-accepted-offers-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #C9A653 0%, #d4b574 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-accepted-offers-head-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}
.dash-accepted-offers-head-text h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--navy, #0E1320);
}
.dash-accepted-offers-head-text p {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
.dash-accepted-offers-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-accepted-offer-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  transition: all 0.15s ease;
}
.dash-accepted-offer-item:hover {
  border-color: rgba(14, 19, 32, 0.2);
  background: rgba(14, 19, 32, 0.01);
}
.dash-accepted-offer-info {
  flex: 1;
  min-width: 0;
}
.dash-accepted-offer-company {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0E1320);
  margin: 0 0 4px;
  font-family: 'Noto Sans JP', sans-serif;
}
.dash-accepted-offer-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #6b7280;
  font-family: 'Noto Sans JP', sans-serif;
}
.dash-accepted-offer-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-accepted-offer-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
}
.dash-accepted-offer-action {
  flex-shrink: 0;
}
.dash-accepted-offer-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  background: var(--navy, #0E1320);
  color: #fff;
  border: 1px solid var(--navy, #0E1320);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.dash-accepted-offer-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.5;
}
.dash-accepted-offer-btn:hover {
  background: #1a2438;
  border-color: #1a2438;
}
.dash-accepted-offer-btn.is-secondary {
  background: #fff;
  color: var(--navy, #0E1320);
  border-color: #d1d5db;
}
.dash-accepted-offer-btn.is-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

@media (max-width: 768px) {
  .dash-accepted-offer-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dash-accepted-offer-action .dash-accepted-offer-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   キャリアカとは セクション (2026-05-09 追加)
   #/?section=about へリンク、求職者TOPページ内
   2026-05-09 ライト背景＋ティール緑へ刷新
   ============================================================ */
.about-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F7 50%, #FFFFFF 100%);
  color: #0E1320;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(10,138,148,0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201,166,83,0.04) 0%, transparent 40%);
  pointer-events: none;
}
.about-section .container { position: relative; z-index: 1; }

/* 1. ヘッドライン */
.about-headline { text-align: center; margin-bottom: 72px; }
.about-eyebrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 4px;
  color: #0A8A94;
  margin-bottom: 20px;
  font-family: 'Noto Serif JP', serif;
}
.about-title {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.65;
  margin: 0 0 28px;
  color: #0E1320;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}
.about-accent {
  color: #0A8A94;
  position: relative;
}
.about-accent-red {
  color: #C8392E;
  font-weight: 600;
}
.about-lead {
  font-size: 15px;
  line-height: 2;
  color: rgba(14,19,32,0.78);
  max-width: 720px;
  margin: 0 auto;
}

/* 2. 仕組み図解 */
.about-flow { margin-bottom: 72px; }
.about-subtitle {
  font-size: 22px;
  text-align: center;
  color: #0A8A94;
  margin-bottom: 36px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  letter-spacing: 1px;
}
.about-flow-steps {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.about-flow-step {
  flex: 1 1 160px;
  max-width: 200px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 12px;
  padding: 28px 16px 22px;
  position: relative;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.about-flow-step:hover {
  transform: translateY(-4px);
  border-color: rgba(10,138,148,0.5);
  box-shadow: 0 6px 16px rgba(10,138,148,0.12);
}
.about-flow-num {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: #0A8A94;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
}
.about-flow-icon {
  color: #0A8A94;
  margin: 6px 0 14px;
  display: flex;
  justify-content: center;
}
.about-flow-label {
  font-size: 14px;
  color: #0E1320;
  font-weight: 600;
  margin-bottom: 6px;
}
.about-flow-desc {
  font-size: 11px;
  color: rgba(14,19,32,0.6);
  line-height: 1.6;
}
.about-flow-arrow {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: rgba(10,138,148,0.4);
  font-weight: 300;
}

/* 3. 4つの特徴 */
.about-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 72px;
}
.about-feature-card {
  background: #FFFFFF;
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 8px;
  padding: 28px 20px;
  position: relative;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.about-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(10,138,148,0.5);
  box-shadow: 0 8px 20px rgba(10,138,148,0.1);
}
.about-feature-mark {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  color: rgba(10,138,148,0.45);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.about-feature-card h4 {
  font-size: 17px;
  color: #0A8A94;
  margin: 0 0 10px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
}
.about-feature-card p {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(14,19,32,0.75);
  margin: 0;
}

/* 4. 画面サンプル */
.about-mockups { margin-bottom: 72px; }
.about-mockup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.about-mockup-card {
  background: #FFFFFF;
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 12px;
  padding: 18px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.about-mockup-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,138,148,0.5);
  box-shadow: 0 8px 20px rgba(10,138,148,0.12);
}
.about-mockup-screen {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(14,19,32,0.18);
  margin-bottom: 16px;
}
.about-mockup-screen svg { display: block; width: 100%; height: auto; }
.about-mockup-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.about-mockup-caption strong {
  color: #0A8A94;
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
}
.about-mockup-caption span {
  color: rgba(14,19,32,0.6);
  font-size: 12px;
}

/* 5. なぜ今 */
.about-why { margin-bottom: 56px; }
.about-why-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  background: linear-gradient(135deg, rgba(10,138,148,0.06) 0%, rgba(201,166,83,0.05) 100%);
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 12px;
}
.about-why-text {
  font-size: 14px;
  line-height: 2;
  color: rgba(14,19,32,0.78);
  margin: 0 0 24px;
}
.about-why-text strong { color: #0A8A94; font-weight: 600; }
.about-why-quote {
  font-size: 16px;
  line-height: 1.9;
  color: #0E1320;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(10,138,148,0.2);
}

/* 6. CTA */
.about-cta {
  text-align: center;
  margin-top: 48px;
}
.about-cta .btn-ghost {
  color: #0A8A94;
  border-color: rgba(10,138,148,0.4);
}
.about-cta .btn-ghost:hover {
  background: rgba(10,138,148,0.08);
  border-color: #0A8A94;
}

/* スマホ改行制御 */
.about-br-pc { display: inline; }
.about-br-sp { display: none; }

/* スマホで折り返さない塊 */
.about-nowrap-sp { display: inline; }

/* STEP 1: 前提となる日常 (別枠) */
.about-flow-prereq {
  max-width: 720px;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, rgba(10,138,148,0.06) 0%, rgba(201,166,83,0.04) 100%);
  border: 1px solid rgba(10,138,148,0.22);
  border-radius: 12px;
  padding: 24px 28px;
  position: relative;
}
.about-flow-prereq-num {
  position: absolute;
  top: -12px; left: 24px;
  background: #0A8A94;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
}
.about-flow-prereq-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}
.about-flow-prereq-icon {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(10,138,148,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A8A94;
  box-shadow: 0 2px 8px rgba(10,138,148,0.08);
}
.about-flow-prereq-text { flex: 1 1 auto; }
.about-flow-prereq-label {
  font-size: 17px;
  color: #0E1320;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Noto Serif JP', serif;
}
.about-flow-prereq-desc {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(14,19,32,0.72);
}
.about-flow-divider {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(10,138,148,0.55);
  margin: 12px auto 24px;
  position: relative;
  max-width: 360px;
}
.about-flow-divider::before,
.about-flow-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 78px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,138,148,0.3), transparent);
}
.about-flow-divider::before { left: 0; }
.about-flow-divider::after { right: 0; }

/* なぜ今タイトル(一行表示維持) */
.about-why-title {
  margin-bottom: 24px;
  font-size: clamp(18px, 2.6vw, 22px);
  white-space: nowrap;
}

/* ----- レスポンシブ ----- */
@media (max-width: 900px) {
  .about-section { padding: 60px 0; }
  .about-flow-arrow { display: none; }
  .about-flow-steps { gap: 18px; }
  .about-flow-step { flex: 1 1 calc(50% - 12px); max-width: none; }
  .about-features { grid-template-columns: repeat(2, 1fr); }
  .about-mockup-grid { grid-template-columns: 1fr; }
  /* ★ C1 (2026-05-16): タブレットサイズでも SP 用改行を適用
     旧仕様では 540px 以下のみ .about-br-sp を表示していたが、
     540〜900px の中間レンジで PC 用改行のまま文字幅が狭くなり
     不自然な折り返しが発生していた。SP 用改行ブレークを早めに適用する。 */
  .about-br-pc { display: none; }
  .about-br-sp { display: inline; }
  .about-nowrap-sp { display: inline-block; white-space: nowrap; }
}
@media (max-width: 540px) {
  .about-flow-step { flex: 1 1 100%; max-width: none; }
  .about-features { grid-template-columns: 1fr; gap: 14px; }
  .about-headline { margin-bottom: 56px; }
  .about-flow { margin-bottom: 56px; }
  .about-mockups { margin-bottom: 56px; }
  .about-cta .btn { display: block; margin: 12px auto !important; width: 80%; max-width: 280px; }
  /* スマホでは PC 用 br を非表示、SP 用 br を表示 */
  .about-br-pc { display: none; }
  .about-br-sp { display: inline; }
  /* スマホで「第三者評価で証明する」を折り返し禁止 */
  .about-nowrap-sp { display: inline-block; white-space: nowrap; }
  /* タイトル・リードの余白調整 */
  .about-title { line-height: 1.8; font-size: 20px; }
  .about-lead { font-size: 14px; line-height: 2; padding: 0 4px; }
  .about-why-text { font-size: 13px; }
  .about-why-quote { font-size: 14px; line-height: 2; }
  /* なぜ今タイトル一行表示 (フォントを縮小して入る) */
  .about-why-title { font-size: 16px; white-space: nowrap; letter-spacing: -0.5px; }
  /* STEP1別枠 スマホレイアウト */
  .about-flow-prereq { padding: 22px 18px; }
  .about-flow-prereq-num { left: 14px; font-size: 10px; padding: 3px 10px; }
  .about-flow-prereq-body { flex-direction: column; gap: 14px; text-align: center; }
  .about-flow-prereq-icon { width: 52px; height: 52px; }
  .about-flow-prereq-label { font-size: 15px; }
  .about-flow-prereq-desc { font-size: 12px; }
  .about-flow-divider { font-size: 11px; max-width: 280px; }
  .about-flow-divider::before,
  .about-flow-divider::after { width: calc(50% - 64px); }
}

/* ============================================================
   3つのメリット セクション (2026-05-09 新設)
   stats-bar から刷新、リッチビジュアル + ストーリー型2列レイアウト
   ============================================================ */
.benefits-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  padding: 80px 0;
}
.benefits-header {
  text-align: center;
  margin-bottom: 56px;
}
.benefits-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 4px;
  color: #0A8A94;
  margin-bottom: 16px;
  font-family: 'Noto Serif JP', serif;
}
.benefits-title {
  font-size: clamp(22px, 3.4vw, 32px);
  margin: 0 0 16px;
}

/* 2列の行 */
.benefit-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 80px;
}
.benefit-row:last-child { margin-bottom: 0; }
.benefit-row-reverse {
  grid-template-columns: 6fr 5fr;
}
.benefit-illust { width: 100%; }
.benefit-illust svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(14,19,32,0.08);
}
.benefit-text { padding: 0 8px; }
.benefit-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 56px;
  font-weight: 300;
  color: rgba(10,138,148,0.18);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.benefit-heading {
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.55;
  color: #0E1320;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  margin: 0 0 20px;
}
.benefit-heading-sub {
  display: inline-block;
  font-size: 14px;
  color: #0A8A94;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 6px;
}
.benefit-accent {
  color: #0A8A94;
  position: relative;
}
.benefit-body {
  font-size: 14px;
  line-height: 2;
  color: rgba(14,19,32,0.78);
  margin: 0 0 24px;
}
.benefit-body strong {
  color: #0A8A94;
  font-weight: 600;
}
.benefit-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.benefit-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(14,19,32,0.85);
  margin-bottom: 8px;
  font-family: 'Noto Sans JP', sans-serif;
}
.benefit-points li:last-child { margin-bottom: 0; }
.benefit-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(10,138,148,0.12);
  color: #0A8A94;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
}

/* スマホ全般のテキスト改行バランス調整用 */
.sp-balance { line-height: 1.7; }

/* レスポンシブ */
@media (max-width: 900px) {
  .benefits-section { padding: 60px 0; }
  .benefit-row,
  .benefit-row-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 56px;
  }
  /* 逆順行を、スマホでは画像が先に来るように統一 */
  .benefit-row-reverse .benefit-text { order: 2; }
  .benefit-row-reverse .benefit-illust { order: 1; }
  .benefit-text { padding: 0 4px; text-align: center; }
  .benefit-num { font-size: 44px; margin-bottom: 8px; }
  .benefit-heading { font-size: 20px; line-height: 1.7; }
  .benefit-points {
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 540px) {
  .benefits-section { padding: 50px 0; }
  .benefit-row,
  .benefit-row-reverse {
    margin-bottom: 48px;
    gap: 20px;
  }
  .benefit-heading { font-size: 19px; }
  .benefit-heading-sub { font-size: 12px; }
  .benefit-body { font-size: 13px; line-height: 1.95; }
  .benefit-points li { font-size: 12px; }
  /* スマホで section-title のバランス調整 */
  .sp-balance {
    font-size: clamp(18px, 5.4vw, 22px) !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
  }
}

/* ============================================================
   企業ページ専用スタイル (2026-05-09 リデザイン)
   - card-quote (補強メッセージ)
   - corp-pricing-tabs (タブ切替)
   - corp-mockup (擬似画面)
   - corp-faq (アコーディオンFAQ)
   ============================================================ */

/* 補強メッセージ */
.card-quote {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(10,138,148,0.06) 0%, rgba(201,166,83,0.05) 100%);
  border-left: 4px solid #0A8A94;
  border-radius: 4px;
}
.card-quote-headline {
  font-size: 17px;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.7;
  font-family: 'Noto Serif JP', serif;
}
.card-quote-body {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.95;
  margin: 0;
}
@media (max-width: 540px) {
  .card-quote { padding: 22px 20px; }
  .card-quote-headline { font-size: 15px; }
}

/* 企業料金プラン タブ */
.corp-pricing-tabs {
  display: flex;
  gap: 0;
  max-width: 720px;
  margin: 40px auto 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(14,19,32,0.08);
  background: #fff;
}
.corp-pricing-tab {
  flex: 1;
  padding: 18px 16px;
  border: none;
  background: #FAFAFA;
  cursor: pointer;
  text-align: center;
  transition: background .2s, color .2s;
  border-bottom: 3px solid transparent;
  font-family: 'Noto Sans JP', sans-serif;
}
.corp-pricing-tab:hover { background: #F0F4F3; }
.corp-pricing-tab.active {
  background: #fff;
  border-bottom-color: #0A8A94;
}
.corp-tab-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.corp-pricing-tab.active .corp-tab-label { color: #0A8A94; }
.corp-tab-sub {
  display: block;
  font-size: 11px;
  color: var(--text-mute);
}
.corp-pricing-panel { display: none; padding-top: 24px; }
.corp-pricing-panel.active { display: block; }
.corp-pricing-desc {
  text-align: center;
  font-size: 14px;
  color: var(--text-sub);
  line-height: 2;
  margin: 24px auto 0;
  max-width: 720px;
}
.corp-pricing-desc strong { color: #0A8A94; font-weight: 600; }

@media (max-width: 540px) {
  .corp-pricing-tab { padding: 14px 8px; }
  .corp-tab-label { font-size: 13px; }
  .corp-tab-sub { font-size: 10px; }
  .corp-pricing-desc { font-size: 13px; padding: 0 4px; }
}

/* 企業擬似画面 */
.corp-mockup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.corp-mockup-card {
  background: #FFFFFF;
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 12px;
  padding: 18px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.corp-mockup-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,138,148,0.5);
  box-shadow: 0 8px 20px rgba(10,138,148,0.12);
}
.corp-mockup-screen {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(14,19,32,0.18);
  margin-bottom: 16px;
}
.corp-mockup-screen svg { display: block; width: 100%; height: auto; }
.corp-mockup-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.corp-mockup-caption strong {
  color: #0A8A94;
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
}
.corp-mockup-caption span {
  color: rgba(14,19,32,0.6);
  font-size: 12px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .corp-mockup-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* 企業FAQ */
.corp-faq {
  max-width: 820px;
  margin: 48px auto 0;
}
.corp-faq-item {
  background: #fff;
  border: 1px solid rgba(10,138,148,0.18);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.corp-faq-item:hover { border-color: rgba(10,138,148,0.4); }
.corp-faq-item[open] {
  border-color: rgba(10,138,148,0.5);
  box-shadow: 0 4px 14px rgba(10,138,148,0.08);
}
.corp-faq-item summary {
  padding: 18px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  user-select: none;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}
.corp-faq-item summary::-webkit-details-marker { display: none; }
.corp-faq-q {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(10,138,148,0.12);
  color: #0A8A94;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
}
.corp-faq-item summary > span:nth-child(2) { flex: 1 1 auto; }
.corp-faq-icon {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 300;
  color: #0A8A94;
  transition: transform .2s;
  width: 22px;
  text-align: center;
  line-height: 1;
}
.corp-faq-item[open] .corp-faq-icon {
  transform: rotate(45deg);
}
.corp-faq-a {
  padding: 0 24px 22px 66px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--text-sub);
}
.corp-faq-a p { margin: 0; }
.corp-faq-a strong { color: #0A8A94; font-weight: 600; }
@media (max-width: 540px) {
  .corp-faq-item summary { padding: 16px 18px; gap: 10px; font-size: 13px; }
  .corp-faq-q { width: 24px; height: 24px; font-size: 11px; }
  .corp-faq-a { padding: 0 18px 18px 52px; font-size: 12px; }
}

/* ============================================================
   企業ページ Hero 直下 メイン+オプション訴求バナー (2026-05-09)
   stats-bar の代替、利用フローを2分割で提示
   ============================================================ */
.corp-flow-bar {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F7 100%);
  padding: 56px 0 48px;
  border-bottom: 1px solid rgba(10,138,148,0.1);
}
.corp-flow-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.corp-flow-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 24px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 6px 20px rgba(14,19,32,0.06);
  border: 1px solid rgba(10,138,148,0.16);
  transition: transform .25s, box-shadow .25s;
}
.corp-flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(14,19,32,0.1);
}
.corp-flow-main {
  border-color: rgba(10,138,148,0.4);
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9F7 100%);
}
.corp-flow-option {
  border-color: rgba(201,166,83,0.4);
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF5E5 100%);
}
.corp-flow-badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: #0A8A94;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  letter-spacing: 1.5px;
  font-family: 'Noto Sans JP', sans-serif;
}
.corp-flow-badge-option {
  background: #C9A653;
}
.corp-flow-icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(10,138,148,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A8A94;
}
.corp-flow-option .corp-flow-icon {
  border-color: rgba(201,166,83,0.3);
  color: #A8862E;
}
.corp-flow-text {
  flex: 1 1 auto;
}
.corp-flow-title {
  font-size: 17px;
  font-weight: 700;
  color: #0E1320;
  margin-bottom: 6px;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.55;
}
.corp-flow-desc {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(14,19,32,0.75);
  margin-bottom: 10px;
}
.corp-flow-desc strong {
  color: #0A8A94;
  font-weight: 600;
}
.corp-flow-option .corp-flow-desc strong {
  color: #A8862E;
}
.corp-flow-cta {
  display: inline-block;
  font-size: 12px;
  color: #0A8A94;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(10,138,148,0.1);
  border-radius: 12px;
}
.corp-flow-option .corp-flow-cta {
  color: #A8862E;
  background: rgba(201,166,83,0.1);
}
.corp-flow-note {
  text-align: center;
  margin-top: 28px;
  font-size: 12px;
  color: rgba(14,19,32,0.6);
  line-height: 1.85;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .corp-flow-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 540px) {
  .corp-flow-bar { padding: 44px 0 36px; }
  .corp-flow-card { padding: 24px 18px 20px; gap: 14px; flex-direction: column; align-items: stretch; }
  .corp-flow-icon { width: 48px; height: 48px; align-self: flex-start; }
  .corp-flow-title { font-size: 15px; line-height: 1.7; }
  .corp-flow-desc { font-size: 12px; }
  .corp-flow-cta { font-size: 11px; }
  .corp-flow-note { font-size: 11px; padding: 0 12px; }
}

/* ============================================================
   採用企業プラン (#/company-pricing) - 2セクション構造 (2026-05-09)
   ============================================================ */
.company-pricing-section {
  margin-bottom: 24px;
}
.company-pricing-section-head {
  position: relative;
  padding: 18px 20px 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F8F7 100%);
  border-radius: 8px;
  border-left: 4px solid #0A8A94;
}
.company-pricing-section:has(.company-pricing-badge-option) .company-pricing-section-head {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF5E5 100%);
  border-left-color: #C9A653;
}
.company-pricing-badge {
  display: inline-block;
  background: #0A8A94;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  letter-spacing: 1.5px;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 8px;
}
.company-pricing-badge-option {
  background: #C9A653;
}
.company-pricing-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  font-family: 'Noto Serif JP', serif;
}
.company-pricing-section-desc {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 0;
}
.mt-32 { margin-top: 32px; }

@media (max-width: 540px) {
  .company-pricing-section-head { padding: 16px 16px 12px; }
  .company-pricing-section-title { font-size: 17px; }
  .company-pricing-section-desc { font-size: 12px; }
}

/* ============================================================
   お問い合わせフォーム (#/contact) - 2026-05-09
   ============================================================ */
.hero-compact { padding: 40px 0 32px; }
.hero-compact h1 { font-size: 32px; margin-bottom: 12px; }
.container-narrow { max-width: 720px; margin: 0 auto; }

.contact-info-card {
  background: linear-gradient(135deg, #F4F8F7 0%, #FFFFFF 100%);
  border: 1px solid rgba(10,138,148,0.2);
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 32px;
}
.contact-info-row { display: flex; align-items: center; gap: 16px; }
.contact-info-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  background: rgba(10,138,148,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A8A94;
}
.contact-info-text { flex: 1 1 auto; }
.contact-info-label { font-size: 11px; color: #6B7280; margin-bottom: 2px; }
.contact-info-value { font-size: 15px; font-weight: 600; }
.contact-info-value a { color: #0A8A94; text-decoration: none; }
.contact-info-value a:hover { text-decoration: underline; }

.contact-form { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 32px; box-shadow: 0 2px 12px rgba(14,19,32,0.04); }
.contact-form-grid { display: flex; flex-direction: column; gap: 20px; }
.contact-form-row { display: flex; flex-direction: column; gap: 8px; }
.contact-label {
  font-size: 13px;
  font-weight: 600;
  color: #0E1320;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-required {
  font-size: 10px;
  background: #C8392E;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.contact-optional {
  font-size: 10px;
  background: #9CA3AF;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  background: #FFFFFF;
  color: #0E1320;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0A8A94;
  box-shadow: 0 0 0 3px rgba(10,138,148,0.1);
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.contact-form select { appearance: none; padding-right: 36px; }

.contact-checkbox-row { padding: 12px 0; }
.contact-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.7;
}
.contact-checkbox-label input[type="checkbox"] {
  margin-top: 4px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #0A8A94;
  cursor: pointer;
}
.contact-checkbox-label a { color: #0A8A94; }

.contact-message-area {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.contact-message-error {
  background: rgba(200,57,46,0.08);
  border-left: 3px solid #C8392E;
  color: #92281F;
}

.contact-submit-row { margin-top: 8px; }
.contact-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: contactSpin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
@keyframes contactSpin { to { transform: rotate(360deg); } }

.contact-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.85;
}
.contact-note a { color: #0A8A94; }

.contact-success {
  text-align: center;
  padding: 40px 24px;
}
.contact-success-icon { margin-bottom: 20px; }
.contact-success-title {
  font-size: 22px;
  color: #0A8A94;
  margin: 0 0 16px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
}
.contact-success-msg {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.85;
  margin: 0 0 28px;
}
.contact-success-actions { display: flex; justify-content: center; gap: 12px; }

@media (max-width: 600px) {
  .contact-form { padding: 22px 18px; }
  .hero-compact { padding: 32px 0 24px; }
  .hero-compact h1 { font-size: 24px; }
  .contact-info-card { padding: 14px 16px; }
  .contact-info-row { gap: 12px; }
  .contact-info-icon { width: 36px; height: 36px; }
}

/* ============================================================
   Admin Console (Phase A 2026-05-13) - 管理画面共通スタイル
   ============================================================ */

.admin-shell {
  min-height: 100vh;
  background: #F5F7FB;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ヘッダー */
.admin-header {
  height: 56px;
  background: linear-gradient(135deg, #0E1320 0%, #1A2236 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-header-left { display: flex; align-items: center; gap: 12px; }
.admin-header-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.admin-header-icon { font-size: 18px; }
.admin-header-title { color: #C9A653; letter-spacing: 0.5px; }
.admin-header-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #B91C1C;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
}
.admin-header-right { display: flex; align-items: center; gap: 16px; }
.admin-header-user { font-size: 13px; color: #E2E6EE; }
.admin-header-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-header-logout:hover { background: rgba(255,255,255,0.1); }

/* レイアウト */
.admin-layout { display: flex; min-height: calc(100vh - 56px); }

/* サイドナビ */
.admin-sidebar {
  width: 220px;
  background: #FFFFFF;
  border-right: 1px solid #E5E8EE;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex-shrink: 0;
}
.admin-nav { flex: 1; display: flex; flex-direction: column; }
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: #5A6478;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.admin-nav-item:hover { background: #F5F7FB; color: #0E1320; }
.admin-nav-item.active {
  background: linear-gradient(90deg, rgba(201,166,83,0.12), transparent);
  color: #0E1320;
  border-left-color: #C9A653;
  font-weight: 600;
}
.admin-nav-icon { font-size: 16px; }
.admin-sidebar-footer {
  padding: 16px 20px;
  font-size: 10px;
  color: #8A93A6;
  border-top: 1px solid #E5E8EE;
}

/* メインコンテンツ */
.admin-main {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  min-width: 0;
}
.admin-page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E8EE;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-page-title h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  color: #0E1320;
  margin: 0;
}
.admin-page-title .desc {
  font-size: 12px;
  color: #6E7891;
  margin-top: 4px;
}
.admin-page-title .actions { display: flex; gap: 8px; }

/* ボタン */
.admin-btn-primary {
  background: #0E1320;
  color: #C9A653;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.admin-btn-primary:hover { opacity: 0.85; }
.admin-btn-secondary {
  background: #FFFFFF;
  color: #5A6478;
  border: 1px solid #D5D9E2;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-btn-secondary:hover { background: #F5F7FB; border-color: #B5BBC6; }

/* KPI カード */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.admin-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 8px;
  padding: 16px 18px;
  transition: box-shadow 0.2s;
}
.admin-kpi-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.admin-kpi-card .label {
  font-size: 12px;
  color: #6E7891;
  margin-bottom: 8px;
  font-weight: 500;
}
.admin-kpi-card .value {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  color: #0E1320;
  font-weight: 700;
  line-height: 1.2;
}
.admin-kpi-card .value .unit {
  font-size: 13px;
  color: #6E7891;
  font-weight: 500;
  margin-left: 4px;
}
.admin-kpi-card .delta {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
}
.admin-kpi-card .delta.up { color: #058255; }
.admin-kpi-card .delta.down { color: #B91C1C; }
.admin-kpi-card .delta.flat { color: #6E7891; }

/* カード(汎用) */
.admin-card {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.admin-card h3 {
  font-size: 14px;
  color: #0E1320;
  margin: 0 0 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-card h3 .more {
  font-size: 11px;
  color: #C9A653;
  font-weight: 500;
  cursor: pointer;
}
.admin-card h3 .more:hover { text-decoration: underline; }

.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-sidebar { width: 64px; }
  .admin-nav-label, .admin-sidebar-footer { display: none; }
  .admin-main { padding: 16px; }
}

/* テーブル */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-table th {
  text-align: left;
  font-weight: 600;
  color: #5A6478;
  padding: 10px 12px;
  border-bottom: 2px solid #E5E8EE;
  background: #F9FAFC;
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #EEF0F4;
  color: #2D3548;
}
.admin-table tr:hover { background: #F9FAFC; }

/* ログイン画面 */
.admin-login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #0E1320 0%, #1A2236 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Noto Sans JP', sans-serif;
}
.admin-login-card {
  max-width: 420px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 40px 36px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  border-top: 4px solid #C9A653;
}
.admin-login-brand {
  text-align: center;
  margin-bottom: 28px;
}
.admin-login-brand .badge-internal {
  display: inline-block;
  padding: 3px 10px;
  background: #B91C1C;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 4px;
  margin-bottom: 12px;
}
.admin-login-brand h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  color: #0E1320;
  margin: 0 0 4px;
}
.admin-login-brand .sub {
  font-size: 11px;
  color: #C9A653;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.admin-login-card .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #2D3548;
  margin-bottom: 6px;
}
.admin-login-card .form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D5D9E2;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
}
.admin-login-card .form-group input:focus {
  outline: none;
  border-color: #C9A653;
  box-shadow: 0 0 0 2px rgba(201,166,83,0.15);
}
.admin-login-btn {
  width: 100%;
  padding: 12px;
  background: #0E1320;
  color: #C9A653;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}
.admin-login-btn:hover:not(:disabled) { opacity: 0.85; }
.admin-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-login-warning {
  margin-top: 20px;
  padding: 12px 14px;
  background: #FDF4EE;
  border-left: 3px solid #D97A4D;
  border-radius: 4px;
  font-size: 11px;
  color: #5A6478;
  line-height: 1.7;
}

/* 売上バー(既存 HTML 由来) */
.admin-revenue-bar {
  display: flex;
  height: 32px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.admin-revenue-bar .seg {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.admin-revenue-bar .seg.s1 { background: #C9A653; }
.admin-revenue-bar .seg.s2 { background: #058255; }
.admin-revenue-bar .seg.s3 { background: #1F6FAB; }

/* グラフ canvas 周り */
.admin-chart-wrapper { position: relative; width: 100%; height: 280px; }

/* 状態バッジ(サブスク表で使う) */
.admin-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.admin-status-active   { background: #DCFCE7; color: #166534; }
.admin-status-trialing { background: #FEF3C7; color: #92400E; }
.admin-status-canceled { background: #FEE2E2; color: #991B1B; }
.admin-status-pastdue  { background: #FFE4E6; color: #9F1239; }

/* 検索フォーム */
.admin-search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.admin-search-form input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #D5D9E2;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
}
.admin-search-form select {
  padding: 9px 12px;
  border: 1px solid #D5D9E2;
  border-radius: 5px;
  font-size: 13px;
  background: #FFFFFF;
}

/* 詳細パネル */
.admin-detail-panel {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 8px;
  padding: 20px 22px;
}
.admin-detail-panel dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}
.admin-detail-panel dt { color: #6E7891; font-weight: 500; }
.admin-detail-panel dd { margin: 0; color: #0E1320; }

/* Phase B: ローディング表示 */
.kpi-loading {
  display: inline-block;
  color: #B5BBC6;
  animation: kpiPulse 1.5s ease-in-out infinite;
}
@keyframes kpiPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}
.admin-kpi-card .delta .up   { color: #058255; }
.admin-kpi-card .delta .down { color: #B91C1C; }
.admin-kpi-card .delta .flat { color: #6E7891; }

/* ============================================================
   Admin Console v2 (2026-05-13): モダン SaaS スタイル オーバーライド
   - 明朝体 (Noto Serif JP) → ゴシック (Inter + Noto Sans JP) 統一
   - tabular-nums で数字幅統一
   - 角丸控えめ、影繊細、hover 反応
   ============================================================ */

/* Inter フォント (CDN 経由) を文字データだけで動的に追加するのは難しいので
   既存の Noto Sans JP に -apple-system / Inter スタックを追加して同等の SaaS 感を出す */
.admin-shell,
.admin-shell *,
.admin-login-bg,
.admin-login-bg * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Yu Gothic', sans-serif !important;
  letter-spacing: -0.005em;
}

/* 数字系は tabular-nums で幅統一 (見た目の精密感UP) */
.admin-kpi-card .value,
.admin-table td,
.admin-table th,
.admin-detail-panel dd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* === ヘッダーをより SaaS らしく === */
.admin-header {
  height: 60px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E8EE;
  box-shadow: 0 1px 0 rgba(15,19,32,0.04);
  color: #0E1320;
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-header-title { color: #0E1320; font-weight: 600; letter-spacing: -0.01em; }
.admin-header-icon { filter: grayscale(0); }
.admin-header-badge {
  background: rgba(185,28,28,0.08);
  color: #B91C1C;
  border: 1px solid rgba(185,28,28,0.15);
  font-weight: 600;
}
.admin-header-user { color: #5A6478; font-size: 13px; font-weight: 500; }
.admin-header-logout {
  background: #F5F7FB;
  border: 1px solid #E5E8EE;
  color: #5A6478;
  font-weight: 500;
}
.admin-header-logout:hover {
  background: #0E1320;
  color: #FFFFFF;
  border-color: #0E1320;
}

/* === ページタイトル === */
.admin-page-title h1 {
  font-family: inherit !important;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0E1320;
}
.admin-page-title .desc {
  color: #6E7891;
  font-size: 13px;
  font-weight: 400;
}

/* === KPI カード - SaaS の決定的な見た目 === */
.admin-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15,19,32,0.03);
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.admin-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C9A653 0%, #E0BD68 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.admin-kpi-card:hover {
  border-color: #D5D9E2;
  box-shadow: 0 4px 12px rgba(15,19,32,0.06);
  transform: translateY(-1px);
}
.admin-kpi-card:hover::before { opacity: 1; }
.admin-kpi-card .label {
  font-size: 12px;
  color: #6E7891;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 6px;
}
.admin-kpi-card .value {
  font-family: inherit !important;
  font-size: 28px;
  font-weight: 700;
  color: #0E1320;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.admin-kpi-card .value .unit {
  font-size: 13px;
  color: #8A93A6;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
}
.admin-kpi-card .delta {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #6E7891;
}
.admin-kpi-card .delta .up,
.admin-kpi-card .delta.up { color: #058255; font-weight: 600; }
.admin-kpi-card .delta .down,
.admin-kpi-card .delta.down { color: #B91C1C; font-weight: 600; }
.admin-kpi-card .delta .flat,
.admin-kpi-card .delta.flat { color: #6E7891; }

/* === カード (汎用) === */
.admin-card {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15,19,32,0.03);
  margin-bottom: 16px;
}
.admin-card h3 {
  font-family: inherit !important;
  font-size: 14px;
  font-weight: 600;
  color: #0E1320;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-card h3 .more {
  font-size: 12px;
  color: #C9A653;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.admin-card h3 .more:hover { color: #A88A3F; text-decoration: underline; }

/* === ボタン === */
.admin-btn-primary,
.admin-btn-secondary {
  font-family: inherit !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.admin-btn-primary {
  background: #0E1320;
  color: #FFFFFF;
  border: 1px solid #0E1320;
}
.admin-btn-primary:hover {
  background: #1A2236;
  border-color: #1A2236;
  box-shadow: 0 2px 8px rgba(15,19,32,0.18);
}
.admin-btn-secondary {
  background: #FFFFFF;
  color: #2D3548;
  border: 1px solid #D5D9E2;
}
.admin-btn-secondary:hover {
  background: #F5F7FB;
  border-color: #B5BBC6;
  color: #0E1320;
}

/* === サイドナビ === */
.admin-sidebar {
  background: #FFFFFF;
  border-right: 1px solid #E5E8EE;
}
.admin-nav-item {
  margin: 0 8px;
  padding: 9px 12px;
  border-radius: 6px;
  border-left: none !important;
  font-size: 13px;
  font-weight: 500;
  color: #5A6478;
  transition: all 0.12s;
}
.admin-nav-item:hover {
  background: #F5F7FB;
  color: #0E1320;
}
.admin-nav-item.active {
  background: #0E1320;
  color: #FFFFFF;
  font-weight: 600;
}
.admin-nav-item.active:hover { background: #1A2236; color: #FFFFFF; }
.admin-sidebar-footer {
  font-size: 10px;
  color: #B5BBC6;
  text-align: center;
  border-top: 1px solid #EEF0F4;
  letter-spacing: 0.05em;
}

/* === テーブル === */
.admin-table {
  font-size: 13px;
}
.admin-table th {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8A93A6;
  background: #FAFBFD;
  padding: 9px 14px;
  border-bottom: 1px solid #E5E8EE;
}
.admin-table td {
  padding: 11px 14px;
  font-size: 13px;
  color: #2D3548;
  border-bottom: 1px solid #F0F2F7;
}
.admin-table tr:hover { background: #FAFBFD; }
.admin-table tr:last-child td { border-bottom: none; }

/* === ログイン画面 === */
.admin-login-card {
  border-radius: 14px;
  border-top: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.admin-login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C9A653 0%, #E0BD68 50%, #C9A653 100%);
}
.admin-login-brand h1 {
  font-family: inherit !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 22px;
}
.admin-login-brand .sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #8A93A6;
  font-weight: 600;
}
.admin-login-brand .badge-internal {
  background: rgba(185,28,28,0.08);
  color: #B91C1C;
  border: 1px solid rgba(185,28,28,0.2);
  font-weight: 600;
}
.admin-login-card .form-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #5A6478;
}
.admin-login-card .form-group input {
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 14px;
  border: 1px solid #D5D9E2;
  background: #FAFBFD;
  transition: all 0.15s;
}
.admin-login-card .form-group input:focus {
  background: #FFFFFF;
  border-color: #0E1320;
  box-shadow: 0 0 0 3px rgba(14,19,32,0.08);
}
.admin-login-btn {
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  background: #0E1320;
  color: #FFFFFF;
  transition: all 0.2s;
}
.admin-login-btn:hover:not(:disabled) {
  background: #1A2236;
  box-shadow: 0 4px 16px rgba(14,19,32,0.25);
  transform: translateY(-1px);
}

/* === 状態バッジ === */
.admin-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* === Chart.js コンテナ === */
.admin-chart-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}

/* === ローディング (洗練) === */
.kpi-loading {
  display: inline-block;
  width: 60px;
  height: 24px;
  background: linear-gradient(90deg, #EEF0F4 0%, #F8FAFC 50%, #EEF0F4 100%);
  background-size: 200% 100%;
  animation: kpiShimmer 1.5s linear infinite;
  border-radius: 4px;
  vertical-align: middle;
  color: transparent;
}
@keyframes kpiShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Active 状態のサイドナビアイコン === */
.admin-nav-item .admin-nav-icon {
  filter: grayscale(50%);
  opacity: 0.7;
  transition: all 0.15s;
}
.admin-nav-item:hover .admin-nav-icon { filter: grayscale(0%); opacity: 1; }
.admin-nav-item.active .admin-nav-icon { filter: grayscale(0%); opacity: 1; }

/* =============================================================================
   ★ Phase D (2026-05-14): 管理者管理モーダル + フォームスタイル
   ============================================================================= */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
  animation: adminModalFade 0.15s ease-out;
}
@keyframes adminModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.admin-modal {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.005em;
  animation: adminModalSlide 0.2s ease-out;
}
@keyframes adminModalSlide {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid #EEF0F4;
}
.admin-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0E1320;
  letter-spacing: -0.01em;
}
.admin-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #8A93A6;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.admin-modal-close:hover {
  color: #0E1320;
  background: #F4F5F8;
}

.admin-modal form {
  padding: 16px 24px 20px;
}

.admin-form-group {
  margin-bottom: 16px;
}
.admin-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #2A3450;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.admin-form-group input[type="email"],
.admin-form-group input[type="text"],
.admin-form-group input[type="password"],
.admin-form-group select {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  border: 1px solid #D4D8E0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0E1320;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  font-feature-settings: 'tnum';
}
.admin-form-group input:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: #C9A653;
  box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.15);
}
.admin-form-group input[type="text"]#adminCreatePassword {
  font-family: ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace !important;
  letter-spacing: 0.02em;
}
.admin-form-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #8A93A6;
  line-height: 1.5;
}

.admin-form-error {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.admin-form-success {
  margin-top: 8px;
  padding: 12px 14px;
  background: #E6FAFB;
  color: #166534;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.admin-form-success code {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  color: #0E1320;
  user-select: all;
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #EEF0F4;
}
.admin-modal-footer button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === Phase D 追補 (2026-05-14): ユーザー状態バナー === */
.admin-status-banner {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.admin-status-banner strong {
  display: inline-block;
  margin-bottom: 4px;
}
.admin-status-banner code {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}
.admin-status-banner-info {
  background: #EFF6FF;
  color: #1E3A8A;
  border: 1px solid #BFDBFE;
}
.admin-status-banner-new {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
}

/* === ★ Phase E (2026-05-14): ソート可能テーブル === */
.admin-sortable-table thead th.sortable {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 22px;
  transition: background 0.12s;
}
.admin-sortable-table thead th.sortable:hover {
  background: #F4F5F8;
}
.admin-sortable-table thead th.sortable::after {
  content: '↕';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #C0C5D1;
  font-weight: 400;
}
.admin-sortable-table thead th.sortable.sorted-asc::after {
  content: '↑';
  color: #0E1320;
  font-weight: 700;
}
.admin-sortable-table thead th.sortable.sorted-desc::after {
  content: '↓';
  color: #0E1320;
  font-weight: 700;
}

/* KPI delta: up / down / flat */
.admin-kpi-card .delta .up    { color: #166534; }
.admin-kpi-card .delta .down  { color: #B91C1C; }
.admin-kpi-card .delta .flat  { color: #8A93A6; }

/* =============================================================================
   ★ Phase F (2026-05-14): 人材像テンプレ管理 + persona_match セクション
   ============================================================================= */

/* === 設定画面の人材像テンプレ カード === */
.persona-template-card {
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.persona-template-card:hover {
  border-color: #C9A653;
  box-shadow: 0 2px 8px rgba(201, 166, 83, 0.12);
}
.persona-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.persona-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0E1320;
}
.persona-card-title strong {
  font-weight: 600;
}
.persona-default-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #C9A653;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}
.persona-card-actions {
  display: flex;
  gap: 6px;
}
.persona-card-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 8px;
}
.persona-card-meta span {
  display: inline-block;
}
.persona-card-desc {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.6;
}

/* === AI レポート: persona_match セクション === */
.ai-persona-match {
  /* AI レポート上部に表示される目立つセクション */
}
.ai-pm-card {
  padding: 24px;
  background: linear-gradient(135deg, #FAF7EF 0%, #F8F3E5 50%, #FFFFFF 100%);
  border: 2px solid #C9A653;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(201, 166, 83, 0.15);
}
.ai-pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 166, 83, 0.3);
}
.ai-pm-meta {
  flex: 1;
  min-width: 200px;
}
.ai-pm-template-name {
  font-size: 18px;
  font-weight: 700;
  color: #0E1320;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ai-pm-meta-sub {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6B7280;
}
.ai-pm-meta-sub span {
  display: inline-flex;
  align-items: center;
}
.ai-pm-score-wrap {
  text-align: center;
  min-width: 140px;
}
.ai-pm-score-num {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'tnum';
}
.ai-pm-score-suffix {
  font-size: 18px;
  font-weight: 500;
  color: #6B7280;
  margin-left: 2px;
}
.ai-pm-score-label {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}
.ai-pm-badge-high  { color: #166534; }
.ai-pm-badge-mid   { color: #92400E; }
.ai-pm-badge-low   { color: #B91C1C; }
.ai-pm-badge-high.ai-pm-score-label  { background: #DCFCE7; }
.ai-pm-badge-mid.ai-pm-score-label   { background: #FEF3C7; }
.ai-pm-badge-low.ai-pm-score-label   { background: #FEE2E2; }

.ai-pm-summary {
  font-size: 14px;
  color: #2A3450;
  line-height: 1.8;
  margin-bottom: 16px;
}
.ai-pm-reasons,
.ai-pm-concerns,
.ai-pm-focus {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}
.ai-pm-reasons h4,
.ai-pm-concerns h4,
.ai-pm-focus h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0E1320;
  margin: 0 0 8px 0;
}
.ai-pm-concerns {
  background: rgba(254, 226, 226, 0.5);
  border: 1px solid #FECACA;
}
.ai-pm-concerns h4 {
  color: #B91C1C;
}
.ai-pm-reasons ul,
.ai-pm-concerns ul {
  margin: 0;
  padding-left: 20px;
}
.ai-pm-reasons li,
.ai-pm-concerns li {
  font-size: 13px;
  color: #2A3450;
  line-height: 1.7;
  margin-bottom: 4px;
}
.ai-pm-focus p {
  font-size: 13px;
  color: #2A3450;
  line-height: 1.7;
  margin: 0;
}

@media print {
  .ai-pm-card { break-inside: avoid; }
}

/* =============================================================================
   ★ Phase F 微修正 (2026-05-14): 人材像モーダルの入力欄を大型化・見やすく
   ============================================================================= */

/* モーダル本体: 横幅と縦スクロール調整 */
.persona-modal {
  width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* テキスト入力欄 (テンプレ名・業界・職種) */
.persona-input-lg {
  width: 100%;
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: 1px solid #D4D8E0 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #0E1320 !important;
  box-sizing: border-box;
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.persona-input-lg:focus {
  outline: none;
  border-color: #C9A653 !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.15);
}

/* テキストエリア (業務内容・求める人物像) */
.persona-textarea-lg {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  border: 1px solid #D4D8E0 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #0E1320 !important;
  box-sizing: border-box;
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.persona-textarea-lg:focus {
  outline: none;
  border-color: #C9A653 !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.15);
}
.persona-textarea-lg::placeholder {
  color: #9CA3AF;
  line-height: 1.7;
}

/* モーダルのモバイル対応 */
@media (max-width: 640px) {
  .persona-modal {
    max-width: 100% !important;
  }
  /* モバイルでは grid を1カラムに */
  .persona-modal .admin-modal form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .persona-textarea-lg {
    min-height: 140px;
  }
}

/* =============================================================================
   ★ Phase F v5 (2026-05-14): 採用判断ラベル + スコア内訳の表示スタイル
   ============================================================================= */

/* === 採用判断ラベル (hiring_recommendation) === */
.ai-pm-hiring {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 2px solid;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}
.ai-pm-hiring-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ai-pm-hiring-emoji {
  font-size: 32px;
  line-height: 1;
}
.ai-pm-hiring-label {
  font-size: 11px;
  color: rgba(0,0,0,0.6);
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.ai-pm-hiring-verdict-text {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ai-pm-hiring-action {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.65);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 採用判断: 5段階のカラーバリエーション */
.ai-pm-verdict-strong-yes {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
  border-color: #16A34A;
  color: #14532D;
}
.ai-pm-verdict-yes {
  background: linear-gradient(135deg, #E6FAFB 0%, #B8F0F3 100%);
  border-color: #2DD4DE;
  color: #064E3B;
}
.ai-pm-verdict-conditional {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
  color: #78350F;
}
.ai-pm-verdict-cautious {
  background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
  border-color: #EA580C;
  color: #7C2D12;
}
.ai-pm-verdict-no {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  border-color: #DC2626;
  color: #7F1D1D;
}

/* === スコア内訳 (score_breakdown) === */
.ai-pm-breakdown {
  margin: 16px 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  border: 1px solid rgba(201, 166, 83, 0.25);
}
.ai-pm-breakdown h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0E1320;
  margin: 0 0 12px 0;
}
.ai-pm-bar-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-pm-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.ai-pm-bar-label {
  font-size: 12px;
  color: #4B5563;
  font-weight: 600;
}
.ai-pm-bar-track {
  height: 14px;
  background: #F4F5F8;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.ai-pm-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease;
  background-size: 200% 100%;
}
.ai-pm-bar-green { background: linear-gradient(90deg, #16A34A 0%, #22C55E 100%); }
.ai-pm-bar-amber { background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%); }
.ai-pm-bar-red   { background: linear-gradient(90deg, #DC2626 0%, #EF4444 100%); }
.ai-pm-bar-num {
  font-size: 14px;
  font-weight: 700;
  color: #0E1320;
  text-align: right;
  font-feature-settings: 'tnum';
  font-family: 'Inter', sans-serif;
}

.ai-pm-weighting {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(201, 166, 83, 0.3);
}
.ai-pm-weighting-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.ai-pm-weighting p {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.7;
  margin: 0;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .ai-pm-bar-row {
    grid-template-columns: 100px 1fr 36px;
    gap: 6px;
  }
  .ai-pm-bar-label {
    font-size: 11px;
  }
  .ai-pm-hiring-verdict-text {
    font-size: 18px;
  }
  .ai-pm-hiring-emoji {
    font-size: 24px;
  }
}

/* 印刷時 */
@media print {
  .ai-pm-hiring { break-inside: avoid; }
  .ai-pm-breakdown { break-inside: avoid; }
  .ai-pm-bar-fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =============================================================================
   ★ Phase F v6 (2026-05-14): AIレポート全セクションのSVGアイコン
   ============================================================================= */

/* セクション見出し用の大型アイコン (24x24, gold) */
.ai-section-title .ai-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-block !important;
  vertical-align: -4px;
  margin-right: 8px;
  color: #C9A653;
  flex-shrink: 0;
}
.ai-section-title {
  display: flex;
  align-items: center;
  gap: 0;
}
.ai-section-title > span {
  display: inline-block;
  line-height: 1.3;
}

/* persona_match セクションのアイコンは少し大きめ */
.ai-persona-match .ai-section-title .ai-icon {
  color: #C9A653;
}

/* インライン小型アイコン (ラベル前置き用) */
.ai-icon-sm {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: inline-block !important;
  vertical-align: -2px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* 採用判断 verdict アイコン (大型) */
.ai-verdict-icon {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-block !important;
  flex-shrink: 0;
}
.ai-pm-hiring-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* ai-icon と ai-icon-sm 共通: 万一クラスが付いていないSVGも安全側に
   AIレポート内のSVG全般を抑制 */
.ai-report svg,
.ai-pm-card svg {
  max-width: 100px;
  max-height: 100px;
}
.ai-report svg.ai-icon,
.ai-pm-card svg.ai-icon {
  max-width: 22px;
  max-height: 22px;
}
.ai-report svg.ai-icon-sm,
.ai-pm-card svg.ai-icon-sm {
  max-width: 14px;
  max-height: 14px;
}
.ai-report svg.ai-verdict-icon,
.ai-pm-card svg.ai-verdict-icon {
  max-width: 36px;
  max-height: 36px;
}

/* ラベル系 (○○の根拠 / 即戦力業務 / サポート案 / 30日アクション など) */
.ai-evidence-label,
.ai-immediate-label,
.ai-suggest-label,
.ai-day30-label,
.ai-q-good-label,
.ai-q-warn-label {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}
.ai-evidence-label .ai-icon-sm     { color: #6B7280; }
.ai-immediate-label .ai-icon-sm    { color: #C9A653; }
.ai-suggest-label .ai-icon-sm      { color: #2563EB; }
.ai-day30-label .ai-icon-sm        { color: #7C3AED; }
.ai-q-good-label .ai-icon-sm       { color: #16A34A; }
.ai-q-warn-label .ai-icon-sm       { color: #DC2626; }

/* 業界文脈・企業フェーズ・スコア内訳の見出し */
.ai-industry-context h4,
.ai-fit-stage h4,
.ai-pm-reasons h4,
.ai-pm-concerns h4,
.ai-pm-focus h4,
.ai-pm-breakdown h4 {
  display: flex !important;
  align-items: center;
  gap: 0;
}
.ai-industry-context h4 .ai-icon-sm  { color: #0A8A94; }
.ai-fit-stage h4 .ai-icon-sm         { color: #C9A653; }
.ai-pm-reasons h4 .ai-icon-sm        { color: #16A34A; }
.ai-pm-concerns h4 .ai-icon-sm       { color: #B91C1C; }
.ai-pm-focus h4 .ai-icon-sm          { color: #2563EB; }
.ai-pm-breakdown h4 .ai-icon-sm      { color: #0E1320; }

/* persona_match の業界・職種 (meta-sub) のインラインアイコン */
.ai-pm-meta-sub span {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.ai-pm-meta-sub .ai-icon-sm { color: #6B7280; }

/* 採用判断アイコンを verdict カラーで塗る */
.ai-pm-verdict-strong-yes .ai-verdict-icon  { color: #14532D; }
.ai-pm-verdict-yes .ai-verdict-icon         { color: #064E3B; }
.ai-pm-verdict-conditional .ai-verdict-icon { color: #78350F; }
.ai-pm-verdict-cautious .ai-verdict-icon    { color: #7C2D12; }
.ai-pm-verdict-no .ai-verdict-icon          { color: #7F1D1D; }

/* =============================================================================
   ★ Phase F 追加 (2026-05-14): 人間性評価タイルの SVG アイコン化
   ============================================================================= */
.cp-humanity-tile-rank-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex-shrink: 0;
}
.cp-humanity-tile-rank-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

/* タイル背景色: 旧版の薄緑固定から、ランクごとの薄色に */
.cp-humanity-tile-rank {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* =============================================================================
   ★ Phase F 追加 (2026-05-14): corporate ランディングの訴求4セクション
   ============================================================================= */

/* === 共通 === */
.cred-section {
  padding: 80px 0;
}
.cred-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #0E1320;
  text-align: center;
  margin: 56px 0 20px;
  letter-spacing: -0.01em;
}
.cred-section[style*="0E1320"] .cred-subtitle {
  color: #fff;
}
.cred-note {
  text-align: center;
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
  line-height: 1.7;
}

/* === C2: 評価設問の設計 === */
.cred-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0 16px;
}
.cred-stat {
  text-align: center;
  padding: 32px 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.cred-stat-num {
  font-size: 56px;
  font-weight: 900;
  color: #C9A653;
  line-height: 1;
  font-feature-settings: 'tnum';
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.03em;
}
.cred-stat-unit {
  font-size: 20px;
  font-weight: 600;
  margin-left: 4px;
  color: #6B7280;
}
.cred-stat-label {
  font-size: 14px;
  font-weight: 700;
  color: #0E1320;
  margin: 8px 0 4px;
}
.cred-stat-desc {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.6;
}

.cred-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.cred-cat-card {
  padding: 20px 18px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cred-cat-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F4F5F8;
}
.cred-cat-num {
  font-size: 11px;
  font-weight: 700;
  color: #C9A653;
  letter-spacing: 0.06em;
  font-family: 'Inter', sans-serif;
}
.cred-cat-name {
  font-size: 16px;
  font-weight: 700;
  color: #0E1320;
  flex: 1;
}
.cred-cat-count {
  font-size: 11px;
  color: #6B7280;
  background: #F4F5F8;
  padding: 2px 8px;
  border-radius: 10px;
}
.cred-cat-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cred-cat-items li {
  font-size: 13px;
  color: #4B5563;
  padding: 4px 0;
  border-bottom: 1px dashed #F4F5F8;
}
.cred-cat-items li:last-child {
  border-bottom: none;
}

.cred-humanity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.cred-humanity-item {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0E1320;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cred-h-num {
  font-size: 10px;
  color: #C9A653;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: 'Inter', sans-serif;
}

/* === C3: AI分析の3軸ロジック (ダーク背景) === */
.cred-ai-formula {
  margin: 40px auto 24px;
  padding: 32px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,166,83,0.3);
  border-radius: 16px;
  max-width: 900px;
}
.cred-formula-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.cred-formula-result {
  font-size: 18px;
  font-weight: 700;
  color: #C9A653;
  padding: 12px 18px;
  border: 2px solid #C9A653;
  border-radius: 10px;
}
.cred-formula-eq, .cred-formula-op {
  font-size: 28px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
}
.cred-formula-term {
  font-size: 14px;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 10px;
  line-height: 1.4;
  color: #fff;
}
.cred-formula-term small {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}
.cred-formula-skill { background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%); }
.cred-formula-soft  { background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%); }
.cred-formula-growth{ background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%); }

.cred-formula-note {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 18px;
}

.cred-axis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.cred-axis-card {
  padding: 28px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
}
.cred-axis-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #fff;
}
.cred-axis-skill-bg  { background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%); }
.cred-axis-soft-bg   { background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%); }
.cred-axis-growth-bg { background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%); }

.cred-axis-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.cred-axis-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin: 0;
}

.cred-weight-table-wrap {
  max-width: 800px;
  margin: 24px auto 0;
}
.cred-weight-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  overflow: hidden;
}
.cred-weight-table th,
.cred-weight-table td {
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.cred-weight-table th {
  background: rgba(201,166,83,0.15);
  color: #C9A653;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cred-weight-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: #fff;
}
.cred-weight-emphasis {
  font-weight: 800;
  color: #C9A653 !important;
  font-size: 16px !important;
}
.cred-weight-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
}

/* === C4: 信憑性担保の仕組み === */
.cred-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0 24px;
}
.cred-trust-card {
  padding: 28px 22px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cred-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(201,166,83,0.15);
}
.cred-trust-num {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #C9A653 0%, #A8862E 100%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}
.cred-trust-title {
  font-size: 15px;
  font-weight: 700;
  color: #0E1320;
  margin: 0 0 12px;
  line-height: 1.4;
  min-height: 42px;
}
.cred-trust-desc {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.7;
  margin: 0;
  text-align: left;
}

.cred-trust-note {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background: #FAF7EF;
  border-left: 3px solid #C9A653;
  border-radius: 6px;
  font-size: 13px;
  color: #4B5563;
  line-height: 1.8;
}
.cred-trust-note strong {
  color: #0E1320;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

/* === C5: 5段階の採用判断 === */
.cred-verdict-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 32px auto 24px;
}
.cred-verdict-card {
  display: grid;
  grid-template-columns: 140px 180px 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
  background: #fff;
  border: 2px solid;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.cred-verdict-score {
  font-size: 40px;
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cred-verdict-score-unit {
  font-size: 18px;
  font-weight: 600;
  margin-left: 2px;
}
.cred-verdict-label {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cred-verdict-action {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.7;
  margin: 0;
}

.cred-verdict-strong-yes  { border-color: #16A34A; background: linear-gradient(90deg, rgba(22,163,74,0.06) 0%, #fff 30%); }
.cred-verdict-strong-yes .cred-verdict-score,
.cred-verdict-strong-yes .cred-verdict-label { color: #14532D; }
.cred-verdict-yes         { border-color: #2DD4DE; background: linear-gradient(90deg, rgba(45,212,222,0.06) 0%, #fff 30%); }
.cred-verdict-yes .cred-verdict-score,
.cred-verdict-yes .cred-verdict-label { color: #064E3B; }
.cred-verdict-conditional { border-color: #F59E0B; background: linear-gradient(90deg, rgba(245,158,11,0.06) 0%, #fff 30%); }
.cred-verdict-conditional .cred-verdict-score,
.cred-verdict-conditional .cred-verdict-label { color: #78350F; }
.cred-verdict-cautious    { border-color: #EA580C; background: linear-gradient(90deg, rgba(234,88,12,0.06) 0%, #fff 30%); }
.cred-verdict-cautious .cred-verdict-score,
.cred-verdict-cautious .cred-verdict-label { color: #7C2D12; }
.cred-verdict-no          { border-color: #DC2626; background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, #fff 30%); }
.cred-verdict-no .cred-verdict-score,
.cred-verdict-no .cred-verdict-label { color: #7F1D1D; }

.cred-final-note {
  text-align: center;
  font-size: 13px;
  color: #6B7280;
  margin-top: 24px;
  line-height: 1.7;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cred-final-note strong {
  color: #0E1320;
}

/* === レスポンシブ === */
@media (max-width: 900px) {
  .cred-overview { grid-template-columns: 1fr; }
  .cred-categories { grid-template-columns: 1fr; }
  .cred-humanity-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-axis-grid { grid-template-columns: 1fr; }
  .cred-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-verdict-card {
    grid-template-columns: 100px 1fr;
    gap: 12px;
  }
  .cred-verdict-action {
    grid-column: 1 / -1;
  }
  .cred-formula-line { gap: 8px; }
  .cred-formula-term { font-size: 12px; padding: 10px 12px; }
  .cred-formula-eq, .cred-formula-op { font-size: 20px; }
}
@media (max-width: 640px) {
  .cred-section { padding: 56px 0; }
  .cred-trust-grid { grid-template-columns: 1fr; }
  .cred-stat-num { font-size: 44px; }
  .cred-weight-table th,
  .cred-weight-table td { padding: 8px 6px; font-size: 11px; }
}

/* =============================================================================
   ★ Phase F (2026-05-14): 評価協力者向けメッセージカード
   - グリーン基調 (柔らかい雰囲気)
   - モダンSaaS風 (柔らかい影、円形アイコン、適切な余白)
   - 日本語禁則処理 (改行位置の最適化)
   ============================================================================= */
.evaluator-intro-card {
  margin: 0 0 32px;
  padding: 40px 32px 36px;
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
  border: 1px solid #B8F0F3;
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(45, 212, 222, 0.04),
    0 8px 24px -8px rgba(45, 212, 222, 0.12);
}

/* 日本語の改行位置を最適化 (重要) */
.evaluator-intro-card,
.evaluator-intro-card p,
.evaluator-intro-card h2,
.evaluator-intro-card h4 {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  word-wrap: normal;
}

/* === ヘッダー (中央寄せ、アイコン円形) === */
.evaluator-intro-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #E6FAFB;
}
.evaluator-intro-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #2DD4DE 0%, #03C1CD 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 2px 4px rgba(45, 212, 222, 0.15),
    0 8px 16px -4px rgba(45, 212, 222, 0.25);
}
.evaluator-intro-title {
  font-size: 22px;
  font-weight: 700;
  color: #064E3B;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 520px;
}
.evaluator-intro-subnote {
  font-size: 13.5px;
  font-weight: 600;
  color: #0A8A94;
  margin: 12px 0 0;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* === メインメッセージ === */
.evaluator-intro-message {
  color: #1F2937;
}
.evaluator-intro-lead {
  font-size: 14px;
  line-height: 1.95;
  margin: 0 0 28px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1px solid #B8F0F3;
  border-radius: 14px;
  color: #1F2937;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.evaluator-intro-lead strong {
  color: #0A8A94;
  font-weight: 700;
}

/* === 4つのカードグリッド === */
.evaluator-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.evaluator-intro-item {
  padding: 22px 20px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.evaluator-intro-item:hover {
  transform: translateY(-2px);
  border-color: #B8F0F3;
  box-shadow: 0 4px 12px -2px rgba(45, 212, 222, 0.12);
}
.evaluator-intro-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #E6FAFB;
  color: #03C1CD;
  border-radius: 50%;
  margin-bottom: 14px;
}
.evaluator-intro-item h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.evaluator-intro-item p {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.85;
  margin: 0;
  letter-spacing: 0.01em;
}
.evaluator-intro-item p strong {
  color: #0A8A94;
  font-weight: 600;
}

/* === タブレット (768px以下) === */
@media (max-width: 768px) {
  .evaluator-intro-card {
    padding: 32px 24px 28px;
    border-radius: 16px;
  }
  .evaluator-intro-title {
    font-size: 18px;
  }
  .evaluator-intro-subnote {
    font-size: 12.5px;
  }
  .evaluator-intro-lead {
    font-size: 13.5px;
    padding: 18px 18px;
    line-height: 1.9;
  }
  .evaluator-intro-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .evaluator-intro-item {
    padding: 18px 18px;
  }
}

/* === スマホ (480px以下) === */
@media (max-width: 480px) {
  .evaluator-intro-card {
    padding: 28px 18px 24px;
    margin: 0 -4px 24px;
    border-radius: 14px;
  }
  .evaluator-intro-head {
    margin-bottom: 22px;
    padding-bottom: 22px;
    gap: 14px;
  }
  .evaluator-intro-icon {
    width: 48px;
    height: 48px;
  }
  .evaluator-intro-icon svg {
    width: 24px;
    height: 24px;
  }
  .evaluator-intro-title {
    font-size: 17px;
    line-height: 1.55;
  }
  .evaluator-intro-subnote {
    font-size: 12px;
    margin-top: 10px;
  }
  .evaluator-intro-lead {
    font-size: 13px;
    padding: 16px 16px;
    line-height: 1.95;
    margin-bottom: 18px;
  }
  .evaluator-intro-item {
    padding: 18px 16px;
    border-radius: 12px;
  }
  .evaluator-intro-item-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
  }
  .evaluator-intro-item-icon svg {
    width: 18px;
    height: 18px;
  }
  .evaluator-intro-item h4 {
    font-size: 14px;
  }
  .evaluator-intro-item p {
    font-size: 12.5px;
    line-height: 1.85;
  }
}

/* =============================================================================
   ★ Phase F (2026-05-14): 評価フロー専用のグリーン基調オーバーライド
   - #/evaluate/:token 画面のみエメラルドグリーンに統一
   - .evaluator-main 内に閉じることで、他画面のゴールドは維持
   ============================================================================= */

/* === セクション見出しの下線 === */
.evaluator-main .evaluator-section-head {
  border-bottom: 2px solid #2DD4DE;
}

/* === セクション番号バッジ (本人確認・ステップ番号) === */
.evaluator-main .evaluator-section-num {
  color: #0A8A94;
}
/* インラインstyleで背景指定されているバッジ(本人確認、ステップ番号)を上書き */
.evaluator-main .evaluator-section-num[style*="gold-deep"],
.evaluator-main .evaluator-section-num[style*="--gold"] {
  background: linear-gradient(135deg, #2DD4DE 0%, #03C1CD 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(45, 212, 222, 0.15);
}

/* === プログレスバー === */
.evaluator-main .evaluator-progress-fill {
  background: linear-gradient(90deg, #2DD4DE 0%, #3DDCE5 100%);
}
.evaluator-main .evaluator-progress-step.is-done {
  color: #03C1CD;
}

/* === セクションカード === */
.evaluator-main .evaluator-section-card {
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(45, 212, 222, 0.04);
}

/* === ボタン === */
.evaluator-main .btn-primary {
  background: linear-gradient(135deg, #2DD4DE 0%, #03C1CD 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  box-shadow:
    0 1px 2px rgba(45, 212, 222, 0.2),
    0 4px 12px -2px rgba(45, 212, 222, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.evaluator-main .btn-primary:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #03C1CD 0%, #0A8A94 100%);
  box-shadow:
    0 2px 4px rgba(45, 212, 222, 0.25),
    0 8px 20px -4px rgba(45, 212, 222, 0.35);
}
.evaluator-main .btn-primary:disabled {
  background: #B8F0F3;
  color: #6B7280;
  box-shadow: none;
}

/* === セカンダリ系 (戻るボタン等) のホバー色も統一 === */
.evaluator-main .btn-ghost:hover {
  background: #E6FAFB;
  color: #0A8A94;
}
.evaluator-main .btn-outline-navy {
  color: #0A8A94;
  border-color: #2DD4DE;
}
.evaluator-main .btn-outline-navy:hover {
  background: #E6FAFB;
}

/* === フォーム要素のフォーカスもグリーンに === */
.evaluator-main input:focus,
.evaluator-main textarea:focus,
.evaluator-main select:focus {
  border-color: #2DD4DE !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 222, 0.12) !important;
  outline: none;
}

/* === ラジオ・チェックボックスのアクセント === */
.evaluator-main input[type="radio"],
.evaluator-main input[type="checkbox"] {
  accent-color: #2DD4DE;
}

/* === 必須マーク === */
.evaluator-main .req {
  color: #03C1CD;
}

/* === 評価者ヘッダーのアクセントライン (もしあれば) === */
.evaluator-header {
  border-bottom: 3px solid #2DD4DE;
}

/* === 評価完了ページ (サンクスページ) も統一 === */
.evaluator-thanks-card {
  border-top: 4px solid #2DD4DE;
}
.evaluator-main .evaluator-thanks-card h1 {
  color: #064E3B;
}

/* =============================================================================
   ★ Phase F (2026-05-14): 評価者intro - スマホ用改行制御
   - PCでは <br> を無効化して1行表示
   - スマホでは <br> を活かして意図した位置で改行
   ============================================================================= */
.evaluator-intro-br-sp {
  display: none;
}
@media (max-width: 480px) {
  .evaluator-intro-br-sp {
    display: inline;
  }
}


/* ================================================================
   ★ Phase G (2026-05-20): 整合性チェック画面 CSS (SaaS風 SVG版)
   既存 Admin Console のライトテーマに準拠
   ================================================================ */

/* ===== サイドバーの SVG アイコン =====
   既存の .admin-nav-icon は絵文字想定のため、SVG を内包する場合のスタイル */
.admin-nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke-width: 1.75;
}

/* ===== 整合性チェック画面 ===== */

/* ローディング */
.admin-integrity-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  color: #6E7891;
}
.admin-integrity-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E5E8EE;
  border-top-color: #C9A653;
  border-radius: 50%;
  animation: adminIntegritySpin 0.8s linear infinite;
  margin-bottom: 14px;
}
@keyframes adminIntegritySpin {
  to { transform: rotate(360deg); }
}

/* リフレッシュボタンのSVG */
.admin-integrity-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-integrity-refresh-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* エラー */
.admin-integrity-error {
  padding: 16px 20px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #B91C1C;
  margin: 20px 0;
  font-size: 13px;
}

/* セクション */
.admin-integrity-section {
  margin: 36px 0;
}
.admin-integrity-section:first-child {
  margin-top: 24px;
}

.admin-integrity-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E8EE;
  color: #0E1320;
  letter-spacing: 0.02em;
}
.admin-integrity-section-title.critical { border-bottom-color: rgba(229, 56, 53, 0.25); }
.admin-integrity-section-title.warning  { border-bottom-color: rgba(224, 161, 43, 0.3); }
.admin-integrity-section-title.info     { border-bottom-color: rgba(74, 143, 184, 0.3); }
.admin-integrity-section-title.totals   { border-bottom-color: rgba(201, 166, 83, 0.35); }

/* セクションのカラードット */
.admin-integrity-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-critical { background: #E53835; box-shadow: 0 0 0 3px rgba(229, 56, 53, 0.15); }
.dot-warning  { background: #E0A12B; box-shadow: 0 0 0 3px rgba(224, 161, 43, 0.18); }
.dot-info     { background: #4A8FB8; box-shadow: 0 0 0 3px rgba(74, 143, 184, 0.18); }
.dot-totals   { background: #C9A653; box-shadow: 0 0 0 3px rgba(201, 166, 83, 0.2); }

/* カードグリッド */
.admin-integrity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* カード(既定: 正常 = 緑左ボーダー) */
.admin-integrity-card {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-left: 3px solid #3BA76B;
  border-radius: 8px;
  padding: 16px 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.admin-integrity-card:hover {
  box-shadow: 0 4px 12px rgba(14, 19, 32, 0.06);
  transform: translateY(-1px);
}
.admin-integrity-card.is-anomaly {
  border-left-color: #E53835;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(229, 56, 53, 0.04) 100%);
}
.admin-integrity-card.is-monitor {
  border-left-color: #4A8FB8;
}
.admin-integrity-card.is-total {
  border-left-color: #C9A653;
}

.admin-integrity-card-label {
  font-size: 12px;
  color: #6E7891;
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 500;
}
.admin-integrity-card-value {
  font-size: 26px;
  font-weight: 700;
  color: #0E1320;
  line-height: 1;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}
.admin-integrity-card.is-anomaly .admin-integrity-card-value {
  color: #B91C1C;
}
.admin-integrity-card.is-monitor .admin-integrity-card-value {
  color: #4A8FB8;
}
.admin-integrity-card.is-total .admin-integrity-card-value {
  color: #C9A653;
}

.admin-integrity-card-status {
  margin-top: 12px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ステータスラベル(共通) */
.admin-integrity-card-status .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.admin-integrity-card-status .status svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.admin-integrity-card-status .status-anomaly {
  color: #B91C1C;
}
.admin-integrity-card-status .status-monitor {
  color: #4A8FB8;
}
.admin-integrity-card-status .status-ok {
  color: #3BA76B;
}

/* 詳細ボタン */
.admin-integrity-detail-btn {
  background: none;
  border: none;
  color: #C9A653;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  margin-left: auto;
}
.admin-integrity-detail-btn:hover {
  background: rgba(201, 166, 83, 0.1);
  color: #B8954A;
}
.admin-integrity-detail-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
  transition: transform 0.15s;
}
.admin-integrity-detail-btn:hover svg {
  transform: translateX(2px);
}

/* 詳細モーダル */
.admin-integrity-modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.admin-integrity-modal-content {
  background: #FFFFFF;
  border: 1px solid #E5E8EE;
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(14, 19, 32, 0.2);
}
.admin-integrity-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #E5E8EE;
  background: #FAFBFC;
}
.admin-integrity-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0E1320;
}
.admin-integrity-modal-close {
  background: none;
  border: none;
  color: #6E7891;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.admin-integrity-modal-close:hover {
  background: #F3F4F6;
  color: #0E1320;
}
.admin-integrity-modal-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.admin-integrity-modal-body {
  padding: 22px;
  overflow: auto;
}

/* 詳細テーブル */
.admin-integrity-table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid #E5E8EE;
  border-radius: 8px;
}
.admin-integrity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #0E1320;
}
.admin-integrity-table thead th {
  background: #FAFBFC;
  color: #6E7891;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #E5E8EE;
  position: sticky;
  top: 0;
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-integrity-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #F1F3F6;
  vertical-align: top;
}
.admin-integrity-table tbody tr:hover {
  background: #FAFBFC;
}
.admin-integrity-table tbody tr:last-child td {
  border-bottom: none;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .admin-integrity-cards {
    grid-template-columns: 1fr;
  }
  .admin-integrity-modal {
    padding: 0;
  }
  .admin-integrity-modal-content {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ================================================================
   ★ 7-5 (2026-05-20): 共通ページネーション
   ================================================================ */
.pagination-wrap {
  margin-top: 16px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pagination-info {
  font-size: 12px;
  color: var(--text-mute, #6B7280);
  font-family: 'Noto Sans JP', sans-serif;
}
.pagination-controls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #D6D3CB;
  background: #fff;
  color: var(--navy, #0E1320);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.pg-btn:hover:not(.pg-disabled):not(.pg-current) {
  background: #F7F8FB;
  border-color: var(--navy, #0E1320);
}
.pg-current {
  background: var(--navy, #0E1320);
  color: var(--gold, #C9A653);
  border-color: var(--navy, #0E1320);
  cursor: default;
}
.pg-disabled {
  color: #C9C5BC;
  cursor: default;
  opacity: .5;
}
.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--text-mute, #6B7280);
  font-size: 13px;
}
@media (max-width: 480px) {
  .pg-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
  }
}

/* ================================================================
   ★ Chrome決済完了対応 (2026-05-20): チャージ完了通知カード
   ================================================================ */
.charge-success-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #E6FAFB 0%, #B8F0F3 100%);
  border: 1px solid #7DE8EE;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(45, 212, 222, 0.15);
  animation: chargeSuccessSlideIn .35s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.charge-success-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2DD4DE;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(45, 212, 222, 0.4);
}
.charge-success-body {
  flex: 1;
  min-width: 0;
}
.charge-success-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 700;
  color: #076A72;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.charge-success-sub {
  font-size: 13px;
  color: #0A8A94;
  line-height: 1.6;
}
.charge-success-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  color: #076A72;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.charge-success-close:hover {
  background: #FFFFFF;
  transform: scale(1.05);
}
.charge-success-fadeout {
  animation: chargeSuccessFadeOut .3s ease-out forwards;
}
@keyframes chargeSuccessSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chargeSuccessFadeOut {
  to { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 640px) {
  .charge-success-notice {
    padding: 14px 16px;
    gap: 12px;
  }
  .charge-success-icon {
    width: 40px;
    height: 40px;
  }
  .charge-success-title {
    font-size: 15px;
  }
  .charge-success-sub {
    font-size: 12px;
  }
}

/* ================================================================
   ★ スマホ版企業ヘッダーの不要なアバター削除 (2026-05-21)
   モバイル表示時(<=768px)、ハンバーガーメニューがあるため
   ヘッダー右上のアバターは不要(冗長表示の解消)
   ================================================================ */
@media (max-width: 768px) {
  .company-header-user .user-avatar {
    display: none !important;
  }
  /* 念のため、関連IDも非表示にする */
  #companyHeaderAvatar,
  #companyHeaderAvatarMobile,
  #companyMobileAvatar {
    display: none !important;
  }
}

/* ================================================================
   ★ スマホ版企業ヘッダー はみ出し修正 (2026-06-19)
   原因: .company-header-nav (PC用ナビ: ダッシュボード/候補者一覧/料金案内/
   会社名/ログアウト) がモバイルでも display:flex のまま残り、画面幅を
   超過。.header-mobile-actions (ハンバーガー) は描画されるが押し出されて
   画面外へ。public用 .header-nav は <=768px で非表示になるが、企業用
   .company-header-nav には対応する非表示ルールが存在しなかった。
   対処: クラス限定オーバーライドで PC ナビを隠し、padding/height を縮小、
   ハンバーガー(.header-mobile-actions)を表示する。
   ================================================================ */
@media (max-width: 768px) {
  /* PC用ナビ一式(会社名・ログアウト含む)を非表示。代替はハンバーガーメニュー */
  .company-header .company-header-nav { display: none !important; }
  /* ハンバーガー+モバイルアクションを表示 */
  .company-header .header-mobile-actions { display: flex !important; }
  /* padding/height をモバイル向けに縮小し box-sizing を保証 */
  .company-header {
    padding: 0 16px !important;
    height: 88px !important;
    gap: 12px;
    box-sizing: border-box;
  }
  /* ロゴが縮むよう min-width:0 を許可 */
  .company-header .header-logo { min-width: 0; flex: 0 1 auto; }
}
@media (max-width: 380px) {
  .company-header { padding: 0 12px !important; height: 84px !important; }
}

/* ============================================================
   ★ 2026-05-27 LP本文 フォントサイズ拡大 + 日本語改行制御 OVERRIDE
   ============================================================
   目的:
   1. LP本文フォントを backcheck.jp 級まで拡大(PC: 14-17px、SP: 14-15px)
   2. 既存のSPメディアクエリで縮小されていた本文サイズを再オーバーライド
   3. 日本語の単語途中・一文字だけ改行を防止
   
   範囲: LP本文 (pageHome / pageCorporate) のみ
   フッター・ヘッダー・ダッシュボードは触らない
   
   優先度: !important で既存指定を確実に上書き
   ============================================================ */

/* ============================================================
   [1] 改行制御: 日本語の単語途中・一文字改行を防止
   ============================================================ */
.hero h1,
.hero .subtitle,
.hero-trust,
.section h2,
.section h3,
.section h4,
.section p,
.section li,
.section .sans,
.section-title,
.section-subtitle,
.cta-section h2,
.cta-section p,
.about-title,
.about-lead,
.about-why-text,
.about-why-quote,
.about-flow-desc,
.about-flow-prereq-desc,
.about-flow-prereq-label,
.benefit-heading,
.benefit-heading-sub,
.benefit-body,
.benefit-points li,
.cred-note,
.cred-stat-desc,
.cred-axis-desc,
.cred-axis-title,
.cred-trust-desc,
.cred-trust-note,
.cred-trust-title,
.cred-formula-note,
.cred-formula-term,
.cred-weight-note,
.cred-final-note,
.cred-subtitle,
.cred-verdict-action,
.cred-verdict-title,
.cred-verdict-desc,
.company-pricing-section-desc,
.company-pricing-section-title,
.corp-tab-label,
.corp-tab-sub,
.corp-pricing-desc,
.corp-flow-title,
.corp-flow-desc,
.corp-flow-cta,
.corp-flow-note,
.corp-faq-item summary,
.corp-faq-a,
.card-quote-headline,
.card-quote-text,
.balance-hero-label,
.balance-hero-note {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* ============================================================
   [2] PC表示でも本文フォントを backcheck.jp 級に拡大
   ============================================================ */
.section-subtitle { font-size: 17px; }
.cred-note { font-size: 17px; }
.cred-axis-desc { font-size: 17px; }
.cred-trust-desc { font-size: 17px; }
.benefit-body { font-size: 17px; }
.cred-stat-desc { font-size: 14px; }
.cred-h-num { font-size: 13px; }
.cred-formula-note { font-size: 16px; }
.cred-formula-term { font-size: 14px; }
.cred-weight-note { font-size: 14px; }
.cred-trust-note { font-size: 16px; }
.cred-final-note { font-size: 16px; }
.cred-verdict-action { font-size: 16px; }
.about-flow-desc { font-size: 16px; }
.about-flow-prereq-desc { font-size: 16px; }
.about-why-text { font-size: 16px; }
.balance-hero-label { font-size: 14px; }
.balance-hero-note { font-size: 16px; }
.benefit-heading-sub { font-size: 14px; }
.benefits-eyebrow { font-size: 14px; }
.about-flow-num { font-size: 14px; }
.about-flow-divider { font-size: 14px; }
.benefit-check { font-size: 14px; }
.cred-cat-count { font-size: 14px; }
.cred-cat-num { font-size: 14px; }
.evaluator-section-num { font-size: 14px; }
.about-flow-prereq-num { font-size: 13px; }
.hero-trust { font-size: 14px; }
.company-pricing-section-desc { font-size: 16px; }
.cp-eval-section-title { font-size: 16px; }
.section-hint { font-size: 14px; }

/* ============================================================
   [3] スマホ表示でも本文フォントを縮めない (SPメディアクエリ上書き)
   ============================================================ */
@media (max-width: 540px) {
  /* About セクション (求職者LP) */
  .about-lead { font-size: 15px !important; line-height: 2 !important; }
  .about-why-text { font-size: 14px !important; }
  .about-why-quote { font-size: 15px !important; line-height: 2 !important; }
  .about-why-title { font-size: 18px !important; }
  .about-flow-prereq-num { font-size: 12px !important; }
  .about-flow-prereq-label { font-size: 16px !important; }
  .about-flow-prereq-desc { font-size: 14px !important; }
  .about-flow-divider { font-size: 13px !important; }
  .about-flow-desc { font-size: 14px !important; }
  
  /* Benefit セクション (頑張りを消えない財産に等) */
  .benefit-heading { font-size: 21px !important; }
  .benefit-heading-sub { font-size: 13px !important; }
  .benefit-body { font-size: 15px !important; line-height: 1.95 !important; }
  .benefit-points li { font-size: 14px !important; }
  
  /* 補強メッセージ */
  .card-quote-headline { font-size: 16px !important; }
  .card-quote-text { font-size: 14px !important; }
  
  /* セクションサブタイトル */
  .section-subtitle { font-size: 15px !important; }
  
  /* Hero (求職者LP) */
  .hero-trust { font-size: 14px !important; line-height: 1.8 !important; }
  
  /* 企業ページ */
  .corp-tab-label { font-size: 14px !important; }
  .corp-tab-sub { font-size: 12px !important; }
  .corp-pricing-desc { font-size: 15px !important; }
  .corp-faq-item summary { font-size: 15px !important; }
  .corp-faq-q { font-size: 12px !important; }
  .corp-faq-a { font-size: 14px !important; }
  .corp-flow-title { font-size: 16px !important; }
  .corp-flow-desc { font-size: 14px !important; }
  .corp-flow-cta { font-size: 13px !important; }
  .corp-flow-note { font-size: 13px !important; }
  
  /* 料金プラン */
  .company-pricing-section-title { font-size: 18px !important; }
  .company-pricing-section-desc { font-size: 14px !important; }
  
  /* 統計カード */
  .cred-stat-desc { font-size: 13px !important; }
  .cred-h-num { font-size: 13px !important; }
  .cred-note { font-size: 15px !important; }
  
  /* AI3軸ロジック */
  .cred-axis-desc { font-size: 15px !important; }
  .cred-formula-term { font-size: 13px !important; }
  .cred-formula-note { font-size: 14px !important; }
  .cred-weight-note { font-size: 13px !important; }
  
  /* 信憑性担保 */
  .cred-trust-desc { font-size: 15px !important; }
  .cred-trust-note { font-size: 14px !important; }
  .cred-final-note { font-size: 14px !important; }
  
  /* 比較表 */
  .comparison-table table { font-size: 13px !important; }
  .comparison-table tbody td { font-size: 13px !important; }
  .comparison-table thead th { font-size: 13px !important; }
}

/* iPhone SE 等の小型端末 (360px〜380px) でも極端な縮小はしない */
@media (max-width: 380px) {
  .benefit-body { font-size: 14px !important; }
  .about-lead { font-size: 14px !important; }
  .section-title { font-size: clamp(20px, 5.5vw, 24px) !important; }
}

/* ============================================================
   [4] テキストブロック全般の改行余白を改善
   ============================================================ */
.section p,
.section li,
.cred-axis-desc,
.cred-trust-desc,
.benefit-body,
.about-lead,
.about-why-text,
.about-flow-desc,
.about-flow-prereq-desc {
  padding-left: 4px;
  padding-right: 4px;
}

/* ============================================================
   [5] スクショで指摘された具体的な問題箇所への追加対応 (2026-05-27)
   ============================================================ */
.corp-flow-note,
.benefit-body,
.subtitle,
.hero p,
.hero-trust,
.about-lead,
.about-why-text,
.about-why-quote,
.about-flow-desc,
.about-flow-prereq-desc,
.about-flow-prereq-label,
.cred-axis-desc,
.cred-trust-desc,
.cred-trust-note,
.cred-final-note,
.cred-formula-note,
.cred-formula-term,
.cred-weight-note,
.cred-verdict-action,
.cred-note,
.cred-stat-desc,
.card-quote-headline,
.card-quote-text,
.balance-hero-label,
.balance-hero-note,
.benefit-heading,
.benefit-heading-sub,
.corp-tab-label,
.corp-pricing-desc,
.corp-faq-item summary,
.corp-faq-a,
.corp-flow-title,
.corp-flow-desc,
.corp-flow-cta,
.company-pricing-section-desc,
.company-pricing-section-title,
.section-subtitle {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

/* Hero h1 の改行制御(.sp-balance 含む) */
.hero h1,
.hero h1.sp-balance,
.section-title.sp-balance {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

/* 段落要素の中の strong も改行ルール継承 */
.section p strong,
.section li strong,
.subtitle strong,
.hero-trust strong {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* SPの本文padding: ギリギリで折り返しを防ぐ余白 */
@media (max-width: 540px) {
  .corp-flow-note,
  .benefit-body,
  .about-lead,
  .about-why-text,
  .cred-axis-desc,
  .cred-trust-desc,
  .cred-note,
  .section-subtitle {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ============================================================
   ★ 2026-05-27 (追加) スクショ指摘箇所のフォント拡大
   - About リード文・フロー説明・本人主導カード・サンプル説明
   - 「日々の頑張りが」セクション (benefits)
   - 「なぜ今、キャリアカが必要なのか」セクション
   ============================================================ */

/* About セクション本文(PC) */
.about-lead { font-size: 17px !important; line-height: 2; }
.about-flow-prereq-desc { font-size: 15px !important; line-height: 1.9; }
.about-feature-card p { font-size: 15px !important; line-height: 1.8; }
.about-feature-card h4 { font-size: 18px !important; }
.about-mockup-caption strong { font-size: 16px !important; }
.about-mockup-caption span { font-size: 14px !important; }
.about-why-text { font-size: 16px !important; line-height: 2; }
.about-why-quote { font-size: 17px !important; line-height: 1.9; }

/* Benefits (頑張りを、いつでも証になる) */
.benefit-body { font-size: 17px !important; line-height: 1.95; }
.benefit-points li { font-size: 15px !important; line-height: 1.85; }
.benefit-heading-sub { font-size: 15px !important; }

/* About flow (STEP 1〜3) のラベルも少し大きく */
.about-flow-prereq-label { font-size: 18px !important; }

/* スマホ表示でも縮めない (SPメディアクエリ再オーバーライド) */
@media (max-width: 540px) {
  .about-lead { font-size: 16px !important; line-height: 2; }
  .about-flow-prereq-desc { font-size: 14px !important; }
  .about-feature-card p { font-size: 14px !important; }
  .about-feature-card h4 { font-size: 17px !important; }
  .about-mockup-caption strong { font-size: 15px !important; }
  .about-mockup-caption span { font-size: 13px !important; }
  .about-why-text { font-size: 15px !important; line-height: 2; }
  .about-why-quote { font-size: 16px !important; line-height: 1.95; }
  .benefit-body { font-size: 16px !important; line-height: 1.95; }
  .benefit-points li { font-size: 14px !important; }
  .benefit-heading-sub { font-size: 14px !important; }
  .about-flow-prereq-label { font-size: 17px !important; }
}

/* 改行制御も追加適用 */
.about-feature-card p,
.about-feature-card h4,
.about-mockup-caption strong,
.about-mockup-caption span,
.about-mockup-card,
.about-why-quote {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

/* ============================================================
   ★ 2026-05-27 (追加2) LP内の他の小フォント本文クラス拡大
   - .pain-card p (お悩みカード)
   - .step-item p (ステップ説明)
   - .faq-a / .faq-q (FAQ)
   - .comment-card p (評価コメント)
   ============================================================ */
.pain-card p { font-size: 15px !important; line-height: 1.85 !important; }
.step-item p { font-size: 15px !important; line-height: 1.75 !important; }
.faq-q { font-size: 16px !important; }
.faq-a { font-size: 15px !important; line-height: 1.85 !important; }

/* SP表示 */
@media (max-width: 540px) {
  .pain-card p { font-size: 14px !important; }
  .step-item p { font-size: 14px !important; }
  .faq-q { font-size: 15px !important; }
  .faq-a { font-size: 14px !important; }
}

/* 改行制御 */
.pain-card p,
.step-item p,
.faq-q,
.faq-a {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
}

/* ============================================================
   ★ 2026-05-27 (Phase α) 自己評価機能 (sa- prefix)
   ============================================================ */

/* モーダルオーバーレイ */
.sa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 動的ビューポート対応 */
  background: rgba(15, 19, 32, 0.6);
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: sa-fade-in 0.15s ease-out;
}
@keyframes sa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sa-modal-content {
  background: #FFFFFF;
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(15, 19, 32, 0.3);
  animation: sa-slide-up 0.2s ease-out;
  position: relative;
  margin: 0 auto;
}
@keyframes sa-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.sa-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 2;
  border-radius: 14px 14px 0 0;
}

.sa-modal-intro {
  padding: 14px 24px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.sa-questions-body {
  padding: 16px 24px;
}

.sa-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: #FAFBFC;
  border-radius: 0 0 14px 14px;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* 設問ブロック */
.sa-question {
  padding: 16px 0;
  border-bottom: 1px solid #F1F5F9;
}
.sa-question:last-of-type { border-bottom: none; }

.sa-question-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.sa-category-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
  font-family: 'Inter', monospace;
  letter-spacing: 0.05em;
}

.sa-question-short {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.sa-question-long {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 0 0 12px 0;
}

/* ラジオグループ */
.sa-radio-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 6px 0;
}

.sa-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.sa-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sa-radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 36px;
  height: 36px;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  background: #FFFFFF;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}

.sa-radio:hover .sa-radio-label {
  border-color: #0369A1;
  background: #F0F9FF;
}

.sa-radio input[type="radio"]:checked + .sa-radio-label {
  border-color: #0369A1;
  background: #0369A1;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(3, 105, 161, 0.3);
}

.sa-scale-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  min-width: 56px;
  flex-shrink: 0;
}

.sa-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--navy);
  resize: vertical;
  min-height: 80px;
}
.sa-textarea:focus {
  outline: none;
  border-color: #0369A1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.1);
}

/* スマホ向け調整 */
@media (max-width: 540px) {
  .sa-modal-overlay { padding: 8px; }
  .sa-modal-content { max-height: 96vh; border-radius: 10px; }
  .sa-modal-header { padding: 14px 16px; }
  .sa-modal-intro { padding: 12px 16px; }
  .sa-questions-body { padding: 12px 16px; }
  .sa-modal-footer { padding: 12px 16px; }
  
  .sa-question-short { font-size: 14px; }
  .sa-question-long { font-size: 12px; }
  
  .sa-radio-group {
    gap: 4px;
  }
  .sa-radio-label {
    height: 34px;
    font-size: 13px;
  }
  .sa-scale-label {
    font-size: 10px !important;
    min-width: 50px;
  }
}

/* iPhone SE 等 (380px以下) */
@media (max-width: 380px) {
  .sa-scale-label { display: none; }
  .sa-radio-label { height: 36px; font-size: 13px; }
}

/* ============================================================
   ★ 2026-05-27 (修正) cp-humanity-category-* スタイル
   renderHumanityResults の新12問カテゴリ別表示用
   ============================================================ */

.cp-humanity-categories-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cp-humanity-category-block {
  background: #FAFBFC;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px;
}

.cp-humanity-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.cp-humanity-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}

.cp-humanity-category-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

.cp-humanity-category-meta {
  flex: 1;
  min-width: 0;
}

.cp-humanity-category-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.cp-humanity-category-desc {
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 2px;
}

/* タイル行内のスター表示 */
.cp-humanity-tile-rank-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cp-humanity-tile-star {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.cp-humanity-tile-star-num {
  line-height: 1;
}

/* SP対応 */
@media (max-width: 540px) {
  .cp-humanity-category-block { padding: 12px; }
  .cp-humanity-category-header { gap: 10px; margin-bottom: 12px; padding-bottom: 10px; }
  .cp-humanity-category-icon { width: 32px; height: 32px; }
  .cp-humanity-category-icon svg { width: 20px !important; height: 20px !important; }
  .cp-humanity-category-title { font-size: 15px; }
  .cp-humanity-category-desc { font-size: 11px; }
}
/* ================================================================
   キャリアカ 求職者LP v3 (SmartHR風リデザイン、2026/5/28)
   既存スタイルを汚さないよう、全クラスに lp- プレフィックス
   ================================================================ */

/* ===== 共通: セクションリズム ===== */
.lp-section {
  padding: 112px 0;
  position: relative;
}
.lp-section-narrow {
  padding: 72px 0;
}
.lp-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.lp-section-header-left {
  text-align: left;
  max-width: 720px;
  margin: 0 0 56px;
}
.lp-section-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold);
  background: var(--gold-pale);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.lp-section-tag-dark {
  color: var(--gold-light);
  background: rgba(217, 188, 120, 0.12);
  border: 1px solid rgba(217, 188, 120, 0.25);
}
.lp-section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 24px;
}
/* 見出しを文節単位で折り返し、行末の1〜2文字の孤立（ぶら下がり）を防ぐ。
   span 内は途中改行されず、塊ごとに折り返される。 */
.nobr { display: inline-block; }

/* 日本語の本文・リード・カード文を「文節（自然な意味の区切り）」で折り返す。
   word-break: auto-phrase 対応ブラウザ（Chrome/Edge/Android Chrome 等）では、
   「キャリアパスポート」のような語が途中で割れず、行頭の孤立文字も減る。
   非対応ブラウザでは従来の標準折り返しにフォールバックするため安全。 */
.lp-section-lead,
.lp-section-lead-dark,
.lp-ai-insight-lead,
.lp-strength-lead-title,
.lp-strength-lead-body,
.lp-science-card-title,
.lp-science-card-desc,
.lp-feature-title,
.lp-feature-desc,
.lps-photo-band-sub,
.lps-photo-split-title,
.lps-photo-split-text,
.lp-strength-card-title,
.lp-strength-card-desc,
.lp-ai-insight-glass-quote,
.lp-cta-title,
.lp-cta-lead {
  line-break: strict;
  word-break: auto-phrase;
}
.lp-section-title-dark {
  color: #fff;
}
.lp-section-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  line-height: 2;
  color: var(--text-sub);
  margin: 0;
}
.lp-section-lead-dark {
  color: rgba(244, 244, 238, 0.78);
}

/* ===== Hero v2: 実写背景型ヒーロー ===== */
.lp-hero-v2 {
  position: relative;
  min-height: 640px;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.lp-hero-v2-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/lp/hero-people.webp');
  background-size: cover;
  background-position: center top;
  opacity: 0.65;
  z-index: 0;
}
.lp-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 19, 32, 0.35) 0%,
    rgba(14, 19, 32, 0.20) 40%,
    rgba(14, 19, 32, 0.70) 100%);
  z-index: 1;
}
.lp-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 60%, rgba(201, 166, 83, 0.20) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.lp-hero-v2-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 96px 0;
}
.lp-hero-v2-inner {
  max-width: 720px;
}
.lp-hero-v2-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold-light);
  padding: 8px 16px;
  border: 1px solid rgba(217, 188, 120, 0.4);
  border-radius: 999px;
  margin-bottom: 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(14, 19, 32, 0.3);
}
.lp-hero-v2 h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 2px;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.lp-hero-v2 .lp-hero-v2-accent {
  color: var(--gold-light);
  text-shadow: 0 2px 16px rgba(201, 166, 83, 0.35);
}
.lp-hero-v2-subcatch {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 26px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.lp-hero-v2-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 40px;
  max-width: 620px;
  font-weight: 300;
  letter-spacing: 0.5px;
}
.lp-hero-v2-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.lp-hero-v2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy);
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(201, 166, 83, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-hero-v2-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201, 166, 83, 0.45);
}
.lp-hero-v2-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lp-hero-v2-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}
.lp-hero-v2-trust {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.5px;
  margin: 0;
}

/* ============================================================
   ca-hero — メインビジュアル B/C (2026-07-07 ランダム出し分け)
   B: 男性ブルー(hero-seeker-B) / C: 女性白(hero-seeker-C)
   ============================================================ */
.ca-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.ca-hero--b {
  background-color: #0d3a52;
  background-image: url('../assets/lp/hero-seeker-B.webp');
}
.ca-hero--c {
  background-color: #eef2f5;
  background-image: url('../assets/lp/hero-seeker-C.webp');
}
.ca-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ca-hero--b .ca-hero__overlay {
  background: linear-gradient(90deg, rgba(0,48,70,0.62) 0%, rgba(0,48,70,0.28) 46%, rgba(0,48,70,0) 72%);
}
.ca-hero--c .ca-hero__overlay {
  background: linear-gradient(90deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.45) 46%, rgba(255,255,255,0) 72%);
}
.ca-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 88px 0;
}
.ca-hero__inner {
  max-width: 660px;
}
.ca-hero--c .ca-hero__inner {
  max-width: 820px;
}
.ca-hero__tag {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  margin-bottom: 24px;
}
.ca-hero--c .ca-hero__tag {
  background: var(--c-teal-deep);
}
.ca-hero__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 1.5px;
  margin: 0;
  color: #fff;
  font-size: 52px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.32);
}
.ca-hero--c .ca-hero__title { font-size: 60px; letter-spacing: 2px; }
.ca-hero__title--dark {
  color: #14181f;
  text-shadow: none;
}
.ca-hero__u {
  position: relative;
  display: inline-block;
}
.ca-hero__u::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 4px;
  background: #d63a3a;
  border-radius: 2px;
}
.ca-hero__accent-red { color: #d63a3a; }
.ca-hero__accent-teal { color: var(--c-teal-deep); }
.ca-hero__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255,255,255,0.94);
  margin: 18px 0 0;
  font-weight: 400;
}
.ca-hero--c .ca-hero__sub { font-size: 22px; }
.ca-hero__sub--dark { color: #33383f; }
.ca-hero__features {
  display: flex;
  gap: 26px;
  margin-top: 30px;
}
.ca-hero--c .ca-hero__features { gap: 30px; }
.ca-hero__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}
.ca-hero--c .ca-hero__feat { font-size: 15px; }
.ca-hero__features--dark .ca-hero__feat { color: #14181f; }
.ca-hero__ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #0f4d72;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.ca-hero__ico svg { width: 28px; height: 28px; }
.ca-hero--c .ca-hero__ico { width: 62px; height: 62px; }
.ca-hero--c .ca-hero__ico svg { width: 31px; height: 31px; }
.ca-hero__ico--tint {
  background: var(--c-teal-pale);
  color: var(--c-teal-deep);
}
.ca-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.ca-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ca-hero__btn--red {
  background: #d63a3a;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(214,58,58,0.32);
}
.ca-hero__btn--red:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(214,58,58,0.42); }
.ca-hero__btn--teal {
  background: var(--c-teal-deep);
  color: #fff;
  box-shadow: 0 8px 24px rgba(7,106,114,0.30);
}
.ca-hero__btn--teal:hover { transform: translateY(-2px); background: var(--c-teal); }
.ca-hero__btn--navy {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(14,19,32,0.28);
}
.ca-hero__btn--navy:hover { transform: translateY(-2px); }
.ca-hero__btn--ghost-dark {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  font-weight: 500;
  font-size: 15px;
}
.ca-hero__btn--ghost-dark:hover { background: rgba(255,255,255,0.18); }
.ca-hero__btn--ghost-light {
  background: rgba(14,19,32,0.04);
  color: var(--navy);
  border: 1px solid rgba(14,19,32,0.20);
  font-weight: 500;
  font-size: 15px;
}
.ca-hero__btn--ghost-light:hover { background: rgba(14,19,32,0.08); }

@media screen and (max-width: 900px) {
  .ca-hero { min-height: 560px; }
  .ca-hero__title { font-size: 34px; }
  .ca-hero__inner { max-width: 62%; }
}
@media screen and (max-width: 768px) {
  .ca-hero {
    min-height: 620px;
    align-items: flex-start;
    background-position: center bottom;
  }
  .ca-hero--b { background-image: url('../assets/lp/hero-seeker-B-mobile.webp'); }
  .ca-hero--c { background-image: url('../assets/lp/hero-seeker-C-mobile.webp'); }
  .ca-hero--b .ca-hero__overlay {
    background: linear-gradient(180deg, rgba(0,48,70,0.34) 0%, rgba(0,48,70,0.16) 44%, rgba(0,48,70,0.40) 100%);
  }
  .ca-hero--c .ca-hero__overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.40) 48%, rgba(255,255,255,0.14) 100%);
  }
  .ca-hero__content { padding: 60px 0 40px; }
  .ca-hero__inner { max-width: 100%; }
  .ca-hero--c .ca-hero__inner { max-width: 100%; }
  .ca-hero__title { font-size: 30px; line-height: 1.5; letter-spacing: 0.5px; }
  .ca-hero--c .ca-hero__title { font-size: 32px; letter-spacing: 0.5px; }
  .ca-hero__tag { font-size: 14px; padding: 7px 16px; }
  .ca-hero__sub { font-size: 15px; line-height: 1.85; }
  .ca-hero--c .ca-hero__sub { font-size: 15px; }
  .ca-hero__features { gap: 14px; margin-top: 22px; }
  .ca-hero__ico { width: 44px; height: 44px; }
  .ca-hero__ico svg { width: 22px; height: 22px; }
  .ca-hero__feat { font-size: 11px; }
  .ca-hero__cta { flex-direction: column; gap: 12px; margin-top: 24px; }
  .ca-hero__btn { width: 100%; padding: 14px 24px; }
}

/* ===== 数字訴求バー ===== */
.lp-stats-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-light, #E5E7EB);
  padding: 32px 0;
}
.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.lp-stat-item {
  padding: 26px 18px;
  background: linear-gradient(145deg, #0A8A94 0%, #087E87 60%, #076A72 100%);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.lp-stat-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.lp-stat-icon svg {
  width: 24px;
  height: 24px;
}
.lp-stat-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-stat-num.lp-stat-num-text {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
}
.lp-stat-num-suffix {
  font-size: 18px;
  margin-left: 2px;
  color: var(--gold-deep);
}
.lp-stat-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.2px;
  line-height: 1.7;
  font-weight: 500;
  margin-top: 4px;
  max-width: 260px;
}
.lp-stat-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 240px;
}

/* ===== 共感メッセージ（ダーク） ===== */
.lp-empathy {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  padding: 96px 0;
  text-align: center;
}
.lp-empathy-inner {
  max-width: 760px;
  margin: 0 auto;
}
.lp-empathy-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold-light);
  margin-bottom: 28px;
}
.lp-empathy-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 2px;
  line-height: 1.7;
  margin: 0 0 32px;
}
.lp-empathy-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  font-weight: 300;
}

/* ===== WHY CARYAKA 3カードグリッド ===== */
.lp-why-section {
  background: var(--bg);
}
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.lp-why-card {
  background: #fff;
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  border: 1px solid #ECECEC;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(14, 19, 32, 0.08);
}
.lp-why-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-pale);
}
.lp-why-card-icon svg {
  width: 36px;
  height: 36px;
  color: var(--gold);
}
.lp-why-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
.lp-why-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
}

/* ===== HOW TO USE キャリア資産の活用方法 ===== */
.lp-usage-section {
  background: var(--bg);
}
.lp-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
.lp-usage-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid #E3EEF0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-usage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10, 138, 148, 0.10);
}
.lp-usage-illust {
  width: 100%;
  height: 230px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: #E3F4EC;
}
.lp-usage-illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lp-usage-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.lp-usage-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
  text-align: left;
}

/* ===== HOW IT WORKS 4ステップ ===== */
.lp-flow-section {
  background: var(--bg);
}
.lp-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.lp-flow-card {
  background: #fff;
  border-radius: 12px;
  padding: 36px 24px;
  position: relative;
  border: 1px solid #ECECEC;
}
.lp-flow-num {
  position: absolute;
  top: -16px;
  left: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(201, 166, 83, 0.3);
}
.lp-flow-icon {
  width: 56px;
  height: 56px;
  margin: 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.lp-flow-icon svg {
  width: 48px;
  height: 48px;
}
.lp-flow-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}
.lp-flow-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}

/* ===== キャリアカ評価の安全性 ===== */
.lp-safety {
  margin-top: 56px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.lp-safety-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: 0.5px;
}
.lp-safety-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-safety-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid #E3EEF0;
  border-radius: 12px;
  padding: 22px 28px;
}
.lp-safety-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-safety-icon svg {
  width: 48px;
  height: 48px;
}
.lp-safety-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}
@media (max-width: 600px) {
  .lp-safety-item { gap: 14px; padding: 18px 18px; }
  .lp-safety-icon { width: 44px; height: 44px; }
  .lp-safety-icon svg { width: 40px; height: 40px; }
  .lp-safety-text { font-size: 15px; }
}

/* 評価者に表示される画面プレビュー */
.lp-safety-preview {
  margin-top: 32px;
}
.lp-safety-preview-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 18px;
  line-height: 1.5;
}
.lp-safety-preview-caption svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .lp-safety-preview-caption { font-size: 15px; gap: 7px; align-items: flex-start; }
  .lp-safety-preview-caption svg { width: 20px; height: 20px; margin-top: 2px; }
}
.lp-evalshot {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #E3EEF0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(14, 19, 32, 0.08);
}
.lp-evalshot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: #F4F7F8;
  border-bottom: 1px solid #ECECEC;
}
.lp-evalshot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D6DCE0;
}
.lp-evalshot-dot:nth-child(1) { background: #F6A9A0; }
.lp-evalshot-dot:nth-child(2) { background: #F6D08A; }
.lp-evalshot-dot:nth-child(3) { background: #9FD8A2; }
.lp-evalshot-body {
  background: linear-gradient(180deg, #F0FAF6 0%, #FFFFFF 100%);
  padding: 32px 28px 36px;
  text-align: center;
}
.lp-evalshot-heart {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--c-teal, #0A8A94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-evalshot-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.5;
}
.lp-evalshot-subnote {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-teal, #0A8A94);
  margin: 0 0 20px;
  line-height: 1.6;
}
.lp-evalshot-card {
  background: #fff;
  border: 1px solid #E6ECEE;
  border-radius: 10px;
  padding: 20px 22px;
  text-align: left;
}
.lp-evalshot-card p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}
.lp-evalshot-card strong {
  color: var(--c-teal, #0A8A94);
  font-weight: 700;
}
@media (max-width: 600px) {
  .lp-evalshot-body { padding: 26px 18px 28px; }
  .lp-evalshot-title { font-size: 17px; }
  .lp-evalshot-subnote { font-size: 12px; }
  .lp-evalshot-card { padding: 16px 16px; }
}

/* ===== AI INSIGHT（新規画像活用） ===== */
.lp-ai-insight {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  padding: 120px 0;
}
.lp-ai-insight-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/lp/ai-insight-portrait.webp');
  background-size: cover;
  background-position: right center;
  opacity: 0.55;
  z-index: 0;
}
.lp-ai-insight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(14, 19, 32, 0.95) 0%,
    rgba(14, 19, 32, 0.75) 40%,
    rgba(14, 19, 32, 0.35) 70%,
    rgba(14, 19, 32, 0.15) 100%);
  z-index: 1;
}
.lp-ai-insight-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.lp-ai-insight-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold-light);
  padding: 8px 16px;
  border: 1px solid rgba(217, 188, 120, 0.35);
  border-radius: 999px;
  margin-bottom: 28px;
  background: rgba(14, 19, 32, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lp-ai-insight-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 1.5px;
  margin: 0 0 28px;
  color: #fff;
}
.lp-ai-insight-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 36px;
  font-weight: 300;
}
.lp-ai-insight-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 28px 32px;
}
.lp-ai-insight-glass-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold-light);
  margin: 0 0 16px;
}
.lp-ai-insight-glass-quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
.lp-ai-insight-glass-source {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  letter-spacing: 1px;
}

/* ===== 心理学訴求（リフレッシュ） ===== */
.lp-science-section {
  background: var(--bg);
}
.lp-science-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.lp-science-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 4px 16px rgba(14, 19, 32, 0.04);
}
.lp-science-card-tag {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.lp-science-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 16px;
}
.lp-science-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0 0 16px;
}
.lp-science-card-items {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #F0EBE0;
}
.lp-science-card-items li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: var(--navy-mid);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-science-card-items li::before {
  content: '✦';
  color: var(--gold);
  font-size: 10px;
}

/* ===== 「こんな方に」 ===== */
.lp-target-section {
  background: var(--bg);
}
.lp-target-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.lp-target-item {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid #ECECEC;
}
.lp-target-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.lp-target-icon svg { width: 22px; height: 22px; }
.lp-target-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy-mid);
  margin: 0;
  padding-top: 10px;
  font-weight: 500;
}

/* ===== FAQ（リフレッシュ） ===== */
.lp-faq-section {
  background: var(--bg);
}
.lp-faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.lp-faq-item {
  background: #fff;
  border: 1px solid rgba(3, 193, 205, 0.18);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.lp-faq-item:hover { border-color: rgba(3, 193, 205, 0.4); }
.lp-faq-item[open] {
  border-color: rgba(3, 193, 205, 0.5);
  box-shadow: 0 4px 14px rgba(3, 193, 205, 0.08);
}
.lp-faq-item summary {
  padding: 22px 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  user-select: none;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-q-mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(3, 193, 205, 0.12);
  color: #0A8A94;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
}
.lp-faq-item summary > span:nth-child(2) { flex: 1 1 auto; }
.lp-faq-icon {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 300;
  color: #0A8A94;
  transition: transform .2s;
  width: 24px;
  text-align: center;
  line-height: 1;
}
.lp-faq-item[open] .lp-faq-icon {
  transform: rotate(45deg);
}
.lp-faq-a {
  padding: 0 26px 24px 70px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 2;
  color: var(--text-sub);
}
.lp-faq-a p { margin: 0; }
.lp-faq-a strong { color: #0A8A94; font-weight: 600; }

/* ===== CTA（リフレッシュ） ===== */
.lp-cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 96px 0;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.lp-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(201, 166, 83, 0.15) 0%, transparent 60%);
}
.lp-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.lp-cta-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 38px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.lp-cta-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 40px;
}
.lp-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================================================
   レスポンシブ（タブレット 980px）
   ================================================================ */
@media (max-width: 980px) {
  .lp-section { padding: 88px 0; }
  .lp-section-header { margin-bottom: 48px; }
  .lp-section-title { font-size: 32px; }
  .lp-hero-v2 { min-height: 560px; }
  .lp-hero-v2 h1 { font-size: 40px; letter-spacing: 1px; }
  .lp-hero-v2-subcatch { font-size: 20px; }
  .lp-hero-v2-bg {
    background-image: url('../assets/lp/hero-people-mobile.webp');
  }
  .lp-ai-insight-bg {
    background-image: url('../assets/lp/ai-insight-portrait-mobile.webp');
  }
  .lp-ai-insight { padding: 96px 0; }
  .lp-ai-insight-title { font-size: 30px; }
  .lp-stats-grid { gap: 16px; }
  .lp-stat-num { font-size: 24px; min-height: 32px; }
  .lp-stat-num.lp-stat-num-text { font-size: 24px; }
  .lp-why-grid,
  .lp-usage-grid,
  .lp-flow-grid,
  .lp-science-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lp-usage-illust { height: 200px; }
  .lp-flow-grid { gap: 24px; }
  .lp-target-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   レスポンシブ（モバイル 640px）
   ================================================================ */
@media (max-width: 640px) {
  .lp-section { padding: 72px 0; }
  .lp-section-header { margin-bottom: 40px; }
  .lp-section-tag { font-size: 13px; padding: 5px 12px; margin-bottom: 16px; }
  .lp-section-title { font-size: 26px; line-height: 1.55; letter-spacing: 0.5px; }
  .lp-section-lead { font-size: 15px; line-height: 1.9; }

  .lp-hero-v2 { min-height: 520px; }
  .lp-hero-v2-content { padding: 72px 0 56px; }
  .lp-hero-v2-tag { font-size: 11px; padding: 6px 14px; margin-bottom: 20px; }
  .lp-hero-v2 h1 { font-size: 28px; letter-spacing: 0; line-height: 1.5; }
  .lp-hero-v2-subcatch { font-size: 16px; letter-spacing: 0.5px; margin-bottom: 20px; }
  .lp-hero-v2-lead { font-size: 14px; line-height: 1.9; margin-bottom: 28px; }
  .lp-hero-v2-cta { flex-direction: column; gap: 12px; }
  .lp-hero-v2-btn-primary,
  .lp-hero-v2-btn-ghost { width: 100%; padding: 14px 24px; font-size: 15px; }
  .lp-hero-v2-trust { font-size: 12px; }

  .lp-stats-bar { padding: 24px 0; }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lp-stat-item { padding: 18px 8px; border-radius: 0; }
  .lp-stat-icon { width: 36px; height: 36px; margin-bottom: 8px; }
  .lp-stat-icon svg { width: 20px; height: 20px; }
  .lp-stat-num { font-size: 20px; min-height: 28px; }
  .lp-stat-num.lp-stat-num-text { font-size: 20px; letter-spacing: -0.3px; }
  .lp-stat-num-suffix { font-size: 14px; }
  .lp-stat-label { font-size: 11px; letter-spacing: 0; line-height: 1.55; max-width: 100%; }
  .lp-stat-note { font-size: 9.5px; max-width: 100%; margin-top: 8px; padding-top: 6px; }

  .lp-empathy { padding: 72px 0; }
  .lp-empathy-title { font-size: 25px; letter-spacing: 1px; line-height: 1.65; }
  .lp-empathy-body { font-size: 15px; line-height: 1.95; }

  .lp-why-card { padding: 36px 24px; }
  .lp-why-card-icon { width: 64px; height: 64px; margin-bottom: 20px; }
  .lp-why-card-icon svg { width: 28px; height: 28px; }
  .lp-why-card-title { font-size: 19px; }
  .lp-why-card-desc { font-size: 15px; line-height: 1.85; }

  .lp-flow-card { padding: 36px 24px 28px; }
  .lp-flow-num { width: 36px; height: 36px; font-size: 14px; top: -14px; }
  .lp-flow-icon { width: 48px; height: 48px; margin: 12px 0 16px; }
  .lp-flow-icon svg { width: 40px; height: 40px; }
  .lp-flow-title { font-size: 17px; }

  .lp-ai-insight { padding: 72px 0; }
  .lp-ai-insight-bg {
    opacity: 0.7;
    background-position: right top;
    background-size: cover;
  }
  .lp-ai-insight::before {
    /* 顔がある右上を明るく残し、テキストが集中する左側・下部を暗くする複合グラデ。
       横方向（左濃→右淡）＋縦方向（上淡→下濃）を重ねる。 */
    background:
      linear-gradient(180deg,
        rgba(14, 19, 32, 0.10) 0%,
        rgba(14, 19, 32, 0.35) 45%,
        rgba(14, 19, 32, 0.82) 100%),
      linear-gradient(90deg,
        rgba(14, 19, 32, 0.78) 0%,
        rgba(14, 19, 32, 0.45) 50%,
        rgba(14, 19, 32, 0.10) 100%);
  }
  .lp-ai-insight-title { font-size: 24px; letter-spacing: 0.5px; line-height: 1.6; }
  .lp-ai-insight-lead { font-size: 15px; }
  .lp-ai-insight-glass { padding: 22px 22px; }
  .lp-ai-insight-glass-quote { font-size: 15px; line-height: 1.9; }

  .lp-science-card { padding: 28px 24px; }
  .lp-science-card-title { font-size: 18px; }

  .lp-target-item { padding: 20px; }
  .lp-target-text { font-size: 15px; padding-top: 8px; }

  .lp-faq-item summary { padding: 18px 20px; gap: 10px; font-size: 16px; }
  .lp-faq-q-mark { width: 26px; height: 26px; font-size: 12px; }
  .lp-faq-icon { font-size: 22px; width: 22px; }
  .lp-faq-a { font-size: 15px; padding: 0 20px 20px 56px; }

  .lp-cta-section { padding: 72px 0; }
  .lp-cta-title { font-size: 24px; letter-spacing: 1px; line-height: 1.65; }
  .lp-cta-lead { font-size: 15px; margin-bottom: 32px; }
  .lp-cta-btns { flex-direction: column; align-items: stretch; }
}
/* ★ 2026-06-04: 極小幅端末でメインキャッチ2行を確実に収める保険 */
@media (max-width: 380px) {
  .lp-hero-v2 h1 { font-size: 25px; letter-spacing: 0; }
  .lp-hero-v2-subcatch { font-size: 15px; }
}
/* ================================================================
   キャリアカ 求職者LP v3.1 追加コンテンツCSS (2026/5/28)
   旧版コンテンツを復活させる新セクション用
   ================================================================ */

/* ===== 「こんなお悩みありませんか？」3カード ===== */
.lp-pain-section {
  background: var(--surface);
}
.lp-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-pain-card {
  background: #fff;
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid #ECECEC;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-pain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(14, 19, 32, 0.06);
}
.lp-pain-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF5F5 0%, #FAFAFA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FECACA;
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 600;
  color: #DC2626;
}
.lp-pain-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.55;
}
.lp-pain-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}

/* ===== 4つの特徴カード ===== */
.lp-features-section {
  background: var(--surface);
}
.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lp-feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 36px 24px;
  position: relative;
  border: 1px solid #ECECEC;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(14, 19, 32, 0.08);
}
.lp-feature-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #E6FAFB;
  margin-bottom: 18px;
}
.lp-feature-ic svg {
  width: 26px;
  height: 26px;
}
.lp-feature-mark {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
}
.lp-feature-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}
.lp-feature-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}

/* ===== 画面サンプル（モックアップ） ===== */
.lp-mockup-section {
  background: var(--surface);
}
.lp-mockup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.lp-mockup-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #ECECEC;
  box-shadow: 0 4px 16px rgba(14, 19, 32, 0.06);
}
.lp-mockup-screen {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #EEF1F1;
}
.lp-mockup-screen svg {
  width: 100%;
  height: auto;
  display: block;
}
.lp-mockup-caption {
  text-align: center;
}
.lp-mockup-caption-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
}
.lp-mockup-caption-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: var(--text-sub);
  margin: 0;
}

/* ===== 第三者評価証明書を企業に送る（活用例）2026-06-11 ===== */
.lp-cert-usage-section {
  background: var(--surface);
}
.lp-cert-docset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 660px;
  margin: 0 auto 36px;
}
.lp-cert-doc {
  background: #fff;
  border: 1px solid #E8ECEC;
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
}
.lp-cert-doc-accent {
  background: #E6FAFB;
  border: 2px solid #0A8A94;
}
.lp-cert-doc-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.lp-cert-doc-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.lp-cert-doc-accent .lp-cert-doc-title { color: #076A72; }
.lp-cert-doc-desc {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 5px;
}
.lp-cert-doc-accent .lp-cert-doc-desc { color: #0A8A94; }
.lp-cert-preview {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  border-radius: 14px;
}
/* 背面に重なる紙（複数ページの厚み演出） */
.lp-cert-preview::before,
.lp-cert-preview::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 96%;
  height: 100%;
  background: #fff;
  border: 1px solid #E3EAEA;
  border-radius: 14px;
  z-index: 0;
}
.lp-cert-preview::before {
  transform: translate(-50%, 0) translate(14px, 16px) rotate(1.4deg);
  box-shadow: 0 10px 28px rgba(14, 19, 32, 0.10);
}
.lp-cert-preview::after {
  transform: translate(-50%, 0) translate(7px, 8px) rotate(0.6deg);
  box-shadow: 0 8px 22px rgba(14, 19, 32, 0.08);
}
.lp-cert-preview svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E3EAEA;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(14, 19, 32, 0.16);
  background: #fff;
}
.lp-cert-usage-note {
  max-width: 580px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.8;
}
@media (max-width: 640px) {
  .lp-cert-docset { gap: 10px; }
  .lp-cert-doc { padding: 16px 8px; }
  .lp-cert-doc-title { font-size: 12.5px; }
  .lp-cert-doc-desc { font-size: 10.5px; }
}

/* ===== 実際の管理画面デモ動画 2026-06-12 ===== */
.lp-demo-section {
  background: var(--surface);
}
.lp-demo-frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E3EAEA;
  box-shadow: 0 20px 56px rgba(14, 19, 32, 0.16);
}
.lp-demo-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: #F1F5F5;
  border-bottom: 1px solid #E3EAEA;
}
.lp-demo-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D2DADA;
}
.lp-demo-dot:nth-child(1) { background: #F0A8A0; }
.lp-demo-dot:nth-child(2) { background: #F2D29A; }
.lp-demo-dot:nth-child(3) { background: #A7D8AE; }
.lp-demo-url {
  margin-left: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #94A3B8;
  background: #fff;
  border: 1px solid #E3EAEA;
  border-radius: 6px;
  padding: 3px 14px;
  flex: 1;
  max-width: 320px;
}
.lp-demo-video {
  display: block;
  width: 100%;
  height: auto;
  background: #0E1320;
}
/* ===== キャリアヒストリー（成長の可視化）2026-06-12 ===== */
.lp-history-section {
  background: var(--bg);
}
.lp-history-window {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E3EAEA;
  box-shadow: 0 20px 56px rgba(14, 19, 32, 0.16);
}
.lp-history-body {
  padding: 26px 24px;
  background: #FBFCFC;
}
.lp-history-screen-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
}
.lp-history-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.lp-history-kpi {
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 20px;
}
.lp-history-kpi-label {
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.lp-history-kpi-main {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-teal);
}
.lp-history-kpi-unit { font-size: 16px; }
.lp-history-kpi-rank {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.lp-history-rank-arrow { color: var(--gold); }
.lp-history-kpi-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 9px;
}
.lp-history-chart-card {
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.lp-history-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.lp-history-chart {
  display: block;
  width: 100%;
  height: auto;
}
.lp-history-ai {
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  padding: 18px 20px;
}
.lp-history-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lp-history-ai-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #E6FAFB;
}
.lp-history-ai-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.lp-history-ai-badge {
  margin-left: auto;
  background: #EEEDFE;
  color: #3C3489;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 8px;
}
.lp-history-ai-text {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.85;
  margin: 0 0 8px;
}
.lp-history-ai-text:last-child { margin-bottom: 0; }
.lp-history-ai-text strong { color: var(--navy); }
.lp-history-ai-body {
  background: var(--bg);
  border-radius: 10px;
  padding: 18px;
}
.lp-hai-sec { margin-bottom: 18px; }
.lp-hai-sec:last-child { margin-bottom: 0; }
.lp-hai-sec-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.lp-hai-sec-head span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.lp-hai-card {
  background: #fff;
  border: 1px solid #EEF0F0;
  border-left: 3px solid var(--c-teal);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 13px;
  color: #3A4452;
  line-height: 1.95;
}
.lp-hai-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lp-hai-li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #fff;
  border: 1px solid #EEF0F0;
  border-radius: 6px;
  padding: 11px 13px;
}
.lp-hai-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
}
.lp-hai-li span:last-child {
  font-size: 13px;
  color: #3A4452;
  line-height: 1.7;
}
/* 続きがある見せ方 2026-06-12 */
.lp-hai-card-clamp {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-hai-card-clamp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 92%);
  pointer-events: none;
}
.lp-hai-li-more span:last-child {
  color: #9AA3B2;
}
.lp-hai-li-more {
  opacity: 0.85;
}
.lp-hai-fade {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--c-teal);
  font-weight: 600;
  background: #E6FAFB;
  border-radius: 8px;
  padding: 9px 12px;
}
@media (max-width: 640px) {
  .lp-history-kpis { grid-template-columns: 1fr; }
  .lp-history-body { padding: 18px 14px; }
  .lp-history-kpi-main { font-size: 30px; }
  .lp-history-kpi-rank { font-size: 26px; }
}
@media (max-width: 640px) {
  .lp-demo-bar { height: 32px; padding: 0 12px; }
  .lp-demo-dot { width: 9px; height: 9px; }
  .lp-demo-url { font-size: 10px; padding: 2px 10px; }
  .lp-report-window-body { padding: 18px 14px; }
  .lp-report-tab { font-size: 12px; padding: 12px 10px; }
}

/* ===== ベネフィット3軸（ストーリー型・左右交互） ===== */
.lp-benefit-section {
  background: var(--bg);
}
.lp-benefit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 88px;
}
.lp-benefit-row:last-child {
  margin-bottom: 0;
}
.lp-benefit-row.reverse {
  direction: rtl;
}
.lp-benefit-row.reverse > * {
  direction: ltr;
}
.lp-benefit-illust {
  background: linear-gradient(135deg, #F8F6F0 0%, #F0EBE0 100%);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.lp-benefit-illust svg {
  width: 100%;
  height: auto;
  max-width: 360px;
}
.lp-benefit-num {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.lp-benefit-heading {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.55;
  margin: 0 0 20px;
  letter-spacing: 0.5px;
}
.lp-benefit-accent {
  color: var(--gold-deep);
}
.lp-benefit-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 2;
  color: var(--text-sub);
  margin: 0 0 24px;
}
.lp-benefit-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-benefit-points li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--navy-mid);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-benefit-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

/* ===== 3つの強みカード ===== */
.lp-strength-section {
  background: var(--surface);
}
.lp-strength-lead {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.lp-strength-lead-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: 1px;
}
.lp-strength-lead-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}
.lp-strength-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-strength-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 28px;
  text-align: center;
  border: 1px solid #ECECEC;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-strength-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(14, 19, 32, 0.08);
}
.lp-strength-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #E6FAFB;
  margin: 0 auto 18px;
}
.lp-strength-ic svg {
  width: 28px;
  height: 28px;
}
.lp-strength-num {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.lp-strength-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.6;
}
.lp-strength-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}

/* ===== AIレポートサンプル ===== */
.lp-report-sample {
  max-width: 880px;
  margin: 64px auto 0;
}
.lp-report-sample-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  background: var(--gold-pale);
  padding: 5px 12px;
  border-radius: 4px;
  letter-spacing: 2px;
}
.lp-report-sample-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  color: var(--navy);
  margin-top: 12px;
  margin-bottom: 24px;
  text-align: center;
}
.lp-report-sample-tag-wrap {
  text-align: center;
}
.lp-report-sample-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ECECEC;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(14, 19, 32, 0.06);
}
/* ===== 管理画面の中に見せる：ブラウザ枠＋タブナビ 2026-06-12 ===== */
.lp-report-window {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E3EAEA;
  box-shadow: 0 20px 56px rgba(14, 19, 32, 0.16);
}
.lp-report-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid #ECF0F0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lp-report-tabs::-webkit-scrollbar { display: none; }
.lp-report-tab {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #8A93A3;
  padding: 14px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lp-report-tab.is-active {
  color: var(--c-teal);
  font-weight: 700;
  border-bottom-color: var(--c-teal);
}
.lp-report-window-body {
  padding: 26px 24px;
  background: #FBFCFC;
}
/* ブラウザ枠の中ではカード自身の枠・影を消してフラットに */
.lp-report-window .lp-report-sample-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.lp-report-headline {
  padding: 18px 22px;
  background: #F4FAFA;
  border-radius: 10px;
  margin-bottom: 18px;
  border-left: 3px solid var(--c-teal);
}
.lp-report-headline-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-teal);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.lp-report-headline-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.7;
  margin: 0;
  font-weight: 600;
}
.lp-report-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.lp-report-col {
  padding: 18px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E8ECEC;
  border-top: 3px solid var(--c-teal);
}
.lp-report-col-big5,
.lp-report-col-hero,
.lp-report-col-integrity {
  background: #fff;
}
.lp-report-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lp-report-col-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E6FAFB;
  flex-shrink: 0;
}
.lp-report-col-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.lp-report-col-tag {
  font-size: 11px;
  color: var(--text-mute);
  font-family: 'Inter', monospace;
  margin-left: 6px;
  font-weight: 500;
}
.lp-report-col-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0;
}
.lp-report-col-body strong {
  color: var(--navy);
}
.lp-report-integration {
  padding: 18px 20px;
  background: #F4FAFA;
  border: 1px solid #D6F0F2;
  border-radius: 10px;
  margin-bottom: 14px;
}
.lp-report-integration-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-teal);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.lp-report-integration-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.85;
  margin: 0;
}
.lp-report-integration-text strong {
  color: var(--navy);
}
.lp-report-focus {
  padding: 18px 20px;
  background: #FBFCFC;
  border: 1px solid #E8ECEC;
  border-left: 3px solid var(--gold);
  border-radius: 10px;
}
.lp-report-focus-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.lp-report-focus-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.85;
  margin: 0;
  font-weight: 500;
}
.lp-report-disclaimer {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 16px;
}

/* ===== レポートで得られる3つの価値 ===== */
.lp-value-section {
  background: var(--surface);
}
.lp-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.lp-value-item {
  text-align: center;
  padding: 8px;
}
.lp-value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}
.lp-value-icon svg {
  width: 26px;
  height: 26px;
}
.lp-value-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.55;
}
.lp-value-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0;
}

/* ===== 評価依頼の心理ハードル解消 ===== */
.lp-anxiety-section {
  background: var(--surface);
}
.lp-anxiety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}
.lp-anxiety-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  border: 1px solid #ECECEC;
}
.lp-anxiety-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.7;
  margin: 0 0 16px;
}
.lp-anxiety-card-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
}
.lp-anxiety-card-body strong {
  color: var(--gold-deep);
}
.lp-anxiety-preview {
  margin-top: 20px;
}
.lp-anxiety-preview-caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--text-mute, #8B91A1);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.lp-anxiety-conclusion {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  color: var(--navy);
  line-height: 2;
  font-weight: 500;
}

/* ===== FOR YOU 詳細版（説明文付き） ===== */
.lp-target-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-target-block-head {
  max-width: 1100px;
  margin: 0 auto 20px;
  text-align: center;
}
.lp-target-block-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--em-deep);
  letter-spacing: 0.18em;
  background: var(--em-pale);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.lp-target-block-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.5;
}
.lp-target-detail-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid #ECECEC;
}
.lp-target-detail-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-target-detail-title::before {
  content: '▼';
  color: var(--gold);
  font-size: 11px;
}
.lp-target-detail-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
}

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 980px) {
  .lp-pain-grid,
  .lp-features-grid,
  .lp-strength-grid,
  .lp-value-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lp-mockup-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .lp-benefit-row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 64px;
  }
  .lp-benefit-row.reverse {
    direction: ltr;
  }
  .lp-benefit-heading { font-size: 24px; }
  .lp-anxiety-grid {
    grid-template-columns: 1fr;
  }
  .lp-target-detail-grid {
    grid-template-columns: 1fr;
  }
  .lp-report-3col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lp-pain-card { padding: 32px 24px; }
  .lp-pain-icon { width: 56px; height: 56px; }
  .lp-pain-icon svg { width: 28px; height: 28px; }
  .lp-pain-icon::after { width: 18px; height: 18px; right: -4px; bottom: -4px; }
  .lp-pain-title { font-size: 17px; }

  .lp-feature-card { padding: 28px 22px; }
  .lp-feature-title { font-size: 17px; }

  .lp-mockup-card { padding: 18px; }
  .lp-mockup-caption-title { font-size: 16px; }
  .lp-mockup-grid { grid-template-columns: 1fr; gap: 24px; }

  .lp-benefit-illust { padding: 24px; min-height: 220px; }
  .lp-benefit-heading { font-size: 20px; line-height: 1.6; }
  .lp-benefit-body { font-size: 14px; }

  .lp-strength-card { padding: 32px 24px; }
  .lp-strength-card-title { font-size: 17px; }
  .lp-strength-lead-title { font-size: 19px; }

  .lp-report-sample-card { padding: 22px 20px; }
  .lp-report-headline { padding: 14px 16px; }
  .lp-report-headline-text { font-size: 14px; }
  .lp-report-col { padding: 14px; }
  .lp-report-integration,
  .lp-report-focus { padding: 14px 16px; }

  .lp-value-grid { gap: 24px; }
  .lp-value-icon { width: 48px; height: 48px; margin-bottom: 16px; }
  .lp-value-icon svg { width: 22px; height: 22px; }
  .lp-value-title { font-size: 16px; }

  .lp-anxiety-card { padding: 24px 22px; }
  .lp-anxiety-card-title { font-size: 15px; }

  .lp-target-detail-card { padding: 24px 22px; }
  .lp-target-detail-title { font-size: 16px; }
  .lp-anxiety-conclusion { font-size: 14px; }
}
/* ================================================================
   キャリアカ 求職者LP v3.1 — エメラルドアクセント上書き (2026/5/28)
   「キャリアの場面で、こんなお悩みありませんか？」(PAIN) 以降の
   全セクションのアクセントをゴールド→エメラルドグリーンに切替。
   チェックマーク・最終CTAボタン等の細部はゴールドを併用して残す。
   ※ style-v2.css 末尾に追記して既存ゴールド指定を上書き。
   ================================================================ */

:root {
  --em: #03C1CD;          /* ティールグリーン メイン (キャプチャ基準) */
  --em-deep: #0A8A94;     /* ティール 濃 (テキスト可読性確保) */
  --em-bright: #2DD4DE;   /* ティール 明 */
  --em-pale: #E6FAFB;     /* ティール 極淡（背景） */
  --em-soft: #B8F0F3;     /* ティール 淡 */
}

/* ===== 共通: セクションタグ(PAIN以降すべてで使用) ===== */
.lp-section-tag {
  color: var(--em-deep) !important;
  background: var(--em-soft) !important;
}

/* ===== PAIN POINTS: アイコン円(パターンC: 白背景+濃ティール枠+ゴールドドット) ===== */
.lp-pain-icon {
  position: relative;
  background: #fff !important;
  border: 2px solid var(--em-deep) !important;
  color: var(--em-deep) !important;
  font-size: 0 !important;
}
.lp-pain-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold, #C9A653);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(201, 166, 83, 0.35);
}

/* ===== WHY CARYAKA: カードアイコン(案1: 濃ティール塗りつぶし+白抜きSVG) ===== */
.lp-why-card-icon {
  background: linear-gradient(135deg, var(--em-deep) 0%, var(--em) 100%) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(7, 106, 114, 0.25) !important;
}
.lp-why-card-icon svg {
  color: #ffffff !important;
}

/* ===== FEATURES: 番号マーク ===== */
.lp-feature-mark {
  color: var(--gold) !important;
}

/* ===== HOW IT WORKS: ステップ番号・アイコン ===== */
.lp-flow-num {
  background: var(--em) !important;
}
.lp-flow-icon {
  color: var(--em-deep) !important;
}

/* ===== AI INSIGHT: タグ・グラスカード見出し ===== */
.lp-ai-insight-tag {
  color: var(--em-bright) !important;
  border-color: rgba(45, 212, 222, 0.35) !important;
}
.lp-ai-insight-glass-title {
  color: var(--em-bright) !important;
}

/* ===== 心理学セクション: カード上ボーダー・タグ ===== */
.lp-science-card {
  border-top-color: var(--em) !important;
}
.lp-science-card-tag {
  color: var(--em-deep) !important;
}

/* ===== AIレポートサンプル: ゴールド系をエメラルドへ =====
   本物のAIレポートUIがemeraldテーマのため一貫させる。
   Big5(紺)・Integrity(青灰)の意味的色分けはそのまま維持。 */
.lp-report-sample-tag {
  color: var(--em-deep) !important;
  background: var(--em-soft) !important;
}
.lp-report-headline {
  background: #F4FAFA !important;
  border-left-color: var(--c-teal) !important;
}
.lp-report-headline-label {
  color: var(--c-teal) !important;
}
/* 3カラムは統一デザイン（白背景＋薄枠＋上部ティールライン） */
.lp-report-col-hero {
  background: #fff !important;
  border-left-color: transparent !important;
}
.lp-report-integration {
  background: #F4FAFA !important;
  border-color: #D6F0F2 !important;
}
.lp-report-integration-label {
  color: var(--c-teal) !important;
}

/* ===== ベネフィット: 番号・アクセント(チェックはゴールド維持) ===== */
.lp-benefit-num {
  color: var(--em-deep) !important;
}
.lp-benefit-accent {
  color: var(--em-deep) !important;
}

/* ===== 3つの強み: 番号 ===== */
.lp-strength-num {
  color: var(--em-deep) !important;
}

/* ===== 白背景セクションのアイコン: パターンC統一 ===========
   (lp-feature-ic / lp-strength-ic / lp-value-icon)
   - 背景: 白
   - 枠: 濃ティール 2px
   - SVG色: 濃ティール
   - 右下に小さなゴールドドット(::after)
   - 形状(border-radius)は各クラスのまま維持
   ============================================================= */
.lp-feature-ic,
.lp-strength-ic,
.lp-value-icon {
  position: relative;
  background: #fff !important;
  border: 2px solid var(--em-deep) !important;
  color: var(--em-deep) !important;
}
.lp-feature-ic svg,
.lp-strength-ic svg,
.lp-value-icon svg {
  stroke: var(--em-deep) !important;
  color: var(--em-deep) !important;
}
.lp-feature-ic::after,
.lp-strength-ic::after,
.lp-value-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold, #C9A653);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(201, 166, 83, 0.35);
}

/* ===== FOR YOU: 見出しの▼マーク ===== */
.lp-target-detail-title::before {
  color: var(--em) !important;
}

/* ===== CONCERNS(不安解消): 強調文字 ===== */
.lp-anxiety-card-body strong {
  color: var(--em-deep) !important;
}

/* ===== 企業LPヒーロー内の証明書サンプル ===== */
/* 旧 .lpc-hero-illust 系は3層構造(.lpc-hero-cert)へ移行済み(2026-06-22) */

/* ===== FAQ: アコーディオン式に変更済み（lp-faq-q-mark で直接エメラルド指定） ===== */

/* ===== CTA: ゴールド維持 =====
   最終CTAボタンは Hero と統一のためブランドゴールドのまま据え置き。
   (lp-hero-v2-btn-primary を流用しているため変更不要) */
/* ================================================================
   キャリアカ 企業LP v2 — SmartHR風リデザイン専用CSS (2026/5/28)
   求職者LP v3.1 のデザイン言語を企業ページに適用。
   汎用の lp-section / lp-section-header / lp-section-tag /
   lp-section-title / lp-section-lead / lp-stats-bar / lp-pain-* /
   lp-why-* / lp-faq-* / lp-cta-* は求職者LP定義を流用。
   ここでは企業LP固有のセクションのみ定義（lpc- prefix）。
   配色: ゴールド×エメラルド併用。
   ================================================================ */

/* ===== 企業版 Hero（2カラム・ダーク・SVG右配置） ===== */
.lpc-hero {
  position: relative;
  background: linear-gradient(135deg, #0E1320 0%, #1B233D 100%);
  color: #fff;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.lpc-hero::before {
  content: none;
}
/* 第2層: 暗幕(テキスト背後を確実にダークへ。証明書より前・テキストより後ろ) */
.lpc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(95deg, #0E1320 40%, rgba(14,19,32,0.78) 56%, rgba(14,19,32,0) 80%);
}
/* 第3層: container/テキスト(最前面) */
.lpc-hero .container { position: relative; z-index: 2; width: 100%; }
.lpc-hero-text { max-width: 540px; }
/* 第1層: 証明書(背景・右に大きく傾けて配置) */
.lpc-hero-cert {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 50%;
  z-index: 0;
  transform: translateY(-50%) rotate(-7deg);
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.6));
  animation: lpcCertFloat 7s ease-in-out infinite;
}
.lpc-hero-cert .lp-cert-preview { max-width: 100%; }
.lpc-hero-cert svg { display: block; width: 100%; height: auto; border-radius: 14px; overflow: hidden; }
/* 証明書を3層に重ねて奥行きを出す(背後も実物デザイン) */
.lpc-hero-cert { position: absolute; }
.lpc-cert-layer { position: absolute; top: 0; left: 0; width: 100%; }
.lpc-cert-layer-main { position: relative; z-index: 3; }
.lpc-cert-layer-back1 {
  z-index: 2;
  transform: translate(7%, -8%) rotate(5deg);
  filter: brightness(0.82);
}
.lpc-cert-layer-back2 {
  z-index: 1;
  transform: translate(13%, -15%) rotate(10deg);
  filter: brightness(0.66);
}
@keyframes lpcCertFloat {
  0%, 100% { transform: translateY(-50%) rotate(-7deg); }
  50%      { transform: translateY(-54%) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lpc-hero-cert { animation: none; }
}
.lpc-hero-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gold-light);
  background: rgba(217, 188, 120, 0.12);
  border: 1px solid rgba(217, 188, 120, 0.3);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.lpc-hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.5px;
  margin: 0 0 24px;
  color: #fff;
  white-space: nowrap;
}
.lpc-hero-accent { color: var(--gold-light); }
.lpc-hero-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 36px;
}
.lpc-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.lpc-hero-btn-primary {
  display: inline-block;
  padding: 16px 36px;
  background: linear-gradient(135deg, #D9BC78 0%, #A8862E 100%);
  color: #1A1206;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(168, 134, 46, 0.35);
}
.lpc-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(168, 134, 46, 0.45);
}
.lpc-hero-btn-ghost {
  display: inline-block;
  padding: 16px 32px;
  background: transparent;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.lpc-hero-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.lpc-hero-trust {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ===== 2つの使い方（メインフロー + オプション） ===== */
.lpc-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
/* ★ 2026-06-22: 3つの使い方(パターンB: メイン上 + サブ2枚下) */
.lpc-usage-grid-3 {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 24px;
  max-width: 1000px;
}
.lpc-usage-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.lpc-usage-grid-3 .lpc-usage-card-main {
  border-top-width: 5px;
}
.lpc-usage-grid-3 .lpc-usage-card-main .lpc-usage-title {
  font-size: 24px;
}
/* 3枚目: 社内360度評価(朱アクセント) */
.lpc-usage-card-team {
  border-top: 4px solid #C8392E;
}
.lpc-usage-card-team .lpc-usage-badge {
  color: #A52E25;
  background: #FBE6E3;
}
.lpc-usage-card-team .lpc-usage-icon { color: #A52E25; }
.lpc-usage-card-team .lpc-usage-price { color: #A52E25; }
@media (max-width: 720px) {
  .lpc-usage-subrow { grid-template-columns: 1fr; }
}
.lpc-usage-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  border: 1px solid #ECECEC;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.lpc-usage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(14, 19, 32, 0.07);
}
.lpc-usage-card-main {
  border-top: 4px solid var(--em);
}
.lpc-usage-card-option {
  border-top: 4px solid var(--gold);
}
.lpc-usage-badge {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.lpc-usage-card-main .lpc-usage-badge {
  color: var(--em-deep);
  background: var(--em-soft);
}
.lpc-usage-card-option .lpc-usage-badge {
  color: var(--gold-deep);
  background: var(--gold-pale);
}
.lpc-usage-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}
.lpc-usage-card-main .lpc-usage-icon { color: var(--em-deep); }
.lpc-usage-card-option .lpc-usage-icon { color: var(--gold-deep); }
.lpc-usage-icon svg { width: 100%; height: 100%; }
.lpc-usage-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 14px;
}
.lpc-usage-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0 0 20px;
}
.lpc-usage-desc strong { color: var(--navy); font-weight: 600; }
.lpc-usage-price {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
}
.lpc-usage-card-main .lpc-usage-price { color: var(--em-deep); }
.lpc-usage-card-option .lpc-usage-price { color: var(--gold-deep); }
.lpc-usage-note {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub);
  margin: 36px auto 0;
  max-width: 720px;
}
@media (max-width: 600px) {
  .lpc-usage-note-br { display: none; }
}

/* ===== 補強メッセージ（引用ブロック） ===== */
.lpc-quote {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  background: var(--navy);
  border-radius: 16px;
  padding: 44px 40px;
}
.lpc-quote-headline {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.6;
  margin: 0 0 18px;
}
.lpc-quote-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* ===== 比較表 ===== */
.lpc-compare {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ECECEC;
  box-shadow: 0 4px 16px rgba(14, 19, 32, 0.05);
}
.lpc-compare table {
  width: 100%;
  border-collapse: collapse;
}
.lpc-compare th,
.lpc-compare td {
  padding: 18px 20px;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  border-bottom: 1px solid #F0F0F0;
}
.lpc-compare thead th {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  background: #FAFAFA;
}
.lpc-compare thead th.lpc-compare-highlight {
  background: var(--em-pale);
  color: var(--em-deep);
}
.lpc-compare tbody th {
  font-weight: 600;
  color: var(--text-sub);
  width: 22%;
  background: #FAFAFA;
}
.lpc-compare tbody td {
  color: var(--text-sub);
}
.lpc-compare tbody td.lpc-compare-highlight {
  color: var(--navy);
  font-weight: 600;
  background: rgba(5, 150, 105, 0.04);
}
.lpc-compare-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-sub);
  letter-spacing: 0.01em;
}
.lpc-compare tr:last-child th,
.lpc-compare tr:last-child td { border-bottom: none; }

/* ===== 2軸で評価する（信用スコア × 合致度） ===== */
.lpc-axis-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto 32px;
}
.lpc-axis-card {
  background: #fff;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(14, 19, 32, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
}
.lpc-axis-visual {
  background: var(--surface, #F7F6F1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.lpc-axis-visual svg { display: block; width: 100%; height: auto; }
.lpc-axis-card-credibility { border-top: 4px solid var(--c-teal, #0A8A94); }
.lpc-axis-card-fit { border-top: 4px solid var(--gold, #C9A653); }
.lpc-axis-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-teal-deep, #076A72);
  background: var(--c-teal-pale, #E6F4F1);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lpc-axis-badge-gold {
  color: var(--gold-deep, #A8862E);
  background: var(--gold-pale, #F7EFD7);
}
.lpc-axis-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy, #0E1320);
  margin: 0 0 6px;
}
.lpc-axis-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub, #5B6C8C);
  margin: 0 0 16px;
}
.lpc-axis-desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-sub, #5B6C8C);
  margin: 0;
}
.lpc-axis-ranks {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-sub, #5B6C8C);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--c-teal-pale, #E6F4F1);
}
.lpc-axis-ranks strong {
  color: var(--c-teal-deep, #076A72);
  font-weight: 700;
}
.lpc-axis-cross {
  align-self: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--text-mute, #9CA3AF);
  line-height: 1;
}
.lpc-axis-conclusion {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.95;
  color: var(--navy, #0E1320);
}
.lpc-axis-conclusion strong {
  color: var(--c-teal-deep, #076A72);
  font-weight: 700;
}
@media (max-width: 820px) {
  .lpc-axis-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
  }
  .lpc-axis-cross { transform: rotate(90deg); padding: 2px 0; font-size: 28px; }
}

/* ===== 評価設計（数字オーバービュー） ===== */
.lpc-cred-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 56px;
}
.lpc-cred-stat {
  text-align: center;
  background: #fff;
  border-radius: 14px;
  padding: 32px 24px;
  border: 1px solid #ECECEC;
}
.lpc-cred-stat-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--em-deep);
  line-height: 1;
  margin-bottom: 8px;
}
.lpc-cred-stat-unit {
  font-size: 18px;
  margin-left: 4px;
}
.lpc-cred-stat-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.lpc-cred-stat-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-mute);
}

/* 設問カテゴリ2カラム */
.lpc-question-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
.lpc-question-block {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  border: 1px solid #ECECEC;
}
.lpc-question-block-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--em-soft);
}
.lpc-question-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lpc-question-list li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
  padding: 8px 0 8px 24px;
  position: relative;
}
.lpc-question-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--em);
}
.lpc-question-cat {
  font-weight: 600;
  color: var(--navy);
}

/* ===== AI3軸ロジック（ダークセクション） ===== */
.lpc-ai3-section {
  background: linear-gradient(180deg, #0E1320 0%, #1B233D 100%);
  color: #fff;
}
.lpc-ai3-section .lp-section-title { color: #fff; }
.lpc-ai3-section .lp-section-lead { color: rgba(255,255,255,0.78); }
.lpc-ai3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.lpc-ai3-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 32px 28px;
}
.lpc-ai3-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--gold-light);
}
.lpc-ai3-card-icon svg { width: 100%; height: 100%; }
.lpc-ai3-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
}
.lpc-ai3-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.lpc-ai3-report {
  max-width: 1040px;
  margin: 56px auto 0;
}
.lpc-ai3-report-head {
  text-align: center;
  margin-bottom: 32px;
}
.lpc-ai3-report-eyebrow {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-light);
  background: rgba(201, 166, 83, 0.12);
  border: 1px solid rgba(201, 166, 83, 0.3);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 16px;
}
.lpc-ai3-report-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.lpc-ai3-report-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto;
  max-width: 640px;
}
.lpc-ai3-report-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lpc-ai3-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 166, 83, 0.2);
  border-radius: 12px;
  padding: 22px 20px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.lpc-ai3-item:hover {
  border-color: rgba(201, 166, 83, 0.5);
  background: rgba(201, 166, 83, 0.06);
  transform: translateY(-3px);
}
.lpc-ai3-item-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  color: var(--gold-light);
}
.lpc-ai3-item-icon svg { width: 100%; height: 100%; }
.lpc-ai3-item-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #F2E3B6;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.lpc-ai3-item-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
  margin: 0;
}
.lpc-ai3-note {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 36px auto 0;
  max-width: 720px;
}

/* ===== 信憑性4つの仕組み ===== */
.lpc-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.lpc-trust-card {
  display: flex;
  gap: 20px;
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  border: 1px solid #ECECEC;
  align-items: flex-start;
}
.lpc-trust-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--em-pale);
  color: var(--em-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 700;
}
.lpc-trust-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.5;
}
.lpc-trust-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}

/* ===== 5段階採用判断ラベル ===== */
.lpc-label-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.lpc-label-card {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 28px 16px;
  border: 1px solid #ECECEC;
  border-top: 4px solid;
}
.lpc-label-rank {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
}
.lpc-label-rank-plus {
  font-size: 19px;
  font-weight: 700;
  opacity: 0.78;
}
.lpc-label-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
}
.lpc-label-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
}

/* ===== 企業向け料金プラン（タブ） ===== */
.lpc-pricing-tabs {
  display: flex;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 40px;
}
.lpc-pricing-tab {
  flex: 1;
  background: #fff;
  border: 2px solid #ECECEC;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s;
  font-family: 'Noto Sans JP', sans-serif;
}
.lpc-pricing-tab:hover { border-color: var(--em-soft); }
.lpc-pricing-tab.active {
  border-color: var(--em);
  background: var(--em-pale);
}
.lpc-tab-label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.lpc-pricing-tab.active .lpc-tab-label { color: var(--em-deep); }
.lpc-tab-sub {
  display: block;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
}
.lpc-pricing-panel { display: none; }
.lpc-pricing-panel.active { display: block; }
.lpc-pricing-desc {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-sub);
  max-width: 720px;
  margin: 0 auto 48px;
}
.lpc-pricing-desc strong { color: var(--navy); font-weight: 600; }
.lpc-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.lpc-plan-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  border: 1px solid #ECECEC;
  position: relative;
  display: flex;
  flex-direction: column;
}
.lpc-plan-card.recommended {
  border: 2px solid var(--em);
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.1);
}
.lpc-plan-rec-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--em);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: 999px;
}
.lpc-plan-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}
.lpc-plan-price {
  font-family: 'Noto Serif JP', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}
.lpc-plan-price .price-yen {
  font-size: 0.46em;
  vertical-align: 0.18em;
  margin-right: 1px;
}
.lpc-plan-price-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-mute);
}
.lpc-plan-phase {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  margin-bottom: 24px;
}
.lpc-plan-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1 1 auto;
}
.lpc-plan-features li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub);
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid #F4F4F4;
}
.lpc-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 9px;
  color: var(--gold-deep);
  font-weight: 700;
}
.lpc-plan-features li strong { color: var(--navy); font-weight: 600; }
.lpc-plan-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.lpc-plan-btn-primary {
  background: var(--em);
  color: #fff;
}
.lpc-plan-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}
.lpc-plan-btn-outline {
  background: transparent;
  border: 1px solid var(--em);
  color: var(--em-deep);
}
.lpc-plan-btn-outline:hover { background: var(--em-pale); }
.lpc-pricing-foot {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-mute);
  margin: 32px auto 0;
  max-width: 760px;
}

/* ===== 企業画面サンプル ===== */
.lpc-mockup-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #ECECEC;
  box-shadow: 0 4px 16px rgba(14, 19, 32, 0.06);
}
.lpc-mockup-wrap svg {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.lpc-mockup-caption {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  margin: 18px 0 0;
}

/* === 企業ダッシュボード・サンプル（実画面寄せ） === */
.lpc-dash {
  background: #fff;
  border: 1px solid #E8ECEF;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}
.lpc-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #EEF0F2;
}
.lpc-dash-brand { display: flex; align-items: center; gap: 8px; }
.lpc-dash-logo {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy, #0E1320);
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.lpc-dash-title { font-size: 15px; font-weight: 700; color: #1A2236; }
.lpc-dash-count { font-size: 12.5px; color: #94A3B8; }
.lpc-dash-table { padding: 8px 12px 4px; }
.lpc-dash-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.4fr 0.7fr 0.6fr 1fr 1.1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  border-bottom: 1px solid #F1F3F4;
}
.lpc-dash-row:last-child { border-bottom: none; }
.lpc-dash-row-head {
  padding: 8px 12px;
  border-bottom: 1px solid #EEF0F2;
}
.lpc-dash-row-head span {
  font-size: 11.5px;
  color: #94A3B8;
  font-weight: 500;
}
.lpc-dash-c-cand { display: flex; align-items: center; gap: 10px; }
.lpc-dash-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #EDF1F2;
  color: #5B6B73;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.lpc-dash-name { font-size: 14px; font-weight: 700; color: #1A2236; }
.lpc-dash-c-job { font-size: 13px; color: #64748B; }
.lpc-dash-c-score { display: flex; flex-direction: column; gap: 4px; }
.lpc-dash-score-num { font-size: 16px; font-weight: 700; color: #1A2236; display: inline; }
.lpc-dash-score-max { font-size: 11px; color: #94A3B8; margin-left: 3px; }
.lpc-dash-score-bar {
  display: block;
  height: 4px;
  background: #E8ECEF;
  border-radius: 3px;
  overflow: hidden;
  max-width: 120px;
}
.lpc-dash-score-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c-teal, #0A8A94);
}
.lpc-dash-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.lpc-dash-rank-s { background: #0A8A94; }
.lpc-dash-rank-a { background: #14A0AB; }
.lpc-dash-rank-b { background: #C9A653; }
.lpc-dash-rank-d { background: #E2574C; }
.lpc-dash-c-eval { font-size: 13px; color: #475569; }
.lpc-dash-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #A8862E;
  background: #F7EFD7;
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}
.lpc-dash-badge-free {
  color: #64748B;
  background: #EEF0F2;
}
.lpc-dash-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--c-teal, #0A8A94);
  border-radius: 8px;
  padding: 9px 16px;
  white-space: nowrap;
}
.lpc-dash-foot {
  text-align: center;
  font-size: 12.5px;
  color: #94A3B8;
  margin: 0;
  padding: 16px 22px 20px;
  border-top: 1px solid #EEF0F2;
}

/* === こんな企業におすすめ（ユースケース） === */
.lpc-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.lpc-usecase-card {
  background: #fff;
  border: 1px solid #E8ECEF;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lpc-usecase-card:hover {
  border-color: rgba(10, 138, 148, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(14, 19, 32, 0.07);
}
.lpc-usecase-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--c-teal, #0A8A94);
  background: #E6FAFB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lpc-usecase-icon svg { width: 24px; height: 24px; }
.lpc-usecase-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy, #1A2236);
  margin: 0 0 10px;
}
.lpc-usecase-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}

/* === 導入の流れ（3ステップ） === */
.lpc-steptabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 32px;
  flex-wrap: wrap;
}
.lpc-steptab {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid #E2E8E9;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  text-align: center;
}
.lpc-steptab:hover { border-color: rgba(10, 138, 148, 0.4); }
.lpc-steptab.active {
  border-color: var(--c-teal, #0A8A94);
  background: #E6FAFB;
}
.lpc-steptab-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy, #1A2236);
}
.lpc-steptab.active .lpc-steptab-label { color: #0A8A94; }
.lpc-steptab-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--text-sub);
}
.lpc-steppanel { display: none; }
.lpc-steppanel.active { display: flex; }
.lpc-steps.lpc-steppanel:not(.active) { display: none !important; }

/* === 導入ステップ本体 === */
.lpc-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto;
}
.lpc-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #E8ECEF;
  border-radius: 14px;
  padding: 28px 22px;
}
.lpc-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-teal, #0A8A94);
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.lpc-step-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy, #1A2236);
  margin: 0 0 10px;
}
.lpc-step-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}
.lpc-step-arrow {
  display: flex;
  align-items: center;
  color: var(--gold, #C9A653);
  flex-shrink: 0;
}
.lpc-step-arrow svg { width: 28px; height: 28px; }

/* === 無料・ノーリスク再強調 === */
.lpc-norisk-section { background: var(--surface); }
.lpc-norisk {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(135deg, #E6FAFB 0%, #F4FBF7 100%);
  border: 1px solid rgba(10, 138, 148, 0.2);
  border-radius: 18px;
  padding: 44px 32px;
}
.lpc-norisk-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy, #0E1320);
  margin: 0 0 24px;
}
.lpc-norisk-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-bottom: 22px;
}
.lpc-norisk-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy, #1A2236);
}
.lpc-norisk-item svg {
  width: 18px;
  height: 18px;
  color: var(--c-teal, #0A8A94);
  flex-shrink: 0;
}
.lpc-norisk-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--text-sub);
  margin: 0;
}

/* === 追従CTA === */
.lpc-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px;
  background: rgba(14, 19, 32, 0.96);
  border-top: 1px solid rgba(201, 166, 83, 0.35);
  box-shadow: 0 -4px 20px rgba(8, 11, 20, 0.3);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.lpc-sticky-cta.is-visible { transform: translateY(0); }
.lpc-sticky-cta-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #F2E3B6;
}
.lpc-sticky-cta-btn {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0E1320;
  background: linear-gradient(135deg, var(--gold-light, #D9BC78), var(--gold-deep, #A8862E));
  border-radius: 8px;
  padding: 11px 26px;
  white-space: nowrap;
}

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 980px) {
  .lpc-hero {
    padding: 64px 0;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  /* 証明書を背景配置から通常配置に戻す(スマホ/タブレット) */
  .lpc-hero::after { display: none; }
  /* .lpc-hero を1つのflowに: container/textをcontentsで展開し全要素をorder制御
     並び順: バッジ → 見出し → 証明書 → リード文 → CTA → trust文 */
  .lpc-hero {
    flex-direction: column;
    align-items: stretch;
    padding-left: 24px;
    padding-right: 24px;
  }
  .lpc-hero .container { display: contents; }
  .lpc-hero-text { display: contents; }
  .lpc-hero-tag    { order: 1; align-self: flex-start; }
  .lpc-hero-title  { order: 2; font-size: 36px; white-space: normal; }
  .lpc-hero-cert {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    width: 80%;
    max-width: 360px;
    margin: 24px auto 32px;
    transform: rotate(-3deg);
    animation: none;
  }
  .lpc-cert-layer-back1 { transform: translate(5%, -5%) rotate(4deg); }
  .lpc-cert-layer-back2 { transform: translate(9%, -9%) rotate(8deg); }
  .lpc-hero-lead   { order: 4; max-width: 100%; }
  .lpc-hero-cta    { order: 5; }
  .lpc-hero-trust  { order: 6; }

  .lpc-usage-grid { grid-template-columns: 1fr; gap: 20px; }
  .lpc-cred-overview { grid-template-columns: 1fr; gap: 16px; max-width: 480px; }
  .lpc-question-cols { grid-template-columns: 1fr; }
  .lpc-ai3-grid { grid-template-columns: 1fr; gap: 20px; }
  .lpc-ai3-report { margin-top: 40px; }
  .lpc-ai3-report-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lpc-ai3-report-title { font-size: 22px; }
  .lpc-trust-grid { grid-template-columns: 1fr; }
  .lpc-usecase-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lpc-steps { flex-direction: column; align-items: stretch; gap: 12px; }
  .lpc-step-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
  .lpc-label-grid { grid-template-columns: repeat(2, 1fr); }
  .lpc-pricing-tabs { flex-direction: column; }
  .lpc-plan-grid { grid-template-columns: 1fr; gap: 20px; max-width: 420px; }
}

@media (max-width: 640px) {
  .lpc-hero { padding: 36px 24px 48px; }
  .lpc-hero-title { font-size: 24px; line-height: 1.5; }
  .lpc-hero-lead { font-size: 14px; line-height: 1.85; }
  .lpc-hero-cta { flex-direction: column; gap: 12px; }
  .lpc-hero-btn-primary, .lpc-hero-btn-ghost { text-align: center; padding: 16px 20px; }
  .lpc-hero-tag { padding: 5px 16px; font-size: 11px; }
  .lpc-hero-cert { width: 92%; max-width: 320px; margin: 20px auto 32px; }

  .lpc-usage-card { padding: 32px 24px; }
  .lpc-usage-title { font-size: 19px; }

  .lpc-quote { padding: 32px 24px; }
  .lpc-quote-headline { font-size: 20px; }

  .lpc-compare { overflow-x: auto; }
  .lpc-compare th, .lpc-compare td { padding: 14px; font-size: 13px; }

  .lpc-cred-stat-num { font-size: 36px; }
  .lpc-question-block { padding: 24px; }

  .lpc-ai3-card { padding: 24px; }
  .lpc-ai3-report-grid { grid-template-columns: 1fr; }
  .lpc-ai3-report-title { font-size: 20px; }
  .lpc-ai3-report-lead { font-size: 14px; }

  .lpc-trust-card { padding: 22px; gap: 14px; }
  .lpc-trust-num { width: 38px; height: 38px; font-size: 16px; }

  .lpc-label-grid { grid-template-columns: 1fr; }
  .lpc-label-card { display: flex; align-items: center; gap: 16px; text-align: left; border-top: none; border-left: 4px solid; }
  .lpc-label-rank { font-size: 26px; margin-bottom: 0; flex: 0 0 auto; width: 40px; }

  .lpc-plan-card { padding: 32px 24px; }
  .lpc-plan-price { font-size: 30px; }

  .lpc-mockup-wrap { padding: 16px; }
  .lpc-usecase-grid { grid-template-columns: 1fr; }
  .lpc-steptabs { flex-direction: column; gap: 10px; }
  .lpc-steptab { min-width: 0; }
  .lpc-norisk { padding: 32px 22px; }
  .lpc-norisk-title { font-size: 21px; }
  .lpc-norisk-list { gap: 12px 20px; }
  .lpc-norisk-item { font-size: 13.5px; }
  .lpc-sticky-cta { gap: 12px; padding: 12px 14px; }
  .lpc-sticky-cta-text { display: none; }
  .lpc-sticky-cta-btn { flex: 1; text-align: center; }
  .lpc-dash-row {
    grid-template-columns: 1.4fr 0.9fr 0.5fr auto;
    gap: 8px;
    padding: 12px 8px;
  }
  .lpc-dash-c-job,
  .lpc-dash-c-eval,
  .lpc-dash-c-status { display: none; }
  .lpc-dash-name { font-size: 13px; }
  .lpc-dash-avatar { width: 28px; height: 28px; font-size: 12px; }
  .lpc-dash-btn { font-size: 11.5px; padding: 7px 10px; }
  .lpc-dash-score-bar { max-width: 80px; }
}

/* ================================================================
   実写画像バナー (2026/5/28追加)
   ================================================================ */

/* 全幅パララックス帯（メッセージ重ね） */
.lpc-photo-band {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.lpc-photo-band-aspire1 {
  background-image: linear-gradient(rgba(14,19,32,0.45), rgba(14,19,32,0.45)), url('../assets/lp/corp-aspire-1.webp');
}
.lpc-photo-band-success {
  background-image: linear-gradient(rgba(8,12,22,0.62), rgba(8,12,22,0.72)), url('../assets/lp/corp-success.webp');
  background-position: center 30%;
}
.lpc-photo-band-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 0 32px;
}
.lpc-photo-band-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--em-bright);
  margin-bottom: 18px;
}
.lpc-photo-band-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 1px;
  margin: 0;
}
.lpc-photo-band-title .accent { color: var(--em-bright); }
.lpc-photo-band-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.9;
  margin: 18px 0 0;
}

/* テキスト並走（画像 + コピー、2カラム） */
.lpc-photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(14,19,32,0.08);
}
.lpc-photo-split-img {
  background-size: cover;
  background-position: center;
  min-height: 340px;
}
.lpc-photo-split-img-interview {
  background-image: url('../assets/lp/corp-interview.webp');
}
.lpc-photo-split-body {
  background: var(--navy);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lpc-photo-split-tag {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--em-bright);
  margin-bottom: 16px;
}
.lpc-photo-split-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 18px;
}
.lpc-photo-split-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

@media (max-width: 980px) {
  .lpc-photo-band { min-height: 300px; }
  .lpc-photo-band-title { font-size: 26px; }
  .lpc-photo-split { grid-template-columns: 1fr; }
  .lpc-photo-split-img { min-height: 240px; }
  .lpc-photo-split-body { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .lpc-photo-band { min-height: 260px; }
  .lpc-photo-band-title { font-size: 21px; }
  .lpc-photo-band-sub { font-size: 14px; }
  .lpc-photo-split-title { font-size: 22px; }
}
/* ================================================================
   キャリアカ 求職者LP v3.1 — イラスト画像バナー (2026/5/29追加)
   文字情報が多いセクション間に視覚的休憩を挿入。
   ================================================================ */

/* ===== 全幅パララックス帯（メッセージ重ね） ===== */
.lps-photo-band {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.lps-photo-band-forward {
  background-image: linear-gradient(rgba(14,19,32,0.32), rgba(14,19,32,0.42)), url('../assets/lp/seeker-forward.webp');
  background-position: center 30%;
}
.lps-photo-band-focus {
  background-image: linear-gradient(rgba(8,12,22,0.55), rgba(8,12,22,0.72)), url('../assets/lp/seeker-focus.webp');
  background-position: center 35%;
}
.lps-photo-band-team {
  /* 明るい白寄せオーバーレイ（BENEFITSが明るいトーンなので明るく） */
  background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.65)), url('../assets/lp/seeker-team.webp');
  background-position: center 30%;
}
/* container内に収め、コピーは左寄せカード型でメッセージを読みやすくする */
.lps-photo-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.lps-photo-band-card {
  background: rgba(14, 19, 32, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 36px 40px;
  border-radius: 14px;
  max-width: 540px;
}
/* 明るい背景帯用のカード（白基調） */
.lps-photo-band-team .lps-photo-band-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(14, 19, 32, 0.08);
}
.lps-photo-band-tag {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--em-bright);
  margin-bottom: 14px;
}
.lps-photo-band-team .lps-photo-band-tag { color: var(--em-deep); }

.lps-photo-band-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.5px;
  margin: 0;
}
.lps-photo-band-title .accent { color: var(--em-bright); }
.lps-photo-band-team .lps-photo-band-title { color: var(--navy); }
.lps-photo-band-team .lps-photo-band-title .accent { color: var(--em-deep); }

.lps-photo-band-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.95;
  margin: 16px 0 0;
}
.lps-photo-band-team .lps-photo-band-sub { color: var(--text-sub); }

/* 配置別: 画像の人物位置に応じて、カードを左右に配置（顔と重ならないように） */
/* forward/team: 人物が右 → カード左寄せ */
.lps-photo-band-forward .lps-photo-band-card,
.lps-photo-band-team .lps-photo-band-card { margin-right: auto; }
/* focus: 人物が中央左 → カード右寄せ */
.lps-photo-band-focus .lps-photo-band-card { margin-left: auto; }

/* ===== 並走バナー（2カラム） ===== */
.lps-photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(14,19,32,0.08);
}
.lps-photo-split.reverse { direction: rtl; }
.lps-photo-split.reverse > * { direction: ltr; }

.lps-photo-split-img {
  background-size: cover;
  background-position: center;
  min-height: 340px;
}
.lps-photo-split-img-city     { background-image: url('../assets/lp/seeker-city.webp'); }
.lps-photo-split-img-headset  { background-image: url('../assets/lp/seeker-headset.webp'); }

.lps-photo-split-body {
  background: var(--navy);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lps-photo-split-tag {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--em-bright);
  margin-bottom: 16px;
}
.lps-photo-split-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 18px;
}
.lps-photo-split-title .accent { color: var(--em-bright); }
.lps-photo-split-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.95;
  color: rgba(255,255,255,0.82);
  margin: 0;
}

@media (max-width: 980px) {
  /* モバイルでは画像とテキストの重なりを解消し、
     「画像を上・テキストカードを下」の縦積みレイアウトにする。
     人物の顔がカードに隠れないようにするための措置。 */
  .lps-photo-band {
    display: block;
    min-height: 0;
    /* 背景画像は ::before に移すため、本体側の背景は消す */
    background-image: none !important;
  }
  /* 画像エリア（人物が見える固定高） */
  .lps-photo-band::before {
    content: "";
    display: block;
    width: 100%;
    height: 240px;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .lps-photo-band-forward::before {
    background-image: url('../assets/lp/seeker-forward-mobile.webp');
    background-position: right 30%;
  }
  .lps-photo-band-team::before {
    background-image: url('../assets/lp/seeker-team-mobile.webp');
    background-position: center top;
  }
  .lps-photo-band-focus::before {
    background-image: url('../assets/lp/seeker-focus-mobile.webp');
    background-position: center 38%;
  }
  /* テキストはカード型をやめ、画像下にベタ置き（被りゼロ） */
  .lps-photo-band-inner { padding: 0; }
  .lps-photo-band-card,
  .lps-photo-band-team .lps-photo-band-card {
    max-width: none;
    margin: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 36px 24px;
  }
  /* ダーク系（forward/focus）はネイビーベタ、明系（team）は白系ベタ */
  .lps-photo-band-forward .lps-photo-band-card,
  .lps-photo-band-focus .lps-photo-band-card {
    background: var(--navy);
  }
  .lps-photo-band-team .lps-photo-band-card {
    background: #F4F2EC;
  }
  .lps-photo-band-title { font-size: 22px; }

  .lps-photo-split,
  .lps-photo-split.reverse { grid-template-columns: 1fr; direction: ltr; }
  .lps-photo-split-img { min-height: 240px; background-position: center top; }
  .lps-photo-split-img-city    { background-image: url('../assets/lp/seeker-city-mobile.webp'); }
  .lps-photo-split-img-headset { background-image: url('../assets/lp/seeker-headset-mobile.webp'); background-position: left top; }
  .lps-photo-split-body { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .lps-photo-band::before { height: 210px; }
  .lps-photo-band-title { font-size: 20px; }
  .lps-photo-band-sub { font-size: 14px; }
  .lps-photo-band-card,
  .lps-photo-band-team .lps-photo-band-card { padding: 30px 20px; }
  .lps-photo-split-title { font-size: 22px; }
}

/* ============================================================================
   ★ 2026-06-04: 細かなUI修正（社内指摘対応）
   ① パスワード表示トグル（目アイコン）
   ② カテゴリ別スコア「強み」バッジの折り返し防止
   ③ 共有URL管理：発行済みURLのはみ出し防止
   ④ 生年月日(type=date)の値が中央寄せになるずれを左寄せに統一
   ⑤ 候補者一覧：名前の縦折れ防止（テーブル最小幅＋名前nowrap）
   ============================================================================ */

/* ① パスワード入力 + 目アイコン */
.pw-input-wrap {
  position: relative;
  width: 100%;
}
.pw-input-wrap input[type="password"],
.pw-input-wrap input[type="text"] {
  width: 100%;
  /* 右側にトグルボタン分の余白を確保 */
  padding-right: 52px !important;
}
.pw-toggle-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.pw-toggle-btn:hover {
  color: var(--navy);
  background: rgba(0, 0, 0, 0.04);
}
.pw-toggle-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 1px;
}

/* ④ 生年月日(type=date)の値を左寄せに統一（iOS等で中央寄りになるのを防ぐ） */
.form-group input[type="date"] {
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* ② カテゴリ別スコア「強み」バッジの折り返し防止
   ラベルとバッジが横並びのまま収まるよう、ラベル幅を広げ nowrap にする */
.cat-bar-label {
  white-space: nowrap;
  width: auto;
  min-width: 100px;
}
.cat-bar-label .strongest-badge {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .cat-bar-label {
    min-width: 72px !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* ③ 共有URL：はみ出し防止を確実にする（flex子の最小幅でも省略が効くように） */
.share-token-url-row {
  width: 100%;
  min-width: 0;
}
.share-token-url-code {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ⑤ 候補者一覧：テーブルを自然幅で横スクロールさせ、名前の縦折れを防ぐ */
.company-table {
  min-width: 720px;
}
/* 候補者名セル（2列目）は折り返さない */
.company-table td:nth-child(2) {
  white-space: nowrap;
}

/* ============================================================================
   ★ 2026-06-04: キャリアヒストリー サマリー数値（大胆に拡大）
   ============================================================================ */
.ch-stat-num {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
}
.ch-stat-num-sm {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
}
.ch-stat-unit {
  font-size: 20px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}
@media (max-width: 600px) {
  .ch-stat-num { font-size: 40px; }
  .ch-stat-num-sm { font-size: 32px; }
  .ch-stat-unit { font-size: 16px; }
}

/* ★ 2026-06-04: 汎用スピナー keyframes(spin)。既存のインライン animation:spin 用に追加 */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   ★ 2026-06-04: チュートリアル(ツアー型)
   ============================================================================ */
#tutorialOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
/* スポットライト: 巨大な影で周囲を暗くし、対象だけ明るく見せる */
#tutorialOverlay .tut-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(14, 19, 32, 0.72);
  border: 2px solid var(--teal, #0A8A94);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}
/* ターゲットなし時は全面を暗くする */
#tutorialOverlay.tut-center-dim::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.78);
  pointer-events: auto;
}
#tutorialOverlay .tut-tip {
  position: fixed;
  background: #ffffff;
  border-radius: 14px;
  padding: 22px 24px;
  width: 320px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.9);
  pointer-events: auto;
  z-index: 2;
  transition: top .25s ease, left .25s ease;
}
#tutorialOverlay .tut-tip-step {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #0A8A94;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
#tutorialOverlay .tut-tip-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 700;
  color: #0E1320;
  margin-bottom: 10px;
  line-height: 1.4;
}
#tutorialOverlay .tut-tip-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: #2A2F3A;
  margin-bottom: 20px;
}
#tutorialOverlay .tut-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#tutorialOverlay .tut-tip-right { display: flex; gap: 8px; }
#tutorialOverlay .tut-skip {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: underline;
}
#tutorialOverlay .tut-skip:hover { color: #2A2F3A; }
#tutorialOverlay .tut-prev {
  background: #fff;
  border: 1px solid #C9CED6;
  color: #0E1320;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
#tutorialOverlay .tut-prev:hover { background: #F5F6F4; }
#tutorialOverlay .tut-next {
  background: var(--teal, #0A8A94);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
#tutorialOverlay .tut-next:hover { background: var(--teal-light, #11A8B2); }
@media (max-width: 600px) {
  #tutorialOverlay .tut-tip { width: calc(100vw - 32px); max-width: calc(100vw - 32px) !important; }
}

/* ============================================================================
   ★ 2026-06-04: マイパスポート 固定タブナビ
   ============================================================================ */
.pp-tabbar {
  position: fixed;
  top: 96px;                 /* JSでヘッダー実高さに上書き */
  z-index: 95;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light, #E5E7EB);
  box-shadow: 0 2px 10px rgba(14, 19, 32, 0.05);
  /* left / width は JS で実測設定 */
}
.pp-tabbar-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 8px 0;
}
.pp-tabbar-inner::-webkit-scrollbar { display: none; }
.pp-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-sub, #5F5E5A);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.pp-tab:hover { color: var(--navy, #0E1320); }
.pp-tab.active {
  color: var(--teal, #0A8A94);
  border-bottom-color: var(--teal, #0A8A94);
}
.pp-tab--print {
  margin-left: auto;
  align-self: center;
  border: 1px solid var(--teal, #0A8A94);
  border-radius: 8px;
  color: var(--teal, #0A8A94);
  padding: 6px 14px;
  font-size: 13px;
}
.pp-tab--print:hover {
  background: var(--teal, #0A8A94);
  color: #fff;
}
.pp-section { scroll-margin-top: 160px; }
@media (max-width: 600px) {
  .pp-tab { font-size: 13px; padding: 9px 13px 11px; }
}

/* ================================================================
   ★ 2026-06-09: 共有URL閲覧ページ(/#/passport/:token)の固定タブナビ
   マイパスポートの .pp-tabbar と同方式。セレクタのみ専用(.cpt-)。
   ================================================================ */
.cpt-tabbar {
  position: sticky;
  top: 96px;                 /* ヘッダー高さに合わせる(レスポンシブで下記上書き) */
  z-index: 95;
  /* context-bar とタブの間を少し空け、タブ下に本体との余白を作る */
  margin: 8px 0 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light, #E5E7EB);
  box-shadow: 0 2px 10px rgba(14, 19, 32, 0.05);
}
.cpt-tabbar-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 8px 0;
}
.cpt-tabbar-inner::-webkit-scrollbar { display: none; }
.cpt-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-sub, #5F5E5A);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.cpt-tab:hover { color: var(--navy, #0E1320); }
.cpt-tab.active {
  color: var(--teal, #0A8A94);
  border-bottom-color: var(--teal, #0A8A94);
}
.cpt-tab--print {
  margin-left: auto;
  align-self: center;
  border: 1px solid var(--teal, #0A8A94);
  border-radius: 8px;
  color: var(--teal, #0A8A94);
  padding: 6px 14px;
  font-size: 13px;
  white-space: nowrap;
}
/* 2つ目以降の印刷ボタンは、隣接して横並びに（margin-left:autoを上書き） */
.cpt-tab--print + .cpt-tab--print {
  margin-left: 6px;
}
.cpt-tab--print:hover {
  background: var(--teal, #0A8A94);
  color: #fff;
}
.cpt-section { scroll-margin-top: 160px; }
/* 企業閲覧画面（共有URL経路）だけ本文フォントを底上げ 2026-06-18 */
.cpt-section .cp-workexp-view__company { font-size: 19px; }
.cpt-section .cp-workexp-view__title { font-size: 15px; }
.cpt-section .cp-workexp-view__period { font-size: 14px; }
.cpt-section .cp-workexp-view__tag { font-size: 13px; }
.cpt-section .cp-workexp-view__desc { font-size: 16px; }
.cpt-section .cp-workexp-view__card-label { font-size: 13px; }
.cpt-section #cpt-work h3,
.cpt-section .cp-workexp-view h3 { font-size: 22px; }
/* ★ 2026-06-18: 候補者詳細画面(company-passport / pp-section)も同じ基準で
   フォントを統一し、要素ごとのサイズ差（バラバラ感）を解消する。 */
.pp-section .cp-workexp-view__company { font-size: 19px; }
.pp-section .cp-workexp-view__title { font-size: 15px; }
.pp-section .cp-workexp-view__period { font-size: 14px; }
.pp-section .cp-workexp-view__tag { font-size: 13px; }
.pp-section .cp-workexp-view__desc { font-size: 16px; }
.pp-section .cp-workexp-view__card-label { font-size: 13px; }
.pp-section .cp-evaluator-summary-title { font-size: 18px; }
.pp-section .cp-evaluator-summary-sub { font-size: 14px; }
/* ★ 2026-06-18: 候補者詳細画面のAI分析(強みTOP3以降)を他セクションと揃える。
   見出し・本文に階層をつけ、全体に統一サイズを適用。 */
.pp-section #seekerAiReportSection h4 { font-size: 18px !important; }
.pp-section #seekerAiReportSection .ai-item-title { font-size: 16px !important; }
.pp-section #seekerAiReportSection .ai-item-desc { font-size: 15px !important; line-height: 1.8 !important; }
/* ★ 2026-06-18: report_html は印刷向けに大きめフォントで生成されるため、
   画面表示(.ai-report-wrapper)のみ全体を縮小する。PDFは別windowなので無影響。 */
.ai-report-wrapper .ai-report { zoom: 0.85; }
/* ★ 2026-06-18: AI分析の本文を評価コメント本文(.cp-q-comment p = 15px)と
   見た目で揃える。AI分析は zoom:0.85 がかかるため 15/0.85≒18px を指定して一致させる。 */
.ai-report-wrapper .ai-card-desc { font-size: 18px !important; line-height: 1.85 !important; }
.ai-report-wrapper .ai-evidence p,
.ai-report-wrapper .ai-suggest p,
.ai-report-wrapper .ai-immediate-value p,
.ai-report-wrapper .ai-day30 p,
.ai-report-wrapper .ai-q-good p,
.ai-report-wrapper .ai-q-warn p,
.ai-report-wrapper .ai-q-intent,
.ai-report-wrapper .ai-culture-card p,
.ai-report-wrapper .ai-fit-stage p,
.ai-report-wrapper .ai-industry-context p,
.ai-report-wrapper .ai-onboarding-card p,
.ai-report-wrapper .ai-pm-summary,
.ai-report-wrapper .ai-pm-reasons p,
.ai-report-wrapper .ai-pm-reasons li,
.ai-report-wrapper .ai-pm-concerns p,
.ai-report-wrapper .ai-pm-concerns li,
.ai-report-wrapper .ai-pm-focus p,
.ai-report-wrapper .ai-personality-card p,
.ai-report-wrapper .ai-personality-integrated p,
.ai-report-wrapper .ai-personality-insights-body { font-size: 18px !important; line-height: 1.85 !important; }
.ai-report-wrapper .ai-card-title,
.ai-report-wrapper .ai-culture-card h4 { font-size: 21px !important; }
/* 統合解釈の見出しラベルを他のセクション見出し(即戦力業務など)と揃える */
.ai-report-wrapper .ai-personality-insights-label { font-size: 20px !important; font-weight: 700 !important; }
/* ★ 2026-06-18: スコア内訳・合致する理由・懸念点・重み付けの根拠などの小見出しと
   そのSVGアイコンを拡大して、他の見出しと揃える（画面のみ）。 */
.ai-report-wrapper .ai-pm-breakdown h4,
.ai-report-wrapper .ai-pm-reasons h4,
.ai-report-wrapper .ai-pm-concerns h4,
.ai-report-wrapper .ai-pm-focus h4,
.ai-report-wrapper .ai-pm-weighting h4,
.ai-report-wrapper .ai-pm-weighting .ai-pm-weighting-label,
.ai-report-wrapper .ai-evidence-label,
.ai-report-wrapper .ai-suggest-label,
.ai-report-wrapper .ai-immediate-label,
.ai-report-wrapper .ai-day30-label,
.ai-report-wrapper .ai-q-good-label,
.ai-report-wrapper .ai-q-warn-label { font-size: 20px !important; font-weight: 700 !important; }
.ai-report-wrapper .ai-pm-breakdown h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-reasons h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-concerns h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-focus h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-weighting svg.ai-icon-sm,
.ai-report-wrapper .ai-evidence-label svg.ai-icon-sm,
.ai-report-wrapper .ai-suggest-label svg.ai-icon-sm,
.ai-report-wrapper .ai-immediate-label svg.ai-icon-sm,
.ai-report-wrapper .ai-day30-label svg.ai-icon-sm,
.ai-report-wrapper .ai-q-good-label svg.ai-icon-sm,
.ai-report-wrapper .ai-q-warn-label svg.ai-icon-sm,
.ai-report-wrapper .ai-personality-insights-label svg.ai-icon-sm {
  max-width: 19px !important; max-height: 19px !important;
  width: 19px !important; height: 19px !important;
}

/* =====================================================================
 * AI分析カラーリング刷新（案B: 高彩度ソリッド・アクセント / Stripe・Ramp系）
 *   画面表示の .ai-report-wrapper スコープのみ上書き（PDF/別windowは無影響）。
 *   report_html 内蔵styleの淡い配色を、白背景＋濃いティール左帯＋
 *   濃色ベタ白抜きアイコンでメリハリ化。ゴールドは不使用、ティール濃淡で統一。
 *   濃ティール=#076A72 / 標準ティール=#0A8A94 / 淡ティール背景=#DCF1ED
 * =================================================================== */

/* --- カード左帯を太く濃く・全カードで統一（4px / 濃ティール） --- */
.ai-report-wrapper .ai-strength-card,
.ai-report-wrapper .ai-growth-card,
.ai-report-wrapper .ai-personality-card,
.ai-report-wrapper .ai-onboarding-card,
.ai-report-wrapper .ai-culture-card {
  background: #fff !important;
  border: 1px solid #E3E8EE !important;
  border-left: 4px solid #076A72 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* --- 業界別活躍可能性: 淡背景を彩度UP＋濃左帯 --- */
.ai-report-wrapper .ai-industry-context {
  background: #DCF1ED !important;
  border-left: 4px solid #076A72 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* --- 人材像合致カード: 淡グラデを白基調＋濃枠でシャープに --- */
.ai-report-wrapper .ai-pm-card {
  background: #fff !important;
  border: 2px solid #0A8A94 !important;
}

/* --- 統合解釈: 淡背景なら一段濃く（くすみ除去） --- */
.ai-report-wrapper .ai-personality-insights {
  background: #DCF1ED !important;
  border-left: 4px solid #076A72 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* --- 見出しラベルのアイコンを濃色ベタ＋白抜き（案Bの肝） --- */
.ai-report-wrapper .ai-evidence-label svg.ai-icon-sm,
.ai-report-wrapper .ai-suggest-label svg.ai-icon-sm,
.ai-report-wrapper .ai-immediate-label svg.ai-icon-sm,
.ai-report-wrapper .ai-day30-label svg.ai-icon-sm,
.ai-report-wrapper .ai-q-good-label svg.ai-icon-sm,
.ai-report-wrapper .ai-q-warn-label svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-breakdown h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-reasons h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-concerns h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-pm-focus h4 svg.ai-icon-sm,
.ai-report-wrapper .ai-personality-insights-label svg.ai-icon-sm {
  background: #0A8A94 !important;
  color: #fff !important;
  fill: #fff !important;
  border-radius: 6px !important;
  padding: 4px !important;
  box-sizing: content-box !important;
}

/* --- カード番号バッジ（強み/成長の通し番号）を濃ティールで統一 --- */
.ai-report-wrapper .ai-card-num {
  background: #076A72 !important;
}

/* --- カード見出しの文字色をはっきり濃く（淡グレー回避） --- */
.ai-report-wrapper .ai-card-title,
.ai-report-wrapper .ai-culture-card h4,
.ai-report-wrapper .ai-personality-insights-label {
  color: #0E1320 !important;
}

/* --- セクション見出し下のアクセントライン/アイコンを濃ティールへ --- */
.ai-report-wrapper .ai-section-title .ai-icon {
  color: #0A8A94 !important;
}

/* =====================================================================
 * 総合推薦カード（.ai-overall-card）を白基調へ
 *   元はネイビーグラデ＋white文字。これにより内側の白ボックス(.ai-fit-stage)の
 *   <p>が白文字を継承して白背景に白文字で消えていた。カードごと白にして解消。
 * =================================================================== */
.ai-report-wrapper .ai-overall-card {
  background: #fff !important;
  color: #1F2937 !important;
  border: 1px solid #E3E8EE !important;
  border-left: 4px solid #076A72 !important;
  border-radius: 0 12px 12px 0 !important;
}
/* A判定ラベル: 薄ティール #2FB6C0 → 濃ティール */
.ai-report-wrapper .ai-overall-rank {
  color: #076A72 !important;
}
/* 推薦本文（.ai-overall-comment は <p> 要素そのもの・本文直書き）。
   report_html定義は .ai-overall-comment{font-size:15px}。視覚上大きいので縮小。
   card依存を外し .ai-report-wrapper 直下の高特異度で確実に当てる。 */
.ai-report-wrapper p.ai-overall-comment {
  font-size: 18px !important;
  line-height: 1.85 !important;
  color: #1F2937 !important;
}
/* 内側の白ボックス(向いている企業フェーズ)の本文: 白背景に濃文字 */
.ai-report-wrapper .ai-fit-stage {
  background: #DCF1ED !important;
  border: 1px solid #B8E0D9 !important;
  border-left: 4px solid #076A72 !important;
  border-radius: 0 10px 10px 0 !important;
}
.ai-report-wrapper .ai-fit-stage p {
  color: #0a4a44 !important;
}
.ai-report-wrapper .ai-fit-stage h4,
.ai-report-wrapper .ai-fit-stage h4 span {
  color: #076A72 !important;
}
/* フッター注釈: 白前提の点線・文字色を濃グレー系へ */
.ai-report-wrapper .ai-overall-footnote {
  border-top: 1px dashed rgba(15,19,32,0.18) !important;
  color: #6B7280 !important;
}

@media (max-width: 768px) {
  .cpt-tabbar { top: 84px; }
}
@media (max-width: 600px) {
  .cpt-tab { font-size: 13px; padding: 9px 13px 11px; }

  /* ★ 2026-07-06 スマホ: AI分析は印刷共用の大フォント+zoom縮小をやめ、実寸レイアウトに。
     (印刷は企業PCの別経路なので画面表示のみ変更。PCは従来どおり) */
  .ai-report-wrapper .ai-report { zoom: 1 !important; }

  /* 本文: 実寸14.5px。長い英数字(4.8/5, HERO等)で溢れないよう折り返し許可 */
  .ai-report-wrapper .ai-card-desc,
  .ai-report-wrapper .ai-evidence p,
  .ai-report-wrapper .ai-suggest p,
  .ai-report-wrapper .ai-immediate-value p,
  .ai-report-wrapper .ai-day30 p,
  .ai-report-wrapper .ai-q-good p,
  .ai-report-wrapper .ai-q-warn p,
  .ai-report-wrapper .ai-q-intent,
  .ai-report-wrapper .ai-culture-card p,
  .ai-report-wrapper .ai-fit-stage p,
  .ai-report-wrapper .ai-industry-context p,
  .ai-report-wrapper .ai-onboarding-card p,
  .ai-report-wrapper .ai-pm-summary,
  .ai-report-wrapper .ai-pm-reasons p,
  .ai-report-wrapper .ai-pm-reasons li,
  .ai-report-wrapper .ai-pm-concerns p,
  .ai-report-wrapper .ai-pm-concerns li,
  .ai-report-wrapper .ai-pm-focus p,
  .ai-report-wrapper .ai-personality-card p,
  .ai-report-wrapper .ai-personality-integrated p,
  .ai-report-wrapper .ai-personality-insights-body {
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 見出し・ラベル: 実寸に縮小 */
  .ai-report-wrapper .ai-card-title,
  .ai-report-wrapper .ai-culture-card h4 { font-size: 16px !important; }
  .ai-report-wrapper .ai-personality-insights-label,
  .ai-report-wrapper .ai-pm-breakdown h4,
  .ai-report-wrapper .ai-pm-reasons h4,
  .ai-report-wrapper .ai-pm-concerns h4,
  .ai-report-wrapper .ai-pm-focus h4,
  .ai-report-wrapper .ai-pm-weighting h4,
  .ai-report-wrapper .ai-pm-weighting .ai-pm-weighting-label,
  .ai-report-wrapper .ai-evidence-label,
  .ai-report-wrapper .ai-suggest-label,
  .ai-report-wrapper .ai-immediate-label,
  .ai-report-wrapper .ai-day30-label,
  .ai-report-wrapper .ai-q-good-label,
  .ai-report-wrapper .ai-q-warn-label { font-size: 14px !important; }

  /* カード: 余白を詰め、親幅を超えない */
  .ai-report-wrapper .ai-strength-card,
  .ai-report-wrapper .ai-growth-card,
  .ai-report-wrapper .ai-personality-card,
  .ai-report-wrapper .ai-onboarding-card,
  .ai-report-wrapper .ai-culture-card,
  .ai-report-wrapper .ai-industry-context,
  .ai-report-wrapper .ai-pm-card,
  .ai-report-wrapper .ai-personality-insights,
  .ai-report-wrapper .ai-fit-stage {
    padding: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* グリッドは1列に(横並びを解消) + トラックを0まで縮められるように */
  .ai-report-wrapper .ai-personality-grid,
  .ai-report-wrapper .ai-gap-grid,
  .ai-personality-grid,
  .ai-gap-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ラッパー自体のはみ出し保険 */
  .ai-report-wrapper { overflow-x: hidden; }
}
/* ★ sticky タブを効かせるため、このページの company-main は overflow を切らない。
   (横はみ出しは内側の .company-table-wrap 等で吸収される) */
#cptMain { overflow-x: visible; overflow-y: visible; }

/* ★ 2026-06-09: 共有URL閲覧ページのヘッダー固定を確実化。
   #app の fadeIn アニメ(transform)が sticky の containing block を作り
   固定が効かないケースがあるため、ヘッダースロットを sticky で明示する。 */
#tokenLandingHeaderSlot {
  position: sticky;
  top: 0;
  z-index: 200;
}
#tokenLandingHeaderSlot .company-header {
  position: static; /* 親(スロット)側でstickyにするため二重指定を避ける */
}

/* ================================================================
   WHAT IS CARYAKA — 2つの価値セクション（メインビジュアル直下）
   2026-07 追加：数字訴求バーを置換
   ================================================================ */
.lp-whatis { background: #fff; padding: 120px 0 72px; scroll-margin-top: 120px; }
.lp-whatis-head { text-align: center; margin-bottom: 44px; }
.lp-whatis-tag {
  display: inline-block; font-size: 15px; letter-spacing: 2.5px;
  color: var(--c-teal); font-weight: 700; margin-bottom: 16px;
}
.lp-whatis-title {
  font-size: 38px; font-weight: 700; color: var(--navy);
  margin: 0; line-height: 1.45;
}
.lp-whatis-accent { color: var(--c-teal); }
.lp-whatis-lead { font-size: 18px; color: var(--navy-soft); margin: 18px 0 0; }

.lp-whatis-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: stretch; max-width: 980px; margin: 0 auto;
}
.lp-whatis-card {
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  border: 0.5px solid #DCE2E8;
}
.lp-whatis-card-teal { border-color: #B9E0DA; }
.lp-whatis-card-gold { border-color: #E6D3A6; }

.lp-whatis-card-head {
  height: 96px; padding: 0 28px; box-sizing: border-box;
  display: flex; align-items: center; gap: 15px;
}
.lp-whatis-card-teal .lp-whatis-card-head { background: var(--c-teal); }
.lp-whatis-card-gold .lp-whatis-card-head { background: var(--gold); }
.lp-whatis-card-icon {
  width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
}
.lp-whatis-card-icon svg { width: 26px; height: 26px; color: #fff; }
.lp-whatis-card-kicker { font-size: 15px; font-weight: 700; }
.lp-whatis-card-teal .lp-whatis-card-kicker { color: #C4EBE4; }
.lp-whatis-card-gold .lp-whatis-card-kicker { color: #F5E7C4; }
.lp-whatis-card-title { font-size: 23px; font-weight: 700; color: #fff; line-height: 1.3; }

.lp-whatis-card-body {
  flex: 1; padding: 32px 28px;
  display: flex; flex-direction: column;
}
.lp-whatis-card-teal .lp-whatis-card-body { background: #F7FCFB; }
.lp-whatis-card-gold .lp-whatis-card-body { background: #FDFAF2; }
.lp-whatis-card-desc {
  font-size: 16px; line-height: 1.75; margin: 0 0 24px; min-height: 52px;
}
.lp-whatis-card-teal .lp-whatis-card-desc { color: #47585A; }
.lp-whatis-card-gold .lp-whatis-card-desc { color: #5C5236; }

.lp-whatis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.lp-whatis-list li { display: flex; align-items: flex-start; gap: 15px; }
.lp-whatis-list li svg { width: 25px; height: 25px; flex-shrink: 0; margin-top: 1px; }
.lp-whatis-card-teal .lp-whatis-list li svg { color: var(--c-teal); }
.lp-whatis-card-gold .lp-whatis-list li svg { color: var(--gold-deep); }
.lp-whatis-item-title { display: block; font-size: 18px; font-weight: 700; }
.lp-whatis-item-sub { display: block; font-size: 14px; margin-top: 3px; }
.lp-whatis-card-teal .lp-whatis-item-title { color: #12303A; }
.lp-whatis-card-teal .lp-whatis-item-sub { color: #6E8082; }
.lp-whatis-card-gold .lp-whatis-item-title { color: #3A3117; }
.lp-whatis-card-gold .lp-whatis-item-sub { color: #897B57; }

.lp-whatis-note {
  text-align: center; margin: 36px 0 0;
  font-size: 15px; color: var(--navy-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lp-whatis-note-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-teal); display: inline-block;
}

@media (max-width: 768px) {
  .lp-whatis { padding: 100px 0 52px; }
  .lp-whatis-title { font-size: 27px; }
  .lp-whatis-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-whatis-card-desc { min-height: 0; }
  .lp-whatis-note { flex-direction: row; flex-wrap: wrap; }
}

/* ================================================================
   アライアンスLP (#/alliance) — 人材紹介・派遣会社向け
   2026-07-02 新規。lp-系汎用を継承し、固有部分のみ lpa- で定義
   ================================================================ */
.lpa-hero {
  background: var(--navy);
  padding: 104px 0 64px;
  color: #fff;
}
.lpa-hero-inner { max-width: 860px; }
.lpa-hero-tag {
  display: inline-block; font-size: 14px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--c-green);
  border: 1px solid rgba(3,193,205,0.45); border-radius: 999px;
  padding: 7px 18px; margin-bottom: 26px;
}
.lpa-hero h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 46px; font-weight: 600; line-height: 1.4;
  margin: 0 0 24px; color: #fff;
}
.lpa-hero-accent { color: var(--gold-light); }
.lpa-hero-lead {
  font-size: 17px; line-height: 2; color: rgba(255,255,255,0.82);
  margin: 0 0 34px;
}
.lpa-hero-cta { display: flex; gap: 14px; }

.lpa-pain-section { background: #fff; }
.lpa-pain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1020px; margin: 0 auto;
}
.lpa-pain-card {
  background: var(--bg, #F7F8FA); border: 0.5px solid #E3E7ED;
  border-radius: 14px; padding: 30px 26px;
}
.lpa-pain-num {
  font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 700;
  color: var(--c-teal); margin-bottom: 12px;
}
.lpa-pain-title { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 12px; line-height: 1.5; }
.lpa-pain-desc { font-size: 15px; line-height: 1.85; color: var(--navy-soft); margin: 0; }

.lpa-solution-section { background: #F4F8F8; }
.lpa-flow {
  display: flex; align-items: stretch; gap: 14px;
  max-width: 1040px; margin: 0 auto;
}
.lpa-flow-step {
  flex: 1; background: #fff; border: 0.5px solid #D8E4E2;
  border-radius: 14px; padding: 30px 24px; text-align: center;
}
.lpa-flow-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-teal); color: #fff;
  font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.lpa-flow-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.lpa-flow-desc { font-size: 14.5px; line-height: 1.85; color: var(--navy-soft); margin: 0; text-align: left; }
.lpa-flow-arrow {
  display: flex; align-items: center; font-size: 24px; color: var(--c-teal);
  flex-shrink: 0;
}

.lpa-value-section { background: #fff; }
.lpa-value-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1060px; margin: 0 auto;
}
.lpa-value-card {
  border: 0.5px solid #E3E7ED; border-radius: 14px; padding: 34px 28px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(14,19,32,0.05);
}
.lpa-value-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--c-teal-pale); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.lpa-value-icon svg { width: 27px; height: 27px; color: var(--c-teal); }
.lpa-value-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.lpa-value-desc { font-size: 15px; line-height: 1.95; color: var(--navy-soft); margin: 0; }

.lpa-pricing-section { background: #F4F8F8; }
.lpa-pricing-box {
  max-width: 680px; margin: 0 auto; text-align: center;
  background: #fff; border: 0.5px solid #D8E4E2; border-radius: 16px;
  padding: 44px 36px;
}
.lpa-pricing-note { font-size: 16px; color: var(--navy-mid); margin: 0 0 24px; line-height: 1.9; }

@media (max-width: 900px) {
  .lpa-flow { flex-direction: column; }
  .lpa-flow-arrow { transform: rotate(90deg); justify-content: center; margin: -4px 0; }
  .lpa-pain-grid, .lpa-value-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .lpa-hero { padding: 110px 0 60px; }
  .lpa-hero h1 { font-size: 30px; }
  .lpa-hero-lead { font-size: 15px; }
  .lpa-hero-tag { font-size: 12px; letter-spacing: 1px; }
  .lpa-pain-title { font-size: 17px; }
  .lpa-value-title { font-size: 18px; }
}

/* アライアンスLP — 提供形態（キャリアカ/OEM）セクション */
.lpa-model-section { background: #fff; }
.lpa-model-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: stretch; max-width: 1020px; margin: 0 auto;
}
.lpa-model-card {
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  border: 0.5px solid #E3E7ED;
  box-shadow: 0 4px 20px rgba(14,19,32,0.05);
}
.lpa-model-head { padding: 26px 28px 22px; color: #fff; }
.lpa-model-head-teal { background: var(--c-teal); }
.lpa-model-head-gold { background: var(--gold); }
.lpa-model-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  background: rgba(255,255,255,0.2); border-radius: 999px; padding: 4px 14px;
  margin-bottom: 12px;
}
.lpa-model-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.lpa-model-sub { font-size: 14.5px; margin: 0; color: rgba(255,255,255,0.9); line-height: 1.6; }
.lpa-model-body { flex: 1; padding: 26px 28px 28px; display: flex; flex-direction: column; }
.lpa-model-head-teal + .lpa-model-body { background: #F7FCFB; }
.lpa-model-head-gold + .lpa-model-body { background: #FDFAF2; }
.lpa-model-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lpa-model-list li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 1.75; color: var(--navy-mid);
}
.lpa-model-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
}
.lpa-model-head-teal + .lpa-model-body .lpa-model-list li::before { background: var(--c-teal); }
.lpa-model-head-gold + .lpa-model-body .lpa-model-list li::before { background: var(--gold-deep); }
.lpa-model-fit {
  margin: auto 0 0; padding: 14px 16px; border-radius: 10px;
  font-size: 14px; line-height: 1.7; font-weight: 700;
}
.lpa-model-head-teal + .lpa-model-body .lpa-model-fit { background: #E6F4F1; color: #0B5B62; }
.lpa-model-head-gold + .lpa-model-body .lpa-model-fit { background: #F5ECD4; color: #6B5518; }
.lpa-model-note { text-align: center; margin: 30px 0 0; font-size: 15px; color: var(--navy-soft); }

@media (max-width: 900px) {
  .lpa-model-grid { grid-template-columns: 1fr; }
}

/* アライアンスLP — HERO 背景写真型・写真バンド・エージェント機能 */
.lpa-hero-photo {
  position: relative; overflow: hidden;
}
.lpa-hero-bgphoto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
.lpa-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    rgba(14,19,32,0.94) 0%,
    rgba(14,19,32,0.86) 38%,
    rgba(14,19,32,0.55) 62%,
    rgba(14,19,32,0.18) 100%);
}
.lpa-hero-photo .container { position: relative; z-index: 1; }

.lpa-photo-band { position: relative; overflow: hidden; }
.lpa-photo-band img {
  width: 100%; height: 420px; object-fit: cover; display: block;
}
.lpa-photo-card {
  position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
  background: rgba(14,19,32,0.82); color: #fff;
  border-radius: 16px; padding: 30px 34px; max-width: 460px;
  backdrop-filter: blur(4px);
}
.lpa-photo-card-right { left: auto; right: 6%; }
.lpa-photo-tag {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--c-green); margin-bottom: 12px;
}
.lpa-photo-title { font-size: 24px; font-weight: 700; line-height: 1.6; margin: 0; }
.lpa-photo-title .accent { color: var(--gold-light); }

.lpa-features-section { background: #fff; }
.lpa-features-section .lpc-mockup-wrap { max-width: 960px; margin: 0 auto 44px; }
.lpa-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: 960px; margin: 0 auto;
}
.lpa-feature-item {
  display: grid; grid-template-columns: 52px 1fr;
  column-gap: 18px; row-gap: 6px; align-items: start;
  background: #F7FAFB; border: 0.5px solid #E3E9EC;
  border-radius: 14px; padding: 26px 26px;
}
.lpa-feature-item .lpa-feature-icon { grid-row: 1 / span 2; }
.lpa-feature-item .lpa-feature-title { grid-column: 2; }
.lpa-feature-item .lpa-feature-desc { grid-column: 2; }
.lpa-feature-icon {
  width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
  background: var(--c-teal-pale); display: flex; align-items: center; justify-content: center;
}
.lpa-feature-icon svg { width: 25px; height: 25px; color: var(--c-teal); }
.lpa-feature-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.lpa-feature-desc { font-size: 14.5px; line-height: 1.85; color: var(--navy-soft); margin: 0; }

@media (max-width: 900px) {
  .lpa-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lpa-feature-grid { grid-template-columns: 1fr; }
  .lpa-photo-band img { height: 340px; }
  .lpa-photo-card { left: 5%; right: 5%; max-width: none; padding: 24px 26px; }
  .lpa-photo-card-right { left: 5%; }
  .lpa-photo-title { font-size: 20px; }
}


/* アライアンスLP — 登録者メリット（FOR YOUR CANDIDATES） */
.lpa-seeker-section { background: #F4F8F8; }
.lpa-seeker-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px;
  align-items: center; max-width: 1020px; margin: 0 auto;
}
.lpa-seeker-photo img {
  width: 100%; height: 100%; min-height: 380px; object-fit: cover;
  display: block; border-radius: 16px;
}
.lpa-seeker-list { display: flex; flex-direction: column; gap: 22px; }
.lpa-seeker-item {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 18px;
  background: #fff; border: 0.5px solid #D8E4E2;
  border-radius: 14px; padding: 24px 26px;
}
.lpa-seeker-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--c-teal-pale); display: flex; align-items: center; justify-content: center;
}
.lpa-seeker-icon svg { width: 25px; height: 25px; color: var(--c-teal); }
.lpa-seeker-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.lpa-seeker-desc { font-size: 14.5px; line-height: 1.85; color: var(--navy-soft); margin: 0; }

.lpa-runners {
  max-width: 900px; margin: 56px auto 0; text-align: center;
  background: #fff; border: 0.5px solid #D8E4E2; border-radius: 18px;
  padding: 40px 32px 34px;
}
.lpa-runners img { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.lpa-runners-copy {
  margin: 26px 0 0; font-size: 19px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .lpa-seeker-grid { grid-template-columns: 1fr; gap: 24px; }
  .lpa-seeker-photo img { min-height: 260px; }
  .lpa-hero-bgphoto { object-position: 78% center; }
  .lpa-runners-copy { font-size: 16px; }
}