.header{
  height:64px; display:flex; align-items:center; gap:14px;
  padding:10px 14px;
  background:linear-gradient(180deg, #2a323c 0%, #121820 60%, #0a0e13 100%);
  border-bottom:1px solid #0b0f14;
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  position:sticky; top:0; z-index:50;
}
.header::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 40px at 10% 50%, rgba(79,211,255,.14), transparent 60%),
    radial-gradient(900px 40px at 90% 50%, rgba(255,155,59,.10), transparent 60%);
  pointer-events:none;
}
.header .back,.header .logo{text-decoration:none; letter-spacing:.06em; margin-left: 10px}
.header .logo{
  height:50px;
}
.header nav.topnav{display:flex; gap:10px; align-items:center; margin-left:10px}
.header nav.topnav a{
  text-decoration:none; padding:7px 10px; border-radius:6px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}
.header nav.topnav a:hover{color:#fff; border-color:rgba(255,255,255,.14)}
.header nav.topnav a.active{
  color:#fff;
  box-shadow:0 0 0 1px rgba(79,211,255,.18), 0 0 18px rgba(79,211,255,.18);
  border-color:rgba(79,211,255,.22);
}
.header form{margin-left:auto; position:relative}
.header input{
  width:280px; max-width:34vw;
  padding:10px 34px 10px 12px;
  color:#dbe6f2; background:linear-gradient(180deg,#111823,#0b1017);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.header input::placeholder{color:#7e8da0}
.header form::after{
  content:""; position:absolute; right:12px; top:50%; width:14px; height:14px; transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.35); border-radius:50%;
  box-shadow:0 0 12px rgba(79,211,255,.12);
}
.header form::before{
  content:""; position:absolute; right:6px; top:50%; width:10px; height:2px; transform:translateY(4px) rotate(45deg);
  background:rgba(255,255,255,.35); border-radius:2px;
}
@media (max-width:900px){
  .header{gap:10px;padding:10px 12px}
  .header nav.topnav{display:none}            /* ← これが本命。ヘッダー4つ消える */
  .header form{display:none}                 /* ← 検索も一旦消す（必要なら後で右側に復活） */

  .header .back{margin-left:0;flex:0 0 auto;z-index:1}
  .header .logo{
    position:absolute;left:50%;transform:translateX(-50%);
    height:44px;margin-left:0;
  }
}
@media (max-width:900px){
  .header{position:sticky;top:0;z-index:2000}
  .header nav.topnav,.header form{display:none}
  .header{justify-content:flex-start}
  .header .back{margin-left:0;flex:0 0 auto;z-index:1}
  .header .logo{position:absolute;left:50%;transform:translateX(-50%);height:44px;margin-left:0}
  .mBtn{margin-left:auto;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;cursor:pointer;z-index:1}
  .mBtn span{height:2px;background:#d6dde6;border-radius:2px}
}