:root{--ink:#16182b;--muted:#5f6478;--purple:#5b35e8;--purple-dark:#4523cc;--purple-soft:#f2effe;--line:#dfe1e8;--bg:#f6f7f9;--navy:#1c1f3a}
*{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;color:var(--ink);background:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.7}
main{overflow:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-feature-settings:"palt"}
.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}
.skip{position:fixed;top:-80px;left:16px;background:#fff;padding:14px;z-index:100}
.skip:focus{top:10px}
.mobile{display:none}

/* header */
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.nav{height:68px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:750;letter-spacing:-.6px;white-space:nowrap}
.brand-note{border-left:1px solid var(--line);padding-left:12px;margin-left:4px;color:var(--muted);font-size:10px;letter-spacing:0;font-weight:500}
nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}
.nav-detail:hover,.login:hover{color:var(--purple)}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--purple);color:#fff;min-height:52px;padding:14px 32px;font-size:15px;font-weight:700;transition:background .15s}
.button:hover{background:var(--purple-dark)}
.button.small{min-height:40px;padding:8px 18px;font-size:13px}
.button.light{min-width:260px}
.text-link{font-size:14px;font-weight:650;border-bottom:1px solid currentColor;padding-bottom:2px}
.text-link:hover{color:var(--purple)}

.section-title{font-size:clamp(26px,2.6vw,34px);line-height:1.5;letter-spacing:-.5px;margin-bottom:40px}

/* hero */
.hero{padding:88px 0 96px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,4.4vw,60px);line-height:1.35;letter-spacing:-1.5px;font-weight:800;margin-bottom:22px}
.lead{font-size:18px;font-weight:600;color:#3b3f55;margin:0 0 36px}
.actions{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.hero-visual{position:relative;margin:0;padding-bottom:64px}
.shot{background:#fff;border:1px solid var(--line);overflow:hidden}
.shot-back{width:92%;margin-left:auto}
.shot-front{position:absolute;left:0;bottom:20px;width:50%;border:1px solid #c9ccd8}
.hero-visual figcaption{position:absolute;right:0;bottom:0;font-size:11px;color:var(--muted)}

/* why */
.why{padding:88px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.why-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy)}
.why-list li{padding:26px 28px 6px 0}
.why-list li+li{padding-left:28px;border-left:1px solid var(--line)}
.num{font-size:13px;font-weight:750;color:var(--purple)}
.why-list h3{font-size:17px;line-height:1.75;margin-top:10px;font-weight:650}

/* products */
.where{padding:88px 0}
.compare-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.compare-table thead td{width:120px;border-bottom:2px solid var(--navy)}
.compare-table thead th{text-align:left;color:#fff;padding:24px 28px;font-size:14px;font-weight:600;vertical-align:top}
.compare-table thead th b{display:block;font-size:24px;font-weight:800;margin-top:2px}
.compare-table thead th small{display:block;font-size:13px;font-weight:500;opacity:.8;margin-top:6px}
.compare-table .c-browser{background:var(--purple)}
.compare-table .c-agent{background:var(--navy)}
.compare-table tbody th{text-align:left;font-size:13px;font-weight:700;color:var(--muted);padding:18px 0;border-bottom:1px solid var(--line)}
.compare-table tbody td{padding:18px 28px;font-weight:650;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.compare-table tbody td:last-child{border-right:1px solid var(--line)}
.compare-table .c-links td{border:0;padding-top:16px}
.compare-table .c-links td,.compare-table .c-links td:last-child{border:0}
.compare-table .c-links a{font-size:14px;font-weight:700;color:var(--purple);border-bottom:1px solid currentColor}

/* product banners */
.product-section{padding:0 0 40px}
.banner{padding:56px 0;color:#fff}
.banner.browser{background:var(--purple)}
.banner.agent{background:var(--navy)}
.banner h2{font-size:clamp(26px,2.8vw,36px);line-height:1.4}
.banner-sub{font-size:16px;margin:12px 0 0;opacity:.9}

/* tables */
.table-block{padding:56px 0 8px}
.table-title{font-size:21px;margin-bottom:16px}
.table-scroll{overflow-x:auto}
.stop{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line)}
.stop thead th{text-align:left;font-size:13px;font-weight:650;color:#fff;background:var(--navy);padding:12px 18px}
.stop thead th:first-child{width:34%}
.stop tbody th[scope=row],.stop td{text-align:left;padding:12px 18px;border-top:1px solid var(--line);vertical-align:middle}
.stop tbody th[scope=row]{font-weight:700}
.stop td{color:var(--ink);font-weight:500}
.stop tbody tr:nth-child(even){background:#fafafb}
.stop .group th{text-align:left;background:var(--bg);font-size:13.5px;font-weight:750;padding:11px 18px;border-top:1px solid var(--line)}
.stop .group span{float:right;font-size:12.5px;font-weight:650;color:var(--muted)}
.detect-table thead th:nth-child(2){width:16%}
.detect-table td.where-cell{font-size:12.5px;font-weight:650;color:var(--purple)}
.local-band{margin:0;background:var(--navy);color:#fff;text-align:center;font-size:clamp(15px,1.5vw,19px);font-weight:750;padding:18px 16px}
.table-note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* rows */
.row{padding:56px 0;border-top:1px solid var(--line)}
.table-block+.row{border-top:0;margin-top:40px}
.row-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.row.reverse .row-copy{order:2}
.row.reverse .row-grid{grid-template-columns:1.2fr .8fr}
.row-num{font-size:13px;font-weight:750;color:var(--purple);margin:0 0 12px}
.row-copy h3{font-size:clamp(24px,2.3vw,30px);line-height:1.5;letter-spacing:-.5px;margin-bottom:14px}
.row-desc{font-size:15px;color:var(--muted);margin:0}
.row-shot{margin:0}
.row-shot a{display:block;border:1px solid var(--line)}
.row-shot a:hover{border-color:var(--purple)}
.row-shot figcaption{font-size:12px;color:var(--muted);margin-top:10px}

/* chain */
.chain{list-style:none;padding:36px 28px;margin:0;border:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chain li{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.chain li:not(:last-child):after{content:"";position:absolute;top:21px;left:calc(50% + 28px);width:calc(100% - 38px);height:2px;background:var(--line)}
.chain span{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--navy);font-weight:750;margin-bottom:12px}
.chain b{font-size:14px}
.chain .chain-end span{background:var(--purple);border-color:var(--purple);color:#fff}

/* privacy */
.privacy{padding:56px 0;background:var(--navy);color:#fff}
.privacy-grid{display:flex;justify-content:space-between;align-items:center;gap:40px}
.privacy h2{font-size:clamp(22px,2.2vw,28px)}
.privacy ul{list-style:none;padding:0;margin:0;display:flex}
.privacy li{font-size:15px;font-weight:650;padding:4px 26px;border-left:1px solid #ffffff40}

/* contact */
.contact{padding:96px 0}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:2px solid var(--navy);padding-top:48px}
.contact h2{font-size:clamp(26px,2.6vw,34px);line-height:1.5}
.contact-sub{font-size:15px;color:var(--muted);margin:10px 0 0}
.contact-action{display:flex;flex-direction:column;align-items:center;gap:16px}
.existing{font-size:13px;color:var(--muted);border-bottom:1px solid currentColor}
.existing:hover{color:var(--purple)}

footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0 48px;border-top:1px solid var(--line)}
footer .brand{font-size:17px}
footer div{display:flex;gap:26px;font-size:12px;color:var(--muted)}
footer div a:hover{color:var(--purple)}

/* responsive */
@media (max-width:1080px){
  .nav-detail{display:none}
  .hero-grid,.row-grid,.row.reverse .row-grid{grid-template-columns:1fr;gap:32px}
  .row.reverse .row-copy{order:0}
  .hero-visual{max-width:720px}
  .privacy-grid,.contact-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  .wrap{width:calc(100% - 32px)}
  .mobile{display:inline}
  .nav{height:60px}
  .brand{font-size:19px}
  .brand img{width:30px;height:30px}
  .brand-note{display:none}
  nav{gap:14px}
  .button.small{min-height:36px;padding:6px 12px;font-size:12px}
  .hero{padding:48px 0 56px}
  .hero h1{font-size:36px}
  .lead{font-size:16px;margin-bottom:28px}
  .hero-visual{padding-bottom:52px}
  .shot-front{width:66%;bottom:28px}
  .why,.where,.contact{padding:56px 0}
  .section-title{margin-bottom:28px}
  .why-list{grid-template-columns:1fr}
  .why-list li,.why-list li+li{padding:20px 0;border-left:0}
  .why-list li+li{border-top:1px solid var(--line)}
  .why-list h3{font-size:16px}
  .compare-table{font-size:13px}
  .compare-table thead td{width:52px}
  .compare-table thead th{padding:16px 12px;font-size:11px}
  .compare-table thead th b{font-size:16px}
  .compare-table thead th small{font-size:11px}
  .compare-table tbody th{font-size:11.5px;padding:14px 0}
  .compare-table tbody td{padding:14px 12px}
  .compare-table .c-links td{padding:12px}
  .banner{padding:40px 0}
  .table-block{padding:40px 0 0}
  .stop{font-size:13px}
  .stop thead th,.stop tbody th[scope=row],.stop td{padding:10px}
  .stop .group span{float:none;display:block;margin-top:2px}
  .detect-table td.where-cell{white-space:nowrap;font-size:11px;padding-inline:6px}
  .row{padding:40px 0}
  .table-block+.row{margin-top:16px}
  .chain{grid-template-columns:1fr;padding:22px}
  .chain li{flex-direction:row;gap:14px;text-align:left}
  .chain span{margin:0;flex-shrink:0}
  .chain li:not(:last-child):after{top:42px;left:20px;width:2px;height:18px}
  .privacy ul{flex-direction:column;gap:8px}
  .privacy li{padding:0 0 0 14px}
  .button.light{min-width:0;width:100%}
  .contact-action{align-items:stretch;width:100%}
  .existing{align-self:center}
  footer{flex-direction:column;align-items:flex-start}
  footer div{flex-direction:column;gap:8px}
}