/* ============================================================
   nav.css — 全ページ共通ヘッダー/ナビゲーション
   このファイルは build-src/src/assets/ が編集元。dist へコピーされる。
   ============================================================ */

/* NAV bar */
#nav{position:fixed;inset:0 0 auto;z-index:100;height:64px;display:flex;align-items:center;background:rgba(6,14,26,.92);backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid var(--rim);width:100%;box-sizing:border-box;overflow:visible}
.nav-w{width:min(var(--max),calc(100% - 56px));max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0}
.logo{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#fff;text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark{width:32px;height:32px;flex:0 0 auto}
.logo-mark img,.logo-mark svg{width:100%;height:100%}

/* ドロップダウンナビ */
.navlinks{display:flex;gap:6px;align-items:center}
.dropdown-nav{position:relative}
.nav-group{position:relative}
.nav-top{
  appearance:none;border:0;background:transparent;
  color:rgba(255,255,255,.88);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:10px 12px;border-radius:8px;
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.nav-top:hover,.nav-top:focus-visible,.nav-group.is-open .nav-top{
  color:#fff;background:rgba(255,255,255,.1);outline:none;
}
.nav-top.nav-current{color:#fff}
.nav-top.nav-current::after{content:"";display:block;height:2px;margin-top:3px;border-radius:2px;background:var(--cyan)}
.nav-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:220px;
  background:rgba(12,24,42,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  padding:6px;display:none;z-index:200;
  backdrop-filter:blur(20px);
}
.nav-group.is-open .nav-menu,.nav-group:focus-within .nav-menu{display:block}
.nav-menu a{
  display:block;padding:9px 12px;border-radius:8px;
  color:rgba(255,255,255,.9);font-size:13px;font-weight:600;
  white-space:nowrap;transition:background .12s,color .12s;
}
.nav-menu a:hover,.nav-menu a:focus-visible{
  background:rgba(255,255,255,.12);color:#fff;outline:none;
}

/* 言語切替 */
.lang-switch{display:flex;align-items:center;gap:4px;flex-shrink:0}
.lang-btn{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.55);padding:4px 6px;border-radius:5px;
  transition:color .15s;
}
.lang-btn:hover,.lang-btn.lang-active{color:#fff}
.lang-sep{color:rgba(255,255,255,.25);font-size:11px}

/* ハンバーガー */
.hamburger{display:none}

@media(max-width:960px){
  .navlinks{display:none}
  .navlinks.open{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;height:calc(100dvh - 64px);background:#060e1a;overflow-y:auto;padding:20px 24px 40px;gap:0;z-index:998}
  .navlinks.open .nav-group{border-bottom:1px solid rgba(255,255,255,.08)}
  .navlinks.open .nav-top{width:100%;text-align:left;padding:14px 0;font-size:15px}
  .navlinks.open .nav-menu{position:static;display:block;background:transparent;box-shadow:none;padding:0 0 12px 12px}
  .navlinks.open .nav-menu a{padding:8px 0;font-size:14px}
  .hamburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
  .hamburger span{display:block;width:22px;height:2px;background:#fff;transition:transform .25s,opacity .25s}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(min-width:961px){
  .hamburger{display:none}
}

/* ページ側でヘッダー高さ64px分のオフセットが要る場合に使用 */
.nav-offset{height:64px}

/* アンカー遷移時、固定ヘッダー(64px)にセクション見出しが隠れないようにする */
:target{scroll-margin-top:80px}
[id]{scroll-margin-top:80px}