/**
 * SP Header 001
 * 
 * スマートフォン用のヘッダーセクション
 * - 固定配置（fixed）でトップに表示
 * - 76.8rem以上で非表示
 * - input checkboxでメニュー開閉（CSSのみ）
 * - WordPressのサブメニュー階層対応
 */

/* ヘッダーコンテナ */
:where(.sp-header-001) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--wp--custom--z-index--fixed, 1030);
  background-color: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--gray-lighter);

  /* 76.8rem以上で非表示 */
  @media (min-width: 1200px) {
    display: none;
  }
}

/* サイトタイトル（SEO用、非表示） */
:where(.sp-header-001__site-title) {
  padding: var(--wp--preset--spacing--2-xm, 0.8rem);
  color: var(--wp--preset--color-gray);
  font-size: var(--wp--preset--font-size--2-xs, 0.8rem);
  background: var(--wp--preset--color--gray-lighter);
}

/* ヘッダーラッパー */
:where(.sp-header-001__wrapper) {
  position: relative;
  width: 100%;
  background-color: var(--wp--preset--color--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  padding: 0 var(--wp--preset--spacing--base, 1.6rem);
}

/* インナーコンテナ */
:where(.sp-header-001__inner) {
  flex-grow: 1;
}

/* ロゴエリア */
:where(.sp-header-001__logo) {
  display: inline-block;
}

:where(.sp-header-001__logo a) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  transition: opacity var(--wp--custom--transition--duration--base, 300ms)
    var(--wp--custom--transition--timing--ease-out);
}

:where(.sp-header-001__logo a:active) {
  opacity: 0.8;
}

:where(.sp-header-001__logo-text) {
  display: flex;
  gap: var(--wp--preset--spacing--xs, 0.8rem);
  font-size: var(--wp--preset--font-size--xl, 2rem);
  font-weight: var(--wp--custom--font-weight--bold, 700);
  line-height: 1;
  letter-spacing: var(--wp--custom--letter-spacing--xs, 0.015em);
  img {
    width: var(--wp--preset--font-spacing-base, 1.6rem);
    height: var(--wp--preset--font-spacing-base, 1.6rem);
  }
}

:where(.sp-header-001__logo-subtext) {
  font-size: var(--wp--preset--font-size--xs, 0.8rem);
  font-weight: var(--wp--custom--font-weight--normal, 400);
  margin-top: var(--wp--preset--spacing--2-xs, 0.2rem);
  color: var(--wp--preset--color--gray-dark);
}

/* メニュー開閉用のチェックボックス（非表示） */
:where(.sp-header-001__menu-toggle) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ハンバーガーメニューボタン */
:where(.sp-header-001__menu-button) {
  user-select: none;
  position: fixed;
  top: 0.9rem;
  user-select: none;
  right: 0.8rem;
  width: 7.4rem;
  height: 7.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  z-index: 2;
  top: 0;
  right: 0;
  background: var(--wp--preset--color--primary);
  border-radius: 0 0 0 var(--wp--custom--border-radius--md);
  backdrop-filter: blur(10px);
  opacity: 0.95;
  position: absolute;
  * {
    transition: all 0.3s ease-in-out;
  }
}
:where(.sp-header-001__menu-button:hover) {
  opacity: 0.8;
}

/* ハンバーガーメニューアイコン */
:where(.sp-header-001__menu-icon) {
  display: block;
  width: 2.4rem;
  height: 0.1rem;
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border-radius--sm, 4px);
  transition: transform var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out),
    opacity var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out);
}

/* メニューが開いた時のアイコンアニメーション */
:where(
    .sp-header-001__menu-button.is-open .sp-header-001__menu-icon:nth-child(1)
  ) {
  transform: translateY(0.5rem) rotate(45deg);
}

:where(
    .sp-header-001__menu-button.is-open .sp-header-001__menu-icon:nth-child(2)
  ) {
  opacity: 0;
}

:where(
    .sp-header-001__menu-button.is-open .sp-header-001__menu-icon:nth-child(3)
  ) {
  transform: translateY(-0.7rem) rotate(-45deg);
}

/* ナビゲーションエリア */
:where(.sp-header-001__nav) {
  position: fixed;
  max-width: 70rem;
  width: 100%;
  top: 6rem;
  right: -10%;
  opacity: 0;
  z-index: -1000;
  background-color: var(--wp--preset--color--white);

  transition: all 0.3s ease-in-out;
  overflow-y: auto;
  height: calc(100vh - 6rem);
  padding-bottom: 12.8rem;
}

/* メニューが開いた時のナビゲーション表示 */
:where(.sp-header-001__nav.is-open) {
  right: 0;
  opacity: 1;
  z-index: 1000;
}

/* メニューリスト */
:where(.sp-header-001__menu) {
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--lg, 2.4rem) 0;
}

/* メニューアイテム */
:where(.sp-header-001__menu li) {
  margin: 0;
  padding: 0;
  position: relative;
}

/* メニューリンク */
:where(.sp-header-001__menu a) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm, 1.2rem);
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--lg, 1.8rem);
  font-weight: var(--wp--custom--font-weight--medium, 500);
  padding: var(--wp--preset--spacing--base, 1.6rem)
    var(--wp--preset--spacing--lg, 2.4rem);
  border-bottom: 1px solid var(--wp--preset--color--gray-lighter);
  transition: background-color
    var(--wp--custom--transition--duration--fast, 150ms)
    var(--wp--custom--transition--timing--ease-out);
  position: relative;
  opacity: 0;
  transition: all 0.3s ease;
  left: -1.6rem;
  &:before {
    content: "";
    position: absolute;
    left: 0.8rem;
    bottom: 0;
    width: 3.2rem;
    height: 1px;
    background-color: var(--wp--preset--color--primary);
  }
  &:after {
    content: "";
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 0.8rem;
    height: 0.8rem;
    border-right: 1px solid var(--wp--preset--color--primary);
    border-bottom: 1px solid var(--wp--preset--color--primary);
    transition: all var(--wp--custom--transition--duration--fast, 150ms)
      var(--wp--custom--transition--timing--ease-out);
  }
}

:where(.sp-header-001__menu a:hover) {
  &:after {
    border-color: var(--wp--preset--color--primary-dark);
    right: 1.4rem;
  }
}
:where(.is-open .sp-header-001__menu a) {
  opacity: 1;
  left: 0;
}
:where(.sp-header-001__menu li:nth-child(1) > a) {
  transition-delay: 0.05s;
}
:where(.sp-header-001__menu li:nth-child(2) > a) {
  transition-delay: 0.1s;
}
:where(.sp-header-001__menu li:nth-child(3) > a) {
  transition-delay: 0.15s;
}
:where(.sp-header-001__menu li:nth-child(4) > a) {
  transition-delay: 0.2s;
}
:where(.sp-header-001__menu li:nth-child(5) > a) {
  transition-delay: 0.25s;
}
:where(.sp-header-001__menu li:nth-child(6) > a) {
  transition-delay: 0.3s;
}
:where(.sp-header-001__menu li:nth-child(7) > a) {
  transition-delay: 0.35s;
}
:where(.sp-header-001__menu li:nth-child(8) > a) {
  transition-delay: 0.4s;
}
:where(.sp-header-001__menu li:nth-child(9) > a) {
  transition-delay: 0.45s;
}
:where(.sp-header-001__menu li:nth-child(10) > a) {
  transition-delay: 0.5s;
}
:where(.sp-header-001__menu li:nth-child(11) > a) {
  transition-delay: 0.55s;
}

:where(.sp-header-001__menu li > a:active) {
  background-color: var(--wp--preset--color--gray-lightest);
}

/* 現在のページ */
:where(.sp-header-001__menu .current-menu-item > a),
:where(.sp-header-001__menu .current-menu-parent > a),
:where(.sp-header-001__menu .is-active > a) {
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary-lightest);
}

/* メニューアイコン */
:where(.sp-header-001__menu .material-symbols-outlined) {
  font-size: 2.4rem;
}

/* メニューコンテンツ */
:where(.sp-header-001__menu .menu-item-content) {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--3-xs, 0.25rem);
  flex-grow: 1;
}

/* メニュータイトル */
:where(.sp-header-001__menu .menu-item-title) {
  line-height: 1.2;
}

/* メニュー説明文 */
:where(.sp-header-001__menu .menu-item-description) {
  font-size: var(--wp--preset--font-size--xs, 1.2rem);
  color: var(--wp--preset--color--gray);
  line-height: 1.2;
}

/* バッジ */
:where(.sp-header-001__menu .menu-item-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--4-xs, 0.2rem)
    var(--wp--preset--spacing--xs, 0.8rem);
  background-color: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--2-xs, 0.8rem);
  font-weight: var(--wp--custom--font-weight--bold, 700);
  border-radius: var(--wp--custom--border-radius--full, 9999px);
}

/* サブメニュー開閉用のチェックボックス（非表示） */
:where(.sp-header-001__submenu-toggle) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 子要素を持つメニューアイテムの+ボタン */
:where(.sp-header-001__menu .menu-item-has-children > a::after),
:where(.sp-header-001__menu .has-submenu > a::after) {
  content: "+";
  position: absolute;
  right: var(--wp--preset--spacing--lg, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--2-xl, 2.4rem);
  font-weight: var(--wp--custom--font-weight--light, 300);
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--wp--custom--transition--duration--fast, 150ms)
    var(--wp--custom--transition--timing--ease-out);
}

/* サブメニュー開いた時の+を-に変更 */
:where(
    .sp-header-001__submenu-toggle:checked + .menu-item-has-children > a::after
  ),
:where(.sp-header-001__submenu-toggle:checked + .has-submenu > a::after) {
  content: "-";
  transform: translateY(-50%) rotate(180deg);
}

/* サブメニュー */
:where(.sp-header-001__menu .sub-menu) {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--wp--preset--color--gray-lightest);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wp--custom--transition--duration--base, 300ms)
    var(--wp--custom--transition--timing--ease-out);
}

/* サブメニューの表示 */
:where(.sp-header-001__submenu-toggle:checked ~ .sub-menu) {
  max-height: 100vh;
}

/* サブメニューアイテム */
:where(.sp-header-001__menu .sub-menu li) {
  margin: 0;
}

:where(.sp-header-001__menu .sub-menu a) {
  padding-left: var(--wp--preset--spacing--3-xl, 5rem);
  font-size: var(--wp--preset--font-size--base, 1.6rem);
  font-weight: var(--wp--custom--font-weight--normal, 400);
  border-bottom-color: var(--wp--preset--color--gray-light);
}

/* メニュー開いた時の背景オーバーレイ */
:where(.sp-header-001__overlay) {
  position: fixed;
  top: 6rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--wp--custom--overlay--dark--5, rgba(0, 0, 0, 0.5));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out),
    visibility var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out);
  z-index: var(--wp--custom--z-index--backdrop, 1040);
}

:where(.sp-header-001__menu-toggle:checked ~ .sp-header-001__overlay) {
  opacity: 1;
  visibility: visible;
}

/* スクロール時にbodyをロック */
@media (max-width: 768px) {
  body.menu-is-open {
    overflow: hidden;
  }
}

:where(.sp-header-001__info-area) {
  padding: 0 var(--wp--preset--spacing--base);
  margin: var(--wp--preset--spacing--3-xl) 0;
}