/* ==========================================================================
   c-header — Figma: 🌐 Design「Header」(24496:18001)
     PC: プロパティ1=デフォルト (25169:42249) / Header/Menu1・Menu2 / Header/Search
     SP: SP_header_close (24488:17560) / SP_header_open (24496:17998) / バリアント6 (25140:122069)
   ========================================================================== */

.c-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-bg-base);
}

/* ---- 上部バー（事業会社向けページ / パートナー / 管理画面 / 検索） ---- */
.c-header__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-24);
  /* 背景は幅いっぱい、中身は l-container と同じ幅（コンテンツ幅 + 左右 gutter）に収める */
  padding-block: var(--space-8);
  padding-inline: max(var(--layout-gutter), calc((100% - var(--layout-container-max)) / 2));
  background-color: var(--color-purple-400); /* semantic に該当なし（Figma: purple/400） */
  color: var(--color-text-inverse);
}

.c-header__sub-links {
  display: flex;
  align-items: center;
}

.c-header__sub-item + .c-header__sub-item {
  border-left: 1px solid var(--color-gray-200); /* Figma: 区切り線 gray/200 */
}

.c-header__sub-link {
  display: block;
  padding: 2px 12px; /* Figma 固有寸法（space トークンに該当なし） */
  white-space: nowrap;
}

.c-header__sub-link--dashboard {
  padding: 1px 0; /* Figma: 高さ 24px の行に 22px のテキスト */
}

.c-header__sub-link:hover {
  text-decoration: underline;
}

.c-header__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-inverse);
}

.c-header__search-toggle-icon {
  width: 22px;  /* アイコンサイズ */
  height: 22px;
}

/* ---- メイン行（ロゴ / ナビ / CTA） ---- */
.c-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 83px; /* Figma 固有寸法: ヘッダー全体 125px − 上部バー 42px */
  /* l-container と同じ幅（コンテンツ幅 + 左右 gutter）に収める */
  padding-inline: max(var(--layout-gutter), calc((100% - var(--layout-container-max)) / 2));
}

.c-header__logo {
  flex-shrink: 0;
}

.c-header__logo-image {
  width: 124px; /* ロゴ寸法（Figma） */
  height: auto;
}

.c-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.c-header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.c-header__menu-link,
.c-header__menu-button {
  display: flex;
  align-items: center;
  color: var(--color-text-base);
  white-space: nowrap;
}

.c-header__menu-link:hover,
.c-header__menu-button:hover,
.c-header__menu-button[aria-expanded="true"] {
  color: var(--color-text-brand);
}

.c-header__chevron {
  width: 24px; /* アイコンサイズ */
  height: 24px;
  color: var(--color-icon-default);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.c-header__menu-button[aria-expanded="true"] .c-header__chevron {
  transform: rotate(-90deg);
}

/* ---- ドロップダウン（Header/Menu1・Menu2） ---- */
.c-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-32) var(--space-96);
  background-color: var(--color-bg-subtle);
}

.c-header__dropdown[hidden] {
  display: none;
}

.c-header__dropdown-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32) var(--space-64);
}

.c-header__dropdown-item {
  width: 373px; /* Figma 固有寸法 */
}

.c-header__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 2px solid var(--color-gray-200); /* Figma: 線幅 2px / gray/200 */
  color: var(--color-text-base);
}

.c-header__dropdown-link:hover {
  border-bottom-color: var(--color-border-brand);
}

.c-header__dropdown-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.c-header__dropdown-arrow {
  flex-shrink: 0;
  width: 24px; /* アイコンサイズ */
  height: 24px;
  color: var(--color-text-base);
  transition: transform 0.2s ease;
}

.c-header__dropdown-link:hover .c-header__dropdown-arrow {
  transform: translateX(4px); /* ホバー時の移動量（Figma に指定なし・実装判断） */
}

/* ---- CTA ボタン ---- */
.c-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.c-header__cta-button {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-24);
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.c-header__cta-button--secondary {
  background-color: var(--color-purple-200); /* semantic に該当なし（Figma: purple/200） */
}

/* ホバー: 他のボタンと同じ背景 bg/inverse（#504C57）・文字 text/inverse */
.c-header__cta-button:hover,
.c-header__cta-button:focus-visible {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.c-header__cta-icon {
  width: 20px; /* アイコンサイズ */
  height: 20px;
  color: var(--color-icon-inverse);
}

/* ---- サイト内検索パネル（Header/Search） ---- */
.c-header__search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--space-32);
  padding-inline: var(--layout-gutter);
  background-color: var(--color-purple-500); /* semantic に該当なし（Figma: purple/500） */
}

.c-header__search[hidden] {
  display: none;
}

.c-header__search-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: var(--layout-container-max);
  margin-inline: auto;
}

.c-header__search-title {
  color: var(--color-text-inverse);
}

.c-header__search-form {
  display: flex;
  gap: var(--space-16);
}

.c-header__search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-bg-base);
}

.c-header__search-field:focus-within {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.c-header__search-field-icon {
  flex-shrink: 0;
  width: 32px; /* アイコン枠 32px（Figma） */
  height: 27px;
  color: var(--color-icon-strong);
}

.c-header__search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-base);
}

.c-header__search-input::placeholder {
  color: var(--color-text-muted);
}

.c-header__search-input:focus {
  outline: none; /* 枠側（.c-header__search-field:focus-within）でフォーカスを表示 */
}

.c-header__search-submit {
  flex-shrink: 0;
  height: 64px; /* Figma 固有寸法 */
  padding-inline: var(--space-16);
  border: 2px solid var(--color-border-brand); /* Figma: 線幅 2px */
  background-color: var(--color-bg-base);
  color: var(--color-text-brand);
  white-space: nowrap;
}

.c-header__search-submit:hover,
.c-header__search-submit:focus-visible {
  border-color: var(--color-bg-inverse);
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* ---- SP 専用要素（PC では非表示） ---- */
.c-header__drawer-open,
.c-header__drawer {
  display: none;
}

/* ==========================================================================
   Tablet（PC デザインを縮めて調整）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1339px) {

  .c-header__nav,
  .c-header__menu {
    gap: var(--space-16);
  }

  .c-header__cta-button {
    padding-inline: var(--space-16);
  }

  .c-header__dropdown {
    padding-inline: var(--space-48);
  }
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 1023px) {

  .c-header {
    border-bottom: 1px solid var(--color-border-default);
  }

  .c-header__bar,
  .c-header__nav,
  .c-header__search {
    display: none;
  }

  .c-header__main {
    align-items: flex-start;
    min-height: 85px; /* Figma 固有寸法: SP ヘッダー 86px − 下線 1px */
    padding: var(--space-24) var(--space-24) 0;
  }

  .c-header__logo-image {
    width: 122px; /* ロゴ寸法（Figma SP） */
  }

  .c-header__drawer-open {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;  /* Figma 固有寸法 */
    height: 50px;
    background-color: var(--color-icon-strong);
    color: var(--color-icon-inverse);
  }

  .c-header__drawer-open-icon {
    width: 24px; /* アイコンサイズ */
    height: 14px;
  }

  /* ---- ドロワー（SP_header_open） ---- */
  .is-drawer-open {
    overflow: hidden; /* body: ドロワー表示中は背面をスクロールさせない */
  }

  .c-header__drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
  }

  .c-header__drawer[hidden] {
    display: none;
  }

  .c-header__drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 86px; /* Figma 固有寸法 */
    padding: var(--space-24) var(--space-24) 0;
  }

  .c-header__drawer-logo-image {
    width: 122px; /* ロゴ寸法（Figma SP） */
    height: auto;
  }

  .c-header__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;  /* Figma 固有寸法 */
    height: 50px;
    color: var(--color-icon-inverse);
  }

  .c-header__drawer-close-icon {
    width: 40px; /* アイコンサイズ */
    height: 40px;
  }

  .c-header__drawer-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: 12px var(--space-24) 36px; /* Figma 固有寸法: 上 12px / 下 36px（space トークンに該当なし） */
  }

  .c-header__drawer-sub-links {
    display: flex;
    align-items: center;
  }

  .c-header__drawer-sub-item + .c-header__drawer-sub-item {
    border-left: 1px solid var(--color-gray-200); /* Figma: 区切り線 gray/200 */
  }

  .c-header__drawer-sub-link {
    display: block;
    padding: 2px 12px; /* Figma 固有寸法（space トークンに該当なし） */
    white-space: nowrap;
  }

  .c-header__drawer-search {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Figma 固有寸法（space トークンに該当なし） */
  }

  .c-header__drawer-search-field {
    display: flex;
    align-items: center;
    gap: 6px; /* Figma 固有寸法（space トークンに該当なし） */
    padding: 12px; /* Figma 固有寸法（space トークンに該当なし） */
    background-color: var(--color-bg-base);
  }

  .c-header__drawer-search-field:focus-within {
    outline: 2px solid var(--color-border-brand);
    outline-offset: 2px;
  }

  .c-header__drawer-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-base);
  }

  .c-header__drawer-search-input::placeholder {
    color: var(--color-text-placeholder);
  }

  .c-header__drawer-search-input:focus {
    outline: none; /* 枠側（:focus-within）でフォーカスを表示 */
  }

  .c-header__drawer-search-submit {
    display: flex;
    color: var(--color-icon-strong);
  }

  .c-header__drawer-search-icon {
    width: 22px; /* アイコンサイズ */
    height: 22px;
  }

  .c-header__drawer-item {
    border-top: 1px solid var(--color-gray-500); /* Figma: gray/500 */
  }

  .c-header__drawer-item:last-child {
    border-bottom: 1px solid var(--color-gray-500);
  }

  .c-header__drawer-toggle,
  .c-header__drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px; /* Figma 固有寸法（space トークンに該当なし） */
    width: 100%;
    padding-block: 12px; /* Figma 固有寸法（space トークンに該当なし） */
    color: var(--color-text-inverse);
    text-align: left;
  }

  .c-header__drawer-toggle-icon {
    flex-shrink: 0;
    width: 24px; /* アイコンサイズ */
    height: 24px;
    color: var(--color-icon-inverse);
  }

  .c-header__drawer-toggle[aria-expanded="false"] .c-header__drawer-toggle-icon--minus,
  .c-header__drawer-toggle[aria-expanded="true"] .c-header__drawer-toggle-icon--plus {
    display: none;
  }

  .c-header__drawer-link-icon {
    flex-shrink: 0;
    width: 10px; /* アイコンサイズ（24px 枠内に 9.3×8px） */
    height: 8px;
    margin-right: 7px; /* 24px 枠の右端に合わせる */
    color: var(--color-icon-inverse);
  }

  .c-header__drawer-sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: 12px; /* Figma 固有寸法（space トークンに該当なし） */
  }

  .c-header__drawer-sub[hidden] {
    display: none;
  }

  .c-header__drawer-sub-menu-link {
    display: block;
    color: var(--color-text-inverse);
  }

  .c-header__drawer-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .c-header__drawer-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-24);
    background-color: var(--color-bg-brand);
    color: var(--color-text-inverse);
  }

  .c-header__drawer-cta-button--secondary {
    background-color: var(--color-purple-200); /* semantic に該当なし（Figma: purple/200） */
  }

  .c-header__drawer-cta-icon {
    width: 20px; /* アイコンサイズ */
    height: 20px;
    color: var(--color-icon-inverse);
  }

  .c-header__drawer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px var(--space-24); /* Figma 固有寸法: 行間 12px */
    max-width: 280px; /* Figma: 2 項目 + 1 項目の折り返し */
  }

  .c-header__drawer-meta-link {
    display: flex;
    align-items: center;
    gap: 6px; /* Figma 固有寸法（space トークンに該当なし） */
    color: var(--color-text-inverse);
  }

  .c-header__drawer-meta-icon {
    width: 10px; /* アイコンサイズ */
    height: 10px;
  }

  .c-header__drawer-company {
    width: 114px; /* ロゴ寸法（Figma） */
  }
}

/* ==========================================================================
   追従（スクロールしても画面上部に固定）
   ヘッダーはテンプレートパーツの div（高さ = ヘッダー）の中にあるため、その div を sticky にする。
   ログイン中は管理バーの下に止める（管理バーが固定されない 600px 以下は画面上端）。
   ページ内リンクで飛んだ見出しがヘッダーに隠れないよう、ヘッダーの高さ分だけスクロール位置をずらす
   ========================================================================== */
.wp-block-template-part:has(> .c-header) {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

html {
  scroll-padding-top: calc(125px + var(--wp-admin--admin-bar--height, 0px)); /* Figma 固有寸法: PC のヘッダーの高さ */
}

@media (max-width: 1023px) {

  html {
    scroll-padding-top: calc(86px + var(--wp-admin--admin-bar--height, 0px)); /* Figma 固有寸法: SP のヘッダーの高さ */
  }
}

@media (max-width: 600px) {

  .wp-block-template-part:has(> .c-header) {
    top: 0;
  }

  html {
    scroll-padding-top: 86px;
  }
}