/* mobile_header.css — スマホ用ハンバーガーメニュー  2026/06/19
   ≤1024px で重なる「資料DL＋お問い合わせ」を隠し、☰→ドロワー(ナビ＋CTA)に集約。
   デスクトップ(≥1025px)は一切変更しない。 */

.mnav-burger { display: none; }
.mnav-panel  { display: none; }

@media (max-width: 1024px) {
  /* JS初期化後のみ既存CTAを隠す（JS失敗時は従来表示のまま＝無劣化） */
  body.mnav-ready #gHeader .btn { display: none !important; }
  #gNavi { display: none !important; }

  /* ヒーローが画面より高いと中央寄せで上にはみ出し、ヘッダーと重なる→スマホは上揃え・高さ自動 */
  .mainVisual {
    height: auto !important; min-height: auto !important; max-height: none !important;
    align-items: flex-start !important;
    padding-top: 92px !important; padding-bottom: 44px !important;
  }
  /* SNS縦バーはスマホでは内容に被るので隠す */
  .sns-sidebar { display: none !important; }

  /* ハンバーガー */
  .mnav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: auto;
    border: none; background: transparent; cursor: pointer;
    position: relative; z-index: 101;   /* パネルより前面に保つ */
  }
  .mnav-burger span {
    display: block; width: 100%; height: 2.5px; border-radius: 2px; background: #fff;
    transition: transform .3s ease, opacity .2s ease, background .3s ease;
  }
  #gHeader.scrolled .mnav-burger span { background: #0a0e27; }
  .mnav-burger.open span { background: #0a0e27 !important; }
  .mnav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .mnav-burger.open span:nth-child(2) { opacity: 0; }
  .mnav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* パネル開放中はヘッダーを白地・濃色ロゴに（透過ヘッダーでロゴが消えるのを防ぐ） */
  #gHeader.mnav-open { background: rgba(255,255,255,.98) !important; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
  #gHeader.mnav-open h1 a { color: var(--skillty-blue-dark, #061988) !important; }
  #gHeader.mnav-open h1 a .logo-w { display: none !important; }
  #gHeader.mnav-open h1 a .logo-c { display: block !important; }

  /* ドロワーパネル（上からスライド） */
  .mnav-panel {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 99;
    background: #fff; box-shadow: 0 16px 40px rgba(10,14,39,.16);
    padding: 76px 22px 26px; max-height: 100vh; overflow-y: auto;
    transform: translateY(-110%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  }
  .mnav-panel.open { transform: translateY(0); }

  .mnav-links a {
    display: block; font-size: 16px; font-weight: 700; color: #0a0e27;
    padding: 15px 6px; border-bottom: 1px solid #eef0f5; text-decoration: none;
  }
  .mnav-links a:active { color: var(--skillty-red, #ee3833); }

  .mnav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .mnav-cta a {
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; padding: 15px; border-radius: 8px; text-decoration: none;
  }
  .mnav-dl { background: #fff; color: var(--skillty-red, #ee3833) !important; border: 1.5px solid var(--skillty-red, #ee3833); }
  .mnav-contact { background: var(--skillty-red, #ee3833); color: #fff !important; box-shadow: 0 8px 20px rgba(238,56,51,.32); }
}