/*
Created: 2025-06-05
Description: モバイルメニューのスクロール問題を修正するスタイル
*/

/* モバイルメニューのスクロール動作を改善 */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000; /* 高いz-indexを確保 */
  overscroll-behavior: contain; /* スクロールが親要素に伝播しないようにする */
  touch-action: pan-y; /* 縦スクロールのみ許可 */
  -webkit-overflow-scrolling: touch; /* スクロールをスムーズに */
  background-color: rgba(0,0,0,0.85); /* 背景色を設定 */
}

.mobile-menu__overlay {
  height: 100%; 
  max-height: 100vh; /* 画面の高さに制限 */
  overflow-y: auto; /* 縦方向のスクロールを有効に */
  overflow: -moz-scrollbars-none; /* Firefoxのスクロールバー非表示 */
  -ms-overflow-style: none; /* IEとEdgeのスクロールバー非表示 */
  scrollbar-width: none; /* モダンブラウザのスクロールバー非表示 */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Webkit系ブラウザのスクロールバー非表示 */
.mobile-menu__overlay::-webkit-scrollbar {
  display: none;
}

/* コンテンツ部分が確実に表示されるようにする */
.mobile-menu__nav {
  flex: 1 0 auto; /* 伸長可能、縮小不可に変更 */
  overflow-y: auto; /* 内部スクロール可能に */
  overflow: -moz-scrollbars-none; /* Firefoxのスクロールバー非表示 */
  -ms-overflow-style: none; /* IEとEdgeのスクロールバー非表示 */
  scrollbar-width: none; /* モダンブラウザのスクロールバー非表示 */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 60px; /* 下部にスペースを増やす */
}

/* Webkit系ブラウザのスクロールバー非表示 */
.mobile-menu__nav::-webkit-scrollbar {
  display: none;
}

/* CTAエリアの最適化 */
.mobile-menu__cta {
  padding-bottom: 30px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}

/* スマホでのタップ操作を最適化 */
.mobile-menu__nav-link,
.mobile-menu__cta-link {
  padding: 16px 0; /* タップエリアを広げる */
  display: block;
}

/* iOS Safariでの表示を最適化 */
@supports (-webkit-touch-callout: none) {
  .mobile-menu__overlay {
    height: -webkit-fill-available;
  }
  
  .mobile-menu__nav {
    min-height: 300px; /* iOS用の最低高さ確保 */
    padding-bottom: 120px; /* iOS用に下部スペースを追加 */
  }
}