/* ===============================
  Drawer (Hamburger) - Clean CSS
  依存: 矢印は .accordion-toggle-btn 内の SVG を使用
=================================*/

/* ---- 基本色（必要に応じてサイト共通に移動） ---- */
:root {
  --menu-ink: #fff;    /* メニューの文字/矢印色（暗背景上なら #fff 推奨） */
}

/* ---- トグルボタン（右上ハンバーガー） ---- */
.drawer_btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 4rem; height: 4rem;
  border: none;
  border-radius: 100px;
  background: #0168B7;
  cursor: pointer;
  z-index: 1100;
}
.drawer_btn > span {
  position: absolute; left: 50%; top: 50%;
  width: 2rem; height: 2px;
  background: #fff;
  display: block;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.drawer_btn > span:nth-of-type(1) { transform: translate(-50%, calc(-50% - .5rem)); }
.drawer_btn > span:nth-of-type(2) { transform: translate(-50%, -50%); }
.drawer_btn > span:nth-of-type(3) { transform: translate(-50%, calc(-50% + .5rem)); }
.drawer_btn.js-active > span:nth-of-type(1) { transform: translate(-50%, -50%) rotate(-45deg); }
.drawer_btn.js-active > span:nth-of-type(2) { opacity: 0; }
.drawer_btn.js-active > span:nth-of-type(3) { transform: translate(-50%, -50%) rotate(45deg); }

/* 開いた時は fixed に（スクロールしても追従） */
.drawer_btn.js-active {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1300;
}

/* ---- オーバーレイ本体 ---- */
.drawer_nav {
  position: fixed;
  inset: 0;
  background: #0168B7;
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease;
  z-index: 1000;
}
.drawer_nav.js-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---- 内側レイアウト（PC/タブレット） ---- */
.drawer_nav_inner {
  max-width: min(1000px, 92vw);
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;      /* PCでは中央寄せ */
  padding: 8rem 2rem 4rem;
  overflow: auto;
}

/* ---- メニューの見た目 ---- */
.drawer_nav_list,
.drawer_nav_panel {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drawer_nav_item { position: relative; }

.drawer_nav_link,
.drawer_nav_sub-link {
  display: block;
  color: var(--menu-ink);
  text-decoration: none;
  padding: 1rem 1rem;                 /* 右側は後段で矢印分を追加 */
  border-bottom: 1px solid #e5e5e5;
}

/* CTA 風のボタンリンク（任意セクション） */
.drawer_nav_item div a {
  display: block;
  width: 100%;
  margin: 24px 0;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  border-radius: 36px;
  font-weight: 800;
  color: #0168B7;
  background: #fff;
}
.drawer_nav_item .h_menu_join a {
  color: #fff;
  background: #F57B1E;
}

/* ---- タイポサイズ ---- */
.drawer_nav_link      { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 500; }
.drawer_nav_sub-link  { font-size: clamp(.98rem, 2vw, 1.1rem); }

/* ---- アコーディオン（サブメニュー） ---- */
/* パネルはデフォルト非表示（JS が slideToggle で開閉） */
.drawer_nav_panel { display: none; padding-left: .5rem; }

/* 親リンクに矢印分のスペースを確保＆基準化 */
.drawer_nav_link {
  position: relative;
  padding-right: 2.25rem;       /* 矢印スペース */
  line-height: 1.4;
  overflow: visible;
}

/* 矢印（リンク内右端・縦中央・SVG使用） */
.accordion-toggle-btn {
  position: absolute;
  top: 50%;
  right: .75rem;
  transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  display: inline-grid; place-items: center;
  padding: 0; border: 0; background: transparent;
  line-height: 0;
  color: var(--menu-ink);
  z-index: 2;
}
.accordion-toggle-btn svg {
  width: 100%; height: 100%;
  display: block;
  fill: currentColor;           /* 塗りで確実表示 */
  stroke: none;
  transition: transform .18s ease;
}
.accordion-toggle-btn[aria-expanded="true"] svg {
  transform: rotate(90deg);     /* > を v に回転 */
}

/* ---- SP最適化（オーバーレイをスクロールコンテナに） ---- */
@media (max-width: 768px) {
  .drawer_nav {
    position: fixed;            /* 念のため明示 */
    inset: 0;
    height: 100dvh;
    overflow-y: auto;           /* スクロールはオーバーレイ側に集約 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    padding-top: calc(env(safe-area-inset-top) + 0px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .drawer_nav_inner {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;   /* SPでは上寄せ */
    padding: 5rem 1.5rem 2rem;
    max-width: min(1000px, 92vw);
    margin: 0 auto;
  }
  .drawer_nav_panel { width: 100%; }
}

/* ---- 背景スクロール抑止（JSで html/body に付与） ---- */
html.no-scroll, body.no-scroll { overflow: hidden; }