/* =========================================================
   スマホ開閉メニュー（#sp_menu）の見た目【2026-10-22】
   - メニュー項目は 外観→メニュー「スマホ開閉メニュー内」、CTAは ウィジェット「スマホ開閉メニュー下」
   - 目印クラス（メニュー項目のCSSクラス欄で付ける）
       spmenu-search … 教室検索ボタン
       spmenu-acc    … 開閉する親の行（キャンパスの強み）
   - CTAボタンの見た目は cta-banner.css の .cta-button をそのまま使う
   - SWELL親テーマは触らない。開閉の動きはSWELL標準のJSに任せる
   ========================================================= */

/* ---------- 全幅にする（SWELL標準は88vw） ---------- */
#sp_menu .p-spMenu__inner {
  width: 100vw;
  max-width: none;
}
#sp_menu.-right .p-spMenu__inner {
  transform: translateX(100vw);
}
[data-spmenu="opened"] #sp_menu.-right .p-spMenu__inner {
  transform: translateX(0);
}

/* ---------- ほんの少し透かす（白92%＋後ろをぼかす） ----------
   背景の白はSWELLが .p-spMenu__inner::before で塗っている。その不透明度だけを下げる。
   ぼかしで後ろの文字や写真の輪郭を消し、メニューの文字の読みやすさを保つ。CTAセクションは不透明のまま */
#sp_menu .p-spMenu__inner::before {
  opacity: 0.92;
}
#sp_menu .p-spMenu__inner {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* SWELL標準の黒い重ね（overlay・黒60%）は、全幅にしたので見える場所がない。
   透かしたときに後ろが灰色に濁らないよう、色だけ消す（押すと閉じる働きは残る） */
#sp_menu .p-spMenu__overlay {
  background: transparent;
}

/* ---------- 余白 ---------- */
#sp_menu .p-spMenu__body {
  padding: 16px 20px 0;
}
#sp_menu .p-spMenu__nav {
  margin-top: 0;
  padding-bottom: 0;
}

/* ---------- 通常の行：高さ56px・17px太字・右に矢印 ---------- */
#sp_menu .c-spnav > li > a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 32px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #004d26;
  border-bottom: 1px solid #e3e8e0;
}
#sp_menu .c-spnav > li:last-child > a {
  border-bottom: none;
}
#sp_menu .c-spnav > li:not(.spmenu-search):not(.spmenu-acc) > a::after,
#sp_menu .c-spnav .sub-menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004d26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

/* ---------- 教室検索ボタン ---------- */
#sp_menu .c-spnav > li.spmenu-search > a {
  justify-content: center;
  height: 48px;
  min-height: 48px;
  margin: 0 0 8px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: #004d26 linear-gradient(110deg, #2a6643 0%, #004d26 85%);
  color: #fff;
  font-size: 19px;
}
/* 虫眼鏡は文字の左に置き、中央揃えの計算にはほぼ入れない。
   幅の合計を 24 + 8 − 16 = 16px にして、文字を中央から8pxだけ右にずらしている
   （0にすると文字が完全に中央、32なら虫眼鏡ごと中央） */
#sp_menu .c-spnav > li.spmenu-search > a::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0 8px 0 -16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

/* ---------- 開閉する行（キャンパスの強み） ----------
   SWELLの開閉ボタン（a の内側に絶対配置）を行全体に広げ、どこを押しても開閉させる */
#sp_menu .c-spnav > li.spmenu-acc > a .c-submenuToggleBtn {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004d26' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat right 4px center / 20px 20px;
}
#sp_menu .c-spnav > li.spmenu-acc > a .c-submenuToggleBtn.is-opened {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004d26' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* SWELL標準の∨アイコン（::before）と四角い枠（::after）は消す */
#sp_menu .c-spnav > li.spmenu-acc > a .c-submenuToggleBtn::before,
#sp_menu .c-spnav > li.spmenu-acc > a .c-submenuToggleBtn::after {
  display: none;
}

/* 開いた中身：高さ50px・16px太字・左だけ16px下げる */
/* なめらかに開閉させる：SWELL標準は高さが 0 ↔ auto で瞬時に切り替わる（autoはアニメーションしない）。
   高さはSWELLに任せたまま上限（max-height）を動かす。開閉の合図はSWELLが付ける .is-opened。
   上限240pxは4行（50px×4＝200px）に余裕を見た値。行を増やすときはここも上げる */
#sp_menu .c-spnav > li.spmenu-acc > .sub-menu {
  height: auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 16px; /* 左だけ下げて親子を見分ける。背景色は付けない */
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
#sp_menu .c-spnav > li.spmenu-acc > .sub-menu.is-opened {
  max-height: 240px;
  opacity: 1;
  border-bottom: 1px solid #e3e8e0; /* 次の親の行との区切り（左の下げ幅も含めて全幅に引く） */
}
#sp_menu .c-spnav > li.spmenu-acc > .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 28px 0 0;
  font-size: 16px;
  font-weight: 500;   /* 親の行（700）より一段細く。中の項目だと分かるように（ユーザー指示） */
  line-height: 1.4;
  color: #004d26;
  border-bottom: 1px solid #e3e8e0;
}
#sp_menu .c-spnav > li.spmenu-acc > .sub-menu li:last-child > a {
  border-bottom: none;
}

/* ---------- CTAセクション（ウィジェット「スマホ開閉メニュー下」） ---------- */
#sp_menu .p-spMenu__bottom {
  margin-top: 0;
}
#sp_menu .spmenu-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px -20px 0;
  padding: 14px 20px 28px;
  background: #fff8d8;
}
/* SWELLの「.p-spMenu a { color: inherit }」がボタンの白文字を上書きするので戻す */
#sp_menu .spmenu-cta .cta-button {
  color: #fff;
}

/* ---------- hover と下線はやめる ----------
   スマホではスクロールで指が触れただけでも hover が付いて色が残るため。
   打ち消す相手：SWELL「.c-listMenu a:hover の灰色背景」・pa_style「a:hover の下線」・cta-banner.css「.cta-button:hover の半透明と矢印の移動」
   押した瞬間だけ色が変わるのは、ブラウザのタップ時の色（tap-highlight）で出す。iOSのSafariは :active が効かないことがあるのでこちらを使う */
#sp_menu a:hover {
  text-decoration: none;
}
#sp_menu .c-spnav a:hover {
  background-color: transparent;
}
#sp_menu .spmenu-cta .cta-button:hover {
  opacity: 1;
}
#sp_menu .spmenu-cta .cta-button:hover .arrow {
  transform: none;
}
#sp_menu a,
#sp_menu .c-submenuToggleBtn {
  -webkit-tap-highlight-color: rgba(0, 77, 38, 0.12);
}
/* 色の濃いボタン（教室検索・CTA）は、薄い緑では押したことが見えないので白を重ねる */
#sp_menu .c-spnav > li.spmenu-search > a,
#sp_menu .spmenu-cta .cta-button {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.35);
}

/* ---------- メニューを開いている間は画面下の固定バーを隠す ---------- */
[data-spmenu="opened"] .kc-floating-bar {
  display: none !important;
}