:root {
  --navy: #10243f;
  --navy-2: #19395f;
  --blue: #2563eb;
  --cyan: #dff4fb;
  --sky: #f3f8fc;
  --ink: #172033;
  --muted: #5f6b7a;
  --line: #dbe4ec;
  --white: #fff;
  --max: 1200px;
  --nav: 76px;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --display: "Manrope", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 24px); }
body { color: var(--ink); background: var(--white); font-family: var(--sans); line-height: 1.8; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 10px 16px; background: var(--navy); color: #fff; }
.skip:focus { top: 12px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--nav); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(219,228,236,.85); backdrop-filter: blur(18px); }
.nav { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy); font: 800 19px/1 var(--display); letter-spacing: -.04em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg,var(--navy),var(--blue)); position: relative; box-shadow: 0 8px 20px rgba(37,99,235,.2); }
.brand-mark::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; transform: rotate(45deg); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 9px 11px; color: #526071; font-size: 12px; font-weight: 600; border-radius: 8px; }
.nav-links a:hover,.nav-links a.active { color: var(--navy); background: var(--sky); }
.nav-contact { padding: 10px 17px!important; color: #fff!important; background: var(--navy)!important; margin-left: 7px; }
.lang { font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 14px; }
.menu { display: none; margin-left: auto; border: 0; background: transparent; width: 42px; height: 42px; padding: 10px; }
.menu span { display: block; height: 2px; background: var(--navy); margin: 5px 0; transition: .2s; }
main { padding-top: var(--nav); }
.hero { min-height: 690px; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(115deg,#fff 18%,#f8fbfe 60%,#eef7fb); }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 25%,rgba(37,99,235,.07),transparent 28%),linear-gradient(rgba(16,36,63,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,63,.025) 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; }
.hero-art { position:absolute; inset:0 0 0 38%; width:62%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
.hero-fade { position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 42%,rgba(255,255,255,.35) 72%,rgba(255,255,255,.08) 100%); }
.hero-content { position:relative; z-index:2; width:min(720px,66%); padding:100px 0 90px; }
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--blue); font:700 11px/1.4 var(--display); letter-spacing:.16em; text-transform:uppercase; margin-bottom:24px; }
.eyebrow::before { content:""; width:32px; height:2px; background:var(--blue); }
h1,h2,h3 { color:var(--navy); font-family:var(--display); letter-spacing:-.035em; }
.hero h1 { font-size:clamp(44px,6vw,76px); line-height:1.16; font-weight:700; margin-bottom:26px; }
.hero h1 span { color:var(--blue); }
.hero-lead { max-width:670px; color:#405067; font-size:16px; line-height:2; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:0 23px; border-radius:10px; background:var(--navy); color:#fff; font-size:13px; font-weight:700; box-shadow:0 10px 28px rgba(16,36,63,.15); }
.btn:hover { transform:translateY(-1px); background:var(--navy-2); }
.btn.secondary { color:var(--navy); background:#fff; border:1px solid var(--line); box-shadow:none; }
.hero-proof { display:flex; gap:18px; margin-top:45px; color:var(--muted); font-size:11px; font-weight:600; }
.hero-proof span { display:flex; align-items:center; gap:7px; }
.hero-proof i { width:7px; height:7px; background:#3ea78d; border-radius:50%; }
.section { padding:110px 0; }
.section.soft { background:var(--sky); }
.section.dark { color:#dce8f3; background:var(--navy); }
.section-head { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:end; margin-bottom:54px; }
.section-head h2,.page-hero h1 { font-size:clamp(34px,4.5vw,58px); line-height:1.25; }
.section-head p { color:var(--muted); font-size:14px; }
.dark h2,.dark h3 { color:#fff; }.dark .eyebrow { color:#83c7ff; }.dark .eyebrow::before { background:#83c7ff; }.dark p { color:#b9c9d9; }
.value-grid,.cards-3,.cards-5 { display:grid; gap:16px; }
.value-grid { grid-template-columns:repeat(5,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-5 { grid-template-columns:repeat(5,1fr); }
.card { position:relative; padding:30px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.card::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:3px; background:linear-gradient(90deg,var(--blue),#71c7dd); transform:scaleX(0); transform-origin:left; transition:.25s; }
.card:hover::before { transform:scaleX(1); }
.card small { color:var(--blue); font:700 10px/1.4 var(--display); letter-spacing:.12em; text-transform:uppercase; }
.card h3 { font-size:20px; line-height:1.45; margin:12px 0; }
.card p,.card li { color:var(--muted); font-size:12px; }
.card ul { list-style:none; display:grid; gap:7px; margin-top:15px; }
.card li::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--blue); margin:0 8px 2px 0; }
.mini-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--blue); background:#edf5ff; font:800 15px/1 var(--display); margin-bottom:24px; }
.platform { padding:34px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(16,36,63,.07); }
.layer-label { margin:4px 0 14px; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.05em; text-align:center; }
.blocks { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.block { padding:18px 10px; border-radius:10px; text-align:center; background:#eef6fb; color:var(--navy); font:700 11px/1.5 var(--display); border:1px solid #d6e9f3; }
.platform-connector { position:relative; display:flex; justify-content:center; align-items:center; min-height:66px; margin:4px 0; color:var(--muted); font-size:10px; font-weight:600; text-align:center; }
.platform-connector::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background:linear-gradient(var(--blue),#7ec7e0); }
.platform-connector::after { content:"▼"; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); color:var(--blue); font-size:12px; }
.platform-connector span { position:relative; z-index:1; padding:6px 14px; border:1px solid var(--line); border-radius:99px; background:#fff; }
.pipeline { display:grid; grid-template-columns:repeat(6,1fr); gap:26px; margin:32px 0; padding:27px; border-radius:14px; background:var(--navy); }
.stage { position:relative; text-align:center; color:#fff; font:700 11px/1.5 var(--display); }
.stage:not(:last-child)::after { content:"→"; position:absolute; right:-20px; color:#73b9ec; }
.foundation { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; border-radius:12px; color:#fff; background:linear-gradient(105deg,#1d5fd1,#278db5); }
.foundation strong { font:700 16px/1.4 var(--display); }
.foundation span { font-size:11px; opacity:.82; }
.foundation-note { margin-top:12px; padding:12px 16px; border-radius:9px; color:var(--muted); background:var(--sky); font-size:11px; text-align:center; }
.outcomes { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:32px; border:1px solid var(--line); background:var(--line); border-radius:14px; overflow:hidden; }
.outcomes div { padding:20px 10px; background:#fff; text-align:center; color:var(--navy); font:700 11px/1.5 var(--display); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step { padding:28px; border-left:1px solid var(--line); }
.step:first-child { border-left:0; }
.step b { display:block; color:var(--blue); font:700 12px/1 var(--display); margin-bottom:20px; }
.step h3 { font-size:18px; margin-bottom:9px; }
.step p { color:var(--muted); font-size:12px; }
.page-hero { padding:100px 0 80px; background:linear-gradient(140deg,#fff,#eff7fb); border-bottom:1px solid var(--line); }
.page-hero p { max-width:760px; color:var(--muted); margin-top:24px; font-size:15px; }
.prose { max-width:850px; }
.prose h2 { font-size:clamp(30px,4vw,48px); line-height:1.35; margin-bottom:28px; }
.prose p { color:var(--muted); margin-top:18px; }
.quote { padding:35px 40px; border-left:4px solid var(--blue); background:var(--sky); color:var(--navy); font:600 22px/1.7 var(--display); }
.wide-visual { margin:0 0 70px; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#f6fafe; box-shadow:0 24px 70px rgba(16,36,63,.08); }
.wide-visual img { width:100%; aspect-ratio:16/8.2; object-fit:cover; }
.home-visual-section { padding:70px 0 0; }
.home-visual { margin-bottom:0; }
.use-card { display:grid; grid-template-columns:180px 1fr; gap:30px; padding:35px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.use-card + .use-card { margin-top:16px; }
.use-number { color:#c8d7e4; font:700 62px/1 var(--display); }
.use-card h2 { font-size:26px; margin-bottom:5px; }
.use-target { color:var(--blue); font-size:11px; font-weight:700; margin-bottom:20px; }
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.io { padding:18px; background:var(--sky); border-radius:10px; }
.io b { display:block; color:var(--navy); font-size:11px; margin-bottom:8px; }
.io p { color:var(--muted); font-size:12px; }
.value-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.value-tags span { padding:7px 11px; border-radius:99px; color:#175b4d; background:#e9f7f2; font-size:10px; font-weight:700; }
.tech-list { counter-reset:tech; }
.tech-row { counter-increment:tech; display:grid; grid-template-columns:90px 1fr; gap:30px; padding:36px 0; border-top:1px solid var(--line); }
.tech-row::before { content:"0" counter(tech); color:#b7c8d8; font:700 26px/1 var(--display); }
.tech-row h2 { font-size:25px; margin-bottom:10px; }
.tech-row p { color:var(--muted); font-size:13px; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.person { padding:34px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.person-role { color:var(--blue); font:700 11px/1.5 var(--display); letter-spacing:.08em; }
.person h2 { font-size:25px; margin:13px 0 3px; }
.person-en { color:#a1adba; font:600 11px/1.5 var(--display); margin-bottom:22px; }
.person p { color:var(--muted); font-size:13px; }
.company-table { border-top:1px solid var(--line); }
.company-row { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid var(--line); }
.company-row dt,.company-row dd { padding:22px 24px; }
.company-row dt { color:var(--navy); background:var(--sky); font-size:12px; font-weight:700; }
.company-row dd { color:var(--muted); font-size:13px; }
.contact-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.contact-links { display:grid; gap:10px; margin-top:30px; }
.contact-links a { padding:16px 18px; border:1px solid var(--line); border-radius:10px; color:var(--navy); font-size:12px; font-weight:700; background:#fff; }
.form { padding:34px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(16,36,63,.06); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:7px; margin-bottom:18px; }
.field.full { grid-column:1/-1; }
.field label { color:var(--navy); font-size:11px; font-weight:700; }
.field input,.field select,.field textarea { width:100%; padding:13px 14px; border:1px solid #cfdbe5; border-radius:9px; color:var(--ink); background:#fff; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.field textarea { min-height:150px; resize:vertical; }
.notice { padding:14px; margin-bottom:18px; border-radius:9px; font-size:12px; }
.success { background:#e9f7f2; color:#175b4d; }.error { background:#fff0f0; color:#922; }
.cta-band { padding:70px 0; color:#fff; background:linear-gradient(110deg,var(--navy),#164e7b); }
.cta-band .container { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.cta-band h2 { color:#fff; font-size:clamp(28px,4vw,45px); }
.cta-band p { color:#c7d8e7; margin-top:8px; font-size:13px; }
.cta-band .btn { color:var(--navy); background:#fff; white-space:nowrap; }
.footer { padding:48px 0 28px; background:#0b1b30; color:#9fb0c1; }
.footer-grid { display:grid; grid-template-columns:1.3fr 2fr; gap:50px; }
.footer .brand { color:#fff; }.footer p { max-width:420px; margin-top:18px; font-size:11px; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.footer-links b { display:block; color:#fff; font-size:11px; margin-bottom:10px; }
.footer-links a { display:block; font-size:10px; margin:6px 0; }
.copyright { padding-top:28px; margin-top:35px; border-top:1px solid rgba(255,255,255,.09); font-size:9px; }
.reveal { opacity:1; transform:none; }
.vis-overlay { position:relative; }
.vis-caption { position:absolute; left:44px; bottom:40px; max-width:420px; padding:26px 30px; background:rgba(255,255,255,.92); border-radius:16px; box-shadow:0 8px 28px rgba(16,36,63,.12); }
.vis-caption .eyebrow { margin-bottom:10px; }
.vis-caption h2 { font-size:clamp(22px,2.2vw,34px); line-height:1.3; margin:0 0 10px; }
.vis-caption p { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
@media(max-width:1020px) {
  .nav-links { display:none; position:fixed; top:var(--nav); left:0; right:0; padding:14px 20px 22px; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }.nav-links a { padding:12px 14px; }.lang { display:none; }.menu { display:block; }
  .value-grid,.cards-5 { grid-template-columns:repeat(3,1fr); }.cards-3,.team-grid { grid-template-columns:1fr 1fr; }
  .hero-art { left:30%; width:70%; opacity:.72; }.hero-content { width:75%; }
  .contact-layout { gap:36px; }.blocks { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:720px) {
  :root { --nav:66px; }.container { width:min(100% - 32px,var(--max)); }
  .hero { min-height:auto; }.hero-art { inset:0; width:100%; opacity:.48; object-position:72% center; }.hero-fade { background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.68)); }
  .hero-content { width:100%; padding:82px 0 70px; }.hero h1 { font-size:43px; }.hero-lead { font-size:14px; line-height:1.9; }
  .hero-proof { flex-direction:column; gap:7px; }.section { padding:78px 0; }
  .section-head { grid-template-columns:1fr; gap:18px; margin-bottom:35px; }
  .value-grid,.cards-3,.cards-5,.team-grid,.steps,.outcomes { grid-template-columns:1fr; }
  .card { padding:25px; }.platform { padding:18px; }.blocks { grid-template-columns:1fr 1fr; }
  .platform-connector { min-height:76px; }.platform-connector span { max-width:230px; }
  .pipeline { grid-template-columns:1fr 1fr; gap:10px; padding:17px; }.stage { padding:10px; background:rgba(255,255,255,.08); border-radius:7px; }.stage::after { display:none; }
  .foundation { align-items:flex-start; flex-direction:column; }.outcomes { gap:1px; }.outcomes div { text-align:left; padding:14px 18px; }
  .step { border-left:0; border-top:1px solid var(--line); }.step:first-child { border-top:0; }
  .page-hero { padding:70px 0 58px; }.use-card { grid-template-columns:1fr; padding:25px; gap:14px; }.use-number { font-size:38px; }.io-grid { grid-template-columns:1fr; }
  .wide-visual { margin-bottom:42px; border-radius:14px; }.wide-visual img { aspect-ratio:4/3; object-position:center; }
  .vis-caption { left:16px; right:16px; bottom:16px; max-width:none; padding:18px 20px; }.vis-caption h2 { font-size:20px; }
  .tech-row { grid-template-columns:48px 1fr; gap:14px; }.contact-layout { grid-template-columns:1fr; }.form { padding:22px; }.form-grid { grid-template-columns:1fr; }
  .company-row { grid-template-columns:1fr; }.company-row dt,.company-row dd { padding:14px 16px; }
  .cta-band .container { align-items:flex-start; flex-direction:column; }.footer-grid { grid-template-columns:1fr; }.footer-links { grid-template-columns:1fr 1fr; }
}
@media(max-width:430px) {
  .hero h1 { font-size:36px; }.actions { flex-direction:column; }.btn { width:100%; }.blocks,.footer-links { grid-template-columns:1fr; }
}