@charset "UTF-8";

/* Mobile Fixes for Jurakuin Homepage */

@media screen and (max-width: 768px) {
  /* Container overrides */
  #hpb-container {
    width: 100% !important;
    min-width: 320px !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* Header adjustments */
  #hpb-header, #hpb-headerMain, #hpb-headerLogo, #hpb-headerExtra1 {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    position: static !important;
    height: auto !important;
  }

  #hpb-headerLogo {
      margin-bottom: 10px;
  }
  
  #hpb-headerExtra1 p.tel {
      font-size: 1.2rem;
  }

  /* Main content area */
  #hpb-inner, #hpb-wrapper, #hpb-main {
    width: 100% !important;
    float: none !important;
  }
  
  /* Sidebar/Aside - move to bottom or hide if needed, here we stack it */
  #hpb-aside {
    width: 100% !important;
    float: none !important;
    margin-top: 20px;
  }
  
  /* Navigation */
  #hpb-nav {
      width: 100% !important;
      float: none !important;
      margin-bottom: 20px;
  }
  #hpb-nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  #hpb-nav li {
      width: 48%; /* 2 columns */
      margin: 1%;
      box-sizing: border-box;
  }
  #hpb-nav li a {
      width: 100% !important;
      display: block;
  }

  /* Page Title Image */
  #hpb-title {
      width: 100% !important;
      background-size: cover !important;
      background-position: center;
  }

  /* Footer */
  #hpb-footer {
      width: 100% !important;
  }

  /* TOP PAGE NEWS SECTION overrides */
  #toppage-news {
    width: 100% !important;
    height: auto !important;
    background-size: cover !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  /* Force table to be responsive */
  #toppage-news table {
    width: 100% !important;
    display: block;
  }
  
  #toppage-news tbody, #toppage-news tr, #toppage-news th, #toppage-news td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
    height: auto !important;
  }
  
  #toppage-news th {
      text-align: left;
      background-color: #eee;
      padding: 5px;
      margin-top: 10px;
  }
  
  #toppage-news td {
      padding: 10px;
      border-bottom: 1px solid #ccc;
  }

  /* Image responsiveness */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Adjust font sizes */
  body {
      font-size: 16px; 
      line-height: 1.6;
  }
  
  /* Fix specific fixed-width elements if any */
  *[style*="width"] {
      width: auto !important;
      max-width: 100% !important;
  }
}