/* =============================================================
 * onbx ターゲット別ランディングページ 共通スタイル
 *
 * 本体サイト(onbx.css)とは独立した軽量スタイルシート。
 * LPは静的HTMLのみで動作させる(JSなし)ため、必要なものだけを持つ。
 * 配色は本体サイト(onbx.css)と同一：
 *   白背景 + ダーク見出し(#1A0B00) + ブランドオレンジ(#FF6F00)
 * トークン値を変えるときは onbx.css 側と揃えること
 * ============================================================= */

/* --- Fonts（本体サイトと同じ woff2 サブセットを共有） --- */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* 本体サイトの --color-orange / --color-orange-hover と同値。
     --lp-orange-deep は以前 文字用に濃い色を割り当てていた名残で、
     いまは本体と揃えるため --lp-orange と同じ値にしてある */
  --lp-orange:       #FF6F00;
  --lp-orange-deep:  #FF6F00;
  --lp-orange-hover: #e66000;
  --lp-orange-light: #FFA966;
  --lp-orange-bg:    #FFF1E6;
  --lp-orange-tint:  #FFF8F0;
  --lp-orange-line:  #FFD9B3;
  --lp-navy:         #1A0B00;
  --lp-body:         #475668;
  --lp-muted:        #9e9e9e;
  --lp-border:       #e5e8eb;
  --lp-grey:         #ccd2d9;
  --lp-grey-bg:      #f8f8f8;
  --lp-white:        #ffffff;

  --lp-radius:       12px;
  --lp-radius-lg:    16px;
  --lp-radius-pill:  100px;
  --lp-pad-x:        80px;
  --lp-max:          1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--lp-navy);
  background: var(--lp-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lp-orange-deep); text-decoration: none; }
a:hover { color: var(--lp-orange-hover); }

img { max-width: 100%; height: auto; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* --- Header --- */
.lp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px var(--lp-pad-x);
  border-bottom: 1px solid var(--lp-border);
  background: var(--lp-white);
  position: sticky; top: 0; z-index: 100;
}
.lp-header-brand { display: flex; align-items: center; gap: 14px; }
.lp-logo { height: 30px; display: block; width: auto; }
.lp-badge {
  font-size: 12px; font-weight: 600; color: var(--lp-orange-deep);
  border: 1px solid var(--lp-orange-deep); border-radius: var(--lp-radius-pill);
  padding: 4px 14px; letter-spacing: 1px; white-space: nowrap;
}

/* --- Buttons --- */
.lp-btn {
  display: inline-block; text-align: center;
  background: var(--lp-orange-deep); color: var(--lp-white);
  font-size: 16px; font-weight: 700;
  border-radius: var(--lp-radius-pill); padding: 16px 44px;
  box-shadow: 0 6px 20px rgba(251, 78, 13, 0.35);
  transition: background .2s, transform .2s;
}
.lp-btn:hover { background: var(--lp-orange-hover); color: var(--lp-white); transform: translateY(-1px); }
.lp-btn-sm { font-size: 14px; font-weight: 600; padding: 11px 28px; box-shadow: none; }
.lp-btn-ghost {
  display: inline-block; text-align: center;
  color: var(--lp-navy); background: var(--lp-white);
  font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--lp-grey); border-radius: var(--lp-radius-pill);
  padding: 14px 32px; transition: border-color .2s, color .2s;
}
.lp-btn-ghost:hover { border-color: var(--lp-orange-deep); color: var(--lp-orange-deep); }
.lp-btn-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* --- Section scaffolding --- */
.lp-section { padding: 64px var(--lp-pad-x) 58px; }
.lp-section-grey { background: var(--lp-grey-bg); }
.lp-section-tint { background: var(--lp-orange-bg); }
.lp-inner { max-width: var(--lp-max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.lp-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.lp-eyebrow {
  font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--lp-orange-deep);
}
.lp-h2 { font-size: 32px; font-weight: 800; line-height: 1.5; text-wrap: balance; }
.lp-lead { font-size: 15px; line-height: 1.9; color: var(--lp-body); text-wrap: pretty; }
.lp-note { font-size: 11px; color: var(--lp-muted); }
.lp-source { font-size: 11px; color: var(--lp-muted); text-align: center; }
.accent { color: var(--lp-orange-deep); }

/* --- Hero --- */
.lp-hero { padding: 60px var(--lp-pad-x) 62px; background: var(--lp-white); }
.lp-hero-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center;
}
.lp-hero-center { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.lp-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.lp-hero h1 { font-size: 44px; font-weight: 800; line-height: 1.4; text-wrap: balance; }
.lp-hero-center h1 { font-size: 48px; line-height: 1.45; }
.lp-hero-lead { display: flex; gap: 12px; align-items: stretch; }
.lp-hero-lead-bar { width: 4px; background: var(--lp-orange); border-radius: 2px; flex-shrink: 0; }
.lp-hero-lead p { font-size: 16px; line-height: 1.9; color: var(--lp-body); }
.lp-hero-figure { background: var(--lp-orange-bg); border-radius: 24px; padding: 28px; }
.lp-hero-panel {
  background: var(--lp-white); border: 1px solid var(--lp-orange-line);
  border-radius: var(--lp-radius-lg); padding: 26px 28px 22px;
  box-shadow: 0 12px 36px rgba(33, 37, 76, 0.10);
  display: flex; flex-direction: column; gap: 14px;
}
.lp-panel-title { font-size: 13px; font-weight: 700; }

/* --- 用語の補足説明 --- */
.lp-define {
  font-size: 14px; line-height: 1.9; color: var(--lp-body);
  background: var(--lp-orange-tint); border: 1px solid var(--lp-orange-line);
  border-radius: var(--lp-radius); padding: 14px 22px; max-width: 780px;
}
.lp-define strong { color: var(--lp-orange-hover); }

/* --- グラフまわり --- */
/* 縦軸の説明。SVG内に置くとゾーン見出しと重なるので外に出している */
.lp-chart-axis { font-size: 12px; color: var(--lp-muted); }
/* 脚注と3要素チップは1行にまとめ、グラフ下の余白を詰める */
.lp-chart-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* グラフのパネルは図が主役なので、内側の余白と行間を他より詰める */
.lp-panel-chart { padding: 20px 24px 18px; gap: 10px; }

/* --- SDT3要素のチップ（グラフの網掛けと重なるためSVGの外に出している） --- */
.lp-sdt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-sdt-label { font-size: 12px; font-weight: 700; color: var(--lp-body); }
.lp-sdt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-sdt-chips li {
  font-size: 12px; font-weight: 700; color: var(--lp-orange-hover);
  background: var(--lp-orange-bg); border-radius: var(--lp-radius-pill);
  padding: 5px 16px;
}

/* --- Callout（オレンジ枠の一言） --- */
.lp-callout {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--lp-orange); background: var(--lp-orange-tint);
  border-radius: var(--lp-radius); padding: 16px 32px;
}
.lp-callout svg { flex-shrink: 0; }
.lp-callout p { font-size: 16px; font-weight: 700; }
.lp-callout-center { justify-content: center; }

/* --- Cards --- */
.lp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.lp-card {
  background: var(--lp-white); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.lp-card h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.lp-card p { font-size: 13px; line-height: 1.8; color: var(--lp-body); }
.lp-card-sub {
  font-size: 12px; font-weight: 700; color: var(--lp-orange-deep);
  border-bottom: 1px dashed var(--lp-orange-line); padding-bottom: 10px;
}
.lp-icon-circle {
  width: 52px; height: 52px; border-radius: 50%; background: var(--lp-orange-bg);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lp-orange-deep); color: var(--lp-white);
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-num-lg { width: 34px; height: 34px; font-size: 15px; }
.lp-card-top { display: flex; align-items: center; gap: 10px; }

/* --- 統計カード（オレンジのヘッダー帯） --- */
.lp-stat {
  background: var(--lp-white); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.lp-stat-head {
  background: var(--lp-orange-deep); color: var(--lp-white);
  font-size: 14px; font-weight: 700; text-align: center; padding: 10px 12px;
}
.lp-stat-head-navy { background: var(--lp-navy); }
.lp-stat-body {
  padding: 22px 22px 20px; flex: 1;
  display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center;
}
.lp-stat-body-tint { background: var(--lp-orange-bg); }
.lp-stat-num { font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 700; color: var(--lp-orange); line-height: 1; }
.lp-stat-unit { font-size: 18px; font-weight: 700; color: var(--lp-navy); }
.lp-stat h3 { font-size: 18px; font-weight: 800; }
/* .lp-stat p だと見出し(.lp-stat-head)にも当たって白指定を上書きしてしまうため、
   本文側だけに絞る */
.lp-stat-body p { font-size: 13px; line-height: 1.8; color: var(--lp-body); }
.lp-stat-body p.lp-note { font-size: 11px; color: var(--lp-muted); }

/* --- 比較バー（1.8倍など） --- */
.lp-bars { display: flex; flex-direction: column; gap: 16px; }
.lp-bar-row { display: flex; flex-direction: column; gap: 6px; }
.lp-bar-label { font-size: 12px; color: var(--lp-body); }
.lp-bar-line { display: flex; align-items: center; gap: 10px; }
/* バーは track の割合で描く。px 固定にすると狭い画面で頭打ちになり、
   本数どうしの比率（＝データそのもの）が崩れるため */
.lp-bar-track { flex: 1 1 auto; min-width: 0; max-width: 396px; }
.lp-bar { display: block; height: 22px; border-radius: 0 4px 4px 0; }
.lp-bar-base { background: var(--lp-grey); }
.lp-bar-fill { background: var(--lp-orange); }
/* 値ラベルの幅を揃えないと行ごとに track の残り幅が変わり、
   バーどうしの比率がずれる（1.0 と 約1.8倍 で文字幅が違うため） */
.lp-bar-val {
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: var(--lp-body);
  flex: 0 0 auto; min-width: 84px;
}
.lp-bar-val-accent { font-size: 18px; color: var(--lp-orange-deep); }

/* --- ステップフロー --- */
.lp-steps { display: flex; align-items: stretch; gap: 0; }
.lp-step { flex: 1; display: flex; flex-direction: column; gap: 12px;
  background: var(--lp-white); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 26px 20px; }
.lp-step-last { background: var(--lp-orange-bg); border: 1.5px solid var(--lp-orange); }
.lp-step h3 { font-size: 15px; font-weight: 700; }
.lp-step p { font-size: 12px; line-height: 1.8; color: var(--lp-body); }
.lp-step-arrow { display: flex; align-items: center; padding: 0 6px; flex-shrink: 0; }

/* --- 解決マップ（課題 → onbx → 価値） --- */
.lp-map { display: flex; flex-direction: column; gap: 18px; }
.lp-map-row { display: grid; grid-template-columns: 5fr 44px 7fr; align-items: stretch; }
.lp-map-problem {
  background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.lp-map-solution {
  background: var(--lp-white); border: 1.5px solid var(--lp-orange); border-radius: var(--lp-radius);
  padding: 22px 26px; display: flex; flex-direction: column; gap: 8px;
}
.lp-map-arrow { display: flex; align-items: center; justify-content: center; }
.lp-tag {
  width: fit-content; font-size: 11px; font-weight: 700; color: var(--lp-white);
  background: var(--lp-navy); border-radius: var(--lp-radius-pill); padding: 3px 12px;
}
.lp-tag-orange { background: var(--lp-orange-deep); }
.lp-map-problem h3 { font-size: 16px; font-weight: 700; line-height: 1.6; }
.lp-map-solution h3 { font-size: 16px; font-weight: 800; }
.lp-map-feature { font-size: 12px; font-weight: 700; color: var(--lp-orange-hover); }
.lp-map-solution p { font-size: 13px; line-height: 1.8; color: var(--lp-body); }
.lp-map-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- 2カラム（効果セクション） --- */
.lp-split {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center;
}
.lp-split-copy { display: flex; flex-direction: column; gap: 16px; }
.lp-split-copy h2 { font-size: 30px; font-weight: 800; line-height: 1.5; text-wrap: balance; }
.lp-split-copy p { font-size: 14px; line-height: 1.9; color: var(--lp-body); }
/* 「約1.8倍」の"倍"だけが次行に落ちるのを防ぐ */
.lp-split-copy h2 .accent,
.lp-h2 .accent { white-space: nowrap; }
.lp-panel {
  background: var(--lp-orange-bg); border-radius: var(--lp-radius);
  padding: 28px 30px 24px; display: flex; flex-direction: column; gap: 16px;
}
.lp-panel-white { background: var(--lp-white); border: 1px solid var(--lp-border); }

/* --- CTA --- */
.lp-cta-wrap { padding: 52px var(--lp-pad-x) 58px; background: var(--lp-orange-bg); }
.lp-cta {
  max-width: 980px; margin: 0 auto;
  background: var(--lp-white); border: 1.5px solid var(--lp-orange);
  border-radius: var(--lp-radius-lg); padding: 38px 48px;
  display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center;
}
.lp-cta h2 { font-size: 28px; font-weight: 800; line-height: 1.6; text-wrap: balance; }
.lp-cta p { font-size: 14px; color: var(--lp-body); }

/* --- Footer --- */
.lp-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 24px var(--lp-pad-x); background: var(--lp-white);
  border-top: 1px solid var(--lp-border);
}
.lp-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-footer-links a { font-size: 12px; color: var(--lp-body); }
.lp-footer-links a:hover { color: var(--lp-orange-deep); }
.lp-copy { font-size: 11px; color: var(--lp-muted); }

/* --- 表のはみ出し防止 --- */
.lp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 横スクロールが必要になる狭い画面でだけ案内を出す */
.lp-scroll-hint { display: none; }
@media (max-width: 980px) { .lp-scroll-hint { display: inline; } }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 1080px) {
  :root { --lp-pad-x: 40px; }
  .lp-hero-grid { gap: 36px; }
  .lp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { flex-wrap: wrap; gap: 14px; }
  .lp-step { flex: 1 1 calc(50% - 7px); }
  .lp-step-arrow { display: none; }
}

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* ヒーロー内のミニ統計は小さな数値ボックスなので3列のまま畳まない */
  .lp-hero-panel .lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .lp-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lp-map-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-map-arrow { transform: rotate(90deg); padding: 2px 0; }
}

@media (max-width: 680px) {
  :root { --lp-pad-x: 20px; }
  .lp-header { padding: 12px var(--lp-pad-x); }
  .lp-logo { height: 26px; }
  /* 狭い画面では装飾のバッジを畳み、CTAは残す（ヘッダーは追従するので導線を切らない） */
  .lp-badge { display: none; }
  .lp-header .lp-btn-sm { font-size: 13px; padding: 10px 18px; }

  .lp-hero { padding: 44px var(--lp-pad-x) 48px; }
  .lp-hero h1, .lp-hero-center h1 { font-size: 27px; line-height: 1.5; }
  .lp-hero-lead p { font-size: 15px; }
  .lp-hero-figure { padding: 16px; border-radius: var(--lp-radius-lg); }
  .lp-hero-panel { padding: 18px 16px 16px; }

  .lp-section { padding: 52px var(--lp-pad-x) 48px; }
  .lp-inner { gap: 28px; }
  .lp-h2 { font-size: 23px; }
  .lp-split-copy h2 { font-size: 23px; }
  .lp-lead { font-size: 14px; }

  .lp-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .lp-step { flex: 1 1 100%; }
  .lp-card { padding: 24px 20px; }
  .lp-stat-body { padding: 22px 18px 20px; }
  .lp-panel { padding: 24px 20px 20px; }

  .lp-btn-row .lp-btn,
  .lp-btn-row .lp-btn-ghost,
  .lp-cta .lp-btn { width: 100%; }
  .lp-btn-row .lp-btn { padding: 15px 24px; }
  .lp-btn-row { gap: 12px; }

  .lp-callout { padding: 14px 18px; align-items: flex-start; }
  .lp-callout p { font-size: 14px; }

  .lp-cta-wrap { padding: 44px var(--lp-pad-x) 48px; }
  .lp-cta { padding: 32px 22px; }
  .lp-cta h2 { font-size: 22px; }

  .lp-map-problem, .lp-map-solution { padding: 18px 20px; }
  .lp-footer { padding: 20px var(--lp-pad-x); gap: 12px; }
}