/* =====================================================
   RESET & BASE
===================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
:root{
  --navy:#0a1628;
  --navy-mid:#1e3a5f;
  --mint:#0eb87a;
  --mint-dim:rgba(14,184,122,0.65);
  --mint-light:#e6f9f2;
  --gray-bg:#f8fafc;
  --gray-border:#e2e8f0;
  --text-main:#0f172a;
  --text-sub:#475569;
  --text-muted:#94a3b8;
  --glass-border:rgba(255,255,255,0.09);
  --glass-bg:rgba(255,255,255,0.04);
  --transition:0.2s cubic-bezier(.4,0,.2,1);
}
body{font-family:'Noto Sans JP',sans-serif;color:var(--text-main);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;}

/* =====================================================
   NAVIGATION
===================================================== */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,22,40,0.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.1);
  box-shadow:0 1px 0 rgba(255,255,255,0.05),0 4px 24px rgba(0,0,0,0.5);
  padding:0 40px;
  height:68px;
}
.nav-inner{
  max-width:1140px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.nl{font-size:22px;font-weight:900;color:#fff;letter-spacing:-0.03em;}
.nl span{color:var(--mint);}
.nlinks{display:flex;gap:32px;margin-left:auto;margin-right:24px;}
.nlinks a{font-size:14px;font-weight:500;color:rgba(255,255,255,0.55);text-decoration:none;transition:color var(--transition);letter-spacing:0.01em;}
.nlinks a:hover{color:#fff;}
.ncta{
  background:var(--mint);color:#fff;
  padding:0 22px;height:40px;line-height:40px;
  border-radius:8px;font-size:14px;font-weight:700;
  text-decoration:none;display:inline-block;
  box-shadow:0 2px 12px rgba(14,184,122,0.35);
  transition:background var(--transition),box-shadow var(--transition),transform var(--transition);
  min-height:40px;
}
.ncta:hover{background:#0da06b;box-shadow:0 4px 18px rgba(14,184,122,0.45);transform:translateY(-1px);}

/* =====================================================
   HERO
===================================================== */
.hero-wrap{
  background:var(--navy);position:relative;
  overflow:hidden;padding:80px 40px 0;
}
.hero-wrap::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%,rgba(14,184,122,0.16) 0%,transparent 55%),
    radial-gradient(ellipse 60% 80% at 85% 20%,rgba(30,58,95,0.8) 0%,transparent 60%);
  pointer-events:none;
}
.hero-wrap::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.hi{max-width:1140px;margin:0 auto;position:relative;z-index:1;}
.ht{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding-bottom:60px;}

h1.hero{
  font-size:48px;font-weight:900;
  line-height:1.18;letter-spacing:-0.02em;
  color:#fff;margin-bottom:20px;
}
h1.hero em{font-style:normal;color:var(--mint);}
.hsub{font-size:17px;color:rgba(255,255,255,0.68);line-height:1.8;margin-bottom:36px;}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-p{
  background:var(--mint);color:#fff;
  padding:0 32px;height:52px;line-height:52px;
  border-radius:10px;font-size:15px;font-weight:700;
  text-decoration:none;display:inline-block;
  border:2px solid var(--mint);
  box-shadow:0 4px 20px rgba(14,184,122,0.4);
  transition:all var(--transition);
  min-height:52px;
}
.btn-p:hover{background:#0da06b;border-color:#0da06b;box-shadow:0 6px 28px rgba(14,184,122,0.5);transform:translateY(-2px);}
.btn-w{
  background:transparent;color:rgba(255,255,255,0.85);
  padding:0 28px;height:52px;line-height:52px;
  border-radius:10px;font-size:15px;font-weight:700;
  text-decoration:none;display:inline-block;
  border:1.5px solid rgba(255,255,255,0.2);
  transition:all var(--transition);
  min-height:52px;
}
.btn-w:hover{border-color:rgba(255,255,255,0.5);color:#fff;}
.hnote{margin-top:14px;font-size:12px;color:rgba(255,255,255,0.28);letter-spacing:0.02em;}

/* =====================================================
   DASHBOARD MOCKUP (PC)
===================================================== */
.dmock{
  background:#080e1c;
  border-radius:16px 16px 0 0;
  border:1px solid rgba(255,255,255,0.1);
  border-bottom:none;
  overflow:hidden;
  box-shadow:0 -24px 80px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.07);
}
.dmtop{
  background:#040810;
  padding:10px 16px;
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.dmdot{width:10px;height:10px;border-radius:50%;}
.dminner{display:flex;height:430px;}

.dmsidebar{
  width:140px;background:#040810;
  padding:10px 8px;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.05);
}
.dmslogo{font-size:12px;font-weight:900;color:#fff;padding:6px 8px 18px;letter-spacing:-0.01em;}
.dmslogo span{color:#10b981;}
.dmsnav{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:7px;
  font-size:10px;font-weight:600;
  color:rgba(255,255,255,0.38);margin-bottom:2px;
  transition:background var(--transition),color var(--transition);
}
.dmsnav.active{background:rgba(59,130,246,0.18);color:#93c5fd;}

.dmmain{
  flex:1;overflow:hidden;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#0a1020 0%,#080e1c 100%);
}
.dmback{font-size:10px;color:rgba(255,255,255,0.3);}
.dmhrow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.dmsite{font-size:16px;font-weight:900;color:#fff;letter-spacing:-0.02em;}
.dmsiteurl{font-size:10px;color:rgba(255,255,255,0.28);}
.dmbtnrow{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.dmbtn{
  padding:4px 10px;border-radius:5px;
  border:1px solid rgba(255,255,255,0.13);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.5);
  font-size:10px;font-weight:700;
}
.dmlastrun{font-size:10px;color:rgba(255,255,255,0.28);}
.dmtabs{display:flex;gap:5px;}
.dmtab{
  padding:4px 12px;border-radius:7px;
  font-size:10px;font-weight:700;
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.4);
}
.dmtab.active{
  background:linear-gradient(135deg,#3b82f6,#10b981);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(59,130,246,0.35);
}
.dmbody{display:flex;gap:10px;flex:1;min-height:0;}
.dmleft{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;}

/* Glass panel effect for mock cards */
.dmcard{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;padding:10px 12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
}
.dmcardtitle{font-size:10px;font-weight:700;color:rgba(255,255,255,0.85);margin-bottom:2px;}
.dmcardsub{font-size:10px;color:rgba(255,255,255,0.28);}

/* 数値を強調表示 */
.dmchartrow{display:flex;justify-content:flex-end;gap:12px;margin:6px 0 4px;}
.dmpct{display:flex;flex-direction:column;align-items:flex-end;}
.dmpct-num{font-size:20px;font-weight:900;line-height:1;}
.dmpct-lbl{font-size:9px;font-weight:600;opacity:0.6;letter-spacing:0.02em;}

.dmdotrow{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.dmdotlbl{font-size:10px;font-weight:700;width:60px;flex-shrink:0;}
.dmdots{display:flex;gap:2px;}
.dmdotsm{width:7px;height:7px;border-radius:50%;}

.dmstats{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.dmstat{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;padding:8px 10px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.dmstatlbl{font-size:10px;color:rgba(255,255,255,0.32);margin-bottom:3px;}
.dmstatval{font-size:22px;font-weight:900;line-height:1;letter-spacing:-0.02em;}
.dmstatsub{font-size:10px;color:rgba(255,255,255,0.28);}

.dmkws{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;padding:8px 10px;flex:1;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.dmkwtitle{font-size:10px;font-weight:700;color:rgba(255,255,255,0.8);margin-bottom:7px;}
.dmkwitem{padding:5px 7px;border-radius:6px;margin-bottom:4px;}
.dmkwhdr{display:flex;align-items:center;gap:5px;}
.dmkwname{flex:1;font-size:10px;font-weight:600;}
.dmkwbadge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;white-space:nowrap;}
.dmkwq{padding:2px 0 2px 14px;display:flex;align-items:center;justify-content:space-between;gap:4px;}
.dmkwqtxt{font-size:10px;color:rgba(255,255,255,0.45);flex:1;}
.dmkwqbadge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px;white-space:nowrap;}

/* =====================================================
   SECTIONS
===================================================== */
section{padding:80px 40px;}
.si{max-width:1140px;margin:0 auto;}
.slbl{
  font-size:11px;font-weight:700;
  letter-spacing:0.14em;color:var(--mint-dim);
  text-transform:uppercase;margin-bottom:14px;
  opacity:0.85;
}
h2.stitle{
  font-size:38px;font-weight:900;
  line-height:1.18;letter-spacing:-0.02em;
  color:var(--navy);margin-bottom:14px;
}
.ssub{font-size:17px;color:var(--text-sub);line-height:1.8;}

/* =====================================================
   PROBLEM
===================================================== */
.psec{background:var(--gray-bg);}
.pgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:36px;}
.pcard{
  background:#fff;border-radius:16px;
  padding:24px 24px;
  border:1px solid var(--gray-border);
  position:relative;overflow:hidden;
  transition:box-shadow var(--transition),transform var(--transition);
}
.pcard:hover{box-shadow:0 8px 32px rgba(10,22,40,0.1);transform:translateY(-2px);}
.pcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--mint),#3b82f6);}
.pnum{font-size:42px;font-weight:900;color:var(--gray-border);line-height:1;margin-bottom:12px;letter-spacing:-0.04em;}
.pcard h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:8px;line-height:1.25;letter-spacing:-0.01em;}
.pcard p{font-size:15px;color:var(--text-sub);line-height:1.75;}

/* =====================================================
   WHY SECTION
===================================================== */
.wsec{background:var(--gray-bg);}
.winner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.wflow{display:flex;flex-direction:column;}
.wfitem{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--gray-border);}
.wfitem:last-child{border-bottom:none;}
.wficon{width:48px;height:48px;border-radius:13px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wficon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.wfitem h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:-0.01em;}
.wfitem p{font-size:15px;color:var(--text-sub);}

/* WHAT MOCKUP */
.wmock{background:#0a1020;border-radius:14px;border:1px solid rgba(255,255,255,0.09);overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.3);}
.wmbar{background:#040810;padding:8px 12px;display:flex;gap:6px;border-bottom:1px solid rgba(255,255,255,0.06);}
.wmdot{width:8px;height:8px;border-radius:50%;}
.wmcont{padding:14px;}
.wmtabs{display:flex;gap:5px;margin-bottom:10px;}
.wmtab{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.38);}
.wmtab.active{background:linear-gradient(135deg,#3b82f6,#10b981);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(59,130,246,0.3);}
.wmhrow{display:grid;grid-template-columns:60px 1fr 36px;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.wmlbl{font-size:10px;font-weight:700;}
.wmtrack{background:rgba(255,255,255,0.07);border-radius:99px;height:5px;overflow:hidden;}
.wmfill{height:100%;border-radius:99px;}
.wmpct{font-size:10px;font-weight:900;text-align:right;}
.wmkwlist{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.wmkwrow{background:rgba(255,255,255,0.04);border-radius:6px;padding:6px 9px;display:flex;align-items:center;gap:7px;}
.wmkwname{flex:1;font-size:10px;color:rgba(255,255,255,0.72);font-weight:500;}
.wmbadge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;}

/* =====================================================
   FEATURES
===================================================== */
.fsec{background:#fff;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;}
.fcard{
  background:#fff;border-radius:16px;padding:28px;
  border:1px solid var(--gray-border);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.fcard:hover{border-color:rgba(14,184,122,0.4);box-shadow:0 8px 28px rgba(14,184,122,0.1);transform:translateY(-2px);}
.ficon{width:64px;height:64px;border-radius:16px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.ficon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fcard h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:8px;letter-spacing:-0.01em;}
.fcard p{font-size:15px;color:var(--text-sub);line-height:1.75;}

/* =====================================================
   PRICING
===================================================== */
.pl-wrap{overflow:hidden;margin-top:44px;}
.plgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.plcard{
  border-radius:16px;padding:26px 22px;
  border:1.5px solid var(--gray-border);
  position:relative;overflow:visible;
  transition:box-shadow var(--transition),transform var(--transition);
}
.plcard:hover{box-shadow:0 8px 28px rgba(10,22,40,0.1);transform:translateY(-2px);}
.plcard.feat{border-color:var(--mint);border-width:2px;box-shadow:0 4px 24px rgba(14,184,122,0.18);margin-top:14px;}
.plbadge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--mint),#3b82f6);
  color:#fff;font-size:10px;font-weight:700;
  padding:3px 14px;border-radius:99px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(14,184,122,0.35);
}
.plname{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:10px;letter-spacing:0.04em;text-transform:uppercase;}
.plprice{font-size:32px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:3px;letter-spacing:-0.03em;}
.plprice span{font-size:13px;font-weight:500;color:var(--text-muted);}
.plperiod{font-size:11px;color:var(--text-muted);margin-bottom:18px;}
.pldiv{border:none;border-top:1px solid var(--gray-border);margin-bottom:18px;}
.plfeats{display:flex;flex-direction:column;gap:8px;list-style:none;}
.plfeats li{
  font-size:12px;color:var(--text-sub);
  display:flex;align-items:center;gap:8px;
}
.plfeats li::before{
  content:'';display:block;width:16px;height:16px;border-radius:50%;
  flex-shrink:0;
  background-color:rgba(14,184,122,0.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l4 4 6-6' stroke='%230eb87a' stroke-width='1.8' fill='none' stroke-linecap='round' opacity='0.75'/%3E%3C/svg%3E");
}
.plbtn{
  display:flex;align-items:center;justify-content:center;
  margin-top:22px;padding:0 16px;height:48px;
  border-radius:9px;font-size:13px;font-weight:700;
  text-decoration:none;transition:all var(--transition);
  min-height:48px;
}
.plbtn.out{border:1.5px solid var(--gray-border);color:var(--navy);}
.plbtn.out:hover{border-color:var(--mint);color:var(--mint);}
.plbtn.sol{background:var(--navy);color:#fff;border:1.5px solid var(--navy);box-shadow:0 3px 14px rgba(10,22,40,0.25);}
.plbtn.sol:hover{background:var(--mint);border-color:var(--mint);box-shadow:0 4px 18px rgba(14,184,122,0.4);}

/* =====================================================
   COMPARISON TABLE
===================================================== */
.csec{background:#fff;}
.ctable-wrap{position:relative;margin-top:40px;padding-top:20px;overflow:visible;}
.ctable{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:visible;}
.ctable th,.ctable td{padding:14px 18px;text-align:center;font-size:14px;}
.ctable thead th{background:var(--navy);color:#fff;font-weight:700;}
.ctable thead tr th:first-child{border-radius:14px 0 0 0;}
.ctable thead tr th:last-child{border-radius:0 14px 0 0;}
.ctable tbody tr:last-child td:first-child{border-radius:0 0 0 14px;}
.ctable tbody tr:last-child td:last-child{border-radius:0 0 14px 0;}
.ctable thead th:first-child{text-align:left;}

/* AIMention 列をハイライト */
.ctable thead th.hl{
  background:var(--mint);
  position:relative;
}
.ctable thead th.hl::before{
  content:'BEST';
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--mint);
  font-size:9px;font-weight:900;
  padding:2px 8px;border-radius:99px;
  letter-spacing:0.08em;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  white-space:nowrap;
}
.ctable tbody td.hl-col{
  background:rgba(14,184,122,0.05);
  font-weight:700;
}
.ctable tbody tr:nth-child(odd){background:#fff;}
.ctable tbody tr:nth-child(odd) td.hl-col{background:rgba(14,184,122,0.07);}
.ctable tbody tr:nth-child(even){background:var(--gray-bg);}
.ctable tbody tr:nth-child(even) td.hl-col{background:rgba(14,184,122,0.05);}
.ctable td:first-child{text-align:left;font-weight:600;color:var(--navy);}
.cchk{color:var(--mint);font-size:17px;font-weight:900;opacity:0.85;}
.cxxx{color:var(--text-muted);font-size:17px;opacity:0.55;}
.cprt{color:#f59e0b;font-size:12px;font-weight:700;}

/* Mobile comparison cards (hidden on desktop) */
.ccard-sp{display:none;}

/* =====================================================
   FAQ
===================================================== */
.fqsec{background:var(--gray-bg);}
.fqlist{margin-top:44px;display:flex;flex-direction:column;gap:10px;}
.fqitem{border:1.5px solid var(--gray-border);border-radius:14px;overflow:hidden;transition:border-color var(--transition);}
.fqitem.open{border-color:rgba(14,184,122,0.35);}
.fqq{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 26px;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--navy);
  background:#fff;gap:14px;
  min-height:64px;
  transition:background var(--transition);
  letter-spacing:-0.01em;
}
.fqq:hover{background:var(--gray-bg);}
.fqqtxt{flex:1;}
.fqicon{
  width:28px;height:28px;border-radius:50%;
  background:var(--gray-bg);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.25s;
  font-size:16px;font-weight:700;color:var(--text-sub);
}
.fqitem.open .fqicon{background:var(--mint);color:#fff;transform:rotate(45deg);}
.fqa{
  display:none;padding:0 26px 20px;
  font-size:15px;color:var(--text-sub);line-height:1.85;
  border-top:1px solid var(--gray-border);padding-top:16px;
}
.fqitem.open .fqa{display:block;}

/* =====================================================
   CTA
===================================================== */
.ctasec{
  background:var(--navy);padding:96px 40px;
  text-align:center;position:relative;overflow:hidden;
}
.ctasec::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(14,184,122,0.1) 0%,transparent 70%);
}
.ctasec::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.018) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.ctainner{position:relative;z-index:1;}
.cta-stitle{font-size:40px;font-weight:900;color:#fff;letter-spacing:-0.02em;margin-bottom:16px;line-height:1.18;}

/* =====================================================
   FOOTER
===================================================== */
footer{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,0.07);
  padding:48px 40px 36px;
  text-align:center;
}
.flogo{font-size:17px;font-weight:900;color:#fff;letter-spacing:-0.02em;}
.flogo span{color:var(--mint);}
.ftxt{font-size:12px;color:rgba(255,255,255,0.28);}

/* =====================================================
   BURGER / MOBILE MENU
===================================================== */
.burger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:8px;background:none;border:none;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all 0.25s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nmobile{
  display:none;position:fixed;
  top:68px;left:0;right:0;
  background:rgba(8,16,30,0.99);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:16px 24px 24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  z-index:99;flex-direction:column;gap:0;
}
.nmobile.open{display:flex;}
.nmobile a{
  font-size:16px;font-weight:600;
  color:rgba(255,255,255,0.68);
  text-decoration:none;
  padding:0;
  display:flex;align-items:center;
  height:52px;min-height:52px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color var(--transition);
}
.nmobile a:hover{color:#fff;}
.nmobile a:last-child{border-bottom:none;}
.nmobile .nm-cta{
  margin-top:14px;
  background:var(--mint);color:#fff;
  text-align:center;
  height:52px;min-height:52px;
  border-radius:10px;font-weight:700;font-size:15px;
  border-bottom:none;justify-content:center;
  box-shadow:0 3px 14px rgba(14,184,122,0.35);
}

/* =====================================================
   SP MOCKUP
===================================================== */
.hero-sp-img{display:none;}
.hero-mobile-img{display:none;}
.spdmock{
  background:#080e1c;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 10px 36px rgba(0,0,0,0.45);
  margin-top:14px;
}
.spdmtop{
  background:#040810;padding:8px 12px;
  display:flex;align-items:center;gap:5px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.spdmdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.spdmtitle{font-size:10px;color:rgba(255,255,255,0.28);margin-left:6px;font-weight:600;}
.spdminner{display:flex;height:210px;}
.spdmsidebar{
  width:66px;background:#040810;
  padding:8px 6px;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.05);
}
.spdmslogo{font-size:10px;font-weight:900;color:#fff;padding:4px 4px 10px;line-height:1.3;}
.spdmslogo span{color:#10b981;}
.spdmsnav{font-size:10px;color:rgba(255,255,255,0.32);padding:5px 4px;border-radius:5px;margin-bottom:2px;}
.spdmsnav.active{background:rgba(14,184,122,0.15);color:#10b981;font-weight:700;}
.spdmmain{flex:1;padding:8px 10px;overflow:hidden;}
.spdmsite{font-size:10px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-0.01em;}
.spdmtabs{display:flex;gap:4px;margin-bottom:8px;}
.spdmtab{font-size:10px;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.38);font-weight:600;}
.spdmtab.active{background:rgba(14,184,122,0.22);color:#10b981;font-weight:700;}
.spdmstats{display:flex;gap:5px;margin-bottom:8px;}
.spdmstat{
  flex:1;background:rgba(255,255,255,0.04);
  border-radius:6px;padding:5px 6px;text-align:center;
  border:1px solid rgba(255,255,255,0.07);
}
.spdmstlbl{font-size:10px;color:rgba(255,255,255,0.38);margin-bottom:2px;}
.spdmstval{font-size:15px;font-weight:900;line-height:1;letter-spacing:-0.02em;}
.spdmkws{display:flex;flex-direction:column;gap:3px;}
.spdmkw{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:6px;border:1px solid;}
.spdmkwicon{font-size:10px;flex-shrink:0;}
.spdmkwname{flex:1;font-size:10px;color:rgba(255,255,255,0.68);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spdmkwbadge{font-size:10px;font-weight:700;padding:2px 5px;border-radius:99px;white-space:nowrap;}

/* SP Mini Mock styles (kept for compatibility) */
.sp-mock-mini{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:12px 14px;margin-top:16px;}
.sp-score-num{display:block;font-size:18px;font-weight:900;line-height:1.1;}

/* =====================================================
   WHY SECTION (3-column)
===================================================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.why-card{text-align:center;padding:40px 28px;border-radius:16px;border:1px solid var(--gray-border);transition:box-shadow var(--transition),transform var(--transition);}
.why-card:hover{box-shadow:0 8px 28px rgba(10,22,40,0.09);transform:translateY(-2px);}
/* .why-card.feat unified with base */
.why-icon{width:68px;height:68px;border-radius:20px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
/* .why-icon.mint removed */
.why-card h3{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:12px;letter-spacing:-0.01em;}
.why-card p{font-size:15px;color:var(--text-sub);line-height:1.75;}

/* =====================================================
   RESPONSIVE — 900px
===================================================== */
@media(max-width:900px){
  /* NAV */
  nav{padding:0 20px;}
  .nav-inner{padding:0;}
  .nlinks,.ncta{display:none;}
  .burger{display:flex;}

  /* HERO — FV内に全要素収める */
  .hero-wrap{padding:36px 20px 28px;}
  .hi .ht{grid-template-columns:1fr;gap:0;padding-bottom:0;}
  .ht > div:nth-child(2){display:none;}
  h1.hero{font-size:36px;letter-spacing:-0.02em;margin-bottom:12px;}
  .hsub{font-size:13px;line-height:1.6;margin-bottom:0;}
  .hero-left{display:flex;flex-direction:column;}
  .hero-left .hero-sp-img{order:3;}
  .hero-left .hbtns{order:4;margin-top:14px;}
  .hero-sp-img{display:block;}
  .btn-p,.btn-w{height:48px;line-height:46px;min-height:48px;font-size:14px;text-align:center;}
  .btn-w{display:none;} /* SP FV はメインCTAのみ */

  /* SECTIONS */
  section{padding:40px 20px;}
  .psec{padding:40px 20px;}
  .stitle,h2.stitle{font-size:30px;letter-spacing:-0.015em;}
  .ssub{font-size:14px;}

  /* PROBLEM */
  .pgrid{grid-template-columns:1fr;gap:12px;}
  .pcard h3{white-space:normal;}

  /* WHAT IS SP */
  .winner{grid-template-columns:1fr;gap:0;display:flex;flex-direction:column;}
  .winner > div:nth-child(2){display:block;order:1;margin-bottom:24px;}
  .winner > div:nth-child(1){order:2;}
  .wmock{margin:0 auto;max-width:100%;}
  .wmbar{margin-top:0;}
  

  /* WHY SP — wfitemと同じ横並びグリッドレイアウト */
  .why-grid{display:flex;flex-direction:column;gap:0;margin-top:20px;}
  .why-card{
    display:grid;
    grid-template-columns:48px 1fr;
    grid-template-rows:auto auto;
    column-gap:18px;row-gap:0;
    align-items:start;
    text-align:left;padding:18px 0;
    border-radius:0;border:none;border-bottom:1px solid var(--gray-border);
    background:transparent !important;
  }
  .why-card:last-child{border-bottom:none;}
  .why-icon{
    grid-column:1;grid-row:1/3;
    width:48px;height:48px;border-radius:13px;
    flex-shrink:0;margin:0;align-self:start;
  }
  .why-card h3{
    grid-column:2;grid-row:1;
    font-size:15px;font-weight:700;color:var(--navy);
    margin-bottom:4px;letter-spacing:-0.01em;
  }
  .why-card p{
    grid-column:2;grid-row:2;
    font-size:14px;color:var(--text-sub);line-height:1.7;
  }

  /* FEATURES SP 2×3 */
  .fgrid{grid-template-columns:1fr 1fr;gap:10px;}
  .fcard{padding:18px 14px;}
  .ficon{width:44px;height:44px;border-radius:11px;margin-bottom:12px;}
  .ficon svg{width:20px;height:20px;}
  .fcard h3{font-size:14px;margin-bottom:6px;}
  .fcard p{font-size:12px;line-height:1.6;}

  /* PRICING SP 2×2 */
  .pl-wrap{overflow:visible;margin-top:20px;}
  .plgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .plcard{
    width:100%;padding:16px 14px;
    display:block;
  }
  .plcard.feat{margin-top:0;padding-top:26px;}
  .plname{font-size:11px;margin-bottom:6px;}
  .plprice{font-size:22px;margin-bottom:2px;}
  .plperiod{font-size:10px;margin-bottom:10px;}
  .pldiv{margin-bottom:10px;}
  .plfeats li{font-size:11px;}
  .plfeats li:nth-child(n+4){display:none;}
  .plbtn{margin-top:12px;height:44px;font-size:12px;min-height:44px;}

  /* COMPARISON SP — 横スクロールテーブル */
  .ctable-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ctable{min-width:480px;font-size:12px;}
  .ctable th,.ctable td{padding:10px 12px;}
  .ccard-sp{display:none;}
  .ccrow{
    background:#fff;border-radius:14px;
    border:1px solid var(--gray-border);
    padding:16px 18px;
  }
  .cclbl{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:10px;letter-spacing:0.04em;text-transform:uppercase;}
  .ccgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;text-align:center;}
  .ccgrid-hd{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;text-align:center;margin-bottom:4px;}
  .cch{font-size:11px;font-weight:700;padding:6px 4px;border-radius:6px;}
  .cch.mine{background:var(--mint);color:#fff;}
  .cch.other{color:var(--text-muted);}
  .ccval{font-size:15px;padding:8px 4px;border-top:1px solid var(--gray-border);}
  .ccval.mine{color:var(--mint);font-weight:900;}
  .ccval.no{color:var(--text-muted);opacity:0.5;}
  .ccval.pt{color:#f59e0b;font-size:10px;font-weight:700;}

  /* FAQ */
  .fqq{padding:14px 18px;font-size:14px;min-height:56px;}
  .fqa{padding:0 18px 16px;font-size:14px;padding-top:12px;}

  /* CTA */
  .ctasec{padding:44px 20px;}
  .cta-stitle{font-size:28px;}

  /* FOOTER */
  footer{padding:32px 20px;text-align:center;}
  footer > div > div:first-child > div:last-child{flex-direction:column;gap:20px;}

  /* TAP TARGETS */
  .ncta,.btn-p,.btn-w,.plbtn,.nmobile a,.fqq{min-height:48px;}
}

/* =====================================================
   600px BREAKPOINT
===================================================== */
@media(max-width:600px){
  h1.hero{font-size:24px;}
  h2.stitle{font-size:22px;}
  .ssub{font-size:13px;}
  .hbtns{flex-direction:column;}
  .btn-p{text-align:center;}
}
.pricing-sec{padding:80px 40px;background:var(--gray-bg);}
.why-sec{background:#fff;padding:80px 40px;}
  .pricing-sec{padding:40px 20px;}
  .why-sec{padding:40px 20px;}
/* =====================================================
   NAV LOGO CATCH
===================================================== */
.nl-wrap{display:flex;flex-direction:column;justify-content:center;gap:1px;}
.nl-catch{font-size:10px;font-weight:500;color:rgba(255,255,255,0.4);letter-spacing:0.04em;line-height:1.2;}
@media(max-width:900px){.nl-catch{font-size:9px;}}