/* =========================================================================
   Sales LP — Handoff v2 (claudeDesign1/handoff_sales_outsourcing)
   デザイントークンは handoff/README.md 準拠。
   本ファイルは .sales-lp-root スコープに閉じ、共通ヘッダー/フッター/base.cssへ影響しない。
   ========================================================================= */

.sales-lp-root { scroll-behavior: smooth; }
.sales-lp-root,
.sales-lp-root * { box-sizing: border-box; }

/* このLPのローカルフォント（base.css の Shippori Mincho を上書き） */
.sales-lp-root {
  font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #141B2B;
  background: #ffffff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.sales-lp-root h1,
.sales-lp-root h2,
.sales-lp-root h3,
.sales-lp-root h4,
.sales-lp-root p,
.sales-lp-root ul,
.sales-lp-root ol,
.sales-lp-root li,
.sales-lp-root button,
.sales-lp-root a,
.sales-lp-root span,
.sales-lp-root div {
  font-family: inherit;
}
.sales-lp-root .lp-en {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}

/* 段落・リストの共通リセット（base.css の下線などを無効化） */
.sales-lp-root a { color: #355AA8; text-decoration: none; }
.sales-lp-root a:hover { color: #27467F; }
.sales-lp-root ul { margin: 0; padding: 0; }
.sales-lp-root h1,
.sales-lp-root h2,
.sales-lp-root h3,
.sales-lp-root h4,
.sales-lp-root p { margin: 0; }
.sales-lp-root img { max-width: 100%; }

/* ---- CTA hover ---- */
.sales-lp-root a[data-cta="primary"]:hover { background: #27467F !important; transform: translateY(-1px); }
.sales-lp-root a[data-cta="onnavy"]:hover { background: #f2f6fc !important; transform: translateY(-1px); }
.sales-lp-root a[data-cta="ghost"]:hover { border-color: #355AA8 !important; color: #355AA8 !important; }
.sales-lp-root a[data-cta="ghostlight"]:hover { border-color: rgba(255,255,255,0.9) !important; }
.sales-lp-root a[data-cta]:focus-visible { outline: 2px solid #355AA8; outline-offset: 3px; }
.sales-lp-root button[data-faq]:hover { background: #F7F8FA; }
.sales-lp-root button[data-faq]:focus-visible,
.sales-lp-root button[data-plan-btn]:focus-visible { outline: 2px solid #355AA8; outline-offset: -2px; }
.sales-lp-root button[data-plan-btn]:hover { background: #F7F8FA; }

/* ---- 縦向き矢印は既定で非表示（レスポンシブで切替） ---- */
.sales-lp-root [data-arrow-v] { display: none; }

/* ---- PC のプランはテーブル、SP はアコーディオンへ切替 ---- */
.sales-lp-root [data-plan-acc] { display: none !important; }
.sales-lp-root [data-plan-table] { display: block; width: 100%; }
/* =========================================================================
   プラン比較表（.plan-cmp / .plan-cmp-grid）
   静かで整理された1つの表として見せる。列単位の色ベタは使わない。
   スコープ：.sales-lp-root 配下のみ。service.css の .plan-grid 等とは無関係。
   ========================================================================= */

.sales-lp-root .plan-cmp-grid {
  display: grid;
  grid-template-columns: 17% minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  min-width: 760px;
  background: #FFFFFF;
  border: 1px solid #D9DFE7;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17, 30, 50, 0.03);
}

/* 全セル共通：本文セルの余白と本文フォント。インライン背景色を白へ上書き */
.sales-lp-root .plan-cmp-grid > div {
  background: #FFFFFF !important;
  color: #182235;
  padding: 24px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  border-left: 1px solid #E1E6EC !important;
  border-top: 1px solid #E4E8ED !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
/* 本文セルは折り返さず1行で表示（内容が長い場合はラッパー data-plan-table の overflow-x で横スクロール） */
.sales-lp-root .plan-cmp-grid > div:nth-child(n+4) {
  white-space: nowrap;
}

/* 左端列は縦罫線を消す（外周border側） */
.sales-lp-root .plan-cmp-grid > div:nth-child(3n+1) {
  border-left: 0 !important;
  background: #F8F9FA !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #273448;
  letter-spacing: 0.02em;
}

/* ---- ヘッダー行（上端3セル）：わずかな色差のみ ---- */
.sales-lp-root .plan-cmp-grid > .plan-cmp-hd {
  border-top: 0 !important;
  padding: 22px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 左端「プラン」 */
.sales-lp-root .plan-cmp-grid > .plan-cmp-hd--label {
  background: #F6F7F9 !important;
  color: #273448;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  justify-content: center;
}
/* 成果報酬プラン ヘッダー（おすすめ側：ブルーアクセントライン） */
.sales-lp-root .plan-cmp-grid > .plan-cmp-hd--a {
  background: #F3F6FA !important;
  border-top: 3px solid #3F5F91 !important;
  padding-top: 19px !important; /* border 分を相殺 */
}
/* 伴走支援プラン ヘッダー */
.sales-lp-root .plan-cmp-grid > .plan-cmp-hd--b {
  background: #FAFAFB !important;
}

/* ---- ヘッダー内タイポ：プラン名 → タグ → 説明 ---- */
.sales-lp-root .plan-cmp-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.sales-lp-root .plan-cmp-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #182235;
}
.sales-lp-root .plan-cmp-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 4px;
  background: #F1F3F6;
  color: #657080;
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4 !important;
}
.sales-lp-root .plan-cmp-desc {
  margin: 4px 0 0;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #667180;
}
/* 「おすすめ」バッジ：透明背景 + 細ボーダー */
.sales-lp-root .plan-cmp-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #A8B7CA;
  color: #3B5270;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ---- レスポンシブ：min-width 760px は狭幅で横スクロールになるため
   [data-plan-table] の overflow-x: auto と併用。860px以下はアコーディオン。---- */
@media (max-width: 860px) {
  .sales-lp-root [data-plan-table] { display: none !important; }
  .sales-lp-root [data-plan-acc] { display: flex !important; }
}

/* ---- Hero 縦積み（900px以下） ---- */
@media (max-width: 900px) {
  .sales-lp-root [data-hero] { grid-template-columns: 1fr !important; }
  .sales-lp-root [data-hero-photo] { margin-left: 0 !important; min-height: 320px; }
}

/* ---- QUALITY の3層図：1000px以下で縦積み、矢印を↓へ ---- */
@media (max-width: 1000px) {
  .sales-lp-root [data-cycle-row] { flex-direction: column !important; }
  .sales-lp-root [data-cycle-row] > div { flex: 0 0 auto !important; }
  .sales-lp-root [data-cycle-arrow] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding-left: 20px;
  }
  .sales-lp-root [data-arrow-h] { display: none !important; }
  .sales-lp-root [data-arrow-v] { display: inline !important; }
}

/* ---- PROBLEM：1080以下で装飾SVGを非表示 ---- */
@media (max-width: 1080px) {
  .sales-lp-root [data-prob-fig] { display: none !important; }
  .sales-lp-root [data-prob-row] {
    grid-template-columns: 60px minmax(160px, 1fr) 1.6fr !important;
  }
}

/* ---- CASE：900以下で縦積み、画像→数字→本文の順 ---- */
@media (max-width: 900px) {
  .sales-lp-root [data-case-row] { grid-template-columns: 1fr !important; gap: 22px !important; }
  .sales-lp-root [data-case-photo] { order: -1; aspect-ratio: 16 / 9 !important; }
  .sales-lp-root [data-prob-row] { grid-template-columns: 48px 1fr !important; }
  .sales-lp-root [data-prob-row] > ul { grid-column: 2 !important; }
}

/* ---- 560以下でCTA幅100% ---- */
@media (max-width: 560px) {
  .sales-lp-root [data-cta] { width: 100%; justify-content: center; }
}

/* ---- PROCESS / START FLOW：1080以下で縦タイムライン ---- */
@media (max-width: 1080px) {
  .sales-lp-root [data-step-grid] { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sales-lp-root [data-step-line] { display: none !important; }
  .sales-lp-root [data-step-grid] > div {
    border-left: 2px solid #E4E8EE !important;
    border-top: none !important;
  }
  .sales-lp-root [data-step-grid] > div:last-child {
    border-left: 2px solid #355AA8 !important;
  }
}

/* =========================================================================
   FAQ セクション（.lp-faq）
   中央寄せ1カラム / 罫線主体の端正なリスト / 下部に小CTA
   スコープ：.sales-lp-root 配下のみ
   ========================================================================= */

.sales-lp-root .lp-faq {
  padding-block: clamp(64px, 6.4vw, 112px);
}
.sales-lp-root .lp-faq-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* --- 見出しブロック --- */
.sales-lp-root .lp-faq-head {
  text-align: left;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.sales-lp-root .lp-faq-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #355AA8;
}
.sales-lp-root .lp-faq-title {
  margin: 12px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: #172136;
}
.sales-lp-root .lp-faq-lead {
  margin: 16px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.9;
  color: #667085;
}
.sales-lp-root .lp-faq-note {
  margin-top: 28px;
  padding: 18px 22px;
  border-left: 2px solid #3F5F91;
  background: #F7F9FC;
}
.sales-lp-root .lp-faq-note-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #172136;
}
.sales-lp-root .lp-faq-note-body {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #667085;
}

/* --- FAQ リスト（罫線主体） --- */
.sales-lp-root .lp-faq-list {
  border-top: 1px solid #DCE3EC;
}
.sales-lp-root .lp-faq-item {
  border-bottom: 1px solid #DCE3EC;
}

/* 質問ボタン */
.sales-lp-root .lp-faq-q {
  display: grid;
  grid-template-columns: 46px 108px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 20px 8px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.sales-lp-root .lp-faq-q:hover {
  background: #F7F9FC;
}
.sales-lp-root .lp-faq-q:focus-visible {
  outline: 2px solid #355AA8;
  outline-offset: -2px;
}
.sales-lp-root .lp-faq-num {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #A8B3C4;
}
.sales-lp-root .lp-faq-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #667085;
}
.sales-lp-root .lp-faq-qtext {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #172136;
}
.sales-lp-root .lp-faq-toggle {
  justify-self: end;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: #667085;
  transition: transform 0.2s ease, color 0.2s ease;
}
.sales-lp-root .lp-faq-item[data-open] .lp-faq-toggle,
.sales-lp-root .lp-faq-q[aria-expanded="true"] .lp-faq-toggle {
  color: #355AA8;
}

/* 回答パネル */
.sales-lp-root .lp-faq-a {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 18px 8px 18px calc(46px + 108px + 32px);
  background: #FAFBFD;
  border-top: 1px solid #EAEEF3;
}
.sales-lp-root .lp-faq-a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: #445064;
}
.sales-lp-root .lp-faq-a[hidden] {
  display: none;
}

/* --- FAQ下部の小CTA --- */
.sales-lp-root .lp-faq-cta {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid #DCE3EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sales-lp-root .lp-faq-cta-text { flex: 1 1 auto; min-width: 0; }
.sales-lp-root .lp-faq-cta-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #172136;
}
.sales-lp-root .lp-faq-cta-body {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #667085;
}
.sales-lp-root .lp-faq-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #355AA8;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #355AA8;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sales-lp-root .lp-faq-cta-btn:hover {
  background: #355AA8;
  color: #ffffff !important;
}
.sales-lp-root .lp-faq-cta-btn:focus-visible {
  outline: 2px solid #355AA8;
  outline-offset: 3px;
}

/* --- FAQ レスポンシブ --- */
@media (max-width: 720px) {
  .sales-lp-root .lp-faq-q {
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    grid-template-areas:
      "num  cat  toggle"
      "text text text";
    gap: 6px 12px;
    padding: 18px 4px;
  }
  .sales-lp-root .lp-faq-num { grid-area: num; }
  .sales-lp-root .lp-faq-cat { grid-area: cat; align-self: center; }
  .sales-lp-root .lp-faq-toggle { grid-area: toggle; }
  .sales-lp-root .lp-faq-qtext {
    grid-area: text;
    margin-top: 6px;
    font-size: 15.5px;
  }
  .sales-lp-root .lp-faq-a {
    padding: 4px 4px 20px 4px;
  }
  .sales-lp-root .lp-faq-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .sales-lp-root .lp-faq-cta-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .sales-lp-root *,
  .sales-lp-root *::before,
  .sales-lp-root *::after {
    animation: none !important;
    transition: none !important;
  }
}