/* ============================================================
   assets/css/header.css
   カスタムヘッダー — 全スタイル定義
   ============================================================ */

/* ---- アルケー親テーマの既存ヘッダーを非表示 ---- */
.l-header,
#site-header.l-header,
.c-header,
.ark-header,
.l-headerInner {
  display: none !important;
}

/* ============================================================
   ヘッダー基本
   ============================================================ */
#site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
backdrop-filter: blur(20px);
  transition: background-color 0.5s ease !important;
}

#site-header.scrolled {
  background-color: #cd9e8d !important;
  animation: headerSlideDown 0.45s ease forwards !important;
}

@keyframes headerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================================
   ヘッダー内レイアウト
   ============================================================ */
.header-inner {
display: flex !important;
    align-items: stretch !important;
    width: 95% !important;
    height: 72px !important;
    max-width: 1200px !important;
    padding: 0 0rem !important;
    margin: 0 auto !important;
}

/* ============================================================
   ロゴ
   ============================================================ */
.header-logo {
  display: flex !important;
  align-items: center !important;
  padding: 0 0 0 36px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.header-logo img,
.header-logo .custom-logo {
  height: 38px !important;
  width: auto !important;
  max-width: none !important;
}

.logo-text {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 21px !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  color: #fff !important;
  white-space: nowrap !important;
  transition: color 0.3s !important;
}

/* スクロール後もロゴは白 */
#site-header.scrolled .logo-text {
  color: #fff !important;
}

/* ============================================================
   PC ナビゲーション
   ============================================================ */
.header-nav {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
  justify-content: flex-end !important;
}

.nav-list {
  display: flex !important;
  align-items: stretch !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-item {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

.nav-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 11px !important;
  text-decoration: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  white-space: nowrap !important;
  background: none !important;
  border: none !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  transition: color 0.2s !important;
}

/* スクロール後のナビ文字: 白 */
#site-header.scrolled .nav-link {
  color: #fff !important;
}

.nav-link .jp {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
}

.nav-link .en {
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  margin-top: 4px !important;
  line-height: 1 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

#site-header.scrolled .nav-link .en {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ホバーアンダーライン（中央から左右へ展開） */
.nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 1px !important;
  background: #fff !important;
  transition: width 0.3s ease !important;
}

/* スクロール後のホバーライン: #5e6d64 */
#site-header.scrolled .nav-link::after {
  background: #5e6d64 !important;
}

.nav-item:not(.nav-item--reserve):hover > .nav-link::after {
  width: calc(100% - 22px) !important;
}

/* ドロップダウン矢印 */
.nav-link--arrow .jp::after {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  border-right: 1px solid currentColor !important;
  border-bottom: 1px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-left: 4px !important;
  vertical-align: 2px !important;
  transition: transform 0.2s !important;
}

.nav-item--has-dropdown:hover .nav-link--arrow .jp::after {
  transform: rotate(-135deg) !important;
  vertical-align: -1px !important;
}

/* ============================================================
   予約ボタン
   ============================================================ */
.nav-item--reserve .nav-link {
  background: #5e6d64 !important;
  padding: 0 16px !important;
  height: 100% !important;
  color: #fff !important;
}

.nav-item--reserve .nav-link .en {
  color: rgba(255, 255, 255, 0.75) !important;
}

.nav-item--reserve .nav-link:hover {
  background: #35493d !important;
}

#site-header.scrolled .nav-item--reserve .nav-link {
  color: #fff !important;
}

/* ============================================================
   PC ドロップダウンメニュー
   ============================================================ */
.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 160px !important;
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  background: rgba(40, 30, 20, 0.93) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  z-index: 200 !important;
}

#site-header.scrolled .dropdown-menu {
  background: rgba(224, 184, 170, 0.97) !important;
}

.nav-item--has-dropdown:hover .dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.dropdown-item a {
  display: block !important;
  padding: 9px 18px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.12s !important;
  white-space: nowrap !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

#site-header.scrolled .dropdown-item a {
  color: #3a2010 !important;
}

.dropdown-item a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   ハンバーガーボタン（SP）
   ============================================================ */
.hamburger-btn {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: 16px !important;
  margin-left: auto !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  outline: none !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

.hamburger-btn span {
  display: block !important;
  width: 24px !important;
  height: 1.5px !important;
  background: #fff !important;
  transition: transform 0.28s ease, opacity 0.28s ease !important;
  transform-origin: center !important;
}

/* スクロール後もハンバーガーは白 */
#site-header.scrolled .hamburger-btn span {
  background: #fff !important;
}

.hamburger-btn.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg) !important;
}

.hamburger-btn.is-open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.hamburger-btn.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg) !important;
}

/* ============================================================
   ドロワーオーバーレイ
   ============================================================ */
.drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 10050 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.32s ease !important;
}

.drawer-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   ドロワー本体
   ============================================================ */
.drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 90% !important;
  max-width: 360px !important;
  height: 100% !important;
  background: #f0e8e0 !important;
  z-index: 10060 !important;
  transform: translateX(100%) !important;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.drawer.is-open {
  transform: translateX(0) !important;
}

.drawer-inner {
  padding: 20px 26px 60px !important;
}

/* 閉じるボタン */
.drawer-close-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 4px 0 16px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(90, 64, 48, 0.15) !important;
}

.drawer-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 0 !important;
}

.drawer-close-btn::before,
.drawer-close-btn::after {
  content: '' !important;
  position: absolute !important;
  width: 18px !important;
  height: 1.5px !important;
  background: #8a6a58 !important;
  transform-origin: center !important;
  transition: background 0.15s !important;
}

.drawer-close-btn::before { transform: rotate(45deg) !important; }
.drawer-close-btn::after  { transform: rotate(-45deg) !important; }

.drawer-close-btn:hover::before,
.drawer-close-btn:hover::after {
  background: #3a2820 !important;
}

/* 店名 */
.drawer-name {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: #5a4030 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(90, 64, 48, 0.2) !important;
  margin-bottom: 6px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* ドロワーナビリスト */
.drawer-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.drawer-nav-item {
  border-bottom: 1px solid rgba(90, 64, 48, 0.1) !important;
}

.drawer-nav-link {
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  padding: 13px 4px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

.drawer-nav-link .d-jp {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: #3a2820 !important;
}

.drawer-nav-link .d-en {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  color: #a08070 !important;
}

.drawer-nav-link:hover .d-jp {
  color: #c8a788 !important;
}

/* アコーディオン矢印 */
.drawer-arrow {
  margin-left: auto !important;
  font-size: 9px !important;
  color: #a08070 !important;
  transition: transform 0.3s ease !important;
}

.drawer-nav-item.is-open .drawer-arrow {
  transform: rotate(180deg) !important;
}

/* サブメニュー: max-height でなめらかにアニメーション */
.drawer-sub {
  list-style: none !important;
  padding: 0 0 0 14px !important;
  margin: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              padding 0.35s ease !important;
}

.drawer-nav-item.is-open .drawer-sub {
  max-height: 300px !important;
  opacity: 1 !important;
  padding: 0 0 6px 14px !important;
}

.drawer-sub-item a {
  display: block !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  color: #6a5040 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(90, 64, 48, 0.07) !important;
  letter-spacing: 0.05em !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  transition: color 0.15s !important;
}

.drawer-sub-item a:hover {
  color: #c8a788 !important;
}

/* 予約CTA */
.drawer-reserve {
  display: block !important;
  margin-top: 24px !important;
  background: #c8a788 !important;
  color: #fff !important;
  text-align: center !important;
  padding: 13px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
  transition: background 0.18s !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

.drawer-reserve:hover {
  background: #b8977a !important;
}

/* ============================================================
   body スクロールロック
   ============================================================ */
body.drawer-open {
  overflow: hidden !important;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* タブレット */
@media (max-width: 1024px) {
  .nav-link { padding: 0 9px !important; }
  .nav-link .jp { font-size: 11px !important; }
  .nav-link .en { font-size: 7.5px !important; }
  .header-logo { padding-left: 20px !important; }
}

/* スマホ */
@media (max-width: 768px) {
  .header-nav { display: none !important; }
  .hamburger-btn { display: flex !important; }
  .header-inner {
    height: 60px !important;
    align-items: center !important;
  }
  .header-logo { padding-left: 20px !important; }
  .logo-text { font-size: 18px !important; }
}