/* =========================================
   Sitemap (responsive)
   - Keeps the original 3-column look on desktop
   - Falls back to 2 columns / 1 column on smaller screens
   ========================================= */

/* Main grid wrapper */
.box_sm {
  display: grid;

  /* Similar feel to the original fixed widths (210/225/225),
     but fluid and responsive */
  grid-template-columns: repeat(3, minmax(210px, 1fr));

  /* Spacing between columns/rows */
  gap: 24px;

  /* Side padding so content doesn't touch the edges on mobile */
  padding: 0 12px;

  /* Center the whole block and prevent it from becoming too wide */
  max-width: 980px;
  margin: 20px auto 0;
}

/* Column block */
.box_sm1 {
  /* Avoid consuming horizontal space on small screens */
  margin-left: 0;
}

/* List reset */
.box_sm1 ul {
  padding: 0;
  margin: 0;
  position: relative;
}

.box_sm1 ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style: none !important;
}

/* Section title style (kept as-is) */
.list_mds {
  font-family: "montserrat", "source-han-sans-japanese", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  color: #876d4a;
}

/* ---------- Breakpoints ---------- */

/* Tablet: switch to 2 columns */
@media (max-width: 900px) {
  .box_sm {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 18px;
    max-width: 740px;
  }
}

/* Mobile: switch to 1 column */
@media (max-width: 560px) {
  .box_sm {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 10px;
  }

  /* Slightly enlarge tap area on mobile */
  .box_sm1 ul li a {
    display: inline-block;
    padding: 2px 0;
  }
}

/* Safety override:
   If topXX utility classes or other global CSS forces too much spacing,
   this keeps the sitemap block consistent. */
.box_sm {
  margin-top: 20px !important;
}

/* Mobile only: slightly increase section title size for readability */
@media (max-width: 560px) {
  .list_mds {
    font-size: 15px;
  }
}

/* On mobile, ignore manual <br> breaks in URLs */
@media (max-width: 560px) {
  .box_sm1 a br {
    display: none;
  }

  .box_sm1 a {
    word-break: break-all;
  }
}