*{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;font-size:15px}
#app{display:flex;flex-direction:column;min-height:100vh}
header{border-bottom:1px solid var(--border);padding:0 2rem;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);position:sticky;top:0;z-index:50}
.logo{display:flex;flex-direction:column;cursor:pointer;text-decoration:none;flex-shrink:0;line-height:1.2}
.logo-main{font-size:1.2rem;letter-spacing:0.1em;color:var(--accent);font-weight:400}
.logo-sub{font-size:0.6rem;letter-spacing:0.18em;color:var(--text2);text-transform:uppercase;margin-top:2px}
.nav-desktop{display:flex;align-items:center;gap:0}
.nav-link{background:none;border:none;color:var(--text2);font-family:var(--font);font-size:0.88rem;letter-spacing:0.04em;cursor:pointer;padding:0.5rem 1rem;border-radius:4px;transition:color 0.2s,background 0.2s;white-space:nowrap;text-decoration:none;display:block}
.nav-link:hover{color:var(--accent2);background:rgba(255,255,255,0.05)}
.nav-link.active{color:var(--accent)}
.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:49;transform:translateX(110%);transition:transform 0.3s ease}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer .nav-link{padding:0.75rem 1.5rem;border-radius:0;font-size:0.92rem}
.nav-drawer .nav-sep{width:auto;height:1px;margin:0.4rem 1.5rem;background:var(--border)}
.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 1.25rem}.nav-desktop{display:none}.hamburger{display:flex}}