/* =========================================================
   QUOREAL / V58: approved desktop WHY title placement + CCC logo
   2026-10-16
   Scope: only the TOP page WHY cutout positioning and CLIENTS logos.
   Keep mobile WHY position, colors of official logos, all other design,
   and all section motion as-is.
   ========================================================= */

/* Desktop: align the large photographic wordmark closer to the
   "選ばれる理由" heading height, and place it farther to the right.
   Overflow is visible only in this header so the last letters
   are not clipped outside its centered container; rightward motion
   is limited by the desktop container gutter to keep every letter visible. */
@media (min-width: 901px) {
  .strength .why-head.q-section-stage {
    overflow: visible !important;
  }
  .strength .why-head.q-section-stage .q-section-stage__en {
    transform: translate(
      max(24px, min(120px, calc((100vw - var(--container)) / 2 - 22px))),
      clamp(-56px, -3vw, -40px)
    ) !important;
  }
}

/* Add a third official mark to the existing white-background logo grid.
   No grayscale, opacity changes, stretching, or recoloring. */
.clients-logo-item--ccc img {
  width: min(100%, 280px) !important;
  max-width: 280px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

@media (min-width: 901px) {
  .clients-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1220px !important;
  }
}

/* Preserve the tablet grid and center its third logo when it wraps. */
@media (min-width: 561px) and (max-width: 900px) {
  .clients-logo-item--ccc {
    grid-column: 1 / -1;
  }
}

/* Keep the existing one-column mobile layout, with balanced artwork size. */
@media (max-width: 560px) {
  .clients-logo-item--ccc img {
    width: min(100%, 250px) !important;
    max-width: 250px !important;
  }
}