/* ══════════════════════════════════════
   HEADER NAV — 共通コンポーネント

   使い方:
   - トップページ: <nav id="nav" class="">  → スクロールでsolid化
   - 下層ページ:   <nav id="nav" class="solid"> → 最初からsolid
══════════════════════════════════════ */

html{scroll-padding-top:60px;}

nav{
  position:fixed;top:0;left:0;width:100%;z-index:300;
  background:transparent;
  transition:background .4s,box-shadow .4s;
}
nav.solid{
  background:rgba(255,255,255,.90);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border);
}

.nav-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4rem;height:72px;
  transition:height .4s;
}
nav.solid .nav-top{height:56px;}

.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.nav-logo-text{
  font-family:var(--ff);font-size:1.1rem;font-weight:800;
  color:#fff;letter-spacing:.12em;transition:color .4s;
}
nav.solid .nav-logo-text{color:var(--ink);}

.nav-links{display:flex;list-style:none;gap:.15rem;}
.nav-links a{
  font-size:.72rem;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;
  letter-spacing:.08em;padding:.45rem 1rem;position:relative;
  transition:color .4s,opacity .2s;
}
.nav-links a:hover{opacity:.5;}
nav.solid .nav-links a{color:var(--ink);}

.nav-pill{
  font-size:.68rem;font-weight:600;letter-spacing:.08em;
  padding:.5rem 1.4rem;background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.25);border-radius:4px;cursor:pointer;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
nav.solid .nav-pill{background:var(--ink-dark);color:#fff;border-color:var(--ink-dark);}
.nav-pill:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ── DROPDOWN (PC) ── */
.has-drop>a::after{display:none;}
.nav-chevron{
  display:inline-block;width:4px;height:4px;margin-left:4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.5;transition:transform .2s;
}
.has-drop:hover .nav-chevron{transform:rotate(-135deg) translateY(2px);}
.nav-drop{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff;border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  padding:.5rem 0;min-width:175px;list-style:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;z-index:400;
}
.has-drop:hover .nav-drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-drop li a{
  display:block;padding:.5rem 1.3rem;
  font-size:.7rem;color:var(--ink)!important;text-decoration:none;letter-spacing:.03em;white-space:nowrap;
  transition:background .12s,padding-left .12s;
}
.nav-drop li a:hover{background:var(--bg2);padding-left:1.5rem;}
.drop-divider{height:1px;background:var(--border);margin:.35rem 0;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .nav-top{padding:0 2rem;height:64px;}
  nav.solid .nav-top{height:52px;}
}
@media(max-width:1024px){
  .nav-links,.nav-pill{display:none;}
  .nav-hamburger{display:flex;}
}
@media(max-width:640px){
  .nav-top{padding:0 1.2rem;height:56px;}
  nav.solid .nav-top{height:50px;}
}