/* ===================================================================
 English overrides — loaded only on /en/ pages
 (referenced from en/include/common/common.php).
=================================================================== */

/* ---- STRENGTH: text-size adjustments (English text is longer) ---- */
.STRENGTH .lead-section .lead__ttl {
  font-size: 2.5rem;
  line-height: 1.4;
}

.STRENGTH .box .box_ttl {
  font-size: 24px;
  line-height: 1.5;
}

.STRENGTH.second .sec_future li .ttl {
  font-size: 16px;
  line-height: 1.4;
}

.STRENGTH.second .sec_service li .btn {
  width: 420px;
}

.STRENGTH.second .sec_service li .btn span {
  font-size: 15px;
  padding: 12px 20px;
  white-space: normal;
  line-height: 1.4;
}

.STRENGTH.third .txt p {
  font-size: 15px;
  line-height: 1.5;
}

/* ---- SOLUTION ---- */
.SOLUTION.service .service_box li .txt {
  min-height: 120px;
  padding-bottom: 15px;
}

/* ===================================================================
 Desktop-only layout overrides (>= 769px).
 The English callout boxes need different fixed sizing than Japanese.
 Scoped to desktop so the base responsive mobile layout (<=768px)
 stays in control on phones — otherwise these fixed pixel widths
 leak into the mobile view and overflow the narrow viewport.
=================================================================== */
@media only screen and (min-width: 769px) {
  /* STRENGTH.third (factory) — English speech-bubble backgrounds */
  .STRENGTH.third .factory_img01 .txt {
    width: 600px;
    padding: 25px 20px 25px 90px;
    min-height: 170px;
    background: url(/images/strength-en/factory_bg01.svg) left top no-repeat;
    background-size: contain;
  }
  .STRENGTH.third .factory_img02 .txt {
    width: 760px;
    padding: 25px 100px 50px 120px;
    min-height: 175px;
    background: url(/images/strength-en/factory_bg02.svg) left top no-repeat;
    background-position: -30px top;
    background-size: contain;
  }
  .STRENGTH.third .factory_img03 .txt {
    width: 600px;
    padding: 25px 15px 25px 100px;
    min-height: 170px;
    background: url(/images/strength-en/factory_bg03.svg) left top no-repeat;
    background-size: contain;
  }

  /* STRENGTH.forth capability_wrap01 — .capability_wrap01 is a 1200px flex
     row: white_box (images) + title block. The widths below keep both
     within 1200px so the title block is not starved. */
  /* Green speech-bubble callout drawn in CSS (no fragile cropped-SVG bg).
     Sizes to its own content and keeps the left-pointing tail. */
  .STRENGTH.forth .capability_wrap01 ul li:nth-child(2) .txt {
    position: relative;
    background: #2da04c;
    border: 1px solid #38ad49;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    width: fit-content;
    margin-left: 16px;
    padding: 20px 25px;
    min-height: 170px;
  }
  .STRENGTH.forth .capability_wrap01 ul li:nth-child(2) .txt::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid #2da04c;
  }
  .STRENGTH.forth .capability_wrap01 ul li:nth-child(2) {
    width: 560px;
  }
  .STRENGTH.forth .capability_wrap01 ul li:nth-child(1) {
    width: 150px;
  }
  .STRENGTH.forth .capability_wrap01 .white_box {
    width: 760px;
  }
  .STRENGTH.forth .capability_wrap01 > .txt {
    width: 420px;
  }
}

/* ---- PRODUCT-CAMERA Features callout boxes ----
   English labels (e.g. "Low Power Consumption") are longer than the
   Japanese originals and overflow the fixed 235x83px boxes at the base
   24px size. Shrink the type and switch to flex centering with wrapping
   so multi-word labels stay inside the box and remain vertically centered. */
@media only screen and (min-width: 769px) {
  .PRODUCT-CAMERA .features_box ul li {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }
}

/* ---- PRODUCT-DOWNLOAD submit button ----
   English "Submit" (6 letters) is far wider than the Japanese "送信" (2),
   and the base 10px letter-spacing pushes the centered label into the ▶ arrow
   (background image at right 20px). Tighten the spacing and reserve room for the
   arrow so the text no longer overlaps it. Applies to desktop and mobile. */
.PRODUCT-DOWNLOAD .dl_forms button[type=submit] {
  letter-spacing: 1px;
  padding-right: 22px;
}

/* ---- Mobile overrides (<= 768px) ---- */
@media only screen and (max-width: 768px) {
  .PRODUCT-CAMERA .features_box ul li {
    display: flex;
    align-items: center;
    line-height: 1.3;
    white-space: normal;
  }
  .STRENGTH .lead-section .lead__ttl {
    font-size: 1.3rem;
  }
  .STRENGTH .box .box_ttl {
    font-size: 18px;
  }
  .STRENGTH.second .sec_future li .ttl {
    font-size: 14px;
  }
  .STRENGTH.second .sec_service li .btn {
    width: 100%;
    max-width: 100%;
  }
  .STRENGTH.second .sec_service li .btn span {
    font-size: 14px;
  }
  .SOLUTION.service .service_box li .txt {
    min-height: 80px;
  }
}