html,body{margin:0;background:#fff}

.hdD{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.hdD__bar{height:2px;background:linear-gradient(90deg,var(--acc),#00b3ff 60%,#11d0d0)}
.hdD__in{max-width:1120px;margin:0 auto;height:64px;padding:0 24px;display:flex;align-items:center;gap:30px}
.hdD__logo{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--ink);text-decoration:none}
.hdD__mark{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--acc),#00b3ff);
}
.hdD__nav{display:flex;gap:24px;margin-left:auto}
.hdD__nav a{font-size:13px;font-weight:600;color:var(--body);text-decoration:none;padding:6px 0;position:relative}
.hdD__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .18s;
}
.hdD__nav a:hover::after{transform:scaleX(1)}
.hdD__sub{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:99px;font-size:12.5px;
  font-weight:700;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);
}
.hdD__sub:hover{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)}
@media (max-width:760px){ .hdD__nav{display:none} .hdD__in{justify-content:space-between} }