/* ======================================================================
   Mobile-only safe overrides (no color changes)
   Generated: 2025-09-05
   ----------------------------------------------------------------------
   Purpose:
   - Optimize layout for smartphones (vertical screens).
   - Do NOT change any colors.
   - Ensure background images cover full screen vertically (100% height).
   ====================================================================== */

@media (max-width: 767px) {
  html, body {
    height: auto !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  /* Generic containers */
  .container, .wrapper, .inner, .content, .main, .page, .section {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    max-width: 100% !important;
  }

  /* Hero/sections that used fixed heights */
  [id^="slide-"], .hero, .banner, header, section {
    min-height: auto !important;
    height: auto !important;
  }

  /* Cards or spans with fixed square sizes */
  #slide-contact-1 .wrapper span {
    width: 100% !important;
    height: auto !important;
  }

  /* Images */
  img { 
    max-width: 100% !important; 
    height: auto !important; 
  }

  /* Google map box */
  #gmap, #map, #map_canvas, .gmap, .map {
    width: 100% !important;
    height: 300px !important; /* fixed height for usability on mobile */
    max-width: 100% !important;
  }

  /* Grid/rows become stacked */
  .row, .columns, .grid, .flex, .flex-row { 
    display: block !important; 
  }
  .row > *, .columns > *, .grid > *, .flex > *, .flex-row > * {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Navigation wrap & tap size */
  nav ul, .nav ul, .menu, .navbar ul { 
    flex-wrap: wrap; 
    gap: 8px; 
  }
  nav a, .nav a, .menu a, .navbar a { 
    padding: 10px 12px; 
  }

  /* Tables */
  table { width: 100% !important; }
  .table-responsive { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }

  /* === 背景画像の中央フィット (スマホ縦画面用) === */
  body,
  .hero,
  .banner,
  header,
  section,
  [class*="bg"] {
    background-position: center center !important; /* 中央表示 */
    background-size: cover !important;             /* 全画面カバー */
    background-repeat: no-repeat !important;       /* 繰り返し防止 */
    min-height: 100vh !important;                  /* 縦100%フィット */
  }
}