:root { --ink:#333; --muted:#6b6b6b; --line:#e6e6e6; --soft:#f6f6f6; --bg:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Sans","Noto Sans JP",sans-serif; line-height:1.9; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:960px; margin:0 auto; padding:0 24px; }
.site-header { background:var(--ink); color:#fff; position:sticky; top:0; z-index:10; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700; font-size:18px; letter-spacing:.01em; }
.brand svg { width:30px; height:auto; color:#fff; }
.nav { display:flex; gap:22px; font-size:14px; }
.nav a { text-decoration:none; opacity:.8; }
.nav a:hover, .nav a.on { opacity:1; border-bottom:2px solid #fff; padding-bottom:2px; }
.menu-btn { display:none; background:none; border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:6px; padding:6px 10px; font-size:13px; }
.hero { background:var(--ink); color:#fff; text-align:center; padding:96px 24px 104px; }
.hero svg { width:120px; height:auto; color:#fff; }
.hero h1 { font-size:42px; font-weight:700; margin:8px 0 0; line-height:1.2; }
.hero .catch { font-size:22px; font-weight:700; margin:28px 0 0; letter-spacing:.04em; }
.hero .lead { max-width:640px; margin:16px auto 0; color:rgba(255,255,255,.8); font-size:15px; }
.page-head { background:var(--ink); color:#fff; padding:56px 0 48px; }
.page-head .label { font-size:12px; letter-spacing:.3em; opacity:.7; margin:0; }
.page-head h1 { font-size:30px; margin:6px 0 0; }
section { padding:72px 0; }
section + section { border-top:1px solid var(--line); }
.label { font-size:12px; letter-spacing:.3em; color:var(--muted); margin:0 0 6px; }
h2 { font-size:26px; font-weight:700; margin:0 0 28px; line-height:1.5; }
h3 { font-size:18px; margin:0 0 8px; }
.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.cards li { background:var(--soft); border-radius:8px; padding:24px; }
.cards .num { font-size:12px; letter-spacing:.2em; color:var(--muted); }
.cards p { margin:0; color:var(--muted); font-size:14px; }
.more { display:inline-block; margin-top:28px; font-weight:700; text-decoration:none; border-bottom:2px solid var(--ink); }
.work { display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; }
.work img { width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
.work .tag { display:inline-block; font-size:12px; border:1px solid var(--ink); border-radius:999px; padding:2px 10px; margin:0 6px 8px 0; }
.work ul { margin:12px 0 0; padding-left:1.2em; color:var(--muted); font-size:14px; }
.work + .work { margin-top:56px; }
.placeholder { aspect-ratio:16/10; border-radius:8px; background:repeating-linear-gradient(135deg,#f1f1f1 0 14px,#e9e9e9 14px 28px); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:700; }
.steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.steps li { counter-increment:s; border:1px solid var(--line); border-radius:8px; padding:18px; font-size:14px; }
.steps li::before { content:"STEP " counter(s); display:block; font-size:11px; letter-spacing:.2em; color:var(--muted); }
.steps b { display:block; font-size:15px; margin:2px 0 4px; }
dl.table { margin:0; display:grid; grid-template-columns:9em 1fr; border-top:1px solid var(--line); }
dl.table dt, dl.table dd { margin:0; padding:16px 4px; border-bottom:1px solid var(--line); }
dl.table dt { color:var(--muted); font-size:14px; }
dl.table ul { margin:0; padding-left:1.2em; }
.news { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.news li { display:flex; gap:24px; padding:14px 4px; border-bottom:1px solid var(--line); font-size:15px; }
.news time { color:var(--muted); min-width:6em; font-variant-numeric:tabular-nums; }
.cta { background:var(--soft); border-radius:12px; padding:40px; text-align:center; }
.btn { display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-weight:700; padding:14px 32px; border-radius:999px; margin-top:12px; }
.prose h2 { font-size:20px; margin:40px 0 12px; }
.prose p, .prose li { font-size:15px; }
.en { color:var(--muted); font-size:14px; }
.en p { margin:0 0 6px; }
.site-footer { background:var(--ink); color:rgba(255,255,255,.75); font-size:13px; padding:40px 0; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.site-footer a { text-decoration:none; }
@media (max-width:720px) {
  .nav { display:none; position:absolute; top:64px; left:0; right:0; background:var(--ink); flex-direction:column; gap:0; padding:8px 24px 16px; }
  .nav.open { display:flex; }
  .nav a { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .menu-btn { display:block; }
  .hero { padding:72px 20px 80px; }
  .hero h1 { font-size:34px; }
  .hero .catch { font-size:19px; }
  section { padding:56px 0; }
  .work { grid-template-columns:1fr; }
  dl.table { grid-template-columns:1fr; }
  dl.table dt { padding-bottom:0; border-bottom:0; }
  dl.table dd { padding-top:2px; }
  .news li { flex-direction:column; gap:0; }
}