/* =========================================================
   CoreAX Fusion CSS — 11セクション + スライド演出
   ========================================================= */
:root{
  --fx-primary:#0066ff;
  --fx-dark:#0a2540;
  --fx-accent:#00c389;
  --fx-warn:#ff6b35;
  --fx-bg:#f6f8fc;
  --fx-bg-lite:#f0f7ff;
  --fx-text:#1a2738;
  --fx-muted:#5a6478;
  --fx-border:#e5e9f0;
  --fx-radius:18px;
  --fx-shadow:0 4px 16px rgba(10,37,64,.06);
  --fx-shadow-hover:0 12px 32px rgba(10,37,64,.12);
}

/* ---------- プログレスバー ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:transparent;pointer-events:none;}
.fx-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--fx-primary),var(--fx-accent));transition:width .1s linear;}

/* ---------- スクロールリビール (fade-up) ---------- */
.fx-reveal{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.fx-reveal.is-shown{opacity:1;transform:translateY(0);}
.fx-reveal-d1{transition-delay:.1s;}
.fx-reveal-d2{transition-delay:.2s;}
.fx-reveal-d3{transition-delay:.3s;}
.fx-reveal-d4{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){
  .fx-reveal{opacity:1;transform:none;transition:none;}
  .fx-progress-bar{transition:none;}
}

/* ---------- セクション共通 ---------- */
.fx-sec{padding:96px 20px;max-width:1120px;margin:0 auto;}
.fx-sec h2{font-size:36px;line-height:1.35;color:var(--fx-dark);margin:0 0 12px;font-weight:800;letter-spacing:-.02em;}
.fx-sec h2 .accent{color:var(--fx-primary);}
.fx-sec .lead{font-size:17px;line-height:1.85;color:var(--fx-muted);margin:0 0 40px;max-width:760px;}
.fx-sec-bg{background:var(--fx-bg-lite);}
.fx-sec-bg-dark{background:var(--fx-dark);color:#fff;}
.fx-sec-bg-dark h2{color:#fff;}
.fx-sec-bg-dark .lead{color:rgba(255,255,255,.85);}
@media (max-width:768px){
  .fx-sec{padding:64px 16px;}
  .fx-sec h2{font-size:26px;}
  .fx-sec .lead{font-size:15px;margin-bottom:28px;}
}

/* ---------- 微小マイクロコピー (CTA前) ---------- */
.fx-micro{font-size:13px;color:var(--fx-muted);text-align:center;margin:8px 0 16px;}

/* =========================================================
   ② 課題×解決 2カラムカード (6項目)
   ========================================================= */
.fx-issues{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0;}
.fx-issue{background:#fff;border:1px solid var(--fx-border);border-radius:var(--fx-radius);overflow:hidden;box-shadow:var(--fx-shadow);transition:transform .3s ease,box-shadow .3s ease;}
.fx-issue:hover{transform:translateY(-4px);box-shadow:var(--fx-shadow-hover);}
.fx-issue .icon{font-size:32px;padding:20px 20px 0;}
.fx-issue .title{font-size:16px;font-weight:800;color:var(--fx-dark);padding:8px 20px 12px;line-height:1.5;}
.fx-issue .pain{background:#fff5f0;padding:14px 20px;font-size:13px;color:#b04a14;line-height:1.7;border-top:1px solid #ffd9c2;}
.fx-issue .pain::before{content:"▼ 課題";display:block;font-size:10px;font-weight:700;color:#ff6b35;letter-spacing:.1em;margin-bottom:4px;}
.fx-issue .gain{background:#e6fff5;padding:14px 20px;font-size:13px;color:#006b48;line-height:1.7;border-top:1px solid #b3f0d4;}
.fx-issue .gain::before{content:"▲ CoreAXで解決";display:block;font-size:10px;font-weight:700;color:#00a070;letter-spacing:.1em;margin-bottom:4px;}
@media (max-width:768px){.fx-issues{grid-template-columns:1fr;gap:14px;}}

/* =========================================================
   ③ CoreAXでできること: 3機能カード + UI風図解
   ========================================================= */
.fx-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0;}
.fx-feature{background:#fff;border:1px solid var(--fx-border);border-radius:var(--fx-radius);overflow:hidden;box-shadow:var(--fx-shadow);display:flex;flex-direction:column;}
.fx-feature .visual{background:linear-gradient(135deg,#e6f4ff,#cce8ff);padding:28px 20px;text-align:center;border-bottom:1px solid var(--fx-border);}
.fx-feature .visual svg{width:100%;max-width:200px;height:auto;}
.fx-feature .body{padding:24px;flex:1;display:flex;flex-direction:column;}
.fx-feature h3{font-size:18px;color:var(--fx-dark);margin:0 0 12px;font-weight:800;line-height:1.4;}
.fx-feature .desc{font-size:13.5px;color:var(--fx-muted);line-height:1.8;margin:0 0 14px;}
.fx-feature .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.fx-feature .tags span{font-size:11px;color:var(--fx-primary);background:#f0f7ff;padding:4px 10px;border-radius:999px;font-weight:600;}
@media (max-width:768px){.fx-features{grid-template-columns:1fr;gap:16px;}}

/* =========================================================
   ④ 数字で見るCoreAX (6 KPI集約)
   ========================================================= */
.fx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0;}
.fx-kpi{position:relative;background:#fff;border-radius:var(--fx-radius);padding:28px 20px;text-align:center;box-shadow:var(--fx-shadow);border:1px solid var(--fx-border);overflow:hidden;}
.fx-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--fx-primary),var(--fx-accent));}
.fx-kpi .num{font-size:48px;line-height:1;font-weight:800;color:var(--fx-primary);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-block;}
.fx-kpi .num::after{content:attr(data-suffix);font-size:24px;margin-left:4px;}
.fx-kpi .label{font-size:14px;color:var(--fx-text);margin-top:10px;font-weight:700;}
.fx-kpi .sub{font-size:12px;color:var(--fx-muted);margin-top:4px;line-height:1.6;}
.fx-kpi .badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;margin-top:10px;letter-spacing:.05em;}
.fx-kpi .badge.fact{background:#e6f4ff;color:#0066ff;}
.fx-kpi .badge.est{background:#fff4e6;color:#d97706;}
.fx-kpi .badge.ref{background:#f0f4ff;color:#5b6cff;}
@media (max-width:768px){.fx-kpis{grid-template-columns:1fr;gap:14px;}.fx-kpi .num{font-size:40px;}}

/* =========================================================
   ⑤ 導入前後の業務フロー (Before/After)
   ========================================================= */
.fx-flow-wrap{display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:stretch;margin:32px 0;}
.fx-flow{padding:24px;border-radius:var(--fx-radius);box-shadow:var(--fx-shadow);}
.fx-flow.before{background:#fff5f0;border:1px solid #ffd9c2;}
.fx-flow.after{background:#e6fff5;border:1px solid #b3f0d4;}
.fx-flow h4{font-size:16px;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.fx-flow.before h4{color:#b04a14;}
.fx-flow.after h4{color:#006b48;}
.fx-flow-step{background:rgba(255,255,255,.7);padding:12px 16px;border-radius:10px;font-size:14px;color:var(--fx-text);margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.fx-flow-step .ico{font-size:18px;}
.fx-flow-arrow-vertical{text-align:center;font-size:14px;color:var(--fx-muted);margin:4px 0;}
.fx-flow-divider{display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--fx-primary);}
.fx-flow-divider .arrow{animation:fx-pulse 2s ease-in-out infinite;}
@keyframes fx-pulse{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@media (max-width:768px){
  .fx-flow-wrap{grid-template-columns:1fr;}
  .fx-flow-divider{padding:8px 0;}
  .fx-flow-divider .arrow{transform:rotate(90deg);}
  @keyframes fx-pulse{0%,100%{transform:rotate(90deg) translateX(0);}50%{transform:rotate(90deg) translateX(8px);}}
}

/* =========================================================
   ⑤-2 FLOW COMPARE v2（横並び対応型・案A）
   既存 .fx-flow-* を新命名で上書き。後ろに置くことで優先。
   ========================================================= */
.fx-flow-compare{
  background:#fff;
  border-radius:var(--fx-radius);
  padding:32px 24px;
  box-shadow:var(--fx-shadow);
  margin:32px auto;
  max-width:900px;
}

/* ---------- ヘッダー（Before / After ラベル） ---------- */
.fx-flow-compare .fx-flow-header{
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:12px;
  margin-bottom:24px;
  align-items:center;
}
.fx-flow-col-label{
  text-align:center;
  padding:14px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.fx-flow-col-label.before{
  background:linear-gradient(135deg,#fff5f0,#ffe9dc);
  border:1px solid #ffd9c2;
}
.fx-flow-col-label.after{
  background:linear-gradient(135deg,#e6fff5,#cff5e3);
  border:1px solid #b3f0d4;
}
.fx-flow-col-label.spacer{background:none;border:none;}
.fx-flow-col-label .badge{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
}
.fx-flow-col-label.before .badge{color:#b04a14;}
.fx-flow-col-label.after .badge{color:#006b48;}
.fx-flow-col-label .label{
  font-size:12px;
  color:var(--fx-muted);
  font-weight:600;
}

/* ---------- 各行（Before セル → After セル） ---------- */
.fx-flow-compare .fx-flow-row{
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  position:relative;
}
/* 各行の縦ライン（次の行へ繋がる） */
.fx-flow-compare .fx-flow-row:not(:last-of-type)::before{
  content:"";
  position:absolute;
  left:calc(50% - 100px - 12px);
  top:100%;
  width:2px;
  height:10px;
  background:linear-gradient(to bottom,#ffd9c2,transparent);
  transform:translateX(-50%);
}
.fx-flow-compare .fx-flow-row:not(:last-of-type)::after{
  content:"";
  position:absolute;
  right:calc(50% - 100px - 12px);
  top:100%;
  width:2px;
  height:10px;
  background:linear-gradient(to bottom,#b3f0d4,transparent);
  transform:translateX(50%);
}

/* ---------- セル（各ステップ） ---------- */
.fx-flow-cell{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.fx-flow-cell.before{
  background:#fff5f0;
  border:1px solid #ffd9c2;
  color:#7a3a10;
}
.fx-flow-cell.after{
  background:#e6fff5;
  border:1px solid #b3f0d4;
  color:#004d35;
}
.fx-flow-cell .ico{
  font-size:24px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:1;
}
.fx-flow-cell .txt{flex:1;}

/* ---------- 中央の矢印（v2上書き：行内の小矢印） ---------- */
.fx-flow-compare .fx-flow-arrow{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:var(--fx-primary);
  animation:fx-arrow-bounce 1.8s ease-in-out infinite;
}
@keyframes fx-arrow-bounce{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(6px);}
}
@media (prefers-reduced-motion:reduce){
  .fx-flow-compare .fx-flow-arrow{animation:none;}
}

/* ---------- 末尾サマリー ---------- */
.fx-flow-summary{
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:12px;
  align-items:center;
  margin-top:32px;
  padding-top:24px;
  border-top:2px dashed var(--fx-border);
}
.fx-flow-sum-card{
  text-align:center;
  padding:18px;
  border-radius:12px;
  font-size:15px;
  line-height:1.6;
}
.fx-flow-sum-card.before{
  background:linear-gradient(135deg,#fff0e8,#ffe0cc);
  color:#7a3a10;
  border:1px solid #ffc9a8;
}
.fx-flow-sum-card.after{
  background:linear-gradient(135deg,#d4f7e6,#a8edc8);
  color:#004d35;
  border:1px solid #8ce0b3;
  box-shadow:0 4px 14px rgba(0,195,137,.15);
}
.fx-flow-sum-arrow{
  text-align:center;
  font-size:32px;
  color:var(--fx-primary);
  font-weight:800;
}

/* ---------- モバイル（縦積み・ペアごとに背景でグルーピング） ---------- */
@media (max-width:768px){
  .fx-flow-compare{padding:20px 14px;}
  .fx-flow-compare .fx-flow-header,
  .fx-flow-compare .fx-flow-row,
  .fx-flow-summary{
    grid-template-columns:1fr;
    gap:6px;
  }
  .fx-flow-compare .fx-flow-row{
    background:#f8fafd;
    border-radius:12px;
    padding:8px;
    margin-bottom:14px;
  }
  .fx-flow-compare .fx-flow-row::before,
  .fx-flow-compare .fx-flow-row::after{display:none;}
  .fx-flow-compare .fx-flow-arrow{
    transform:rotate(90deg);
    padding:4px 0;
    font-size:18px;
  }
  @keyframes fx-arrow-bounce{
    0%,100%{transform:rotate(90deg) translateX(0);}
    50%{transform:rotate(90deg) translateX(6px);}
  }
  .fx-flow-col-label.spacer{display:none;}
  .fx-flow-col-label{padding:8px;}
  .fx-flow-col-label .badge{font-size:12px;}
  .fx-flow-sum-arrow{
    transform:rotate(90deg);
    padding:8px 0;
  }
  .fx-flow-cell{
    font-size:13.5px;
    padding:12px 14px;
  }
  .fx-flow-cell .ico{font-size:22px;width:28px;height:28px;}
}

/* =========================================================
   ⑥ AGV・有線DAS・CoreAX 3者比較
   ========================================================= */
.fx-vs3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0;}
.fx-vs3-card{border-radius:var(--fx-radius);padding:24px;box-shadow:var(--fx-shadow);display:flex;flex-direction:column;}
.fx-vs3-card.agv{background:linear-gradient(160deg,#f8f9fb,#eef1f7);border:1px solid #d6dde8;}
.fx-vs3-card.wired{background:linear-gradient(160deg,#fffbe6,#fff4cc);border:1px solid #ffe4a3;}
.fx-vs3-card.coreax{background:linear-gradient(160deg,#e6f4ff,#cce8ff);border:1px solid #99d1ff;position:relative;}
.fx-vs3-card.coreax::after{content:"おすすめ";position:absolute;top:-12px;right:16px;background:var(--fx-warn);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(255,107,53,.35);}
.fx-vs3-card .head{font-size:18px;font-weight:800;margin:0 0 4px;}
.fx-vs3-card.agv .head{color:var(--fx-muted);}
.fx-vs3-card.wired .head{color:#a87800;}
.fx-vs3-card.coreax .head{color:var(--fx-primary);}
.fx-vs3-card .sub{font-size:12px;color:var(--fx-muted);margin:0 0 16px;font-weight:600;}
.fx-vs3-card dl{margin:0;flex:1;}
.fx-vs3-card dt{font-size:11px;color:var(--fx-muted);font-weight:700;letter-spacing:.05em;margin-top:10px;}
.fx-vs3-card dd{margin:2px 0 0;font-size:13.5px;color:var(--fx-text);line-height:1.6;font-weight:600;}
@media (max-width:768px){.fx-vs3{grid-template-columns:1fr;gap:14px;}}

/* =========================================================
   ⑦ 業種別の活用シーン (5業種カード)
   ========================================================= */
.fx-industries{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0;}
.fx-industries .item{background:#fff;border:1px solid var(--fx-border);border-radius:var(--fx-radius);padding:24px;box-shadow:var(--fx-shadow);transition:transform .3s,box-shadow .3s;}
.fx-industries .item:hover{transform:translateY(-4px);box-shadow:var(--fx-shadow-hover);}
.fx-industries .item .biz{font-size:14px;font-weight:800;color:var(--fx-dark);margin:0 0 6px;display:flex;align-items:center;gap:8px;}
.fx-industries .item .biz .ico{font-size:20px;}
.fx-industries .item dl{margin:8px 0 0;}
.fx-industries .item dt{font-size:11px;color:var(--fx-primary);font-weight:700;letter-spacing:.05em;margin-top:10px;}
.fx-industries .item dd{margin:2px 0 0;font-size:13px;color:var(--fx-text);line-height:1.7;}
@media (max-width:768px){.fx-industries{grid-template-columns:1fr;gap:14px;}}

/* =========================================================
   ⑧ 導入までの流れ (5ステップ)
   ========================================================= */
.fx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:32px 0;position:relative;}
.fx-step{background:#fff;border:1px solid var(--fx-border);border-radius:var(--fx-radius);padding:20px 14px;text-align:center;box-shadow:var(--fx-shadow);position:relative;transition:transform .3s;}
.fx-step:hover{transform:translateY(-4px);}
.fx-step .n{width:36px;height:36px;border-radius:50%;background:var(--fx-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;margin-bottom:10px;}
.fx-step h4{font-size:13px;color:var(--fx-dark);margin:0 0 6px;font-weight:700;line-height:1.4;}
.fx-step p{font-size:11.5px;color:var(--fx-muted);line-height:1.6;margin:0;}
@media (max-width:768px){.fx-steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.fx-steps{grid-template-columns:1fr;}}

/* =========================================================
   ⑨ ROI シミュレーター
   ========================================================= */
.fx-roi{background:linear-gradient(135deg,#e6f4ff 0%,#fff 60%);border-radius:var(--fx-radius);padding:40px;border:1px solid #cce8ff;}
.fx-roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.fx-roi h3{font-size:17px;margin:0 0 20px;color:var(--fx-dark);font-weight:700;}
.fx-roi-field{margin-bottom:16px;}
.fx-roi-field label{display:block;font-size:13px;font-weight:600;color:var(--fx-text);margin-bottom:6px;}
.fx-roi-field input{width:100%;padding:12px 14px;border:1.5px solid var(--fx-border);border-radius:10px;font-size:15px;font-variant-numeric:tabular-nums;background:#fff;transition:border-color .2s;}
.fx-roi-field input:focus{outline:none;border-color:var(--fx-primary);}
.fx-roi-result-line{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--fx-border);}
.fx-roi-result-line:last-of-type{border-bottom:0;}
.fx-roi-result-line .l{font-size:13px;color:var(--fx-muted);}
.fx-roi-result-line .v{font-size:18px;font-weight:800;color:var(--fx-primary);font-variant-numeric:tabular-nums;}
.fx-roi-total{margin-top:16px;padding:18px;background:var(--fx-primary);color:#fff;border-radius:12px;display:flex;justify-content:space-between;align-items:baseline;box-shadow:0 8px 20px rgba(0,102,255,.25);}
.fx-roi-total .l{font-size:14px;font-weight:700;}
.fx-roi-total .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;}
@media (max-width:768px){.fx-roi{padding:24px;}.fx-roi-grid{grid-template-columns:1fr;gap:20px;}}

/* =========================================================
   ⑩ FAQ
   ========================================================= */
.fx-faq details{background:#fff;border:1px solid var(--fx-border);border-radius:14px;margin-bottom:12px;padding:0 24px;transition:all .2s;}
.fx-faq details:hover{border-color:var(--fx-primary);}
.fx-faq details[open]{box-shadow:var(--fx-shadow);}
.fx-faq summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:700;color:var(--fx-dark);position:relative;padding-right:36px;font-size:15px;line-height:1.5;}
.fx-faq summary::-webkit-details-marker{display:none;}
.fx-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:var(--fx-primary);font-weight:300;transition:transform .2s;}
.fx-faq details[open] summary::after{content:"−";}
.fx-faq .a{padding:0 0 22px;color:var(--fx-text);line-height:1.9;font-size:14px;}

/* =========================================================
   CTA バナー (FAQ後)
   ========================================================= */
.fx-cta-banner{background:linear-gradient(135deg,var(--fx-dark) 0%,var(--fx-primary) 100%);color:#fff;border-radius:var(--fx-radius);padding:48px;margin:48px 0;text-align:center;position:relative;overflow:hidden;}
.fx-cta-banner::before{content:"";position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);pointer-events:none;}
.fx-cta-banner h3{font-size:26px;margin:0 0 12px;font-weight:800;line-height:1.4;position:relative;}
.fx-cta-banner p{font-size:15px;opacity:.9;margin:0 0 24px;position:relative;}
.fx-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;}
.fx-cta-btn{text-decoration:none;padding:14px 28px;border-radius:12px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;min-width:200px;justify-content:center;transition:transform .2s,box-shadow .2s;}
.fx-cta-btn:hover{transform:translateY(-2px);}
.fx-cta-btn.primary{background:#fff;color:var(--fx-primary);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.fx-cta-btn.primary:hover{box-shadow:0 12px 32px rgba(0,0,0,.3);}
.fx-cta-btn.outline{background:transparent;color:#fff;border:2px solid #fff;}
.fx-cta-btn.outline:hover{background:rgba(255,255,255,.1);}
@media (max-width:768px){
  .fx-cta-banner{padding:32px 20px;}
  .fx-cta-banner h3{font-size:20px;}
  .fx-cta-row{flex-direction:column;}
  .fx-cta-btn{width:100%;}
}

/* ---------- 効果数値の出典 ---------- */
.fx-basis{background:#f8fafd;border-left:4px solid var(--fx-primary);border-radius:0 var(--fx-radius) var(--fx-radius) 0;padding:24px 28px;margin:24px 0;}
.fx-basis h4{font-size:14px;color:var(--fx-dark);margin:0 0 12px;font-weight:700;}
.fx-basis dl{margin:0;}
.fx-basis dt{font-weight:700;color:var(--fx-primary);font-size:13px;margin-top:8px;}
.fx-basis dt .tag{display:inline-block;background:#e6f4ff;color:var(--fx-primary);font-size:10px;padding:2px 8px;border-radius:4px;margin-left:6px;font-weight:700;}
.fx-basis dd{margin:0 0 6px;color:var(--fx-muted);font-size:13px;line-height:1.7;}

.fx-note{display:block;font-size:12px;color:var(--fx-muted);margin-top:10px;line-height:1.7;}


/* ============================================================
   ===== ROI BUTTON + OPTIN =====
   試算ボタン押下式に変更 + データ蓄積オプトイン
   2026-05-13 追加
   ============================================================ */

.fx-roi-calc-btn {
  width: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--fx-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 102, 255, .3);
  transition: transform .2s, box-shadow .2s;
}
.fx-roi-calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, .4);
}
.fx-roi-calc-btn:disabled {
  background: #9bb5d6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fx-roi-privacy {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fx-muted);
  line-height: 1.55;
}
.fx-roi-privacy a {
  color: var(--fx-primary);
  text-decoration: underline;
}

.fx-roi-optin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fx-text);
  cursor: pointer;
  user-select: none;
}
.fx-roi-optin input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.fx-roi-status {
  margin-top: 8px;
  font-size: 12px;
  color: #00a070;
  text-align: right;
  min-height: 18px;
  font-weight: 600;
}
.fx-roi-status.is-done::before {
  content: "✓ ";
  font-weight: 700;
}

/* フォーム内に試算結果コピー通知 */
.fx-roi-injected-notice {
  background: #e6f4ff;
  border-left: 3px solid var(--fx-primary, #0066ff);
  padding: 10px 14px;
  font-size: 13px;
  color: #0066ff;
  border-radius: 6px;
  margin-bottom: 12px;
  font-weight: 600;
  transition: opacity .6s ease;
}

@media (max-width: 768px) {
  .fx-roi-calc-btn { font-size: 14px; padding: 12px 16px; }
  .fx-roi-privacy { font-size: 11px; }
}

/* ============================================================
   ===== ROI BUTTON + OPTIN END =====
   ============================================================ */

/* ============================================================
   ===== CASES SIMPLIFY v2 START (1行ミニカード型・案A) =====
   ============================================================ */

.fx-case-list{
  background:#fff;
  border-radius:var(--fx-radius);
  box-shadow:var(--fx-shadow);
  padding:8px 0;
  margin:24px auto;
  max-width:900px;
}

.fx-case-mini{
  padding:20px 24px;
  border-bottom:1px solid var(--fx-border);
  transition:background .2s;
}
.fx-case-mini:last-child{border-bottom:0;}
.fx-case-mini:hover{background:#f8fafd;}

.fx-case-mini-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
.fx-case-mini-icon{
  font-size:28px;
  line-height:1;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e6f4ff,#cce8ff);
  border-radius:50%;
  flex-shrink:0;
}
.fx-case-mini-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fx-case-mini-title strong{
  font-size:16px;
  color:var(--fx-dark);
  font-weight:800;
}
.fx-case-mini-scale{
  font-size:12px;
  color:var(--fx-muted);
}

.fx-case-mini-summary{
  font-size:14.5px;
  line-height:1.7;
  color:var(--fx-text);
  margin:4px 0 0 58px;
}

/* 代表KPIバッジ（右側に大きく1つ） */
.fx-case-mini-kpi{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:linear-gradient(135deg,var(--fx-primary),var(--fx-accent));
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,102,255,.25);
  margin-left:58px;
  margin-top:10px;
}
.fx-case-mini-kpi .num{
  font-size:26px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.fx-case-mini-kpi .unit{
  font-size:16px;
  margin-left:2px;
}
.fx-case-mini-kpi .label{
  font-size:12px;
  font-weight:600;
  opacity:.95;
}

/* 詳細アコーディオン */
.fx-case-mini-detail{
  margin:14px 0 0 58px;
}
.fx-case-mini-detail > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--fx-primary);
  padding:6px 14px;
  border:1px solid var(--fx-primary);
  border-radius:999px;
  transition:all .2s;
}
.fx-case-mini-detail > summary::-webkit-details-marker{display:none;}
.fx-case-mini-detail > summary::after{content:" ▼";font-size:10px;}
.fx-case-mini-detail[open] > summary::after{content:" ▲";}
.fx-case-mini-detail > summary:hover{
  background:var(--fx-primary);
  color:#fff;
}
.fx-case-mini-detail[open] > summary{
  background:var(--fx-primary);
  color:#fff;
}

.fx-case-mini-flow{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.fx-case-mini-flow .step{
  background:#f8fafd;
  border-left:3px solid var(--fx-primary);
  border-radius:6px;
  padding:10px 12px;
}
.fx-case-mini-flow .step h5{
  font-size:10px;
  color:var(--fx-primary);
  letter-spacing:.1em;
  font-weight:700;
  margin:0 0 4px;
}
.fx-case-mini-flow .step p{
  font-size:12.5px;
  line-height:1.7;
  color:var(--fx-text);
  margin:0;
}

.fx-case-mini-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.fx-case-mini-kpi-row .kpi-item{
  background:#fff;
  border:1px solid var(--fx-border);
  border-radius:8px;
  padding:10px;
  text-align:center;
}
.fx-case-mini-kpi-row .kpi-item .v{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--fx-primary);
  font-variant-numeric:tabular-nums;
}
.fx-case-mini-kpi-row .kpi-item .l{
  display:block;
  font-size:11px;
  color:var(--fx-muted);
  margin-top:2px;
}

/* CTAボタン（事例一覧の最下部） */
.fx-case-list-cta{
  text-align:center;
  padding:24px;
  margin-top:8px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.fx-case-list-cta a{
  display:inline-block;
  padding:14px 28px;
  background:var(--fx-primary);
  color:#fff;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,102,255,.25);
  transition:all .2s;
}
.fx-case-list-cta a:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,102,255,.35);
  color:#fff;
}

/* スマホ対応 */
@media (max-width:768px){
  .fx-case-mini{padding:16px 14px;}
  .fx-case-mini-icon{width:36px;height:36px;font-size:22px;}
  .fx-case-mini-title strong{font-size:14.5px;}
  .fx-case-mini-summary{
    margin-left:0;
    margin-top:8px;
    font-size:13.5px;
  }
  .fx-case-mini-kpi{
    margin-left:0;
    margin-top:10px;
  }
  .fx-case-mini-kpi .num{font-size:22px;}
  .fx-case-mini-detail{margin-left:0;}
  .fx-case-mini-flow,
  .fx-case-mini-kpi-row{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* ============================================================
   ===== CASES SIMPLIFY v2 END =====
   ============================================================ */

/* ============================================================
   ===== CASE-MINI SPACING v3 START（余白詰め・右側KPI配置） =====
   既存 .fx-case-mini を grid-template-areas で上書き
   ============================================================ */
.fx-case-mini{
  padding:20px 24px;
  border-bottom:1px solid var(--fx-border);
  transition:background .2s;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "head     kpi"
    "summary  kpi"
    "detail   detail";
  gap:8px 24px;
  align-items:center;
}
.fx-case-mini:last-child{border-bottom:0;}
.fx-case-mini:hover{background:#f8fafd;}

.fx-case-mini > .fx-case-mini-head{
  grid-area:head;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:0;
}
.fx-case-mini-icon{
  font-size:28px;
  line-height:1;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e6f4ff,#cce8ff);
  border-radius:50%;
  flex-shrink:0;
}
.fx-case-mini-title{display:flex;flex-direction:column;gap:2px;}
.fx-case-mini-title strong{
  font-size:16px;
  color:var(--fx-dark);
  font-weight:800;
  line-height:1.4;
}
.fx-case-mini-scale{font-size:12px;color:var(--fx-muted);}

.fx-case-mini > .fx-case-mini-summary{
  grid-area:summary;
  font-size:14.5px;
  line-height:1.7;
  color:var(--fx-text);
  margin:0;
  padding-left:52px;
}

.fx-case-mini > .fx-case-mini-kpi{
  grid-area:kpi;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--fx-primary),var(--fx-accent));
  color:#fff;
  padding:14px 20px;
  border-radius:12px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,102,255,.25);
  min-width:140px;
  text-align:center;
  align-self:center;
  margin:0;
}
.fx-case-mini > .fx-case-mini-kpi .num{
  font-size:28px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.fx-case-mini > .fx-case-mini-kpi .unit{font-size:16px;margin-left:2px;}
.fx-case-mini > .fx-case-mini-kpi .label{
  font-size:11.5px;
  font-weight:600;
  opacity:.95;
  margin-top:4px;
  letter-spacing:.02em;
}

.fx-case-mini > .fx-case-mini-detail{
  grid-area:detail;
  margin:6px 0 0 52px;
}

/* スマホ：縦並びに戻す */
@media (max-width:768px){
  .fx-case-mini{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "summary"
      "kpi"
      "detail";
    gap:8px 0;
    padding:16px 14px;
  }
  .fx-case-mini > .fx-case-mini-summary{
    padding-left:0;
    margin-top:4px;
    font-size:13.5px;
  }
  .fx-case-mini > .fx-case-mini-kpi{
    flex-direction:row;
    gap:6px;
    align-items:baseline;
    padding:10px 16px;
    min-width:0;
    align-self:flex-start;
    margin-top:6px;
  }
  .fx-case-mini > .fx-case-mini-kpi .num{font-size:22px;}
  .fx-case-mini > .fx-case-mini-kpi .label{margin-top:0;}
  .fx-case-mini > .fx-case-mini-detail{margin-left:0;}
}
/* ===== CASE-MINI SPACING v3 END ===== */


/* ============================================================
   ===== PRODUCTIVITY DASHBOARD PREVIEW v3 START =====
   #features セクション内の3機能カード直後に配置されるバナー
   ============================================================ */
.fx-dashboard-preview{
  background:linear-gradient(135deg,#f0f7ff,#fff);
  border:1px solid #cce8ff;
  border-radius:var(--fx-radius);
  padding:24px;
  margin:32px auto 0;
  box-shadow:var(--fx-shadow);
  max-width:900px;
}

.fx-dashboard-preview-head{
  margin-bottom:18px;
}
.fx-dashboard-preview-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.fx-dashboard-preview-title .ico{
  font-size:28px;
  flex-shrink:0;
  line-height:1;
}
.fx-dashboard-preview-title strong{
  display:block;
  font-size:16px;
  color:var(--fx-dark);
  font-weight:800;
  line-height:1.4;
}
.fx-dashboard-preview-title .sub{
  display:block;
  font-size:12.5px;
  color:var(--fx-muted);
  margin-top:2px;
}

.fx-dashboard-preview-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.fx-dashboard-card{
  background:#fff;
  border:1px solid var(--fx-border);
  border-radius:12px;
  padding:16px;
}
.fx-dashboard-card h4{
  font-size:14px;
  color:var(--fx-dark);
  margin:0 0 12px;
  font-weight:700;
}
.fx-dashboard-card .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dashed var(--fx-border);
  font-size:13px;
}
.fx-dashboard-card .row:last-child{border-bottom:0;}
.fx-dashboard-card .row .l{
  color:var(--fx-text);
  display:flex;
  align-items:center;
  gap:8px;
}
.fx-dashboard-card .row .v{
  font-weight:800;
  color:var(--fx-primary);
  font-variant-numeric:tabular-nums;
  font-size:14px;
}

.fx-dashboard-card .rank{
  width:20px;
  height:20px;
  border-radius:50%;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fx-dashboard-card .rank-1{background:#ff9500;}
.fx-dashboard-card .rank-2{background:var(--fx-primary);}
.fx-dashboard-card .rank-3{background:#ff9500;opacity:.7;}

.fx-dashboard-preview-cta{
  text-align:center;
  padding-top:16px;
  border-top:1px dashed var(--fx-border);
}
.fx-dashboard-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  background:var(--fx-primary);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  box-shadow:0 4px 14px rgba(0,102,255,.25);
  transition:all .2s;
}
.fx-dashboard-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,102,255,.35);
  color:#fff;
}

@media (max-width:768px){
  .fx-dashboard-preview{padding:18px;}
  .fx-dashboard-preview-body{grid-template-columns:1fr;gap:12px;}
}
/* ===== PRODUCTIVITY DASHBOARD PREVIEW v3 END ===== */

/* ============================================================
   ===== FEATURE TITLE ALIGN v3 START =====
   3機能カードの visual 高さを統一し、h3 タイトルの開始位置を揃える
   ============================================================ */
.fx-feature .visual{
  height:220px !important;
  min-height:220px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box;
}
.fx-feature .body{
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.fx-feature h3{
  min-height:3em;       /* 2行分の高さを確保 */
  margin:0 0 12px;
  display:flex;
  align-items:flex-start;
  line-height:1.4;
}
.fx-feature .desc{
  flex:0 0 auto;
}
@media (max-width:768px){
  .fx-feature .visual{
    height:auto !important;
    min-height:160px !important;
  }
  .fx-feature h3{min-height:0;}
}
/* ===== FEATURE TITLE ALIGN v3 END ===== */

/* ============================================================
   ===== CTA-MERGE v3: 統合CTAバナー強化版 =====
   既存 .fx-cta-banner を上書き（badge / hl / lead / ghost / microcopy 追加）
   ============================================================ */
.fx-cta-banner{
  background:linear-gradient(135deg,var(--fx-dark) 0%,var(--fx-primary) 100%);
  color:#fff;
  border-radius:var(--fx-radius);
  padding:48px 40px;
  margin:48px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.fx-cta-banner::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:60%;
  height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
  pointer-events:none;
}
.fx-cta-banner::after{
  content:"";
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:40%;
  height:150%;
  background:radial-gradient(circle,rgba(0,195,137,.15),transparent 70%);
  pointer-events:none;
}
.fx-cta-banner-content{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
}
.fx-cta-banner h3{
  font-size:28px;
  margin:0 0 16px;
  font-weight:800;
  line-height:1.5;
  color:#fff;
}
.fx-cta-banner h3 .badge{
  display:inline-block;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  padding:6px 16px;
  border-radius:999px;
  font-size:14px;
  margin-bottom:14px;
  letter-spacing:.02em;
}
.fx-cta-banner h3 .hl{
  color:#ffd84d;
  font-weight:800;
}
.fx-cta-banner-lead{
  font-size:15px;
  opacity:.92;
  margin:0 0 28px;
  line-height:1.85;
  color:#fff;
}
.fx-cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.fx-cta-btn{
  text-decoration:none;
  padding:15px 28px;
  border-radius:12px;
  font-weight:700;
  font-size:14.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:200px;
  justify-content:center;
  transition:all .2s;
  white-space:nowrap;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.fx-cta-btn:hover{transform:translateY(-2px);}
.fx-cta-btn.primary{
  background:#fff;
  color:var(--fx-primary);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.fx-cta-btn.primary:hover{box-shadow:0 12px 32px rgba(0,0,0,.35);}
.fx-cta-btn.ghost{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
}
.fx-cta-btn.ghost:hover{background:rgba(255,255,255,.22);color:#fff;}
.fx-cta-btn.outline{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
.fx-cta-btn.outline:hover{background:rgba(255,255,255,.1);color:#fff;}
.fx-cta-microcopy{
  font-size:12.5px;
  opacity:.75;
  margin:0;
  letter-spacing:.02em;
  color:#fff;
}
@media (max-width:768px){
  .fx-cta-banner{padding:36px 20px;}
  .fx-cta-banner h3{font-size:22px;}
  .fx-cta-banner h3 .badge{font-size:12px;padding:4px 12px;}
  .fx-cta-banner-lead{font-size:13.5px;}
  .fx-cta-row{flex-direction:column;}
  .fx-cta-btn{width:100%;min-width:0;}
  .fx-cta-microcopy{font-size:11.5px;}
}
/* ===== CTA-MERGE v3 END ===== */


/* ============================================================
   ===== AGV-VISUAL v3: ポジショニングマップ + 観点別カード =====
   ============================================================ */
.fx-vs-map{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:32px 0 48px;
  position:relative;
}
.fx-vs-map-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.fx-vs-map-purpose{
  font-size:13px;
  color:var(--fx-muted);
  font-weight:600;
  text-align:center;
  background:#f8fafd;
  border:1px dashed var(--fx-border);
  border-radius:999px;
  padding:8px 16px;
  width:100%;
  box-sizing:border-box;
}
.fx-vs-map-arrow{
  font-size:18px;
  color:var(--fx-muted);
  line-height:1;
}
.fx-vs-map-card{
  width:100%;
  padding:24px 16px;
  border-radius:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  transition:transform .25s;
  box-sizing:border-box;
}
.fx-vs-map-card:hover{transform:translateY(-4px);}
.fx-vs-map-card.agv{
  background:linear-gradient(160deg,#f8f9fb,#eef1f7);
  border:1px solid #d6dde8;
}
.fx-vs-map-card.wired{
  background:linear-gradient(160deg,#fffbe6,#fff4cc);
  border:1px solid #ffe4a3;
}
.fx-vs-map-card.coreax{
  background:linear-gradient(160deg,#e6f4ff,#cce8ff);
  border:2px solid var(--fx-primary);
  box-shadow:0 8px 24px rgba(0,102,255,.15);
  transform:scale(1.04);
}
.fx-vs-map-card .ico{font-size:36px;line-height:1;}
.fx-vs-map-card strong{
  font-size:18px;
  font-weight:800;
  color:var(--fx-dark);
}
.fx-vs-map-card.coreax strong{color:var(--fx-primary);}
.fx-vs-map-card .scale{
  font-size:12px;
  color:var(--fx-muted);
}
.fx-vs-map-card .recommend{
  position:absolute;
  top:-12px;
  background:var(--fx-warn);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(255,107,53,.35);
  letter-spacing:.04em;
}

/* 観点別 3秒カード */
.fx-vs-points{
  background:#fff;
  border-radius:var(--fx-radius);
  padding:8px;
  box-shadow:var(--fx-shadow);
  max-width:1000px;
  margin:0 auto;
}
.fx-vs-point{
  border-bottom:1px solid var(--fx-border);
  padding:18px 20px;
}
.fx-vs-point:last-child{border-bottom:0;}
.fx-vs-point-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.fx-vs-point-head .ico{
  font-size:22px;
  width:36px;
  height:36px;
  background:linear-gradient(135deg,#e6f4ff,#f0f7ff);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.fx-vs-point-head strong{
  font-size:16px;
  color:var(--fx-dark);
  font-weight:800;
}
.fx-vs-point-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.fx-vs-point-row .cell{
  padding:12px 14px;
  border-radius:10px;
  font-size:13px;
  line-height:1.6;
  position:relative;
  border:1px solid transparent;
}
.fx-vs-point-row .cell.agv{
  background:#f4f6fa;
  color:#5a6478;
}
.fx-vs-point-row .cell.wired{
  background:#fef9ed;
  color:#9c7a16;
  border-color:#ffe4a3;
}
.fx-vs-point-row .cell.coreax{
  background:linear-gradient(135deg,#e6f4ff,#cce8ff);
  color:var(--fx-dark);
  border-color:var(--fx-primary);
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,102,255,.12);
}
.fx-vs-point-row .cell .who{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  opacity:.7;
  margin-bottom:4px;
}
.fx-vs-point-row .cell.coreax .who{color:var(--fx-primary);opacity:1;}
.fx-vs-point-row .cell .val{display:block;font-size:13.5px;}
.fx-vs-point-row .cell .star{
  position:absolute;
  top:8px;
  right:10px;
  color:var(--fx-warn);
  font-size:14px;
}

/* 3者比較カード（旧「制約事項/優位性」統合） */
.fx-vs-cards{margin:48px 0 0;}
.fx-vs-cards-heading{
  text-align:center;
  font-size:22px;
  font-weight:800;
  color:var(--fx-dark);
  margin:0 0 24px;
}
.fx-vs-cards-heading .accent{color:var(--fx-primary);}
.fx-vs-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.fx-vs-card{
  position:relative;
  background:#fff;
  border:1px solid var(--fx-border);
  border-radius:16px;
  padding:24px 20px;
  box-shadow:var(--fx-shadow);
  display:flex;
  flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.fx-vs-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--fx-shadow-hover);
}
.fx-vs-card.agv{border-top:5px solid #b04a14;}
.fx-vs-card.wired{border-top:5px solid #c69500;}
.fx-vs-card.coreax{
  border:2px solid var(--fx-primary);
  border-top:5px solid var(--fx-primary);
  background:linear-gradient(180deg,#f0f7ff 0%,#fff 50%);
  box-shadow:0 12px 32px rgba(0,102,255,.15);
}
.fx-vs-card-recommend{
  position:absolute;
  top:-14px;
  right:16px;
  background:var(--fx-warn);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(255,107,53,.4);
  letter-spacing:.04em;
  z-index:1;
}
.fx-vs-card-head{
  text-align:center;
  padding-bottom:16px;
  border-bottom:1px solid var(--fx-border);
  margin-bottom:16px;
}
.fx-vs-card-head .ico{
  display:inline-flex;
  width:60px;
  height:60px;
  align-items:center;
  justify-content:center;
  font-size:30px;
  border-radius:50%;
  margin-bottom:10px;
}
.fx-vs-card.agv .ico{background:linear-gradient(135deg,#f8f4f0,#fde4d3);}
.fx-vs-card.wired .ico{background:linear-gradient(135deg,#fffbe6,#fff0b3);}
.fx-vs-card.coreax .ico{background:linear-gradient(135deg,#e6f4ff,#cce8ff);}
.fx-vs-card-head h4{
  font-size:20px;
  font-weight:800;
  color:var(--fx-dark);
  margin:4px 0 4px;
}
.fx-vs-card.coreax .fx-vs-card-head h4{color:var(--fx-primary);}
.fx-vs-card-head .sub{
  font-size:12.5px;
  color:var(--fx-muted);
  margin:0;
}
.fx-vs-card-rows{margin-bottom:18px;}
.fx-vs-card-rows .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  margin-bottom:6px;
  background:#f8fafd;
  border-radius:8px;
  font-size:13px;
  gap:8px;
}
.fx-vs-card-rows .row .l{
  color:var(--fx-muted);
  font-weight:600;
  white-space:nowrap;
}
.fx-vs-card-rows .row .v{
  font-weight:800;
  color:var(--fx-dark);
  text-align:right;
  font-size:13.5px;
}
.fx-vs-card.coreax .fx-vs-card-rows .row{
  background:linear-gradient(90deg,#fff,#e6f4ff);
}
.fx-vs-card.coreax .fx-vs-card-rows .row .v{color:var(--fx-warn);}
.fx-vs-card-rows .delta{
  display:inline-block;
  background:var(--fx-warn);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  margin-left:6px;
  letter-spacing:.02em;
}
.fx-vs-card-list{
  margin-top:auto;
  padding:16px;
  border-radius:10px;
}
.fx-vs-card-list.neg{
  background:#fff5f0;
  border:1px solid #ffd9c2;
}
.fx-vs-card-list.pos{
  background:linear-gradient(135deg,#e6fff5,#cff5e3);
  border:1px solid #b3f0d4;
}
.fx-vs-card-list h5{
  font-size:13px;
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.02em;
}
.fx-vs-card-list.neg h5{color:#b04a14;}
.fx-vs-card-list.pos h5{color:#006b48;}
.fx-vs-card-list ul{margin:0;padding:0;list-style:none;}
.fx-vs-card-list li{
  font-size:12.5px;
  line-height:1.65;
  padding:5px 0 5px 18px;
  position:relative;
}
.fx-vs-card-list.neg li{color:#7a3a10;}
.fx-vs-card-list.pos li{color:#004d35;}
.fx-vs-card-list li::before{
  content:"";
  position:absolute;
  left:4px;
  top:11px;
  width:6px;
  height:6px;
  border-radius:50%;
}
.fx-vs-card-list.neg li::before{background:#ff6b35;}
.fx-vs-card-list.pos li::before{background:#00a070;}

/* 詳細折りたたみ */
.fx-vs-details{margin-top:32px;}
.fx-vs-details > summary{
  cursor:pointer;
  padding:14px 20px;
  background:#fff;
  border:1px solid var(--fx-border);
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  color:var(--fx-dark);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:all .2s;
}
.fx-vs-details > summary::-webkit-details-marker{display:none;}
.fx-vs-details > summary::after{
  content:"▼";
  font-size:12px;
  color:var(--fx-primary);
  transition:transform .2s;
}
.fx-vs-details[open] > summary{
  background:var(--fx-primary);
  color:#fff;
}
.fx-vs-details[open] > summary::after{
  color:#fff;
  transform:rotate(180deg);
}
.fx-vs-table-detail{
  width:100%;
  border-collapse:collapse;
  margin-top:16px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--fx-shadow);
  font-size:13px;
}
.fx-vs-table-detail th,
.fx-vs-table-detail td{
  border:1px solid var(--fx-border);
  padding:12px;
  text-align:left;
  vertical-align:top;
}
.fx-vs-table-detail thead th{
  background:var(--fx-dark);
  color:#fff;
}
.fx-vs-table-detail tbody th{
  background:#f8fafd;
  width:22%;
  color:var(--fx-dark);
}
.fx-vs-table-detail .pos{
  color:var(--fx-primary);
  font-weight:700;
  background:#f0f7ff;
}

/* スマホ対応 */
@media (max-width:768px){
  .fx-vs-map{grid-template-columns:1fr;gap:12px;}
  .fx-vs-map-card.coreax{transform:none;}
  .fx-vs-point{padding:14px;}
  .fx-vs-point-row{gap:6px;}
  .fx-vs-point-row .cell{padding:10px 8px;font-size:11.5px;}
  .fx-vs-point-row .cell .val{font-size:12px;}
  .fx-vs-point-row .cell .star{top:4px;right:6px;font-size:11px;}
  .fx-vs-cards-grid{grid-template-columns:1fr;gap:14px;}
  .fx-vs-card{padding:20px 16px;}
  .fx-vs-card-head h4{font-size:18px;}
  .fx-vs-card-head .ico{width:52px;height:52px;font-size:26px;}
  .fx-vs-card-rows .row{font-size:12.5px;}
  .fx-vs-card-list li{font-size:12px;}
  .fx-vs-cards-heading{font-size:18px;}
  .fx-vs-table-detail,
  .fx-vs-table-detail thead,
  .fx-vs-table-detail tbody,
  .fx-vs-table-detail th,
  .fx-vs-table-detail td,
  .fx-vs-table-detail tr{display:block;width:100%;}
  .fx-vs-table-detail thead{display:none;}
  .fx-vs-table-detail tr{
    border:1px solid var(--fx-border);
    border-radius:10px;
    margin-bottom:10px;
    padding:10px;
    background:#fff;
  }
  .fx-vs-table-detail th,
  .fx-vs-table-detail td{border:0;padding:4px 0;}
  .fx-vs-table-detail td::before{
    content:attr(data-label);
    display:block;
    font-size:10px;
    color:var(--fx-primary);
    font-weight:700;
    letter-spacing:.05em;
    margin-bottom:2px;
  }
}
/* ===== AGV-VISUAL v3 END ===== */

/* ============================================================
   ===== VS WIDTH ALIGNMENT v3 START =====
   AGV比較セクション内の全ブロック幅を 1000px に統一・中央寄せ
   既存 .fx-vs-map / .fx-vs-points / .fx-vs-cards / .fx-vs-details を後勝ちで上書き
   ============================================================ */
.fx-vs-map,
.fx-vs-points,
.fx-vs-cards,
.fx-vs-details{
  max-width:1000px !important;
  width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

/* 上下の余白だけ用途別に微調整 */
.fx-vs-map{
  margin-top:32px !important;
  margin-bottom:48px !important;
}
.fx-vs-cards{
  margin-top:48px !important;
}
.fx-vs-details{
  margin-top:32px !important;
}

/* スマホ / タブレット：左右に16pxの均等余白を確保 */
@media (max-width:1040px){
  .fx-vs-map,
  .fx-vs-points,
  .fx-vs-cards,
  .fx-vs-details{
    max-width:calc(100% - 32px) !important;
  }
}
/* ===== VS WIDTH ALIGNMENT v3 END ===== */

/* ============================================================
   ===== VS CARD ALIGNMENT v3 START =====
   3者比較カード：制約事項/優位性ブロックを下端揃え（flex-grow + min-height）
   既存 .fx-vs-card 関連を後勝ちで上書き
   ============================================================ */
.fx-vs-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.fx-vs-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.fx-vs-card-head{
  flex-shrink:0;
}
/* データ行ブロック：余白を吸収して伸縮 */
.fx-vs-card-rows{
  flex-grow:1;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}
.fx-vs-card-rows .row{
  min-height:48px;
  box-sizing:border-box;
  margin-bottom:0;        /* gap で間隔管理するので個別マージン解除 */
}
/* 制約事項/優位性ブロック：下端に固定 */
.fx-vs-card-list{
  margin-top:auto;
  flex-shrink:0;
}
.fx-vs-card-list ul{
  min-height:120px;       /* 4項目分の最小高さ確保で揃える */
}

/* スマホ：縦積みのため高さ統一は解除 */
@media (max-width:768px){
  .fx-vs-card{height:auto;}
  .fx-vs-card-rows{flex-grow:0;}
  .fx-vs-card-list ul{min-height:auto;}
}
/* ===== VS CARD ALIGNMENT v3 END ===== */

/* ============================================================
   ===== VS TAB + COLOR UNIFY v3 START =====
   AGV比較セクション内の観点別/コスト/詳細表を1タブUIに統合。
   配色を AGV=グレー / 有線DAS=黄 / CoreAX=青 で全ブロック統一。
   ============================================================ */

/* ---- カラートークン ---- */
:root{
  --vs-agv-bg:#f4f6fa;
  --vs-agv-border:#d6dde8;
  --vs-agv-text:#5a6478;
  --vs-agv-stripe:#b8c2d1;

  --vs-wired-bg:#fef9ed;
  --vs-wired-border:#ffe4a3;
  --vs-wired-text:#9c7a16;
  --vs-wired-stripe:#e0b13c;

  --vs-coreax-bg-from:#e6f4ff;
  --vs-coreax-bg-to:#cce8ff;
  --vs-coreax-border:var(--fx-primary);
  --vs-coreax-text:var(--fx-dark);
  --vs-coreax-stripe:var(--fx-primary);
}

/* ---- タブナビゲーション ---- */
.fx-vs-tabs{
  margin-top:40px !important;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.fx-vs-tabnav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  background:#f8fafd;
  padding:8px;
  border-radius:14px;
  margin-bottom:24px;
}
.fx-vs-tab{
  background:transparent;
  border:0;
  padding:14px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:var(--fx-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .2s;
  font-family:inherit;
}
.fx-vs-tab:hover{
  background:#fff;
  color:var(--fx-dark);
}
.fx-vs-tab.is-active{
  background:#fff;
  color:var(--fx-primary);
  box-shadow:0 4px 12px rgba(0,102,255,.15);
}
.fx-vs-tab .tab-ico{font-size:18px;line-height:1;}
.fx-vs-tab .tab-label{white-space:nowrap;}

/* タブパネル */
.fx-vs-tabpanel{display:none;animation:fx-vs-fade .3s ease;}
.fx-vs-tabpanel.is-active{display:block;}
@keyframes fx-vs-fade{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .fx-vs-tabpanel{animation:none;}
}

/* タブ内の子ブロックはマージンを解除して左右はみ出しを防ぐ */
.fx-vs-tabpanel > .fx-vs-points,
.fx-vs-tabpanel > .fx-vs-cards,
.fx-vs-tabpanel > .fx-vs-details{
  margin-top:0 !important;
  max-width:100% !important;
}

@media (max-width:768px){
  .fx-vs-tabnav{grid-template-columns:1fr;gap:6px;padding:6px;}
  .fx-vs-tab{padding:12px;font-size:13px;}
  .fx-vs-tab .tab-label{font-size:12.5px;}
}

/* ---- ★ 配色統一: ポジショニングマップ ---- */
.fx-vs-map-card.agv{
  background:linear-gradient(160deg,var(--vs-agv-bg),#eef1f7) !important;
  border:1px solid var(--vs-agv-border) !important;
}
.fx-vs-map-card.wired{
  background:linear-gradient(160deg,var(--vs-wired-bg),#fff4cc) !important;
  border:1px solid var(--vs-wired-border) !important;
}
.fx-vs-map-card.coreax{
  background:linear-gradient(160deg,var(--vs-coreax-bg-from),var(--vs-coreax-bg-to)) !important;
  border:2px solid var(--vs-coreax-border) !important;
  box-shadow:0 8px 24px rgba(0,102,255,.15) !important;
}

/* ---- ★ 配色統一: タブ① 観点別カード ---- */
.fx-vs-point-row .cell.agv{
  background:var(--vs-agv-bg) !important;
  color:var(--vs-agv-text) !important;
  border:1px solid var(--vs-agv-border) !important;
}
.fx-vs-point-row .cell.wired{
  background:var(--vs-wired-bg) !important;
  color:var(--vs-wired-text) !important;
  border:1px solid var(--vs-wired-border) !important;
}
.fx-vs-point-row .cell.coreax{
  background:linear-gradient(135deg,var(--vs-coreax-bg-from),var(--vs-coreax-bg-to)) !important;
  color:var(--vs-coreax-text) !important;
  border:1px solid var(--vs-coreax-border) !important;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,102,255,.12);
}
.fx-vs-point-row .cell.coreax .who{color:var(--fx-primary) !important;opacity:1;}
.fx-vs-point-row .cell .star{color:var(--fx-primary) !important;}

/* ---- ★ 配色統一: タブ② 3者比較カード（AGV のオレンジ→グレー化） ---- */
.fx-vs-card.agv{
  border:1px solid var(--vs-agv-border) !important;
  border-top:5px solid var(--vs-agv-stripe) !important;
}
.fx-vs-card.wired{
  border:1px solid var(--vs-wired-border) !important;
  border-top:5px solid var(--vs-wired-stripe) !important;
}
.fx-vs-card.coreax{
  border:2px solid var(--vs-coreax-border) !important;
  border-top:5px solid var(--vs-coreax-stripe) !important;
  background:linear-gradient(180deg,#f0f7ff 0%,#fff 50%) !important;
  box-shadow:0 12px 32px rgba(0,102,255,.15) !important;
}
.fx-vs-card.agv .fx-vs-card-head .ico{
  background:linear-gradient(135deg,var(--vs-agv-bg),#e3e8f0) !important;
}
.fx-vs-card.wired .fx-vs-card-head .ico{
  background:linear-gradient(135deg,var(--vs-wired-bg),#fff0b3) !important;
}
.fx-vs-card.coreax .fx-vs-card-head .ico{
  background:linear-gradient(135deg,var(--vs-coreax-bg-from),var(--vs-coreax-bg-to)) !important;
}
.fx-vs-card.coreax .fx-vs-card-rows .row{
  background:linear-gradient(90deg,#fff,var(--vs-coreax-bg-from)) !important;
}

/* ---- ★ 配色統一: タブ③ 詳細表（列ごとに同色） ---- */
.fx-vs-table-detail{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--fx-shadow);
  font-size:13px;
}
.fx-vs-table-detail thead th{
  background:var(--fx-dark);
  color:#fff;
  padding:14px 12px;
  font-weight:700;
  text-align:left;
}
.fx-vs-table-detail thead th.coreax-col{
  background:var(--fx-primary);
  position:relative;
}
.fx-vs-table-detail thead th.coreax-col::after{
  content:"★";
  position:absolute;
  top:8px;
  right:8px;
  font-size:12px;
}
.fx-vs-table-detail tbody th{
  background:#f8fafd;
  color:var(--fx-dark);
  font-weight:700;
  width:22%;
  padding:12px;
  text-align:left;
}
.fx-vs-table-detail td{
  padding:12px;
  border-top:1px solid var(--fx-border);
  vertical-align:top;
}
.fx-vs-table-detail tbody td:nth-child(2){
  background:var(--vs-agv-bg);
  color:var(--vs-agv-text);
}
.fx-vs-table-detail tbody td:nth-child(3){
  background:var(--vs-wired-bg);
  color:var(--vs-wired-text);
}
.fx-vs-table-detail tbody td:nth-child(4){
  background:linear-gradient(90deg,var(--vs-coreax-bg-from),#fff);
  color:var(--vs-coreax-text);
  font-weight:700;
}
.fx-vs-table-detail .pos{
  /* タブ化により .pos の単独ハイライトは不要だが互換のため最低限維持 */
  color:var(--vs-coreax-text);
  font-weight:700;
}

@media (max-width:768px){
  .fx-vs-table-detail,
  .fx-vs-table-detail thead,
  .fx-vs-table-detail tbody,
  .fx-vs-table-detail th,
  .fx-vs-table-detail td,
  .fx-vs-table-detail tr{display:block;width:100%;}
  .fx-vs-table-detail thead{display:none;}
  .fx-vs-table-detail tr{
    border:1px solid var(--fx-border);
    border-radius:10px;
    margin-bottom:12px;
    padding:10px;
    background:#fff;
  }
  .fx-vs-table-detail tbody th{
    background:transparent;
    padding:4px 0 8px;
    font-size:13px;
  }
  .fx-vs-table-detail tbody td{
    border:0;
    padding:6px 8px;
    margin-bottom:4px;
    border-radius:6px;
  }
  .fx-vs-table-detail tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    margin-bottom:2px;
  }
}
/* ===== VS TAB + COLOR UNIFY v3 END ===== */