/*
Theme Name: AIO×SEO LP Navy
Theme URI: https://example.com/
Author: AIO×SEO
Description: AIO×SEO サービスLPのネイビー×オレンジ版（採用系LPトーン）。濃紺グラデFV＋斜め光条、オレンジCTA、Feature巨大番号、STEPフロー、ChatGPT再現FV搭載。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aio-partner-navy
*/

:root{
  --cyan:#3b82e0;
  --blue:#1553b5;
  --blue-d:#0b2e6e;
  --navy:#0b2e6e;
  --band:#eef4fb;
  --green:#f5a11c;
  --lime:#ffd98a;
  --orange:#f5a11c;
  --ink:#1a2b45;
  --mut:#5c6e86;
  --line:#d8e3f0;
  --jp:'Noto Sans JP',sans-serif;
  --en:'Archivo',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--jp);background:#fff;color:var(--ink);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px;position:relative;z-index:2}

/* ---------- 出現 ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 見出し ---------- */
.sec-head{text-align:center;font-size:clamp(23px,3vw,32px);font-weight:900;line-height:1.7}
.sec-head .bl{color:var(--blue)}
.sec-lead{text-align:center;margin:10px auto 0;color:var(--mut);max-width:640px;font-size:14.5px}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;padding:14px 34px;border-radius:999px;cursor:pointer;border:0;transition:.25s;position:relative}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#155ea6;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(26,115,201,.6)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#173f61;transform:translateY(-2px)}
.btn-or{background:var(--orange);color:#fff;box-shadow:0 4px 0 #c77f0a;font-weight:900}
.btn-or:hover{background:#de8e0f;transform:translateY(-2px)}
.btn-w{background:#fff;color:var(--blue)}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(13,43,69,.4)}
.btn .ar{font-family:var(--en);font-weight:700;transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--en);font-weight:800;font-size:19px;color:var(--navy)}
.logo i{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--orange),var(--navy),var(--orange));position:relative}
.logo i::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#fff}
.logo em{font-style:normal;color:var(--orange);margin:0 1px}
nav.gnav ul{display:flex;gap:26px;align-items:center}
nav.gnav a{font-size:13px;font-weight:700;position:relative;padding:4px 0}
nav.gnav a:not(.hd-cta)::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:width .25s}
nav.gnav a:not(.hd-cta):hover::after{width:100%}
nav.gnav a.hd-cta{display:inline-flex;align-items:center;background:var(--orange);color:#fff!important;padding:0 26px;height:40px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;line-height:1;transition:.25s;box-shadow:0 4px 12px -4px rgba(245,161,28,.55)}
nav.gnav a.hd-cta:hover{background:#de8e0f;transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(245,161,28,.6)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;z-index:120}
.menu-btn span{position:absolute;left:11px;width:22px;height:2px;background:var(--navy);transition:.3s}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:28px}
.menu-open .menu-btn span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){top:22px;transform:rotate(-45deg)}
.sp-menu{display:none}

/* ---------- FV ---------- */
.fv{position:relative;padding:126px 0 76px;background:linear-gradient(112deg,#0b2e6e,#1d63d8 82%);color:#fff;overflow:hidden}
.fv::before{content:'';position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 42%,rgba(255,255,255,.07) 50%,transparent 50%,transparent 58%,rgba(255,255,255,.05) 58%,rgba(255,255,255,.05) 66%,transparent 66%)}
.fv::after{content:'';position:absolute;left:-10%;bottom:-55%;width:46%;height:140%;background:radial-gradient(closest-side,rgba(59,130,224,.35),transparent 70%)}
.fv .wrap{z-index:3}
.fv-grid{display:grid;grid-template-columns:1fr .96fr;gap:52px;align-items:center}
.fv h1{font-size:clamp(30px,4.2vw,52px);font-weight:900;line-height:1.5;letter-spacing:.02em}
.fv h1 .box{display:inline-block;background:#fff;color:var(--blue);padding:0 14px;border-radius:8px;line-height:1.5;margin:2px 0}
.fv h1 .nw{white-space:nowrap}
.fv-sub{margin-top:18px;font-size:clamp(14px,1.5vw,16.5px);font-weight:700;line-height:2.1;color:#eaf9ff}
.fv-btns{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.fv-btns .mini-badge{margin-right:-4px}
.fv-chat{filter:drop-shadow(0 26px 34px rgba(9,58,105,.4))}
/* マーキー */
.marq-band{background:#fff;border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden}
.marq-t{text-align:center;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.1em;margin-bottom:10px}
.marq-t b{color:var(--navy)}
.marq{overflow:hidden}
.marq-in{display:flex;width:max-content;animation:marq 28s linear infinite}
.marq span{display:inline-flex;align-items:center;gap:10px;padding:6px 18px;margin:0 10px;background:var(--band);border-radius:999px;font-weight:700;font-size:13px;color:var(--navy);white-space:nowrap}
.marq b{color:var(--orange);font-family:var(--en)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- ChatGPT再現（継承） ---------- */
.ai-sys{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}
.hit-wrap{position:relative;border-radius:10px}
.hit-wrap::before{content:'';position:absolute;inset:-4px;border:2.5px solid #e5484d;border-radius:12px;opacity:0;transform:scale(1.1);pointer-events:none}
.hit-wrap.mark::before{animation:mark .55s cubic-bezier(.22,.61,.36,1) forwards}
.hit-wrap .tag{position:absolute;top:-14px;right:6px;background:#e5484d;color:#fff;font-size:10px;font-weight:900;padding:2px 12px;border-radius:999px;letter-spacing:.06em;opacity:0;transition:.4s .35s;z-index:2;font-family:var(--jp)}
.hit-wrap.mark .tag{opacity:1}
@keyframes mark{to{opacity:1;transform:scale(1)}}
.caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gptw{background:#fff;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;color:#0d0d0d}
.gpt-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #f0f0f0}
.gpt-top svg{width:22px;height:22px}
.gpt-top .nm{font-weight:700;font-size:14.5px}
.gpt-top .vs{color:#8f8f8f;font-size:13px;font-weight:400}
.gpt-top .cv{margin-left:2px;color:#8f8f8f;font-size:10px}
.gpt-body{padding:20px 18px 0;height:300px;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.gpt-u{align-self:flex-end;background:#f1f1f1;padding:10px 16px;border-radius:22px;max-width:86%;font-size:13.5px;line-height:1.8;opacity:0;transform:translateY(8px);transition:.4s}
.gpt-u.show{opacity:1;transform:none}
.gpt-a{display:flex;gap:10px;align-items:flex-start}
.gpt-av{flex:0 0 26px;width:26px;height:26px;border:1px solid #e6e6e6;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.gpt-av svg{width:16px;height:16px}
.gpt-txt{font-size:13.5px;line-height:1.95;min-width:0;flex:1}
.gpt-txt p{margin:0 0 8px}
.gpt-txt .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#0d0d0d;animation:pulse 1s ease infinite}
@keyframes pulse{50%{transform:scale(.72);opacity:.55}}
.gpt-li{padding:7px 9px;border-radius:8px;position:relative}
.gpt-li b{font-weight:700}
.gpt-li small{display:block;color:#5d5d5d;font-size:12px;line-height:1.75}
.gpt-input{margin:8px 14px 14px;border:1px solid #e0e0e0;border-radius:26px;padding:11px 8px 11px 16px;display:flex;align-items:center;gap:10px;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.gpt-input .ph{color:#8f8f8f}
.gpt-send{margin-left:auto;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#0d0d0d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.25s}
.gpt-send.off{background:#ececec;color:#b4b4b4}
.gpt-dots{display:flex;gap:10px;justify-content:center;margin-top:16px}
.gpt-dots button{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45);border:0;cursor:pointer;padding:0;transition:width .3s,background .3s}
.gpt-dots button:hover{background:rgba(255,255,255,.75)}
.gpt-dots button.act{width:28px;background:var(--orange)}

/* ---------- 統計 ---------- */
.problem{background:var(--band);padding:44px 0 52px}
.stat-board{background:#fff;border-radius:14px;margin-top:20px;padding:8px 36px;box-shadow:0 10px 30px -14px rgba(15,76,140,.18)}
.srow.hero{padding:22px 0}
.srow.hero .cap{font-size:14px;font-weight:900}
.srow.hero .bar{height:16px}
.srow.hero .msg2{color:var(--blue);font-weight:900}
.srow.hero .num{font-size:clamp(40px,4.4vw,54px);color:var(--navy)}
.srow{display:grid;grid-template-columns:minmax(240px,320px) 1fr 100px;gap:28px;align-items:center;padding:17px 0;border-bottom:1px dashed var(--line)}
.srow:last-of-type{border-bottom:0}
.srow .cap{font-size:12.5px;font-weight:700;line-height:1.75;color:var(--ink)}
.srow .barwrap{min-width:0}
.bar{height:12px;background:var(--band);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffc35c);border-radius:999px;transition:width 1.2s cubic-bezier(.22,.61,.36,1) .15s}
.srow.on .bar i{width:var(--w)}
.srow .msg2{margin-top:7px;font-weight:700;font-size:11.5px;color:var(--navy)}
.srow .msg2::before{content:'→ ';color:var(--orange);font-weight:900}
.srow .num{font-family:var(--en);font-weight:900;font-size:clamp(26px,2.6vw,32px);line-height:1;color:var(--blue);text-align:right;white-space:nowrap}
.srow .num small{font-size:.5em;font-weight:800}
.stat-note{display:flex;gap:28px;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;border-radius:12px;padding:20px 30px;margin-top:14px}
.stat-note .t{font-weight:900;font-size:15.5px;line-height:1.8;white-space:nowrap}
.stat-note .cy{color:var(--lime)}
.stat-note .s{font-size:12.5px;color:#bcd0ee;text-align:right}

/* ---------- 検索パターン ---------- */
.pattern{padding:56px 0 64px;background:#fff}
.tabs{margin-top:22px}
.tab-hs{display:contents}
.tab-h{display:block;width:100%;background:var(--navy);border:1px solid var(--navy);border-bottom:2px solid var(--orange);padding:15px 22px;text-align:left;font-family:var(--jp);position:sticky;top:64px;z-index:30;box-shadow:0 8px 14px -12px rgba(11,46,110,.45);cursor:default}
.tab-h .no{display:block;font-family:var(--en);font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--orange)}
.tab-h .tt{display:block;font-size:16.5px;font-weight:900;margin-top:2px;color:#fff}
.tab-h .pl{display:none}
.tab-b{display:block;background:#fff;border:1px solid var(--line);border-top:0;padding:36px 42px 42px;position:relative;overflow:hidden;margin-bottom:22px}
.tab-b:last-child{margin-bottom:0}
.howto{margin-top:22px;background:var(--band);border-radius:12px;padding:24px 28px;position:relative;z-index:1}
.howto .ht-k{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-weight:900;font-size:12px;padding:6px 16px;border-radius:999px;letter-spacing:.04em}
.howto .ht-t{margin-top:12px;font-size:15.5px;font-weight:900;color:var(--navy)}
.howto .ht-t b{color:var(--orange)}
.howto .ht-x{margin-top:8px;font-size:13px;color:var(--mut);line-height:1.95}
.ht-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:16px}
.ht-item{background:#fff;border-radius:10px;padding:14px 16px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 3px 10px -6px rgba(15,76,140,.2)}
.ht-item .chk{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ht-item .b{min-width:0}
.ht-item .b b{display:block;font-size:13px;font-weight:900;color:var(--navy);line-height:1.6}
.ht-item .b small{display:block;margin-top:3px;font-size:11.5px;color:var(--mut);line-height:1.75}
.ht-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;font-weight:900;color:#fff;background:var(--orange);padding:13px 30px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(245,161,28,.55);transition:.25s;cursor:pointer}
.ht-cta:hover{background:#de8e0f;transform:translateY(-2px);box-shadow:0 6px 16px -4px rgba(245,161,28,.6)}
.tab-b .bigno{position:absolute;top:-28px;right:10px;font-family:var(--en);font-weight:900;font-size:150px;line-height:1;color:#d7e6f8;pointer-events:none;z-index:0}
.tab-b .tab-in{position:relative;z-index:1}
.tab-in{display:grid;grid-template-columns:1fr 1.08fr;gap:42px;align-items:center}
.tab-in h3{font-size:clamp(18px,2.1vw,23px);font-weight:900;line-height:1.75}
.tab-in h3 span{color:var(--blue)}
.tab-in .tx{margin-top:12px;color:var(--mut);font-size:14px}
/* AIモック（継承） */
.mock{border-radius:14px;overflow:hidden;border:1px solid #e6e6e6;box-shadow:0 16px 34px -18px rgba(15,76,140,.3);background:#fff;color:#0d0d0d}
.mock .m-body{padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.mock .m-q{align-self:flex-end;max-width:88%;font-size:13px;line-height:1.8}
.mock .m-a{font-size:13px;line-height:1.9;display:flex;gap:10px;align-items:flex-start}
.mock .m-a .av{flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.mock .m-a .bd{min-width:0;flex:1}
.mock .m-a .bd>p{margin:0 0 8px}
.mock .m-top{border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;padding:11px 16px}
.mock .m-top svg{width:20px;height:20px}
.mock .m-top .nm{font-weight:700;font-size:14.5px}
.mock .m-top .vs{color:#8f8f8f;font-size:13px;font-weight:400}
.mock .m-top .cv{margin-left:2px;color:#8f8f8f;font-size:10px}
.mock.gpt .m-q{background:#f1f1f1;padding:9px 15px;border-radius:20px}
.mock.gpt .av{border:1px solid #e6e6e6;border-radius:50%}
.mock.cld{background:#faf9f5;border-color:#e8e4d9}
.mock.cld .m-top{border-bottom:1px solid #ece8dd}
.mock.cld .m-top .nm{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:15px;color:#3d3929}
.mock.cld .m-q{background:#ece9df;color:#3d3929;padding:10px 15px;border-radius:14px}
.mock.cld .m-a{color:#3d3929}
.mock.cld .m-a small{color:#7a7565}
.mock.gmn .m-top .nm{font-family:var(--en);font-weight:700;font-size:15px;background:linear-gradient(90deg,#4285f4,#9b72cb,#d96570);-webkit-background-clip:text;background-clip:text;color:transparent}
.mock.gmn .m-q{background:#f0f4f9;padding:10px 16px;border-radius:20px}
.gm-tblw{overflow-x:auto;margin-top:6px}
.gm-tbl{border-collapse:collapse;font-size:12px;min-width:340px;width:100%}
.gm-tbl th{background:#f8f9fa;font-weight:700;text-align:left;padding:8px 10px;border:1px solid #e8eaed;white-space:nowrap}
.gm-tbl td{padding:8px 10px;border:1px solid #e8eaed;vertical-align:top;line-height:1.7}
.gm-tbl tr.hit-row{outline:2.5px solid #e5484d;outline-offset:-1px}
.m-hit{position:relative;border-radius:8px}
.m-hit::before{content:'';position:absolute;inset:-3px;border:2.5px solid #e5484d;border-radius:10px;pointer-events:none}
.m-hit .tag{position:absolute;top:-13px;right:6px;background:#e5484d;color:#fff;font-size:10px;font-weight:900;padding:2px 12px;border-radius:999px;letter-spacing:.06em;font-family:var(--jp);z-index:2}
.m-li{padding:7px 9px}
.m-li b{font-weight:700}
.m-li small{display:block;color:#5d5d5d;font-size:11.5px;line-height:1.75}

/* ---------- 料金 ---------- */
.price{padding:56px 0 64px;background:#fff}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px;align-items:stretch}
.pr-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:38px 28px 30px;position:relative;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.pr-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px -16px rgba(15,76,140,.25)}
.pr-card.first{border:2.5px solid var(--navy);box-shadow:0 12px 30px -14px rgba(11,46,110,.3)}
.pr-card .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--orange);box-shadow:0 3px 0 #c77f0a;color:#fff;font-size:12px;font-weight:900;padding:5px 20px;border-radius:999px;white-space:nowrap}
.pr-card .p-no{font-family:var(--en);font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.pr-card h3{font-size:20px;font-weight:900;margin-top:6px}
.pr-card .p-tx{margin-top:10px;font-size:13px;color:var(--mut);min-height:66px}
.pr-ex{margin-top:14px;background:var(--band);border-radius:12px;padding:13px 15px 15px}
.pr-ex .k{display:block;font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--blue);margin-bottom:8px}
.pr-ex .bub{display:inline-block;background:var(--navy);color:#fff;padding:8px 13px;border-radius:14px 14px 2px 14px;font-size:12px;line-height:1.8}
.pr-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pr-row{margin:0;padding:0;border:0;min-width:0}
.pr-row.hi{border-left:1px solid var(--line);padding-left:16px}
.pr-row .k{font-size:12px;font-weight:700;color:var(--mut)}
.pr-row .v{font-family:var(--en);font-weight:800;font-size:clamp(28px,2.6vw,34px);white-space:nowrap;line-height:1.1;color:var(--ink)}
.pr-row .v em{font-family:var(--jp);font-style:normal;font-size:14.5px;font-weight:900;margin:0 2px 0 4px}
.pr-row .v .per{font-size:13.5px;font-family:var(--jp);font-weight:700;color:var(--mut)}
.pr-row.hi .v{color:var(--blue)}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(112deg,#0b2e6e,#1d63d8 82%);color:#fff;padding:60px 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;left:-10%;bottom:-60%;width:50%;height:160%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%)}
.cta h2{font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1.75;position:relative;z-index:2}
.cta p{margin:14px auto 0;color:#eaf9ff;font-size:14px;max-width:560px;position:relative;z-index:2}
.cta-btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
/* ---------- 日程調整ポップアップ ---------- */
.sp-ov{position:fixed;inset:0;background:rgba(10,35,82,.6);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto}
.sp-ov.open{display:flex;animation:spIn .25s ease}
@keyframes spIn{from{opacity:0}to{opacity:1}}
.sp-modal{background:#fff;border-radius:16px;width:100%;max-width:720px;padding:52px 14px 14px;position:relative;box-shadow:0 30px 70px -30px rgba(6,26,66,.7);animation:spUp .3s cubic-bezier(.22,.61,.36,1)}
@keyframes spUp{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
.sp-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;background:var(--band);border-radius:50%;cursor:pointer;font-size:16px;color:var(--navy);font-weight:900;transition:.2s;z-index:2}
.sp-close:hover{background:#dceafa}
.sp-title{position:absolute;top:16px;left:20px;font-size:14px;font-weight:900;color:var(--navy)}
.spir-widget{border-radius:10px;overflow:hidden}

/* ---------- footer ---------- */
footer{background:#0a2352;color:#fff;padding:48px 0 26px}
.ft{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.ft .logo{color:#fff}
.ft .logo i::after{background:#0a2352}
.ft nav ul{display:flex;gap:24px;flex-wrap:wrap}
.ft nav a{font-size:13px;color:#9fb6dd}
.ft nav a:hover{color:#fff}
.cp{margin-top:40px;font-family:var(--en);font-size:11.5px;letter-spacing:.08em;color:#7a92c0}


/* ================= tablet ================= */
@media (max-width:1024px){
  .wrap{padding:0 32px}
  .fv-grid{grid-template-columns:1fr;gap:40px}
  .fv-chat{max-width:560px}
  .srow{grid-template-columns:minmax(190px,240px) 1fr 84px;gap:20px}
  .tab-in{grid-template-columns:1fr;gap:26px}
  .pr-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;gap:30px}
}
/* ================= sp ================= */
@media (max-width:768px){
  body{font-size:14px}
  .jb{display:inline-block;max-width:100%}
  .wrap{padding:0 22px}
  nav.gnav{display:none}
  .menu-btn{display:block}
  .sp-menu{display:flex;position:fixed;inset:0;background:var(--navy);color:#fff;z-index:110;flex-direction:column;justify-content:center;padding:0 34px;gap:4px;opacity:0;pointer-events:none;transition:opacity .35s}
  .menu-open .sp-menu{opacity:1;pointer-events:auto}
  .sp-menu a{font-size:20px;font-weight:900;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);transform:translateY(14px);opacity:0;transition:.4s}
  .menu-open .sp-menu a{transform:none;opacity:1}
  .menu-open .sp-menu a:nth-child(2){transition-delay:.05s}
  .menu-open .sp-menu a:nth-child(3){transition-delay:.1s}
  .menu-open .sp-menu a:nth-child(4){transition-delay:.15s}
  .menu-open .sp-menu a:nth-child(5){transition-delay:.2s}
  .menu-open .menu-btn span{background:#fff}
  .sp-menu .sp-cta{margin-top:24px;background:var(--orange);text-align:center;padding:15px;font-weight:700;border:0;border-radius:999px}
  .fv{padding:100px 0 44px}
  .fv h1{font-size:calc((100vw - 66px) / 10.2);line-height:1.42}
  .fv h1 .box{padding:0 10px;border-radius:6px}
  .fv-btns{flex-wrap:nowrap;gap:10px}
  .fv-btns .btn{flex:1;width:auto;min-width:0;padding:15px 8px;font-size:13px;white-space:nowrap}
  .problem,.pattern,.price{padding:36px 0 44px}
  .stat-board{padding:4px 18px}
  .srow{display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:12px 0}
  .srow .cap{grid-column:1/-1;font-size:11.5px;line-height:1.65;min-height:0}
  .srow .cap br{display:none}
  .srow .barwrap{display:contents}
  .srow .bar{grid-row:2;grid-column:1;align-self:center}
  .srow .msg2{grid-row:3;grid-column:1/-1;margin-top:0;font-size:10.5px}
  .srow .num{grid-row:2;grid-column:2;align-self:center;text-align:right;font-size:23px}
  .srow.hero{padding:15px 0}
  .srow.hero .cap{font-size:12.5px}
  .srow.hero .bar{height:12px}
  .srow.hero .num{font-size:30px}
  .stat-note{flex-direction:column;align-items:flex-start;gap:8px}
  .stat-note .t{white-space:normal}
  .stat-note .s{text-align:left}
  .tab-h{padding:13px 20px}
  .sp-ov{padding:14px 10px}
  .sp-modal{padding:50px 8px 8px}
  .tab-h .pl{display:block;position:absolute;right:18px;top:50%;transform:translateY(-50%);width:14px;height:14px}
  .tab-h .pl::before,.tab-h .pl::after{content:'';position:absolute;background:currentColor;transition:.3s;border-radius:2px}
  .tab-h .pl::before{left:0;top:6px;width:14px;height:2px}
  .tab-h .pl::after{left:6px;top:0;width:2px;height:14px}
  .tab-h.act .pl::after{transform:rotate(90deg);opacity:0}
  .tab-b{padding:20px 18px 26px;margin-bottom:16px}
  .ht-list{grid-template-columns:1fr}
  .howto{padding:20px 18px}
  .ft{flex-direction:column}
}