/* Mobile-only horizontal scroll fix */
/* Only applies to devices with width <= 768px */

@media (max-width: 768px) {
  /* 1. Viewport lock - prevent any horizontal overflow */
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #root {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Box sizing for all elements */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  /* 3. Prevent all elements from exceeding viewport */
  * {
    max-width: 100% !important;
  }

  /* 4. Container elements */
  section,
  div,
  main,
  article,
  header,
  footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5. Images and media */
  img,
  video,
  iframe,
  svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 6. Fix padding/margin that might cause overflow */
  section,
  div[class*="container"],
  div[class*="section"] {
    padding-left: clamp(1rem, 5vw, 2rem) !important;
    padding-right: clamp(1rem, 5vw, 2rem) !important;
  }
  
  /* 7. Fix absolute/fixed positioned elements */
  [style*="position: absolute"],
  [style*="position: fixed"],
  .absolute,
  .fixed {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* 8. Fix grid layouts */
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  
  /* 9. Fix flex layouts */
  [class*="flex"] {
    flex-wrap: wrap !important;
  }
  
  /* 10. Fix buttons and links */
  a,
  button {
    max-width: 100% !important;
    white-space: normal !important;
  }
  
  /* 11. Fix modal close button (実績画像のバツボタン) */
  /* モーダル内のバツボタンを確実に表示 */
  .fixed.inset-0 button,
  button.absolute.top-4.right-4,
  button[class*="absolute"][class*="top-"][class*="right-"] {
    z-index: 9999 !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}