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

.hdE{
  --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;
  background:#fff;padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px);
  display:grid;gap:clamp(28px,4vw,52px);align-content:start;
  box-shadow:inset -1px 0 0 var(--line);min-height:420px;max-width:260px;
}
.hdE__logo{font-size:17px;font-weight:800;line-height:1.7;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.hdE__nav{display:grid;gap:15px}
.hdE__nav a{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--sub);text-decoration:none;
  padding-left:0;transition:padding-left .18s,color .18s;
}
.hdE__nav a:hover,.hdE__nav a.is-on{color:var(--ink);padding-left:10px}
.hdE__nav a.is-on{position:relative}
.hdE__nav a.is-on::before{content:"";position:absolute;left:0;top:50%;width:5px;height:1px;background:var(--ink)}
.hdE__foot p{margin:0;font-size:10.5px;line-height:1.9;color:var(--sub)}
@media (max-width:760px){
  .hdE{max-width:none;min-height:0;box-shadow:0 1px 0 var(--line);
    grid-template-columns:auto 1fr;align-items:center;gap:20px}
  .hdE__logo{font-size:15px}
  .hdE__nav{grid-auto-flow:column;justify-content:end;gap:16px}
  .hdE__foot{display:none}
}