/* ══════════════════════════════════════════════════════════════════════════
   公開ページ共通 SPナビ（ハンバーガー＋ドロワー）
   [デザイン部隊 確定 2026-07-13] 会社HPのSPナビは **ハンバーガー＋ドロワーが正**。
   同じ作法を、同一のグローバルナビを持つ公開ページ全体に適用する。

   確定仕様（そのままの値）:
     右スライドイン / 幅 min(84vw,360px) / 背景 #f3efe6 /
     オーバーレイ rgba(20,20,18,.45) /
     開閉 transform .28s cubic-bezier(.22,.61,.36,1) /
     閉じる× は右上 44px角 / リンクは縦積み font-size:17px・padding:16px 0

   ⚠ フェイルセーフ: 既存のナビリンクを隠すのは **body.has-spnav が付いた時だけ**。
      このクラスは spnav.js がドロワーの構築に成功した時にのみ付く。
      → JSが落ちてもナビが消えない（消えると SP でサイト内回遊が不能になる）。
   ══════════════════════════════════════════════════════════════════════════ */

.spnav-burger{
  display:none; width:44px; height:44px; padding:0; flex:none;
  border:1px solid #e0d7c5; background:#fbfaf5; border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center;
}
.spnav-burger span{ display:block; width:18px; height:2px; background:#262420; border-radius:2px; position:relative; }
.spnav-burger span::before,
.spnav-burger span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:#262420; border-radius:2px; }
.spnav-burger span::before{ top:-6px; }
.spnav-burger span::after{ top:6px; }

.spnav-ov{
  position:fixed; inset:0; z-index:98;
  background:rgba(20,20,18,.45);
  opacity:0; visibility:hidden;
  transition:opacity .28s cubic-bezier(.22,.61,.36,1), visibility .28s;
}
.spnav-ov.open{ opacity:1; visibility:visible; }

.spnav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99;
  width:min(84vw,360px); background:#f3efe6;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  padding:20px 24px 32px; overflow-y:auto;
  font-family:'Zen Kaku Gothic New',sans-serif;
}
.spnav-drawer.open{ transform:translateX(0); }
.spnav-x{
  width:44px; height:44px; align-self:flex-end; padding:0;
  border:none; background:transparent; cursor:pointer; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#262420; font-size:24px; line-height:1;
}
.spnav-x:hover{ background:#e9e2d4; }
.spnav-links{ display:flex; flex-direction:column; margin-top:8px; }
.spnav-links a{
  font-size:17px; padding:16px 0; color:#262420; text-decoration:none;
  border-bottom:1px solid #e6ddcb;
}
.spnav-links a[aria-current="page"]{ color:#0d9668; font-weight:600; }
.spnav-cta{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.spnav-cta a{ display:block; text-align:center; text-decoration:none; border-radius:11px; }
.spnav-cta a.primary{ font-size:16px; font-weight:600; color:#fff; background:#10b981; padding:14px; }
.spnav-cta a.ghost{ font-size:15px; color:#262420; border:1px solid #d6cdb9; padding:13px; }
body.spnav-locked{ overflow:hidden; }

@media (max-width:768px){
  body.has-spnav .spnav-burger{ display:flex; }
  /* 既存ページのナビリンク／CTAコンテナ（ページごとに名前が違う）を隠す。
     JS成功時のみ（body.has-spnav）なので、JSが死んでもナビは残る。 */
  body.has-spnav .corp-navlinks,
  body.has-spnav .news-navlinks,
  body.has-spnav .edu-navlinks,
  body.has-spnav .rc-navlinks,
  body.has-spnav .na-navlinks,
  body.has-spnav .nav-links,
  body.has-spnav .navlinks,
  body.has-spnav .corp-navcta,
  body.has-spnav .rc-navcta,
  body.has-spnav .na-navcta,
  body.has-spnav .nav-cta,
  body.has-spnav .navcta{ display:none !important; }
}
@media (min-width:769px){
  .spnav-ov, .spnav-drawer{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .spnav-ov, .spnav-drawer{ transition:none; }
}