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

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

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

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

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

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

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


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

  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;
  border: 10px solid #000;
}

.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: 60px; }
.hamburger-nav__left { width: 60%; padding-right: 40px; border-right: 1px solid #1c2c55; }
.hamburger-nav__right { width: 40%; padding-left: 40px; }

.hamburger-section .en { font-size: 4.8rem; font-weight: bold; display: block; }
.hamburger-section .ja { font-size: 1.6rem; display: block; margin-top: 4px;  }

.hamburger-section { list-style: none; padding: 0; margin: 0; }
.hamburger-section li a  { width: 100%; display: flex;  align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #1c2c55; }
.hamburger-section li:last-child { border-bottom: none; }
.hamburger-section li a:hover { background-color: #ff4c00; color: #fff; }



.zeh-nav { background: #000; color: #ff4c00; padding: 6px 12px; display: inline-block; font-weight: bold; }

.section-img img { display: block; max-width: 500px; width: 100%; height: auto; padding-top: 0px; }

.hamburger-menu .en { font-size: 3.8rem; font-weight: bold; line-height: 120%;  }
.hamburger-menu .ja { font-size: 1.6rem; display: block; margin-top: 4px; }


@media screen and (max-width: 900px) {
  .hamburger-nav__inner         { padding: 50px; flex-direction: column; overflow: scroll; }
  .hamburger-nav__left          { width: 100%; border-right: none; padding-right: unset; }
  .hamburger-section .en        { line-height: 120%; font-size: 2.4rem; }
  .hamburger-menu .en           { line-height: 120%; font-size: 2.4rem; }
  .hamburger-section .ja        { font-size: 1.4rem;  }
  .hamburger-menu .ja           { font-size: 1.4rem;  } 
  .hamburger-section li a       { gap: unset; padding-bottom: 10px; padding-top: 10px; flex-direction: column; align-items: baseline; }
  .section-img img              { display: none; }

  .hamburger-nav__right         { width: 100%; padding-left: unset; }
  .hamburger-menu li a          { padding-top: 10px; padding-bottom: 10px; flex-direction: column; align-items: baseline; gap: unset; }




}
