/* pushy.css
   サイドから出るメニュー用
*/

.pushy {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100%;
    background-color: #000;
    border-right: 1px solid #222;
    overflow-y: auto;
    z-index: 2000;
    transition: left 0.3s ease;
    padding-top: 2rem;
  }
  
  .pushy-open .pushy {
    left: 0;
  }
  
  .site-overlay {
    display: none;
    position: fixed;
    z-index: 1500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    transition: all 0.3s ease;
  }
  
  .pushy-open .site-overlay {
    display: block;
  }
  
  /* メニュー内リンク (common.css側とも整合) */
  .pushy ul {
    list-style: none;
    margin: 0;
    padding: 0 1rem 3rem 1rem;
  }
  .pushy li {
    margin-bottom: 1rem;
  }
  .pushy a {
    display: block;
    background-color: #111;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
  }
  .pushy a:hover {
    background-color: #1a1a1a;
    color: #4caf50;
  }
  
  /* スクロールバーちょい細く(一部ブラウザ) */
  .pushy::-webkit-scrollbar {
    width: 6px;
  }
  .pushy::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 3px;
  }
  
/* ==========================================================
   グループ見出し付きメニュー（2026-08-25 改修）
   18項目フラットだったものを目的別4グループに再構成。
   配色は theme-light.css の白基調に合わせる。
   theme-light の `.side nav.pushy a` が詳細度2-2で効いてくるため、
   上書きしたいものは同じ `.side nav.pushy` を前置して詳細度を揃える。
========================================================== */
.side nav.pushy .pushy-home {
  display: block;
  margin: 0 1rem 1.2rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
}

.pushy-group {
  margin: 1.4rem 1rem 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border, #ddd);
  color: #888;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pushy ul { padding: 0 1rem; }
.pushy li { margin-bottom: 0.45rem; }

.side nav.pushy a {
  padding: 0.6rem 0.9rem;
  font-size: 0.94rem;
}

/* 今開いているページ */
.side nav.pushy a[aria-current="page"] {
  border-color: #39c21f;
  background: #f2fbf0;
  color: #2ea617;
  font-weight: 700;
}

.pushy-cta {
  margin: 1.6rem 1rem 3rem;
  display: grid;
  gap: 0.6rem;
}

/* 体験予約だけは白基調から外して目立たせる */
.side nav.pushy .pushy-cta a {
  background: #39c21f;
  border-color: #39c21f;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.side nav.pushy .pushy-cta a:hover {
  background: #2ea617;
  border-color: #2ea617;
  color: #fff;
}

.side nav.pushy .pushy-cta .pushy-cta-sub {
  background: #fff;
  border-color: var(--border, #ddd);
  color: var(--text, #222);
  font-weight: 400;
}

.side nav.pushy .pushy-cta .pushy-cta-sub:hover {
  background: var(--brand-soft, #f2fbf0);
  color: var(--brand-dark, #2ea617);
}

/* ==========================================================
   PC用ヘッダーナビ（スマホでは非表示）
   飯田橋店の骨格に合わせた構成：
     左端にユーティリティ（Instagram・電話）／ロゴを中央でバッジ化し
     項目を左右へ振り分け／CTA は高さいっぱいのベタ塗りで右角まで。
========================================================== */
.pcnav-wrap { display: none; }

@media (min-width: 992px) {
  .pcnav-wrap {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1200;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
  }

  .pcnav {
    display: flex;
    align-items: stretch;
    min-height: 74px;
  }

  /* --- 左端ユーティリティ --- */
  .pcnav-util {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-left: 1.2rem;
    white-space: nowrap;
  }

  .pcnav-sns {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1;
    color: #444;
    text-decoration: none;
  }

  .pcnav-tel {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #222;
    text-decoration: none;
  }

  .pcnav-sns:hover,
  .pcnav-tel:hover { color: #2ea617; }

  /* --- 項目リスト（ロゴを挟んで左右に振り分け） --- */
  .pcnav-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
  }

  .pcnav-list-left  { justify-content: flex-end;   padding-right: 1.1rem; }
  .pcnav-list-right { justify-content: flex-start; padding-left: 1.1rem; }

  .pcnav-item { position: relative; display: flex; }

  .pcnav-trigger {
    display: flex;
    align-items: center;
    padding: 0 0.95rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    cursor: pointer;
  }

  .pcnav-trigger::after {
    content: "▾";
    margin-left: 0.3rem;
    font-size: 0.75rem;
    color: #999;
  }

  .pcnav-trigger:hover,
  .pcnav-item:hover .pcnav-trigger,
  .pcnav-trigger[aria-expanded="true"],
  .pcnav-trigger.is-current {
    color: #2ea617;
    border-bottom-color: #39c21f;
  }

  /* --- 中央ロゴ（ヘッダーの帯の中に収める） --- */
  .pcnav-logo-slot {
    flex: none;
    width: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pcnav-logo {
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
  }

  .pcnav-logo img {
    width: auto;
    height: 58px;
    display: block;
  }

  /* --- ドロップダウン --- */
  .pcnav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* 右グループの末尾は画面外へはみ出すので右揃えにする */
  .pcnav-list-right .pcnav-item:last-child .pcnav-sub { left: auto; right: 0; }

  .pcnav-item:hover .pcnav-sub,
  .pcnav-item:focus-within .pcnav-sub,
  .pcnav-trigger[aria-expanded="true"] + .pcnav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .pcnav-sub a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    color: #333;
    font-size: 0.92rem;
    text-decoration: none;
  }

  .pcnav-sub a:hover { background: #f2f8f1; color: #2ea617; }

  .pcnav-sub a[aria-current="page"] {
    background: #eef7ec;
    color: #2ea617;
    font-weight: 700;
  }

  /* --- 右端CTA（高さいっぱい・角まで） --- */
  .pcnav-cta {
    display: flex;
    align-items: center;
    padding: 0 1.7rem;
    background: #39c21f;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
  }

  .pcnav-cta:hover { background: #2ea617; }

  /* PCではスマホ用の固定バーを隠す。
     backtotop は --bottom-bar-height をJSが読んで位置を決めるので、
     バーを消すぶん変数側を0にしておく（!important でJSと殴り合わないため）。 */
  :root { --bottom-bar-height: 12px; }
  .sidebsh { display: none !important; }
}

/* 中間幅では横幅が足りずCTAが切れるので、項目を詰めてCTAラベルを短くする */
@media (min-width: 992px) and (max-width: 1240px) {
  .pcnav-trigger { padding: 0 0.55rem; font-size: 0.86rem; }
  .pcnav-list-left  { padding-right: 0.6rem; }
  .pcnav-list-right { padding-left: 0.6rem; }
  .pcnav-util { gap: 0.55rem; padding-left: 0.7rem; }
  .pcnav-tel { font-size: 0.86rem; }
  /* ラベルが短くなるぶん左端ユーティリティと幅を揃え、ロゴを中央に保つ */
  .pcnav-cta {
    padding: 0 1rem;
    font-size: 0.9rem;
    min-width: 154px;
    justify-content: center;
  }
  .pcnav-cta-long { display: none; }
  .pcnav { min-height: 68px; }
  .pcnav-logo-slot { width: 112px; }
  .pcnav-logo img { height: 50px; }
}