/* Shared styles for the top page and pages built on its design (header, buttons, CTA, footer, mobile bar). */

body{margin:0;background:#fff}
.jg{--g:#00BB59;--gd:#067A3D;--gdd:#035C3A;--b:#0067FF;--ink:#0F172A;--ink2:#334155;--mut:#64748B;--line:#E6ECE9;--mist:#F5F8F7;
  font-family:'Noto Sans JP','Noto Sans CJK JP',sans-serif;color:var(--ink);font-size:16px;line-height:1.85;font-feature-settings:'palt' 1;-webkit-font-smoothing:antialiased;background:#fff;overflow:visible;overflow-x:clip}
.jg *{box-sizing:border-box}
.jg a{color:inherit}
.jg a:focus-visible{outline:3px solid var(--b);outline-offset:3px;border-radius:6px}
.jg .num{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums}
.jg .muted{color:var(--mut)}
.jg [id]{scroll-margin-top:88px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;border-radius:10px;white-space:nowrap;transition:background-color .15s}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-md{min-height:50px;padding:0 24px;font-size:15px}
.btn-lg{min-height:58px;padding:0 30px;font-size:16px}
.jg .btn-primary{background:var(--gd);color:#fff}
.jg .btn-primary:hover{background:var(--gdd);color:#fff}
.jg .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #CBD5D0}
.jg .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.jg .btn-white{background:#fff;color:var(--gdd)}
.jg .btn-outlineW{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.jg .btn-onDark{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* header */
.hd{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 var(--line)}
.hd-in{display:flex;align-items:center;gap:40px;height:76px}
.logo{display:block;line-height:0}
.logo img{display:block;width:112px;height:auto}
.nav{display:flex;gap:32px;flex:1;font-size:14px;font-weight:700}
.nav a{text-decoration:none;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.nav a.nav-on{color:var(--gd)}
.hd-cta{display:flex;gap:10px}

/* sections */
.sec{padding:128px 0}
.sec-mist{background:var(--mist)}
.eyebrow{margin:0 0 14px;font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--gd);letter-spacing:.02em}
.sec h2{text-wrap:balance;margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.4;font-weight:700;letter-spacing:-.005em}
.link{font-weight:700;color:var(--gd)!important;text-decoration:none;font-size:15px}
.link:hover{text-decoration:underline}
.chip{display:inline-block;font-style:normal;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;line-height:1.7;vertical-align:1px}
.chip.g{background:#E3F6EB;color:#146C43}.chip.b{background:#E7EEFF;color:#0047B3}.chip.n{background:#EEF1F4;color:#334155}.chip.y{background:#FCEFC7;color:#7A4B00}

/* comparison table */
.cmp-wrap{overflow-x:auto;padding-top:14px}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp th,.cmp td{padding:22px 24px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp tbody th{text-align:left}
.cmp thead th{font-size:14px;color:var(--mut);font-weight:700;border-bottom:1px solid var(--ink)}
.cmp tbody th{font-weight:700;width:20%}
.cmp td{color:var(--ink2);width:24%}
.cmp .hi{background:#F0F9F4;width:32%;color:var(--ink)}
.cmp thead .hi{background:var(--gd);color:#fff;border-radius:14px 14px 0 0;border-bottom-color:var(--gd);position:relative}
.hi-top{font-family:Inter,'Noto Sans JP',sans-serif;font-size:16px;font-weight:700}
.cmp td.hi b{font-size:17px;color:var(--gdd)}
.cmp td.hi b.big{font-size:34px;letter-spacing:-.02em;line-height:1;margin-right:2px}
.cmp td.hi small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.cmp tr.last td.hi{border-radius:0 0 14px 14px}

/* faq */
.faq{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px}
.faq h2{margin-bottom:16px}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:17px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--gd);border-bottom:2px solid var(--gd);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(-135deg)}
.faq-list summary:focus-visible{outline:3px solid var(--b);outline-offset:2px}
.faq-list details p{margin:0 0 24px;color:var(--ink2);font-size:15px;max-width:44em}

/* consult CTA panel */
.cta-wrap{padding:0 0 128px}
.cta{position:relative;overflow:hidden;border-radius:28px;background:var(--gd);color:#fff;padding:72px 64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-rings{position:absolute;width:560px;height:560px;right:-120px;top:-180px}
.cta-copy{position:relative}
.cta h2{margin:0 0 12px;font-size:clamp(26px,2.8vw,36px);line-height:1.45;font-weight:700}
.cta p{margin:0;color:#D7F2E2}
.cta-btns{position:relative;display:flex;gap:12px;flex-wrap:wrap}

/* in-section consult strip */
.icta{margin-top:56px;padding:24px 28px;border-radius:16px;background:var(--mist);display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.icta p{margin:0;font-weight:700;font-size:16px}
.icta-btns{display:flex;gap:10px;flex-wrap:wrap}
.sec-mist .icta{background:#fff}
.icta-dark{position:relative;z-index:1;background:#0B3A27;box-shadow:inset 0 0 0 1px #1C5039;color:#fff}
.jg .icta-dark .btn-white{color:var(--gdd)}

/* footer */
.ft{background:#0F172A;padding:96px 0 48px;color:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.1);font-family:"Inter","Noto Sans JP",sans-serif;font-size:16px;line-height:1.5;font-feature-settings:normal}
.ft a{text-decoration:none;transition:color .15s}
.ft p,.ft ul{margin:0}
.ft-wrap{width:100%;margin:0 auto;padding:0 24px}
.ft-top{display:flex;flex-direction:column;justify-content:space-between;gap:80px;margin-bottom:80px}
.ft-brand{max-width:320px}
.ft-logo{display:flex;align-items:center}
.ft-brand img{display:block;height:48px;width:auto}
.ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.ft .ft-col>*+*{margin-top:16px}
.ft-k{font-weight:900;color:#fff;font-size:12px;line-height:16px;letter-spacing:.1em}
.ft-col ul{list-style:none;padding:0;font-size:14px;line-height:20px;font-weight:700;color:#94A3B8}
.ft-col li+li{margin-top:12px}
.ft-col a:hover{color:#00BB59}
.ft-bottom{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:16px;padding-top:32px;border-top:1px solid rgba(255,255,255,.05);font-size:10px;font-weight:700;color:#64748B}
.ft-links{display:flex;gap:32px}
.ft-links a:hover{color:#fff}
@media (min-width:640px){.ft-wrap{max-width:640px}}
@media (min-width:768px){.ft-wrap{max-width:768px}.ft-brand img{height:64px}.ft-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ft-bottom{flex-direction:row}}
@media (min-width:1024px){.ft-wrap{max-width:1024px}.ft-top{flex-direction:row}}
@media (min-width:1280px){.ft-wrap{max-width:1280px}}
@media (min-width:1536px){.ft-wrap{max-width:1536px}}

/* mobile bar */
.mbar{display:none}

@media (max-width:860px){
  .jg [id]{scroll-margin-top:76px}
  .wrap{padding:0 20px}
  .sec{padding:88px 0}
  .faq{grid-template-columns:1fr;gap:20px}
  .cmp{min-width:0;font-size:14px}
  .cmp th:nth-child(3),.cmp td:nth-child(3){display:none}
  .cmp th,.cmp td{padding:16px 12px}
  .cmp tbody th{width:30%}
  .cmp td.hi b.big{font-size:28px}
  .nav{display:none}
  .hd-in{gap:16px;height:64px}
  .hd-cta{display:none}
  .cta{padding:48px 28px}
  .icta{padding:20px;margin-top:40px}
  .icta .btn{flex:1 1 auto}
  .icta-btns{width:100%}
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -1px 0 var(--line),0 -8px 24px -12px rgba(15,23,42,.2)}
  .mbar .btn{flex:1}
  .ft{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.faq-list summary::after{transition:none}}