/* ==========================================================================
   あぽろん販売LP スタイル v6
   2026-08-14 本人支給デザインカンプ準拠 = 青×白のSaaS風・図解多め
   モバイルファースト。900px からデスクトップ組み。
   ========================================================================== */

:root {
  --blue: #2563EB;
  --blue-d: #1D4ED8;
  --blue-pale: #EAF1FC;
  --blue-bg: #F4F8FE;
  --navy: #1E2A44;
  --navy-d: #16203a;
  --ink: #1F2937;
  --ink2: #5A6474;
  --muted: #8B94A5;
  --line: #DFE7F2;
  --green: #16A34A;
  --green-bg: #E8F5EC;
  --yellow: #F7C948;
  --red: #E4573D;
  --sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
          "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  line-height: 1.85;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

.inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.inner.wide { max-width: 1180px; }

/* 強調・マーカー */
.au { color: var(--blue); font-weight: 900; }
.wt { color: #fff; font-weight: 900; }
.wt2 { font-weight: 900; }
.yl { color: var(--yellow); font-weight: 900; }
.rd { color: var(--red); font-weight: 900; }
.mk {
  background: linear-gradient(transparent 55%, #C7DBFB 55%);
  color: inherit; font-weight: 700; padding: 0 1px;
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue); color: #fff;
  border-radius: 10px;
  padding: 13px 22px;
  font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .3);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37, 99, 235, .38); }
.btn-arw { font-weight: 900; }
.btn-ic { display: inline-flex; }
.btn.lg { padding: 16px 28px; font-size: 16px; border-radius: 12px; }
.btn.pri { background: var(--blue); }
.btn.ghost {
  background: #fff; color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
}
.btn.ghost.inv {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.btn.yellow {
  background: var(--yellow); color: #1F2000;
  box-shadow: 0 10px 26px rgba(247, 201, 72, .4);
}
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.final .cta-pair { justify-content: center; }

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.sec { padding: 58px 0; }
.sec-h {
  font-size: clamp(21px, 4.4vw, 30px);
  line-height: 1.55; font-weight: 900; color: var(--ink);
  margin-bottom: 26px;
}
.sec-h.c { text-align: center; }
.sec-h .ln { display: inline; }

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.fv {
  background:
    radial-gradient(700px 400px at 92% 8%, rgba(37, 99, 235, .08), transparent 60%),
    linear-gradient(180deg, #FDFEFF 0%, #F2F7FE 100%);
  overflow: hidden;
}
.fv-in {
  max-width: 1180px; margin: 0 auto;
  padding: 34px 20px 46px;
  display: grid; gap: 40px;
}
.brand {
  font-size: 26px; font-weight: 900; color: var(--blue);
  letter-spacing: .02em; line-height: 1.2;
  margin-bottom: 26px;
}
.brand em {
  display: block; font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--muted);
}
.fv-badge {
  display: inline-block;
  background: var(--blue); color: #fff;
  font-size: 13.5px; font-weight: 900;
  border-radius: 999px; padding: 7px 20px;
  margin-bottom: 16px;
}
.fv-h1 {
  /* 1行目「リスト作成から日程調整まで」(13文字)が必ず1行に収まるサイズにする */
  font-size: min(40px, calc((100vw - 48px) / 13.4));
  line-height: 1.5; font-weight: 900; color: var(--ink);
  margin-bottom: 12px;
}
.fv-h1 .ln { display: block; white-space: nowrap; }
.fv-h1 .au { font-size: 1.15em; }
.fv-sub { font-size: 16px; color: var(--ink2); font-weight: 700; margin-bottom: 22px; }

/* 5ステップの丸（円の中は見出しだけ＝読めるサイズを優先） */
.hsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 4px; margin-bottom: 18px; }
.hs {
  position: relative;
  width: 88px; height: 88px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line);
  box-shadow: 0 4px 12px rgba(30, 42, 68, .07);
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: 3px;
  margin-right: 15px;
}
.hs:not(.goal)::after {
  content: "→"; position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%);
  color: var(--blue); font-size: 13px; font-weight: 900;
}
.hs-ic { color: var(--blue); display: inline-flex; }
.hs b { font-size: 11px; font-weight: 900; line-height: 1.35; }
.hs.goal {
  width: 100px; height: 100px;
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
  margin-right: 0;
}
.hs.goal b { color: #fff; font-size: 13px; line-height: 1.5; }

.fv-lead2 { font-size: 13.5px; font-weight: 900; color: var(--ink); margin-bottom: 12px; }
.fv-checks {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 24px;
}
.fv-checks li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.fv-ctanote { font-size: 12.5px; color: var(--ink2); font-weight: 700; margin-top: 14px; }

/* ヒーロー右の図解（モバイル=縦積み／デスクトップ=カンプ通りの重ね配置） */
.fv-visual { position: relative; display: grid; gap: 12px; }
.v-badge {
  color: var(--blue);
  font-size: 15px; font-weight: 900;
  justify-self: center;
  display: flex; align-items: center; gap: 6px;
}
.v-badge i { font-style: normal; font-size: 13px; opacity: .8; }
.v-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(30, 42, 68, .16);
  display: flex; overflow: hidden;
  z-index: 2;
}
.v-strip {
  flex: 0 0 34px;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 14px;
}
.v-strip i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.v-strip i:first-child { background: var(--blue); }
.v-body { flex: 1; padding: 14px 16px; }
.v-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.vs {
  flex: 1; background: var(--blue-bg);
  border-radius: 8px; padding: 7px 4px; text-align: center;
}
.vs b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.3; }
.vs span { font-size: 10px; color: var(--ink2); font-weight: 700; }
.v-date {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
.v-date b { display: block; font-size: 15.5px; font-weight: 900; }
.v-ok { font-size: 12px; font-weight: 900; color: var(--green); }
.v-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 3; }
.vc {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 11px; padding: 7px 10px;
  box-shadow: 0 10px 24px rgba(30, 42, 68, .12);
}
.vc-ic { color: var(--blue); display: inline-flex; }
.vc b { display: block; font-size: 11.5px; font-weight: 900; line-height: 1.35; }
.vc span { display: block; font-size: 10px; color: var(--ink2); line-height: 1.35; }

/* カレンダーカード */
.v-cal {
  z-index: 2;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(30, 42, 68, .15);
  padding: 12px 14px;
}
.cav { display: flex; justify-content: flex-end; gap: 5px; margin-bottom: 8px; }
.cav i {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-pale);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.cav i:nth-child(2) { background: #CFE0FA; }
.cav i:nth-child(3) { background: #B7D2F7; }
.cav i:nth-child(4) { background: #9DBFF5; }
.cr { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; padding: 4px 0; }
.cr span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.cbar { height: 9px; border-radius: 4px; background: #EFF3FA; }
.cr.on { padding: 2px 0; }
.cslot {
  position: relative;
  background: var(--blue); color: #fff;
  border-radius: 8px; padding: 6px 34px 6px 12px;
}
.cslot b { display: block; font-size: 12px; font-weight: 900; line-height: 1.3; }
.cslot i { font-style: normal; font-size: 10px; opacity: .9; }
.cok {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff;
  border: 3px solid #fff;
  font-size: 12px; font-style: normal; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(30, 42, 68, .2);
}
.v-note { font-size: 10px; color: var(--muted); }

/* --------------------------------------------------------------------------
   課題
   -------------------------------------------------------------------------- */
.pains { background: var(--blue-bg); }
.pain-grid { display: grid; gap: 14px; }
.pain-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(30, 42, 68, .05);
}
.pain-tag {
  display: inline-block;
  background: var(--blue-pale); color: var(--blue-d);
  font-size: 13px; font-weight: 900;
  border-radius: 999px; padding: 4px 16px;
  margin-bottom: 12px;
}
.pain-img { width: 150px; margin: 0 auto 10px; border-radius: 10px; }
.pain-card p { font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.pain-turn {
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 14px;
  padding: 22px 18px;
  display: grid; justify-items: center; align-content: center; gap: 8px;
  text-align: center;
}
.turn-ic { color: var(--yellow); }
.pain-turn p { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 2; }

/* --------------------------------------------------------------------------
   6ステップの流れ
   -------------------------------------------------------------------------- */
.flow6 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 22px;
}
.flow6 li {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 12px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(30, 42, 68, .05);
}
.f6-n {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 12.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.f6-ic { display: inline-flex; margin-bottom: 6px; }
.f6-svg { color: var(--blue); }
.flow6 b { display: block; font-size: 14.5px; font-weight: 900; margin-bottom: 3px; }
.f6-tx { font-size: 11px; color: var(--ink2); line-height: 1.7; display: block; }
.flow6-result {
  background: var(--blue); color: #fff;
  text-align: center;
  font-size: clamp(13.5px, 3vw, 17px); font-weight: 700;
  border-radius: 12px;
  padding: 14px 18px;
}

/* --------------------------------------------------------------------------
   比較表（独立セクション）／主要機能（独立セクション）
   -------------------------------------------------------------------------- */
.category { background: var(--blue-bg); }
.cmp-wrap { max-width: 780px; margin: 0 auto; }
.features { background: #fff; }
.features .fx-grid { max-width: 900px; margin: 0 auto; }
.features .fx-note { text-align: center; }

.cmp-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; }
.cmp { width: 100%; min-width: 470px; font-size: 12.5px; }
.cmp thead th, .cmp thead td { padding: 10px 10px; font-weight: 900; }
.cmp thead .t-tool { color: #fff; background: #7C8698; font-size: 12px; text-align: center; border-radius: 10px 0 0 0; }
.cmp thead .t-apo { background: var(--blue); color: #fff; font-size: 14px; text-align: center; border-radius: 0 10px 0 0; }
.cmp tbody th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--ink);
  padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp tbody th span { margin-left: 4px; }
.row-ic { color: var(--blue); vertical-align: -4px; }
.cmp tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.cmp tbody .t-tool { color: var(--ink2); }
.cmp tbody .t-apo { background: var(--blue-pale); font-weight: 700; color: var(--ink); }
.cmp tbody tr:last-child td { border-bottom: 2px solid var(--blue); }
.xk { margin-right: 6px; vertical-align: -1px; }
.cmp-note { font-size: 10.5px; color: var(--muted); margin: 8px 0 16px; }
.cmp-punch {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--blue); color: #fff;
  font-size: clamp(13.5px, 2.8vw, 16px); font-weight: 700;
  border-radius: 12px; padding: 14px 16px;
}
.punch-ic { color: #fff; flex: none; }

.fx-grid { display: grid; gap: 14px; }
.fx-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(30, 42, 68, .05);
}
.fx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fx-num {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.fx-head b { font-size: 15px; font-weight: 900; line-height: 1.5; }
.fx-pts { display: grid; gap: 5px; margin-bottom: 12px; }
.fx-pts li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 500; }
.fx-pts .ck { flex: none; margin-top: 4px; }
.fx-note { font-size: 10.5px; color: var(--muted); margin-top: 10px; }

/* ミニモック共通 */
.fx-mock { border-top: 1px dashed var(--line); padding-top: 12px; }
.mt { width: 100%; font-size: 10.5px; }
.mt th { color: var(--muted); font-weight: 700; text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mt td { padding: 6px 6px; border-bottom: 1px solid #EEF2F8; font-weight: 700; }
.mt .yes { color: var(--blue); font-style: normal; }
.stc { font-style: normal; font-size: 9.5px; font-weight: 900; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.stc.ok { background: var(--green-bg); color: var(--green); }
.stc.wait { background: #EFF1F5; color: var(--ink2); }

.mm { background: var(--blue-bg); border-radius: 10px; padding: 11px 13px; font-size: 11px; line-height: 1.9; }
.mm-to { font-weight: 900; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 6px; }
.mm p { color: var(--ink2); }

.mc { display: grid; gap: 7px; }
.mc-in, .mc-out { font-size: 11px; line-height: 1.8; border-radius: 10px; padding: 8px 11px; max-width: 92%; }
.mc-in { background: #EFF1F5; justify-self: start; border-top-left-radius: 3px; }
.mc-out { background: var(--blue); color: #fff; justify-self: end; border-top-right-radius: 3px; }
.mc-cf {
  display: flex; align-items: center; gap: 7px;
  background: var(--green-bg); color: var(--green);
  font-size: 10.5px; font-weight: 900;
  border-radius: 8px; padding: 7px 10px;
}

.mg { display: grid; gap: 7px; }
.mg-l { font-size: 10px; color: var(--muted); font-weight: 700; }
.mg-row { display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; }
.mg-bar { height: 14px; background: #EFF1F5; border-radius: 4px; overflow: hidden; }
.mg-bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.mg-row.b .mg-bar i { background: #9DBFF5; }
.mg-row b { font-size: 11.5px; font-weight: 900; text-align: right; }
.mg-r { font-size: 11.5px; font-weight: 900; color: var(--green); }

/* --------------------------------------------------------------------------
   運転スケジュール
   -------------------------------------------------------------------------- */
.sch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.sch li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 10px 14px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(30, 42, 68, .05);
}
.sch-t { display: block; font-size: 14px; font-weight: 900; color: var(--blue-d); margin-bottom: 7px; }
.sch-ic {
  display: inline-flex; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: var(--blue-pale); border-radius: 50%;
  margin-bottom: 8px;
}
.sch-svg { color: var(--blue); display: inline-flex; }
.sch-x { display: block; font-size: 11px; color: var(--ink2); font-weight: 700; line-height: 1.7; }
.sch-note { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.sch-lead { text-align: center; font-size: 14px; font-weight: 700; color: var(--blue-d); margin: -10px 0 22px; }

/* --------------------------------------------------------------------------
   安心設計 ＋ 全業種対応
   -------------------------------------------------------------------------- */
.guard { background: #fff; }
.ind-lead { font-size: 13.5px; font-weight: 700; color: var(--ink2); margin: -8px 0 14px; }
.g-duo { display: grid; gap: 44px; }
.sf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.sf {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 12px;
  text-align: center;
}
.sf-ic {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--blue-pale); border-radius: 50%;
  margin-bottom: 6px;
}
.sf-svg { color: var(--blue); display: inline-flex; }
.sf b { display: block; font-size: 12px; font-weight: 900; line-height: 1.6; margin-bottom: 2px; }
.sf > span { font-size: 10.5px; color: var(--ink2); line-height: 1.6; display: block; }
.sf-note { font-size: 12px; color: var(--ink2); font-weight: 700; text-align: center; }

.ind-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.ind-chips li {
  font-size: 13px; font-weight: 700; color: var(--blue-d);
  background: #fff; border: 1.5px solid var(--blue);
  border-radius: 999px; padding: 7px 18px;
}
.ind-note { font-size: 12.5px; color: var(--ink2); }

/* --------------------------------------------------------------------------
   料金
   -------------------------------------------------------------------------- */
.pl2 {
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(30, 42, 68, .1);
}
.pricing { background: var(--blue-bg); }
.pl2-left {
  background: linear-gradient(165deg, var(--blue), var(--blue-d));
  color: #fff;
  padding: 28px 24px;
  display: grid; align-content: center; justify-items: center; gap: 4px;
  text-align: center;
}
.pl2-name {
  font-size: 17px; font-weight: 900;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 5px 22px;
  margin-bottom: 12px;
}
.pl2-p { padding: 2px 0; }
.pl2-p span {
  display: block; font-size: 12px; font-weight: 700; opacity: .8;
  margin-bottom: 1px;
}
.pl2-p b { font-size: 26px; font-weight: 900; line-height: 1.25; color: #fff; }
.pl2-p b small { font-size: 13px; margin-left: 2px; font-weight: 700; }
.pl2-p.main {
  border-top: 1px solid rgba(255, 255, 255, .25);
  margin-top: 8px; padding-top: 12px; width: 100%;
}
.pl2-p.main b { font-size: 44px; color: var(--yellow); }
.pl2-p.main b small { font-size: 16px; color: var(--yellow); }
.pl2-right { padding: 24px 22px; }
.pl2-inc { display: grid; gap: 9px; }
.pl2-inc li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pl2-inc .ck { flex: none; margin-top: 4px; }
.pl-illust { width: 140px; margin: 16px 0 0 auto; }
.pl2-note { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--red); margin-top: 18px; }

/* --------------------------------------------------------------------------
   導入はシンプル
   -------------------------------------------------------------------------- */
.st-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.st-list li {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 12px 18px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(30, 42, 68, .05);
}
.st-n {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.st-ic {
  display: inline-flex; width: 58px; height: 58px;
  align-items: center; justify-content: center;
  background: var(--blue-pale); border-radius: 50%;
  margin-bottom: 8px;
}
.st-svg { color: var(--blue); display: inline-flex; }
.st-list b { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.6; }
.st-note { text-align: center; font-size: 14.5px; font-weight: 900; color: var(--blue-d); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--blue-bg); }
.qa2-grid { display: grid; gap: 12px; }
.qa2 {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
}
.qa2-q { display: flex; align-items: baseline; gap: 9px; font-size: 14px; font-weight: 900; margin-bottom: 5px; }
.qa2-q span {
  flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(3px);
}
.qa2-a { font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.faq-fig { display: flex; justify-content: flex-end; margin-top: 6px; }
.faq-illust { width: 160px; }

/* --------------------------------------------------------------------------
   最終CTA / フッター
   -------------------------------------------------------------------------- */
.final {
  background:
    radial-gradient(700px 300px at 50% 120%, rgba(37, 99, 235, .35), transparent 65%),
    linear-gradient(180deg, var(--navy), var(--navy-d));
  color: #fff;
  text-align: center;
  padding: 66px 0;
}
.fin-h {
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.6; font-weight: 900;
  margin-bottom: 12px;
}
.fin-h .ln { display: block; }
.fin-sub { font-size: 13.5px; color: #BCC7DA; font-weight: 500; margin-bottom: 28px; }

.ft { background: #101827; color: #8A97A9; padding: 28px 0 96px; font-size: 12px; }
.ft-op { font-weight: 700; color: #BCC7DA; }
.ft-note { margin: 3px 0 12px; }
.ft-cp { font-size: 11px; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   追従CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .25s ease;
  display: flex; justify-content: center;
}
.sticky-cta.on { transform: translateY(0); }
.sticky-cta .btn { width: 100%; max-width: 430px; justify-content: center; }

/* --------------------------------------------------------------------------
   デスクトップ
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body { font-size: 15.5px; }
  .sec { padding: 76px 0; }

  .fv-in {
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
    padding: 48px 20px 64px;
    gap: 26px;
  }
  /* 2カラム時: コピー列の幅(約50.5%)に1行目13文字が収まるサイズ */
  .fv-h1 { font-size: min(42px, calc((min(100vw, 1180px) - 66px) * 0.505 / 13.4)); }
  /* デスクトップ: カンプ通りの重ねコラージュに切替 */
  .fv-visual { display: block; min-height: 500px; }
  .v-badge { position: absolute; top: 0; right: 0; justify-self: auto; }
  .v-main { position: absolute; top: 48px; left: 22%; right: 0; max-width: 380px; }
  .v-cards { position: absolute; top: 66px; left: 0; display: grid; grid-template-columns: 1fr; gap: 9px; }
  .v-cards .vc { width: max-content; max-width: 195px; }
  .v-cal { position: absolute; right: 0; top: 245px; width: min(320px, 78%); }
  .v-note { position: absolute; left: 0; bottom: 0; }

  .pain-grid { grid-template-columns: repeat(4, 1fr); }
  .pain-img { width: 100%; max-width: 190px; }

  .flow6 { grid-template-columns: repeat(6, 1fr); }
  .flow6 li:not(:last-child)::after {
    content: "▶"; position: absolute; right: -13px; top: 50%;
    transform: translateY(-50%);
    color: var(--blue); font-size: 11px; z-index: 2;
  }
  .flow6-result { font-size: 17px; }

  .fx-grid { grid-template-columns: 1fr 1fr; }
  .sch { grid-template-columns: repeat(6, 1fr); }
  .sf-grid { grid-template-columns: repeat(3, 1fr); }

  .pl2 { grid-template-columns: 320px 1fr; }
  .pl2-inc { grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .pl2-right { padding: 30px 28px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
  .pl2-inc { grid-column: 1; align-self: start; }
  .pl-illust { grid-column: 2; width: 160px; margin: 0; }

  .st-list { grid-template-columns: repeat(4, 1fr); }
  .st-list li:not(:last-child)::after {
    content: "▶"; position: absolute; right: -13px; top: 50%;
    transform: translateY(-50%);
    color: var(--blue); font-size: 11px; z-index: 2;
  }

  .qa2-grid { grid-template-columns: 1fr 1fr; }
  .faq-fig { margin-top: -40px; }
  .faq-illust { width: 190px; }

  .sticky-cta { justify-content: flex-end; padding-right: 26px; background: none; border: none; backdrop-filter: none; }
  .sticky-cta .btn { width: auto; }
}

/* 安心設計＋全業種対応の横並びは広い画面だけ */
@media (min-width: 1120px) {
  .g-duo { grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: start; }
}
@media (min-width: 900px) {
  .cmp-scroll { margin: 0; padding: 0; }
}