/* ============================================================
 * readable.css - V3.7 全画面・全デバイス読みやすさ統一
 *
 * 思想:
 *   - 40-60代事業者・老眼世代対応（pitch/investor-deckと同水準）
 *   - スマホでも明瞭。iOSの自動ズーム回避（input ≧16px）
 *   - WCAG AAA タッチターゲット最小48px
 *   - 既存style.css/各HTMLの inline style を !important で上書き
 *
 * 適用方法:
 *   - nav.js が body 直後に <link> を自動注入
 *   - my-login など nav.js 非搭載ページは個別に <link> を追加
 * ============================================================ */

:root {
  /* PC ベースライン（pitch.html の caption=18px を最小値の指標に） */
  --r-base: 18px;
  --r-h1: 28px;
  --r-h2: 22px;
  --r-h3: 20px;
  --r-emphasis: 21px;
  --r-small: 16px;     /* "細かい字" の下限。これより小さくしない */
  --r-button: 18px;
  --r-input: 18px;     /* iOS Safari は 16px 未満で自動ズームするため必ず 16以上 */
  --r-touch: 48px;     /* タッチターゲット最小 */
  --r-line: 1.65;
  --r-line-tight: 1.35;
}

/* スマホ（縦持ち想定） */
@media (max-width: 720px) {
  :root {
    --r-base: 19px;
    --r-h1: 26px;
    --r-h2: 21px;
    --r-h3: 19px;
    --r-emphasis: 20px;
    --r-small: 16px;
    --r-button: 19px;
    --r-input: 18px;
    --r-line: 1.7;
  }
}

/* ============================================================ */
/* 基本タイポ */
/* ============================================================ */
body {
  font-size: var(--r-base) !important;
  line-height: var(--r-line) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1 { font-size: var(--r-h1) !important; line-height: var(--r-line-tight) !important; }
h2 { font-size: var(--r-h2) !important; line-height: var(--r-line-tight) !important; }
h3 { font-size: var(--r-h3) !important; line-height: 1.4 !important; }
h4, h5, h6 { font-size: var(--r-emphasis) !important; line-height: 1.4 !important; }

/* ============================================================ */
/* テキスト類: small / caption / .lbl などの小さい要素を底上げ */
/* ============================================================ */
small,
.small,
.subtitle,
.footer,
.caption,
.note,
.hint,
.lbl,
.muted,
.opacity-half {
  font-size: var(--r-small) !important;
}

p, li, dd, dt { font-size: var(--r-base) !important; line-height: var(--r-line) !important; }

/* ============================================================ */
/* フォーム要素: タッチ最適化 + iOS自動ズーム回避 */
/* ============================================================ */
input,
select,
textarea {
  font-size: var(--r-input) !important;
  min-height: var(--r-touch);
  font-family: inherit;
}

input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"] {
  font-size: var(--r-input) !important;
  padding: 10px 12px !important;
}

textarea { min-height: 80px; padding: 10px 12px !important; }

button,
.btn,
input[type="button"],
input[type="submit"] {
  font-size: var(--r-button) !important;
  min-height: var(--r-touch);
  padding: 11px 18px !important;
  cursor: pointer;
}

button.primary,
.btn.big,
.btn.primary {
  font-size: var(--r-button) !important;
  padding: 14px 22px !important;
  font-weight: 700;
}

/* ============================================================ */
/* テーブル: スマホで横スクロール許可 / セルの読みやすさ */
/* ============================================================ */
table th,
table td {
  font-size: var(--r-small) !important;
  padding: 10px 12px !important;
}
table.detail th,
table.detail td,
table.payroll-table th,
table.payroll-table td {
  font-size: var(--r-small) !important;
  padding: 10px 12px !important;
}

@media (max-width: 720px) {
  /* スマホでテーブルが画面はみ出すなら横スクロールに（消失防止） */
  .table-wrap,
  div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
  table.detail,
  table.payroll-table {
    min-width: 600px;
  }
}

/* ============================================================ */
/* グローバルナビ（nav.js）: スマホで読みやすく */
/* ============================================================ */
@media (max-width: 720px) {
  .gnav-brand { font-size: 14px !important; padding: 12px 10px !important; }
  .gnav-brand .small { display: none; }
  .gnav-item { padding: 14px 12px !important; font-size: 14px !important; min-height: var(--r-touch); }
  .gnav-item .ic { font-size: 16px !important; }
  .gnav-meta { display: none !important; }
}

/* ============================================================ */
/* 受電画面 (style.css)・my-page・manager-dashboard 個別ねじ込み */
/* ============================================================ */

/* 受電画面パネル */
.panel { font-size: var(--r-base) !important; }
.panel h2 { font-size: var(--r-h3) !important; }
.panel .lbl { font-size: var(--r-small) !important; }
.panel .radios .radio,
.panel .chip { font-size: var(--r-small) !important; padding: 8px 14px !important; min-height: 40px; }
.panel .preview { font-size: var(--r-small) !important; padding: 11px 13px; }
.panel .talk-box { font-size: var(--r-small) !important; }
.panel .talk-box .talk-script { font-size: var(--r-small) !important; }

/* ダッシュボード KPIカード */
.kpi-card .label,
.kpi-label { font-size: var(--r-small) !important; }
.kpi-card .value,
.kpi-value { font-size: var(--r-h2) !important; font-weight: 800 !important; }

/* マイページ income / mini-card */
.income-card .label { font-size: var(--r-base) !important; }
.income-card .amount { font-size: 36px !important; line-height: 1.1 !important; }
.income-card .sub { font-size: var(--r-small) !important; }
.mini-card .l { font-size: 13px !important; }
.mini-card .a { font-size: var(--r-h3) !important; }
.mini-card .c { font-size: 13px !important; }

/* 月次目標バー */
.target-progress .text { font-size: var(--r-small) !important; }
.quick-buttons button { font-size: var(--r-small) !important; padding: 13px !important; min-height: var(--r-touch); }

/* マネージャーダッシュボード */
.alert-card .alert-title { font-size: var(--r-base) !important; }
.alert-card .alert-body { font-size: var(--r-small) !important; }

/* ============================================================ */
/* スマホ: 経営DB (dashboard.html) 既存PCレイアウト崩壊防止 */
/* ============================================================ */
@media (max-width: 720px) {
  /* 横並びの grid-template-columns:repeat(N,1fr) を縦積みに */
  body [style*="grid-template-columns: repeat(2"],
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns: repeat(4"],
  body [style*="grid-template-columns: repeat(5"],
  body [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* セクション間のpadding確保 */
  body main,
  body .my-grid,
  body .container { padding: 12px !important; }
  /* topbar-mini（マイページ） */
  .topbar-mini { padding: 14px 16px !important; }
  .topbar-mini h1 { font-size: var(--r-h3) !important; }
  .topbar-mini .user { font-size: var(--r-small) !important; }
  .logout-btn { min-height: 40px; }
}

/* ============================================================ */
/* ピッチLP (pitch.html) スマホでの「ヒドさ」修正 */
/* ============================================================ */
@media (max-width: 720px) {
  /* hero badge / position の文字をもう一段大きく */
  .hero h1 { font-size: 32px !important; line-height: 1.25 !important; }
  .hero .badge { font-size: 17px !important; padding: 9px 18px !important; }
  .hero .position { font-size: 20px !important; }
  /* セクション本文 */
  .section h2 { font-size: 24px !important; }
  .section p,
  .section li { font-size: 18px !important; line-height: 1.7 !important; }
  /* CTA ボタン */
  .cta-btn,
  .btn-cta { font-size: 19px !important; padding: 16px 24px !important; min-height: 56px; }
  /* カードパディング */
  .card,
  section.card { padding: 18px 16px !important; }
}

/* ============================================================ */
/* スマホで input の auto-zoom 回避（再強調） */
/* ============================================================ */
@media (max-width: 720px) {
  input, select, textarea, button {
    font-size: 16px !important;  /* 16px未満で iOS Safari がズームインする仕様 */
  }
  /* 重要なボタンは19px維持 */
  button.primary,
  .btn.big,
  .btn.primary,
  button[type="submit"] { font-size: 19px !important; }
}

/* ============================================================ */
/* dashboard.html (経営DB) 個別強化：縦書き13-15pxを底上げ */
/* ============================================================ */
.topnav,
.topnav h1 .sub,
.filter-bar,
.filter-bar .right { font-size: var(--r-small) !important; }

.topnav h1 { font-size: var(--r-h2) !important; }

.kpi .tag { font-size: 13px !important; letter-spacing: 0.06em; }
.kpi .label { font-size: var(--r-base) !important; font-weight: 700 !important; }
.kpi .ico { font-size: 19px !important; }
.kpi .value { font-size: 34px !important; font-weight: 800 !important; line-height: 1.1; }
.kpi .sub { font-size: var(--r-small) !important; }
.kpi .formula { font-size: 14px !important; }

.card-head h2 { font-size: var(--r-h3) !important; font-weight: 800 !important; }
.card-head .badge { font-size: 14px !important; padding: 4px 12px !important; }

table { font-size: var(--r-small) !important; }
th { font-size: 14px !important; padding: 12px 10px !important; letter-spacing: 0.04em; }
td { padding: 11px 10px !important; }

.tier-badge,
.status-pill { font-size: 14px !important; padding: 4px 11px !important; font-weight: 700 !important; }

.funnel-label { font-size: var(--r-base) !important; }
.funnel-bar { font-size: var(--r-small) !important; }
.funnel-num { font-size: var(--r-h3) !important; }
.funnel-rate, .funnel-drop { font-size: 14px !important; }

.view-tab { font-size: var(--r-small) !important; padding: 11px 16px !important; min-height: 44px; font-weight: 700 !important; }
.view-tab .badge-num { font-size: 13px !important; padding: 2px 9px !important; }

/* 経営DB のフィルタバー・ボタンを大きく */
.filter-bar button,
.filter-bar select,
.filter-bar .btn { font-size: var(--r-small) !important; padding: 9px 14px !important; min-height: 40px; }

/* スマホ専用：経営DB カラムを縦積みで読みやすく */
@media (max-width: 720px) {
  .topnav h1 .sub { display: block; margin-top: 4px; font-size: 13px !important; }
  .kpi { padding: 14px 16px !important; }
  .kpi .value { font-size: 30px !important; }
  /* テーブルが溢れる場合は横スクロール */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }
  /* グリッド2カラムを1カラム強制 */
  .grid-2, .grid-3, .sim-grid { grid-template-columns: 1fr !important; }
  /* フィルタバー縦並び */
  .filter-bar { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ============================================================ */
/* 加盟店ピッチLP (pitch.html) のスマホ強化 */
/* ============================================================ */
@media (max-width: 720px) {
  /* ヒーローセクション */
  .hero,
  section.hero,
  .pitch-hero { padding: 28px 18px !important; }
  /* ボディ全般・li / p */
  body > main > section p,
  body > main > section li,
  .pitch-section p,
  .pitch-section li { font-size: 18px !important; line-height: 1.75 !important; }
  /* 見出し */
  body > main > section h2,
  .pitch-section h2 { font-size: 26px !important; line-height: 1.3 !important; margin-bottom: 14px !important; }
  body > main > section h3,
  .pitch-section h3 { font-size: 21px !important; margin-bottom: 10px !important; }
  /* 数字・KPI */
  .stat-value,
  .kpi-num,
  .big-number { font-size: 36px !important; }
  /* CTAボタン */
  .cta,
  .btn-cta,
  a.cta-btn,
  button.cta-btn { font-size: 19px !important; padding: 18px 28px !important; min-height: 60px; font-weight: 800 !important; }
  /* card padding */
  .pitch-card,
  .partner-card { padding: 20px 16px !important; }
  /* 表組み（料金表など） */
  .price-table th,
  .price-table td { font-size: 16px !important; padding: 10px 8px !important; }
}

/* ============================================================ */
/* 投資家ピッチデッキ (investor-deck.html) スマホ */
/* ============================================================ */
@media (max-width: 720px) {
  .deck-slide,
  .slide { padding: 28px 18px !important; }
  .slide h1 { font-size: 30px !important; }
  .slide h2 { font-size: 24px !important; }
  .slide p, .slide li { font-size: 18px !important; line-height: 1.7 !important; }
}

/* ============================================================ */
/* ログイン画面（my-login）特別強化 */
/* ============================================================ */
.login-card { max-width: 420px !important; padding: 32px 28px !important; }
.login-card h1 { font-size: 24px !important; margin-bottom: 8px !important; }
.login-card .subtitle { font-size: var(--r-small) !important; margin-bottom: 24px !important; }
.login-card label { font-size: var(--r-small) !important; margin-top: 16px !important; margin-bottom: 6px !important; }
.login-card input { font-size: 18px !important; padding: 13px 14px !important; min-height: 50px; }
.login-card button.primary { font-size: 19px !important; padding: 15px !important; min-height: 54px; margin-top: 22px !important; }
.login-card .role-info { font-size: var(--r-small) !important; line-height: 1.7 !important; padding: 12px 14px !important; }
.login-card .footer { font-size: 14px !important; }
.login-card .msg { font-size: var(--r-small) !important; padding: 12px !important; }

@media (max-width: 720px) {
  .login-card { margin: 0 14px; padding: 28px 22px !important; }
}

/* ============================================================ */
/* role-switch（ロール切替UI）フォント */
/* ============================================================ */
.role-card h2 { font-size: var(--r-h2) !important; }
.role-card p { font-size: var(--r-base) !important; }
.role-card .role-btn { font-size: var(--r-button) !important; padding: 14px 22px !important; min-height: 54px; }

/* ============================================================
 * V3.8 Mobile Rescue Layer（pitch / investor-deck / CRM 共通救済）
 *   川上指示（2026-04-29）：「モバイルUXが壊滅的」「業者はPC持っていない」
 *   - 横幅オーバー完全防止（overflow-x hidden を全ページに）
 *   - 固定幅(.container max-width) を 100% へ強制
 *   - inline grid-template-columns 多列を縦積み化
 *   - 異様に縦長になる原因（min-height/height固定）を解除
 *   - タッチ48px最低・SP19pxフォント基準（V3.7）厳守
 * ============================================================ */
@media (max-width: 768px) {
  /* === 横方向オーバー防止：全ページ共通 === */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* 固定幅コンテナを 100% へ */
  body .container,
  body main,
  body .my-grid,
  body .mgr-grid,
  body .deck,
  body .layout,
  body .call-grid {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* 画像・iframe・videoが画面はみ出ないように */
  img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto;
  }
  /* テーブルは横スクロール許可（縦詰めで非可読化を回避） */
  table { max-width: 100%; }

  /* === 多列inline gridを縦積み1カラムに強制（2026-05-01 川上代表指摘反映） ===
   * 旧版は 2列残しだったが、スマホ実機で 2カラム表示=読みづらい・幅狭との指摘
   * 768px以下では全ての多列inline gridを 1fr 強制で縦積みに統一 */
  body [style*="grid-template-columns:1fr 1fr"],
  body [style*="grid-template-columns: 1fr 1fr"],
  body [style*="grid-template-columns:repeat(2"],
  body [style*="grid-template-columns: repeat(2"],
  body [style*="grid-template-columns:repeat(3"],
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns:repeat(4"],
  body [style*="grid-template-columns: repeat(4"],
  body [style*="grid-template-columns:repeat(5"],
  body [style*="grid-template-columns: repeat(5"],
  body [style*="grid-template-columns:repeat(6"],
  body [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* 3要素 column 系 (160px 1fr 100px 80px / 140px 1fr 90px) を縦積み */
  body [style*="grid-template-columns:160px"],
  body [style*="grid-template-columns: 160px"],
  body [style*="grid-template-columns:140px"],
  body [style*="grid-template-columns: 140px"],
  body [style*="grid-template-columns:360px"],
  body [style*="grid-template-columns: 360px"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* === 巨大フォントの上限ガード（投資家deck等） === */
  body .big-number,
  body [style*="font-size:96px"],
  body [style*="font-size: 96px"],
  body [style*="font-size:72px"],
  body [style*="font-size: 72px"],
  body [style*="font-size:60px"],
  body [style*="font-size: 60px"],
  body [style*="font-size:52px"],
  body [style*="font-size: 52px"],
  body [style*="font-size:48px"],
  body [style*="font-size: 48px"],
  body [style*="font-size:42px"],
  body [style*="font-size: 42px"] {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
  /* h1 は最大32pxに */
  body h1[style*="font-size"] { font-size: 28px !important; }

  /* === 異常に縦長を解除（固定heightをautoに） === */
  body [style*="height:540px"],
  body [style*="height: 540px"],
  body [style*="height:480px"],
  body [style*="height: 480px"],
  body [style*="height:320px"],
  body [style*="height: 320px"] {
    height: auto !important;
    min-height: 280px;
  }

  /* ============================================================
   * 🎨 モダンUI化（2026-05-01 川上代表指摘反映）
   * 「太すぎる枠線」を細く・シンプルに・今っぽいデザイン
   *   - border 3px / 2px → 1px に統一
   *   - 角丸 14-16px → 10px（今風フラット）
   *   - 二重 box-shadow を控えめに
   * ============================================================ */
  body [style*="border:3px"],
  body [style*="border: 3px"],
  body [style*="border-width:3px"],
  body [style*="border-width: 3px"],
  body [style*="border:2px"],
  body [style*="border: 2px"],
  body [style*="border-width:2px"],
  body [style*="border-width: 2px"] {
    border-width: 1px !important;
  }
  body [style*="border-left:6px"],
  body [style*="border-left: 6px"],
  body [style*="border-left:5px"],
  body [style*="border-left: 5px"],
  body [style*="border-left:4px"],
  body [style*="border-left: 4px"] {
    border-left-width: 3px !important;
  }
  body [style*="border-radius:14px"],
  body [style*="border-radius: 14px"],
  body [style*="border-radius:16px"],
  body [style*="border-radius: 16px"] {
    border-radius: 10px !important;
  }
  body [style*="box-shadow:0 8px 24px"],
  body [style*="box-shadow: 0 8px 24px"],
  body [style*="box-shadow:0 12px 32px"],
  body [style*="box-shadow: 0 12px 32px"] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  }
  /* ============================================================
   * 🎨 完全フラット化（2026-05-01 川上代表確定 A案）
   *   フラットデザインは線をほとんど使わない。
   *   .panel および内部 div の border / shadow を完全削除。
   *   情報グルーピングは background-color と余白・フォント階層で表現。
   *   ボタン・select 等の interactive 要素の border は除外（タップ可能 affordance 維持）。
   * ============================================================ */
  body .panel {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
  }
  /* panel 内の div の border 完全削除（select/button/a/input/textarea は対象外） */
  body .panel div[style*="border:"],
  body .panel div[style*="border-left:"],
  body .panel div[style*="border-top:"],
  body .panel div[style*="border-bottom:"],
  body .panel div[style*="border-right:"] {
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
  }
  /* クラスベースの構造カードも border 削除（コスト比較 .cmp-block 等） */
  body .cmp-block,
  body .cmp-card,
  body .scenario,
  body .summary-card,
  body .step,
  body .hero,
  body .killer,
  body .faq-a,
  body .panel,
  body .container,
  body .compare-card,
  body .cta,
  body main {
    border: none !important;
    box-shadow: none !important;
  }
  /* 全 border-left の装飾アクセント削除（FV左金色線・各カード左色線等） */
  body [style*="border-left"] {
    border-left: none !important;
  }

  /* ============================================================
   * 🎨 配色ミニマル統一（2026-05-01 川上代表指摘反映）
   * 多色背景 → ダークネイビー1色統一
   * 多色文字 → ゴールド + 赤(危険) + 緑(肯定) + 白の4色のみ
   * ブランドアクセント＝ゴールド1色を死守し、それ以外をシンプルに
   * ============================================================ */
  /* 多彩背景（紫・赤・緑・暖色グラデーション）を全部ダークネイビーに統一 */
  body [style*="background:linear-gradient(135deg,#1e293b,#2d1414"],
  body [style*="background: linear-gradient(135deg, #1e293b, #2d1414"],
  body [style*="background:linear-gradient(135deg,#1e293b,#292524"],
  body [style*="background: linear-gradient(135deg, #1e293b, #292524"],
  body [style*="background:linear-gradient(135deg,#451a03"],
  body [style*="background: linear-gradient(135deg, #451a03"],
  body [style*="background:linear-gradient(135deg,#0f172a,#1e293b"],
  body [style*="background: linear-gradient(135deg, #0f172a, #1e293b"],
  body [style*="background:linear-gradient"] {
    background: #1e293b !important;
    background-image: none !important;
  }
  /* 明色背景（ライトカラー系：薄黄・薄緑・薄赤）を半透明白で統一 */
  body [style*="background:#dcfce7"],
  body [style*="background: #dcfce7"],
  body [style*="background:#bbf7d0"],
  body [style*="background: #bbf7d0"],
  body [style*="background:#fee2e2"],
  body [style*="background: #fee2e2"],
  body [style*="background:#fef3c7"],
  body [style*="background: #fef3c7"],
  body [style*="background:#fde68a"],
  body [style*="background: #fde68a"] {
    background: rgba(255,255,255,0.04) !important;
    background-image: none !important;
  }
  /* 文字色も統一：赤系→fca5a5 / 緑系→86efac / 黄系→fde68a */
  body [style*="color:#dc2626"],
  body [style*="color: #dc2626"],
  body [style*="color:#ef4444"],
  body [style*="color: #ef4444"],
  body [style*="color:#7f1d1d"],
  body [style*="color: #7f1d1d"] {
    color: #fca5a5 !important;
  }
  body [style*="color:#15803d"],
  body [style*="color: #15803d"],
  body [style*="color:#16a34a"],
  body [style*="color: #16a34a"],
  body [style*="color:#22c55e"],
  body [style*="color: #22c55e"],
  body [style*="color:#059669"],
  body [style*="color: #059669"],
  body [style*="color:#064e3b"],
  body [style*="color: #064e3b"] {
    color: #86efac !important;
  }
  body [style*="color:#facc15"],
  body [style*="color: #facc15"],
  body [style*="color:#f59e0b"],
  body [style*="color: #f59e0b"],
  body [style*="color:#b45309"],
  body [style*="color: #b45309"],
  body [style*="color:#92400e"],
  body [style*="color: #92400e"],
  body [style*="color:#78350f"],
  body [style*="color: #78350f"] {
    color: #fde68a !important;
  }
  /* ボタン・CTA ・ select は色を維持（タップ可能 affordance） */
  body button[style*="color"],
  body select[style*="color"],
  body a.cta-button,
  body a[class*="cta"] {
    color: revert !important;
  }

  /* ============================================================
   * 🎯 シニア向けスマホ最適化（2026-05-01 ディープサーチ確定値）
   *   WCAG AAA / 50代以上推奨に基づく font-size + 背景色階層 + 行間
   *   - 本文 18px（AAA・50代以上推奨ベースライン）
   *   - 行間 1.7（1.5-1.8 中央値）
   *   - 背景3層（#0a0f1a / #1a2438 / #283042・明度差で識別可能）
   *   - コントラスト 7:1 以上を確保
   * ============================================================ */
  body { font-size: 18px !important; line-height: 1.7 !important; background-color: #0a0f1a !important; }
  body .panel { background-color: #1a2438 !important; }
  body .panel div[style*="background"]:not([style*="linear-gradient"]) { background-color: #283042 !important; }
  /* 本文要素の最低 18px ガード（インラインで 13-17px が指定されていても底上げ） */
  body p, body li, body td, body span:not([class*="badge"]):not([class*="tag"]):not([class*="num"]) {
    font-size: 18px !important;
  }
  /* 補足・キャプションは 16px まで許容 */
  body [class*="hint"], body [class*="caption"], body [class*="legal"], body [class*="micro"], body [class*="supplement"] {
    font-size: 16px !important;
  }
  /* 見出し H2/H3 を強化 */
  body h2 { font-size: 26px !important; line-height: 1.4 !important; }
  body h3 { font-size: 22px !important; line-height: 1.4 !important; }
  /* font-size インライン 11-17px を 18px に底上げ（補足クラス除く） */
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:11px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:12px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:13px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:14px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:15px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:16px"],
  body :not([class*="hint"]):not([class*="caption"]):not([class*="legal"]):not([class*="micro"]):not([class*="supplement"])[style*="font-size:17px"] {
    font-size: 18px !important;
  }

  /* === 大きな padding を縮小（カード／ヒーローが画面ほぼ全部になる現象を回避） === */
  body [style*="padding:100px"],
  body [style*="padding: 100px"],
  body [style*="padding:80px"],
  body [style*="padding: 80px"],
  body [style*="padding:56px"],
  body [style*="padding: 56px"],
  body [style*="padding:44px"],
  body [style*="padding: 44px"],
  body [style*="padding:40px"],
  body [style*="padding: 40px"],
  body [style*="padding:36px"],
  body [style*="padding: 36px"],
  body [style*="padding:32px"],
  body [style*="padding: 32px"] {
    padding: 20px 14px !important;
  }

  /* === ナビゲーション/ボタンのタッチターゲット保証（48px） === */
  a.nav-btn, .nav-links a, .gnav-item, .view-tab,
  button, .btn, [role="button"] {
    min-height: var(--r-touch);
  }
}

/* ============================================================
 * 投資家deck（investor-deck.html）スマホ救済：固定スライドUI解除
 *   現状：width:100vw height:100vh overflow:hidden で画面占有
 *   モバイル：縦スクロール許可・slideをautoサイズ・全スライド表示
 * ============================================================ */
@media (max-width: 768px) {
  html:has(.deck), body:has(.deck) {
    height: auto !important;
    overflow: auto !important;
  }
  .deck {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }
  .slide {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 24px 16px !important;
    margin-bottom: 16px;
    border-bottom: 4px solid var(--brand-400, #facc15);
  }
  .slide.hero { padding: 40px 16px !important; }
  .slide h1 { font-size: 28px !important; line-height: 1.3 !important; }
  .slide h2 { font-size: 22px !important; }
  .slide h3 { font-size: 19px !important; }
  .slide p, .slide li { font-size: 18px !important; line-height: 1.7 !important; }
  .slide .big-number { font-size: 40px !important; line-height: 1.1 !important; }
  .slide-tag { font-size: 14px !important; padding: 6px 12px !important; }
  .slide-num { font-size: 13px !important; bottom: 8px !important; right: 14px !important; }
  /* SWOT 2x2 → 縦積み */
  .swot { grid-template-columns: 1fr !important; height: auto !important; }
  .swot-quad { padding: 16px !important; }
  /* バーチャート：高さ抑制 */
  .bar-chart { height: 200px !important; padding: 12px !important; gap: 8px !important; }
  .bar-chart .bar-fill .val { font-size: 13px !important; top: -28px !important; }
  .bar-chart .bar-label { font-size: 13px !important; }
  /* ナビ：固定底でタッチしやすく */
  .nav { gap: 8px !important; bottom: 8px !important; }
  .nav button { padding: 10px 14px !important; font-size: 14px !important; }
  .nav .indicator { font-size: 13px !important; }
  /* 絶対配置のポジショニングマップ系：相対配置に */
  .slide [style*="position:absolute"][style*="width:160px"],
  .slide [style*="position:absolute"][style*="width:180px"],
  .slide [style*="position:absolute"][style*="width:200px"] {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 8px;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  .slide [style*="position:relative"][style*="height:480px"] {
    height: auto !important;
    background: transparent !important;
    border: none !important;
  }
  /* 軸ラベル（縦書き）の transform を無効化 */
  .slide [style*="transform:translateY(-50%) rotate(-90deg)"],
  .slide [style*="transform:translateY(-50%) rotate(90deg)"] {
    display: none !important;
  }
}

/* ============================================================
 * 加盟店ピッチ（pitch.html）スマホ追加救済
 * ============================================================ */
@media (max-width: 768px) {
  /* container のpadding縮小 */
  body > .container { padding: 14px !important; }
  /* hero padding 縮小 */
  .hero { padding: 30px 16px !important; margin-bottom: 28px !important; }
  .hero .badge { font-size: 14px !important; padding: 7px 14px !important; line-height: 1.4 !important; display: inline-block; max-width: 100%; white-space: normal !important; }
  .hero h1 { font-size: 26px !important; line-height: 1.3 !important; }
  .hero .position { font-size: 17px !important; }
  /* ヒーロー内インラインの巨大フォント上書き */
  .hero [style*="font-size:30px"],
  .hero [style*="font-size: 30px"],
  .hero [style*="font-size:28px"],
  .hero [style*="font-size: 28px"],
  .hero [style*="font-size:26px"],
  .hero [style*="font-size: 26px"] {
    font-size: 19px !important;
  }
  .hero [style*="font-size:24px"],
  .hero [style*="font-size: 24px"],
  .hero [style*="font-size:22px"],
  .hero [style*="font-size: 22px"],
  .hero [style*="font-size:21px"],
  .hero [style*="font-size: 21px"],
  .hero [style*="font-size:20px"],
  .hero [style*="font-size: 20px"],
  .hero [style*="font-size:19px"] {
    font-size: 16px !important;
  }
  /* CTA 大ボタン群（hero 下のリンク） */
  .hero a[style*="padding:20px"],
  .hero a[style*="padding: 20px"] {
    padding: 14px 20px !important;
    font-size: 16px !important;
    width: 100%;
    text-align: center;
  }
  /* CTA セクション */
  .cta { padding: 28px 18px !important; }
  .cta h2 { font-size: 22px !important; }
  .cta p { font-size: 16px !important; }
  .cta a { padding: 14px 22px !important; font-size: 17px !important; width: 100%; box-sizing: border-box; }
  /* 比較カード5列：完全縦積み */
  .cmp-grid { grid-template-columns: 1fr !important; }
  .cmp-card { padding: 14px 12px !important; }
  /* compare-card .big を抑制 */
  .compare-card .big { font-size: 30px !important; }
  /* calc-box 計算ブロック */
  .calc-box { padding: 18px 14px !important; }
  .calc-box input[type=number], .calc-box select { padding: 11px 12px !important; font-size: 17px !important; }
  .calc-box .total { padding: 13px 16px !important; font-size: 17px !important; flex-wrap: wrap !important; gap: 6px; }
  /* killer ハイライト */
  .killer { font-size: 17px !important; padding: 14px 16px !important; }
  /* faq */
  .faq-q { font-size: 18px !important; }
  .faq-a { font-size: 15px !important; padding-left: 14px !important; }
  /* floating CTA: 重なり防止＋タップしやすく */
  .floating-cta { right: 10px !important; bottom: 10px !important; padding: 10px 14px 10px 10px !important; }
  /* インライン span / b / 強調装飾の上限 */
  .container [style*="font-size:42px"],
  .container [style*="font-size: 42px"],
  .container [style*="font-size:48px"],
  .container [style*="font-size: 48px"] {
    font-size: 30px !important;
  }
}

/* ============================================================
 * /my-page（オペマイページ）スマホ追加救済
 * ============================================================ */
@media (max-width: 768px) {
  .topbar-mini { flex-wrap: wrap; gap: 8px; padding: 12px 14px !important; }
  .topbar-mini > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .income-card { padding: 18px !important; }
  .income-card .amount { font-size: 32px !important; }
  /* summary-row 4列 → 2列 */
  .summary-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* wh-input-row 横並び → 縦積み */
  .wh-input-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .wh-input-row > div { width: 100% !important; }
  .wh-input-row input,
  .wh-input-row button { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  .wh-summary { grid-template-columns: 1fr !important; }
  /* rank-card */
  .rank-card { padding: 16px !important; }
  .rank-card .rank-key { font-size: 30px !important; }
  .rank-card .rank-rates { flex-wrap: wrap; gap: 8px !important; }
  /* quick-buttons：1列に */
  .quick-buttons { grid-template-columns: 1fr !important; }
  .quick-buttons button { font-size: 14px !important; padding: 12px 14px !important; }
  /* detail テーブル横スクロール */
  table.detail { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ============================================================
 * /manager-dashboard 統括スマホ追加救済
 * ============================================================ */
@media (max-width: 768px) {
  .topbar-mgr { padding: 10px 14px !important; gap: 8px !important; }
  .topbar-mgr h1 { font-size: 16px !important; flex: 1 1 100%; }
  .topbar-mgr .meta { width: 100%; flex-wrap: wrap; gap: 6px !important; }
  .topbar-mgr a, .topbar-mgr button { font-size: 13px !important; padding: 8px 12px !important; min-height: 40px; }
  /* KPI 5列 → 2列 */
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-card { padding: 12px 14px !important; }
  .kpi-card .kpi-value { font-size: 20px !important; }
  /* payroll table 12カラム：横スクロール許可（min-widthで強制） */
  .payroll-table { min-width: 880px; }
  /* テーブル外側 div[overflow-x] を強化 */
  .card div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
  /* alerts カード内余白縮小 */
  .alert-card { padding: 10px 12px !important; }
  /* payroll-area 内の 4カラム summary を 2カラムに */
  #payroll-area [style*="grid-template-columns:repeat(4,1fr)"],
  #payroll-area [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #payroll-area [style*="grid-template-columns:repeat(3,1fr)"],
  #payroll-area [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
 * /dashboard 経営DBスマホ追加救済
 * ============================================================ */
@media (max-width: 768px) {
  .topnav { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
  .topnav h1 { font-size: 16px !important; flex: 1 1 100%; }
  .nav-links { width: 100%; flex-wrap: wrap; gap: 6px !important; }
  .nav-links a { font-size: 13px !important; padding: 8px 12px !important; min-height: 40px; }
  .container { padding: 14px !important; gap: 12px !important; }
  /* KPI: minmax 220px → minmax 150px */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi { padding: 12px 14px !important; }
  .kpi .value { font-size: 24px !important; }
  /* funnel-stage 4列 → 縦積み */
  .funnel-stage {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--border, #e2e8f0);
  }
  .funnel-bar { height: 26px !important; }
  .funnel-num, .funnel-rate, .funnel-drop { text-align: left !important; }
  /* heatmap 24列 → 12列 */
  .heatmap, .heat-axis { grid-template-columns: repeat(12, 1fr) !important; }
  .heat-cell .h, .heat-cell .v { font-size: 9px !important; }
  /* sim-row 3列 → 縦積み */
  .sim-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .sim-input-num { width: 100% !important; }
  /* tab スクロール */
  .view-tabs { padding: 0 8px !important; -webkit-overflow-scrolling: touch; }
  /* card 内テーブル横スクロール */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* filter-bar 縦並び */
  .filter-bar { padding: 8px 12px !important; gap: 8px !important; }
  .filter-bar .left, .filter-bar .right { width: 100%; }
}

/* ============================================================
 * /call 加盟店架電スマホ追加救済
 * ============================================================ */
@media (max-width: 768px) {
  .call-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .call-panel { padding: 10px 12px !important; max-height: none !important; }
  /* 中のカンバン2列 → 1列 */
  .call-panel [style*="grid-template-columns:1fr 1fr"],
  .call-panel [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* lane の max-height calc(100vh - ...) 解除 */
  #lane-untouched, #lane-mine, #lane-other {
    max-height: 320px !important;
    min-height: 80px !important;
  }
  /* alert-bar */
  .alert-bar { font-size: 14px !important; padding: 10px 14px !important; margin: 8px !important; }
  /* topbar */
  header.topbar { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
  header.topbar h1 { font-size: 17px !important; flex: 1 1 100%; }
  header.topbar .meta { width: 100%; flex-wrap: wrap; gap: 6px; }
  header.topbar .handler-input { width: 100% !important; padding: 10px 12px !important; }
  /* big-btn 結果ボタン */
  .big-btn { padding: 14px !important; font-size: 16px !important; }
  /* script ボックス */
  .script { padding: 12px !important; font-size: 14px !important; }
}

/* ============================================================
 * 共通：右下FAB / 浮動要素のスマホ重なり防止
 * ============================================================ */
@media (max-width: 768px) {
  /* main の下部に余白を作ってFloating要素と重ならないように */
  body > main, body > .container {
    padding-bottom: 88px !important;
  }
}

/* ================================================================
 * 🎨 デザインパターン切替（2026-05-01 川上代表向け比較プレビュー）
 *   ?theme=a / ?theme=b で body クラス付与 → ここの rule が適用
 *   provider-apply-lp.html の切替JS と連動
 * ================================================================ */

/* ============= A案：金色アクセント絞り込み ============= */
/* メイン60%: ダークネイビー / サブ30%: 白・グレー
   アクセント10%: 金（CTA / FV最大見出し / 数字マーク のみ） */
body.design-a :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fde68a"],
body.design-a :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color: #fde68a"],
body.design-a :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fef3c7"],
body.design-a :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color: #fef3c7"],
body.design-a :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fef9c3"] {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.design-a .step .title {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.design-a h2[style*="color"],
body.design-a h3[style*="color"] {
  color: #ffffff !important;
}
body.design-a b[style*="color:#fde68a"],
body.design-a span[style*="color:#fde68a"]:not(.num) {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: rgba(250, 204, 21, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* === FV (.hero) 内は A案の白統一を打ち消し、金色維持（川上代表確定） ===
   グローバル A案 rule (specificity 0,5,2) より高 specificity が必要 */
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fde68a"],
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color: #fde68a"],
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fef3c7"],
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color: #fef3c7"],
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color:#fef9c3"],
body.design-a .hero :not(h1):not(.cta-button):not([class*="cta"]):not(.num)[style*="color: #fef9c3"],
body.design-a .hero b[style*="color:#fde68a"],
body.design-a .hero span[style*="color:#fde68a"] {
  color: #fde68a !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}
body.design-a .hero h1,
body.design-a .hero h2 {
  color: #fef9c3 !important;
}
body.design-a .hero h2[style*="color"] {
  color: #fef9c3 !important;
}
/* バッジは表示しない（A案デフォルト適用なので識別バッジ不要） */
/* body.design-a::before { content: "🎨 A案"; ... } は無効化 */

/* ============= B案：金完全廃止・CTA朱赤・シニアB2B最適化 ============= */
/* メイン60%: ダークネイビー / サブ30%: 白・グレー
   アクセント10%: 朱赤 #dc2626（CTA / 数字マーク / select枠 / 最重要強調） */
body.design-b [style*="color:#facc15"],
body.design-b [style*="color: #facc15"],
body.design-b [style*="color:#fde68a"],
body.design-b [style*="color: #fde68a"],
body.design-b [style*="color:#fef3c7"],
body.design-b [style*="color: #fef3c7"],
body.design-b [style*="color:#fef9c3"],
body.design-b [style*="color: #fef9c3"],
body.design-b [style*="color:#f59e0b"],
body.design-b [style*="color: #f59e0b"],
body.design-b [style*="color:#b45309"],
body.design-b [style*="color: #b45309"] {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.design-b [style*="background:#facc15"],
body.design-b [style*="background: #facc15"],
body.design-b [style*="background:#fde68a"],
body.design-b [style*="background: #fde68a"],
body.design-b [style*="background:#fef3c7"],
body.design-b [style*="background: #fef3c7"] {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
}
body.design-b [style*="border-color:#facc15"],
body.design-b [style*="border-color: #facc15"],
body.design-b [style*="border-color:#fde68a"],
body.design-b [style*="border-color: #fde68a"] {
  border-color: rgba(255,255,255,0.15) !important;
}
body.design-b .cta-button,
body.design-b a[class*="cta"],
body.design-b a[href*="provider-apply/form"],
body.design-b a[style*="background:#facc15"],
body.design-b a[style*="background: #facc15"],
body.design-b button[style*="background:#facc15"] {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  background-image: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4) !important;
}
body.design-b .floating-cta {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.5) !important;
}
body.design-b .floating-cta * { color: #ffffff !important; }
body.design-b .step .num {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}
body.design-b .step .title {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.design-b .calc-box select,
body.design-b .sim-select-pulse {
  border-color: #dc2626 !important;
  color: #ffffff !important;
}
body.design-b b[style*="color:#fde68a"],
body.design-b span[style*="color:#fde68a"]:not(.num) {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: rgba(220, 38, 38, 0.65);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
body.design-b h1, body.design-b h2, body.design-b h3 {
  color: #ffffff !important;
}
body.design-b .meta-tag {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
body.design-b::before {
  content: "🎨 B案：金廃止・CTA朱赤";
  position: fixed; top: 4px; right: 4px; z-index: 99999;
  background: rgba(0,0,0,0.85); color: #fca5a5;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; font-family: monospace;
  pointer-events: none;
}