/* Full-width layout and container constraints */

/* Make main container fill viewport; limit PC content width */
:root { --pc-max-width: 1512px; }
.pc-view .main-container {
  width: 100%;
  max-width: var(--pc-max-width); /* original design width */
  margin-inline: auto;
  overflow: visible; /* allow full-bleed sections */
}

.sp-view .main-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
}

.sp-view .wrap { width: 100%; left: 0; }

/* Full-bleed sections (background spans the entire viewport width) */
.pc-view .dev-16,
.pc-view .dev-32,
.pc-view .dev-53,
.pc-view .dev-5f {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Center hero text block inside hero (absolute by design) */
/* Revert hero text to design alignment for stability */
.pc-view .flex-row-eaf .text {
  left: 254px !important;
  transform: none !important;
}

/* Ensure header content aligns centrally within page width */
/* Revert hero header positioning to design */
.pc-view .flex-row-eaf .header {
  width: 100%;
  max-width: var(--pc-max-width);
  left: 48px !important;
  right: auto;
  margin: 0;
}

/* Keep hero container within page width (no full-bleed for hero to avoid shift) */
.pc-view .flex-row-eaf {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
  z-index: 0;
  max-width: var(--pc-max-width);
  margin-inline: auto; /* ensure it centers within the page */
  overflow: hidden;    /* prevent inner absolute images from spilling out */
}

/* Add full-bleed background behind hero that spans the viewport */
/* Remove pseudo background and rely on original halves */
.pc-view .flex-row-eaf::before { content: none !important; }

/* Constrain hero inner image halves to container width (background stays full-bleed via ::before) */
/* Restore original hero image halves and keep within container */
.pc-view .flex-row-eaf .image-bg {
  width: 758px !important;
  height: 740px !important;
  left: 0 !important;
  top: 0 !important;
  background: url(../img/L0i2jK5poZ.png) no-repeat center !important;
  background-size: cover !important;
}
.pc-view .flex-row-eaf .image-bg-1 {
  width: 797px !important;
  height: 740px !important;
  left: 783px !important;
  top: 0 !important;
  background: url(../img/SVMB9TEzk0.png) no-repeat center !important;
  background-size: cover !important;
}

/* When the viewport is narrower than the design width, center hero text
   and reflow image halves to keep composition balanced within the container */
@media (min-width: 768px) and (max-width: 1511.98px) {
  /* Keep hero text within left half to avoid overlapping images */
  .pc-view .flex-row-eaf .text {
    left: 48px !important;
    transform: none !important;
    width: calc(50vw - 80px) !important; /* within left half minus margin */
  }
  .pc-view .flex-row-eaf .image-bg,
  .pc-view .flex-row-eaf .image-bg-1 {
    width: 50% !important;
    height: 740px !important;
    top: 0 !important;
    background-size: cover !important;
  }
  .pc-view .flex-row-eaf .image-bg { left: 0 !important; }
  .pc-view .flex-row-eaf .image-bg-1 { left: 50% !important; }

  /* Responsive typography: allow gentle shrink + wrapping */
  .pc-view .veteran-task-2,
  .pc-view .veteran-task-3,
  .pc-view .veteran-task-4 {
    font-size: clamp(28px, 2.6vw, 42px) !important;
    line-height: 1.35 !important;
    letter-spacing: clamp(1px, 0.2vw, 4.2px) !important;
    white-space: normal !important;
  }
  .pc-view .troubleshoot-ai,
  .pc-view .troubleshoot-ai-5,
  .pc-view .troubleshoot-ai-6,
  .pc-view .critical-personnel {
    font-size: clamp(14px, 1.4vw, 20px) !important;
    line-height: 1.8 !important;
    white-space: normal !important;
  }
}

/* SP full-bleed blocks */
.sp-view .mv,
.sp-view .bg,
.sp-view .div,
.sp-view .div-2,
.sp-view .div-div,
.sp-view .div-26,
.sp-view .div-48,
.sp-view .div-53,
.sp-view .footer,
.sp-view .header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Enforce SP container fluid widths and prevent horizontal overflow */
@media (max-width: 767.98px) {
  .sp-view,
  .sp-view .main-container {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .sp-view .wrap {
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important; /* neutralize absolute */
    left: 0 !important;
  }
  /* Hero text block should never exceed viewport width */
  .sp-view .mv .text { 
    width: calc(100vw - 32px) !important; 
    margin-left: 16px !important; 
    margin-right: 16px !important;
  }
  /* (removed overrides to preserve original SP background positions and hero spacing) */
  /* Generic safeguard: any direct child of SP sections should not exceed viewport */
  .sp-view .div,
  .sp-view .div-2,
  .sp-view .div-div,
  .sp-view .div-26,
  .sp-view .div-48,
  .sp-view .div-53 {
    overflow-x: hidden;
  }

  /* Remove hard-coded heights that can cause scroll glitches at the bottom */
  .sp-view .main-container,
  .sp-view .wrap,
  .sp-view .mv,
  .sp-view .div-2,
  .sp-view .div-div,
  .sp-view .div-26,
  .sp-view .div-48,
  .sp-view .div-53,
  .sp-view .footer {
    height: auto !important;
    min-height: unset !important;
  }

  /* Prevent next section background from covering `.div-2` heading */
  .sp-view .div-2 { position: relative; z-index: 20 !important; }
  .sp-view .div-div { position: relative; z-index: 10 !important; overflow: hidden; }

  /* Force `.span-h-3` to be exactly two lines on SP */
  .sp-view .div-2 .h {
    width: calc(100vw - 60px) !important; /* 30px side paddings */
    height: auto !important;
  }
  .sp-view .div-2 .span-h-3 {
    position: static !important; /* avoid absolute overlap */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
    /* responsive text so the second line never wraps further */
    font-size: clamp(18px, 5.6vw, 24px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.5px !important;
  }

  /* Center content cards within `.div-2` regardless of device width */
  .sp-view .div-2 .div-list {
    align-items: center !important; /* center the 340px cards stack */
  }
  .sp-view .div-2 .div-list > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center content in "代表的な機能" section (.div-div) */
  .sp-view .div-div .h-10 {
    width: calc(100vw - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sp-view .div-div .list {
    width: 100% !important;
    align-items: center !important;
  }
  .sp-view .div-div .list > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Re-center large decorative background frames to avoid visual right-shift */
  .sp-view .div-div .frame,
  .sp-view .div-26 .frame-27 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
  }
  .sp-view .div-div .group,
  .sp-view .div-26 .group-28 {
    width: 100% !important;
  }

  /* Ensure inner padding is symmetric so content sits perfectly centered */
  .sp-view .div-2,
  .sp-view .div-div {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Fix overlap in company profile content (SP .contents-55) */
  .sp-view .contents-55,
  .sp-view .frame-56,
  .sp-view .frame-57,
  .sp-view .frame-58,
  .sp-view .frame-5a { width: 100% !important; }
  .sp-view .frame-57,
  .sp-view .frame-58,
  .sp-view .frame-5a { flex-wrap: nowrap !important; align-items: flex-start !important; }
  .sp-view .company-description,
  .sp-view .digital-transformation,
  .sp-view .dx-implementation {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    white-space: normal !important;
  }

  /* Feature headings: control line counts */
  /* 1) 検索時間の短縮による → 1行 */
  .sp-view .search-time-reduction { width: 100% !important; }
  .sp-view .search-time-reduction-31 {
    white-space: nowrap !important;
    font-size: clamp(16px, 5.2vw, 20px) !important;
    line-height: 1.35 !important;
  }
  /* 2) ライン停止時間の短縮 → 1行（サイズは生産性の向上と同一・最大） */
  .sp-view .productivity-improvement,
  .sp-view .line-downtime-reduction {
    font-size: 30px !important;
    line-height: 1.28 !important; /* 38.4px/30px */
    letter-spacing: 1.8px !important;
  }
  .sp-view .line-downtime-reduction { white-space: nowrap !important; }
  /* 3) 作業の標準化・保全スキルの向上 → 2行（サイズは生産性の向上と同一・最大、かつ省略しない） */
  .sp-view .standardization-skills {
    width: calc(100vw - 60px) !important; /* match inner padding of section */
  }
  .sp-view .standardization-skills-43 {
    /* Use forced <br> in markup to define exactly 2 lines */
    white-space: nowrap !important; /* prevent additional wrapping */
    font-size: 30px !important;
    line-height: 1.28 !important; /* 38.4px/30px */
    letter-spacing: 1.8px !important;
  }
}

/* Ensure inner content can be centered within the constrained container */
.pc-view .header {
  width: 100%;
  max-width: var(--pc-max-width);
  margin-inline: auto;
  left: 0; /* neutralize absolute left offset */
  right: 0;
}

/* Generic utility if needed later */
.container {
  max-width: var(--pc-max-width);
  margin-inline: auto;
}

/* Center fixed-width inner content within full-bleed sections */
.pc-view .dev-16 .content,
.pc-view .dev-32 .content-36,
.pc-view .dev-53 .content-58,
.pc-view .dev-5f .content-60,
.pc-view .dev-53 .header-56 {
  width: 100%;
  max-width: var(--pc-max-width);
  margin-inline: auto;
}

/* Remove link underlines on button-styled anchors */
.button,
.button-7,
.button-54,
.button-4a,
.button-65 {
  text-decoration: none !important;
}

/* Remove link underlines for banner anchors */
.banner-69,
.banner-6c,
.banner-6e {
  text-decoration: none !important;
}

/* Remove link underlines for SP banner anchors */
.banner-5c,
.frame-5e,
.banner-5f {
  text-decoration: none !important;
  display: block; /* ensure clickable area matches background size */
}

/* Fix alignment in company profile lists (content-64) */
.pc-view .content-64 .list-65,
.pc-view .content-64 .list-66,
.pc-view .content-64 .list-67 {
  align-items: flex-start; /* top align rows consistently */
}
.pc-view .content-64 .text-38,
.pc-view .content-64 .text-3a,
.pc-view .content-64 .text-3c {
  flex: 0 0 80px; /* fixed label column width */
  width: 80px !important;
}
.pc-view .content-64 .text-39,
.pc-view .content-64 .text-3b,
.pc-view .content-64 .text-3d {
  flex: 1 1 auto;        /* take remaining width */
  width: auto !important;
  height: auto !important; /* avoid fixed heights causing misalignment */
  white-space: normal !important; /* allow wrapping like others */
}

/* Make core PC sections fluid up to max width */
.pc-view .wrap,
.pc-view .dev,
.pc-view .dev-8,
.pc-view .dev-16,
.pc-view .dev-32,
.pc-view .dev-53,
.pc-view .dev-5f,
.pc-view .footer {
  width: 100% !important;
  max-width: var(--pc-max-width);
  margin-inline: auto;
}

/* Full-width color band for select sections (PC) without covering background images */
.pc-view .dev {
  /* spread a large box-shadow to create a full-bleed color band */
  box-shadow: 0 0 0 100vmax #F4FAFF;
  /* reveal the spread outside the element's own box */
  clip-path: inset(0 -100vmax);
}
.pc-view .dev-8 {
  box-shadow: 0 0 0 100vmax #F4FAFF;
  clip-path: inset(0 -100vmax);
}
.pc-view .dev-52 {
  box-shadow: 0 0 0 100vmax #F4FAFF;
  clip-path: inset(0 -100vmax);
}
.pc-view .footer {
  box-shadow: 0 0 0 100vmax #F4FAFF;
  clip-path: inset(0 -100vmax);
}

/* (utility removed on request) */

/* (SP div-coded content removed; reverted to original) */

/* SP: overlay three images (H2.png, t.png, frame.png) on top of background */
@media (max-width: 767.98px) {
  .sp-view .div { position: relative; }
  .sp-view .div .div-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-block: 24px; /* add a bit of top/bottom spacing */
    z-index: 3;
    pointer-events: none; /* purely decorative */
  }
  .sp-view .div .div-overlay img {
    display: block;
    width: auto;
    max-width: 86vw;
    height: auto;
  }
  .sp-view .div .div-overlay .div-h2 { max-width: 72vw; }
  .sp-view .div .div-overlay .div-t { max-width: 84vw; }
  .sp-view .div .div-overlay .div-frame { max-width: 90vw; }

/* SP: div-47 overlay content (df.png, dcontents.png) */
  .sp-view .div-47 { position: relative; }
  .sp-view .div-47 .div47-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-block: 24px;
    z-index: 2;
    pointer-events: none;
  }
  .sp-view .div-47 .div47-overlay img { display: block; height: auto; }
  .sp-view .div-47 .div47-overlay .div47-df { width: min(86vw, 340px); }
  .sp-view .div-47 .div47-overlay .div47-dcontents { width: min(90vw, 360px); }
}

/* Make all title-like headings bold for consistency */
/* Applies to heading containers prefixed with h- and common title classes */
.pc-view [class^="h-"] span,
.pc-view [class^="h-"],
.sp-view [class^="h-"] span,
.sp-view [class^="h-"] {
  font-weight: 700 !important;
}
.pc-view .media-coverage,
.pc-view .company-profile,
.pc-view .h-function,
.pc-view .h-a,
.pc-view .h-19,
.pc-view .h-38,
.pc-view .h-62,
.sp-view .media-coverage,
.sp-view .company-profile,
.sp-view .h-function,
.sp-view .span-h-3 {
  font-weight: 700 !important;
}