/* =========================
   Drawer Base
========================= */

.mobile-drawer{
  position: fixed;
  top: 0;
  right: 0;                 /* 左ドロワーにしたいなら left:0; right:auto; */
  width: min(92vw, 420px);
  height: 100dvh;
  background: #fff;
  z-index: 100000;
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -10px 0 30px rgba(0,0,0,.12);
}

/* 背景オーバーレイ */
.mobile-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

/* open 状態 */
body.is-drawer-open .mobile-drawer{
  transform: translateX(0);
}
body.is-drawer-open .mobile-drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* スクロール封じ */
body.is-drawer-open{
  overflow: hidden;
}

/* トグルボタン例（任意） */
.drawer-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
}

.drawer-toggle__lines{
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.drawer-toggle__lines::before,
.drawer-toggle__lines::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.drawer-toggle__lines::before{ top: -10px; }
.drawer-toggle__lines::after{ top: 10px; }

/* PCではドロワーUIを出さない（必要なら調整） */
@media (min-width: 991.999px){
    .drawer-toggle {
        display: none!important;
    }
  .mobile-drawer{
    position: static;
    transform: none;
    box-shadow: none;
    width: auto;
    height: auto;
    display: none!important;
  }
  .mobile-drawer-overlay{
    display: none;
  }
  body.is-drawer-open{
    overflow: auto;
  }
}

/* =========================
   Drawer Toggle Button (Hamburger / X)
========================= */

.drawer-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* ブロックのボタン文字が邪魔なら非表示（必要なら） */
.drawer-toggle .wp-element-button,
.drawer-toggle .wp-block-button__link{
  /* ボタンブロックの場合、内部に a があるケースがあるので注意
     ここは環境次第でON/OFFしてください */
}

/* アイコンの枠 */
.drawer-toggle__icon{
  width: 24px;
  height: 18px;
  position: relative;
  display: inline-block;
}

/* 3本線 */
.drawer-toggle__line{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform .25s ease,
    top .25s ease,
    opacity .2s ease;
}

.drawer-toggle__line--1{ top: 0; }
.drawer-toggle__line--2{ top: 8px; }
.drawer-toggle__line--3{ top: 16px; }

/* hover で少し反応（任意） */
.drawer-toggle:hover .drawer-toggle__line--2{
  transform: scaleX(0.85);
}

/* =========================
   X（開いてる状態）
   .is-x を付与すると「×」に変形
========================= */

.drawer-toggle.is-x .drawer-toggle__line--1{
  top: 8px;
  transform: rotate(45deg);
}

.drawer-toggle.is-x .drawer-toggle__line--2{
  opacity: 0;
  transform: scaleX(0);
}

.drawer-toggle.is-x .drawer-toggle__line--3{
  top: 8px;
  transform: rotate(-45deg);
}

/* =========================
   Closeボタンは常に×で良い場合
   （JS側で is-x を付与済み）
========================= */
.drawer-toggle--close{
  /* 位置や見た目を調整したい場合 */
}

/* =========================
   Accessibility helper
========================= */
.screen-reader-text{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
  .drawer-top {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    transition: .25s .5s;
    opacity: 0;
  }
  .drawer-bottom {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    transition: .5s .75s;
    opacity: 0;
  }
.is-drawer-open {
  & .drawer-top,
  & .drawer-bottom {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-drawer {
  & .wp-block-navigation__container {
    width: 100%;
    gap: 1px;
    border-radius: 4px;
    overflow: hidden;
    & li {
      width: 100%;
      & a {
        display: block;
        width: 100%;
        padding: 14px!important;
        background-color: #ffffff15;
        &::after {
          content: '\f061';
          font-family: "Font Awesome 7 Free";
          font-weight: 900;
          position: absolute;
          right: 20px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
      &.has-child {
        width: 100%;
        display: block!important;
        & button {
          width: 100%;
          padding: 14px;
          background-color: #ffffff15;
          position: relative;
          &::after {
            content: '\f107';
            font-family: "Font Awesome 7 Free";
            font-weight: 900;
            font-size: 0.85rem;
            position: absolute;
            right: 20px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
          }
        }
        & button[aria-expanded="true"]::after {
            content: '\f106';
          }
        & .wp-block-navigation__submenu-icon {
          display: none;
          visibility: hidden;
        }
        & .wp-block-navigation__submenu-container {
          position: relative;
          left: 0; top: 0;
          border: none;
          gap: 1px;
          & li {
            margin: 0!important;
            &:first-of-type {
              margin-top: 1px!important;
            }
            & a {
              color: inherit;
            }
          }
        }
      }
    }
  }
}

& .drawer-top {
    & nav {
      & > ul > li {
          opacity: 0;
          transform: translateX(-10px);
          transition: .5s;
          
      }
    }
  }
body.is-drawer-open {
  & .drawer-top {
    & nav {
      & > ul > li {
          opacity: 1;
          transform: translateX(0px);
          &:nth-child(1) {
            transition-delay: .6s;
          }
          &:nth-child(2) {
            transition-delay: .7s;
          }
          &:nth-child(3) {
            transition-delay: .8s;
          }
          &:nth-child(4) {
            transition-delay: .9s;
          }
          &:nth-child(5) {
            transition-delay: 1s;
          }
          &:nth-child(6) {
            transition-delay: 1.1s;
          }
          &:nth-child(7) {
            transition-delay: 1.2s;
          }
          &:nth-child(8) {
            transition-delay: 1.3s;
          }
      }
    }
  }
}


/* ドロワー内ナビだけ静的化して自前開閉 */
#mobile-navigation .wp-block-navigation.is-static-nav .wp-block-navigation__submenu-container{
  display: none;
}

#mobile-navigation .wp-block-navigation.is-static-nav .wp-block-navigation-submenu.is-submenu-open > .wp-block-navigation__submenu-container{
  display: block;
}

/* 任意：開閉アニメ（好みで） */
#mobile-navigation .wp-block-navigation.is-static-nav .wp-block-navigation__submenu-container{
  overflow: hidden;
}