/* ========================================
   スクロールバー修正 - グローバル設定（改訂版）
   レスポンシブデザインガイドに基づく統一設定
   
   解決策: スクロールコンテナを1つに固定
   - html: overflow-y: auto（iOS Safari対策）
   - body: overflow-y: auto（デスクトップ対応）
   - .content-wrapper: 高さ制約を消してスクロールコンテナ化を防止
   ======================================== */

/* ベース設定 - スクロールコンテナを1つに固定 */
html,
html[style],
:root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* iOS Safari対策: htmlのoverflow-yをhiddenにしないが、スクロールバーは非表示 */
  overflow-x: clip !important; /* clipが使えない場合はhidden */
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  /* スクロールバーを非表示（スクロール機能は維持） */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Webkit系ブラウザ（Chrome/Safari）のスクロールバーを非表示 */
html::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* clip未対応ブラウザ用のフォールバック */
@supports not (overflow-x: clip) {
  html,
  html[style],
  :root {
    overflow-x: hidden !important;
  }
}

body,
body[style] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  /* iOSのアドレスバー変動対策 - 最新のCSS技術 */
  min-height: 100dvh !important;
  /* dvh未対応ブラウザ用 */
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  /* スワイプ時の「ビヨーン」バウンス効果を完全に無効化 */
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
  position: relative !important;
}

@supports not (overflow-x: clip) {
  body,
  body[style] {
    overflow-x: hidden !important;
  }
}

/* ラッパー要素: スクロールコンテナ化を防止（高さ制約を完全に消す） */
.content-wrapper,
#content-wrapper,
main,
.main-content,
.wrapper,
.container-wrapper,
div.content-wrapper,
.content-wrapper[style],
#content-wrapper[style],
main[style],
.main-content[style],
.wrapper[style],
.container-wrapper[style],
div.content-wrapper[style] {
  /* 高さ制約を完全に消してスクロールコンテナ化を防止 */
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  /* overflow-y: visible にこだわらず、overflow全体をvisibleに */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  /* スクロールバーを完全に非表示 */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Webkit系ブラウザのスクロールバーを非表示 */
.content-wrapper::-webkit-scrollbar,
#content-wrapper::-webkit-scrollbar,
main::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* モバイル（768px以下） */
@media (max-width: 768px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  
  @supports not (overflow-x: clip) {
    html {
      overflow-x: hidden !important;
    }
  }
  
  body {
    min-height: 100dvh !important;
    min-height: 100vh !important; /* フォールバック */
    overflow-x: clip !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    /* スワイプ時の「ビヨーン」バウンス効果を完全に無効化 */
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
  }
  
  @supports not (overflow-x: clip) {
    body {
      overflow-x: hidden !important;
    }
  }
  
  .content-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* タブレット以上（769px以上） */
@media (min-width: 769px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  
  @supports not (overflow-x: clip) {
    html {
      overflow-x: hidden !important;
    }
  }
  
  body {
    min-height: 100vh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    /* スワイプ時の「ビヨーン」バウンス効果を完全に無効化 */
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
  }
  
  @supports not (overflow-x: clip) {
    body {
      overflow-x: hidden !important;
    }
  }
}

/* ========================================
   横方向オーバーフロー完全対策
   はみ出しの原因となる要素に max-width: 100% を適用
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* メディア要素は確実に100%幅 */
img,
video,
iframe,
svg,
canvas,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

/* テーブルも横方向にはみ出さないように */
table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}

/* コンテナ要素は確実に100%幅 */
.container,
.container-fluid,
.wrapper,
.content-wrapper,
section,
main,
article,
aside,
header,
footer,
nav,
div[class*="container"],
div[class*="wrapper"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* フォーム要素も横方向にはみ出さないように */
input,
textarea,
select,
button {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* FlexboxやGridコンテナの子要素もはみ出さないように */
.flex,
.flex-container,
.grid,
.grid-container,
[class*="flex"],
[class*="grid"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* モバイルで特に問題になりやすい要素 */
@media (max-width: 768px) {
  /* すべてのブロック要素に max-width を適用 */
  div,
  p,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* 固定幅の要素を検出して修正 */
  [style*="width"],
  [style*="min-width"] {
    max-width: 100% !important;
  }
}