/* header-final.css : Glass header + scroll effects (v2 tight) */
:root { --header-h:64px; --header-h-scrolled:62px; }

.site-header{
  position:fixed !important;
  top:0;left:0;width:100%;
  height:var(--header-h);
  z-index:999999;
  transition:height .25s ease,background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}

/* remove any accidental top gaps */
html, body { margin:0; padding:0; }

/* push content below header (avoid affecting fixed header) */
body{ padding-top:var(--header-h); }

/* Make inner content vertically centered, no extra top padding */
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  padding:0 !important;      /* <-- remove whitespace */
}

/* Brand alignment */
.site-header .brand{ display:flex; align-items:center; gap:10px; }

/* PC */
@media (min-width:861px){
  .site-header{ background:rgba(255,255,255,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  body.is-scrolled .site-header{
    height:var(--header-h-scrolled);
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(0,0,0,.08);
  }
}

/* iPhone */
@media (max-width:860px){
  .site-header{ background:rgba(255,255,255,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  body.is-scrolled .site-header{
    height:var(--header-h-scrolled);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(0,0,0,.06);
  }
  body.nav-open .site-header{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  }
}

/* Logo sizing */
.site-header .brand img{
  height:42px;
  width:auto;
  display:block;
  transition:transform .25s ease;
}
body.is-scrolled .site-header .brand img{ transform:scale(.95); }


/* =========================
   NAV background + tapability FIX (v3)
========================= */

/* Ensure nav button is always tappable */
#navButton.nav-button{
  position:relative !important;
  z-index:1000001 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}

/* Ensure header stays above hero */
.site-header{ z-index:1000000 !important; }

/* Default nav styles (desktop keeps inline) */
.site-nav{ position:relative; }

/* Mobile nav panel: hidden by default */
@media (max-width:860px){
  .site-nav{
    position:fixed !important;
    top:var(--header-h);
    left:0;
    right:0;
    max-height:calc(100vh - var(--header-h));
    overflow:auto;
    padding:14px 16px 18px;
    display:block !important;

    /* give solid glass background so text is readable */
    background:rgba(255,255,255,0.96) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(0,0,0,0.10);
    box-shadow:0 10px 28px rgba(0,0,0,0.10);

    /* hidden state */
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:1000000;
  }

  /* show when open */
  body.nav-open .site-nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* Links readable */
  .site-nav a{
    color:#111 !important;
  }
  .site-nav .nav-jp{
    color:rgba(17,17,17,0.75) !important;
  }

  /* Optional: dim page behind menu */
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.25);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:999999;
  }
  /* keep header above dim layer */
  body.nav-open .site-header{ z-index:1000000 !important; }
  /* keep button above */
  body.nav-open #navButton.nav-button{ z-index:1000001 !important; }
}

/* =========================
   PC header background FIX + Mobile menu darker (v4)
========================= */

/* PC: ensure header has visible glass background so text is readable */
@media (min-width:861px){
  .site-header{
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  /* nav links readable on white */
  .site-nav a{
    color:#111 !important;
  }
  .site-nav .nav-jp{
    color:rgba(17,17,17,0.72) !important;
  }
}

/* iPhone: menu panel background a bit darker (less see-through) */
@media (max-width:860px){
  .site-nav{
    background: rgba(255,255,255,0.985) !important;
    border-top: 1px solid rgba(0,0,0,0.14) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.14) !important;
  }
}

/* =========================
   iPhone menu spacing + SNS icon visibility (v5)
========================= */
@media (max-width:860px){

  /* Menu panel: remove big outer whitespace */
  .site-nav{
    padding: 8px 10px 10px !important;   /* was 14-18px */
  }

  /* Links: reduce card-like gaps if any */
  .site-nav > a{
    margin: 6px 0 !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  /* Remove extra bottom gap around social area */
  .site-nav .footer-social-inline{
    display:flex !important;
    gap:10px !important;
    justify-content:center !important;
    padding: 10px 0 6px !important;
    margin: 6px 0 0 !important;
  }

  /* Make SNS icons visible on light background */
  .site-nav .footer-social-inline a.social{
    background: rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  .site-nav .footer-social-inline a.social svg,
  .site-nav .footer-social-inline a.social svg path{
    fill: #111 !important;
  }
}

/* =========================
   iPhone menu position + credits-style layout (v6)
========================= */
@media (max-width:860px){

  /* Start menu below header button */
  .site-nav{
    top: calc(var(--header-h) + 12px) !important;
  }

  /* Credits-style EN / JP layout */
  .site-nav > a{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    column-gap: 8px;
  }

  .site-nav > a .nav-jp{
    grid-column: 3;
    justify-self: start;
    color: rgba(17,17,17,0.75) !important;
    font-weight: 500;
  }

  .site-nav > a::after{
    content: "/";
    grid-column: 2;
    opacity: 0.6;
    font-weight: 400;
  }
}

/* =========================
   iPhone credits-style tweak (v7)
========================= */
@media (max-width:860px){

  /* Remove slash */
  .site-nav > a::after{
    content: none !important;
  }

  /* Adjust spacing between EN and JP */
  .site-nav > a{
    grid-template-columns: 1fr 0.4fr 1fr;
  }

  /* Japanese text slightly smaller */
  .site-nav > a .nav-jp{
    font-size: 0.85em !important;
    letter-spacing: 0.04em;
  }
}

/* =========================
   iPhone credits-roll alignment (v8)
========================= */
@media (max-width:860px){

  .site-nav > a{
    display:grid !important;
    grid-template-columns: 1fr 0.6fr 1fr;
    align-items:center;
  }

  /* English: right aligned */
  .site-nav > a{
    text-align:right;
  }

  /* Japanese: left aligned */
  .site-nav > a .nav-jp{
    justify-self:start;
    text-align:left;
    font-size:0.85em !important;
    letter-spacing:0.04em;
  }
}

/* =========================
   iPhone credits-roll CENTER alignment FIX (v9)
   - needs <span class="nav-en"> and <span class="nav-jp">
========================= */
@media (max-width:860px){

  /* link becomes 2-column credits layout */
  .site-nav > a{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items:center;
  }

  .site-nav > a .nav-en{
    justify-self:end;
    text-align:right;
    font-weight:600;
  }

  .site-nav > a .nav-jp{
    justify-self:start;
    text-align:left;
    font-size:0.85em !important;
    letter-spacing:0.04em;
  }
}

/* =========================
   iPhone credits CENTER lock (v10)
   EN right / JP left with fixed center gutter
========================= */
@media (max-width:860px){

  /* Fixed center gutter guarantees alignment */
  .site-nav > a{
    display:grid !important;
    grid-template-columns: 1fr 32px 1fr; /* ← center lock */
    align-items:center;
  }

  /* English: right aligned to center */
  .site-nav > a .nav-en{
    justify-self:end;
    text-align:right;
    font-weight:600;
    padding-right:4px;
  }

  /* Center spacer (empty column) */
  .site-nav > a::before{
    content:"";
    grid-column:2;
  }

  /* Japanese: left aligned from center */
  .site-nav > a .nav-jp{
    justify-self:start;
    text-align:left;
    font-size:0.85em !important;
    letter-spacing:0.04em;
    padding-left:4px;
  }
}

/* =========================
   iPhone credits CENTER lock FIX2 (v11)
   Force EN/J P on same row with fixed center gutter
========================= */
@media (max-width:860px){

  .site-nav > a{
    display:grid !important;
    grid-template-columns: 1fr 32px 1fr !important;
    grid-template-areas: "en gap jp" !important;
    align-items:center !important;
    text-align: initial !important;
  }

  .site-nav > a .nav-en{
    grid-area: en !important;
    justify-self:end !important;
    text-align:right !important;
    display:block !important;
    white-space:nowrap;
    font-weight:600;
  }

  .site-nav > a .nav-jp{
    grid-area: jp !important;
    justify-self:start !important;
    text-align:left !important;
    display:block !important;
    white-space:nowrap;
    font-size:0.85em !important;
    letter-spacing:0.04em;
  }

  /* ensure any span display overrides don't stack */
  .site-nav > a span{
    margin:0 !important;
    line-height:1.2;
  }
}

/* =========================
   iPhone credits-roll polish (v12)
   - tighter center gutter (optical)
   - EN all-caps + tracking
   - JP slightly smaller/lighter
========================= */
@media (max-width:860px){
  .site-nav > a{
    grid-template-columns: 1fr 24px 1fr !important; /* optical center */
  }
  .site-nav > a .nav-en{
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 650;
  }
  .site-nav > a .nav-jp{
    font-size: 0.82em !important;
    font-weight: 500;
    color: rgba(17,17,17,0.70) !important;
  }
}

/* =========================
   Index Quick Menu credits-style CENTER (v14)
========================= */
.quick-menu-list a{
  display:grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items:center;
  text-decoration:none;
}

.quick-menu-list a .qm-en{
  justify-self:end;
  text-align:right;
  font-weight:600;
}

.quick-menu-list a .qm-jp{
  justify-self:start;
  text-align:left;
  font-size:0.9em;
  opacity:0.8;
}

/* =========================
   Index Quick Menu credits-style CENTER (v15)
   patched 8 items
========================= */
.quickmenu-buttons .quickmenu-btn{
  display:grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items:center;
  column-gap:0;
}
.quickmenu-buttons .quickmenu-btn .qm-en{
  justify-self:end;
  text-align:right;
  font-weight:650;
  letter-spacing:0.04em;
}
.quickmenu-buttons .quickmenu-btn .qm-jp{
  justify-self:start;
  text-align:left;
  font-size:0.90em;
  opacity:0.80;
}

/* =========================
   Quick Menu JP wrap FIX (v16)
   - prevent vertical letter stacking
   - enforce 2-column credits layout with center gutter
========================= */
.quickmenu-buttons .quickmenu-btn{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) !important;
  align-items:center !important;
  justify-items:stretch !important;
  text-align:initial !important;
}

.quickmenu-buttons .quickmenu-btn .qm-en,
.quickmenu-buttons .quickmenu-btn .qm-jp{
  display:block !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

.quickmenu-buttons .quickmenu-btn .qm-en{
  justify-self:end !important;
  text-align:right !important;
}

.quickmenu-buttons .quickmenu-btn .qm-jp{
  justify-self:start !important;
  text-align:left !important;
}

/* =========================
   Quick Menu credits layout LOCK (v17)
   EN right | (gap) | JP left
========================= */
.quickmenu-buttons .quickmenu-btn{
  display:grid !important;
  grid-template-columns: 1fr 24px 1fr !important; /* center gutter */
  align-items:center !important;
  text-align:initial !important;
  justify-content:stretch !important;
  justify-items:stretch !important;
}

/* ensure spans land in correct columns */
.quickmenu-buttons .quickmenu-btn .qm-en{
  grid-column:1 !important;
  justify-self:end !important;
  text-align:right !important;
  white-space:nowrap !important;
}
.quickmenu-buttons .quickmenu-btn .qm-jp{
  grid-column:3 !important;
  justify-self:start !important;
  text-align:left !important;
  white-space:nowrap !important;
}

/* explicit empty center column (prevents collapsing) */
.quickmenu-buttons .quickmenu-btn::before{
  content:"";
  grid-column:2;
}

/* =========================
   Quick Menu center polish (v18)
   - wider center gutter
   - optical alignment padding
========================= */
.quickmenu-buttons .quickmenu-btn{
  grid-template-columns: 1fr 40px 1fr !important; /* widen space */
}

.quickmenu-buttons .quickmenu-btn .qm-en{
  padding-right: 6px; /* pull slightly off the center line */
}

.quickmenu-buttons .quickmenu-btn .qm-jp{
  padding-left: 6px;  /* pull slightly off the center line */
}

/* =========================
   iPhone overflow FIX for long JP labels (v19)
   - prevents "アナブース" etc. from spilling out
========================= */

/* Allow grid items to actually shrink (critical) */
@media (max-width:860px){
  .site-nav > a,
  .quickmenu-buttons .quickmenu-btn{
    min-width: 0 !important;
  }

  .site-nav > a .nav-en,
  .site-nav > a .nav-jp,
  .quickmenu-buttons .quickmenu-btn .qm-en,
  .quickmenu-buttons .quickmenu-btn .qm-jp{
    min-width: 0 !important;         /* <-- enables shrink inside grid */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* JP can be slightly smaller to fit, while keeping the credits feel */
  .site-nav > a .nav-jp,
  .quickmenu-buttons .quickmenu-btn .qm-jp{
    font-size: 0.82em !important;
  }
}

/* =========================
   iPad JP text size adjustment (v20)
   - slightly smaller JP on tablet widths
========================= */
@media (min-width: 768px) and (max-width: 1024px){
  .site-nav > a .nav-jp,
  .quickmenu-buttons .quickmenu-btn .qm-jp{
    font-size: 0.78em !important;
    letter-spacing: 0.02em;
  }
}



/* =================================================
   Quick Menu Center Line Shift (Reversed / Aggressive)
   Ratio: 42 : 58  (Center line clearly left)
================================================= */
.quickmenu-buttons .quickmenu-btn{
  grid-template-columns: minmax(0,42fr) 24px minmax(0,58fr) !important;
}