/* 全ページ共通：ハンバーガーメニューとパンくずリスト。
   色はページごとに --nav-bg・--nav-fg・--nav-accent で変えられる */
:root {
  --nav-bg: rgba(21, 18, 15, .97);
  --nav-fg: #ece5d8;
  --nav-muted: #a9a094;
  --nav-accent: #ece5d8;
  --nav-line: rgba(236, 229, 216, .16);
  --nav-font: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ヘッダーの右側：言語の切り替えとメニューのボタンを並べる */
.site-header .lang { margin-left: auto; }

/* メニューのボタン（≡）。JavaScriptが動かないときは出さない */
.nav-toggle {
  position: relative;
  z-index: 60;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: .25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nav-fg);
  cursor: pointer;
}
.has-nav-js .nav-toggle { display: flex; }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 開いたときは、ヘッダーをメニューより手前に出して、閉じるボタン（×）を押せるようにする */
.nav-open .site-header { z-index: 60; }
.nav-open body { overflow: hidden; }

/* メニューの中身：画面全体に重ねる */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  background: var(--nav-bg);
  color: var(--nav-fg);
  overflow-y: auto;
}
.site-nav[hidden] { display: none; }
.site-nav ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.site-nav li + li { margin-top: .25rem; }
.site-nav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 1rem;
  color: inherit;
  font-family: var(--nav-font);
  font-size: 1.625rem;
  letter-spacing: .14em;
  text-decoration: none;
}
.site-nav ul a[aria-current="page"] { color: var(--nav-accent); text-decoration: underline 1px; text-underline-offset: .4em; }
.site-nav-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.75rem;
  border: 1px solid var(--nav-line);
  border-radius: 3px;
  color: inherit;
  font-family: var(--nav-font);
  font-size: 1.0625rem;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav:not([hidden]) { animation: nav-in .25s ease-out; }
  .site-nav:not([hidden]) li { animation: nav-item-in .35s ease-out both; }
  .site-nav:not([hidden]) li:nth-child(2) { animation-delay: .03s; }
  .site-nav:not([hidden]) li:nth-child(3) { animation-delay: .06s; }
  .site-nav:not([hidden]) li:nth-child(4) { animation-delay: .09s; }
  .site-nav:not([hidden]) li:nth-child(5) { animation-delay: .12s; }
}
@keyframes nav-in { from { opacity: 0; } }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(8px); } }

/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* パンくずリスト：今どのページにいるか */
.breadcrumb { padding: .25rem clamp(1rem, 5vw, 3rem) .75rem; font-size: .8125rem; color: var(--nav-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin: 0 .6em; color: var(--nav-muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; }
.breadcrumb [aria-current="page"] { color: var(--nav-fg); }