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

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

/* 線共通 */
.hamburger-line {
  position: absolute;
  width: 32px;
  height: 1px;
  background-color: #808080;
  transition: all 0.5s ease;
  transform-origin: center;
  
}

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

/* バツ（×）状態 */
.hamburger-btn.active .line-top {
  transform: rotate(45deg);
  top: 9px;
  background-color: #000;
  width: 30px;
  right: 1px;
}

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

.hamburger-btn.active .line-bottom {
  transform: rotate(-45deg);
  bottom: auto;
  top: 9px;
  background-color: #000;
  width: 30px;
  right: 1px;
}


/* =========================
   ハンバーガーメニュー本体
========================= */
.hamburger-nav {
  position: fixed;
  top: 0;
  right: 85px;
  width: 175px;
  /* height: 900px; */

  background: #fff;
  z-index: 999 !important;
  height: 100%;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.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;
   border-bottom: 1px solid #1c2c55;
  
   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 li a:hover { background-color: #ff4c00; color: #fff;  }


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


.hamburger-nav__inner { display: flex; width: 100%; height: 100%; padding-top: 50px; padding-left: 25px; }
.hamburger-section    { width: 100%; font-size: 1.4rem;  }
.hamburger-nav__list  { width: 100%; margin-bottom: 20px; font-size: 1.4rem; }
.hamburger-nav__child-list  { display: block; text-indent: 1rem; padding-top: 10px; position: relative; padding-bottom: 5px;  }
.hamburger-nav__child-list::before  { content: "・"; margin-right: 5px;}
.hamburger-nav__child-list::after   { content: ""; display: block; width: 76%; height: 1px; border-bottom: 0.5px solid 
  #ccc; position: absolute; bottom: 0px; right: 0px;  }
.hamburger-nav__list a:hover { color: #d99f59; }



@media screen and (max-width: 767px) {
  .hamburger-nav  { right: 0px; }
  .hamburger-nav__inner { padding-left: 30px; }
.hamburger-nav.active { width: 200px; }

}
