/* ─── VARIABLES & RESET ─── */
:root {
  --navy:       #0d1b2e;
  --navy-mid:   #162640;
  --navy-light: #1e3456;
  --gold:       #b8975a;
  --gold-light: #d4b87a;
  --gold-pale:  #f0e6d0;
  --cream:      #faf8f4;
  --white:      #ffffff;
  --text:       #1a1a2e;
  --muted:      #6b7280;
  --border:     rgba(184,151,90,0.25);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ─── UTILITY ─── */
.gold { color: var(--gold); }
.serif { font-family: 'Noto Serif JP', serif; }

/* ─── NAV ─── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 60px;
  height: 72px;
  background: rgba(13,27,46,0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight:600; letter-spacing:.12em;
  color: var(--white); text-decoration:none;
}
.nav-logo span { color: var(--gold); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:13px; color:rgba(255,255,255,.7); text-decoration:none; letter-spacing:.06em; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-cta {
  background: var(--gold);
  color: var(--navy);
  padding: 12px 28px;
  font-size:13px; font-weight:700; letter-spacing:.1em;
  border:none; cursor:pointer; text-decoration:none;
  display:inline-block;
  transition: background .25s, transform .2s;
}
.nav-cta:hover { background: var(--gold-light); transform:translateY(-1px); }

/* ─── BREADCRUMB ─── */
.breadcrumb { font-size:12px; color:rgba(255,255,255,.45); margin-bottom:24px; letter-spacing:.04em; }
.breadcrumb a { color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { margin:0 8px; }

/* ─── PAGE HERO (shared) ─── */
.page-hero { background:var(--navy); padding:140px 60px 80px; position:relative; overflow:hidden; }
.page-hero-deco { position:absolute; border-radius:50%; border:1px solid var(--border); pointer-events:none; }
.page-hero-deco:nth-child(1) { width:500px; height:500px; top:-180px; right:-80px; opacity:.3; }
.page-hero-deco:nth-child(2) { width:300px; height:300px; bottom:-120px; left:100px; opacity:.15; }
.page-hero-line { position:absolute; left:0; bottom:0; width:40%; height:2px; background:linear-gradient(to right,var(--gold),transparent); }
.page-hero-inner { position:relative; z-index:1; max-width:900px; }
.page-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:24px; }
.page-eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--gold); }
.page-h1 { font-family:'Noto Serif JP',serif; font-size:clamp(28px,4vw,48px); font-weight:900; line-height:1.35; color:var(--white); margin-bottom:16px; }
.page-sub { font-size:16px; color:rgba(255,255,255,.65); line-height:1.9; max-width:640px; }

/* ─── SECTION BASE ─── */
.section-inner { max-width:900px; margin:0 auto; }
.sec-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:20px; }
.sec-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--gold); }
.sec-h2 { font-family:'Noto Serif JP',serif; font-size:clamp(24px,3.5vw,38px); font-weight:900; line-height:1.4; margin-bottom:40px; }

/* ─── FOOTER ─── */
footer {
  background: var(--navy);
  border-top: 1px solid var(--border);
  padding: 36px 60px;
  display: flex; align-items:center; justify-content:space-between;
}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight:600; letter-spacing:.12em;
  color: var(--white); text-decoration:none;
}
.footer-logo span { color: var(--gold); }
.footer-tag {
  font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.35);
}
.footer-copy { font-size:11px; color:rgba(255,255,255,.3); letter-spacing:.06em; }
.footer-nav { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.footer-nav a { font-size:12px; color:rgba(255,255,255,.5); text-decoration:none; letter-spacing:.04em; transition:color .2s; }
.footer-nav a:hover { color:var(--gold); }

/* ─── FADE IN ─── */
.fi { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fi.v { opacity:1; transform:translateY(0); }
.fi.d1 { transition-delay:.1s; }
.fi.d2 { transition-delay:.2s; }
.fi.d3 { transition-delay:.3s; }
.fi.d4 { transition-delay:.4s; }

/* ─── HAMBURGER ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 300;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─── RESPONSIVE (common) ─── */
@media(max-width:960px){
  nav { padding:0 24px; }
  .nav-tagline { display:none; }
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(13,27,46,0.98);
    flex-direction: column;
    padding: 24px;
    gap: 0;
    border-bottom: 1px solid rgba(184,151,90,0.25);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { text-align: center; margin-top: 12px; }
  .page-hero { padding:120px 24px 60px; }
  footer { flex-direction:column; gap:12px; text-align:center; }
}