*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#111318;--bg2:#1a1d24;--bg3:#22262f;
  --text:#f0f2f5;--text2:#b0b6c2;--text3:#6e7585;
  --accent:#d4a843;--accent2:#f0c060;
  --border:rgba(255,255,255,0.08);--border2:rgba(212,168,67,0.35);
  --font:'Meiryo','メイリオ','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --header-h:60px;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;min-height:100dvh;font-size:15px}
#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
header{
  border-bottom:1px solid var(--border);padding:0 1.0rem;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  background:var(--bg2);position:sticky;top:0;z-index:101;
}
.logo{display:flex;flex-direction:column;cursor:pointer;text-decoration:none;flex-shrink:0;line-height:1.2}
.logo-main{font-size:1.15rem;letter-spacing:0.1em;color:var(--accent);font-weight:400}
.logo-sub{font-size:0.58rem;letter-spacing:0.18em;color:var(--text2);text-transform:none;margin-top:2px}
.nav-desktop{display:flex;align-items:center;gap:0;margin-left:auto}

/* 共通リンクスタイル — 高さをヘッダーに合わせて縦全体でホバー反応 */
.nav-link{
  background:none;border:none;color:var(--text2);font-family:var(--font);
  font-size:0.85rem;letter-spacing:0.03em;cursor:pointer;
  padding:0 0.85rem;height:var(--header-h);
  display:flex;align-items:center;gap:0.4rem;
  transition:color 0.2s,background 0.2s;white-space:nowrap;
  text-decoration:none;border-bottom:2px solid transparent;
}
.nav-link:hover{color:var(--accent2);background:rgba(255,255,255,0.05)}
.nav-link.active,.nav-link.page-active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-link svg{width:16px;height:16px;flex-shrink:0}
.nav-sep{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0}

/* ハンバーガー */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text2);transition:transform 0.3s,opacity 0.3s,background 0.2s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hamburger:hover span{background:var(--accent)}

/* ドロワー */
.nav-drawer{position:fixed;top:var(--header-h);right:0;width:220px;background:var(--bg2);border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:0.75rem 0;z-index:401;transform:translateX(110%);transition:transform 0.3s ease}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer .nav-link{height:auto;padding:0.75rem 1.5rem;border-radius:0;font-size:0.92rem;border-bottom:none}
.nav-drawer .nav-sep{width:auto;height:1px;margin:0.4rem 1.5rem;background:var(--border)}

/* スマホ用タブアイコン */
.nav-tabs-mobile{display:none;align-items:center}
.nav-tabs-mobile .nav-link{padding:0 0.55rem}

.page-content{max-width:840px}
.page-content h1{font-size:1.4rem;letter-spacing:0.06em;color:var(--accent);font-weight:400;margin-bottom:2rem}
.page-content section{margin-bottom:2.5rem}
.page-content h2{font-size:0.75rem;letter-spacing:0.16em;color:var(--text3);font-weight:400;margin-bottom:0.75rem;text-transform:uppercase}
.page-content p{font-size:0.92rem;color:var(--text2);line-height:1.9;margin-bottom:0.85rem}
.page-content p:last-child{margin-bottom:0}
.page-content a{color:var(--accent);text-decoration:none}
.page-content a:hover{color:var(--accent2);text-decoration:underline}

@media(max-width:768px){
  header{padding:0 0.75rem}
  .nav-desktop{display:none}
  .hamburger{display:flex}
  .nav-tabs-mobile{display:flex}
  .nav-label{display:none}
}
@media(min-width:769px){
  .nav-tabs-mobile{display:none}
}