:root{
      --navy:#082848;--navy-deep:#04172A;--royal:#1848D8;--cyan:#13AECF;--sky:#7FB4F2;--line-green:#06C755;
      --ice-soft:#E8EEF7;--bg:#FBFCFE;--bg-soft:#F3F5FB;--text:#0a1a2c;--text-mute:#5a6b80;
      --line-green:#06C755;
      --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;
      --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(--royal));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.3;color:var(--navy);}
    .lead{margin-top:18px;font-size:16px;line-height:2;color:var(--text-mute);max-width:44em;}
    .sec{padding:clamp(76px,9vw,124px) 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);}

    /* phone shell + LINE chat */
    .phone{width:300px;max-width:100%;background:#0b1f38;border-radius:34px;padding:9px;box-shadow:0 44px 100px -34px rgba(0,0,0,.5);}
    .phone .screen{background:#8aa6c4;border-radius:26px;overflow:hidden;}
    .line-top{background:var(--line-green);color:#fff;display:flex;align-items:center;gap:10px;padding:14px 16px;}
    .line-top .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;}
    .line-top .nm{font-size:14px;font-weight:700;line-height:1.3;}
    .line-top .nm span{display:block;font-size:10px;font-weight:500;opacity:.85;}
    .line-body{background:#8aa6c4;padding:16px 14px 22px;min-height:280px;display:flex;flex-direction:column;gap:9px;}
    .line-day{align-self:center;font-size:10px;color:#fff;background:rgba(0,0,0,.18);padding:3px 12px;border-radius:999px;margin:4px 0;}
    .bub{max-width:78%;padding:9px 13px;border-radius:14px;font-size:12px;line-height:1.6;position:relative;}
    .bub .t{display:block;font-size:8px;opacity:.5;margin-top:3px;}
    .bub.in{align-self:flex-start;background:#fff;color:var(--text);border-top-left-radius:4px;}
    .bub.out{align-self:flex-end;background:#bcd0f7;color:#0a1a3a;border-top-right-radius:4px;}
    .line-rich{align-self:flex-start;width:74%;background:#fff;border-radius:12px;overflow:hidden;}
    .line-rich .img{aspect-ratio:16/9;background:linear-gradient(135deg,#06C755,#0a9c47);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;text-align:center;padding:8px;}
    .line-rich .btns{display:flex;}
    .line-rich .btns b{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--royal);padding:9px 4px;border-top:1px solid var(--line);}
    .line-rich .btns b+b{border-left:1px solid var(--line);}

    /* HERO centered */
    .hero{position:relative;padding:clamp(140px,15vw,196px) 0 clamp(60px,7vw,84px);text-align:center;background:var(--bg-soft);overflow:hidden;}
    .hero::before{content:"";position:absolute;width:760px;height:760px;max-width:120vw;border-radius:50%;background:var(--grad-royal-soft);top:-320px;left:50%;transform:translateX(-50%);filter:blur(10px);}
    .hero .eyebrow{color:var(--royal);}
    .hero h1{font-size:clamp(30px,5vw,58px);font-weight:900;line-height:1.36;color:var(--navy);letter-spacing:-.02em;}
    .hero h1 .ph{display:inline-block;}
    .hero h1 .hl{color:var(--royal);}
    @media(max-width:480px){.hero h1{font-size:clamp(24px,7.2vw,30px);white-space:nowrap;}}
    .hero .sub{color:var(--text-mute);max-width:none;margin:22px auto 0;font-size:16px;line-height:2;}
    .hero .micro{font-size:12.5px;color:var(--text-mute);font-weight:600;margin:18px auto 0;}
    .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
    .hero .trustband{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px;}
    .hero .trustband .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px;}
    .hero .trustband .chip b{color:var(--royal);}
    .hero-phone{margin:50px auto 0;position:relative;width:300px;}
    .badge-line{position:absolute;color:#fff;font-weight:700;font-size:12px;padding:8px 15px;border-radius:999px;box-shadow:0 16px 38px -14px rgba(0,0,0,.4);background:var(--royal);z-index:6;white-space:nowrap;}
    .bl1{top:48px;left:-120px;}
    .bl2{top:188px;right:-104px;background:var(--royal);}
    @media(max-width:680px){.badge-line{display:none;}}

    /* target */
    .target{background:#fff;text-align:center;padding:clamp(40px,5vw,56px) 0;border-bottom:1px solid var(--line);}
    .target p{color:var(--text-mute);font-size:14.5px;margin-bottom:18px;}
    .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;transform:scale(1);will-change:transform;}
    .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,.photoband figcaption h2{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 cards */
    .tl{max-width:none;margin:clamp(36px,4vw,48px) auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
    .tlrow{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;}
    .tlrow .no{font-size:clamp(20px,2.4vw,28px);font-weight:900;color:var(--royal);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
    .tlrow h3{font-size:16px;color:var(--navy);margin:6px 0 5px;}
    .tlrow p{font-size:13.5px;color:var(--text-mute);line-height:1.8;}
    @media(max-width:680px){.tl{grid-template-columns:1fr;}}

    /* why line */
    .why{background:var(--grad-navy);color:#fff;overflow:hidden;}
    .why .eyebrow{color:var(--cyan);}.why .eyebrow::before{background:var(--cyan);}
    .why h2.dh{color:#fff;}.why .lead{color:rgba(255,255,255,.74);margin-left:auto;margin-right:auto;}
    .why .head{text-align:center;}
    .pp{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:clamp(36px,4vw,48px);}
    .ppcard{background:rgba(255,255,255,.05);border:1px solid var(--line-on-dark);border-radius:14px;padding:clamp(26px,3vw,34px);}
    .ppcard .tag{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--sky);}
    .ppcard.push .tag{color:var(--royal);}
    .ppcard h3{font-size:clamp(18px,2.2vw,24px);margin:8px 0 10px;font-weight:800;}
    .ppcard p{color:rgba(255,255,255,.74);font-size:14px;line-height:1.9;}
    .ppcard a{display:inline-block;margin-top:14px;color:var(--cyan);font-weight:700;font-size:13.5px;}
    .pp .arrow{font-size:30px;color:var(--cyan);text-align:center;}
    .why .note{margin-top:30px;background:rgba(255,255,255,.05);border-radius:12px;padding:24px 26px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.9;}
    .why .note .big{font-size:clamp(20px,2.4vw,28px);font-weight:900;color:#fff;display:block;margin-bottom:6px;}
    .why .note small{opacity:.55;font-size:11.5px;}
    @media(max-width:780px){.pp{grid-template-columns:1fr;}.pp .arrow{transform:rotate(90deg);}}

    /* sticky story */
    .story{background:var(--bg-soft);}
    .story-head{text-align:center;margin-bottom:clamp(40px,5vw,54px);}
    .story-head .lead{margin-left:auto;margin-right:auto;max-width:none;white-space:nowrap;}
    @media(max-width:900px){.story-head .lead{white-space:normal;}}
    .story-grid{display:grid;grid-template-columns:340px 1fr;gap:clamp(40px,5vw,60px);align-items:start;}
    .story-phone{position:sticky;top:96px;justify-self:center;}
    .story-steps{display:flex;flex-direction:column;gap:16px;}
    .sstep{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px;border-left:4px solid var(--line);transition:border-color .4s var(--ease),box-shadow .4s,transform .4s;}
    .sstep.active{border-left-color:var(--royal);box-shadow:0 22px 48px -24px rgba(8,40,72,.24);transform:translateX(6px);}
    .sstep .tag{font-size:clamp(14px,1.6vw,18px);font-weight:900;color:var(--royal);letter-spacing:.04em;}
    .sstep h3{font-size:18px;color:var(--navy);margin:8px 0 8px;}
    .sstep p{color:var(--text-mute);font-size:14px;line-height:1.9;}
    .chat-stage .bub,.chat-stage .line-rich,.chat-stage .line-day{opacity:0;transform:translateY(10px);transition:all .5s var(--ease);}
    .chat-stage .bub.show,.chat-stage .line-rich.show,.chat-stage .line-day.show{opacity:1;transform:none;}
    @media(max-width:880px){.story-grid{grid-template-columns:1fr;}.story-phone{position:relative;top:0;margin-bottom:30px;}.chat-stage .bub,.chat-stage .line-rich,.chat-stage .line-day{opacity:1;transform:none;}}

    /* strength + works cards */
    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,4vw,48px);}
    @media(max-width:720px){.grid3{grid-template-columns:1fr;gap:14px;}.scard{padding:22px;}}
    .scard{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;transition:transform .35s var(--ease),box-shadow .35s;}
    .scard::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad-royal);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);}
    .scard:hover{transform:translateY(-5px);box-shadow:0 22px 48px -24px rgba(8,40,72,.28);}
    .scard:hover::after{transform:scaleX(1);}
    .scard .n{width:46px;height:46px;border-radius:13px;background:var(--grad-royal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px;margin-bottom:16px;box-shadow:0 10px 22px -10px rgba(24,72,216,.6);}
    .scard h3{font-size:16.5px;color:var(--navy);margin-bottom:6px;line-height:1.5;}
    .scard p{font-size:13.5px;color:var(--text-mute);line-height:1.8;}
    .scard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
    .scard .chips span{font-size:11px;font-weight:800;color:var(--navy);background:var(--grad-royal-soft);border:1px solid rgba(24,72,216,.12);border-radius:999px;padding:.34em .8em;}
    .wcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
    .wcard .k{padding:10px 18px;font-size:11.5px;font-weight:700;color:#0A7088;background:var(--ice-soft);}
    .wcard .wb{padding:22px;}
    .wcard h3{font-size:16px;color:var(--navy);margin-bottom:8px;line-height:1.5;}
    .wcard p{font-size:13px;color:var(--text-mute);line-height:1.8;}

    /* flow cards (Instagram LP style) */
    .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,4vw,48px);text-align:left;}
    .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;}
    @media(max-width:880px){.flow{grid-template-columns:1fr 1fr;}}
    @media(max-width:560px){.flow{grid-template-columns:1fr;}}

    /* 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;}}
    .frow h3{font-size:16.5px;color:var(--navy);margin-bottom:4px;}
    .frow p{font-size:14px;color:var(--text-mute);line-height:1.8;}

    /* faq */
    .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;}

    /* 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.32;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;}
  
    .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
   スマホでヒーローが中央揃えのうえ縦に伸び、1画面目が埋まってしまう。
   Instagram・AI検索のページに合わせて左揃えにし、詰める。 */
@media(max-width:680px){
  html body .hero{text-align:left;padding-top:112px;padding-bottom:44px;}
  html body .hero .sub{margin-top:16px;line-height:1.85;font-size:15px;}
  html body .hero .micro{margin-top:14px;}
  html body .hero .cta-row{justify-content:flex-start;margin-top:20px;}
  html body .hero .trustband{justify-content:flex-start;gap:8px;margin-top:18px;}
  html body .hero .trustband .chip{font-size:12px;padding:7px 12px;}
  html body .hero h1{white-space:normal;}
}

/* =========================================================================
   メリハリをつける 2026-08-04
   これまでは明るい面が9つ続き、濃紺は最後のCTAだけだった。
   文字も13.5〜18pxに固まり、白いカードのグリッドが4つ連続していた。
   4つの軸で差をつける。
     1) 面   … 細い濃紺の帯（対象）と、濃紺の面（選ばれる理由）で明るい面を断つ
     2) 文字 … 見出しを大きく、本文を軽く、数字を主役の大きさにする
     3) 余白 … 強い面は広く、繋ぎの面は詰める（今までは全部同じ間隔）
     4) 密度 … 白カード4連続を崩す（課題=数字主役／選ばれる理由=濃色／FAQ=罫線）
   色は navy と royal のみ。スマホの文字サイズは共通CSSの指定を壊さないよう、
   大きくする指定はすべて min-width:681px の中に置く。
   ====================================================================== */

/* ---------- 1) 余白の強弱 ---------- */
html body .sec.tight{padding:clamp(40px,4.6vw,58px) 0 clamp(48px,5.6vw,74px);}
html body .sec.wide{padding:clamp(72px,8.6vw,116px) 0 clamp(80px,9.6vw,128px);}

/* ---------- 2) ヒーロー ---------- */
html body .hero{padding-bottom:0;}
html body .hero .wrap{padding-bottom:clamp(34px,4vw,48px);}
@media(min-width:681px){
  html body .hero h1{font-size:clamp(34px,5.4vw,64px);letter-spacing:-.03em;line-height:1.28;}
  html body .hero .sub{font-size:15.5px;line-height:1.95;}
}
@media(max-width:680px){
  html body .hero .wrap{padding-bottom:28px;}
}

/* ---------- 3) 対象の帯：明るい面の連続を、細い濃紺で断つ ----------
   写真を背景に敷いていましたが、文字の後ろでほとんど見えず、
   高さを取るだけだったので外しました。2026-08-04 */
html body .target.is-dark{background:var(--navy-deep);border-bottom:0;padding:clamp(28px,3.4vw,42px) 0;}
html body .target.is-dark p{color:rgba(255,255,255,.66);font-size:13.5px;margin-bottom:15px;}
html body .target.is-dark .pill{background:rgba(255,255,255,.09);border:1px solid var(--line-on-dark);color:#fff;}

/* ---------- 4) 写真の帯：枠に収めず、画面いっぱいに見せる ---------- */
html body .photoband{padding:0;}
html body .photoband figure{border-radius:0;aspect-ratio:auto;height:clamp(240px,26vw,340px);}
html body .photoband figcaption{padding-inline:max(clamp(20px,4vw,40px),calc((100% - 1020px) / 2));padding-bottom:clamp(26px,3vw,38px);}
@media(min-width:681px){
  html body .photoband figcaption h3{font-size:clamp(20px,2.6vw,32px);letter-spacing:-.02em;}
  html body .photoband figcaption p{font-size:14px;}
}
@media(max-width:680px){
  html body .photoband figure{aspect-ratio:auto;height:230px;}
}

/* ---------- 5) 課題：白カードをやめ、数字を主役にする ---------- */
html body #issue{background:var(--bg-soft);}
html body #issue .tl{gap:0;margin-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
html body #issue .tlrow{background:transparent;border:0;border-radius:0;padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,30px);}
html body #issue .tlrow:nth-child(odd){border-right:1px solid var(--line);}
html body #issue .tlrow:nth-child(n+3){border-top:1px solid var(--line);}
html body #issue .tlrow .no{display:flex;align-items:baseline;gap:10px;}
html body #issue .tlrow .no i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--royal);}
html body #issue .tlrow .no b{font-size:clamp(44px,5.6vw,72px);font-weight:900;line-height:.85;letter-spacing:-.05em;color:rgba(8,40,72,.16);font-variant-numeric:tabular-nums;}
html body #issue .tlrow h3{margin:10px 0 6px;}
@media(min-width:681px){
  html body #issue .tlrow h3{font-size:clamp(17px,2vw,21px);line-height:1.55;}
  html body #issue .tlrow p{font-size:14px;}
}
@media(max-width:680px){
  html body #issue .tlrow:nth-child(odd){border-right:0;}
  html body #issue .tlrow:nth-child(n+2){border-top:1px solid var(--line);}
}

/* ---------- 6) 友だち追加から来場予約まで：白い面にして課題と切る ---------- */
html body .story{background:#fff;}
html body .story .sstep.active{transform:translateX(8px);}

/* ---------- 7) 選ばれる理由：ここを濃紺にして中盤を締める ---------- */
html body .strength{background:var(--grad-navy);color:#fff;padding:clamp(62px,7.4vw,96px) 0 clamp(66px,8vw,104px);}
html body .strength h2.dh{color:#fff;}
html body .strength .lead{color:rgba(255,255,255,.72);}
html body .strength .em-underline{color:#fff;}
html body .strength .em-marker{background:linear-gradient(transparent 62%,rgba(24,72,216,.62) 62%);}
/* 等幅の白い箱に丸番号とタグを並べる作りは、どのサイトでも見る形だった。
   このサイトの語彙（罫線と傾いた面）に寄せて、罫線で区切った3列に作り替える。 */
html body .strength .grid3{gap:0;margin-top:clamp(38px,4.4vw,54px);border-top:1px solid var(--line-on-dark);}
html body .strength .scard{background:transparent;border:0;border-radius:0;padding:clamp(28px,3.2vw,40px) clamp(20px,2.4vw,32px) clamp(24px,2.8vw,34px);}
html body .strength .scard:not(:first-child){border-left:1px solid var(--line-on-dark);}
html body .strength .scard:hover{transform:none;box-shadow:none;}
html body .strength .scard::after{display:none;}
html body .strength .scard h3{color:#fff;}
html body .strength .scard p{color:rgba(255,255,255,.7);}
/* 番号はサイト共通の傾いた面で小さく置く（中身は逆向きに戻す） */
html body .strength .scard .n{width:40px;height:29px;margin:0 0 15px;border-radius:0;background:var(--royal);box-shadow:none;font-size:14px;transform:skewX(var(--slant));}
html body .strength .scard .n>span{display:inline-block;transform:skewX(calc(var(--slant) * -1));}
/* タグの丸い下敷きをやめ、素の文字を「／」で区切る */
html body .strength .scard .chips{gap:0 9px;margin-top:14px;}
html body .strength .scard .chips span{padding:0;border:0;border-radius:0;background:none;color:rgba(255,255,255,.6);font-size:12px;font-weight:600;letter-spacing:.06em;}
html body .strength .scard .chips span+span::before{content:"／";margin-right:9px;color:rgba(255,255,255,.28);}
@media(min-width:681px){
  html body .strength .scard h3{font-size:clamp(18px,2.1vw,22px);line-height:1.5;margin-bottom:8px;}
  html body .strength .scard p{font-size:14px;}
}
@media(max-width:720px){
  html body .strength .grid3{gap:0;}
  html body .strength .scard{padding:26px 0 24px;}
  html body .strength .scard:not(:first-child){border-left:0;border-top:1px solid var(--line-on-dark);}
}

/* ---------- 8) FAQ：カードをやめ、罫線だけの一覧にして軽くする ---------- */
html body .faq .qitem{margin-bottom:0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;}
html body .faq .qitem:first-child{border-top:1px solid var(--line);}
html body .faq .q{padding:22px 6px;}
html body .faq .q .ic{background:transparent;border:1.5px solid rgba(24,72,216,.35);}
html body .faq .ans p{padding:0 6px 22px;}
@media(min-width:681px){
  html body .faq .q{font-size:16px;}
}

/* ---------- 9) 見出しと締めのCTAの大きさ ---------- */
@media(min-width:681px){
  html body h2.dh{font-size:clamp(30px,4.6vw,56px);letter-spacing:-.032em;line-height:1.28;}
  html body .final h2{font-size:clamp(32px,5vw,62px);}
}
html body .final{padding:clamp(72px,9vw,116px) 0;}
/* 指定が無く効いていなかった印。濃紺の面なので royal の下敷きで抜く */
.mark-cyan{background:linear-gradient(transparent 62%,rgba(24,72,216,.7) 62%);}

/* ---------- 10) 4つのステップ：白カードをやめ、番号を主役の一覧にする ----------
   電話の隣に同じ大きさの箱が4つ並び、どこを読んでいるか分からなかった。
   罫線で区切った行にして、今見ている行だけ番号を royal に変える。 */
html body .story .story-steps{gap:0;border-top:1px solid var(--line);}
html body .story .sstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,28px);align-items:start;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:clamp(22px,2.8vw,32px) 4px;transition:background .4s var(--ease);}
html body .story .sstep.active{background:linear-gradient(90deg,rgba(24,72,216,.05),rgba(24,72,216,0) 70%);box-shadow:none;transform:none;}
html body .story .sstep .tag{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
html body .story .sstep .tag i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--text-mute);}
html body .story .sstep .tag b{margin-top:5px;font-size:clamp(38px,4.6vw,58px);font-weight:900;line-height:.85;letter-spacing:-.05em;color:rgba(8,40,72,.18);font-variant-numeric:tabular-nums;transition:color .4s var(--ease);}
html body .story .sstep.active .tag b{color:var(--royal);}
html body .story .sstep .slabel{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:var(--royal);}
html body .story .sstep h3{margin:8px 0 6px;}
@media(min-width:681px){
  html body .story .sstep h3{font-size:clamp(18px,2.1vw,23px);line-height:1.5;}
  html body .story .sstep p{font-size:14.5px;}
}

/* =========================================================================
   スクロールを無駄にしないための詰め 2026-08-04
   1画面ごとに必ず中身が来る状態にする。
   ・セクションの上下、見出しと中身の間、余っていた分をまとめて削る
   ・写真だけの帯は高さを抑える（前の指示で入れたヒーロー下の帯は、
     対象の帯の背景に回して1枚に統合した）
   スマホの詰めは共通CSSの指定を残す。
   ====================================================================== */
html body .sec{padding:clamp(40px,4.6vw,58px) 0 clamp(50px,6vw,76px);}
html body .sec.tight{padding:clamp(34px,3.8vw,48px) 0 clamp(40px,4.8vw,62px);}
html body .sec.wide{padding:clamp(56px,6.6vw,86px) 0 clamp(62px,7.4vw,96px);}
html body .hero{padding-top:clamp(104px,10vw,134px);}
html body .hero .trustband{margin-top:20px;}
html body .lead{margin-top:14px;}
html body .story-head{margin-bottom:clamp(26px,3vw,36px);}
html body #issue .tl{margin-top:clamp(24px,2.8vw,34px);}
html body .strength .grid3{margin-top:clamp(28px,3.2vw,40px);}
html body .launch-flow{margin-top:clamp(26px,3vw,36px);}
html body .faq{margin-top:clamp(22px,2.6vw,30px);}
html body .final p{margin-top:16px;}
html body .lpform{margin-top:32px;}
@media(max-width:760px){
  html body .sec{padding:34px 0 42px;}
  html body .sec.tight{padding:30px 0 36px;}
  html body .sec.wide{padding:38px 0 46px;}
}