:root{
      --navy:#082848;--navy-deep:#04172A;--royal:#1848D8;--cyan:#13AECF;--sky:#7FB4F2;
      --ice-soft:#E8EEF7;--bg:#FBFCFE;--bg-soft:#F3F5FB;--text:#0a1a2c;--text-mute:#5a6b80;
      --line:rgba(8,40,72,.10);--line-on-dark:rgba(255,255,255,.14);--slant:-22deg;
      --ff:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --ff-en:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --ease:cubic-bezier(.16,1,.3,1);
      --grad-navy:linear-gradient(150deg,#04172A 0%,#082848 52%,#0c3461 100%);
      --grad-royal:linear-gradient(135deg,#1848D8,#13AECF);
      --grad-royal-soft:linear-gradient(135deg,rgba(24,72,216,.12),rgba(19,174,207,.12));
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:var(--ff);color:var(--text);background:var(--bg);font-size:15px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
    img,svg{display:block;max-width:100%;}
    a{color:inherit;text-decoration:none;}
    .wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative;z-index:5;}
    section{position:relative;}
    .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--royal),var(--cyan));z-index:300;transition:width .12s linear;pointer-events:none;}
    .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);}
    .reveal.armed{opacity:0;transform:translateY(38px);filter:blur(7px);}
    .reveal.in{opacity:1;transform:none;filter:blur(0);}
    @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;filter:none!important;}}
    .eyebrow{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--royal);margin-bottom:20px;text-transform:uppercase;}
    .eyebrow::before{content:"";width:28px;height:10px;background:currentColor;transform:skewX(var(--slant));}
    h2.dh{font-size:clamp(28px,4vw,50px);font-weight:800;letter-spacing:-.025em;line-height:1.28;color:var(--navy);}
    .lead{margin-top:18px;font-size:16px;line-height:2;color:var(--text-mute);max-width:44em;}
    .sec{padding:clamp(56px,6.5vw,92px) 0;position:relative;overflow:hidden;}
    .sec.soft{background:var(--bg-soft);}
    .slant{position:absolute;left:0;width:100%;height:clamp(34px,3.6vw,54px);z-index:6;pointer-events:none;bottom:-1px;}

    .btn-primary{display:inline-flex;align-items:center;gap:13px;background:var(--royal);color:#fff;font-size:15px;font-weight:700;padding:16px 26px;transform:skewX(var(--slant));transition:background .3s;}
    .btn-primary>span{transform:skewX(calc(var(--slant) * -1));display:inline-flex;align-items:center;gap:11px;}
    .btn-primary:hover{background:#1f57f0;}
    .btn-primary .arw{transition:transform .35s var(--ease);}
    .btn-primary:hover .arw{transform:translateX(4px);}
    .btn-ghost{display:inline-flex;align-items:center;gap:11px;border:1.5px solid var(--navy);color:var(--navy);font-size:15px;font-weight:600;padding:15px 26px;transform:skewX(var(--slant));transition:background .3s,color .3s;}
    .btn-ghost>span{transform:skewX(calc(var(--slant) * -1));display:inline-flex;align-items:center;gap:9px;}
    .btn-ghost:hover{background:var(--navy);color:#fff;}
    .btn-ghost.on-dark{border-color:rgba(255,255,255,.42);color:#fff;}
    .btn-ghost.on-dark:hover{background:#fff;color:var(--navy);}

    /* ===== HERO (dashboard composite) ===== */
    .hero{position:relative;background:var(--grad-navy);overflow:hidden;padding:clamp(148px,16vw,206px) 0 clamp(78px,9vw,116px);}
    .hero::after{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(127,180,242,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,180,242,.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(860px 560px at 72% 32%,#000,transparent 74%);mask-image:radial-gradient(860px 560px at 72% 32%,#000,transparent 74%);}
    .hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,54px);align-items:center;}
    .hero .eyebrow{color:var(--cyan);}
    .hero .eyebrow::before{background:var(--cyan);}
    .hero h1{color:#fff;font-size:clamp(24px,3.4vw,42px);font-weight:900;line-height:1.4;letter-spacing:-.02em;margin-bottom:24px;}
    .hero h1 .ph{display:block;white-space:nowrap;}
    .hero h1 .hl{color:var(--cyan);position:relative;}
    .hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.1em;background:var(--cyan);opacity:.45;}
    .hero .sub{color:rgba(255,255,255,.8);font-size:16px;line-height:2;max-width:33em;}
    .hero .micro{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:600;margin:22px 0 0;}
    .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;}

    .composite{position:relative;min-height:470px;}
    .report{position:absolute;top:0;left:0;width:336px;max-width:94%;background:#fff;border-radius:16px;box-shadow:0 34px 80px -30px rgba(0,0,0,.55);padding:20px;z-index:3;}
    .report .rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
    .report .rhead .t{font-size:13.5px;font-weight:800;color:var(--navy);}
    .report .rhead .badge{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--cyan);padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;}
    .report .rhead .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;}
    .report .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;}
    .report .kpi{background:var(--bg-soft);border-radius:10px;padding:11px 10px;}
    .report .kpi .lab{font-size:10px;color:var(--text-mute);font-weight:600;}
    .report .kpi .val{font-size:19px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2;margin:2px 0;}
    .report .kpi .dl{font-size:10px;font-weight:800;color:#1b9e6b;}
    .report .chart{display:flex;align-items:flex-end;gap:8px;height:96px;padding-top:6px;}
    .report .chart .col{flex:1;background:var(--grad-royal-soft);border-radius:6px 6px 0 0;position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:8px;}
    .report .chart .col::before{content:"";position:absolute;inset:0;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--royal),var(--cyan));opacity:.85;}
    .report .chart .col span{position:absolute;bottom:-18px;font-size:9px;color:var(--text-mute);}
    .report .chart-x{margin-top:24px;font-size:10px;color:var(--text-mute);text-align:center;}

    .phone{position:absolute;right:0;bottom:-12px;width:218px;z-index:4;background:#0b1f38;border-radius:30px;padding:8px;box-shadow:0 40px 90px -32px rgba(0,0,0,.6);}
    .phone .screen{background:#fff;border-radius:23px;overflow:hidden;}
    .seo-ui{padding:12px 12px 16px;}
    .statusbar{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;color:var(--navy);margin-bottom:10px;}
    .statusbar .dots{display:flex;gap:3px;}.statusbar .dots i{width:5px;height:5px;border-radius:50%;background:var(--navy);opacity:.4;}
    .seo-search .bar{display:flex;align-items:center;gap:7px;background:var(--bg-soft);border-radius:999px;padding:8px 12px;font-size:10.5px;color:var(--text-mute);font-weight:600;margin-bottom:11px;}
    .seo-search .bar svg{width:13px;height:13px;color:var(--royal);flex:none;}
    .seo-result{padding:9px 0;border-bottom:1px solid var(--line);}
    .seo-result .h{font-size:11px;font-weight:700;color:var(--royal);line-height:1.45;display:flex;gap:6px;align-items:flex-start;}
    .seo-result .rank{flex:none;width:16px;height:16px;border-radius:5px;background:var(--royal);color:#fff;font-size:9px;display:grid;place-items:center;font-weight:800;}
    .seo-result .u{font-size:9px;color:#1b9e6b;margin:2px 0;}
    .seo-result .d{font-size:9.5px;color:var(--text-mute);line-height:1.5;}
    .seo-result .ai{margin-top:6px;font-size:9px;color:var(--navy);background:var(--grad-royal-soft);border-radius:6px;padding:6px 8px;line-height:1.5;}
    .seo-result .ai b{color:var(--royal);}
    .seo-result.top{background:var(--bg-soft);border-radius:10px;padding:10px;border-bottom:none;}
    .float-pill{position:absolute;background:#fff;border-radius:999px;padding:9px 15px;box-shadow:0 16px 40px -16px rgba(0,0,0,.4);font-size:11.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;z-index:5;}
    .float-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);}
    .fp1{top:150px;left:-12px;}
    .fp2{bottom:54px;left:8px;}

    /* clients / target */
    .clients{background:#fff;padding:clamp(44px,5vw,64px) 0;text-align:center;border-bottom:1px solid var(--line);}
    .clients p{font-size:14.5px;color:var(--text-mute);margin-bottom:20px;}
    .pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
    .pills .pill{font-size:13px;font-weight:600;color:var(--navy);background:var(--ice-soft);padding:9px 18px;transform:skewX(var(--slant));}
    .pills .pill>span{display:inline-block;transform:skewX(calc(var(--slant) * -1));}

    /* photo band */
    .photoband{padding:clamp(36px,4vw,56px) 0;}
    .photoband figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:21/8;}
    .photoband img{width:100%;height:100%;object-fit:cover;}
    .photoband figcaption{position:absolute;left:0;bottom:0;padding:24px clamp(22px,3vw,34px);background:linear-gradient(0deg,rgba(4,18,38,.86),transparent);color:#fff;}
    .photoband figcaption .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--cyan);}
    .photoband figcaption h3{font-size:clamp(17px,2vw,23px);font-weight:700;margin:6px 0 4px;}
    .photoband figcaption p{font-size:13px;color:rgba(255,255,255,.78);max-width:40em;}

    /* issue grid */
    .issue-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(36px,4vw,48px);}
    .icard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:flex;gap:18px;align-items:flex-start;transition:transform .35s var(--ease),box-shadow .35s;}
    .icard:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(8,40,72,.28);}
    .icard .no{color:var(--royal);flex:none;width:46px;height:46px;border-radius:12px;background:var(--grad-royal-soft);display:grid;place-items:center;}
    .icard .no svg{width:24px;height:24px;}
    .icard h3{font-size:16px;margin-bottom:6px;color:var(--navy);line-height:1.5;}
    .icard p{font-size:13.5px;color:var(--text-mute);line-height:1.8;}

    /* approach split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,56px);align-items:center;margin-top:clamp(30px,4vw,42px);}
    .alist{display:flex;flex-direction:column;gap:16px;}
    .aitem{display:flex;gap:16px;padding:20px;border-radius:12px;background:#fff;border:1px solid var(--line);}
    .aitem .n{font-weight:900;color:#fff;background:linear-gradient(135deg,var(--royal),var(--cyan));width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:15px;}
    .aitem h3{font-size:16px;color:var(--navy);margin-bottom:4px;}
    .aitem p{font-size:13.5px;color:var(--text-mute);line-height:1.8;}
    .approach-photo{border-radius:14px;overflow:hidden;aspect-ratio:4/5;}
    .approach-photo img{width:100%;height:100%;object-fit:cover;}

    /* order (navy steps) */
    .order{background:var(--grad-navy);color:#fff;overflow:hidden;}
    .order .eyebrow{color:var(--cyan);}.order .eyebrow::before{background:var(--cyan);}
    .order h2.dh{color:#fff;}
    .order .lead{color:rgba(255,255,255,.74);}
    .steps2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(36px,4vw,48px);}
    .step2{background:rgba(255,255,255,.05);border:1px solid var(--line-on-dark);border-radius:14px;padding:clamp(26px,3vw,36px);}
    .step2 .tag{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--cyan);}
    .step2 h3{font-size:clamp(19px,2.2vw,26px);margin:10px 0 8px;font-weight:800;}
    .step2 p{color:rgba(255,255,255,.74);font-size:14px;line-height:1.9;}
    .step2 .arr{margin-top:16px;font-size:22px;color:var(--cyan);font-weight:700;}

    /* card grids */
    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,4vw,48px);}
    .scard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;}
    .scard:hover{transform:translateY(-5px);box-shadow:0 22px 48px -24px rgba(8,40,72,.28);border-color:rgba(19,174,207,.4);}
    .scard .no{font-size:12.5px;font-weight:900;color:var(--royal);letter-spacing:.1em;}
    .scard h3{font-size:19px;color:var(--navy);margin:10px 0 8px;line-height:1.5;}
    .scard p{font-size:14.5px;color:var(--text-mute);line-height:1.8;}

    /* case KPI */
    .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,4vw,48px);}
    .ccard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
    .ccard .ind{padding:10px 18px;font-size:11.5px;font-weight:700;color:var(--royal);background:var(--grad-royal-soft);}
    .ccard .cbody{padding:22px;}
    .ccard h3{font-size:16px;color:var(--navy);margin-bottom:8px;line-height:1.5;}
    .ccard p{font-size:13px;color:var(--text-mute);margin-bottom:16px;line-height:1.8;}
    .ccard .stat{display:flex;gap:20px;}
    .ccard .stat .v{font-size:22px;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.1;}
    .ccard .stat .l{font-size:10.5px;color:var(--text-mute);font-weight:700;margin-top:2px;}

    /* flow */
    .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,4vw,48px);}
    .fstep{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 22px;}
    .fstep .n{font-size:11px;font-weight:900;color:var(--royal);letter-spacing:.1em;}
    .fstep h3{font-size:15.5px;color:var(--navy);margin:8px 0 6px;}
    .fstep p{font-size:13px;color:var(--text-mute);line-height:1.75;}

    /* rich launch flow */
    .launch-flow{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:stretch;margin-top:clamp(36px,4vw,48px);text-align:left;}
    .launch-visual{position:relative;min-height:100%;border-radius:18px;overflow:hidden;background:var(--grad-navy);box-shadow:0 30px 60px -30px rgba(8,40,72,.5);}
    .launch-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .launch-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,72,.04),rgba(8,40,72,.8));}
    .launch-card{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.6);border-radius:14px;padding:20px;backdrop-filter:blur(8px);}
    .launch-card .k{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--royal);margin-bottom:8px;}
    .launch-card h3{font-size:17px;line-height:1.5;color:var(--navy);margin-bottom:8px;}
    .launch-card p{font-size:13px;color:var(--text-mute);line-height:1.75;}
    .launch-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px;}
    .launch-meter span{height:7px;border-radius:999px;background:#dce9f7;}
    .launch-meter span:nth-child(-n+3){background:linear-gradient(90deg,var(--royal),var(--cyan));}
    .launch-steps{display:grid;gap:12px;position:relative;}
    .launch-steps::before{content:"";position:absolute;left:28px;top:34px;bottom:34px;width:2px;background:linear-gradient(var(--royal),var(--cyan));opacity:.22;}
    .launch-step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 20px;transition:transform .35s var(--ease),box-shadow .35s;}
    .launch-step:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(8,40,72,.28);}
    .launch-step .badge{position:relative;z-index:2;width:52px;height:52px;border-radius:16px;background:var(--grad-royal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;}
    .launch-step .meta{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--royal);margin-bottom:6px;}
    .launch-step h3{font-size:16px;color:var(--navy);margin-bottom:6px;}
    .launch-step p{font-size:13.5px;color:var(--text-mute);line-height:1.75;}
    .deliverables{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
    .deliverables span{font-size:11px;font-weight:900;color:var(--navy);background:var(--grad-royal-soft);border:1px solid rgba(24,72,216,.12);border-radius:999px;padding:.34em .72em;}
    @media(max-width:860px){.launch-flow{grid-template-columns:1fr;}.launch-visual{min-height:300px;}}
    @media(max-width:560px){.launch-steps::before{display:none;}.launch-step{grid-template-columns:1fr;}}

    /* faq accordion */
    .faq{max-width:820px;margin:clamp(32px,4vw,44px) auto 0;}
    .qitem{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden;}
    .q{display:flex;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;font-weight:700;color:var(--navy);font-size:15px;line-height:1.6;}
    .q .ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--grad-royal-soft);color:var(--royal);display:grid;place-items:center;font-weight:900;transition:transform .3s;}
    .qitem.open .ic{transform:rotate(45deg);}
    .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
    .ans p{padding:0 22px 20px;color:var(--text-mute);font-size:14px;line-height:1.9;}

    /* diagnosis (navy) */
    .diag{background:var(--grad-navy);color:#fff;overflow:hidden;}
    .diag .eyebrow{color:var(--cyan);}.diag .eyebrow::before{background:var(--cyan);}
    .diag h2.dh{color:#fff;}.diag .lead{color:rgba(255,255,255,.74);}
    .diag .scard{background:rgba(255,255,255,.05);border-color:var(--line-on-dark);}
    .diag .scard h3{color:#fff;}.diag .scard p{color:rgba(255,255,255,.72);}
    .diag .scard .no{color:var(--cyan);}

    /* final cta */
    .final{position:relative;background:var(--grad-navy);color:#fff;padding:clamp(92px,12vw,160px) 0;text-align:center;overflow:hidden;}
    .final::after{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(127,180,242,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,180,242,.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(700px 400px at 50% 40%,#000,transparent 72%);mask-image:radial-gradient(700px 400px at 50% 40%,#000,transparent 72%);}
    .final h2{font-size:clamp(28px,4.4vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1.3;color:#fff;}
    .final p{margin-top:20px;font-size:16px;color:rgba(255,255,255,.78);max-width:38em;margin-left:auto;margin-right:auto;line-height:2;}
    .final .cta-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
    /* embedded LP form */
    .lpform{max-width:680px;margin:44px auto 0;background:#fff;border-radius:16px;padding:clamp(28px,4vw,44px);text-align:left;box-shadow:0 30px 70px -30px rgba(4,23,42,.6);}
    .lpform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
    .lpform .f{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
    .lpform .f.full{grid-column:1/-1;}
    .lpform label{font-size:12.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
    .lpform label .rq{font-size:10px;font-weight:700;color:#fff;background:var(--royal);padding:2px 7px;border-radius:3px;}
    .lpform label .op{font-size:10px;font-weight:600;color:var(--text-mute);border:1px solid var(--line);padding:2px 7px;border-radius:3px;}
    .lpform input,.lpform textarea{font-family:var(--ff);font-size:15px;color:var(--text);background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:13px 15px;transition:border-color .25s,box-shadow .25s;}
    .lpform input:focus,.lpform textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,207,.18);}
    .lpform textarea{resize:vertical;min-height:110px;}
    .lpform .sub button{width:100%;border:none;cursor:pointer;font-family:var(--ff);justify-content:center;}
    @media(max-width:600px){.lpform .row{grid-template-columns:1fr;}}

    /* ===== inline static header ===== */
    .gpnav{position:fixed;top:16px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:0 16px;font-family:var(--ff);}
    .gpnav .bar{display:flex;align-items:center;gap:clamp(14px,2vw,30px);background:rgba(255,255,255,.97);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 38px rgba(15,42,74,.16),inset 0 1px 0 rgba(255,255,255,.7);border-radius:9999px;padding:11px 14px 11px 26px;max-width:1180px;width:100%;}
    .gpnav .lg{display:flex;align-items:center;flex:none;margin-right:auto;}
    .gpnav .lg img{height:60px;width:auto;display:block;}
    .gpnav .menu{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
    .gpnav .menu>a,.gpnav .dd>a{font-size:14px;font-weight:500;color:#082848;white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center;gap:5px;}
    .gpnav .menu a:hover,.gpnav .dd:hover>a{color:#1848D8;}
    .gpnav a.active{color:#1848D8;font-weight:700;}
    .gpnav .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s;}
    .gpnav .dd{position:relative;display:flex;align-items:center;height:44px;}
    .gpnav .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;}
    .gpnav .dd .panel{display:flex;flex-direction:column;gap:2px;position:absolute;top:48px;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;background:#fff;border:1px solid rgba(15,42,74,.1);border-radius:16px;box-shadow:0 18px 44px rgba(15,42,74,.16);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;}
    .gpnav .dd:hover .panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
    .gpnav .dd:hover .caret{transform:rotate(225deg);}
    .gpnav .panel a{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-radius:10px;transition:background .2s;}
    .gpnav .panel a:hover{background:#DCEEFE;}
    .gpnav .panel .en{font-size:11px;font-weight:700;letter-spacing:.1em;color:#1848D8;}
    .gpnav .panel .lb{font-size:14.5px;font-weight:600;color:#082848;}
    .gpnav .cta{display:inline-flex;align-items:center;gap:9px;background:#082848;color:#fff;font-size:14px;font-weight:600;padding:9px 10px 9px 18px;border-radius:9999px;white-space:nowrap;flex:none;transition:background .25s;}
    .gpnav .cta:hover{background:#1848D8;}
    .gpnav .cta .c{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#082848;font-size:13px;}
    .gpnav .menu>a.cta{color:#fff;}
    .gpnav .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:11px;}
    .gpnav .burger span{display:block;height:2px;width:100%;background:#082848;border-radius:2px;transition:transform .28s,opacity .2s;}
    #gpdrawer{position:absolute;opacity:0;pointer-events:none;}
    .gpdrawer{position:fixed;top:84px;left:12px;right:12px;bottom:12px;z-index:199;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(15,42,74,.22);overflow-y:auto;padding:18px clamp(20px,5vw,28px) 28px;display:none;}
    #gpdrawer:checked ~ .gpdrawer{display:block;}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(2){opacity:0;}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .gpdrawer a{display:block;font-size:16px;font-weight:600;color:#082848;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(15,42,74,.06);}
    .gpdrawer .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;color:#1848D8;margin:18px 0 4px;}
    .gpdrawer .cta{display:flex;align-items:center;justify-content:center;gap:8px;background:#082848;color:#fff;font-size:16px;font-weight:600;text-decoration:none;padding:16px;border-radius:9999px;margin-top:22px;border:none;}
    @media(max-width:980px){.gpnav .menu{display:none;}.gpnav .burger{display:flex;}}
    @media(min-width:981px){.gpnav .burger{display:none;}.gpdrawer{display:none!important;}}

    /* breadcrumbs */
    .crumbs{background:var(--bg);border-top:1px solid var(--line);}
    .crumbs .cwrap{max-width:1100px;margin:0 auto;padding:20px clamp(20px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--text-mute);}
    .crumbs a{color:var(--text-mute);transition:color .2s;}
    .crumbs a:hover{color:var(--royal);}
    .crumbs .sep{opacity:.45;}
    .crumbs .cur{color:var(--navy);font-weight:600;}

    @media(max-width:980px){
      .hero .wrap{grid-template-columns:1fr;gap:30px;}
      .composite{min-height:420px;max-width:400px;margin:0 auto;}
      .split{grid-template-columns:1fr;}
      .approach-photo{aspect-ratio:16/10;}
      .grid3,.case-grid{grid-template-columns:repeat(2,1fr);}
      .flow{grid-template-columns:repeat(2,1fr);}
    }
    @media(max-width:620px){
      .issue-grid,.steps2,.grid3,.case-grid,.flow{grid-template-columns:1fr;}
      .composite{min-height:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;}
      .report{position:static;width:100%;max-width:340px;}
      .phone{position:static;width:200px;}
      .float-pill{display:none;}
    }
  
    .f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(32px,5vw,64px);align-items:start;}
    .f-grid nav a{transition:color .28s cubic-bezier(.22,1,.36,1);}
    .f-grid nav a:hover{color:#fff;}
    @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;}}
    @media(max-width:520px){.f-grid{grid-template-columns:1fr;}}
  

/* 引き渡し前の手直し 2026-08-03
   見本の数字を外したので、その枠に入る短い説明の見た目を整える */
html body .report .kpis-plain .kpi{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 6px;}
html body .report .kpis-plain .val-t{font-size:12px;font-weight:700;color:var(--navy);line-height:1.4;white-space:nowrap;}

/* =========================================================================
   メリハリの付け方 2026-08-04（採用: 01・06・08・09）
   色は増やさず、大きさ・余白・面だけで差をつける。
   ====================================================================== */

/* 01 主役の文字を1つだけ決める
   ヒーロー見出し42px、セクション見出し50pxで、一番の主張が2番目より小さかった。
   ヒーローを上げ、セクション見出しを下げて、順番を入れ替える。
   見出しは1行1文で折り返さない作りなので、上げた分だけ左の列も広げる。
   直下の説明文は16px→15pxに落として、見出しとの差を広げる。 */
/* 1行を折り返さない作りなので、上限52pxまでを画面幅に合わせて詰める
   （1200px前後で「来場につながる資産へ。」が列幅を超えるため 3.9vw） */
.hero h1{font-size:clamp(30px,3.9vw,52px);line-height:1.32;letter-spacing:-.035em;}
.hero .sub{font-size:15px;line-height:1.95;}
h2.dh{font-size:clamp(26px,3.2vw,40px);}
/* 締めのCTAの見出しは54pxで、ヒーローより大きいままだった。
   ヒーロー ＞ CTA見出し ＞ セクション見出し の順に固定する。 */
.final h2{font-size:clamp(26px,3.4vw,44px);}
/* スマホは common.css 側が html body で寸法を固定しているため、
   同じ強さで書き直さないと上の指定が届かない。順番はPCと同じにする。
   ヒーローは1行を折り返さない作りなので、画面幅に収まる28pxが上限。 */
@media(max-width:680px){
  html body .hero h1{font-size:28px;line-height:1.4;letter-spacing:-.03em;}
  html body .final h2{font-size:23px;line-height:1.45;}
  html body h2.dh,
  html body .sec h2{font-size:21px;line-height:1.5;}
}
@media(min-width:981px){
  html body .hero .wrap{grid-template-columns:1.15fr .85fr;}
}

/* タブレット幅で右の図が消える 2026-08-04
   980px以下の指定で .composite に margin:0 auto が入っているが、
   中の2枚（レポート・スマホ）はどちらも絶対配置で、幅を持たない。
   グリッドの中で左右autoにすると、幅は中身に合わせて0になり、
   結果として621〜980pxの間だけ図が潰れていた。箱に幅を持たせて直す。 */
@media(max-width:980px) and (min-width:621px){
  html body .hero .composite{width:min(400px,100%);max-width:none;margin-left:auto;margin-right:auto;}
}

/* 06 写真を1か所だけ全幅にする
   写真はどれも文字と同じ幅に収まっていて、息の入る場所がなかった。
   紺の区画の直前に1枚だけ端まで抜いた写真を置く。増やすのはここだけ。
   夕景の外観にしているのは、直後の紺の面へ色がつながるため。 */
.fullshot{height:clamp(220px,26vw,340px);overflow:hidden;background:var(--navy);}
.fullshot img{width:100%;height:100%;object-fit:cover;object-position:center 58%;}

/* 写真の役割をはっきりさせる 2026-08-04
   文章は削らない方針なので、写真の置き場所で強弱をつける。
   ・課題 …… 朝の外観（検討者が最初に見るもの）を縦長で左に置き、
              カードは縦1列にして「並んだ枠」の見え方をやめる
   ・全幅帯 … 夕景の外観（面の切り替え）
   ・流れ …… 玄関と階段（相談の入口）
   ・理由 …… 打ち合わせの手元（一緒に設計する）
   残りの写真（台所・居間、青の合成3枚、いただいたパース）はこのページでは使わない。 */
.issue-split{display:grid;grid-template-columns:minmax(240px,.78fr) 1fr;gap:clamp(18px,2.6vw,30px);
  align-items:stretch;margin-top:clamp(28px,3.4vw,40px);}
.issue-photo{overflow:hidden;border-radius:12px;min-height:100%;}
.issue-photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block;}
html body .issue-split .issue-grid{grid-template-columns:1fr;gap:12px;margin-top:0;}
@media(max-width:860px){
  .issue-split{grid-template-columns:1fr;}
  .issue-photo{aspect-ratio:16/7;min-height:0;}
  html body .issue-split .issue-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  html body .issue-split .issue-grid{grid-template-columns:1fr;}
}

/* 支援内容の6枚は文字だけなので、番号を見出し扱いにして目を運ぶ */
html body .scard .no{font-size:28px;font-weight:900;letter-spacing:.02em;line-height:1;
  color:rgba(8,40,72,.4);}

/* =========================================================================
   面と余白でメリハリをつける 2026-08-04
   文章は削らないので、区画の地色・上下の余白・カードの強さで差を作る。
   ・白い面が4つ続いていた並びに、薄氷（流れ）を1つ挟む → index.html の class
   ・重い区画（支援内容）は下を開け、軽い区画（FAQ）は詰める
   ・支援内容の6枚は、1枚だけ地色や枠線を変えると広告のように浮くため、
     6枚とも同じ強さのままにする（強弱は面と余白で付ける）
   ====================================================================== */
html body #service{padding-bottom:clamp(84px,9.5vw,124px);}
html body #faq{padding:clamp(38px,4.2vw,58px) 0 clamp(48px,5.5vw,74px);}

html body #service .grid3 .scard:nth-child(5){border-color:rgba(8,40,72,.1);}
html body #service .grid3 .scard:nth-child(5) .no{color:rgba(8,40,72,.4);}

/* =========================================================================
   文章のメリハリ 2026-08-04（文言は変更していません）
   太さが700・800・900と場所ごとに混ざり、太字が効かなくなっていたので4段に固定する。
     本文500 ／ 小見出し700 ／ セクション見出し800 ／ ヒーロー900
   あわせて、リードは行長を詰めて一段大きく、カードは見出しと本文の差を広げる。
   1文目だけ大きくする指定（.lead-1st）は、1セクションに1回までのまま。
   ====================================================================== */
html body .lead{max-width:32em;font-size:17px;font-weight:500;line-height:1.95;}
html body .clients p{font-size:15px;font-weight:500;}

html body .icard h3{font-size:17px;font-weight:700;line-height:1.55;}
html body .icard p{font-size:13.5px;font-weight:500;line-height:1.85;}
html body .scard h3{font-size:20px;font-weight:800;line-height:1.45;}
html body .scard p{font-size:14px;font-weight:500;line-height:1.85;}
html body .aitem h3{font-size:17px;font-weight:700;}
html body .aitem p{font-size:13.5px;font-weight:500;}
html body .launch-step h3{font-size:17px;font-weight:800;}
html body .launch-step p{font-size:13.5px;font-weight:500;}
html body .step2 h3{font-weight:800;}
html body .step2 p{font-weight:500;}
html body .q{font-size:16px;font-weight:700;}
html body .ans p{font-size:14px;font-weight:500;line-height:1.9;}
html body .midcta p{font-weight:500;}

/* 08 斜めを使う場所を絞る
   ボタン・業種タグ・番号・強調帯が全部−22度で、傾きが目印にならなかった。
   傾きはボタンと強調帯だけに残し、業種タグと手順の番号は水平に戻す。 */
html body .pills .pill,
html body .pills .pill>span{transform:none;}
html body .launch-step .badge.em-num,
html body .launch-step .badge.em-num>span{transform:none;}

/* 09 同じ記号を4回並べない
   お悩みの4枚は同じチェック記号が並び、模様になっていた。
   記号をやめて薄い番号にすると、4枚が並列の4項目だと読める。 */
html body .icard .no{width:auto;height:auto;border-radius:0;background:none;display:block;
  font-size:28px;font-weight:900;line-height:1;letter-spacing:.02em;color:rgba(8,40,72,.55);}
@media(max-width:620px){
  html body .icard .no{font-size:24px;}
}

/* 下線を引いた語のところで行が割れる 2026-08-04
   「キーワード・コンテンツ・導線」は下線を切らさないために keep-all にしていたが、
   13文字がひと塊のまま次の行へ送られ、手前の行が短く残っていた。
   中黒のところでは折れるようにする（語の途中では折らない）。
   auto-phrase に対応しない環境では、これまでどおり keep-all のまま。 */
html body .lead .em-underline,
html body .sub .em-underline{
  word-break:auto-phrase;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* 説明文の折り返し 2026-08-04
   共通CSSの word-break:auto-phrase（文節で折る）は、対応していない環境では
   指定そのものが無効になり、装飾を付けた語は keep-all のまま残る。
   その結果「技術SEO、構造化データ、E-E-A-T」の20文字が丸ごと次の行へ送られ、
   段落の真ん中に286pxの空きができていた（両端そろえと重なり、字間が広がる）。
   折れる場所は普通の日本語組みに戻し、句読点を行頭に出さないだけに留める。
   下線・帯は2行に割れても両方に描く。 */
html body .sec p.lead,
html body .order p.lead{
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:balance;
  max-width:28em;
}
/* 最後の行に2文字だけ残るのをやめる。
   text-wrap:balance は行の長さを揃えるので、数文字の孤立が消える。
   （例: 「SEOを土台に」の説明文の最終行 38px → 404px）
   折れる場所は文節だけ（auto-phrase）。普通の折り返しにすると
   「検索／順位」「コン／テンツ」のように語の途中で割れる。
   両端そろえ（justify）は併用しない。balance が行を短くするため、
   その余りを字間に配って一文字ずつ離れて見えていた（送り幅が最大54%増）。
   右端の不揃いは、行長を8行分短く（32em→28em）して押さえる。 */
html body .hero .sub{
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
html body .sec p.lead .em-marker,
html body .sec p.lead .em-underline{
  word-break:auto-phrase;
  overflow-wrap:normal;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* =========================================================================
   LPとして成立させる 2026-08-04
   このページは広告・営業資料からの単独流入を受ける想定に変更。
   ・出口を「無料相談」1つに絞る（共通ナビ・パンくず・フッターの回遊リンクを外す）
   ・ヘッダーはロゴとCTAだけ
   ・ヒーローを過ぎたら追従CTAを出す（フォームが見えたら引っ込む）
   ・区切りに中間CTAを1つ置く
   マークアップは共通パーツのまま残し、body.lp の指定だけで切り替える。
   通常のサービスページに戻すときは body から lp を外す。
   ====================================================================== */
body.lp .gpnav .menu{display:flex;}
/* ヘッダーは追従させない。LPは出口が1つなので、
   上に置いたまま流れて消えるほうが読みの邪魔にならない。 */
body.lp .gpnav{position:absolute;top:16px;}
body.lp .gpnav::before{display:none;}
body.lp .gpnav .menu>.dd,
body.lp .gpnav .menu>a:not(.cta){display:none;}
body.lp .gpnav .burger{display:none;}
body.lp .gpdrawer{display:none;}
body.lp .crumbs{display:none;}
body.lp footer .f-grid>div:nth-child(n+2){display:none;}
body.lp footer .f-grid{grid-template-columns:1fr;}

/* 中間CTA。紺はベタで、ボタンは1つだけ。 */
.midcta{background:var(--navy);color:#fff;}
.midcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  padding:clamp(30px,4vw,44px) clamp(20px,4vw,40px);flex-wrap:wrap;}
.midcta h2{font-size:clamp(18px,2.2vw,26px);font-weight:800;line-height:1.5;letter-spacing:-.02em;}
.midcta p{margin-top:8px;font-size:14px;line-height:1.85;color:rgba(255,255,255,.74);max-width:40em;}
.midcta .btn-primary{flex:none;}

/* 追従CTAの見た目は common.css へ移しました（LINE・インスタでも使うため）2026-08-05 */

/* フォーム末尾の一行。送信前に知りたいことを置く。 */
.lpform .formnote{grid-column:1/-1;margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--text-mute);text-align:center;}

/* 引き渡し前の手直し 2026-08-05
   スマホのファーストビューが縦に長く、指標カードまで一度に入らない。
   文字の大きさは変えずに、間だけを詰める。 */
@media(max-width:760px){
  html body .hero{ padding-top:96px; padding-bottom:28px; }
  html body .hero h1{ margin-bottom:16px; }
  html body .hero .sub{ margin-top:0; margin-bottom:14px; }
  html body .hero .micro{ margin-top:0; margin-bottom:16px; }
  html body .hero .cta-row{ margin-top:0; }
  html body .composite{ margin-top:22px; min-height:0; }
}