:root{
  --bg:#080c10;--bg2:#0d1219;--surface:#141d28;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --ink:#e8e6e0;--ink2:#9a9890;--ink3:#5c5b57;
  --gold:#c4963a;--gold2:rgba(196,150,58,.14);
  --serif:'Noto Serif JP',serif;--sans:'Noto Sans JP',sans-serif;--mono:'Space Mono',monospace;
  --nav:64px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);overflow-x:hidden;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav);
  display:flex;align-items:center;padding:0 40px;gap:28px;
  background:rgba(8,12,16,.91);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);}
.logo{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.06em;color:#fff;text-decoration:none;margin-right:4px;}
.logo em{color:var(--gold);font-style:normal;}
.nav-items{display:flex;gap:2px;flex:1;}
.nb{font-size:12px;font-weight:300;letter-spacing:.06em;color:var(--ink2);border:none;background:transparent;cursor:pointer;padding:8px 15px;border-radius:4px;transition:color .18s,background .18s;white-space:nowrap;text-decoration:none;display:inline-block;}
.nb:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.nb.on{color:#fff;background:rgba(255,255,255,.09);}
.nav-cta{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(196,150,58,.38);padding:7px 20px;background:transparent;cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;}
.nav-cta:hover{background:var(--gold);color:#000;}

/* UTIL */
.w{max-width:1120px;margin:0 auto;padding:0 48px;}
.ew{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.el{width:30px;height:1px;background:var(--gold);}
.et{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;}
.h2{font-family:var(--serif);font-size:33px;font-weight:200;color:var(--ink);letter-spacing:.03em;line-height:1.45;margin-bottom:14px;}
.desc{font-size:13px;font-weight:300;color:var(--ink2);line-height:2.2;}

/* PAGE HERO (shared) */
.phero{position:relative;height:320px;overflow:hidden;}
.phero img{width:100%;height:100%;object-fit:cover;filter:brightness(.27) saturate(.5);}
.pov{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 18%,rgba(8,12,16,1));display:flex;align-items:flex-end;padding:42px 60px;}

/* FOOTER */
.ft{background:var(--bg2);border-top:1px solid var(--border);padding:34px 48px;display:flex;align-items:center;justify-content:space-between;}
.fl{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;letter-spacing:.07em;}
.fl em{color:var(--gold);font-style:normal;}
.fc2{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink3);}

/* FI ANIMATION */
.fi{opacity:0;transform:translateY(13px);transition:opacity .6s ease,transform .6s ease;}
.fi.in{opacity:1;transform:translateY(0);}

@media(max-width:840px){
  .hh{font-size:32px;}.hero-inner{padding:0 24px 56px;}
  .kwrap{display:none;}.sband{grid-template-columns:1fr 1fr;}
  .hwg,.wg,.fg{grid-template-columns:1fr;}.sg{grid-template-columns:1fr;}
  .mg{grid-template-columns:1fr;}.cwrap{grid-template-columns:1fr;}
  .nr{grid-template-columns:100px 1fr;}.nc,.na{display:none;}
  nav{padding:0 14px;gap:3px;}.nb{padding:6px 9px;font-size:11px;}
  .w{padding:0 20px;}.pov{padding:32px 24px;}
}