/* Layout helpers to match your page width */
.container-fluid {
  margin-left: auto;
  margin-right: auto;
  max-width: 1390px;
  padding: 0 24px;
}

/* Header shell */
.site-header { border-top: 4px solid #0a0a0a; background:#ececec; }

/* Top bar */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  min-height: 86px;
}

.brand { display:flex; align-items:center; gap:18px; }
.brand img { height:56px; width:auto; display:block; }
.brand .jp-name { font-size:1.8rem; color:#2c2c2c; letter-spacing:.02em; }

/* Utility links right */
.utils { display:flex; align-items:center; gap:18px; }
.lang-pill {
  display:inline-block; padding:8px 14px; background:#2f2f2f; color:#fff; font-size: 0.8rem;
  border-radius:4px; font-weight:600; line-height:1; text-decoration:none;
}
.lang-pill:hover { background:#1f1f1f; }
.utils .EN {display: none;}

.crumbs { color:#666; font-size:1rem; }
.crumbs a { color:#666; text-decoration:none; }
.crumbs a:hover { color:#333; }
.crumbs .sep { margin:0 10px; color:#9a9a9a; }

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display:none; width:36px; height:28px; border:0; background:transparent; padding:0; cursor:pointer;
}
.nav-toggle span {
  display:block; height:3px; background:#222; margin:5px 0; transition:transform .25s ease, opacity .2s ease;
}

/* Primary navigation bar */
.primary {
  background: linear-gradient(0deg,#a45d22,#d56a12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.primary ul {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; flex-wrap:nowrap;
}
.primary li { position:relative; }
.primary li:not(:last-child)::after {
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:24px; background:rgba(255,255,255,.35);
}
.primary a {
  display:block; padding:16px 34px; color:#fff; font-weight:700; font-size: 1rem; letter-spacing:.01em; text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,.15); 
}
.primary a:hover { background: rgba(255,255,255,.08); }
.primary .active > a {
  background: rgba(0,0,0,.07);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}

@media (max-width: 1024px) {
  .primary a {
    font-size: 0.65rem;
  }
}
/* ===== Responsive (≤1024px turns to hamburger) ===== */
@media (max-width: 768px) {
  .brand .jp-name { font-size: 1.2rem; }
  .crumbs { display:none; }             
  .nav-toggle { display:block; }

  .primary { display:none; }            
  .primary.open { display:block; }
  .primary ul {
    flex-direction:column; align-items:stretch;
  }
  .primary li:not(:last-child)::after { display:none; }
  .primary a { padding:14px 18px; border-top:1px solid rgba(255,255,255,.25); font-size: 1rem;}
}

/* Small tweaks for very narrow screens */
@media (max-width: 480px) {
  .brand .jp-name { font-size: 1rem; }
  .utils .EN {display: block;}
  .utils .ENGLISH {display: none;}


  .brand img { height:46px; }
  .brand { gap:12px; }
}