@charset "UTF-8";
/* =========================================================
   FC募集LP のナビ: 追加分 + 納品物のバグ修正

   納品物のナビは4項目すべてが単なるリンクだったが、
   メインサイトのグローバルナビに合わせて「FC募集」だけを
   ブランド3件のサブメニューにした（マークアップは tools/convert_lp.py が生成）。

   LP は SCSS を再ビルドできない（ビルド設定が未納品）ため、
   追加分の CSS はこのファイルに持つ。LP の CSS より後に読み込む。

   サイズは LP のトークン（--sz-N）をそのまま使い、
   ブレイクポイントも LP に合わせて 992px にする。
   ========================================================= */

/* ---------------------------------------------------------
   【納品物のバグ修正】ドロワーのリンクがクリックできない

   症状: ハンバーガーを開いてもメニュー内のリンクが一切反応せず、
         どこを押してもドロワーが閉じるだけになる。

   原因: .drawer-nav（z-index 102）は .header の内側にあるが、
         その .header が .drawer-open 時に z-index:101 を持つため
         スタッキングコンテキストを作り、nav の 102 はその内部でしか効かない。
         一方 .drawer-overlay（z-index 101・背景 transparent）は body 直下で
         DOM 順が header より後。z-index が同値なら後勝ちで overlay が上に来るため、
         透明なオーバーレイがドロワー全体を覆っていた。
         overlay は .drawer-toggle を兼ねるので、クリックは「閉じる」に吸われていた。

   対処: 開いている間だけ .header のスタッキングコンテキストを overlay より上に出す。
         ハンバーガー（103）は .header 内部の順序なので閉じる操作は従来どおり効き、
         パネルの外側は overlay のままなので「外側クリックで閉じる」も維持される。

   ※ 納品された静的 index.html でも同じ状態だが、全リンクが href="#" だったため
      表面化していなかった。詳細は lp/freeschool_fc/PATCHES.md
   --------------------------------------------------------- */
.drawer-open .header {
  z-index: 102;
}

/* ---------------------------------------------------------
   ロゴ未入稿の LP（body.lp--no-logo）

   納品物のヘッダーロゴがプレースホルダ画像のままの LP では、
   tools/convert_lp.py がロゴ要素ごと出力しない。
   ただし PC のヘッダーは .header__logo { margin-right: auto } で
   ナビと CTA を右へ押しているため、ロゴを消すと左に寄ってしまう。
   代わりにナビ側で右寄せを維持する。

   ロゴが入稿されたら inc/lp.php の has_logo と
   convert_lp.py の drop_logo を外すだけでこの指定は無効になる。
   --------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .lp--no-logo .header__nav {
    margin-left: auto;
  }
}

/* ---------------------------------------------------------
   ドロワー（SP）: 常時展開のネストリスト

   開閉 JS を足さずに済ませるため、3件は最初から見せる。
   親「FC募集」も子のブランド名も <a> なので、書体・サイズ・色は
   LP ごとの .drawer-menu__item a（フリースクール --sz-32、産後ケア・B型 --sz-36 等）を
   そのまま受ける。ここで font を指定し直すと LP によって他の項目とズレるので触らない。
   階層は先頭の「―」だけで示す。
   --------------------------------------------------------- */
.drawer-menu__parent {
  cursor: default;
}

.drawer-menu__sublist {
  display: flex;
  flex-direction: column;
  gap: var(--sz-18); /* 3本とも .drawer-menu__list の gap と同じ値。項目間隔を揃える */
  margin: var(--sz-18) 0 0;
  padding: 0;
  list-style: none;
}

/* 子項目であることを示す控えめな指標 */
.drawer-menu__sublist a::before {
  content: "―";
  margin-right: var(--sz-8);
  opacity: 0.5;
}

/* ---------------------------------------------------------
   ヘッダー（PC ≥992px）: ホバー / キーボードフォーカスで開くドロップダウン

   JS を足さないので :hover と :focus-within だけで制御する。
   親の <span> に tabindex="0" が付いているのでキーボードでも開ける
   （フォーカス → :focus-within で表示 → Tab で子リンクへ）。
   aria-expanded は JS 無しでは正しく保てないため付けていない。
   --------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .header__menu-item--has-sub {
    position: relative;
  }

  .header__menu-parent {
    display: block;
    cursor: pointer;
  }

  .header__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: var(--sz-12) 0;
    list-style: none;
    background: #fff;
    border-radius: var(--sz-8);
    box-shadow: 0 var(--sz-4) var(--sz-16) rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
  }

  .header__menu-item--has-sub:hover .header__submenu,
  .header__menu-item--has-sub:focus-within .header__submenu {
    opacity: 1;
    visibility: visible;
  }

  /* 書体・色は LP の .header__nav-item a / .header__menu-item a を受ける（上書きしない） */
  .header__submenu a {
    display: block;
    padding: var(--sz-10) var(--sz-20);
    line-height: 1.4;
    white-space: nowrap;
  }

  .header__submenu a:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}