/* InfiToken — one stylesheet for /en/, /ja/, privacy and unsubscribe pages. */
:root{
  --ink:#0E1726; --ink-2:#2A3648; --sub:#4E5B6E; --mute:#7A8597;
  --line:#DDE3EA; --paper:#F6F8FA; --white:#FFFFFF;
  --navy:#0B1B33; --navy-2:#12284A; --teal:#1FA6A0; --teal-ink:#0E7C77; --teal-soft:#E3F4F2;
  --amber:#B86E14; --amber-soft:#FBF1E3; --err:#B3261E;
  --radius:12px; --wrap:1120px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans-ja: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
html[lang="ja"] body{font-family:var(--sans-ja);line-height:1.8;letter-spacing:.01em}
a{color:var(--teal-ink)} img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{letter-spacing:0;line-height:1.4}
h2{font-size:clamp(24px,3.2vw,32px)} h3{font-size:18px}
p{margin:0 0 1em}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 10px}
html[lang="ja"] .eyebrow{letter-spacing:.04em}
.lead{font-size:18px;color:var(--sub);max-width:720px}
.muted{color:var(--mute)} .small{font-size:14px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(11,27,51,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{font-weight:700;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.brand b{color:#5FD3CC;font-weight:700}
.brand svg{width:26px;height:26px;flex:none}
.top nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.top nav a{color:#C9D3E1;text-decoration:none;font-size:14px}
.top nav a:hover{color:#fff}
.top nav a.lang{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 11px;color:#fff}
.top nav a.cta{background:var(--teal);color:#fff;border-radius:999px;padding:6px 14px;font-weight:600}
@media (max-width:820px){.top nav a.hide-sm{display:none}}

/* hero */
.hero{background:radial-gradient(1200px 500px at 85% -10%,rgba(31,166,160,.28),transparent 60%),linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;padding:72px 0 64px}
.hero h1{font-size:clamp(32px,5vw,54px);max-width:860px}
html[lang="ja"] .hero h1{font-size:clamp(28px,4.2vw,46px)}
.hero .lead{color:#C9D3E1;font-size:19px}
.hero .eyebrow{color:#5FD3CC}
.hello{display:none;background:rgba(95,211,204,.14);border:1px solid rgba(95,211,204,.35);color:#E6FBF9;border-radius:10px;padding:10px 14px;margin:0 0 22px;max-width:760px;font-size:15px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.btn{display:inline-block;font:inherit;font-weight:600;font-size:15px;border-radius:999px;padding:12px 22px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-ink)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.55;cursor:default}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;margin-top:48px}
.kpi{background:rgba(11,27,51,.6);padding:18px 18px 16px}
.kpi b{display:block;font-size:28px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:#A9B6C8}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* sections */
section.s{padding:72px 0;border-bottom:1px solid var(--line)}
section.s.alt{background:var(--paper)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin-bottom:6px}
.card p{color:var(--sub);margin:0;font-size:15px}
.card .ico{width:36px;height:36px;border-radius:9px;background:var(--teal-soft);color:var(--teal-ink);display:grid;place-items:center;margin-bottom:14px}
.card .ico svg{width:20px;height:20px}
.head{margin-bottom:32px}

/* spec table */
table.spec{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px}
table.spec th,table.spec td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:34%;color:var(--sub);font-weight:500;background:#FBFCFD}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.note{background:var(--amber-soft);border:1px solid #F0D9B5;border-radius:10px;padding:14px 16px;color:#6B4A12;font-size:15px;margin-top:18px}
.note b{color:#5A3D0C}

/* sites */
.site{display:flex;flex-direction:column;gap:6px}
.site .tag{align-self:flex-start;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--teal-soft);color:var(--teal-ink)}
.site .tag.later{background:#EEF1F5;color:var(--sub)}

/* pricing */
.price b{display:block;font-size:30px;line-height:1.15;color:var(--ink);margin:8px 0 2px;font-variant-numeric:tabular-nums}
html[lang="ja"] .price b{font-size:28px}
.price .unit{font-size:14px;color:var(--mute)}
.price ul{margin:14px 0 0;padding-left:18px;color:var(--sub);font-size:15px}
.price.feature{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}

/* team */
.person{display:flex;gap:14px;align-items:flex-start}
.person .av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#5FD3CC;display:grid;place-items:center;font-weight:700;font-size:15px}
.person h3{margin:0}
.person .role{font-size:13px;font-weight:600;color:var(--teal-ink);margin:2px 0 6px}

/* timeline */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.steps li{position:relative;padding-top:18px;border-top:3px solid var(--line)}
.steps li.on{border-top-color:var(--teal)}
.steps b{display:block;font-size:14px;color:var(--teal-ink);margin-bottom:2px}
.steps span{color:var(--sub);font-size:15px}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}}

/* form */
.formwrap{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:start}
@media (max-width:900px){.formwrap{grid-template-columns:1fr}}
form.reserve{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fields .full{grid-column:1/-1}
@media (max-width:620px){.fields{grid-template-columns:1fr}}
label.f{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
label.f input,label.f select,label.f textarea{display:block;margin-top:5px}
label.f .opt{font-weight:400;color:var(--mute)}
input,select,textarea{font:inherit;font-size:15px;font-weight:400;padding:10px 12px;border:1px solid #C9D2DC;border-radius:8px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
textarea{min-height:96px;resize:vertical}
fieldset{border:0;padding:0;margin:0}
fieldset legend{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;align-items:center;gap:7px;border:1px solid #C9D2DC;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;background:#fff}
.checks input{width:auto;margin:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--sub)}
.consent input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:22px;font-size:14px;margin:10px 0 0;color:var(--sub)}
.form-msg.err{color:var(--err)}
form.reserve .done{display:none}
form.reserve.sent .fields,form.reserve.sent .submitrow{display:none}
form.reserve.sent .done{display:block}
.done h3{color:var(--teal-ink)}
.submitrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}

/* faq */
details{border-bottom:1px solid var(--line);padding:14px 0}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";display:inline-block;width:20px;color:var(--teal-ink)}
details[open] summary::before{content:"–"}
details p{margin:8px 0 0 20px;color:var(--sub)}

/* footer */
footer.foot{background:var(--navy);color:#A9B6C8;padding:40px 0;font-size:14px}
footer.foot .wrap{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
footer.foot a{color:#D9E2EE}
footer.foot .brand{font-size:17px}

/* plain pages (privacy, unsubscribe) */
body.plain{background:var(--paper)}
main.narrow{max-width:760px;margin:0 auto;padding:48px 20px 64px}
body.plain .brand{color:var(--ink);margin-bottom:28px}
body.plain .brand b{color:var(--teal-ink)}
main.narrow h1{font-size:30px}
main.narrow h2{font-size:20px;margin-top:32px}
main.narrow li{margin-bottom:6px}