:root{
    --paper:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F6F8;--ink:#302E33;--muted:#6D6C75;
    --coral:#E86F72;--coral-text:#C24A4E;--cta:#C95054;--cta-ink:#FFFFFF;
    --mint:#5FB89A;--mint-text:#2E8368;--blush:#F7DFD8;--mint-wash:#E7F2EC;--line:#E7E7EC;
    --shadow-soft:0 18px 44px -22px rgba(190,110,105,.42);--shadow-card:0 10px 30px -16px rgba(150,90,85,.30);
    --r-lg:28px;--r-md:20px;--r-sm:13px;--r-pill:999px;
    --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c",system-ui,sans-serif;
    --f-body:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","BIZ UDPGothic","Meiryo",system-ui,sans-serif;
    --f-latin:"Zen Maru Gothic","Trebuchet MS",system-ui,sans-serif;--wrap:1120px;
  }
  @media (prefers-color-scheme:dark){:root{
    --paper:#16161A;--surface:#1F1F24;--surface-2:#26262C;--ink:#F1F1F5;--muted:#A7A6AF;
    --coral:#F0898B;--coral-text:#F3A2A2;--cta:#E86F72;--cta-ink:#2A1512;
    --mint:#74C6A8;--mint-text:#8BD3B6;--blush:#37262C;--mint-wash:#20302A;--line:#33333B;
    --shadow-soft:0 20px 50px -22px rgba(0,0,0,.6);--shadow-card:0 12px 32px -18px rgba(0,0,0,.55);}}
  :root[data-theme="light"]{--paper:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F6F8;--ink:#302E33;--muted:#6D6C75;
    --coral:#E86F72;--coral-text:#C24A4E;--cta:#C95054;--cta-ink:#FFFFFF;--mint:#5FB89A;--mint-text:#2E8368;
    --blush:#F7DFD8;--mint-wash:#E7F2EC;--line:#E7E7EC;--shadow-soft:0 18px 44px -22px rgba(190,110,105,.42);--shadow-card:0 10px 30px -16px rgba(150,90,85,.30);}
  :root[data-theme="dark"]{--paper:#16161A;--surface:#1F1F24;--surface-2:#26262C;--ink:#F1F1F5;--muted:#A7A6AF;
    --coral:#F0898B;--coral-text:#F3A2A2;--cta:#E86F72;--cta-ink:#2A1512;--mint:#74C6A8;--mint-text:#8BD3B6;
    --blush:#37262C;--mint-wash:#20302A;--line:#33333B;--shadow-soft:0 20px 50px -22px rgba(0,0,0,.6);--shadow-card:0 12px 32px -18px rgba(0,0,0,.55);}

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);line-height:1.9;-webkit-font-smoothing:antialiased;letter-spacing:.01em;overflow-x:hidden}
  img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
  .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
  .section{padding:clamp(52px,7vw,96px) 0}
  h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.36;margin:0;line-break:strict;text-wrap:pretty}
  .ln{display:block}p{margin:0}
  .eyebrow{font-family:var(--f-latin);font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.72rem;color:var(--coral-text);display:inline-flex;gap:.5em;align-items:center}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--coral);border-radius:2px}
  .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-display);font-weight:700;border-radius:var(--r-pill);padding:.95em 1.7em;font-size:1rem;cursor:pointer;border:2px solid transparent;transition:transform .18s;line-height:1}
  .btn--primary{background:var(--cta);color:var(--cta-ink);box-shadow:var(--shadow-soft)}
  .btn--primary:hover{transform:translateY(-2px)}
  .btn--ghost{background:transparent;color:var(--coral-text);border-color:var(--coral)}
  .btn--ghost:hover{background:var(--blush)}
  .btn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

  .site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .header__inner{display:flex;align-items:center;gap:20px;padding:12px 0}
  .brand img{height:56px;width:auto}
  .nav{margin-left:auto;display:flex;align-items:center;gap:24px}
  .nav a.navlink{font-weight:700;font-family:var(--f-display);font-size:.95rem;opacity:.85}
  .nav a.navlink:hover,.nav a.navlink.is-active{opacity:1;color:var(--coral-text)}
  .icon-btn{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
  @media (max-width:860px){.nav .navlink{display:none}}

  /* breadcrumb */
  .crumb{padding:16px 0 0;font-size:.8rem;color:var(--muted);font-family:var(--f-latin)}
  .crumb a:hover{color:var(--coral-text)}.crumb span{opacity:.6;margin:0 .4em}

  /* hero */
  .lp-hero{padding:clamp(24px,3vw,44px) 0 clamp(48px,6vw,84px)}
  .lp-hero__grid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(28px,4vw,56px);align-items:center}
  .lp-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
  .lp-hero h1 .hl{color:var(--coral-text)}
  .lp-hero__lead{margin-top:20px;color:var(--muted);font-size:1.04rem;max-width:32em}
  .lp-hero__cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap}
  .chips{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
  .chip{font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--coral-text);background:var(--blush);border-radius:var(--r-pill);padding:7px 15px}
  .chip.m{color:var(--mint-text);background:var(--mint-wash)}
  .lp-hero__art{position:relative;display:grid;place-items:center;min-height:300px}
  .lp-hero__photo{position:relative;z-index:2;width:min(90%,400px);aspect-ratio:9/7;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-soft);border:6px solid var(--surface)}
  .lp-hero__photo img{width:100%;height:100%;object-fit:cover}
  .lp-hero__mascot{position:absolute;z-index:3;width:120px;right:-2%;bottom:-6%}
  .lp-hero__blob{position:absolute;inset:auto;width:300px;height:300px;border-radius:46% 54% 57% 43%/48% 43% 57% 52%;background:radial-gradient(circle at 40% 35%,var(--blush),transparent 72%);z-index:1}

  .head{max-width:46em}
  .head .eyebrow{margin-bottom:12px}
  .head h2{font-size:clamp(1.55rem,3.2vw,2.25rem)}
  .head p{margin-top:14px;color:var(--muted)}
  .center{text-align:center;margin-inline:auto}.center .eyebrow{justify-content:center}
  .lead-note{color:var(--muted);font-size:1.02rem}

  /* target cards */
  .alt{background:var(--surface-2)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .tcard{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-card)}
  .tcard .ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--mint-wash);color:var(--mint-text);display:grid;place-items:center}
  .tcard p{font-weight:600}

  /* compare 3 col */
  .compare{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:44px}
  .ccard{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;background:var(--surface);text-align:center}
  .ccard.mid{border:2px solid var(--coral);box-shadow:var(--shadow-soft);position:relative}
  .ccard.mid .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--cta);color:#fff;font-family:var(--f-display);font-weight:700;font-size:.74rem;padding:4px 14px;border-radius:var(--r-pill)}
  .ccard h3{font-size:1.12rem;margin-bottom:10px}
  .ccard.mid h3{color:var(--coral-text)}
  .ccard p{color:var(--muted);font-size:.92rem}
  .cico{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;margin:0 auto 16px;background:var(--blush);color:var(--coral-text)}
  .cico.mid{background:var(--cta);color:#fff}
  .cico svg{width:32px;height:32px}
  .tcard .ic svg{width:20px;height:20px}.check .ok svg{width:14px;height:14px}.hlist .dot svg{width:13px;height:13px}
  .posbar{display:flex;align-items:center;gap:18px;max-width:660px;margin:0 auto 6px;padding-top:6px}
  .posbar__end{flex:none;text-align:center;font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink)}
  .posbar__end span{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
  .posbar__track{flex:1;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--mint-wash),var(--blush));position:relative}
  .posbar__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:var(--cta);border:4px solid var(--surface);box-shadow:var(--shadow-card)}
  .posbar__pin i{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:var(--f-display);font-weight:700;font-size:.76rem;color:#fff;background:var(--cta);padding:3px 12px;border-radius:999px}
  @media (max-width:560px){.posbar__end span{display:none}}

  /* how (2 col) */
  .how{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
  .hcol{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--surface);box-shadow:var(--shadow-card)}
  .hcol h3{display:flex;align-items:center;gap:10px;font-size:1.16rem;margin-bottom:16px}
  .hcol .badge{font-family:var(--f-latin);font-weight:700;font-size:.7rem;letter-spacing:.1em;padding:4px 10px;border-radius:var(--r-pill)}
  .hcol.ai .badge{background:var(--mint-wash);color:var(--mint-text)}
  .hcol.human .badge{background:var(--blush);color:var(--coral-text)}
  .hlist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
  .hlist li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
  .hlist .dot{flex:none;width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;margin-top:3px;font-size:.7rem}
  .hcol.ai .dot{background:var(--mint-wash);color:var(--mint-text)}.hcol.human .dot{background:var(--blush);color:var(--coral-text)}
  .how-note{margin-top:22px;text-align:center;color:var(--muted);font-weight:600}

  /* process timeline */
  .flow{margin-top:44px;display:grid;gap:14px}
  .fstep{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow-card)}
  .fstep__n{width:48px;height:48px;border-radius:var(--r-pill);background:var(--blush);color:var(--coral-text);font-family:var(--f-display);font-weight:800;display:grid;place-items:center;font-size:1.15rem}
  .fstep h3{font-size:1.1rem}.fstep p{margin-top:6px;color:var(--muted);font-size:.95rem}
  .fstep .tag{font-size:.76rem;color:var(--mint-text);font-weight:700}

  /* included checklist */
  .checks{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
  .check{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--line)}
  .check .ok{flex:none;width:26px;height:26px;border-radius:var(--r-pill);background:var(--mint);color:#fff;display:grid;place-items:center;font-size:.8rem;margin-top:2px}
  .check b{font-weight:700}.check span{color:var(--muted);font-size:.9rem;display:block}

  /* pricing */
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
  .plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--surface);box-shadow:var(--shadow-card)}
  .plan.feat{border:2px solid var(--coral);box-shadow:var(--shadow-soft)}
  .plan h3{font-size:1.2rem}
  .plan .price{font-family:var(--f-display);font-weight:800;font-size:2rem;margin:12px 0 2px}
  .plan .price small{font-size:.9rem;color:var(--muted);font-weight:700}
  .plan .desc{color:var(--muted);font-size:.92rem;margin-bottom:16px}
  .plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
  .plan li{display:flex;gap:9px;font-size:.94rem}.plan li::before{content:"✓";color:var(--mint-text);font-weight:800}
  .price-note{margin-top:20px;text-align:center;color:var(--muted);font-size:.9rem}

  /* promises */
  .promises{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .promise{padding:6px}
  .promise .n{font-family:var(--f-latin);font-weight:700;color:var(--coral);letter-spacing:.1em}
  .promise h3{margin-top:8px;font-size:1.14rem}.promise p{margin-top:10px;color:var(--muted);font-size:.94rem}
  .promise .rule{width:32px;height:3px;border-radius:3px;background:var(--mint);margin-top:14px}

  /* faq */
  .faq{max-width:52em;margin-top:40px}
  .faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:12px;overflow:hidden}
  .faq summary{cursor:pointer;padding:18px 22px;font-family:var(--f-display);font-weight:700;list-style:none;display:flex;gap:12px;align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"Q";flex:none;width:28px;height:28px;border-radius:var(--r-pill);background:var(--blush);color:var(--coral-text);display:grid;place-items:center;font-family:var(--f-latin);font-weight:800}
  .faq summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:1.3rem}
  .faq details[open] summary::after{content:"−"}
  .faq .a{padding:0 22px 20px 62px;color:var(--muted)}

  /* related */
  .rel{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
  .rcard{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow-card);transition:transform .18s}
  .rcard:hover{transform:translateY(-3px)}
  .rcard img{width:88px;height:88px;border-radius:16px;object-fit:cover;flex:none}
  .rcard h3{font-size:1.1rem}.rcard p{color:var(--muted);font-size:.9rem;margin-top:6px}
  .rcard .go{color:var(--coral-text);font-weight:700;font-size:.86rem;margin-top:8px;display:inline-block}

  /* cta band */
  .cta-band{position:relative;overflow:hidden;color:#fff;padding:clamp(56px,8vw,104px) 0;text-align:center}
  .cta-band__bg{position:absolute;inset:0;z-index:0}.cta-band__bg img{width:100%;height:100%;object-fit:cover}
  .cta-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(42,22,20,.82),rgba(42,22,20,.5) 55%,rgba(201,80,84,.55))}
  .cta-band__in{position:relative;z-index:2;max-width:40em;margin-inline:auto}
  .cta-band h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem)}
  .cta-band p{color:rgba(255,255,255,.94);margin-top:14px;font-weight:600}
  .cta-band .btn{margin-top:26px}.cta-band .btn--primary{background:#fff;color:#C24A4E}

  /* footer */
  .site-footer{background:var(--surface-2);border-top:1px solid var(--line);padding:56px 0 28px}
  .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
  .footer__brand img{height:50px;margin-bottom:12px}
  .footer__brand p{color:var(--muted);font-size:.9rem}
  .footer__brand .addr{margin-top:12px;font-size:.82rem;line-height:1.7;color:var(--muted)}
  .footer__col h4{font-family:var(--f-display);font-size:.92rem;margin:0 0 14px}
  .footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .footer__col a{color:var(--muted);font-size:.9rem}.footer__col a:hover{color:var(--coral-text)}
  .footer__col .ext{font-size:.72rem;color:var(--mint-text);margin-left:6px}
  .footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
  .footer__bottom .legal{display:flex;gap:18px;flex-wrap:wrap}

  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
  @media (max-width:860px){
    .lp-hero__grid,.grid2,.compare,.how,.checks,.plans,.promises,.rel{grid-template-columns:1fr}
    .lp-hero__art{order:-1;min-height:240px}
    .footer__top{grid-template-columns:1fr 1fr}
    .fstep{grid-template-columns:auto 1fr}
  }
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn,.rcard{transition:none}}

  /* readability: 本文=システムゴシック / 少し大きく */
  body{font-size:1.07rem}
  .lp-hero__lead{font-size:1.12rem}
  .head p,.lead-note,.how-note{font-size:1.06rem}
  .tcard p,.ccard p,.fstep p,.plan .desc,.plan li,.faq summary,.faq .a,.rcard p,.hlist li,.promise p{font-size:1.01rem}
  .price-note,.crumb,.check span{font-size:.9rem}
  .cmp-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
  .cmp{width:100%;min-width:720px;border-collapse:collapse;background:var(--surface)}
  .cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
  .cmp thead th{font-family:var(--f-display);font-weight:800;font-size:1rem;background:var(--surface-2);border-bottom:2px solid var(--line)}
  .cmp thead th.hl{background:var(--cta);color:#fff}
  .cmp tbody th{font-family:var(--f-display);font-weight:700;color:var(--ink);width:20%;background:var(--surface-2);white-space:nowrap}
  .cmp td{color:var(--muted)}
  .cmp td.hl{background:color-mix(in srgb,var(--blush) 55%,var(--surface));color:var(--ink);font-weight:600}
  .cell{display:flex;align-items:flex-start;gap:8px;line-height:1.6}
  .mk{width:17px;height:17px;flex:none;margin-top:3px}
  .mk.good{color:var(--mint-text)}.mk.ok{color:var(--muted)}.mk.weak{color:#C08A2E}.mk.no{color:var(--coral-text);opacity:.9}
  .cmp-note{margin-top:16px;color:var(--muted);font-size:.86rem}

/* ===== page components (shared) ===== */
.soft-price{max-width:640px;margin:40px auto 0;text-align:center;border:2px solid var(--coral);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);background:var(--surface);box-shadow:var(--shadow-soft)}
.soft-price h3{font-size:1.3rem}.soft-price p{color:var(--muted);margin:12px 0 22px}
.kv{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.kv span{background:var(--blush);color:var(--coral-text);font-family:var(--f-display);font-weight:700;font-size:.86rem;border-radius:var(--r-pill);padding:7px 16px}
.story{max-width:40em;margin:40px auto 0}
.story p{margin-bottom:1.2em;font-size:1.06rem}
.story p.big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ink);line-height:1.7}
.story .sign{margin-top:24px;color:var(--muted);font-weight:700}
.profile,.legal{max-width:840px;margin:32px auto 0;border-top:1px solid var(--line)}
.profile dl,.legal dl{margin:0}
.prow,.lrow{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:18px 8px;border-bottom:1px solid var(--line)}
.prow dt,.lrow dt{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.prow dd,.lrow dd{margin:0;color:var(--muted)}.prow dd a,.lrow dd a{color:var(--coral-text);font-weight:700}
@media(max-width:600px){.prow,.lrow{grid-template-columns:1fr;gap:4px}}
.c-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,52px);align-items:start;margin-top:12px}
.cinfo h2{font-size:1.4rem;margin-bottom:18px}
.cinfo .point{display:flex;gap:13px;margin-bottom:18px}
.cinfo .point .ic{flex:none;width:34px;height:34px;border-radius:11px;background:var(--mint-wash);color:var(--mint-text);display:grid;place-items:center}
.cinfo .point b{display:block}.cinfo .point span{color:var(--muted);font-size:.92rem}
.cinfo .mail{margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.cinfo .mail a{display:block;font-family:var(--f-display);font-weight:700;color:var(--coral-text);font-size:1.05rem;margin-top:4px}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-soft)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-display);font-weight:700;font-size:.94rem;margin-bottom:8px}
.field .req{color:#fff;background:var(--coral);font-size:.64rem;padding:2px 7px;border-radius:5px;margin-left:8px;vertical-align:2px}
.field .opt{color:var(--muted);font-size:.7rem;margin-left:8px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:1rem;background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px var(--blush)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--muted);margin:4px 0 20px}
.agree input{margin-top:4px;accent-color:var(--coral)}.agree a{color:var(--coral-text);font-weight:700}
.cbox .btn{width:100%;justify-content:center;font-size:1.05rem;padding:1.05em}
.form-note{font-size:.8rem;color:var(--muted);margin-top:16px;text-align:center}
.sent{display:none;text-align:center;padding:36px 10px}
.sent .em{width:66px;height:66px;border-radius:50%;background:var(--mint-wash);color:var(--mint-text);display:grid;place-items:center;margin:0 auto 18px}
.sent h3{font-size:1.3rem}.sent p{color:var(--muted);margin-top:10px}
@media(max-width:820px){.c-grid{grid-template-columns:1fr}}
/* works browser frames */
.works-grid{display:grid;gap:clamp(40px,6vw,72px);margin-top:48px}
.wcard{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:center}
.wcard:nth-child(even){grid-template-columns:.9fr 1.1fr}
.wcard:nth-child(even) .wcard__body{order:-1}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--surface)}
.browser__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.browser__bar .url{margin-left:12px;font-family:var(--f-latin);font-size:.74rem;color:var(--muted);background:var(--paper);padding:4px 12px;border-radius:999px;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser__shot{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.browser__shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.wcard__tag{font-family:var(--f-display);font-weight:700;font-size:.8rem;color:var(--mint-text);background:var(--mint-wash);display:inline-block;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.wcard__body h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.wcard__body .who{color:var(--coral-text);font-weight:700;margin-top:6px}
.wcard__body p{color:var(--muted);margin-top:14px}
.wcard__body .visit{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--f-display);font-weight:700;color:var(--coral-text);font-size:.92rem}
@media(max-width:820px){.wcard,.wcard:nth-child(even){grid-template-columns:1fr}.wcard:nth-child(even) .wcard__body{order:0}}
/* readability */
body{font-size:1.07rem}
.lp-hero__lead{font-size:1.12rem}
.head p,.lead-note,.how-note{font-size:1.06rem}
.tcard p,.ccard p,.fstep p,.plan .desc,.plan li,.faq summary,.faq .a,.rcard p,.hlist li,.promise p{font-size:1.01rem}
.price-note,.crumb,.check span{font-size:.9rem}

/* ===== skip link ===== */
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--cta);color:#fff;padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
/* ===== mobile nav ===== */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:63px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 20px 20px;box-shadow:var(--shadow-card);transform:translateY(-130%);transition:transform .25s ease;max-height:calc(100vh - 63px);overflow:auto}
  .nav.open{transform:none}
  .nav .navlink{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.05rem;opacity:1}
  .nav .icon-btn{margin:14px auto 0 0}
  .nav__cta{margin-top:16px;text-align:center;justify-content:center}
}

/* ===== フォント方針：タイトル＝丸ゴシック／それ以外＝システムフォント（太め・くっきり） ===== */
:root{
  --f-title:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c",system-ui,sans-serif;
  --f-display:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Meiryo","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
  --f-latin:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Meiryo","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
  --f-body:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Meiryo","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
}
/* タイトル類だけ丸ゴシック */
h1,h2,h3,.work__name{font-family:var(--f-title)}