/* =========================================================
   還日堂 Header System
   This is the only file that controls the site header.
   Do not duplicate header/nav styles inside individual pages.
========================================================= */

.site-header {
  box-sizing: border-box;
  color: #fff;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

.site-header::before,
.site-header::after {
  content: none !important;
  display: none !important;
}

.site-header .brand {
  color: inherit;
  text-decoration: none;
}

.site-header .brand-ja,
.site-header .brand-en {
  display: block;
  color: #fff;
}

.site-header .desktop-reserve-link::before,
.site-header .desktop-reserve-link::after,
.site-header .nav-reserve-menu::before,
.site-header .nav-reserve-menu::after {
  content: none;
  display: none;
}

/* ---------- PC HEADER ---------- */
@media (min-width: 769px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    padding: 8px 22px 10px !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    background: linear-gradient(to bottom, rgba(5,4,3,.88), rgba(5,4,3,.22), transparent) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .site-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
  }

  .site-header .crest {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    opacity: .96 !important;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.35)) !important;
  }

  .site-header .brand-ja {
    font-family: "Noto Serif JP", serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    font-weight: 300 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
  }

  .site-header .brand-en {
    margin-top: 2px !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 8px !important;
    letter-spacing: .34em !important;
    font-weight: 400 !important;
    opacity: .92 !important;
  }

  .site-header .site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(18px, 2vw, 32px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 10px 0 0 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 15px !important;
    letter-spacing: .18em !important;
    white-space: nowrap !important;
  }

  .site-header .site-nav::before,
  .site-header .site-nav::after {
    content: none !important;
    display: none !important;
  }

  .site-header .site-nav > a,
  .site-header .nav-dropdown {
    display: block !important;
  }

  .site-header .site-nav > a {
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0 0 10px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .site-header .site-nav > a.active::after,
  .site-header .nav-dropdown-menu a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(214,177,112,.72) !important;
  }

  .site-header .nav-dropdown {
    position: relative !important;
  }

  .site-header .nav-dropdown-trigger {
    display: block !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 15px !important;
    letter-spacing: .18em !important;
    cursor: pointer !important;
    padding: 0 0 10px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
  }

  .site-header .nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 18px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    min-width: 240px !important;
    padding: 18px 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(8,6,5,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all .32s ease !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.32) !important;
    z-index: 10001 !important;
  }

  .site-header .nav-dropdown:hover .nav-dropdown-menu,
  .site-header .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .site-header .nav-dropdown-menu a {
    display: block !important;
    padding: 16px 28px !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    position: relative !important;
  }

  .site-header .desktop-reserve-link,
  .site-header .nav-reserve-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 28px !important;
    margin-top: -10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transform: none !important;
  }

  .site-header .desktop-reserve-link::before,
  .site-header .desktop-reserve-link::after,
  .site-header .nav-reserve-menu::before,
  .site-header .nav-reserve-menu::after {
    content: none !important;
    display: none !important;
  }

  .site-header .nav-instagram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin-top: -5px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header .instagram {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    border: 1.7px solid #fff !important;
    border-radius: 8px !important;
    position: relative !important;
    transform: none !important;
  }

  .site-header .instagram::before {
    content: "" !important;
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    border: 1.7px solid #fff !important;
    border-radius: 50% !important;
    left: 7px !important;
    top: 7px !important;
  }

  .site-header .instagram::after {
    content: "" !important;
    position: absolute !important;
    width: 3px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 50% !important;
    right: 4px !important;
    top: 4px !important;
  }
}

/* ---------- MOBILE HEADER ---------- */
@media (max-width: 768px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    padding: 9px 14px !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(to bottom, rgba(5,4,3,.72), rgba(5,4,3,.18), transparent) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  .site-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
    z-index: 10002 !important;
  }

  .site-header .crest {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .site-header .brand-ja {
    font-family: "Noto Serif JP", serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: .1em !important;
    font-weight: 300 !important;
  }

  .site-header .brand-en {
    margin-top: 2px !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 7px !important;
    letter-spacing: .22em !important;
    font-weight: 400 !important;
    opacity: .92 !important;
  }

  .site-header .site-nav {
    position: static !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  .site-header .site-nav:not(.is-open) > a:not([aria-label="Instagram"]),
  .site-header .site-nav:not(.is-open) .nav-dropdown,
  .site-header .site-nav:not(.is-open) .desktop-reserve-link,
  .site-header .site-nav:not(.is-open) .nav-reserve-menu {
    display: none !important;
  }

  .site-header .site-nav:not(.is-open) > a[aria-label="Instagram"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 1 !important;
  }

  .site-header .site-nav:not(.is-open)::before {
    content: none !important;
    display: none !important;
  }

  .site-header .site-nav:not(.is-open)::after {
    content: "" !important;
    display: inline-flex !important;
    order: 2 !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    background:
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 10px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 17px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 24px/24px 1.5px no-repeat !important;
    pointer-events: none !important;
  }

  .site-header .site-nav.is-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 78vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 110px 32px 40px !important;
    background: rgba(5,4,3,.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  .site-header .site-nav.is-open > a[aria-label="Instagram"] {
    display: none !important;
  }

  .site-header .site-nav.is-open > a,
  .site-header .site-nav.is-open .nav-dropdown {
    display: block !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
  }

  .site-header .site-nav.is-open > a {
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0 0 10px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
    width: auto !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 14px 0 0 22px !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a {
    display: block !important;
    position: relative !important;
    width: fit-content !important;
    padding: 13px 0 !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    color: rgba(255,255,255,.68) !important;
    text-decoration: none !important;
    line-height: 1.55 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link {
    margin-top: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 188px !important;
    height: 48px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 0 !important;
    letter-spacing: .16em !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::before,
  .site-header .site-nav.is-open > a.desktop-reserve-link::before {
    content: "ご予約はこちら" !important;
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::after,
  .site-header .site-nav.is-open > a.desktop-reserve-link::after {
    content: none !important;
    display: none !important;
  }
}


/* ===== COMPONENT FIX FINAL ===== */

/* Instagram component, same shape on every page */
.site-header .instagram {
  display: inline-block !important;
  border: 1.7px solid #fff !important;
  border-radius: 8px !important;
  position: relative !important;
  background: transparent !important;
  transform: none !important;
}
.site-header .instagram::before {
  content: "" !important;
  position: absolute !important;
  border: 1.7px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !important;
}
.site-header .instagram::after {
  content: "" !important;
  position: absolute !important;
  background: #fff !important;
  border-radius: 50% !important;
}

@media (min-width: 769px) {
  .site-header .desktop-reserve-link,
  .site-header .nav-reserve-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 28px !important;
    margin-top: -10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .site-header .desktop-reserve-link::before,
  .site-header .desktop-reserve-link::after,
  .site-header .nav-reserve-menu::before,
  .site-header .nav-reserve-menu::after {
    content: none !important;
    display: none !important;
  }

  .site-header .nav-instagram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin-top: -5px !important;
  }
  .site-header .instagram {
    width: 28px !important;
    height: 28px !important;
  }
  .site-header .instagram::before {
    width: 10px !important;
    height: 10px !important;
    left: 7px !important;
    top: 7px !important;
  }
  .site-header .instagram::after {
    width: 3px !important;
    height: 3px !important;
    right: 4px !important;
    top: 4px !important;
  }
}

@media (max-width: 768px) {
  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link {
    font-size: 0 !important;
  }
  .site-header .site-nav.is-open > a.nav-reserve-menu::before,
  .site-header .site-nav.is-open > a.desktop-reserve-link::before {
    content: "ご予約はこちら" !important;
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
  }
  .site-header .site-nav.is-open > a.nav-reserve-menu::after,
  .site-header .site-nav.is-open > a.desktop-reserve-link::after {
    content: none !important;
    display: none !important;
  }

  .site-header .nav-instagram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .site-header .instagram {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
  }
  .site-header .instagram::before {
    width: 8px !important;
    height: 8px !important;
    left: 6px !important;
    top: 6px !important;
  }
  .site-header .instagram::after {
    width: 3px !important;
    height: 3px !important;
    right: 4px !important;
    top: 4px !important;
  }
}


/* ===== PC RESERVE BUTTON FINAL LOCK ===== */
@media (min-width: 769px) {
  .site-header .site-nav > a.desktop-reserve-link.nav-reserve-menu,
  .site-header .site-nav > a.desktop-reserve-link,
  .site-header .site-nav > a.nav-reserve-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 126px !important;
    height: 42px !important;
    min-height: 42px !important;

    padding: 0 28px !important;
    margin-top: -10px !important;
    margin-bottom: 0 !important;

    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;

    color: rgba(255,255,255,.96) !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    text-decoration: none !important;

    transform: translateY(1px) !important;
  }

  .site-header .site-nav > a.desktop-reserve-link.nav-reserve-menu::before,
  .site-header .site-nav > a.desktop-reserve-link.nav-reserve-menu::after,
  .site-header .site-nav > a.desktop-reserve-link::before,
  .site-header .site-nav > a.desktop-reserve-link::after,
  .site-header .site-nav > a.nav-reserve-menu::before,
  .site-header .site-nav > a.nav-reserve-menu::after {
    content: none !important;
    display: none !important;
  }
}


/* ===== HEADER ACTIVE STATE FINAL ===== */
@media (min-width: 769px) {
  .site-header .nav-dropdown-trigger.active {
    position: relative !important;
  }

  .site-header .nav-dropdown-trigger.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(214,177,112,.72) !important;
  }
}


/* ===== INSTAGRAM ICON TUNE FINAL ===== */

/* PC */
@media (min-width: 769px) {
  .site-header .nav-instagram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    margin-top: -5px !important;
  }

  .site-header .instagram {
    width: 26px !important;
    height: 26px !important;
    border: 1.55px solid rgba(255,255,255,.96) !important;
    border-radius: 7px !important;
    position: relative !important;
    background: transparent !important;
  }

  .site-header .instagram::before {
    content: "" !important;
    position: absolute !important;
    width: 9px !important;
    height: 9px !important;
    border: 1.55px solid rgba(255,255,255,.96) !important;
    border-radius: 50% !important;
    left: 6px !important;
    top: 6px !important;
    background: transparent !important;
  }

  .site-header .instagram::after {
    content: "" !important;
    position: absolute !important;
    width: 2.5px !important;
    height: 2.5px !important;
    right: 4px !important;
    top: 4px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
  }
}

/* SP */
@media (max-width: 768px) {
  .site-header .nav-instagram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
  }

  .site-header .instagram {
    width: 23px !important;
    height: 23px !important;
    border: 1.45px solid rgba(255,255,255,.96) !important;
    border-radius: 6px !important;
    position: relative !important;
    background: transparent !important;
  }

  .site-header .instagram::before {
    content: "" !important;
    position: absolute !important;
    width: 7.5px !important;
    height: 7.5px !important;
    border: 1.45px solid rgba(255,255,255,.96) !important;
    border-radius: 50% !important;
    left: 5.5px !important;
    top: 5.5px !important;
    background: transparent !important;
  }

  .site-header .instagram::after {
    content: "" !important;
    position: absolute !important;
    width: 2.3px !important;
    height: 2.3px !important;
    right: 3.5px !important;
    top: 3.5px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
  }
}


/* ===== INSTAGRAM SVG FINAL LOCK ===== */
/* 疑似要素描画をやめて、PC/SP共通でSVG背景に固定 */
.site-header .nav-instagram .instagram,
.site-header a[aria-label="Instagram"] .instagram {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%226%22%20ry%3D%226%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.96%29%22%20stroke-width%3D%221.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.96%29%22%20stroke-width%3D%221.8%22/%3E%0A%20%20%3Ccircle%20cx%3D%2220.3%22%20cy%3D%227.7%22%20r%3D%221.45%22%20fill%3D%22rgba%28255%2C255%2C255%2C.96%29%22/%3E%0A%3C/svg%3E") center center / 28px 28px no-repeat !important;
  position: relative !important;
  transform: none !important;
  box-shadow: none !important;
}

.site-header .nav-instagram .instagram::before,
.site-header .nav-instagram .instagram::after,
.site-header a[aria-label="Instagram"] .instagram::before,
.site-header a[aria-label="Instagram"] .instagram::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}

@media (min-width: 769px) {
  .site-header .nav-instagram,
  .site-header a[aria-label="Instagram"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-top: -6px !important;
  }

  .site-header .nav-instagram .instagram,
  .site-header a[aria-label="Instagram"] .instagram {
    width: 28px !important;
    height: 28px !important;
    background-size: 28px 28px !important;
  }
}

@media (max-width: 768px) {
  .site-header .nav-instagram,
  .site-header a[aria-label="Instagram"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .site-header .nav-instagram .instagram,
  .site-header a[aria-label="Instagram"] .instagram {
    width: 28px !important;
    height: 28px !important;
    background-size: 28px 28px !important;
  }
}


/* ===== MOBILE DRAWER FINAL FIX ===== */
@media (max-width: 768px) {
  .site-header {
    height: 70px !important;
    padding: 9px 14px !important;
    align-items: center !important;
  }

  .site-header .site-nav:not(.is-open) {
    position: static !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 14px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .site-header .site-nav:not(.is-open) > a:not([aria-label="Instagram"]),
  .site-header .site-nav:not(.is-open) .nav-dropdown,
  .site-header .site-nav:not(.is-open) .desktop-reserve-link,
  .site-header .site-nav:not(.is-open) .nav-reserve-menu {
    display: none !important;
  }

  .site-header .site-nav:not(.is-open)::after {
    content: "" !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    order: 2 !important;
    background:
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 10px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 17px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 24px/24px 1.5px no-repeat !important;
    pointer-events: none !important;
  }

  .site-header .site-nav.is-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(78vw, 650px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 118px 34px 42px !important;
    background: rgba(5,4,3,.965) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  /* 開いた時の閉じる×を1個だけ出す */
  .site-header .site-nav.is-open::after {
    content: "" !important;
    position: fixed !important;
    top: 24px !important;
    right: 28px !important;
    width: 40px !important;
    height: 40px !important;
    background:
      linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) center/34px 1.6px no-repeat !important;
    transform: rotate(45deg) !important;
    z-index: 10003 !important;
    pointer-events: none !important;
  }

  .site-header .site-nav.is-open::before {
    content: "" !important;
    position: fixed !important;
    top: 24px !important;
    right: 28px !important;
    width: 40px !important;
    height: 40px !important;
    background:
      linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) center/34px 1.6px no-repeat !important;
    transform: rotate(-45deg) !important;
    z-index: 10003 !important;
    pointer-events: none !important;
  }

  .site-header .site-nav.is-open > a[aria-label="Instagram"] {
    display: none !important;
  }

  .site-header .site-nav.is-open > a,
  .site-header .site-nav.is-open .nav-dropdown {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
    line-height: 1.45 !important;
  }

  .site-header .site-nav.is-open > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -8px !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(214,177,112,.72) !important;
    transform: none !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-trigger {
    display: block !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
    line-height: 1.45 !important;
    padding: 0 !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 18px 0 0 24px !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a {
    display: block !important;
    position: relative !important;
    width: fit-content !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    color: rgba(255,255,255,.68) !important;
    text-decoration: none !important;
    line-height: 1.55 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link {
    margin-top: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 190px !important;
    height: 48px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 0 !important;
    letter-spacing: .16em !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::before,
  .site-header .site-nav.is-open > a.desktop-reserve-link::before {
    content: "ご予約はこちら" !important;
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::after,
  .site-header .site-nav.is-open > a.desktop-reserve-link::after {
    content: none !important;
    display: none !important;
  }
}




/* ===== MOBILE HERO NEWS SPACING FIX ===== */
@media (max-width: 768px) {

  /* Hero予約ボタン */
  .hero-reserve,
  .hero-cta,
  .reserve-button,
  .fv-reserve,
  .hero .reserve,
  .hero a.reserve {
    margin-bottom: 26px !important;
  }

  /* 最新お知らせ */
  .hero-news,
  .hero-news-link,
  .hero-news-wrap,
  .fv-news,
  .news-link-area,
  .hero .news,
  .hero-news-area {
    margin-top: 18px !important;
  }
}


/* ===== SCROLLSPY + MOBILE DRAWER STABILITY FINAL ===== */

/* PC: ご案内 active underline */
@media (min-width: 769px) {
  .site-header .nav-dropdown-trigger.active {
    position: relative !important;
  }

  .site-header .nav-dropdown-trigger.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(214,177,112,.72) !important;
  }
}

/* SP: 開いたドロワーを読みやすく固定 */
@media (max-width: 768px) {
  body:has(.site-header .site-nav.is-open) {
    overflow: hidden !important;
  }

  .site-header .site-nav.is-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 78vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 108px 32px 92px !important;
    background: rgba(3, 3, 3, .985) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 23px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
  }

  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after {
    content: "" !important;
    position: fixed !important;
    top: 28px !important;
    right: 28px !important;
    width: 38px !important;
    height: 38px !important;
    background:
      linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) center / 34px 1.6px no-repeat !important;
    z-index: 10004 !important;
    pointer-events: none !important;
  }

  .site-header .site-nav.is-open::before {
    transform: rotate(45deg) !important;
  }

  .site-header .site-nav.is-open::after {
    transform: rotate(-45deg) !important;
  }

  .site-header .site-nav.is-open > a[aria-label="Instagram"] {
    display: none !important;
  }

  .site-header .site-nav.is-open > a,
  .site-header .site-nav.is-open .nav-dropdown {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
    line-height: 1.45 !important;
    position: relative !important;
  }

  .site-header .site-nav.is-open > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -8px !important;
    width: 100% !important;
    height: 1px !important;
    background: rgba(214,177,112,.72) !important;
    transform: none !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-trigger {
    display: block !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,.92) !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
    line-height: 1.45 !important;
    padding: 0 !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 18px 0 0 24px !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a {
    display: block !important;
    position: relative !important;
    width: fit-content !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    color: rgba(255,255,255,.72) !important;
    text-decoration: none !important;
    line-height: 1.55 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 190px !important;
    height: 48px !important;
    padding: 0 24px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 0 !important;
    letter-spacing: .16em !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::before,
  .site-header .site-nav.is-open > a.desktop-reserve-link::before {
    content: "ご予約はこちら" !important;
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu::after,
  .site-header .site-nav.is-open > a.desktop-reserve-link::after {
    content: none !important;
    display: none !important;
  }
}




/* ===== MOBILE MENU SPACING RETUNE ===== */
@media (max-width: 768px) {

  /* ご案内の中を少し詰める */
  .site-header .site-nav.is-open .nav-dropdown-menu {
    padding: 12px 0 0 22px !important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a {
    padding: 8px 0 !important;
    line-height: 1.4 !important;
  }

  /* 予約ボタンだけ下へ */
  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link {
    margin-top: 34px !important;
  }
}




/* ===== ISOLATED HERO NEWS SPACING FIX ===== */
@media (max-width:768px){

  /* Hero自体を少しだけ下方向へ余裕 */
  .hero,
  .fv,
  .hero-section{
    padding-bottom:48px!important;
  }

  /* 予約ボタン */
  .hero .reserve,
  .hero a.reserve{
    margin-bottom:24px!important;
  }

  /* 最新お知らせ */
  .hero-news,
  .hero-news-wrap,
  .fv-news{
    margin-top:12px!important;
  }
}


/* ===== DRAWER X + RESERVE POSITION FIX ===== */
@media (max-width:768px){

  .site-header .site-nav.is-open{
    padding:108px 32px 72px!important;
    gap:24px!important;
    background:rgba(3,3,3,.985)!important;
  }

  /* 右上の×を復活・1個だけ */
  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after{
    content:""!important;
    position:fixed!important;
    top:28px!important;
    right:28px!important;
    width:38px!important;
    height:38px!important;
    background:
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) center/34px 1.6px no-repeat!important;
    z-index:10004!important;
    pointer-events:none!important;
    display:block!important;
  }

  .site-header .site-nav.is-open::before{
    transform:rotate(45deg)!important;
  }

  .site-header .site-nav.is-open::after{
    transform:rotate(-45deg)!important;
  }

  /* ご案内内は詰める */
  .site-header .site-nav.is-open .nav-dropdown-menu{
    padding:12px 0 0 22px!important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a{
    padding:8px 0!important;
    line-height:1.4!important;
  }

  /* 予約ボタンは下げすぎず、前の良い位置へ */
  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link{
    margin-top:24px!important;
    margin-bottom:0!important;
  }
}


/* ===== DRAWER LOGO LAYER FIX ===== */
@media (max-width:768px){

  /* 通常時はロゴ前面 */
  .site-header .brand{
    z-index:10002!important;
  }

  /* ドロワーが開いた時はロゴを背面へ */
  .site-header:has(.site-nav.is-open) .brand{
    z-index:1!important;
    opacity:.22!important;
    pointer-events:none!important;
  }

  /* ドロワー本体はロゴより上 */
  .site-header .site-nav.is-open{
    z-index:10001!important;
  }

  /* 閉じる×は最前面 */
  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after{
    z-index:10004!important;
  }
}


/* ===== DRAWER LOGO REAL FIX ===== */
@media (max-width:768px){

  

  .site-header.drawer-open .site-nav.is-open{
    z-index:10020!important;
  }

  .site-header.drawer-open .site-nav.is-open::before,
  .site-header.drawer-open .site-nav.is-open::after{
    z-index:10030!important;
  }
}


/* ===== MOBILE DRAWER SLIDE RESTORE FINAL ===== */
@media (max-width:768px){

  /* 通常時：右上にインスタ＋ハンバーガー */
  .site-header .site-nav:not(.is-open){
    position:static!important;
    width:auto!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-direction:row!important;
    gap:14px!important;
    background:transparent!important;
    overflow:visible!important;
  }

  .site-header .site-nav:not(.is-open)::after{
    content:""!important;
    display:inline-flex!important;
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    order:2!important;
    background:
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 10px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 17px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 24px/24px 1.5px no-repeat!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* 開いた時：前のスライド式に戻す */
  .site-header .site-nav.is-open{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    width:78vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:108px 32px 72px!important;
    background:rgba(3,3,3,.985)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:24px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:10020!important;
    transform:none!important;
  }

  /* ロゴは開いたら隠す */
  

  /* ×は小さめ・右上・クリック判定は元のハンバーガー領域に任せる */
  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after{
    content:""!important;
    position:fixed!important;
    top:32px!important;
    right:30px!important;
    left:auto!important;
    width:34px!important;
    height:34px!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    background:
      linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) center/30px 1.5px no-repeat!important;
    border:0!important;
    z-index:10050!important;
    pointer-events:none!important;
  }

  .site-header .site-nav.is-open::before{ transform:rotate(45deg)!important; }
  .site-header .site-nav.is-open::after{ transform:rotate(-45deg)!important; }

  .site-header .site-nav.is-open > a[aria-label="Instagram"]{
    display:none!important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu{
    padding:12px 0 0 22px!important;
  }

  .site-header .site-nav.is-open .nav-dropdown-menu a{
    padding:8px 0!important;
    line-height:1.4!important;
  }

  .site-header .site-nav.is-open > a.nav-reserve-menu,
  .site-header .site-nav.is-open > a.desktop-reserve-link{
    margin-top:24px!important;
  }
}


/* ===== HAMBURGER TO X SIZE MATCH ===== */
@media (max-width:768px){

  /* ハンバーガー */
  .site-header .site-nav:not(.is-open)::after{
    width:36px!important;
    height:36px!important;
    background:
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 10px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 17px/24px 1.5px no-repeat,
      linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) 6px 24px/24px 1.5px no-repeat!important;
  }

  /* × */
  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after{
    top:32px!important;
    right:30px!important;
    width:36px!important;
    height:36px!important;
    background:
      linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) center/24px 1.5px no-repeat!important;
    transition:transform .28s ease, opacity .2s ease!important;
  }

  .site-header .site-nav.is-open::before{
    transform:rotate(45deg)!important;
  }

  .site-header .site-nav.is-open::after{
    transform:rotate(-45deg)!important;
  }
}


/* ===== DRAWER LOGO FULL HIDE RESTORE ===== */
@media (max-width:768px){

  .site-header.drawer-open .brand{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    filter:none!important;
    transform:none!important;
    transition:opacity .22s ease!important;
    z-index:0!important;
  }

  .site-header.drawer-open .site-nav.is-open{
    z-index:10020!important;
  }
}


/* ===== HAMBURGER X POSITION MATCH FINAL ===== */
@media (max-width:768px){

  /* 通常ハンバーガー位置 */
  .site-header .site-nav:not(.is-open)::after{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }

  /* 開いた後の×を完全同位置へ */
  .site-header .site-nav.is-open::before,
  .site-header .site-nav.is-open::after{
    top:17px!important;
    right:14px!important;
    width:36px!important;
    height:36px!important;
    background:
      linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) center/24px 1.5px no-repeat!important;
  }
}




/* ===== SP MENU BUTTON BALANCE ===== */
@media (max-width:768px){

  .menu-section .button,
  .menu-section .cta-button,
  .menu-section a.button,
  .menu-section .menu-link{
    width:auto!important;
    min-width:0!important;
    padding:16px 26px!important;
    letter-spacing:.14em!important;
  }
}