/* Small-screen layout and Japanese phrase wrapping. Desktop styles stay intact. */
@media (max-width: 760px) {
  html { scroll-padding-top: 180px; }
  main p, main dd, footer p {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  main h2, main h3 { line-break: strict; text-wrap: balance; }
  .mobile-phrase { display: inline-block; white-space: nowrap; }
  .section, .catalog-body, .business > div, .steps section,
  .company-grid > *, .recruit-grid > * { min-width: 0; }

  /* Give explanatory paragraphs a comfortable, consistent reading width. */
  .catalog-body, .business > div:first-child > p:not(.eyebrow) {
    text-align: left;
    font-size: 15px;
    line-height: 2;
  }
  .catalog-body p { font-size: 15px; line-height: 2; }
  .catalog-body .solid { display: block; width: 100%; text-align: center; padding: 14px 12px; }
  .catalog-account, .catalog-body .small { text-align: center; }
  .business h2 { font-size: clamp(23px, 6.9vw, 29px); line-height: 1.65; }
  .business .steps section { min-width: 0; }
  .business .steps h3 { font-size: 17px; line-height: 1.65; }
  .business .steps p { font-size: 14px; line-height: 1.95; }
  .about-story p { line-height: 2; }
  .about-story .about-values { font-size: 17px; padding-left: 16px; }
  .about-details summary { line-height: 1.7; }

  /* Stack the address panel and the company table instead of squeezing two columns. */
  .company-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .company-grid .access-panel { padding: 24px; }
  .company-grid .access-panel h3 { font-size: 28px; line-height: 1.65; }
  .company-grid .access-panel p { font-size: 14px; line-height: 1.95; }
  .company-grid .access-panel .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .company-grid .map-link { font-size: 14px; padding: 15px 12px; line-height: 1.7; }
  .company-grid dl > div {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    font-size: 14px;
    line-height: 1.95;
    padding: 17px 0;
  }
  .company-grid dt { white-space: nowrap; }
  .company-grid dd { min-width: 0; }
  .company-grid dd a[href^="tel:"] { white-space: nowrap; }
  .company-section .source { font-size: 12px; line-height: 1.9; }

  /* Preserve complete phrases in the recruitment and contact headings. */
  #recruit .section-head h2 {
    font-size: clamp(18px, 6vw, 32px);
    white-space: normal;
    line-height: 1.6;
  }
  #recruit .recruit-grid > div:first-child { text-align: center; }
  #recruit .recruit-grid > div:first-child h3 { font-size: 22px; }
  #recruit .recruit-grid > div:first-child p { font-size: 15px; line-height: 2; }
  #recruit .recruit-info { padding: 26px 20px; }
  #recruit .recruit-info h3 { font-size: clamp(18px, 5vw, 20px); line-height: 1.6; text-align: center; }
  #recruit .recruit-info > p:not(.small) { font-size: 15px; line-height: 2; }
  #recruit .recruit-info .solid { display: block; padding: 14px 10px; text-align: center; font-size: 14px; }
  #recruit .recruit-info .small { text-align: center; font-size: 12px; line-height: 1.9; }
  .contact h2 { font-size: clamp(24px, 7vw, 29px); line-height: 1.65; }
  .contact .phone { white-space: nowrap; }
  .contact-hours .mobile-phrase { display: block; }
  .contact-hours .hours-separator { display: none; }
  .contact-form-heading h3 { font-size: clamp(20px, 5.7vw, 23px); line-height: 1.6; }
  .contact-form-heading p { line-height: 1.9; }
  .contact-form-row { min-width: 0; }
  .contact-form-alternative { text-align: left; line-height: 1.9; }
}

@media (max-width: 360px) {
  header .brand { width: 110px; }
  header .logo-frame { width: 110px; height: 60px; }
  header .logo-frame img { width: 120px; left: -5px; top: -29px; }
  header .logo-caption { font-size: 8px; }
  header .header-contact { min-width: 0; }
  header .header-contact .contact-nav b { font-size: 20px; }
  header .header-mail { font-size: 10px; padding: 7px 9px; }
  header nav { font-size: 11px; gap: 8px 14px; }
}