/* headerとnavigationのcss */

.nav__contact {
    display: flex;
    gap: var(--wp--preset--spacing--12);
    flex-wrap: wrap;
}

.nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--16);
    color: var(--wp--preset--color--custom-dark-green);
    text-decoration: none;
    border-color: var(--wp--preset--color--custom-white);
    border-width: 1px;
    border-radius: 6px;
    background-color: var(--wp--preset--color--custom-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease,color 0.3s ease;
    border-style: solid;
}

.nav__btn:hover {
  background-color: var(--wp--preset--color--custom-dark-green);
  color: var(--wp--preset--color--custom-white);
}


.nav__btn .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-left: -4px;
}

.nav__btn--tel:hover .nav__tel-icon svg {
  color: var(--wp--preset--color--custom-white);
}

.nav__line-icon {
    background-image: url(../image/block/button/icons8-line-50.png);
}

.nav__tel-icon {
    /* background-image: url(../image/block/button/tel-icon.png); */
    width: 24px;
    height: 24px;
    color: var(--wp--preset--color--custom-dark-green);
}

ul.wp-block-navigation__container > li.wp-block-navigation-item {
  border-right: 1px solid var(--wp--preset--color--custom-white);
  padding: 0 15px 0 1px;
  transition: color 0.3s ease;
}

@media (max-width: 950px) {
  ul.wp-block-navigation__container > li.wp-block-navigation-item {
    border-right: none;
  }
}

.wp-block-navigation-item:hover {
  color: var(--wp--preset--color--custom-medium-gray);
}


/* 最後の項目には線を表示しない */
ul.wp-block-navigation__container > li:last-child {
  border-right: none;
}

/* 通常のナビだけに効かせる */
.wp-block-navigation.has-background:not(.submenu-open) .wp-block-navigation-item a:not(.wp-element-button) {
  padding: 2px 2px;
}




.wp-block-navigation__submenu-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    
}

.wp-block-navigation__submenu-container.is-open {
    max-height: 500px; /* 適切な高さに調整 */
}

/* ▼ サブメニュー全体 */

/* .wp-block-navigation-item .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--custom-background-gray);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.5em 0;
  min-width: 180px;

} */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  top: 189%;
}

/* ▼ 各メニューアイテム */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
  padding:0;
}

/* ▼ 各リンクの見た目 */
.wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
  display: block;
  /* padding: 0.75em 1.5em; */
  color: var(--wp--preset--color--custom-off-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.wp-block-navigation.has-background .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button) {
  padding: 0.75em 1.5em;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item {
 position: relative;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1em; /* 左の余白 */
  right: 1em; /* 右の余白 */
  height: 1px;
  background-color: var(--wp--preset--color--custom-white); /* 線の色 */
}

/* 最初の項目だけ線を消す */
.wp-block-navigation__submenu-container .wp-block-navigation-item:first-child::before {
  display: none;
}



/* ▼ ホバー時のエフェクト */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--custom-light-gray);
  color: var(--wp--preset--color--custom-text-black);
}


/* ハンバーガーメニュー */
.wp-block-navigation__responsive-container-open svg {
    display: none;
  }
  
.hamburger-lines {
    width: 24px;
    height: 16px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .hamburger-lines span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--wp--preset--color--custom-white);
    border-radius: 2px;
    transition: 0.3s ease;
  }
  
  .hamburger-lines span:nth-child(1) {
    top: 0;
  }
  
  .hamburger-lines span:nth-child(2) {
    top: 7px;
  }
  
  .hamburger-lines span:nth-child(3) {
    top: 14px;
  }
  
  /* クリック時にアニメーション */
  .wp-block-navigation__responsive-container-open.is-active .hamburger-lines span:nth-child(1) {
    transform: rotate(45deg);
    top: 7px;
  }
  
  .wp-block-navigation__responsive-container-open.is-active .hamburger-lines span:nth-child(2) {
    opacity: 0;
  }
  
  .wp-block-navigation__responsive-container-open.is-active .hamburger-lines span:nth-child(3) {
    transform: rotate(-45deg);
    top: 7px;
  }
  
  /* ハンバーガーメニューが開かれたとき、特定のulを非表示 */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container {
display: none !important;
}

.header__nav {
  position: relative;
  width: 100%;
  z-index: 1000;
}

.header__nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ハンバーガーメニューが開かれた際の背景画像の調整 */
.wp-block-navigation__responsive-container.is-menu-open {
  position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

  /* ハンバーガーメニューが表示されるのがデフォルトだと600pxなので950pxに変更 */
@media (min-width: 601px) {
    /* デフォルトの表示設定を無効化 */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
  }
  
  @media (max-width: 1000px) {
    /* ハンバーガーメニューアイコンを表示 */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: block !important;
      margin-left: auto;
    }
  
    /* 横並びナビゲーションを非表示 */
    .wp-block-navigation__container {
      display: none !important;
    }
  
    /* ナビゲーション開いた後のメニューは表示したい場合 */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
      display: flex !important;
      flex-direction: column;
    }
  }

/* navの並びを整理 */
  .wp-block-navigation__responsive-container {
    order: 1;
  }
  
  .wp-block-navigation__responsive-container-open {
    order: 2;
    margin-left: auto;
  }

  /* ハンバーガーメニュー開いたときの見栄え調整 */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    padding-top: 0;
  }
  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
    margin-top: 0;
}

body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog.has-custom-white-background-color {
  background-color: var(--wp--preset--color--custom-dark-green) !important;
}


/* .is-layout-flex {
  flex-wrap: nowrap !important;
} */

@media (max-width: 650px) {
  .header__info {
    display: none;
  }
}

.wp-block-navigation {
    position: static !important;
}