/* components/header.css — グローバルヘッダー（Figma: 【追加】Header 228:13378）
   オフホワイト紙テクスチャのピル型ナビ＋茶アウトライン。
   「ippoの療育」「お問い合わせ」はドロップダウン付き。
   モバイルファースト：基底＝ハンバーガー開閉、min-width:1201px で横並びバー。 */

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease;
}
/* スクロール後：ぼかしを効かせた半透明の白背景（JSで is-scrolled を付与）。 */
.c-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-gray-light);
}
.c-header__inner {
  position: relative;
  z-index: 2; /* SPメニューパネル（c-spnav z-index:1）より前面。ロゴ・×を常にタップ可能に。 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

/* ロゴ（積み木モチーフ ippo） */
.c-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.c-header__logo img {
  display: block;
  width: 84px;
  height: auto;
}

/* ハンバーガー（SP）。min-width:1201px で非表示にする */
.c-header__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-40);
  height: var(--space-40);
  padding: 0;
  border: 1.5px solid var(--color-brown-text);
  border-radius: var(--radius-pill);
  background: var(--color-bg-offwhite);
  color: var(--color-brown-text);
  cursor: pointer;
}
.c-header__toggle-bar,
.c-header__toggle-bar::before,
.c-header__toggle-bar::after {
  content: "";
  display: block;
  width: var(--space-20);
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.c-header__toggle-bar {
  position: relative;
}
.c-header__toggle-bar::before { position: absolute; top: -6px; left: 0; }
.c-header__toggle-bar::after  { position: absolute; top:  6px; left: 0; }
/* 開いた状態は×に */
.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar { background: transparent; }
.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar::before { top: 0; transform: rotate(45deg); }
.c-header__toggle[aria-expanded="true"] .c-header__toggle-bar::after  { top: 0; transform: rotate(-45deg); }

/* メニュー開閉中はヘッダーバーをオフホワイト紙地に（Figma 76:30142）。
   開いている間は背景スクロールをロック。 */
.c-header.is-nav-open {
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  /* スクロール時の is-scrolled が付与する backdrop-filter を打ち消す。
     backdrop-filter（none以外）は position:fixed 子孫の包含ブロックを作るため、
     これが残ると全画面パネル c-spnav の fixed 基準がビューポートでなく
     薄いヘッダーバーになり、bottom:0 が即解決して高さ0＝非表示になる。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.is-nav-locked { overflow: hidden; }

/* PCグローバルナビ（ピル型バー）。SPでは非表示にし、SPは c-spnav が担う。 */
.c-header__nav { display: none; }

.c-gnav {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

/* ピル型リンク（紙テクスチャ＋茶アウトライン） */
.c-gnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  padding: var(--space-4) var(--space-24);
  border: 1.5px solid var(--color-brown-text);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  color: var(--color-brown-text);
  font-family: inherit;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.c-gnav__link:hover,
.c-gnav__link:focus-visible {
  filter: brightness(0.96);
}
/* ドロップダウンの三角（右向き→開いたら下向き） */
.c-gnav__caret {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.c-gnav__item--has-sub:hover .c-gnav__caret,
.c-gnav__item--has-sub:focus-within .c-gnav__caret,
.c-gnav__toggle[aria-expanded="true"] .c-gnav__caret { transform: rotate(90deg); }

/* サブメニュー */
.c-gnav__sub {
  list-style: none;
  margin: 0;
  padding: var(--space-8) 0 var(--space-8) var(--space-24);
  display: none;
  flex-direction: column;
  gap: var(--space-8);
}
.c-gnav__toggle[aria-expanded="true"] + .c-gnav__sub { display: flex; }
.c-gnav__sub a {
  color: var(--color-brown-text);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-decoration: none;
}
.c-gnav__sub a:hover,
.c-gnav__sub a:focus-visible { text-decoration: underline; }

/* =====================================================================
   SP 全画面メニューパネル（Figma 76:30141）
   ヘッダーバーの下に固定表示。黄土色（ochre 60% over white）の紙地に
   「お問い合わせ」2カード／メニューリスト／採用情報カードを縦並び。
   ===================================================================== */
.c-spnav {
  position: fixed;
  top: var(--ic-header-h, 76px);
  left: 0;
  right: 0;
  bottom: 0;
  /* c-spnav は header の外（兄弟）に出したため、ルートのスタッキングで重なり順が決まる。
     ヘッダー（.c-header z-index:100）より下＝ロゴ・×を常にタップ可能にしつつ、
     フローティング問い合わせ（z-index:90）や本文（z-index:3〜4 等）より前面に出して
     全画面パネルが確実に最前面で覆うようにする。 */
  z-index: 99;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: color-mix(in srgb, var(--color-ochre) 60%, var(--color-white));
  /* 開閉はフェード（opacity/visibility）＋軽いフェードアップ。
     閉時は visibility:hidden で操作不可に。 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
}
.c-spnav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Figma 76:30141：紙テクスチャ（Adobe Stock）を 15%・乗算で重ねて黄土色の紙地に。 */
.c-spnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../images/common/spnav-bg.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 750.7px 709.4px;
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.c-spnav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-16);
}

.c-spnav__section {
  /* base.css の section{margin-block:48px} を打ち消す（縦間隔は inner の gap が担う）。 */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.c-spnav__label {
  margin: 0;
  color: var(--color-brown-text);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

/* --- お問い合わせ 2カード --- */
.c-spnav__contact {
  display: flex;
  gap: var(--space-12);
}
.c-spnav__contact-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  /* Figma 76:30193：カード自体は無padding・無gap。間隔はアイコン枠の p-20 が担う。 */
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  color: var(--color-brown-text);
  overflow: hidden;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.c-spnav__contact-card:hover,
.c-spnav__contact-card:focus-visible { filter: brightness(0.97); }
.c-spnav__contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20); /* Figma 76:30194 p-20 */
}
.c-spnav__contact-icon img { display: block; width: var(--space-40); height: auto; }
.c-spnav__contact-text {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
}

/* --- メニューリスト（1px区切りの白カード／ippoの療育はアコーディオン） --- */
.c-spnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.c-spnav__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-24);
  background-color: var(--color-white);
  color: var(--color-brown-text);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);
  text-decoration: none;
}
.c-spnav__row:hover,
.c-spnav__row:focus-visible { filter: brightness(0.97); }

/* アコーディオン（details/summary・JSなし） */
.c-spnav__acc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.c-spnav__row--acc {
  cursor: pointer;
  list-style: none;
}
.c-spnav__row--acc::-webkit-details-marker { display: none; }
.c-spnav__acc-caret {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.c-spnav__acc[open] .c-spnav__acc-caret { transform: rotate(90deg); }

/* サブ項目：オフホワイト紙地＋左インデント */
.c-spnav__row--sub {
  padding-left: var(--space-48);
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  font-weight: var(--font-weight-semibold);
}

/* =====================================================================
   デスクトップ（横並びバー）
   ===================================================================== */
@media (min-width: 1201px) {
  .c-header__toggle { display: none; }
  .c-spnav { display: none !important; }

  .c-header__nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    border-bottom: 0;
    padding: 0;
  }

  .c-gnav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }
  .c-gnav__item--has-sub { position: relative; }

  /* デスクトップではサブメニューを絶対配置のドロップダウンに */
  .c-gnav__sub {
    position: absolute;
    top: calc(100% + var(--space-8));
    left: 0;
    z-index: 50;
    display: flex;
    padding: var(--space-16) var(--space-24);
    border: 1px solid var(--color-brown-text);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-offwhite);
    background-image: url("../../images/common/tex-offwhite.webp");
    background-repeat: repeat;
    background-position: top left;
    background-size: 346.8px 327.8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events: none;
  }
  /* トリガーとサブメニューの隙間を埋める透明ブリッジ。
     サブメニューは li の子なので、ここにカーソルがあれば :hover が維持され、
     隙間を横切る途中で閉じてしまうのを防ぐ。 */
  .c-gnav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--space-8));
    height: var(--space-8);
  }
  .c-gnav__item--has-sub:hover .c-gnav__sub,
  .c-gnav__item--has-sub:focus-within .c-gnav__sub,
  .c-gnav__toggle[aria-expanded="true"] + .c-gnav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* お問い合わせ（右端の項目）は右揃えで開く。テキストは左揃えのまま、
     パネル右端をトリガー右端に合わせて画面外へはみ出させない。 */
  #ic-submenu-contact {
    left: auto;
    right: 0;
  }
}

@media (max-width: 768px) {
  .c-header__inner {
    padding: var(--space-8) var(--space-16)
  }
}