/* =====================================================================
   SAMJI localized company/about layout guard
   - CSS-only: preserves legacy HTML, translated copy, and image assets.
   - Keeps long JA/ZH/RU/VI/AR paragraphs inside the text column so the
     about01 forest image/decorative background never sits underneath text.
   ===================================================================== */

@media (min-width: 1025px) {
  article[data-subarea="about01"] > .box > .inr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 38%);
    column-gap: clamp(48px, 5vw, 92px);
    align-items: start;
  }

  article[data-subarea="about01"] > .box > .inr > .is_motion:first-child,
  article[data-subarea="about01"] > .box > .inr > .ani_box {
    min-width: 0;
  }

  article[data-subarea="about01"] > .box > .inr > .is_motion:first-child {
    grid-column: 1;
    max-width: 100%;
  }

  article[data-subarea="about01"] > .box > .inr > .ani_box {
    grid-column: 2;
    justify-self: end;
    width: min(100%, 555px);
    margin-left: 0 !important;
  }


  article[data-subarea="about01"] p,
  article[data-subarea="about01"] .title_big {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  html[lang="ja"] article[data-subarea="about01"] p,
  html[lang="zh"] article[data-subarea="about01"] p {
    line-break: loose;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  article[data-subarea="about01"] > .box > .inr {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
    column-gap: clamp(36px, 4vw, 56px);
  }
}

@media (max-width: 1024px) {
  article[data-subarea="about01"] > .box > .inr {
    display: block !important;
  }

  article[data-subarea="about01"] .ani_box {
    margin-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  article[data-subarea="about01"] p,
  article[data-subarea="about01"] .title_big {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Keep the legacy KO reference image geometry while fixing localized text flow:
   555px desktop, 440px medium, 350px compact desktop, then original mobile image. */
@media (min-width: 1341px) {
  article[data-subarea="about01"] > .box > .inr {
    grid-template-columns: minmax(0, 1fr) 555px;
  }
}

@media (min-width: 1201px) and (max-width: 1340px) {
  article[data-subarea="about01"] > .box > .inr {
    grid-template-columns: minmax(0, 1fr) 440px;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  article[data-subarea="about01"] > .box > .inr {
    grid-template-columns: minmax(0, 1fr) 350px;
  }
}

/* Lower about01 company-group diagram: only release the forced one-line prose
   that made RU/VI/AR data-diagram=03 text extend offscreen. */
article[data-subarea="about02"] .diagram span[data-diagram] {
  min-width: 0;
}

article[data-subarea="about02"] .diagram span[data-diagram="03"] .nowrap {
  white-space: normal;
  overflow-wrap: anywhere;
}