/*============================
#menu
============================*/
header#header div.header__container nav.header-menu ul.header-menu__list {
  display: flex;
  align-items: center;
}
header#header
  div.header__container
  nav.header-menu
  ul.header-menu__list
  li.menu-item-type-post_type.menu-item-object-page {
}
header#header div.header__container nav.header-menu ul.header-menu__list li a {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--border, #a9a9a9);
  color: var(--on-surface, #423527);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
}
header#header
  div.header__container
  nav.header-menu
  ul.header-menu__list
  li.menu-item-type-post_type.menu-item-object-page
  a
  span {
}
header#header
  div.header__container
  nav.header-menu
  ul.header-menu__list
  li.menu-item-type-post_type_archive.menu-item-object-post {
}
header#header
  div.header__container
  nav.header-menu
  ul.header-menu__list
  li.menu-item-type-post_type_archive.menu-item-object-post
  a {
}
header#header
  div.header__container
  nav.header-menu
  ul.header-menu__list
  li.menu-item-type-post_type_archive.menu-item-object-post
  a
  span {
}

/*==========================
tel
===========================*/

header#header div.header__container div.header-tel {
  display: flex;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
}
header#header div.header__container div.header-tel a {
  color: var(--on-surface, #423527);
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 24px */
  display: flex;
  align-items: center;
  gap: var(--scale-4, 4px);
}
header#header div.header__container div.header-tel a svg {
  width: var(--scale-20, 20px);
  height: 20px;
  aspect-ratio: 1/1;
}
header#header div.header__container div.header-tel div.header-tel--hours {
  color: var(--on-surface, #423527);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 14.4px */
}
header#header div.header__container nav.header-cta {
}

@media screen and (max-width: 1080px) {
  header#header div.header__container div.header-tel {
    display: none;
  }
}

/*============================
#menu
============================*/
header#header div.header__container nav.header-cta ul.header-cta__list {
  display: flex;
  align-items: center;
  gap: var(--scale-4, 4px);
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page {
}
header#header div.header__container nav.header-cta ul.header-cta__list li a {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  color: var(--surface, #fff);
  font-family: "Zen Maru Gothic";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  align-items: center;
  gap: var(--scale-4, 4px);
  align-self: stretch;
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page
  a.button-color-secondary.button-shape-elongated
  span.material-symbols-rounded {
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page
  a.button-color-secondary.button-shape-elongated
  span {
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page
  a.button-color-tertiary.button-shape-elongated {
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page
  a.button-color-tertiary.button-shape-elongated
  span.material-symbols-rounded {
}
header#header
  div.header__container
  nav.header-cta
  ul.header-cta__list
  li.menu-item-type-post_type.menu-item-object-page
  a.button-color-tertiary.button-shape-elongated
  span {
}
header#header div.header__container button.hamburger-button {
}
header#header div.header__container button.hamburger-button img.close {
}
header#header div.header__container button.hamburger-button img.open {
}
header#header div.header__container nav.global-nav--sp {
}

/*============================
#menu-%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%8a%e3%83%93-1
============================*/
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type.menu-item-object-page {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type.menu-item-object-page
  a {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type.menu-item-object-page
  a
  span {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type_archive.menu-item-object-post {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type_archive.menu-item-object-post
  a {
}
header#header
  div.header__container
  nav.global-nav--sp
  ul-1.global-nav--sp__list
  li.menu-item-type-post_type_archive.menu-item-object-post
  a
  span {
}

/*============================
ハンバーガー
============================*/

button.hamburger-button {
  display: none;
}
button.hamburger-button .close {
  display: none;
}
nav.global-nav--sp {
  display: none;
}

/* SPナビ：初期状態は非表示 */
nav.global-nav--sp {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ▼ is-open で表示 */
nav.global-nav--sp.is-open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* ハンバーガーのアイコン切り替え */
button.hamburger-button .close {
  display: none;
}
button.hamburger-button.is-open .close {
  display: block;
}
button.hamburger-button.is-open .open {
  display: none;
}

/*======================
ハンバーガーメニューに切り替わるタイミング
==========================*/
@media screen and (max-width: 768px) {
  header#header div.header__container nav.header-menu {
    display: none;
  }

  button.hamburger-button {
    display: flex;
    width: var(--scale-40);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--scale-8, 6px);
    aspect-ratio: 1/1;
  }

  header div.header__container {
    justify-content: space-between;
  }

  nav.global-nav--pc {
    display: none;
  }
  nav.global-nav--sp {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    top: 64px;
    left: 0;
    width: 100vw;
    position: fixed;
  }

  nav.global-nav--sp ul.global-nav__list {
    flex-direction: column;
  }
  nav.global-nav--sp ul.global-nav__list li.global-nav__item {
    width: 100%;
  }
  nav.global-nav--sp ul li a {
    display: flex;
    padding: var(--scale-12, 10px) var(--scale-16, 13px);
    align-items: center;
    gap: var(--scale-8, 6px);
    flex: 1 0 0;
    background: var(--primary, #1d377c);
    border-bottom: 1px solid var(--surface, #fff);

    color: var(--surface, #fff);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: var(--scale-20, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100vw;
  }

  nav.global-nav--sp
    ul.global-nav__list
    li.global-nav__item
    a.global-nav__link:hover {
    transform: none;
  }

  nav.global-nav--sp
    ul.global-nav__list
    li.global-nav__item
    a.global-nav__link
    span.global-nav__icon.global-nav__icon--leading
    :is(svg, img) {
    width: var(--scale-40, 28px);
  }
  nav.global-nav--sp
    ul.global-nav__list
    li.global-nav__item
    a.global-nav__link
    span.global-nav__icon.global-nav__icon--trailing
    :is(svg, img) {
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
  }
}
