/* =============================================
   Header CSS
   サイバーレジデンシャル株式会社
   ============================================= */

/* ── Variables ─────────────────────────────── */
:root {
  --header-height-pc:      90px;
  --header-height-sp:      60px;
  --header-bg:             #ffffff;
  --header-border:         #E8879A;

  --header-logo-w:         104px;
  --header-logo-h:         70px;
  --header-logo-w-sp:      72px;
  --header-logo-h-sp:      48px;

  --header-nav-color:      #5C3D2E;
  --header-nav-hover:      #E8879A;
  --header-nav-separator:  #d0d0d0;
  --header-nav-font-size:  0.9375rem; /* 15px */

  --header-btn-bg:         #E8879A;
  --header-btn-color:      #ffffff;
  --header-btn-radius:     100px;
  --header-btn-font-size:  0.9375rem;
  --header-btn-px:         32px;
  --header-btn-py:         12px;

  --header-hamburger-color: #E8879A;
  --header-hamburger-size:  24px;

  --header-z:              1000;
  --drawer-z:              999;
  --overlay-z:             998;

  --drawer-width:          100%;
  --drawer-bg:             #ffffff;
  --drawer-nav-color:      #5C3D2E;
  --drawer-nav-border:     #f0f0f0;

  --transition-header:     0.25s ease;

  /* WordPress 管理バー高さ (ログイン時) */
  --adminbar-h-pc: 32px;  /* 783px 以上 */
  --adminbar-h-sp: 46px;  /* 782px 以下 */
}

/* ── Reset ──────────────────────────────────── */
.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

/* ── Site Header ────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z);
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  height: var(--header-height-pc);
  display: flex;
  align-items: center;
}

/* ── Inner Wrapper ──────────────────────────── */
.header-inner {
  width: 100%;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 32px;
}

/* ── Right Group（Nav + CTA） ───────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Logo ───────────────────────────────────── */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  outline-offset: 4px;
}


/* Logo image */
.header-logo img {
  width: var(--header-logo-w);
  height: var(--header-logo-h);
  object-fit: contain;
  display: block;
}

/* ── Global Nav ─────────────────────────────── */
.header-nav {
  display: flex;
  align-items: center;
}

.header-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* セパレーター（| 区切り） */
.header-nav ul li {
  display: flex;
  align-items: center;
}

.header-nav ul li + li::before {
  content: '';
  display: block;
  width: 1px;
  height: 1em;
  background-color: var(--header-nav-separator);
  margin-inline: 4px;
  flex-shrink: 0;
}

.header-nav ul li a {
  display: block;
  padding: 8px 16px;
  font-size: var(--header-nav-font-size);
  font-weight: 500;
  color: var(--header-nav-color);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-header);
  position: relative;
}

.header-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background-color: var(--header-nav-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-header);
  border-radius: 2px;
}

.header-nav ul li a:hover,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current-menu-ancestor > a {
  color: var(--header-nav-hover);
  text-decoration: none;
}

.header-nav ul li a:hover::after,
.header-nav ul li.current-menu-item > a::after,
.header-nav ul li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* ── CTA Button ─────────────────────────────── */
.header-cta {
  flex-shrink: 0;
}

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--header-btn-py) var(--header-btn-px);
  background-color: var(--header-btn-bg);
  color: var(--header-btn-color);
  font-size: var(--header-btn-font-size);
  font-weight: 700;
  border-radius: var(--header-btn-radius);
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--header-btn-bg);
  transition:
    background-color var(--transition-header),
    color var(--transition-header),
    border-color var(--transition-header);
  line-height: 1;
}

.header-cta-btn:hover {
  background-color: transparent;
  color: var(--header-btn-bg);
  text-decoration: none;
}

/* ── Hamburger Button ───────────────────────── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--header-hamburger-color);
  outline-offset: 2px;
}

.hamburger-btn .bar {
  display: block;
  width: var(--header-hamburger-size);
  height: 2px;
  background-color: var(--header-hamburger-color);
  border-radius: 2px;
  transition:
    transform var(--transition-header),
    opacity var(--transition-header);
  transform-origin: center;
}

/* Open state */
.hamburger-btn[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── SP Drawer ──────────────────────────────── */
.sp-drawer {
  position: fixed;
  top: var(--header-height-sp);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--drawer-z);
  background-color: var(--drawer-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px 0 40px;
  visibility: hidden;
}

.sp-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Overlay */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--overlay-z);
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer-overlay.is-visible {
  opacity: 1;
}

/* Drawer Nav */
.sp-drawer-nav {
  padding: 8px 0;
}

.sp-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-drawer-nav ul li a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--drawer-nav-color);
  text-decoration: none;
  border-bottom: 1px solid var(--drawer-nav-border);
  transition: color var(--transition-header), background-color var(--transition-header);
}

.sp-drawer-nav ul li a::after {
  content: '›';
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--color-main, #E8879A);
}

.sp-drawer-nav ul li a:hover,
.sp-drawer-nav ul li.current-menu-item > a {
  color: var(--header-nav-hover);
  background-color: #fdf5f7;
  text-decoration: none;
}

/* Drawer CTA */
.sp-drawer-cta {
  padding: 24px 24px 0;
}

.sp-drawer-cta .header-cta-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 1rem;
}

/* ── Spacer（fixed header offset） ─────────── */
.header-spacer {
  height: var(--header-height-pc);
}

/* =============================================
   WordPress 管理バー対応
   body.admin-bar が付与されるときに
   ヘッダー・ドロワーを管理バー分だけ下にずらす
   ============================================= */

/* PC（783px 以上）: 管理バー = 32px */
body.admin-bar .site-header {
  top: var(--adminbar-h-pc);
}

body.admin-bar .sp-drawer {
  top: calc( var(--header-height-pc) + var(--adminbar-h-pc) );
}

body.admin-bar .header-spacer {
  height: var(--header-height-pc);
}

/* SP（782px 以下）: 管理バー = 46px
   ※ WordPress 自身が 782px 以下で adminbar を
      position:fixed → absolute に変更するため top を 0 に戻す */
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: var(--adminbar-h-sp);
  }

  body.admin-bar .sp-drawer {
    top: calc( var(--header-height-sp) + var(--adminbar-h-sp) );
  }

  body.admin-bar .header-spacer {
    height: var(--header-height-sp);
  }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 599px) {
  .site-header {
    height: var(--header-height-sp);
  }

  .header-inner {
    padding-inline: 14px;
    gap: 0;
    justify-content: space-between;
  }

  .header-logo img {
    width: var(--header-logo-w-sp);
    height: var(--header-logo-h-sp);
  }

  .header-right {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .header-spacer {
    height: var(--header-height-sp);
  }
}

/* =============================================
   PC Dropdown Navigation
   ============================================= */

/* ドロップダウンの起点 */
.header-nav__item--dropdown {
  position: relative;
}

/* 矢印アイコン */
.header-nav__arrow {
  display: inline-block;
  font-size: 0.6em;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  transition: transform var(--transition-header);
}

.header-nav__item--dropdown:hover > .header-nav__link .header-nav__arrow,
.header-nav__item--dropdown:focus-within > .header-nav__link .header-nav__arrow {
  transform: rotate(180deg);
}

/* ドロップダウンリスト — デフォルト非表示 */
.header-nav__dropdown {
  width: 100%;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background-color: #fff;
  border: 1px solid var(--header-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 6px 0;
  /* .header-nav ul の flex を上書き */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* 非表示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-header),
    transform var(--transition-header),
    visibility var(--transition-header);
  z-index: 10;
}

/* ホバー / フォーカス時に表示 */
.header-nav__item--dropdown:hover > .header-nav__dropdown,
.header-nav__item--dropdown:focus-within > .header-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ドロップダウン内の li */
.header-nav__dropdown li {
  display: block !important;
  width: 100%;
}

/* ドロップダウン内の区切り線を非表示 */
.header-nav__dropdown li + li::before {
  display: none !important;
}

/* ドロップダウン内リンク */
.header-nav__dropdown li a {
  padding: 10px 20px !important;
  font-size: 0.875rem !important;
  white-space: nowrap;
}

/* ドロップダウン内リンクの下線アニメーションを無効化 */
.header-nav__dropdown li a::after {
  display: none !important;
}

/* =============================================
   SP Drawer Accordion
   ============================================= */

/* アコーディオン行（リンク + トグルボタン） */
.sp-accordion-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--drawer-nav-border);
}

/* アコーディオン行の親リンク */
.sp-accordion-link {
  flex: 1;
  display: flex !important;
  align-items: center;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--drawer-nav-color);
  text-decoration: none;
  border-bottom: none !important; /* .sp-drawer-nav ul li a の border-bottom を打ち消す */
  transition: color var(--transition-header), background-color var(--transition-header);
}

.sp-accordion-link:hover {
  color: var(--header-nav-hover);
  background-color: #fdf5f7;
}

/* .sp-drawer-nav ul li a::after の '›' を非表示 */
.sp-accordion-link::after {
  display: none !important;
}

/* トグルボタン */
.sp-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--drawer-nav-border);
  cursor: pointer;
  color: var(--header-nav-hover);
  font-size: 0.625rem;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-header);
}

.sp-accordion-btn:hover {
  background-color: #fdf5f7;
}

.sp-accordion-btn span {
  display: inline-block;
  transition: transform var(--transition-header);
}

.header-nav__item--dropdown.is-open .sp-accordion-btn span {
  transform: rotate(180deg);
}

/* SPドロワー内サブメニュー — PCの absolute 定義を上書き */
.sp-drawer-nav .header-nav__dropdown {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: #fdf5f7;
  padding: 0 !important;
  /* アコーディオン：折りたたみ */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sp-drawer-nav .header-nav__item--dropdown.is-open .header-nav__dropdown {
  max-height: 300px;
}

/* サブメニューの li */
.sp-drawer-nav .header-nav__dropdown li {
  display: block !important;
}

/* サブメニューのリンク */
.sp-drawer-nav .header-nav__dropdown li a {
  padding: 14px 24px 14px 40px !important;
  font-size: 0.9375rem !important;
  border-bottom: 1px solid var(--drawer-nav-border);
  display: flex !important;
}

/* Tablet (600px〜1023px): ナビを表示しつつ余白を調整 */
@media (min-width: 600px) and (max-width: 1023px) {
  .header-inner {
    gap: 16px;
  }

  .header-right {
    gap: 4px;
  }

  .header-nav ul li a {
    padding: 8px 10px;
    font-size: 0.8125rem; /* 13px */
  }

  .header-nav ul li + li::before {
    margin-inline: 2px;
  }

  .header-cta-btn {
    padding: 10px 18px;
    font-size: 0.8125rem;
  }
}