/* =========================
   ハンバーガーメニューボタン
========================= */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 9999;
  position: fixed;
  right:50px;
  top: 30px;
  width: 30px;
 
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 内部ラッパーで線をまとめる */
.hamburger-btn-inner {
  position: relative;
  width: 30px;
  height: 20px;
 

  
}

/* 線共通 */
.hamburger-line {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #555;
  transition: all 0.5s ease;
  transform-origin: center;
  left: 0px;

}

/* 初期状態：三本線 */
.line-top {
  top: 0px;
}
.line-middle {
  top: 9px;
}
.line-bottom {
  bottom: 0px;
  width: 30px;
}

/* バツ（×）状態 */
.hamburger-btn.active .line-top {
  transform: rotate(45deg);
  top: 10px;
  
  width: 30px;
}

.hamburger-btn.active .line-middle {
  opacity: 0;
}

.hamburger-btn.active .line-bottom {
  transform: rotate(-45deg);
  bottom: auto;
  top: 10px;
  
}


/* =========================
   ハンバーガーメニュー本体
========================= */
.hamburger-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;

  background: #fff;
  z-index: 999 !important;
  min-height: 330px;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  padding: 30px;
  overflow: auto;
  border: 20px solid #213140;
  border-bottom: none;
}


.hamburger-nav.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* メニューリスト */
.hamburger-menu {
  list-style: none;
  margin: 0;
}

.hamburger-menu li a {
  font-size: 1.8rem;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #000;

  
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   align-items: center;
}

.hamburger-menu li:last-child { border-bottom: unset; }

.hamburger-menu li a {
  text-decoration: none;
}


.hamburger-menu-home{
 font-weight: 600;
 padding-top: 30px !important;
 padding-bottom: 30px !important;
}

.hamburger-nav_logo           { width: 135px; height: 52px; margin-bottom: 30px; }
.hamburger-nav_list           { text-align: center; padding: 20px 30px; font-size: 1.8rem; font-weight: bold; color: #555555; border-bottom: 1px solid #e3e3e3; }
.hamburger-nav_list:hover     { color: #fff; background-color:#213140; }