/* --- 1. ハンバーガーボタン --- */

.drawer-hamburger {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10002 !important;
  display: block !important;
  background-color: #ffffff !important; 
  border-radius: 6px !important; 
  width: 45px !important;
  height: 45px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.drawer-hamburger-icon {
  background-color: #78bc8c !important; 
  width: 24px !important;
  height: 2px !important;
  left: 50% !important;
  top: 50% !important; 
  margin-left: -12px !important;
  margin-top: -1px !important;
  position: absolute !important;
  transition: all 0.3s !important;
}
.drawer-hamburger-icon:before { top: -8px !important; content: "" !important; position: absolute !important; width: 24px !important; height: 2px !important; background-color: #78bc8c !important; left: 0 !important; transition: all 0.3s !important; }
.drawer-hamburger-icon:after { top: 8px !important; content: "" !important; position: absolute !important; width: 24px !important; height: 2px !important; background-color: #78bc8c !important; left: 0 !important; transition: all 0.3s !important; }

.drawer-open .drawer-hamburger-icon { background-color: transparent !important; }
.drawer-open .drawer-hamburger-icon:before { top: 0 !important; transform: rotate(45deg) !important; }
.drawer-open .drawer-hamburger-icon:after { top: 0 !important; transform: rotate(-45deg) !important; }

/* --- 2. ドロワーメニュー本体（隙間を削除しスクロールを許可） --- */
.drawer--top .drawer-nav {
  position: fixed !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10001 !important;
  background-color: #ffffff !important;
  top: -100vh !important; 
  display: block !important;

  /* ★隙間をなくすため margin-top を削除 */
  margin-top: 0 !important; 

  /* ★スクロールを強制有効化 */
  overflow-y: auto !important;
  touch-action: pan-y !important; 
  -webkit-overflow-scrolling: touch;

  transform: translateY(-20px) !important; 
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s linear !important;
}

.drawer-open.drawer--top .drawer-nav {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- 3. 背景の影（透明） --- */
.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important;
  background-color: transparent !important; 
  display: none;
}
.drawer-open .drawer-overlay { display: block !important; }

header {
  z-index: 10002 !important; 
  position: sticky !important;
}

/* --- 4. 階層メニュー制御 --- */
.drawer-dropdown-menu { display: none; }
.drawer-dropdown.open > .drawer-dropdown-menu { display: block !important; }

/* --- 5. デザイン調整 --- */
.drawer-menu-item:hover, .drawer-dropdown-menu-item:hover {
  background-color: #78bc8c !important;
  color: #ffffff !important;
}
.drawer-menu-item:hover .drawer-caret, .drawer-dropdown-menu-item:hover .drawer-caret {
  border-top-color: #ffffff !important;
}
.drawer-menu-item {
  display: block !important;
  padding: 11px 15px !important;
  color: #4fa35b !important;
  font-size: 1em !important;
  font-weight: bold !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  line-height: 1.5 !important;
}
.drawer-dropdown-menu-item {
  display: block !important;
  padding: 11px 15px 11px 30px !important; 
  color: #4fa35b !important;
  font-size: 1em !important;
  font-weight: normal !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  line-height: 1.5 !important;
}
.drawer-dropdown-menu .drawer-dropdown-menu .drawer-dropdown-menu-item {
  padding: 11px 15px 11px 50px !important; 
}
.drawer-caret {
  border-top-color: #4fa35b !important;
  float: right !important;
  margin-top: 8px !important;
  transition: transform 0.3s ease !important;
}
.drawer-dropdown.open > a .drawer-caret { transform: rotate(180deg) !important; }



/* ★追加：ブラウザ幅 801px 以上でボタンを非表示にする */
@media (min-width: 801px) {
  .drawer-hamburger {
    display: none !important;
  }
}

/* 印刷時に非表示にする */
@media print {
  .drawer-hamburger,
.drawer--top .drawer-nav {
    display: none !important;
  }
}