/**
 * ハンバーガーメニュー用のCSS
 * ---------------------------
 * 2025.11.04 created *表示切り替えポイント：1023px elementorの指定と合わせる必要あり
 *
 **/

/* PC用のメニュー：該当箇所にElementor上でこのクラス名を付与 */
.pc-nav {
  display: none; /* とりあえず隠す */
}

/* ====== 全体コンテナ ====== */
.sp-nav {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 9999;
}

/* WPの管理ツールバーが出ている時はその分調整(ツールバーの高さ:46px) テスト用
#wpadminbar ~ .sp-nav{
  top: 56px;
}
*/

/* チェックボックスは非表示 */
.sp-nav .sp-nav-checkbox {
  display: none;
}

/* ====== ハンバーガーボタン ====== */
.sp-nav-button {
  position: relative;
  display: block;
  height: 25px;
  width: 35px;
  cursor: pointer;
  z-index: 10;
}

/* 三本線の共通スタイル */
.sp-nav-button span,
.sp-nav-button::before,
.sp-nav-button::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px; /* 線の太さ */
  background: #000;/* 線の色 */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 線の配置 */
.sp-nav-button span {
  top: 50%;
  transform: translateY(-50%);
}
.sp-nav-button::before {
  top: 0;
}
.sp-nav-button::after {
  bottom: 0;
}

/* ====== チェックONでバツ表示に変化 ====== */
.sp-nav-checkbox:checked + .sp-nav-button::before {
  transform: rotate(45deg);
  top: 11px;
  background: #fff;
}
.sp-nav-checkbox:checked + .sp-nav-button::after {
  transform: rotate(-45deg);
  bottom: 11px;
  background: #fff;
}
.sp-nav-checkbox:checked + .sp-nav-button span {
  opacity: 0;
  background: #fff;
}

/* ====== メニュー ====== */
.sp-nav-menu {
  position: fixed;
  top: 0;
  right: -220px; /* 初期は非表示 */
  width: 200px;
  height: 100vh;
  background: #333;
  color: #fff;
  transition: right 0.3s ease;
  padding-top: 80px;
  overflow: scroll;
}

/* メニュー内スタイル */
.sp-nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-nav-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sp-nav-menu a {
  display: block;
  padding: 15px;
  color: #fff;
  text-decoration: none;
}
.sp-nav-menu a:hover {
  background: rgba(255,255,255,0.1);
}
.sp-nav-menu ul.sub-menu li {
    margin-left: 1.5em;
}
.sp-nav-menu ul.sub-menu li:last-child{
  border-bottom: 0;
}

/* ====== チェックONでメニュー展開 ====== */
.sp-nav-checkbox:checked ~ .sp-nav-menu {
  right: 0;
}

/* ====== スマホ限定表示 ====== */
@media (min-width: 1023px) {
  .sp-nav {
    display: none;
  }
  .pc-nav {
    display: flex;/* elementorの既存設定に合わせる形で再表示指定 */
  }
}