/* =========================================================
   QUOREAL / V41 MOBILE WIDTH & COMPOSITION FIX
   2026-10-08
   Mobile-only overrides. Desktop 821px+ intentionally untouched.
   ========================================================= */

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

  body *,
  body *::before,
  body *::after {
    box-sizing: border-box;
  }

  main,
  section,
  .container,
  .hero-container,
  .about-grid,
  .about-content,
  .service-list,
  .service-card,
  .strength,
  .strength > .container,
  .why-layout-v10,
  .why-teasers,
  .why-teaser {
    max-width: 100% !important;
  }

  /* -------------------------------------------------------
     TOP / CORE APPROACH
     Keep the title inside the viewport and avoid a long,
     empty-looking mobile composition.
     ------------------------------------------------------- */
  .about {
    padding-bottom: 40px !important;
    overflow: hidden !important;
  }

  .about-grid {
    width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
  }

  .about-content {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 0 18px 12px !important;
    overflow: hidden !important;
  }

  .about-content .content-index {
    max-width: 100% !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
  }

  .about-content .about-core-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    font-size: clamp(25px, 6.7vw, 30px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: pretty !important;
  }

  .about-content > p:not(.content-index) {
    max-width: 100% !important;
  }

  .about-detail-link,
  .about-detail-link.q-child-link {
    position: relative !important;
    inset: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 18px !important;
  }

  .about-content::after {
    right: 0 !important;
    max-width: 46vw !important;
    overflow: hidden !important;
  }

  /* -------------------------------------------------------
     TOP / SERVICE
     Long Japanese service names must wrap naturally instead
     of overflowing behind the thumbnail.
     ------------------------------------------------------- */
  .service {
    padding-bottom: 28px !important;
    overflow: hidden !important;
  }

  .service .service-list,
  .service-list {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .service .service-card,
  .service .service-card:nth-child(even),
  .service .service-card.service-card--quiet,
  .service-card,
  .service-card:nth-child(even) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 146px !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    gap: 9px !important;
    padding: 15px 8px 15px 0 !important;
    overflow: hidden !important;
  }

  .service .service-card__content {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .service .service-top {
    margin-bottom: 7px !important;
  }

  .service .service-en {
    max-width: 100% !important;
    font-size: 7px !important;
    letter-spacing: .15em !important;
    white-space: normal !important;
  }

  .service .service-card h3,
  .service .service-card:nth-child(even) h3,
  .service .service-card.service-card--quiet h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 21px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: pretty !important;
  }

  .service .service-card-04 h3 {
    font-size: clamp(17px, 4.65vw, 20px) !important;
  }

  .service .service-card__content > p,
  .service .service-card:nth-child(even) .service-card__content > p,
  .service .service-card.service-card--quiet .service-card__content > p {
    margin-top: 8px !important;
    font-size: 10.3px !important;
    line-height: 1.58 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .service .service-media,
  .service .service-card:nth-child(even) .service-media,
  .service .service-card:nth-child(1) .service-media,
  .service .service-card:nth-child(2) .service-media,
  .service .service-card:nth-child(3) .service-media,
  .service .service-card:nth-child(4) .service-media {
    width: 84px !important;
    height: 68px !important;
    min-height: 68px !important;
  }

  /* -------------------------------------------------------
     TOP / WHY QUOREAL
     All three rows share one width rule. No text or arrow may
     escape to the right on small iPhones.
     ------------------------------------------------------- */
  .strength {
    overflow: hidden !important;
  }

  .strength .why-layout-v10 {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  .strength .why-teasers {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .strength .why-teaser,
  .strength .why-teaser.is-current {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 30px minmax(0, 1fr) 34px !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    padding: 16px 4px !important;
    overflow: hidden !important;
  }

  .strength .why-teaser__no,
  .strength .why-teaser__en,
  .strength .why-teaser strong {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .strength .why-teaser__en {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .strength .why-teaser strong {
    width: 100% !important;
    font-size: clamp(18px, 4.9vw, 21px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.025em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: pretty !important;
  }

  .strength .why-teaser__arrow {
    justify-self: end !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    transform: none !important;
  }

  .strength .q-text-link.q-child-link {
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

@media (max-width: 390px) {
  .service .service-card,
  .service .service-card:nth-child(even),
  .service .service-card.service-card--quiet {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 8px !important;
  }

  .service .service-media,
  .service .service-card:nth-child(even) .service-media,
  .service .service-card:nth-child(1) .service-media,
  .service .service-card:nth-child(2) .service-media,
  .service .service-card:nth-child(3) .service-media,
  .service .service-card:nth-child(4) .service-media {
    width: 76px !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  .service .service-card h3,
  .service .service-card:nth-child(even) h3,
  .service .service-card.service-card--quiet h3 {
    font-size: 17.5px !important;
  }

  .service .service-card-04 h3 {
    font-size: 16.5px !important;
  }

  .strength .why-layout-v10 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .strength .why-teaser,
  .strength .why-teaser.is-current {
    grid-template-columns: 28px minmax(0, 1fr) 32px !important;
    column-gap: 8px !important;
  }

  .strength .why-teaser strong {
    font-size: 17.5px !important;
  }
}