:root{--blue:#0200F5;--blue-d:#0004EB;--lav:#B0AFFF;--tint:#F3F3FF;--ink:#0d0d0d;--sub:#5a5a6e;--line:#e4e4f0;--en:'Outfit','Noto Sans JP',sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:#fff;line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.en{font-family:var(--en);letter-spacing:.04em}
.eyebrow{font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
h1,h2,h3{line-height:1.35;font-weight:900}
h2{font-size:clamp(26px,4.4vw,44px);letter-spacing:.01em}
section{padding:clamp(44px,6.5vw,80px) 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 32px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none;font-size:16px;border:2px solid var(--blue);transition:transform .3s,background .3s,box-shadow .3s;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px);background:var(--blue-d);box-shadow:0 10px 24px -10px rgba(2,0,245,.6)}
.btn .bl{min-width:0}.btn .ar{flex:none;transition:transform .3s}.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--tint);box-shadow:none}
.btn.white{background:#fff;color:var(--blue);border-color:#fff}
.btn.white:hover{background:var(--tint)}
.link{font-weight:700;color:var(--blue);text-decoration:none;border-bottom:2px solid var(--lav);padding-bottom:2px}
/* header */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:900;text-decoration:none;font-size:17px;display:flex;align-items:center;gap:10px}
.logo i{width:22px;height:22px;border-radius:50%;background:var(--blue);display:block;box-shadow:8px 0 0 -2px var(--lav)}
header .btn{min-height:44px;padding:0 20px;font-size:14px}
/* hero */
.hero{padding:clamp(32px,5vw,56px) 0 clamp(40px,6vw,64px);overflow:hidden}
.hero .wrap{display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(30px,7.4vw,56px);letter-spacing:.01em;line-height:1.25}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{margin:16px 0 24px;font-size:clamp(16px,2vw,19px);color:var(--sub);max-width:30em}
.tags{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-size:13px;color:var(--sub);font-weight:500}
.tags span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lav);margin-right:8px;vertical-align:middle}
.hero-art{max-width:520px;margin-inline:auto;width:100%}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.3fr .7fr}.hero h1{font-size:clamp(36px,3.3vw,42px)}}
/* problems */
.problems{background:var(--tint)}
.problems .head{max-width:760px}
.plist{list-style:none;padding:0;margin-top:28px;display:grid;gap:0 56px}
.plist li{padding:13px 0;border-top:1px solid var(--lav);font-weight:500;display:flex;gap:14px;align-items:flex-start}

@media(min-width:760px){.plist{grid-template-columns:1fr 1fr}}
/* services */
.services .head{max-width:760px;margin-bottom:24px}
.row{display:grid;gap:16px;align-items:center;padding:clamp(20px,3vw,30px) 0;border-top:1px solid var(--line)}
.row:first-of-type{margin-top:20px}
.row .num{font-family:var(--en);font-weight:200;font-size:clamp(44px,6vw,64px);line-height:1;color:var(--lav)}
.row h3{font-size:clamp(22px,3vw,30px);margin:4px 0 14px}
.row ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.row li{font-size:14px;padding:6px 14px;border-radius:999px;background:var(--tint);color:var(--blue-d);font-weight:500}
.row .art{background:var(--tint);border-radius:4px;padding:14px;max-width:260px;width:100%}
@media(min-width:820px){.row{grid-template-columns:1fr 1fr;gap:48px}.row:nth-of-type(even) .art{order:-1}.row .art{justify-self:center}}
.center{text-align:center;margin-top:12px}
/* reasons */
.reasons{background:var(--blue);color:#fff}
.reasons .eyebrow{color:var(--lav)}
.rgrid{margin-top:28px;display:grid;gap:0}
.rgrid div{padding:20px 0;border-top:1px solid rgba(255,255,255,.35);display:grid;grid-template-columns:auto 1fr;gap:4px 24px}
.rgrid b{font-family:var(--en);font-weight:200;font-size:44px;line-height:1;grid-row:span 2;color:var(--lav)}
.rgrid h3{font-size:20px}
.rgrid p{font-size:15px;opacity:.88}
@media(min-width:820px){.rgrid{grid-template-columns:1fr 1fr;gap:0 80px}}
/* flow */
.steps{list-style:none;padding:0;margin-top:28px;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:60px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.steps .n{font-family:var(--en);font-size:36px;font-weight:200;color:var(--blue);line-height:1}
.steps h3{font-size:18px;margin-bottom:4px}
.steps p{font-size:14px;color:var(--sub)}
@media(min-width:900px){.steps{grid-template-columns:repeat(5,1fr);gap:28px}.steps li{display:block;border-top:2px solid var(--blue);padding-top:20px}.steps .n{display:block;margin-bottom:16px}}
/* pricing */
.pricing{background:var(--tint)}
.ptable{margin-top:28px;border-top:2px solid var(--ink)}
.prow{display:grid;gap:4px 24px;padding:18px 20px;border-bottom:1px solid var(--lav);align-items:center;position:relative}
.prow h3{font-size:19px}
.prow .price{font-family:var(--en);font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.2;color:var(--blue)}
.prow .price small{font-size:14px;font-weight:500;color:var(--sub);font-family:'Noto Sans JP'}
.prow .meta{font-size:13px;color:var(--sub)}
.prow p{font-size:14px}
.prow.main{background:var(--blue);color:#fff;border-bottom-color:var(--blue);margin-inline:-8px;padding-inline:28px}
.prow.main .price,.prow.main .meta{color:#fff}
.prow.main .meta{opacity:.85}
.badge{display:inline-block;font-size:12px;font-weight:700;background:#fff;color:var(--blue);padding:2px 12px;border-radius:999px;margin-bottom:8px}
@media(min-width:900px){.prow{grid-template-columns:1.2fr 1fr 1.6fr;padding-block:20px}}
.notes{margin-top:18px;font-size:13px;color:var(--sub);list-style:none;padding:0}
.notes li{padding-left:1.2em;text-indent:-1.2em}.notes li::before{content:"※ "}
details.opt{margin-top:24px;border-top:1px solid var(--lav);padding-top:16px}
details summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:6px 0}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--en);font-size:24px;line-height:1;color:var(--blue);transition:transform .3s}
details[open]>summary::after{transform:rotate(45deg)}
.optlist{list-style:none;padding:0;margin-top:12px;display:grid;gap:0 48px;font-size:14px}
.optlist li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--lav)}
@media(min-width:760px){.optlist{grid-template-columns:1fr 1fr}}
/* for whom */
.whom .wrap{display:grid;gap:40px}
.whom ul{list-style:none;padding:0}
.whom li{padding:12px 0 12px 36px;border-bottom:1px solid var(--line);position:relative;font-weight:500}
.whom li::before{content:"";position:absolute;left:4px;top:20px;width:14px;height:8px;border-left:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(-45deg)}
@media(min-width:900px){.whom .wrap{grid-template-columns:.8fr 1.2fr;gap:80px}}
/* faq */
.faq{background:var(--tint)}
.faq .list{margin-top:24px;max-width:820px}
.faq details{border-top:1px solid var(--lav);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--lav)}
.faq summary{font-size:17px}
.faq details p{margin-top:12px;color:var(--sub);font-size:15px}
/* contact */
.contact{background:var(--blue);color:#fff;text-align:left}
.contact .eyebrow{color:var(--lav)}
.contact .wrap{display:grid;gap:28px}
.contact .sub{margin-top:20px;display:inline-block;color:#fff;font-weight:500;border-bottom:2px solid var(--lav);text-decoration:none}
form{background:#fff;color:var(--ink);padding:clamp(24px,4vw,40px);border-radius:4px;display:grid;gap:18px}
label{font-weight:700;font-size:14px;display:grid;gap:6px}
label span em{font-style:normal;color:var(--blue);font-size:12px;margin-left:6px}
input,select,textarea{font:inherit;font-weight:400;padding:12px 14px;border:1.5px solid #c9c9e0;border-radius:4px;background:#fff;color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--lav);border-color:var(--blue)}
form .btn{width:100%}
.hint{font-size:12px;color:var(--sub)}
.hint a{color:var(--blue)}
.thanks{display:none;text-align:center;padding:24px 0}
.thanks h3{font-size:22px;color:var(--blue);margin-bottom:8px}
form.done .f{display:none}form.done .thanks{display:block}
@media(min-width:900px){.contact .wrap{grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}}
footer{padding:40px 0;font-size:13px;color:var(--sub)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;gap:20px}
/* sticky mobile cta */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);border-top:1px solid var(--line);display:none}
.mcta .btn{width:100%;min-height:52px}
@media(max-width:759px){.mcta.show{display:block}body{padding-bottom:84px}header .btn{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* legal */
.legal{padding:64px 0 96px}.legal h1{font-size:30px;margin-bottom:32px}.legal h2{font-size:18px;margin:32px 0 8px}.legal p,.legal li{font-size:15px;color:#333}.legal dl{display:grid;gap:0}
.legal dt{font-weight:700;padding-top:16px;border-top:1px solid var(--line)}.legal dd{padding-bottom:16px;margin:0}
.todo{background:#fff4c2;padding:0 4px}

/* icons */
.ic{width:1.35em;height:1.35em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.plist li .ic{color:var(--blue);width:24px;height:24px;margin-top:2px}
.tags span::before{display:none}.tags span{display:inline-flex;align-items:center;gap:6px}.tags .ic{color:var(--blue);width:16px;height:16px}
.rgrid h3{display:flex;align-items:center;gap:10px}.rgrid .ic{color:var(--lav)}
.steps h3{display:flex;align-items:center;gap:8px}.steps .ic{color:var(--blue);width:20px;height:20px}
.prow h3{display:flex;align-items:center;gap:10px}.prow .ic{color:var(--blue)}.prow.main .ic{color:#fff}
/* art2 */
.art2{max-width:260px;width:100%}.art2.w{max-width:240px}
.problems .head{display:grid;gap:16px;max-width:none;align-items:center}
.head2{display:grid;gap:16px;align-items:center}
.whom .art2{margin-top:16px}
.contact .art2{margin-top:20px}
@media(min-width:900px){.problems .head,.head2{grid-template-columns:1.3fr .7fr}.problems .head{max-width:none}.head2 .art2{justify-self:end}}
/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:14px 0}
.marq-in{display:flex;gap:56px;align-items:center;width:max-content;animation:marq 32s linear infinite}
.lg{display:inline-flex;align-items:center;gap:10px;color:#8e8ec9;white-space:nowrap;transition:color .3s}
.lg svg{width:26px;height:26px;fill:currentColor}
.lg b{font-family:var(--en);font-weight:600;font-size:19px;letter-spacing:.02em}
.lg:hover{color:var(--blue)}
@keyframes marq{to{transform:translateX(-50%)}}
/* svg motion */
.bar{transform-box:fill-box;transform-origin:left;animation:grow 3.2s ease-in-out infinite alternate}
.d1{animation-delay:.4s}.d2{animation-delay:.8s}
@keyframes grow{from{transform:scaleX(.4)}to{transform:scaleX(1)}}
.spark{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.35) rotate(12deg)}}
.lens{animation:scan 5s ease-in-out infinite alternate}
@keyframes scan{from{transform:translate(-110px,-40px)}to{transform:translate(0,0)}}
.chk{stroke-dasharray:60;animation:draw 4s ease-in-out infinite}
@keyframes draw{0%,15%{stroke-dashoffset:60}50%,100%{stroke-dashoffset:0}}
.ln{stroke-dasharray:1;animation:line 4s ease-in-out infinite}
.flat{stroke-dasharray:1;animation:line 4s ease-in-out infinite}
@keyframes line{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
.drop{animation:drop 2.8s ease-in infinite}.drop.d2{animation-delay:1.2s}
@keyframes drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(100px);opacity:0}}
.needle{transform-origin:94px 190px;animation:swing 3s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-70deg)}to{transform:rotate(20deg)}}
.gear{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qm{transform-box:fill-box;transform-origin:center;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}
.plane{animation:fly 4s ease-in-out infinite alternate}
@keyframes fly{to{transform:translate(10px,-8px)}}
.row .art{transition:transform .5s cubic-bezier(.19,1,.22,1)}.row:hover .art{transform:translateY(-6px)}
.prow{transition:background .4s}.prow:not(.main):hover{background:#fff}
/* reveal: 位置だけ動かす（本文は常に見える） */
.rv{transform:translateY(28px);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.rv.in{transform:none}
.prow.main.rv{margin-inline:-8px}
.problems h2{font-size:clamp(24px,3.2vw,36px)}

.osub{margin-left:auto;font-weight:500;font-size:13px;color:var(--sub)}
.prow.main .price small{color:#fff;opacity:.9}

.ferr{color:#c0102a;font-size:14px;font-weight:700;margin:0}.ferr:empty{display:none}
form{position:relative}

/* ===== SP最適化 ===== */
p,li,summary,h3{text-wrap:pretty}h1,h2{text-wrap:balance}
@media(max-width:600px){
  body{font-size:15px}
  .pcx{display:none}
  .btn{padding:0 22px;font-size:15px;text-align:center;line-height:1.4;min-height:54px}
  .hero{padding:24px 0 36px}.hero .wrap{gap:20px}
  .hero h1{font-size:30px}
  .hero p.lead{font-size:15px;margin:12px 0 20px}
  .hero-art{max-width:200px;margin:0 auto}
  .tags{font-size:13px;gap:8px 16px;margin-top:20px}
  .marq{padding:10px 0}.lg svg{width:22px;height:22px}.lg b{font-size:16px}.marq-in{gap:40px}
  .art2,.art2.w{max-width:150px;margin:0 auto}
  .problems .head{gap:12px}.problems h2,h2{font-size:23px}
  .plist{margin-top:16px}.plist li{padding:12px 0;font-size:15px}
  .services .head{margin-bottom:8px}
  .row{gap:12px;padding:20px 0}
  .row .art{max-width:none;width:100%;display:flex;justify-content:center;padding:12px;order:2}
  .row .art svg{width:auto;height:120px}
  .row:nth-of-type(even) .art{order:2}
  .row h3{font-size:20px;margin:2px 0 10px}.row li{font-size:13px}
  .center{margin-top:24px}
  .rgrid div{grid-template-columns:52px 1fr;gap:2px 14px;padding:16px 0}
  .rgrid b{font-size:36px;width:52px}.rgrid h3{font-size:18px}.rgrid p{font-size:14px}
  .head2{gap:12px}
  .steps li{grid-template-columns:48px 1fr;padding:14px 0}.steps p{font-size:14px}.steps .n{font-size:32px}
  .prow{padding:16px}.prow.main,.prow.main.rv{margin-inline:0;padding:20px 16px}
  .prow p{font-size:14px}.prow .meta{font-size:13px}
  .notes{font-size:13px;line-height:1.7}
  details.opt summary{min-height:44px;align-items:center}
  .whom .wrap{gap:12px}.whom li{font-size:15px}
  .faq summary{font-size:16px;gap:20px;min-height:44px;align-items:center}
  .faq details p{font-size:14px}
  .contact .wrap{gap:20px}
  label span em{font-size:13px;margin-left:8px}
  textarea{resize:none;min-height:100px}
  .hint{font-size:13px}
  footer{padding:20px 0 8px}
  footer .wrap{flex-direction:column;gap:6px}
  footer nav{gap:24px}footer nav a{padding:8px 0;display:inline-block}
  .mcta .btn{font-size:15px}
}

.spbr{display:none}
@media(max-width:600px){.spbr{display:inline}.hero h1{font-size:min(32px,calc((100vw - 40px)/14.4));white-space:nowrap;text-wrap:nowrap}}
@media(max-width:600px){.whom li,.plist li,.prow p,.rgrid p,.steps p{text-wrap:balance}}
/* CTA: ラベルは1つのflex itemにまとめ、SPでは1行固定 */
@media(max-width:600px){.btn{gap:8px;padding:0 20px}.btn .bl{white-space:nowrap}}
@media(max-width:359px){.btn{font-size:14px;padding:0 16px}}
/* SP: 1〜2文字だけ次行に落ちる行を防ぐ */
@media(max-width:600px){
  .problems h2,h2{font-size:min(23px,calc((100vw - 40px)/14.3))}
  .prow h3{word-break:keep-all;overflow-wrap:anywhere}
  .hero p.lead,.faq summary,.faq details p,.notes li{text-wrap:balance}
}
/* 和文は文節（<wbr>）単位で折り返す。収まらない長い語だけ強制改行 */
main:not(.legal),footer{word-break:keep-all;overflow-wrap:anywhere}
.hero h1{word-break:normal}
@media(max-width:600px){footer nav{flex-wrap:wrap;column-gap:24px;row-gap:0}footer nav a{white-space:nowrap}}
@media(min-width:900px){.contact h2{font-size:clamp(28px,3.2vw,40px)}}
/* タブレット幅：H1の2行目が1行に収まる大きさまで縮める */
@media(min-width:601px) and (max-width:899px){.hero h1{font-size:min(56px,calc((100vw - 40px)/14.4))}}
/* 900〜1099px：フォーム列が狭いので送信ボタンの文言を1行に収める */
@media(min-width:900px) and (max-width:1099px){form .btn{padding:0 18px;gap:8px;font-size:15px}}

/* results */
.results{background:#fff}
.results .rsub{margin-top:14px;color:var(--sub);font-size:15px}
.rlist{list-style:none;padding:0;margin-top:40px;display:grid;gap:0 56px}
.rlist li{padding:20px 0 18px;border-top:2px solid var(--blue)}
.rnum{font-family:var(--en);font-weight:200;font-size:clamp(44px,6vw,64px);line-height:1;color:var(--blue);letter-spacing:-.01em;white-space:nowrap}
.rnum small{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(14px,1.6vw,17px);color:var(--ink);margin-left:6px;letter-spacing:0}
.rlab{margin-top:10px;font-size:15px;line-height:1.7}
.rtags{list-style:none;padding:0;margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.rtags li{font-size:13px;padding:6px 14px;border-radius:999px;background:var(--tint);color:var(--blue-d);font-weight:500}
.rnote{margin-top:16px;font-size:13px;color:var(--sub)}
.rb{transform-box:fill-box;transform-origin:bottom;animation:rise 3s ease-in-out infinite alternate}
.rb.d1{animation-delay:.3s}.rb.d2{animation-delay:.6s}
@keyframes rise{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
@media(min-width:560px){.rlist{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.rlist{grid-template-columns:repeat(3,1fr);gap:0 48px}}
@media(max-width:600px){.rlist{margin-top:28px}.rlist li{padding:16px 0 14px}.rlab{font-size:14px}.results .head2{gap:20px}.results .art2{margin-bottom:4px}}