:root{--navy:#101827;--white:#FAFAF7;--blue:#4169F5;--blue-text:#3457E0;--muted:#596579}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--navy);font-family:system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;word-break:keep-all}
html[lang="en"] body{word-break:normal}
html[lang="ja"] body{word-break:normal;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid #96adff;outline-offset:6px}
.wrap{max-width:1280px;margin:auto;padding:0 64px}
.dark{background:var(--navy);color:var(--white)}

header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}
.logo{font-size:26px;font-weight:750;letter-spacing:-1px}
.logo span{color:#809cff}
header nav{display:flex;align-items:center;gap:32px;font-size:14px;color:#c2cad9}
.smallbtn{padding:12px 20px;border:1px solid #ffffff40;border-radius:4px;color:white}
.languages{display:flex;gap:14px;align-items:center;padding:14px 0;justify-content:flex-end;font-size:14px;color:#aeb9cc}
.languages a[aria-current="page"]{color:white;font-weight:700;border-bottom:2px solid #809cff;padding-bottom:5px}

.hero{position:relative;min-height:635px;padding:74px 0 68px;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:35px}
.hero>*,.contact>*,.steps>*,.services>*{min-width:0}
.eyebrow{font-size:13px;letter-spacing:2px;color:#a1b7ff;font-weight:650;margin:0 0 27px}
h1{font-size:clamp(44px,5.2vw,72px);line-height:1.23;letter-spacing:-3px;font-weight:650;margin:0 0 28px}
html[lang="en"] h1{font-size:clamp(42px,4.6vw,64px);letter-spacing:-2px}
html[lang="ja"] h1{font-size:clamp(38px,4.5vw,62px);letter-spacing:-1px}
h1 .dot{color:#809cff}
.hero p.description{max-width:530px;font-size:17px;line-height:1.9;color:#b7c0d0}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin-top:36px}
.button{display:inline-block;background:var(--blue);color:white;padding:17px 25px;border-radius:4px;font-size:15px;font-weight:600}
.button.block{display:block;text-align:center}
.textlink{font-size:14px;color:#c7cfdf}
.diagram{width:100%;height:auto;min-width:0;overflow:visible}
.herofoot{display:flex;gap:32px;padding:21px 0 26px;border-top:1px solid #ffffff18;color:#aeb9cc;font-size:13px}
.herofoot span:first-child{color:#f4f5fa}

.section{padding:94px 0}
.sectionlabel{color:var(--blue-text);font-size:13px;font-weight:700;letter-spacing:1.7px;margin-bottom:22px}
h2{font-size:clamp(30px,3.3vw,44px);line-height:1.4;letter-spacing:-1.8px;margin:0 0 20px;font-weight:650}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px}
.intro p{max-width:340px;color:var(--muted);font-size:16px;line-height:1.9;margin:0 0 20px}
.services{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ccd2dc;border-bottom:1px solid #ccd2dc}
.service{padding:38px 0 42px}
.service+.service{border-left:1px solid #ccd2dc;padding-left:44px}
.number{font-size:14px;color:var(--blue-text)}
h3{font-size:27px;letter-spacing:-1px;margin:23px 0 17px}
.service p{font-size:16px;line-height:1.9;color:var(--muted);max-width:440px}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
.tags span{font-size:13px;background:#EEF2FF;color:#425477;padding:9px 12px;border-radius:3px}

.process{background:#EEF1F7}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;gap:26px}
.step{border-top:2px solid #b6c4e8;padding-top:22px}
.step b{color:var(--blue-text);font-size:13px}
.step h3{font-size:20px;margin:17px 0 12px}
.step p{font-size:15px;line-height:1.8;color:var(--muted)}

.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.contact p{line-height:1.9;color:var(--muted)}
.example{border:1px solid #ccd2dc;padding:28px;border-radius:5px;background:white}
.form label{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.form input[type="text"],.form input[type="email"],.form textarea{display:block;width:100%;margin:0 0 20px;padding:13px 14px;border:1px solid #8b96a8;border-radius:4px;background:white;color:var(--navy);font:inherit;font-size:16px;line-height:1.6}
.form textarea{resize:vertical;min-height:150px}
.form ::placeholder{color:var(--muted);opacity:1}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid #96adff;outline-offset:2px}
.form .botcheck{display:none}
.form button{width:100%;border:0;font-family:inherit;cursor:pointer}
.contact .sent{display:none;margin:0;font-size:18px;line-height:1.8;color:var(--navy);font-weight:600}
.contact .sent:target{display:block}
.sent:target~.form{display:none}
.example .notice{font-size:13px;line-height:1.7;margin:18px 0 0}
.notice a{text-decoration:underline}

.policy{max-width:760px;padding:72px 0 96px;color:#2b3547;font-size:16px;line-height:1.9}
.policy .title{font-size:36px;line-height:1.3;letter-spacing:-1px;margin:0 0 10px;color:var(--navy)}
.policy .meta{color:var(--muted);font-size:14px;margin:0 0 32px}
.policy h2{font-size:20px;line-height:1.5;letter-spacing:-.4px;margin:44px 0 12px;color:var(--navy)}
.policy p{margin:0 0 14px}
.policy ul{margin:0 0 14px;padding-left:22px}
.policy li{margin-bottom:8px}
.policy a{text-decoration:underline}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:30px 0;border-top:1px solid #ccd2dc;font-size:13px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:850px){
.wrap{padding:0 28px}
header{height:84px}
.logo{font-size:23px}
header nav a:not(.smallbtn){display:none}
.hero{grid-template-columns:1fr;padding:56px 0 30px;gap:20px}
h1{letter-spacing:-2px}
.diagram{max-width:470px;margin:auto}
.herofoot{flex-wrap:wrap;gap:13px 23px}
.section{padding:65px 0}
.intro{display:block;margin-bottom:25px}
.intro p{max-width:100%}
.steps{grid-template-columns:1fr 1fr}
.contact{grid-template-columns:1fr;gap:25px}
.services{grid-template-columns:1fr}
.service+.service{padding-left:0;border-left:0;border-top:1px solid #ccd2dc}
.service{padding:27px 0}
}

@media(max-width:500px){
.wrap{padding:0 22px}
.policy{padding:48px 0 64px}
.policy .title{font-size:30px}
.steps{grid-template-columns:1fr}
h1{font-size:40px}
html[lang="en"] h1{font-size:42px}
html[lang="ja"] h1{font-size:38px}
.smallbtn{padding:10px 14px}
.hero{padding-top:30px}
.actions{gap:20px}
.herofoot{overflow-wrap:anywhere}
.diagram .core{font-size:17px}
.diagram .labels{font-size:18px}
.diagram .cap{font-size:15px}
}