/* ヘッダー右上のメニュー。LP（Layout）とコラム（ContentLayout）の両方が
   このファイルだけを読む。2箇所に書くとズレるので必ずここを直す。 */
/* ==========================================================
   2026-09-17: ヘッダー右上のメニュー（他LPへの導線）
   参考 https://nurse-career.biz/cp001/ のヘッダー。

   .nlp-header の体裁は面によって違う（メインLP=中央揃え／職種LPは
   proto.css で左揃え）。flexにすると中央揃えが壊れるので、ボタンと
   パネルは position:absolute で右上に置く＝どちらの面も崩さない。

   ボタンの当たり判定は44x44を確保する（SPのUI検査の下限。参考サイトは
   24x18しかなく、指で押しにくい）。見た目の線は中央に24x2で描く。
   ========================================================== */
/* ヘッダーは高さ30pxしかなく、44pxのボタンが上へ7pxはみ出していた（実測）。
   ヘッダーの高さは元のまま（padding 6px + ロゴ18px = 30px）にして、ボタンの
   当たり判定44pxは疑似要素を下へ広げて確保する（下はFV画像でリンクが無い）。
   flexは縦中央を取るためだけに使う。text-align は flex では効かないので、
   左揃えにしている面（proto.css）側で justify-content を上書きしている。
   右側はボタンぶんの余白を確保してロゴと重ならないようにする。 */
#nlp .nlp-header {
  position:relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding-right:44px !important;
}

.nlp-menu-btn {
  position:absolute !important; top:50% !important; right:6px !important;
  transform:translateY(-50%) !important;
  /* 見た目はヘッダー(30px)に収まる大きさ。タップ先44pxは下の ::before で確保する */
  width:28px !important; height:26px !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  background:transparent !important; cursor:pointer !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:5px !important; z-index:30 !important;
  -webkit-appearance:none !important; appearance:none !important;
}
/* 当たり判定だけを44x44に広げる（見た目は変えない）。上はヘッダーの外に
   出せないので下へ広げる。重なる先はFV画像でリンクが無いのでタップを奪わない。 */
.nlp-menu-btn::before {
  content:"" !important; position:absolute !important;
  /* 2026-09-20: 右へ -9px はみ出させると、ボタンがヘッダー右端から6pxの位置に
     いるため当たり判定が画面の外へ3px出て、**全ページでSPに横スクロールが出る**
     （実測：この擬似要素を消すと scrollWidth 378 → 375）。
     当たり判定の幅46pxは変えず、はみ出す方向を左だけにする。 */
  left:-18px !important; right:0 !important; top:-2px !important; bottom:-16px !important;
}
.nlp-menu-btn span {
  display:block !important; width:24px !important; height:2px !important;
  background:#e85d8a !important; border-radius:2px !important;
  transition:transform .22s ease, opacity .18s ease !important;
}
/* 開いているときは×にする */
.nlp-menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg) !important; }
.nlp-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0 !important; }
.nlp-menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) !important; }

/* --- 開いたあと：右から入る全高ドロワー（参考サイトの型） --------------
   幅は参考サイトと同じ323px相当（画面375pxに対し左52pxをオーバーレイに残す）。
   #nlp に overflow-x:hidden があるが、fixed の包含ブロックはビューポートなので
   クリップされない（transform/filterが無いため）。 */
.nlp-menu-panel {
  position:fixed !important; top:0 !important; right:0 !important;
  /* 高さは中身ぶんだけ（bottom:0 で全高にすると項目の下に白い余白が残る／
     2026-09-17 指示）。項目が増えて画面を超えたときだけスクロールさせる。 */
  bottom:auto !important; height:auto !important; max-height:100vh !important;
  width:323px !important; max-width:86vw !important;
  background:#fff !important; z-index:2147483000 !important;
  box-shadow:-6px 4px 20px rgba(80,44,60,.22) !important;
  overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
  padding:0 !important; margin:0 !important;
  text-align:left !important; line-height:1.5 !important;
  border:0 !important; border-radius:0 0 0 12px !important;
}
/* 最後の項目の罫線は不要（パネルの下端と重なって二重線に見える） */
.nlp-menu-panel li:last-child { border-bottom:0 !important; }
/* 見出し行（薄いピンク地・42px）＋右端の×ボタン */
.nlp-menu-hd {
  display:flex !important; align-items:stretch !important;
  background:#fdf1f5 !important; border-bottom:1px solid #f0d5e0 !important;
  position:sticky !important; top:0 !important; z-index:2 !important;
}
.nlp-menu-ttl {
  flex:1 1 auto !important; margin:0 !important; padding:10px 12px !important;
  font-size:15px !important; font-weight:800 !important; color:#21303d !important;
  display:flex !important; align-items:center !important; gap:7px !important;
}
.nlp-menu-close {
  flex:0 0 auto !important; width:48px !important; min-height:48px !important;
  border:0 !important; padding:0 !important; cursor:pointer !important;
  background:#4a4a4a !important; color:#fff !important;
  font-size:19px !important; line-height:1 !important;
  -webkit-appearance:none !important; appearance:none !important;
}
.nlp-menu-panel ul { list-style:none !important; margin:0 !important; padding:0 !important; }
.nlp-menu-panel li { margin:0 !important; border-bottom:1px solid #eee2e8 !important; }
.nlp-menu-panel a {
  display:flex !important; align-items:center !important; gap:10px !important;
  min-height:48px !important; padding:10px 32px 10px 14px !important;
  position:relative !important;
  background:#fff !important; color:#21303d !important;
  font-size:14px !important; font-weight:700 !important;
  text-decoration:none !important; border-radius:0 !important;
}
.nlp-menu-ic {
  flex:0 0 22px !important; width:22px !important; text-align:center !important;
  font-size:16px !important; line-height:1 !important;
}
.nlp-menu-tx { flex:1 1 auto !important; }
/* 右端の矢印（参考サイトと同じ位置・色はサイトのピンク） */
.nlp-menu-panel a::after {
  content:"" !important; position:absolute !important; right:14px !important;
  top:50% !important; width:7px !important; height:7px !important;
  border-right:2px solid #e85d8a !important; border-top:2px solid #e85d8a !important;
  transform:translateY(-50%) rotate(45deg) !important;
}
.nlp-menu-panel a:hover { background:#fff7fa !important; }
/* 現在開いているページは押せないようにして、どこにいるか分かるようにする */
.nlp-menu-panel a[aria-current="page"] {
  background:#fdf1f5 !important; color:#c2416c !important; pointer-events:none !important;
}
.nlp-menu-panel a[aria-current="page"]::after { display:none !important; }
/* 画面をふさぐオーバーレイ（外側タップで閉じる） */
.nlp-menu-overlay {
  position:fixed !important; inset:0 !important; z-index:2147482999 !important;
  background:rgba(0,0,0,.5) !important; border:0 !important; padding:0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .nlp-menu-btn span { transition:none !important; }}