:root {
  --ink: #102033;
  --ink-soft: #344657;
  --paper: #f4f8f9;
  --white: #ffffff;
  --line: #d8e5ea;
  --blue: #0b67b2;
  --blue-dark: #081f35;
  --teal: #00a3a7;
  --lime: #7bbf3f;
  --coral: #e05d45;
  --mint: #e8f7f2;
  --sand: #f2efe8;
  --steel: #eaf1f5;
  --shadow: 0 22px 70px rgba(14, 42, 61, 0.16);
  --radius: 8px;
  --header-height: 76px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 244, 0.86)),
    repeating-linear-gradient(90deg, rgba(0, 163, 167, 0.045) 0 1px, transparent 1px 80px);
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    system-ui,
    sans-serif;
  line-height: 1.75;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
li,
dd,
td,
th {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  h1,
  h2,
  h3,
  p,
  li,
  dd,
  td,
  th {
    word-break: auto-phrase;
  }
}

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  z-index: 100;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  clip: auto;
  background: var(--white);
  border: 2px solid var(--blue);
}

.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: var(--header-height);
  background: rgba(250, 253, 253, 0.88);
  border-bottom: 1px solid rgba(185, 210, 220, 0.75);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  gap: 22px;
}

.brand {
  flex: 0 0 auto;
}

.brand img,
.footer-logo img {
  width: 190px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(21%) sepia(46%) saturate(1116%) hue-rotate(175deg) brightness(92%) contrast(93%);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.nav-item {
  position: relative;
}

.site-nav a {
  position: relative;
  padding: 8px 0;
}

.has-dropdown > .nav-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.has-dropdown > .nav-link::after {
  width: 6px;
  height: 6px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.site-nav a[aria-current="page"],
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--blue);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 40;
  display: grid;
  min-width: 220px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 24px 54px rgba(16, 32, 45, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-dropdown::before {
  position: absolute;
  inset: -16px 0 auto;
  height: 16px;
  content: "";
}

.nav-dropdown a {
  padding: 10px 12px;
  color: var(--ink);
  border-radius: 6px;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--blue);
  background: rgba(42, 181, 184, 0.1);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.site-nav .nav-contact {
  padding: 10px 15px;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border-radius: var(--radius);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(540px, 64svh);
  padding: calc(var(--header-height) + 48px) 0 40px;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(0.78) contrast(1.08);
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(90deg, rgba(5, 17, 28, 0.96), rgba(5, 36, 52, 0.78) 52%, rgba(5, 17, 28, 0.32)),
    linear-gradient(135deg, rgba(0, 163, 167, 0.34), rgba(123, 191, 63, 0.18) 48%, rgba(224, 93, 69, 0.2));
}

.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.56;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(135deg, transparent 0 45%, rgba(0, 163, 167, 0.22) 45% 46%, transparent 46% 100%);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.72) 56%, transparent);
}

.hero-content,
.section-inner,
.footer-inner,
.footer-bottom {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  max-width: min(1180px, calc(100% - 40px));
}

.eyebrow,
.section-kicker,
.label {
  margin: 0 0 12px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #a9e2df;
}

.nowrap {
  white-space: nowrap;
}

.hero h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(42px, 5.5vw, 74px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero-lead {
  max-width: 100%;
  margin: 22px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
}

.hero-actions,
.button-row,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--coral), #f0784d);
}

.button-secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.62);
}

.button-light {
  color: var(--blue-dark);
  background: var(--white);
}

.button-outline {
  color: var(--blue-dark);
  background: var(--white);
  border-color: rgba(13, 55, 78, 0.22);
}

.button-outline-light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.64);
}

.section {
  padding: 92px 0;
  position: relative;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 28px);
}

.muted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(234, 241, 245, 0.84)),
    var(--steel);
}

.band-blue {
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(8, 31, 53, 0.98), rgba(0, 163, 167, 0.72)),
    url("https://www.reseau.co.jp/theme/reseau/images/top/img_02.jpg") center / cover;
}

.band-blue .section-kicker {
  color: #a9e2df;
}

.recruit-summary-section {
  padding: 70px 0;
}

.recruit-summary-section .split {
  align-items: center;
}

.recruit-summary-section h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.22;
}

.recruit-summary-section p:not(.section-kicker) {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.75;
}

.recruit-summary-section .button-row {
  justify-content: flex-end;
  margin-top: 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading.compact {
  max-width: 560px;
}

.heading-with-actions {
  display: flex;
  gap: 18px 24px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.heading-with-actions h2 {
  margin: 0;
}

.button-row.compact {
  gap: 10px;
  margin-top: 0;
}

.button-row.compact .button {
  min-height: 48px;
  padding: 14px 22px;
  font-size: 14px;
  white-space: nowrap;
}

.section h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
}

.concept-title {
  font-size: clamp(52px, 7vw, 88px);
  line-height: 1.08;
}

.concept-subtitle {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 900;
  line-height: 1.5;
}

.section-heading p:not(.section-kicker),
.lead-copy,
.content-card p,
.detail-card p,
.prose,
.cta-box p {
  color: var(--ink-soft);
  font-size: 16px;
}

.band-blue p,
.band-blue .lead-copy {
  color: rgba(255, 255, 255, 0.94);
}

.lead-grid,
.split,
.listing-grid,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 58px;
  align-items: start;
}

.lead-grid > *,
.split > *,
.listing-grid > *,
.contact-layout > *,
.card-grid > *,
.feature-grid > *,
.service-detail-list > * {
  min-width: 0;
}

.lead-copy p:first-child {
  margin-top: 0;
}

.lead-copy p:last-child {
  margin-bottom: 0;
}

.lead-grid,
.split:has(> .lead-copy) {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.lead-grid > .lead-copy,
.split:has(> .lead-copy) > .lead-copy,
.message-copy {
  max-width: 920px;
  padding-top: 0;
}

.signature {
  color: var(--ink);
  font-weight: 900;
}

.card-grid {
  display: grid;
  gap: 18px;
}

.card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.business-summary-section {
  padding-top: 78px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 250, 0.96));
}

.business-summary-heading {
  max-width: 900px;
}

.business-summary-heading p:not(.section-kicker) {
  max-width: 820px;
}

.business-summary-heading h2 {
  white-space: nowrap;
}

.business-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.business-summary-grid > * {
  min-width: 0;
}

.business-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 22px 18px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.88)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.88);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.business-summary-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.business-summary-card::after {
  margin-top: auto;
  color: var(--teal);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  content: "→";
  transition: transform 0.22s ease;
}

.business-summary-card span {
  display: inline-flex;
  margin-bottom: 14px;
  color: #9b7b2f;
  font-size: 11px;
  font-weight: 900;
}

.business-summary-card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.3;
  white-space: nowrap;
}

.business-summary-card p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: normal;
}

.business-summary-card:hover,
.business-summary-card:focus-visible {
  border-color: rgba(42, 181, 184, 0.58);
  box-shadow: 0 24px 54px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.business-summary-card:hover::after,
.business-summary-card:focus-visible::after {
  transform: translateX(8px);
}

.business-summary-card:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

.business-map-shell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.94)),
    repeating-linear-gradient(90deg, rgba(7, 42, 68, 0.05) 0 1px, transparent 1px 82px),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 28px 72px rgba(18, 39, 58, 0.11);
}

.business-map-shell::before {
  position: absolute;
  inset: 68px 11%;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.65;
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(42, 181, 184, 0.28) calc(50% - 1px), rgba(42, 181, 184, 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(155, 123, 47, 0.24) calc(50% - 1px), rgba(155, 123, 47, 0.24) calc(50% + 1px), transparent calc(50% + 1px));
}

.business-map-core {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 2;
  grid-row: 2;
  align-content: center;
  justify-items: center;
  min-height: 206px;
  padding: 28px 24px;
  color: var(--white);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(8, 31, 53, 0.98), rgba(8, 75, 90, 0.96)),
    var(--blue-dark);
  border: 1px solid rgba(214, 190, 122, 0.42);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px rgba(8, 31, 53, 0.22);
}

.business-map-core span,
.business-map-node span {
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.business-map-core span {
  color: #d6be7a;
}

.business-map-core strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.25;
}

.business-map-core p {
  max-width: 280px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.business-map-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 184px;
  padding: 24px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.business-map-node::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.business-map-node h3 {
  margin: 14px 0 10px;
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.32;
  white-space: nowrap;
}

.business-map-node p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.business-map-node em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 18px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.business-map-node em::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: var(--coral);
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.business-map-node:hover,
.business-map-node:focus-visible {
  border-color: rgba(42, 181, 184, 0.6);
  box-shadow: 0 24px 54px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.business-map-node:hover em::after,
.business-map-node:focus-visible em::after {
  width: 38px;
  transform: translateX(2px);
}

.business-map-node:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

.map-it {
  grid-column: 1;
  grid-row: 1;
}

.map-people {
  grid-column: 3;
  grid-row: 1;
}

.map-telecom {
  grid-column: 1;
  grid-row: 3;
}

.map-infra {
  grid-column: 3;
  grid-row: 3;
}

@media (max-width: 940px) {
  .business-map-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 22px;
  }

  .business-map-shell::before {
    display: none;
  }

  .business-map-core {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
    order: -1;
  }

  .business-map-node {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  .business-map-node h3 {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .business-map-shell {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .business-map-core,
  .business-map-node {
    padding: 22px;
  }
}

.business-premium-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.business-premium-card {
  position: relative;
  display: flex;
  min-height: 390px;
  padding: 24px;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(8, 31, 53, 0.18), rgba(8, 31, 53, 0.88)),
    var(--card-image) center / cover;
  border: 1px solid rgba(214, 190, 122, 0.38);
  border-radius: var(--radius);
  box-shadow: 0 28px 68px rgba(18, 39, 58, 0.16);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.business-premium-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(90deg, rgba(214, 190, 122, 0.26), transparent 42%);
  opacity: 0.86;
}

.business-premium-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.premium-index {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(42px, 4.4vw, 72px);
  font-weight: 900;
  line-height: 0.9;
}

.premium-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  min-width: 0;
}

.premium-card-body p {
  width: fit-content;
  margin: 0 0 12px;
  padding: 6px 10px;
  color: #102d3d;
  font-size: 11px;
  font-weight: 900;
  background: rgba(214, 190, 122, 0.92);
  border-radius: 999px;
}

.premium-card-body h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.28;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

.premium-card-body strong {
  display: block;
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  line-height: 1.72;
}

.premium-card-body em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 22px;
  color: var(--white);
  font-style: normal;
  font-weight: 900;
}

.premium-card-body em::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: #d6be7a;
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.business-premium-card:hover,
.business-premium-card:focus-visible {
  border-color: rgba(214, 190, 122, 0.78);
  box-shadow: 0 34px 76px rgba(18, 39, 58, 0.22);
  transform: translateY(-4px);
}

.business-premium-card:hover .premium-card-body em::after,
.business-premium-card:focus-visible .premium-card-body em::after {
  width: 40px;
  transform: translateX(2px);
}

.business-premium-card:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .business-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-premium-card {
    min-height: 320px;
  }
}

@media (max-width: 640px) {
  .business-premium-grid {
    grid-template-columns: 1fr;
  }

  .business-premium-card {
    min-height: 280px;
  }
}

.business-problem-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 22px;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.95)),
    repeating-linear-gradient(90deg, rgba(7, 42, 68, 0.045) 0 1px, transparent 1px 82px),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 28px 72px rgba(18, 39, 58, 0.1);
}

.problem-hero {
  display: grid;
  align-content: center;
  min-height: 100%;
  padding: 34px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(8, 31, 53, 0.98), rgba(8, 75, 90, 0.95)),
    var(--blue-dark);
  border: 1px solid rgba(214, 190, 122, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 24px 56px rgba(8, 31, 53, 0.2);
}

.problem-hero span {
  color: #d6be7a;
  font-size: 12px;
  font-weight: 900;
}

.problem-hero h3 {
  margin: 16px 0 0;
  font-size: clamp(27px, 2.7vw, 38px);
  line-height: 1.24;
}

.problem-hero p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.85;
}

.problem-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.problem-route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.problem-route-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.problem-tag {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.problem-route-card h3 {
  margin: 12px 0 10px;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.35;
}

.problem-route-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.72;
}

.problem-route-card ul {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.problem-route-card li {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.problem-route-card li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--teal);
  border-radius: 50%;
}

.problem-route-card em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 18px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.problem-route-card em::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: var(--coral);
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.problem-route-card:hover,
.problem-route-card:focus-visible {
  border-color: rgba(42, 181, 184, 0.6);
  box-shadow: 0 24px 54px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.problem-route-card:hover em::after,
.problem-route-card:focus-visible em::after {
  width: 38px;
  transform: translateX(2px);
}

.problem-route-card:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1040px) {
  .business-problem-shell {
    grid-template-columns: 1fr;
  }

  .problem-hero {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .business-problem-shell {
    padding: 18px;
  }

  .problem-hero {
    padding: 24px;
  }

  .problem-route-grid {
    grid-template-columns: 1fr;
  }

  .problem-route-card {
    min-height: 0;
    padding: 22px;
  }
}

.business-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.94)),
    repeating-linear-gradient(90deg, rgba(7, 42, 68, 0.045) 0 1px, transparent 1px 82px),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 28px 72px rgba(18, 39, 58, 0.1);
}

.dashboard-lead {
  display: grid;
  align-content: center;
  min-height: 100%;
  padding: 36px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(8, 31, 53, 0.98), rgba(8, 75, 90, 0.95)),
    var(--blue-dark);
  border: 1px solid rgba(214, 190, 122, 0.42);
  border-radius: var(--radius);
  box-shadow: 0 24px 56px rgba(8, 31, 53, 0.2);
}

.dashboard-lead span {
  color: #d6be7a;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-lead h3 {
  margin: 16px 0 0;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.24;
}

.dashboard-lead p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.85;
}

.dashboard-lead .text-link {
  margin-top: 28px;
  color: var(--white);
}

.dashboard-lead .text-link::after {
  background: #d6be7a;
}

.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 24px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.dashboard-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.dashboard-card span {
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-card h3 {
  margin: 12px 0 16px;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.35;
}

.dashboard-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.dashboard-card dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(185, 210, 220, 0.74);
}

.dashboard-card dt,
.dashboard-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.dashboard-card dt {
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-card dd {
  color: var(--ink-soft);
  font-weight: 800;
}

.dashboard-card em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 18px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.dashboard-card em::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: var(--coral);
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.dashboard-card:hover,
.dashboard-card:focus-visible {
  border-color: rgba(42, 181, 184, 0.6);
  box-shadow: 0 24px 54px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.dashboard-card:hover em::after,
.dashboard-card:focus-visible em::after {
  width: 38px;
  transform: translateX(2px);
}

.dashboard-card:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .business-dashboard {
    grid-template-columns: 1fr;
  }

  .dashboard-lead {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .business-dashboard {
    padding: 18px;
  }

  .dashboard-lead {
    padding: 24px;
  }

  .dashboard-card-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card {
    min-height: 0;
    padding: 22px;
  }

  .dashboard-card dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.business-pillar-visual {
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.95)),
    repeating-linear-gradient(90deg, rgba(7, 42, 68, 0.045) 0 1px, transparent 1px 82px),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 28px 72px rgba(18, 39, 58, 0.1);
}

.pillar-visual-lead {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(185, 210, 220, 0.82);
}

.pillar-visual-lead span {
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.pillar-visual-lead h3 {
  margin: 12px 0 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.18;
}

.pillar-visual-lead p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.8;
}

.pillar-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding-top: 26px;
}

.pillar-visual-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 430px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: 1px solid rgba(185, 210, 220, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pillar-visual-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(214, 190, 122, 0.1), transparent 48%);
}

.pillar-number {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.54);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.pillar-bar {
  position: relative;
  min-height: 124px;
  background:
    linear-gradient(135deg, rgba(8, 31, 53, 0.98), rgba(8, 75, 90, 0.96)),
    var(--blue-dark);
}

.pillar-bar::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.pillar-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.pillar-content p {
  width: fit-content;
  margin: 0 0 13px;
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.pillar-content h3 {
  margin: 0;
  font-size: clamp(20px, 1.65vw, 25px);
  line-height: 1.34;
}

.pillar-content strong {
  display: block;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.72;
}

.pillar-content em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 24px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.pillar-content em::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: var(--coral);
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.pillar-visual-card:hover,
.pillar-visual-card:focus-visible {
  border-color: rgba(214, 190, 122, 0.64);
  box-shadow: 0 26px 62px rgba(18, 39, 58, 0.14);
  transform: translateY(-4px);
}

.pillar-visual-card:hover .pillar-content em::after,
.pillar-visual-card:focus-visible .pillar-content em::after {
  width: 38px;
  transform: translateX(2px);
}

.pillar-visual-card:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .pillar-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillar-visual-card {
    min-height: 340px;
  }
}

@media (max-width: 760px) {
  .pillar-visual-lead {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .business-pillar-visual {
    padding: 18px;
  }

  .pillar-visual-grid {
    grid-template-columns: 1fr;
  }

  .pillar-visual-card {
    min-height: 0;
  }

  .pillar-bar {
    min-height: 94px;
  }
}

.home-job-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 250, 0.94)),
    var(--white);
}

.home-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 42px;
  align-items: center;
}

.home-job-copy {
  max-width: 560px;
}

.home-job-copy h2 {
  white-space: nowrap;
}

.home-job-copy p:not(.section-kicker) {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.85;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
}

.home-job-copy .button-row.compact {
  margin-top: 24px;
}

.home-job-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-job-item {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 182px;
  padding: 22px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.88);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-job-item::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.home-job-item::after {
  align-self: end;
  margin-top: auto;
  color: var(--teal);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  content: "→";
  transition: transform 0.22s ease;
}

.home-job-item strong {
  font-size: 17px;
  line-height: 1.45;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
}

.home-job-item > span:not(.status-tag) {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.home-job-item:hover,
.home-job-item:focus-visible {
  border-color: rgba(42, 181, 184, 0.58);
  box-shadow: 0 24px 54px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.home-job-item:hover::after,
.home-job-item:focus-visible::after {
  transform: translateX(8px);
}

.home-job-item:focus-visible {
  outline: 3px solid rgba(42, 181, 184, 0.24);
  outline-offset: 3px;
}

.strength-section .section-heading {
  max-width: 860px;
}

.strength-grid .content-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 228px;
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
}

.strength-grid .card-number {
  margin-bottom: 14px;
  color: #9b7b2f;
}

.strength-grid .content-card p {
  line-height: 1.75;
}

.trust-list .status-tag {
  width: fit-content;
}

.about-strength-section .card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.about-strength-card {
  min-height: 188px;
  padding: 24px 18px;
}

.about-strength-card h3 {
  white-space: nowrap;
}

.about-strength-card p {
  font-size: 14px;
  line-height: 1.72;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: normal;
}

.about-strength-copy span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.about-strength-copy span + span {
  margin-left: 0;
}

.pillar-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(135deg, #061823 0%, #0d2d31 48%, #17271f 100%);
  isolation: isolate;
}

.pillar-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.34;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(135deg, transparent 0 42%, rgba(214, 190, 122, 0.18) 42% 43%, transparent 43% 100%);
}

.pillar-section::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 7px;
  content: "";
  background: linear-gradient(90deg, var(--teal), #d6be7a, var(--coral));
}

.pillar-heading {
  max-width: 880px;
}

.pillar-heading .section-kicker {
  color: #d6be7a;
}

.pillar-heading h2 {
  color: var(--white);
}

.pillar-heading p:not(.section-kicker) {
  max-width: none;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}

.pillar-section .card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pillar-section .content-card.strong {
  min-height: 330px;
  padding: 26px 20px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(214, 190, 122, 0.38);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.pillar-section .content-card.strong::before {
  height: 4px;
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.pillar-section .card-number {
  color: #d6be7a;
  font-size: 14px;
}

.pillar-section .content-card h3 {
  color: var(--white);
}

.pillar-section .content-card p,
.pillar-section .mini-list li {
  color: rgba(255, 255, 255, 0.94);
}

.pillar-section .content-card p,
.service-lineup-section .content-card p,
.business-domain-section .content-card p {
  font-size: 13px;
  line-height: 1.68;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
  word-break: normal;
}

.service-copy span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

.service-copy span + span {
  margin-left: 0.1em;
}

.pillar-section .mini-list li::before {
  background: #d6be7a;
}

.pillar-section .text-link {
  color: var(--white);
}

.service-lineup-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 20% 10%, rgba(214, 190, 122, 0.16), transparent 32%),
    linear-gradient(135deg, #071b28 0%, #113238 54%, #162a23 100%);
  isolation: isolate;
}

.service-lineup-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.26;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 86px 86px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 86px 86px;
}

.service-lineup-heading {
  max-width: 920px;
}

.service-lineup-heading .section-kicker {
  color: #d6be7a;
}

.service-lineup-heading h2 {
  color: var(--white);
}

.service-lineup-heading p:not(.section-kicker) {
  max-width: 860px;
  color: rgba(255, 255, 255, 0.94);
}

.service-lineup-section .card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.service-lineup-section .content-card.strong {
  min-height: 330px;
  padding: 26px 20px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(214, 190, 122, 0.36);
  box-shadow: 0 26px 68px rgba(0, 0, 0, 0.22);
}

.service-lineup-section .content-card.strong::before {
  height: 4px;
  background: linear-gradient(90deg, #d6be7a, var(--teal), var(--coral));
}

.service-lineup-section .card-number {
  color: #d6be7a;
}

.service-lineup-section .content-card h3 {
  color: var(--white);
}

.service-lineup-section .content-card p,
.service-lineup-section .mini-list li {
  color: rgba(255, 255, 255, 0.94);
}

.service-lineup-section .mini-list li::before {
  background: #d6be7a;
}

.service-lineup-section .text-link {
  color: var(--white);
}

.business-domain-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 250, 0.92)),
    var(--white);
}

.business-domain-section::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.7;
  background:
    linear-gradient(90deg, rgba(7, 42, 68, 0.05) 1px, transparent 1px) 0 0 / 86px 86px,
    linear-gradient(0deg, rgba(7, 42, 68, 0.04) 1px, transparent 1px) 0 0 / 86px 86px;
}

.business-domain-section .section-inner {
  position: relative;
}

.business-domain-heading {
  max-width: 900px;
}

.business-domain-heading .section-kicker {
  color: #9b7b2f;
}

.business-domain-heading h2 {
  color: var(--ink);
}

.business-domain-heading p:not(.section-kicker) {
  max-width: 820px;
}

.business-domain-section .card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.business-domain-section .content-card.strong {
  min-height: 330px;
  padding: 26px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 251, 0.94)),
    var(--white);
  border-color: rgba(155, 123, 47, 0.3);
  box-shadow:
    0 28px 64px rgba(14, 42, 61, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.business-domain-section .content-card.strong::before {
  height: 4px;
  background: linear-gradient(90deg, #9b7b2f, var(--teal), var(--coral));
}

.business-domain-section .card-number {
  color: #9b7b2f;
}

.business-domain-section .text-link {
  color: var(--blue);
}

.benefit-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.environment-link-grid .content-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.environment-link-grid .text-link {
  margin-top: auto;
  padding-top: 18px;
}

.telecom-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 44px;
  align-items: center;
}

.telecom-intro-copy .lead-copy {
  margin-top: 24px;
}

.telecom-intro-visual {
  margin: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(18, 39, 58, 0.1);
}

.telecom-intro-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.telecom-intro-visual figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.telecom-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.telecom-summary-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 20px;
  background: var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 20px 48px rgba(18, 39, 58, 0.08);
}

.telecom-summary-card img {
  width: 100%;
  height: 100%;
  min-height: 242px;
  object-fit: cover;
  border-radius: 6px;
}

.telecom-summary-card > div {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.telecom-summary-card span {
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.telecom-summary-card h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.telecom-summary-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}

.telecom-summary-card .mini-list {
  margin-top: 2px;
}

.it-solution-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.it-solution-summary-card {
  grid-template-columns: 1fr;
  align-content: start;
  padding: 18px;
}

.it-solution-summary-card img {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.it-solution-summary-card h3 {
  font-size: clamp(19px, 1.7vw, 23px);
}

.content-card,
.detail-card,
.job-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
}

.content-card::before,
.detail-card::before,
.job-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--teal), var(--lime), var(--coral));
}

.content-card.strong,
.detail-card,
.job-card {
  box-shadow: var(--shadow);
}

.content-card h3,
.detail-card h3,
.job-card h3,
.feature-panel h3 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.35;
}

.detail-card h3 {
  word-break: keep-all;
  overflow-wrap: normal;
}

.content-card p,
.detail-card p,
.job-card p {
  margin: 0;
}

.staffing-feature-card {
  display: grid;
  grid-template-rows: 92px minmax(34px, auto) 1fr;
  align-content: start;
  gap: 14px;
  min-height: 340px;
}

.staffing-feature-heading {
  max-width: 980px;
}

.staffing-feature-heading p:not(.section-kicker) {
  max-width: none;
  white-space: nowrap;
}

.staffing-feature-card h3 {
  margin-bottom: 0;
}

.staffing-feature-card p {
  line-height: 1.72;
}

.staffing-card-visual {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  background: rgba(42, 181, 184, 0.1);
  border: 1px solid rgba(42, 181, 184, 0.24);
  border-radius: 50%;
}

.staffing-card-visual img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.service-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(185, 210, 220, 0.72);
}

.service-meta div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.service-meta dt {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.service-meta dd {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.service-summary {
  grid-column: 2 / -1;
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(185, 210, 220, 0.72);
  color: var(--ink-soft);
  font-size: 14px !important;
  line-height: 1.55;
}

.service-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.service-summary-list div {
  display: grid;
  grid-template-columns: 42px minmax(360px, 1fr);
  gap: 12px;
  align-items: start;
}

.service-summary-list div + div {
  margin-top: 4px;
}

.service-summary-list dt {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.service-summary-list dd {
  margin: 0;
  color: var(--ink-soft);
}

.infra-map-section {
  padding-top: 36px;
}

.infra-map-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 44px;
  align-items: center;
}

.infra-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 430px;
}

.infra-map::before,
.infra-map::after {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  content: "";
  background: rgba(34, 139, 151, 0.24);
  transform: translate(-50%, -50%);
}

.infra-map::before {
  width: 72%;
  height: 1px;
}

.infra-map::after {
  width: 1px;
  height: 72%;
}

.infra-map-core {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  color: var(--white);
  text-align: center;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  border: 6px solid var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.infra-map-core strong {
  font-size: 18px;
  line-height: 1.45;
}

.infra-map-item {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  min-height: 190px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
    var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.infra-map-item:hover,
.infra-map-item:focus-visible {
  border-color: rgba(42, 181, 184, 0.8);
  box-shadow: 0 24px 58px rgba(18, 39, 58, 0.13);
  transform: translateY(-3px);
}

.infra-map-item span {
  justify-self: center;
  width: fit-content;
  margin-bottom: 12px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}

.infra-map-item h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.35;
}

.infra-map-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.relationship-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(360px, 1fr);
  gap: 28px 46px;
  align-items: center;
}

.detail-card[id],
.telecom-summary-card[id] {
  scroll-margin-top: calc(var(--header-height) + 28px);
}

.relationship-layout > * {
  min-width: 0;
}

.relationship-layout > .relationship-copy {
  grid-column: 1 / -1;
}

.relationship-layout .section-kicker + h2 {
  margin-bottom: 16px;
}

.relationship-layout p {
  color: var(--ink-soft);
}

.relationship-figure {
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
}

.relationship-figure img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.history-aside {
  align-self: start;
  position: relative;
  padding-left: 22px;
}

.history-section .split {
  grid-template-columns: minmax(240px, 0.34fr) minmax(680px, 1fr);
  gap: 44px;
}

.history-aside::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--blue));
}

.history-aside p:not(.section-kicker) {
  max-width: 420px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  line-height: 1.85;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 420px;
  margin-top: 28px;
}

.history-stats div {
  display: grid;
  justify-items: center;
  padding: 16px 8px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: 8px;
  text-align: center;
}

.history-stats strong {
  display: block;
  color: var(--teal);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1;
  text-align: center;
  transform: translateX(-5px);
  white-space: nowrap;
}

.history-stats span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.history-note {
  padding-top: 18px;
  border-top: 1px solid rgba(126, 160, 174, 0.38);
  font-size: 14px;
}

.compact-flow {
  gap: 14px;
}

.compact-flow article {
  padding: 20px;
}

.compact-flow article h3 {
  margin-bottom: 6px;
  font-size: 17px;
}

.compact-flow article p {
  font-size: 14px;
  line-height: 1.6;
}

.card-grid.four .content-card.strong {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-grid.four .content-card.strong h3 {
  white-space: nowrap;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.25;
}

.card-grid.four .content-card.strong .text-link {
  margin-top: auto;
  padding-top: 18px;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.cert-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.08);
}

.cert-image,
.cert-image-grid a {
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: 8px;
}

.cert-image {
  min-height: 190px;
  padding: 22px;
}

.cert-image img,
.cert-image-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cert-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cert-image-grid a {
  min-height: 190px;
  padding: 10px;
}

.cert-card-privacy .cert-image {
  min-height: 190px;
  padding: 34px 42px;
}

.cert-card-privacy .cert-image img {
  max-width: 170px;
  max-height: 120px;
}

.cert-body {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 12px;
  height: 100%;
}

.cert-body h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

.cert-body p {
  margin: 0;
  color: var(--ink-soft);
}

.cert-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  align-self: end;
  margin-top: 2px;
}

.cert-links .text-link {
  margin-top: 8px;
  font-size: 14px;
}

.card-number {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.mini-list {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 22px 0;
  list-style: none;
}

.mini-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.mini-list li::before {
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--teal);
  border-radius: 50%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 18px;
  color: var(--blue);
  font-weight: 900;
}

.text-link::after {
  width: 24px;
  height: 8px;
  margin-left: 10px;
  content: "";
  background: var(--coral);
  clip-path: polygon(0 43%, calc(100% - 8px) 43%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 57%, 0 57%);
  transition: width 180ms ease, transform 180ms ease;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  width: 38px;
  transform: translateX(2px);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.feature-panel {
  min-height: 420px;
  display: flex;
  align-items: end;
  padding: 34px;
  overflow: hidden;
  color: var(--white);
  border-radius: var(--radius);
  background:
    linear-gradient(0deg, rgba(8, 31, 53, 0.92), rgba(8, 31, 53, 0.24)),
    var(--panel-image) center / cover;
}

.feature-panel .section-kicker {
  color: #a9e2df;
}

.feature-panel p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
}

.list-block,
.news-list,
.timeline {
  display: grid;
  border-top: 1px solid var(--line);
}

.list-block a,
.news-list article,
.timeline div {
  display: grid;
  gap: 5px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.list-block time,
.news-list time,
.timeline time,
.job-meta time {
  color: var(--coral);
  font-size: 13px;
  font-weight: 900;
}

.list-block strong,
.news-list h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.list-block span {
  color: var(--ink-soft);
  font-size: 14px;
}

.blog-index-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.blog-index-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.blog-index-card time {
  color: var(--coral);
  font-size: 13px;
  font-weight: 900;
}

.blog-index-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.blog-index-card span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.blog-list-count {
  margin: -10px 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}

.blog-pagination a,
.blog-pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.blog-pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.blog-pagination .is-current {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.blog-pagination .is-disabled {
  color: rgba(34, 52, 64, 0.38);
  pointer-events: none;
}

.blog-article-shell {
  padding: clamp(28px, 4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.blog-article-head {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.blog-article-head time {
  color: var(--coral);
  font-size: 13px;
  font-weight: 900;
}

.blog-article-head h2 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.28;
}

.blog-article {
  line-height: 2;
}

.blog-article p {
  margin: 0 0 18px;
}

.blog-article h3 {
  margin: 34px 0 14px;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  line-height: 1.45;
}

.blog-article ul {
  margin: 0 0 22px;
  padding-left: 1.5em;
}

.blog-article li + li {
  margin-top: 6px;
}

.blog-article a {
  color: var(--blue);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.blog-article img {
  width: min(100%, 260px);
  height: 180px;
  margin: 8px 6px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(12, 38, 54, 0.12);
  vertical-align: middle;
}

.blog-article table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}

.blog-article th,
.blog-article td {
  padding: 12px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.blog-post-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 28px;
}

.blog-post-nav a {
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.blog-post-nav a:last-child {
  text-align: right;
}

.blog-post-nav span {
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
}

.blog-post-nav strong {
  font-size: 14px;
  line-height: 1.45;
}

.blog-post-nav-index {
  place-content: center;
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
}

.cta-section {
  background: var(--mint);
}

.cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 42px;
  align-items: center;
}

.cta-box h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.22;
  white-space: nowrap;
}

.cta-box > div:first-child > p:not(.section-kicker) {
  max-width: none;
  white-space: nowrap;
}

.cta-box .cta-actions {
  flex-wrap: nowrap;
  align-items: stretch;
}

.cta-box .button,
.phone-link span,
.phone-link strong,
.phone-link small {
  white-space: nowrap;
}

.phone-link {
  display: grid;
  gap: 2px;
  padding: 24px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.phone-link.large {
  margin: 22px 0;
}

.phone-link span,
.phone-link small {
  color: var(--ink-soft);
  font-weight: 800;
}

.phone-link strong {
  color: var(--blue);
  font-size: 30px;
  line-height: 1.2;
}

.access-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 42px;
  align-items: stretch;
}

.access-copy {
  display: grid;
  align-content: center;
}

.access-copy p {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
}

.access-copy strong {
  color: var(--ink);
  font-size: 20px;
}

.access-map {
  min-height: 380px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

.flow-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.flow-list article {
  padding: 26px;
  background: var(--white);
}

.flow-list span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  font-weight: 900;
}

.flow-list h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.flow-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.service-detail-list {
  display: grid;
  gap: 22px;
}

.it-detail-section {
  padding-top: 52px;
}

.it-intro-section {
  padding-bottom: 56px;
}

.it-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.detail-card {
  display: grid;
  grid-template-columns: 72px minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: 22px 28px;
  align-items: start;
}

.it-detail-grid .detail-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
}

.it-detail-grid .detail-card h3 {
  font-size: 21px;
}

.detail-card .card-number {
  margin: 0;
}

.detail-card .chip-row {
  grid-column: 2 / -1;
  margin-top: -6px;
}

.it-detail-grid .detail-card .chip-row {
  grid-column: auto;
  margin-top: 6px;
}

.chip-row,
.partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.partner-showcase {
  display: grid;
  gap: 28px;
}

.partner-logo-list,
.partner-name-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-logo-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.partner-logo-list li {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.partner-logo-list img {
  display: block;
  width: 100%;
  max-width: 180px;
  max-height: 66px;
  object-fit: contain;
}

.partner-name-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 22px;
  background: rgba(238, 248, 245, 0.58);
  border: 1px solid #cae7df;
  border-radius: 8px;
}

.partner-name-list li {
  position: relative;
  padding-left: 15px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.partner-name-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.chip-row.large {
  margin-top: 0;
}

.chip-row span,
.partner-list span,
.status-tag {
  padding: 8px 12px;
  color: var(--blue-dark);
  background: #eef8f5;
  border: 1px solid #cae7df;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.status-tag {
  display: inline-flex;
  width: fit-content;
  color: #166b45;
}

.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 660px;
}

.data-table th,
.data-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  width: 210px;
  color: var(--blue-dark);
  background: #eef4f7;
  font-weight: 900;
}

.data-table tr:last-child th,
.data-table tr:last-child td {
  border-bottom: 0;
}

.info-list {
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 22px 0 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.info-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  background: var(--white);
}

.info-list.compact div {
  grid-template-columns: 100px minmax(0, 1fr);
  padding: 12px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.info-list.compact {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.info-list.compact div:last-child {
  border-bottom: 0;
}

.info-list dt {
  color: var(--ink-soft);
  font-weight: 900;
}

.info-list dd {
  margin: 0;
}

.statement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.statement-grid strong {
  padding: 18px;
  color: var(--blue-dark);
  background: var(--mint);
  border: 1px solid #cce1da;
  border-radius: var(--radius);
}

.job-list {
  display: grid;
  gap: 18px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.job-meta span {
  padding: 4px 10px;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.stat-grid article {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat-grid strong {
  display: block;
  color: var(--blue);
  font-size: 44px;
  line-height: 1;
}

.stat-grid span {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  font-weight: 900;
}

.infographic-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.infographic-card {
  min-width: 0;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
}

.infographic-card.is-half {
  grid-column: span 3;
}

.infographic-card.is-third {
  grid-column: span 2;
}

.infographic-card.is-two-third {
  grid-column: span 4;
}

.chart-kicker {
  margin: 0 0 8px;
  color: #9b7b2f;
  font-size: 12px;
  font-weight: 900;
}

.infographic-card h3 {
  margin: 0 0 20px;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.35;
}

.stacked-chart {
  display: flex;
  height: 38px;
  overflow: hidden;
  background: rgba(7, 42, 68, 0.08);
  border-radius: 999px;
}

.chart-segment {
  display: grid;
  min-width: 0;
  place-items: center;
}

.stacked-chart .segment-tech {
  width: 92%;
}

.stacked-chart .segment-sales {
  width: 4%;
}

.stacked-chart .segment-admin {
  width: 3%;
}

.stacked-chart .segment-other {
  width: 1%;
}

.segment-tech,
.gender-ratio span:first-child,
.segment-career {
  background: var(--blue);
}

.segment-sales,
.segment-fresh {
  background: var(--teal);
}

.segment-admin,
.gender-ratio span:last-child {
  background: #d6be7a;
}

.segment-other {
  background: var(--coral);
}

.stacked-chart em {
  color: var(--white);
  font-style: normal;
  font-weight: 900;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.chart-legend.compact {
  margin-top: 14px;
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chart-legend strong {
  color: var(--ink);
}

.ratio-chart {
  display: grid;
  min-height: 118px;
  overflow: hidden;
  color: var(--white);
  border: 1px solid rgba(185, 210, 220, 0.82);
  border-radius: 8px;
}

.gender-ratio {
  grid-template-columns: 8fr 2fr;
}

.career-ratio {
  grid-template-columns: minmax(116px, 0.26fr) minmax(0, 0.74fr);
}

.ratio-chart span {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 16px 10px;
}

.ratio-chart span:first-child {
  background: var(--teal);
}

.ratio-chart span:last-child {
  background: var(--blue);
}

.gender-ratio span:first-child {
  background: var(--blue);
}

.gender-ratio span:last-child {
  background: #d6be7a;
  color: var(--ink);
}

.career-ratio span:first-child {
  background: var(--teal);
}

.career-ratio span:last-child {
  background: var(--blue);
}

.ratio-chart strong {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  white-space: nowrap;
}

.career-ratio strong {
  font-size: clamp(22px, 2vw, 32px);
}

.ratio-chart small {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 900;
}

.chart-note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.age-stat {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  min-height: 118px;
}

.age-stat strong {
  color: var(--blue);
  font-size: clamp(56px, 5vw, 78px);
  line-height: 0.9;
}

.age-stat span {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .infographic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infographic-card.is-half,
  .infographic-card.is-third {
    grid-column: auto;
  }

  .infographic-card.is-two-third {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .infographic-grid {
    grid-template-columns: 1fr;
  }

  .infographic-card,
  .infographic-card.is-two-third {
    grid-column: auto;
  }

  .ratio-chart {
    min-height: 96px;
  }

  .career-ratio {
    grid-template-columns: 1fr;
  }

  .age-stat {
    min-height: 96px;
  }
}

.timeline div {
  grid-template-columns: 130px minmax(0, 1fr);
}

.timeline p {
  margin: 0;
}

.history-timeline {
  gap: 12px;
  border-top: 0;
}

.history-timeline div {
  position: relative;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 18px 22px 18px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(12, 38, 54, 0.08);
}

.history-timeline div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--blue));
}

.history-timeline time {
  color: var(--ink);
  line-height: 1.5;
}

.history-timeline p {
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 100%;
}

.partner-list {
  margin-top: 0;
}

.contact-side {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.contact-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
}

.contact-form legend,
.contact-form label {
  font-weight: 900;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
}

.contact-form fieldset label,
.contact-form .agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.contact-form fieldset input,
.contact-form .agree input {
  width: auto;
  margin: 0;
}

.form-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.form-note.is-visible {
  color: var(--blue);
  font-weight: 900;
}

.narrow {
  max-width: 880px;
}

.prose h2 {
  margin-top: 44px;
  font-size: 30px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.policy-date {
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.privacy-policy {
  max-width: 980px;
}

.privacy-policy .policy-date {
  display: grid;
  gap: 3px;
  margin: 0 0 24px auto;
  width: fit-content;
  min-width: min(100%, 360px);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.9;
  text-align: left;
}

.policy-date-row {
  display: grid;
  grid-template-columns: 4em 4.25em 4.75em;
  column-gap: 0;
  justify-content: end;
}

.policy-date-row span:first-child {
  text-align: right;
}

.policy-date-row span:nth-child(2),
.policy-date-row span:last-child {
  font-variant-numeric: tabular-nums;
}

.policy-date-row span:nth-child(2) {
  text-align: left;
}

.policy-date-row span:last-child {
  text-align: right;
}

.policy-date-name {
  display: block;
  text-align: right;
}

.privacy-policy-card {
  padding: clamp(28px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(185, 210, 220, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(18, 39, 58, 0.08);
}

.privacy-policy-card h2 {
  margin: 0 0 18px;
}

.privacy-policy-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.45;
}

.policy-lead {
  margin-bottom: 30px;
}

.privacy-policy-list {
  display: grid;
  gap: 24px;
  margin: 0;
}

.privacy-policy-list dt {
  padding: 0 0 0 14px;
  color: var(--ink);
  border-left: 4px solid var(--teal);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
}

.privacy-policy-list dd {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(185, 210, 220, 0.72);
}

.privacy-policy-list dd:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.privacy-policy-list p {
  margin: 0 0 18px;
}

.privacy-policy-list ol,
.privacy-policy-list ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-left: 1.45em;
}

.privacy-policy-list li {
  padding-left: 0.1em;
}

.privacy-policy-list li > ul,
.privacy-policy-list li > ol {
  margin-top: 12px;
}

.policy-dash-list {
  list-style: none;
  padding-left: 0 !important;
}

.policy-note {
  margin: 16px 0 4px;
  padding: 18px;
  background: rgba(42, 181, 184, 0.08);
  border: 1px solid rgba(42, 181, 184, 0.24);
  border-radius: var(--radius);
}

.policy-note h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

.policy-note p {
  margin-bottom: 10px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sitemap-grid div {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sitemap-grid h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.sitemap-grid a {
  color: var(--blue);
  font-weight: 800;
}

@supports (word-break: auto-phrase) {
  .section-heading p:not(.section-kicker),
  .lead-copy,
  .lead-copy p,
  .content-card p,
  .detail-card p,
  .job-card p,
  .business-summary-card p,
  .home-job-copy p:not(.section-kicker),
  .home-job-item strong,
  .about-strength-card p,
  .pillar-section .content-card p,
  .service-lineup-section .content-card p,
  .business-domain-section .content-card p,
  .prose,
  .prose p,
  .prose li,
  .cta-box p,
  .service-summary,
  .service-meta dd {
    word-break: auto-phrase;
  }
}

.site-footer {
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(8, 31, 53, 0.98), rgba(5, 48, 65, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 80px);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 54px;
  padding: 52px 0;
}

.footer-logo img {
  filter: brightness(0) invert(1);
}

.footer-profile p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.footer-nav div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
}

.footer-nav .footer-heading {
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
}

.footer-bottom {
  padding: 16px 0 24px;
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 1100px) {
  .history-section .split {
    grid-template-columns: minmax(220px, 0.3fr) minmax(580px, 1fr);
    gap: 34px;
  }

  .partner-logo-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .partner-name-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-nav {
    gap: 12px;
    font-size: 12px;
  }

  .brand img {
    width: 170px;
  }

  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-strength-section .card-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .business-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .telecom-summary-card {
    grid-template-columns: 1fr;
  }

  .telecom-summary-card img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .home-job-layout {
    grid-template-columns: 1fr;
  }

  .home-job-copy {
    max-width: none;
  }

  .pillar-section .card-grid.four,
  .service-lineup-section .card-grid.four,
  .business-domain-section .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infra-map-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .relationship-layout {
    grid-template-columns: 1fr;
  }

  .relationship-layout > .relationship-copy {
    grid-column: auto;
  }

  .lead-grid > .lead-copy,
  .split > .lead-copy,
  .message-copy {
    padding-top: 0;
  }

  .infra-map {
    min-height: 380px;
  }

  .infra-map-core {
    width: 126px;
    height: 126px;
  }

  .infra-map-item {
    min-height: 160px;
  }
}

@media (max-width: 940px) {
  :root {
    --header-height: 68px;
  }

  .history-section .split {
    grid-template-columns: 1fr;
  }

  .header-inner,
  .hero-content,
  .section-inner,
  .footer-inner,
  .footer-bottom {
    width: min(100% - 32px, 760px);
  }

  .telecom-intro-layout {
    grid-template-columns: 1fr;
  }

  .it-solution-summary-grid {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    justify-content: stretch;
    justify-items: stretch;
    max-height: calc(100svh - var(--header-height));
    padding: 12px 16px 20px;
    overflow-y: auto;
    text-align: left;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 50px rgba(16, 32, 45, 0.14);
    transform: translateY(calc(-100% - var(--header-height)));
    transition: transform 220ms ease;
  }

  .nav-open .site-nav {
    transform: translateY(0);
  }

  .site-nav a,
  .site-nav .nav-contact {
    display: flex;
    justify-content: flex-start;
    padding: 14px 4px;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  .nav-item {
    display: grid;
    width: 100%;
    justify-items: stretch;
  }

  .has-dropdown > .nav-link {
    justify-content: space-between;
  }

  .nav-dropdown {
    position: static;
    display: grid;
    justify-items: stretch;
    min-width: 0;
    padding: 0 0 8px 14px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-dropdown a {
    padding: 9px 4px;
    color: var(--ink-soft);
    border-bottom: 0;
    border-radius: 0;
    font-size: 12px;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible {
    background: transparent;
  }

  .hero {
    min-height: min(720px, 86svh);
    padding: calc(var(--header-height) + 54px) 0 54px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }

  .section {
    padding: 72px 0;
  }

  .it-detail-section {
    padding-top: 44px;
  }

  .it-intro-section {
    padding-bottom: 44px;
  }

  .lead-grid,
  .split,
  .listing-grid,
  .contact-layout,
  .access-layout,
  .cta-box,
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .card-grid.two,
  .card-grid.three,
  .cert-grid,
  .feature-grid,
  .stat-grid,
  .sitemap-grid,
  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  .about-strength-section .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }

  .detail-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-summary {
    grid-column: auto;
  }

  .detail-card .chip-row {
    grid-column: auto;
    margin-top: 8px;
  }

  .contact-side {
    position: static;
  }
}

@media (max-width: 560px) {
  .partner-logo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .partner-logo-list li {
    min-height: 82px;
    padding: 12px;
  }

  .partner-logo-list img {
    max-height: 52px;
  }

  .partner-name-list {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .blog-index-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .blog-index-card span {
    justify-self: start;
  }

  .blog-article-shell {
    padding: 22px 18px;
  }

  .blog-article img {
    width: min(100%, 220px);
    height: 150px;
  }

  .blog-post-nav {
    grid-template-columns: 1fr;
  }

  .blog-post-nav a:last-child {
    text-align: left;
  }

  .header-inner,
  .hero-content,
  .section-inner,
  .footer-inner,
  .footer-bottom {
    width: calc(100% - 40px);
  }

  .brand img {
    width: 165px;
  }

  .heading-with-actions {
    display: grid;
    gap: 16px;
    justify-content: stretch;
  }

  .heading-with-actions .button-row {
    width: 100%;
  }

  .pillar-section .content-card.strong {
    min-height: 0;
    padding: 24px 22px;
  }

  .service-lineup-section .content-card.strong {
    min-height: 0;
    padding: 24px 22px;
  }

  .business-domain-section .content-card.strong {
    min-height: 0;
    padding: 24px 22px;
  }

  .business-summary-section {
    padding-top: 58px;
  }

  .business-summary-grid {
    grid-template-columns: 1fr;
  }

  .telecom-summary-grid {
    grid-template-columns: 1fr;
  }

  .telecom-intro-visual {
    padding: 10px;
  }

  .home-job-layout {
    gap: 28px;
  }

  .home-job-copy h2 {
    white-space: normal;
  }

  .home-job-list {
    grid-template-columns: 1fr;
  }

  .home-job-item {
    min-height: 0;
    padding: 20px;
  }

  .pillar-section .card-grid.four,
  .service-lineup-section .card-grid.four,
  .business-domain-section .card-grid.four {
    grid-template-columns: 1fr;
  }

  .business-summary-card {
    min-height: 0;
    padding: 22px;
  }

  .business-summary-card h3 {
    white-space: normal;
  }

  .strength-grid .content-card {
    min-height: 0;
  }

  .pillar-heading p:not(.section-kicker) {
    white-space: normal;
  }

  .hero {
    min-height: 420px;
    padding-bottom: 28px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(18px, 6.2vw, 34px);
    line-height: 1.18;
  }

  .hero-lead {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
    white-space: normal;
  }

  .button,
  .hero-actions .button,
  .button-row .button,
  .cta-actions .button {
    width: 100%;
  }

  .privacy-policy .policy-date {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .privacy-policy-card {
    padding: 24px 20px;
  }

  .privacy-policy-list dt {
    font-size: 19px;
  }

  .privacy-policy-list ol,
  .privacy-policy-list ul {
    padding-left: 1.2em;
  }

  .section h2 {
    font-size: 27px;
    line-height: 1.38;
  }

  .it-detail-section {
    padding-top: 36px;
  }

  .it-intro-section {
    padding-bottom: 36px;
  }

  .it-detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-card h3 {
    font-size: clamp(18px, 5vw, 20px);
    white-space: nowrap;
  }

  .section-heading p:not(.section-kicker),
  .lead-copy,
  .content-card p,
  .detail-card p,
  .prose,
  .cta-box p {
    font-size: 15px;
  }

  .staffing-feature-heading p:not(.section-kicker) {
    white-space: normal;
  }

  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .cert-grid,
  .feature-grid,
  .stat-grid,
  .sitemap-grid,
  .footer-nav,
  .flow-list,
  .statement-grid {
    grid-template-columns: 1fr;
  }

  .about-strength-section .card-grid.four {
    grid-template-columns: 1fr;
  }

  .content-card,
  .detail-card,
  .job-card,
  .cert-card,
  .contact-form,
  .sitemap-grid div {
    padding: 22px;
  }

  .cert-image,
  .cert-image-grid a {
    min-height: 160px;
  }

  .cert-card-privacy .cert-image {
    min-height: 150px;
    padding: 28px 34px;
  }

  .cert-card-privacy .cert-image img {
    max-width: 145px;
    max-height: 104px;
  }

  .service-meta div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .service-summary-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .staffing-card-visual {
    width: 78px;
    height: 78px;
  }

  .staffing-card-visual img {
    width: 50px;
    height: 50px;
  }

  .history-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .infra-map {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .infra-map::before,
  .infra-map::after,
  .infra-map-core {
    display: none;
  }

  .infra-map-item {
    min-height: 0;
    padding: 20px;
  }

  .feature-panel {
    min-height: 360px;
    padding: 24px;
  }

  .info-list div,
  .info-list.compact div,
  .timeline div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .phone-link strong {
    font-size: 26px;
  }

  .cta-box {
    gap: 22px;
  }

  .cta-box h2 {
    font-size: clamp(17px, 4.8vw, 24px);
  }

  .cta-box > div:first-child > p:not(.section-kicker) {
    font-size: 13px;
    white-space: nowrap;
  }

  .cta-box .cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .access-map,
  .access-map iframe {
    min-height: 300px;
  }

  .data-table {
    min-width: 560px;
  }
}

@media (max-width: 500px) {
  .header-inner,
  .hero-content,
  .section-inner,
  .footer-inner,
  .footer-bottom {
    width: min(calc(100% - 40px), 340px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 360px) {
  .detail-card {
    padding: 18px;
  }

  .detail-card h3 {
    font-size: 16px;
  }

  .chip-row span,
  .partner-list span,
  .status-tag {
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* Home aqua reference layout. Remove this block and switch homeHeroAqua/businessAquaSummary to restore. */
body[data-page="home"] {
  background:
    radial-gradient(circle at 9% 20%, rgba(69, 130, 236, 0.16), transparent 28%),
    radial-gradient(circle at 89% 24%, rgba(36, 191, 200, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f1fbff 56%, #ffffff 100%);
}

body[data-page="home"] .site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(184, 218, 235, 0.72);
  box-shadow: 0 12px 34px rgba(33, 90, 130, 0.06);
}

body[data-page="home"] .site-nav .nav-contact {
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3467f2, #17c5ca);
  box-shadow: 0 14px 28px rgba(38, 119, 219, 0.22);
}

body[data-page="home"] .hero {
  min-height: min(640px, 78svh);
  padding: calc(var(--header-height) + 64px) 0 126px;
  color: #0b2b4a;
  background: #f6fcff;
}

body[data-page="home"] .hero-media {
  background-position: center;
  filter: saturate(0.86) brightness(1.16) contrast(0.88);
  opacity: 0.42;
  transform: scale(1.05);
}

body[data-page="home"] .hero::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 43%, rgba(233, 250, 255, 0.72) 70%, rgba(217, 245, 252, 0.64) 100%),
    radial-gradient(circle at 84% 28%, rgba(39, 155, 230, 0.2), transparent 34%),
    radial-gradient(circle at 4% 84%, rgba(39, 187, 202, 0.18), transparent 32%);
}

body[data-page="home"] .hero::after {
  position: absolute;
  right: -10%;
  bottom: -112px;
  left: -10%;
  z-index: -1;
  height: 246px;
  content: "";
  background:
    radial-gradient(circle at 69% 28%, rgba(255, 255, 255, 0.94) 0 5px, transparent 6px),
    radial-gradient(circle at 80% 51%, rgba(255, 255, 255, 0.82) 0 4px, transparent 5px),
    radial-gradient(circle at 91% 38%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
    linear-gradient(105deg, rgba(215, 249, 255, 0.78), rgba(71, 190, 218, 0.58) 58%, rgba(73, 130, 230, 0.34));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
}

body[data-page="home"] .hero-pattern {
  opacity: 0.58;
  background:
    linear-gradient(125deg, transparent 0 59%, rgba(32, 142, 217, 0.2) 59.2%, transparent 59.8%),
    linear-gradient(155deg, transparent 0 66%, rgba(37, 188, 202, 0.22) 66.2%, transparent 66.8%),
    radial-gradient(circle at 88% 55%, rgba(52, 116, 238, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 69%, rgba(33, 187, 202, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 72%, rgba(52, 116, 238, 0.2) 0 2px, transparent 3px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
}

body[data-page="home"] .hero-copy {
  max-width: 720px;
  padding-top: 8px;
}

body[data-page="home"] .hero .eyebrow {
  color: #2c6fe8;
  font-size: 15px;
  font-weight: 900;
}

body[data-page="home"] .hero h1 {
  color: #0a2a4a;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(48px, 6.2vw, 86px);
  font-weight: 700;
  line-height: 1.28;
  text-shadow: 0 10px 28px rgba(42, 116, 171, 0.08);
  white-space: normal;
}

body[data-page="home"] .hero-lead {
  max-width: 690px;
  color: #183a5a;
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 800;
  line-height: 1.95;
  white-space: normal;
}

body[data-page="home"] .hero-actions {
  gap: 16px;
  margin-top: 32px;
}

body[data-page="home"] .hero-actions .button {
  min-width: 212px;
  min-height: 58px;
  border-radius: 999px;
}

body[data-page="home"] .hero-actions .button-primary {
  background: linear-gradient(135deg, #3467f2, #16c3c8);
  box-shadow: 0 18px 42px rgba(31, 118, 221, 0.24);
}

body[data-page="home"] .hero-actions .button-secondary {
  color: #236be1;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(55, 113, 231, 0.42);
  box-shadow: 0 14px 34px rgba(33, 107, 164, 0.1);
}

body[data-page="home"] .business-summary-section {
  position: relative;
  z-index: 4;
  padding: 0 0 86px;
  margin-top: -88px;
  background: transparent;
}

body[data-page="home"] .business-summary-heading {
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}

body[data-page="home"] .business-summary-heading .section-kicker {
  color: #3b8ff0;
}

body[data-page="home"] .business-summary-heading h2 {
  color: #0b2b4a;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25;
}

body[data-page="home"] .business-summary-heading p:not(.section-kicker) {
  max-width: 760px;
  margin: 12px auto 0;
  color: #254662;
  font-weight: 700;
}

.business-aqua-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.business-aqua-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 132px;
  padding: 24px 22px;
  overflow: hidden;
  color: #0c2e50;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(178, 218, 238, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 22px 56px rgba(47, 113, 158, 0.13);
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.business-aqua-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #386df1, #18c6c9);
}

.business-aqua-card::after {
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 118px;
  height: 118px;
  content: "";
  background: radial-gradient(circle, rgba(37, 188, 202, 0.16), transparent 68%);
}

.aqua-card-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #1c69d8;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #ecfbff);
  border: 2px solid rgba(36, 114, 218, 0.82);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 5px rgba(231, 249, 255, 0.86);
}

.aqua-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.aqua-card-copy strong {
  color: #0a2f54;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
}

.aqua-card-copy small {
  color: #3d566d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.business-aqua-card:hover,
.business-aqua-card:focus-visible {
  border-color: rgba(52, 103, 242, 0.5);
  box-shadow: 0 28px 64px rgba(41, 116, 176, 0.18);
  transform: translateY(-4px);
}

.business-aqua-card:focus-visible {
  outline: 3px solid rgba(29, 196, 203, 0.26);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .business-aqua-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: 620px;
    padding-top: calc(var(--header-height) + 42px);
    padding-bottom: 138px;
  }

  body[data-page="home"] .hero::after {
    bottom: -138px;
    height: 238px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -92px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero {
    min-height: 600px;
    padding-bottom: 128px;
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(36px, 10vw, 48px);
  }

  body[data-page="home"] .hero-actions .button {
    min-width: 0;
  }

  body[data-page="home"] .business-summary-section {
    padding-bottom: 64px;
  }

  .business-aqua-grid {
    grid-template-columns: 1fr;
  }

  .business-aqua-card {
    min-height: 112px;
    padding: 20px;
  }

  .aqua-card-copy strong {
    white-space: normal;
  }
}
/* Home reference image icon and hero tune. Remove this block to revert this fine adjustment. */
body[data-page="home"] .hero {
  min-height: min(690px, 82svh);
  padding: calc(var(--header-height) + 76px) 0 150px;
}

body[data-page="home"] .hero-content {
  width: min(1280px, calc(100% - 72px));
}

body[data-page="home"] .hero-copy {
  max-width: 780px;
}

body[data-page="home"] .hero h1 {
  font-size: clamp(54px, 6.4vw, 88px);
  line-height: 1.26;
}

body[data-page="home"] .hero-lead {
  margin-top: 28px;
}

body[data-page="home"] .hero-actions .button {
  justify-content: space-between;
  gap: 28px;
  padding: 15px 26px 15px 32px;
  border-radius: 999px;
}

body[data-page="home"] .hero-actions .button::after {
  flex: 0 0 auto;
  width: 18px;
  height: 10px;
  content: "";
  background: currentColor;
  clip-path: polygon(0 42%, calc(100% - 7px) 42%, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, calc(100% - 7px) 58%, 0 58%);
  transition: transform 180ms ease, width 180ms ease;
}

body[data-page="home"] .hero-actions .button:hover::after,
body[data-page="home"] .hero-actions .button:focus-visible::after {
  width: 28px;
  transform: translateX(2px);
}

body[data-page="home"] .hero::after {
  right: -16%;
  bottom: -128px;
  left: -12%;
  height: 286px;
  background:
    radial-gradient(circle at 67% 30%, rgba(255, 255, 255, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 55%, rgba(255, 255, 255, 0.84) 0 4px, transparent 5px),
    radial-gradient(circle at 91% 40%, rgba(255, 255, 255, 0.78) 0 4px, transparent 5px),
    linear-gradient(105deg, rgba(224, 251, 255, 0.86), rgba(86, 199, 224, 0.62) 58%, rgba(78, 139, 234, 0.38));
}

body[data-page="home"] .business-summary-section {
  margin-top: -122px;
  padding-bottom: 82px;
}

.business-aqua-grid {
  gap: 16px;
}

.business-aqua-card {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 22px;
  min-height: 140px;
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(206, 230, 243, 0.96);
  box-shadow: 0 24px 52px rgba(49, 111, 158, 0.12);
}

.aqua-card-icon {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: inherit;
  font-size: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.aqua-card-icon img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.aqua-card-copy strong {
  font-size: clamp(18px, 1.35vw, 21px);
}

.aqua-card-copy small {
  color: #496176;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: 650px;
    padding-top: calc(var(--header-height) + 52px);
    padding-bottom: 142px;
  }

  body[data-page="home"] .hero-content {
    width: calc(100% - 40px);
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -98px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero {
    min-height: 620px;
    padding-bottom: 132px;
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(38px, 10.2vw, 50px);
  }

  .business-aqua-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    min-height: 118px;
    padding: 20px;
  }

  .aqua-card-icon,
  .aqua-card-icon img {
    width: 64px;
    height: 64px;
  }
}
/* Home solid business card fit adjustment. Remove this block to revert the no-transparency card fit. */
body[data-page="home"] .business-summary-section {
  isolation: isolate;
}

body[data-page="home"] .business-summary-section .section-inner {
  position: relative;
  z-index: 2;
}

.business-aqua-grid {
  align-items: stretch;
}

.business-aqua-card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 128px;
  height: 100%;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #cfe8f5;
  box-shadow: 0 18px 42px rgba(34, 96, 142, 0.12);
  backdrop-filter: none;
}

.business-aqua-card::after {
  display: none;
}

.aqua-card-icon {
  width: 64px;
  height: 64px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #d6edf8;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(53, 118, 224, 0.08);
}

.aqua-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aqua-card-copy {
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.aqua-card-copy strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #0b3157;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aqua-card-copy small {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #40586f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1180px) {
  .business-aqua-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
  }

  .aqua-card-icon {
    width: 58px;
    height: 58px;
    padding: 7px;
  }

  .aqua-card-copy strong {
    font-size: 16px;
  }

  .aqua-card-copy small {
    font-size: 11px;
  }
}

@media (max-width: 1120px) {
  .business-aqua-card {
    min-height: 120px;
  }

  .aqua-card-copy small {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .business-aqua-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    min-height: 104px;
    padding: 18px;
  }

  .aqua-card-icon {
    width: 56px;
    height: 56px;
    padding: 7px;
  }

  .aqua-card-copy strong {
    white-space: normal;
  }
}
/* Home downloaded solid icon replacement. Remove this block to restore previous icon sizing. */
.aqua-card-icon {
  overflow: hidden;
  padding: 0;
  background: #ffffff;
  border: 0;
  box-shadow: none;
}

.aqua-card-icon img {
  display: block;
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 8px;
}

.business-aqua-card {
  overflow: hidden;
  background: #ffffff;
}

@media (max-width: 1180px) {
  .aqua-card-icon img {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 640px) {
  .aqua-card-icon img {
    width: 56px;
    height: 56px;
  }
}
/* Site aqua palette refresh. Remove this block to restore the previous dark/gold color theme. */
body[data-page="home"] .hero-title-line {
  display: block;
  white-space: nowrap;
}

body[data-page="home"] .hero h1 {
  max-width: 840px;
  font-size: clamp(44px, 5.1vw, 76px);
  line-height: 1.28;
}

body[data-page="home"] .hero-copy {
  max-width: 860px;
}

body:not([data-page="home"]) {
  background:
    radial-gradient(circle at 10% 16%, rgba(63, 145, 240, 0.12), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(25, 196, 204, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f4fbff 58%, #ffffff 100%);
}

body:not([data-page="home"]) .hero {
  color: #0b2b4a;
  background: #f7fcff;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.24;
  filter: saturate(0.74) brightness(1.18) contrast(0.9);
}

body:not([data-page="home"]) .hero::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(230, 249, 255, 0.74) 100%),
    radial-gradient(circle at 86% 24%, rgba(37, 149, 229, 0.2), transparent 34%);
}

body:not([data-page="home"]) .hero-pattern {
  opacity: 0.52;
  background:
    linear-gradient(90deg, rgba(33, 142, 216, 0.08) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(0deg, rgba(33, 142, 216, 0.07) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(135deg, transparent 0 45%, rgba(28, 196, 203, 0.18) 45% 46%, transparent 46% 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.66) 64%, transparent);
}

body:not([data-page="home"]) .hero .eyebrow,
.section-kicker,
.label {
  color: #2677e5;
}

body:not([data-page="home"]) .hero h1,
body:not([data-page="home"]) .hero-lead {
  color: #0a2a4a;
}

.button-primary,
.site-nav .nav-contact {
  background: linear-gradient(135deg, #3467f2, #17c5ca);
}

.button-secondary,
.button-outline-light {
  color: #236be1;
  background: #ffffff;
  border-color: rgba(54, 116, 232, 0.42);
}

.text-link {
  color: #146bd6;
}

.text-link::after {
  background: #18c4cb;
}

.muted,
.cta-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 249, 255, 0.9)),
    #eefaff;
}

.band-blue,
.pillar-section,
.service-lineup-section {
  color: #0b2b4a;
  background:
    radial-gradient(circle at 18% 12%, rgba(52, 103, 242, 0.1), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #eefaff 100%);
}

.band-blue .section-kicker,
.pillar-heading .section-kicker,
.service-lineup-heading .section-kicker,
.business-domain-heading .section-kicker {
  color: #2677e5;
}

.band-blue h2,
.pillar-heading h2,
.service-lineup-heading h2,
.pillar-section .content-card h3,
.service-lineup-section .content-card h3,
.business-domain-section .content-card h3 {
  color: #0b3157;
}

.band-blue p,
.band-blue .lead-copy,
.pillar-heading p:not(.section-kicker),
.service-lineup-heading p:not(.section-kicker),
.pillar-section .content-card p,
.pillar-section .mini-list li,
.service-lineup-section .content-card p,
.service-lineup-section .mini-list li,
.business-domain-section .content-card p {
  color: #344f68;
}

.pillar-section::before,
.service-lineup-section::before {
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(33, 142, 216, 0.08) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(0deg, rgba(33, 142, 216, 0.06) 1px, transparent 1px) 0 0 / 84px 84px;
}

.pillar-section::after,
.content-card::before,
.detail-card::before,
.job-card::before,
.pillar-section .content-card.strong::before,
.service-lineup-section .content-card.strong::before,
.business-domain-section .content-card.strong::before {
  background: linear-gradient(90deg, #3467f2, #17c5ca);
}

.pillar-section .content-card.strong,
.service-lineup-section .content-card.strong,
.business-domain-section .content-card.strong,
.content-card,
.detail-card,
.job-card {
  color: #102033;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 252, 255, 0.94)),
    #ffffff;
  border-color: rgba(197, 229, 244, 0.96);
  box-shadow: 0 18px 46px rgba(36, 99, 145, 0.1);
}

.pillar-section .card-number,
.service-lineup-section .card-number,
.business-domain-section .card-number {
  color: #1d72db;
}

.pillar-section .mini-list li::before,
.service-lineup-section .mini-list li::before {
  background: #17c5ca;
}

.pillar-section .text-link,
.service-lineup-section .text-link,
.business-domain-section .text-link {
  color: #146bd6;
}

.infra-map-core {
  background: linear-gradient(135deg, #3467f2, #17c5ca);
}

.site-footer {
  color: #0b2b4a;
  background:
    linear-gradient(180deg, #f8fdff 0%, #eaf8ff 100%),
    #ffffff;
  border-top: 1px solid #cfe8f5;
}

.footer-logo img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(46%) saturate(1116%) hue-rotate(175deg) brightness(92%) contrast(93%);
}

.footer-profile p,
.footer-nav a,
.footer-bottom {
  color: #344f68;
}

.footer-nav .footer-heading {
  color: #0b3157;
}

.footer-bottom {
  border-top: 1px solid #cfe8f5;
}

@media (max-width: 640px) {
  body[data-page="home"] .hero h1 {
    font-size: clamp(30px, 8.8vw, 42px);
    line-height: 1.3;
  }
}
/* Home business heading spacing after lead removal. Remove this block to restore the compact heading spacing. */
body[data-page="home"] .business-summary-heading {
  margin-bottom: clamp(44px, 4vw, 62px);
}

@media (max-width: 640px) {
  body[data-page="home"] .business-summary-heading {
    margin-bottom: 32px;
  }
}
/* Hero image clarity adjustment. Remove this block to restore the softer hero image. */
body[data-page="home"] .hero-media {
  opacity: 0.52;
  filter: saturate(0.96) brightness(1.08) contrast(1.02);
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.34;
  filter: saturate(0.9) brightness(1.1) contrast(1.02);
}
/* Home side blue haze. Remove this block to restore the previous plain side margins. */
body[data-page="home"] .hero::before {
  background:
    radial-gradient(ellipse at 0% 38%, rgba(61, 112, 242, 0.34) 0%, rgba(96, 184, 245, 0.2) 18%, transparent 40%),
    radial-gradient(ellipse at 100% 34%, rgba(24, 196, 203, 0.32) 0%, rgba(91, 171, 244, 0.2) 20%, transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 43%, rgba(230, 249, 255, 0.72) 70%, rgba(220, 246, 252, 0.64) 100%),
    radial-gradient(circle at 84% 28%, rgba(39, 155, 230, 0.2), transparent 34%),
    radial-gradient(circle at 4% 84%, rgba(39, 187, 202, 0.18), transparent 32%);
}

body[data-page="home"] .hero-pattern::before,
body[data-page="home"] .hero-pattern::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(18vw, 230px);
  pointer-events: none;
  content: "";
  filter: blur(24px);
}

body[data-page="home"] .hero-pattern::before {
  left: -56px;
  background: linear-gradient(90deg, rgba(57, 111, 242, 0.32), transparent);
}

body[data-page="home"] .hero-pattern::after {
  right: -56px;
  background: linear-gradient(270deg, rgba(23, 196, 203, 0.28), transparent);
}
/* All pages side blue haze. Remove this block to restore plain side margins on lower pages. */
body:not([data-page="home"]) .hero::before {
  background:
    radial-gradient(ellipse at 0% 38%, rgba(61, 112, 242, 0.3) 0%, rgba(96, 184, 245, 0.18) 18%, transparent 40%),
    radial-gradient(ellipse at 100% 34%, rgba(24, 196, 203, 0.28) 0%, rgba(91, 171, 244, 0.18) 20%, transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(230, 249, 255, 0.74) 100%),
    radial-gradient(circle at 86% 24%, rgba(37, 149, 229, 0.2), transparent 34%);
}

body:not([data-page="home"]) .hero-pattern::before,
body:not([data-page="home"]) .hero-pattern::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(18vw, 230px);
  pointer-events: none;
  content: "";
  filter: blur(24px);
}

body:not([data-page="home"]) .hero-pattern::before {
  left: -56px;
  background: linear-gradient(90deg, rgba(57, 111, 242, 0.28), transparent);
}

body:not([data-page="home"]) .hero-pattern::after {
  right: -56px;
  background: linear-gradient(270deg, rgba(23, 196, 203, 0.24), transparent);
}
/* Hero height tighter adjustment. Remove this block to restore the previous hero height. */
body[data-page="home"] .hero {
  min-height: min(560px, 68svh);
  padding-top: calc(var(--header-height) + 46px);
  padding-bottom: 96px;
}

body[data-page="home"] .business-summary-section {
  margin-top: -82px;
}

body:not([data-page="home"]) .hero {
  min-height: min(380px, 46svh);
  padding-top: calc(var(--header-height) + 30px);
  padding-bottom: 28px;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: 510px;
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: 96px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -72px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 320px;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 28px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero {
    min-height: 490px;
    padding-bottom: 88px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 300px;
  }
}
/* Reference hero layout refresh. Remove this block to restore the previous hero layout. */
.hero {
  display: grid;
  align-items: center;
  min-height: min(620px, 76svh);
  padding: calc(var(--header-height) + 58px) 0 112px;
  color: #0a2a4a;
  background: #f7fcff;
}

.hero-media {
  background-position: center right;
  opacity: 0.42;
  filter: saturate(0.9) brightness(1.12) contrast(0.96);
  transform: scale(1.04);
}

.hero::before {
  background:
    radial-gradient(ellipse at 0% 34%, rgba(61, 112, 242, 0.26) 0%, rgba(96, 184, 245, 0.16) 18%, transparent 42%),
    radial-gradient(ellipse at 100% 36%, rgba(24, 196, 203, 0.25) 0%, rgba(91, 171, 244, 0.15) 20%, transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 42%, rgba(236, 251, 255, 0.76) 72%, rgba(222, 247, 253, 0.66) 100%);
}

.hero::after {
  position: absolute;
  right: -12%;
  bottom: -118px;
  left: -12%;
  z-index: -1;
  height: 248px;
  content: "";
  background:
    radial-gradient(circle at 68% 30%, rgba(255, 255, 255, 0.92) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.82) 0 4px, transparent 5px),
    radial-gradient(circle at 91% 39%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
    linear-gradient(105deg, rgba(225, 251, 255, 0.82), rgba(78, 197, 224, 0.58) 58%, rgba(76, 137, 235, 0.34));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
}

.hero-pattern {
  opacity: 0.54;
  background:
    linear-gradient(125deg, transparent 0 59%, rgba(32, 142, 217, 0.18) 59.2%, transparent 59.8%),
    linear-gradient(155deg, transparent 0 66%, rgba(37, 188, 202, 0.2) 66.2%, transparent 66.8%),
    radial-gradient(circle at 88% 55%, rgba(52, 116, 238, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 69%, rgba(33, 187, 202, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 72%, rgba(52, 116, 238, 0.18) 0 2px, transparent 3px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
}

.hero-content {
  width: min(1280px, calc(100% - 72px));
  max-width: min(1280px, calc(100% - 72px));
}

.hero-copy {
  max-width: 790px;
}

.hero .eyebrow {
  color: #2f73e8;
  font-size: 15px;
  font-weight: 900;
}

.hero h1 {
  max-width: 820px;
  color: #092947;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(44px, 5.2vw, 78px);
  font-weight: 700;
  line-height: 1.26;
  white-space: normal;
  text-shadow: 0 10px 28px rgba(42, 116, 171, 0.08);
}

.hero-lead {
  max-width: 760px;
  margin-top: 28px;
  color: #183a5a;
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 800;
  line-height: 1.95;
  white-space: normal;
}

.hero-actions {
  gap: 16px;
  margin-top: 34px;
}

.hero-actions .button {
  justify-content: space-between;
  min-width: 212px;
  min-height: 58px;
  gap: 28px;
  padding: 15px 26px 15px 32px;
  border-radius: 999px;
}

.hero-actions .button-primary {
  background: linear-gradient(135deg, #3467f2, #16c3c8);
  box-shadow: 0 18px 42px rgba(31, 118, 221, 0.24);
}

.hero-actions .button-secondary {
  color: #236be1;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(55, 113, 231, 0.42);
  box-shadow: 0 14px 34px rgba(33, 107, 164, 0.1);
}

body[data-page="home"] .business-summary-section {
  margin-top: -94px;
}

@media (max-width: 760px) {
  .hero {
    min-height: 560px;
    padding: calc(var(--header-height) + 42px) 0 106px;
  }

  .hero-content {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
  }

  .hero::after {
    bottom: -112px;
    height: 220px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -78px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 520px;
    padding-bottom: 96px;
  }

  .hero h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.3;
  }

  .hero-lead {
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
  }
}
/* Hero arc button clearance adjustment. Remove this block to restore the previous curve position. */
.hero-content,
.hero-copy,
.hero-actions {
  position: relative;
  z-index: 2;
}

.hero::after {
  bottom: -176px;
  height: 258px;
}

body[data-page="home"] .business-summary-section {
  margin-top: -78px;
}

@media (max-width: 760px) {
  .hero::after {
    bottom: -156px;
    height: 226px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -66px;
  }
}

@media (max-width: 640px) {
  .hero::after {
    bottom: -144px;
    height: 208px;
  }
}
/* Green desk hero image positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 74% center;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 68% center;
  }
}
/* Office plants hero image positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 72% center;
}

body[data-page="home"] .hero-media {
  opacity: 0.5;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.36;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 66% center;
  }
}
/* Desk plants hero image positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 70% center;
}

body[data-page="home"] .hero-media {
  opacity: 0.52;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.38;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 64% center;
  }
}
/* Office room plants hero image positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 72% center;
}

body[data-page="home"] .hero-media {
  opacity: 0.5;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.36;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 68% center;
  }
}
/* Working office hero image positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 74% center;
}

body[data-page="home"] .hero-media {
  opacity: 0.48;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.34;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 66% center;
  }
}
/* Empty office desk green hero positioning. Remove this block to restore previous hero image cropping. */
.hero-media {
  background-position: 72% center;
}

body[data-page="home"] .hero-media {
  opacity: 0.5;
}

body:not([data-page="home"]) .hero-media {
  opacity: 0.36;
}

@media (max-width: 760px) {
  .hero-media {
    background-position: 66% center;
  }
}
/* Hero arc content clearance all pages. Remove this block to restore the previous curve/content overlap. */
.hero::after {
  bottom: -190px;
  height: 250px;
}

main > .section:first-of-type {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .business-summary-section {
  position: relative;
  z-index: 4;
  margin-top: -58px;
}

body:not([data-page="home"]) .hero::after {
  bottom: -205px;
  height: 250px;
}

body:not([data-page="home"]) main > .section:first-of-type {
  padding-top: 82px;
}

@media (max-width: 760px) {
  .hero::after,
  body:not([data-page="home"]) .hero::after {
    bottom: -174px;
    height: 224px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -54px;
  }

  body:not([data-page="home"]) main > .section:first-of-type {
    padding-top: 72px;
  }
}

@media (max-width: 640px) {
  .hero::after,
  body:not([data-page="home"]) .hero::after {
    bottom: -162px;
    height: 210px;
  }
}
/* Hero subtle side gradient decoration. Remove this block to restore plain hero side margins. */
.hero::before {
  background:
    radial-gradient(ellipse at 0% 38%, rgba(52, 103, 242, 0.26) 0%, rgba(113, 196, 246, 0.16) 18%, transparent 42%),
    radial-gradient(ellipse at 100% 36%, rgba(23, 196, 203, 0.24) 0%, rgba(102, 182, 246, 0.14) 20%, transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 42%, rgba(236, 251, 255, 0.76) 72%, rgba(222, 247, 253, 0.66) 100%);
}

.hero-pattern {
  opacity: 0.48;
  background:
    radial-gradient(ellipse at 0% 42%, rgba(52, 103, 242, 0.14) 0%, transparent 38%),
    radial-gradient(ellipse at 100% 42%, rgba(23, 196, 203, 0.14) 0%, transparent 38%);
  mask-image: none;
}

.hero-pattern::before,
.hero-pattern::after {
  display: none;
}
/* Footer aqua polish. Remove this block to restore the previous footer appearance. */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #0b2b4a;
  background:
    radial-gradient(circle at 10% 18%, rgba(52, 103, 242, 0.12), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(23, 196, 203, 0.14), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #eefaff 100%);
  border-top: 1px solid #bfe3f3;
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, #3467f2, #17c5ca);
}

.site-footer::after {
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle, rgba(23, 196, 203, 0.14), transparent 66%);
}

.footer-inner {
  position: relative;
  z-index: 1;
  align-items: start;
  padding: 58px 0 46px;
}

.footer-profile {
  display: grid;
  gap: 18px;
  align-content: start;
}

.footer-logo {
  display: inline-flex;
  width: fit-content;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(191, 227, 243, 0.92);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(36, 99, 145, 0.08);
}

.footer-logo img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(46%) saturate(1116%) hue-rotate(175deg) brightness(92%) contrast(93%);
}

.footer-profile p {
  max-width: 420px;
  margin: 0;
  color: #344f68;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

.footer-nav {
  gap: 28px;
}

.footer-nav div {
  gap: 9px;
  padding-left: 16px;
  border-left: 1px solid rgba(191, 227, 243, 0.9);
}

.footer-nav .footer-heading {
  position: relative;
  width: fit-content;
  margin-bottom: 4px;
  color: #0b3157;
  font-size: 14px;
  font-weight: 900;
}

.footer-nav .footer-heading::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #3467f2, #17c5ca);
  border-radius: 999px;
}

.footer-nav a {
  color: #3b566d;
  transition: color 160ms ease, transform 160ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #146bd6;
  transform: translateX(2px);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  padding: 16px 0 24px;
  color: #456176;
  border-top: 1px solid #cfe8f5;
}

@media (max-width: 760px) {
  .footer-inner {
    padding: 44px 0 34px;
  }

  .footer-nav div {
    padding-left: 12px;
  }
}
/* Home business clear of hero arc. Remove this block to restore previous overlap positioning. */
body[data-page="home"] .hero::after {
  bottom: -230px;
  height: 250px;
}

body[data-page="home"] .business-summary-section {
  margin-top: -18px;
  padding-top: 18px;
}

body[data-page="home"] .business-summary-section .section-inner {
  position: relative;
  z-index: 5;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero::after {
    bottom: -198px;
    height: 220px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -12px;
    padding-top: 16px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero::after {
    bottom: -184px;
    height: 208px;
  }
}
/* Home arc align with lower pages. Remove this block to restore the previous home-only arc position. */
body[data-page="home"] .hero::after {
  bottom: -205px;
  height: 250px;
}

body[data-page="home"] .business-summary-section {
  margin-top: -42px;
  padding-top: 18px;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero::after {
    bottom: -174px;
    height: 224px;
  }

  body[data-page="home"] .business-summary-section {
    margin-top: -36px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero::after {
    bottom: -162px;
    height: 210px;
  }
}
/* Home business kicker below arc. Remove this block to restore previous business heading position. */
body[data-page="home"] .business-summary-section {
  margin-top: -20px;
  padding-top: 30px;
}

body[data-page="home"] .business-summary-heading {
  margin-bottom: clamp(36px, 3.4vw, 52px);
}

@media (max-width: 760px) {
  body[data-page="home"] .business-summary-section {
    margin-top: -16px;
    padding-top: 26px;
  }
}
/* Hero section shorter final adjustment. Remove this block to restore the previous hero height. */
body[data-page="home"] .hero {
  min-height: min(520px, 64svh);
  padding-top: calc(var(--header-height) + 42px);
  padding-bottom: 84px;
}

body:not([data-page="home"]) .hero {
  min-height: min(360px, 44svh);
  padding-top: calc(var(--header-height) + 30px);
  padding-bottom: 28px;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: 490px;
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 82px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 320px;
    padding-top: calc(var(--header-height) + 26px);
    padding-bottom: 26px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero {
    min-height: 470px;
    padding-bottom: 76px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 300px;
  }
}
/* Hero section extra short adjustment. Remove this block to restore the previous shorter hero height. */
body[data-page="home"] .hero {
  min-height: min(460px, 58svh);
  padding-top: calc(var(--header-height) + 34px);
  padding-bottom: 66px;
}

body:not([data-page="home"]) .hero {
  min-height: min(300px, 38svh);
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 22px;
}

body[data-page="home"] .hero-lead {
  margin-top: 18px;
}

body[data-page="home"] .hero-actions {
  margin-top: 24px;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero {
    min-height: 440px;
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 68px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 280px;
    padding-top: calc(var(--header-height) + 22px);
    padding-bottom: 22px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .hero {
    min-height: 420px;
    padding-bottom: 64px;
  }

  body:not([data-page="home"]) .hero {
    min-height: 260px;
  }
}
/* Lower page hero height restore adjustment. Remove this block to restore the extra-short lower page hero. */
body:not([data-page="home"]) .hero {
  min-height: min(340px, 42svh);
  padding-top: calc(var(--header-height) + 30px);
  padding-bottom: 30px;
}

@media (max-width: 760px) {
  body:not([data-page="home"]) .hero {
    min-height: 310px;
    padding-top: calc(var(--header-height) + 26px);
    padding-bottom: 28px;
  }
}

@media (max-width: 640px) {
  body:not([data-page="home"]) .hero {
    min-height: 290px;
  }
}
/* Lower page hero wider adjustment. Remove this block to restore the previous lower page hero height. */
body:not([data-page="home"]) .hero {
  min-height: min(390px, 48svh);
  padding-top: calc(var(--header-height) + 42px);
  padding-bottom: 42px;
}

@media (max-width: 760px) {
  body:not([data-page="home"]) .hero {
    min-height: 340px;
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: 34px;
  }
}

@media (max-width: 640px) {
  body:not([data-page="home"]) .hero {
    min-height: 320px;
  }
}
/* Lower page hero gothic heading. Remove this block to restore serif headings on lower pages. */
body:not([data-page="home"]) .hero h1 {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}
/* Office service hero single-line lead. Remove this block to restore default hero lead wrapping. */
@media (min-width: 900px) {
  body[data-page="office"] .hero-copy {
    max-width: 1080px;
  }

  body[data-page="office"] .hero-lead {
    max-width: 1040px;
    white-space: nowrap;
  }
}
/* Company history stat label nowrap. Remove this block to restore default history stat wrapping. */
.history-stats span {
  white-space: nowrap;
  font-size: 11.5px;
}
/* Company history founding year alignment. Remove this block to restore the previous 1998 position. */
.history-stats div:first-child strong {
  transform: translateX(-1px);
}
/* Infrastructure overview map placement. Remove this block to restore the standalone service map sizing. */
.infra-overview-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
}

.infra-overview-map {
  min-height: 390px;
}

.infra-overview-map .infra-map-core {
  width: 128px;
  height: 128px;
}

.infra-overview-map .infra-map-core strong {
  font-size: 16px;
}

.infra-overview-map .infra-map-item {
  min-height: 170px;
  padding: 20px;
}

.infra-overview-map .infra-map-item h3 {
  font-size: 17px;
}

.infra-overview-map .infra-map-item p {
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 940px) {
  .infra-overview-layout {
    grid-template-columns: 1fr;
  }
}
/* Phone-only contact page layout. Remove this block to restore the previous form-oriented layout. */
.contact-phone-layout {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
}

.contact-phone-main {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 255, 0.94));
  border: 1px solid #cfe8f5;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(18, 69, 118, 0.1);
}

.contact-phone-main > p:not(.section-kicker) {
  margin: 18px 0 0;
  color: #274761;
  line-height: 1.85;
}

.contact-phone-card {
  margin: 28px 0 14px;
  border-color: rgba(52, 103, 242, 0.22);
  box-shadow: 0 16px 36px rgba(31, 118, 221, 0.12);
}

.contact-fax {
  font-weight: 800;
}

.contact-guidance {
  display: grid;
  gap: 16px;
}

.contact-guidance article {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 3vw, 30px);
  background: #ffffff;
  border: 1px solid #d6edf7;
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(18, 69, 118, 0.08);
}

.contact-guidance span {
  color: #2578df;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.contact-guidance h3 {
  margin: 0;
  color: #0b3157;
  font-size: clamp(18px, 1.6vw, 22px);
}

.contact-guidance p {
  margin: 0;
  color: #344f68;
  line-height: 1.75;
}

@media (max-width: 940px) {
  .contact-phone-layout {
    grid-template-columns: 1fr;
  }
}
/* Footer privacy utility row. Remove this block to restore the previous footer group placement. */
.footer-privacy-links {
  grid-column: 1 / -1;
  display: flex;
  flex-flow: row wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(191, 227, 243, 0.9);
}

.footer-nav .footer-privacy-links {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}

.footer-privacy-links .footer-heading {
  display: none;
}

.footer-privacy-links .footer-heading::after {
  display: none;
}

@media (min-width: 941px) {
  .footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-nav a {
    white-space: nowrap;
  }
}

@media (max-width: 940px) {
  .footer-privacy-links {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}
/* Home business mobile centering. Remove this block to restore the previous left-biased mobile card layout. */
@media (max-width: 640px) {
  body[data-page="home"] .business-aqua-grid {
    justify-items: center;
  }

  body[data-page="home"] .business-aqua-card {
    width: min(100%, 340px);
    grid-template-columns: 56px minmax(0, max-content);
    justify-content: center;
    text-align: left;
    transform: none;
  }

  body[data-page="home"] .aqua-card-copy {
    width: max-content;
    max-width: 100%;
  }
}

/* Mobile nav toggle right adjustment. Remove this block to restore the previous hamburger position. */
@media (max-width: 640px) {
  .nav-toggle {
    margin-right: -18px;
  }
}

/* Infrastructure overview mobile visual chips. Remove this block to restore the stacked mobile overview map. */
@media (max-width: 760px) {
  .infra-overview-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px;
    min-height: 280px;
    padding: 68px 14px 14px;
    overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(247, 252, 255, 0.12) 0%, rgba(8, 36, 62, 0.26) 42%, rgba(7, 31, 54, 0.72) 100%),
      var(--infra-mobile-bg);
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(191, 227, 243, 0.95);
    border-radius: 8px;
    box-shadow: 0 20px 46px rgba(34, 96, 142, 0.16);
  }

  .infra-overview-map::before {
    position: absolute;
    inset: 18px auto auto 16px;
    z-index: 2;
    display: block;
    width: auto;
    height: auto;
    padding: 8px 12px;
    color: #ffffff;
    content: "社内インフラ環境構築";
    background: rgba(14, 68, 120, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(8, 38, 62, 0.16);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    transform: none;
  }

  .infra-overview-map::after,
  .infra-overview-map .infra-map-core {
    display: none;
  }

  .infra-overview-map .infra-map-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    align-content: center;
    min-height: 58px;
    padding: 10px;
    color: #0b3157;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(214, 237, 248, 0.95);
    box-shadow: 0 12px 28px rgba(5, 36, 58, 0.16);
    backdrop-filter: blur(10px);
  }

  .infra-overview-map .infra-map-item span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #3467f2, #17c5ca);
    border-radius: 999px;
    font-size: 11px;
  }

  .infra-overview-map .infra-map-item h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .infra-overview-map .infra-map-item p {
    display: none;
  }
}

@media (max-width: 390px) {
  .infra-overview-map {
    gap: 7px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .infra-overview-map .infra-map-item {
    gap: 6px;
    padding: 9px 8px;
  }

  .infra-overview-map .infra-map-item h3 {
    font-size: 11px;
  }
}

/* Training hero clipping fix. Remove this block to restore the shared lower-page hero sizing. */
body[data-page="training"] .hero {
  min-height: min(390px, 48svh);
  padding-top: calc(var(--header-height) + 42px);
  padding-bottom: 42px;
}

body[data-page="training"] .hero-copy {
  max-width: 920px;
}

body[data-page="training"] .hero h1 {
  line-height: 1.18;
}

@media (max-width: 760px) {
  body[data-page="training"] .hero {
    min-height: 340px;
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: 34px;
  }

  body[data-page="training"] .hero h1 {
    font-size: clamp(25px, 7.2vw, 34px);
  }
}

@media (max-width: 420px) {
  body[data-page="training"] .hero {
    min-height: 330px;
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 32px;
  }

  body[data-page="training"] .hero h1 {
    font-size: clamp(24px, 7vw, 31px);
  }
}
/* Mobile section spacing compact. Remove this block to restore the previous mobile vertical rhythm. */
@media (max-width: 760px) {
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  main > .section:first-of-type {
    padding-top: 46px;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .lead-grid,
  .split,
  .listing-grid,
  .contact-layout,
  .access-layout,
  .cta-box,
  .footer-inner {
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  main > .section:first-of-type {
    padding-top: 38px;
  }

  .section-heading {
    margin-bottom: 24px;
  }
}

/* Company profile mobile no-scroll table. Remove this block to restore the horizontal-scroll company table. */
@media (max-width: 760px) {
  body[data-page="company"] .company-profile-section .table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body[data-page="company"] .company-profile-section .data-table {
    display: grid;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    gap: 10px;
  }

  body[data-page="company"] .company-profile-section .data-table tbody,
  body[data-page="company"] .company-profile-section .data-table tr,
  body[data-page="company"] .company-profile-section .data-table th,
  body[data-page="company"] .company-profile-section .data-table td {
    display: block;
    width: 100%;
  }

  body[data-page="company"] .company-profile-section .data-table tbody {
    display: grid;
    gap: 10px;
  }

  body[data-page="company"] .company-profile-section .data-table tr {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e8f1;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(34, 96, 142, 0.08);
  }

  body[data-page="company"] .company-profile-section .data-table th,
  body[data-page="company"] .company-profile-section .data-table td {
    border-bottom: 0;
  }

  body[data-page="company"] .company-profile-section .data-table th {
    padding: 10px 14px 6px;
    color: #2677e5;
    background: transparent;
    font-size: 12px;
    letter-spacing: 0;
  }

  body[data-page="company"] .company-profile-section .data-table td {
    padding: 0 14px 12px;
    color: #253f57;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
}

/* Employee certificates mobile no-scroll cards. Remove this block to restore the horizontal-scroll certificate table. */
@media (max-width: 760px) {
  body[data-page="about"] #certificate .table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body[data-page="about"] #certificate .data-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }

  body[data-page="about"] #certificate .data-table thead {
    display: none;
  }

  body[data-page="about"] #certificate .data-table tbody {
    display: grid;
    gap: 10px;
  }

  body[data-page="about"] #certificate .data-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(42, 133, 191, 0.18);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(20, 81, 126, 0.08);
  }

  body[data-page="about"] #certificate .data-table td {
    display: block;
    padding: 0;
    border: 0;
    color: var(--text);
    line-height: 1.55;
  }

  body[data-page="about"] #certificate .data-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 3px 9px;
    color: var(--primary);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(46, 137, 210, 0.1);
    border-radius: 999px;
  }

  body[data-page="about"] #certificate .data-table td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.9rem;
    font-weight: 700;
  }

  body[data-page="about"] #certificate .data-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
  }
}

@media (max-width: 420px) {
  body[data-page="about"] #certificate .data-table tr {
    padding: 11px 12px;
  }

  body[data-page="about"] #certificate .data-table td:nth-child(2) {
    font-size: 0.86rem;
  }
}

/* About message heading mobile wrap adjustment. Remove this block to restore the fixed mobile line break. */
@media (max-width: 760px) {
  body[data-page="about"] main > .section:first-of-type .lead-grid h2 {
    max-width: 100%;
    font-size: clamp(24px, 6.1vw, 28px);
    line-height: 1.42;
    text-wrap: balance;
  }

  body[data-page="about"] main > .section:first-of-type .lead-grid h2 br {
    display: none;
  }
}

@media (max-width: 420px) {
  body[data-page="about"] main > .section:first-of-type .lead-grid h2 {
    font-size: clamp(23px, 6vw, 26px);
  }
}


/* Phone link text center alignment. Remove this block to restore the previous left-aligned phone text. */
.phone-link {
  justify-items: center;
  text-align: center;
}

.contact-phone-card {
  align-self: center;
  width: min(100%, 420px);
}

/* Company profile mobile card refinement. Remove this block to restore the first no-scroll card styling. */
@media (max-width: 760px) {
  body[data-page="company"] .company-profile-section .data-table tr {
    padding: 12px 14px;
  }

  body[data-page="company"] .company-profile-section .data-table th {
    padding: 0 0 6px;
    font-size: 0.76rem;
    line-height: 1.35;
  }

  body[data-page="company"] .company-profile-section .data-table td {
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.72;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Contact fax center alignment. Remove this block to restore the previous fax alignment. */
.contact-phone-main .contact-fax {
  align-self: center;
  width: min(100%, 420px);
  text-align: center;
}

/* Privacy policy title nowrap. Remove this block to restore the previous two-line privacy heading. */
.privacy-policy-title-nowrap {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .privacy-policy-title-nowrap {
    font-size: clamp(22px, 5.6vw, 27px);
  }
}

@media (max-width: 380px) {
  .privacy-policy-title-nowrap {
    font-size: clamp(20px, 5.2vw, 23px);
  }
}

/* Privacy policy title mobile fit correction. Remove this block to restore the first nowrap sizing. */
@media (max-width: 760px) {
  .privacy-policy-card .privacy-policy-title-nowrap,
  body[data-page="contact"] .privacy-policy-title-nowrap {
    max-width: 100%;
    font-size: clamp(18px, 4.8vw, 24px);
    letter-spacing: 0;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .privacy-policy-card .privacy-policy-title-nowrap,
  body[data-page="contact"] .privacy-policy-title-nowrap {
    font-size: clamp(17px, 4.55vw, 20px);
  }
}

/* About message title desktop single line. Remove this block to restore the fixed two-line title on desktop. */
@media (min-width: 761px) {
  body[data-page="about"] .about-message-title {
    white-space: nowrap;
  }

  body[data-page="about"] .about-message-title br {
    display: none;
  }
}

/* Staffing hero mobile title fit. Remove this block to restore shared lower-page hero title sizing. */
@media (max-width: 760px) {
  body[data-page="staffing"] .hero h1 {
    max-width: 100%;
    font-size: clamp(26px, 7.1vw, 32px);
    line-height: 1.22;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 380px) {
  body[data-page="staffing"] .hero h1 {
    font-size: clamp(24px, 6.8vw, 28px);
  }
}

/* Staffing hero title strict no-wrap correction. Remove this block to restore the previous mobile hero title behavior. */
body[data-page="staffing"] .staffing-hero-title-nowrap {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 940px) {
  body[data-page="staffing"] .hero h1 {
    font-size: clamp(22px, 6.2vw, 29px);
    line-height: 1.24;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  body[data-page="staffing"] .hero h1 {
    font-size: 21px;
  }
}

/* Infrastructure overview mobile equal chips. Remove this block to restore content-height chips. */
@media (max-width: 760px) {
  body[data-page="infra"] .infra-overview-map,
  body[data-page="infrastructure"] .infra-overview-map {
    grid-auto-rows: 76px;
  }

  body[data-page="infra"] .infra-overview-map .infra-map-item,
  body[data-page="infrastructure"] .infra-overview-map .infra-map-item {
    min-height: 0;
    height: 76px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    padding: 10px 9px;
  }

  body[data-page="infra"] .infra-overview-map .infra-map-item h3,
  body[data-page="infrastructure"] .infra-overview-map .infra-map-item h3 {
    display: block;
    min-width: 0;
    line-height: 1.32;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 390px) {
  body[data-page="infra"] .infra-overview-map,
  body[data-page="infrastructure"] .infra-overview-map {
    grid-auto-rows: 74px;
  }

  body[data-page="infra"] .infra-overview-map .infra-map-item,
  body[data-page="infrastructure"] .infra-overview-map .infra-map-item {
    height: 74px;
  }
}

/* Infrastructure overview mobile long label fit. Remove this block to restore the previous chip label sizing. */
@media (max-width: 760px) {
  body[data-page="infra"] .infra-overview-map .infra-map-item h3,
  body[data-page="infrastructure"] .infra-overview-map .infra-map-item h3 {
    font-size: 11px;
    line-height: 1.22;
  }

  body[data-page="infra"] .infra-overview-map .item-automation h3,
  body[data-page="infrastructure"] .infra-overview-map .item-automation h3 {
    font-size: 10.5px;
  }
}

@media (max-width: 390px) {
  body[data-page="infra"] .infra-overview-map .infra-map-item h3,
  body[data-page="infrastructure"] .infra-overview-map .infra-map-item h3 {
    font-size: 10.2px;
    line-height: 1.2;
  }

  body[data-page="infra"] .infra-overview-map .item-automation h3,
  body[data-page="infrastructure"] .infra-overview-map .item-automation h3 {
    font-size: 9.8px;
  }
}

/* Footer privacy links mobile vertical layout. Remove this block to restore horizontal mobile utility links. */
@media (max-width: 760px) {
  .footer-privacy-links,
  .footer-nav .footer-privacy-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Footer privacy links mobile left alignment. Remove this block to restore inherited alignment. */
@media (max-width: 760px) {
  .footer-privacy-links,
  .footer-nav .footer-privacy-links {
    justify-content: flex-start;
    text-align: left;
  }

  .footer-privacy-links a {
    align-self: flex-start;
    text-align: left;
  }
}


/* Footer privacy links mobile align with footer columns. Remove this block to restore independent utility alignment. */
@media (max-width: 760px) {
  .footer-nav .footer-privacy-links {
    grid-column: 1 / -1;
    width: 100%;
    align-items: flex-start;
    padding-left: 12px;
    margin-left: 0;
    border-left: 1px solid rgba(191, 227, 243, 0.9);
  }

  .footer-nav .footer-privacy-links a {
    width: auto;
    align-self: flex-start;
    text-align: left;
  }
}

/* Footer privacy links mobile match recruit column alignment. Remove this block to restore flex utility placement. */
@media (max-width: 760px) {
  .footer-nav .footer-privacy-links {
    display: grid !important;
    grid-column: 1;
    justify-self: stretch;
    justify-content: stretch;
    justify-items: start;
    align-content: start;
    align-items: start;
    width: 100%;
    gap: 8px;
    padding-top: 0;
    padding-left: 12px;
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid rgba(191, 227, 243, 0.9);
    text-align: left;
  }

  .footer-nav .footer-privacy-links a {
    display: block;
    justify-self: start;
    width: auto;
    text-align: left;
  }
}

/* Footer privacy heading underline. Remove this block to hide the privacy utility heading again. */
.footer-privacy-links .footer-heading {
  display: block;
}

.footer-privacy-links .footer-heading::after {
  display: block;
}

/* Footer privacy desktop column placement. Remove this block to restore the previous utility-row layout on PC. */
@media (min-width: 941px) {
  .footer-inner {
    grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr);
    gap: 42px;
  }

  .footer-nav {
    grid-template-columns: minmax(72px, 0.76fr) minmax(96px, 0.96fr) minmax(138px, 1.16fr) minmax(86px, 0.84fr) minmax(150px, 1.1fr);
    gap: 18px;
  }

  .footer-nav .footer-privacy-links {
    grid-column: auto;
    display: grid;
    align-content: start;
    align-items: start;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid rgba(191, 227, 243, 0.9);
  }

  .footer-nav .footer-privacy-links .footer-heading {
    display: block;
  }

  .footer-nav .footer-privacy-links .footer-heading::after {
    display: block;
  }
}
/* Training hero line break control. Remove this block to restore natural wrapping. */
body[data-page="training"] .training-hero-title-line {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (min-width: 761px) {
  body[data-page="training"] .hero-copy {
    max-width: 980px;
  }
}
/* Training intro mobile two-line title. Remove this block to restore natural wrapping. */
body[data-page="training"] .training-intro-title span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  body[data-page="training"] .training-intro-title {
    font-size: clamp(25px, 6.5vw, 31px);
    line-height: 1.38;
  }
}

@media (max-width: 380px) {
  body[data-page="training"] .training-intro-title {
    font-size: clamp(23px, 6.1vw, 28px);
  }
}
/* Training monitoring mobile two-line copy. Remove this block to restore natural paragraph wrapping. */
body[data-page="training"] .training-monitor-copy span {
  display: inline;
}

@media (max-width: 760px) {
  body[data-page="training"] .training-monitor-copy {
    font-size: clamp(13px, 3.45vw, 15px);
    line-height: 1.65;
  }

  body[data-page="training"] .training-monitor-copy span {
    display: block;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 380px) {
  body[data-page="training"] .training-monitor-copy {
    font-size: clamp(12px, 3.25vw, 14px);
  }
}
/* Staffing hero mobile title size refinement. Remove this block to restore the previous compact mobile title. */
@media (max-width: 760px) {
  body[data-page="staffing"] .hero h1 {
    font-size: clamp(24px, 6.75vw, 31px);
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  body[data-page="staffing"] .staffing-hero-title-nowrap {
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  body[data-page="staffing"] .hero h1 {
    font-size: 23px;
  }
}
/* Lower-page mobile hero title size unification. Remove this block to restore page-specific mobile hero title sizes. */
@media (max-width: 760px) {
  body:not([data-page="home"]) .hero h1 {
    font-size: clamp(18px, 6.2vw, 34px);
    line-height: 1.18;
  }
}

@media (max-width: 640px) {
  body:not([data-page="home"]) .hero h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.3;
  }
}
/* Infrastructure support list mobile line control. Remove this block to restore natural list wrapping. */
@media (max-width: 760px) {
  body[data-page="infra"] .telecom-summary-card[id^="infra-"] .mini-list,
  body[data-page="infrastructure"] .telecom-summary-card[id^="infra-"] .mini-list {
    gap: 9px;
    margin-top: 14px;
    margin-bottom: 0;
  }

  body[data-page="infra"] .telecom-summary-card[id^="infra-"] .mini-list li,
  body[data-page="infrastructure"] .telecom-summary-card[id^="infra-"] .mini-list li {
    font-size: 13px;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  body[data-page="infra"] .telecom-summary-card[id^="infra-"] .mini-list li span,
  body[data-page="infrastructure"] .telecom-summary-card[id^="infra-"] .mini-list li span {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  body[data-page="infra"] .telecom-summary-card[id^="infra-"] .mini-list li,
  body[data-page="infrastructure"] .telecom-summary-card[id^="infra-"] .mini-list li {
    font-size: 12.5px;
  }
}
/* Privacy policy date block left alignment. Remove this block to restore the previous right-aligned date box. */
.privacy-policy .policy-date {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.privacy-policy .policy-date-row {
  justify-content: start;
}

.privacy-policy .policy-date-name {
  text-align: left;
}
/* Training mobile hero title clipping refinement. Remove this block to restore the unified lower-page mobile title size. */
@media (max-width: 760px) {
  body[data-page="training"] .hero h1 {
    font-size: clamp(24px, 7.1vw, 36px);
    line-height: 1.22;
  }
}

@media (max-width: 420px) {
  body[data-page="training"] .hero h1 {
    font-size: clamp(23px, 6.6vw, 31px);
  }
}

@media (max-width: 360px) {
  body[data-page="training"] .hero h1 {
    font-size: 22px;
  }
}
/* Mobile text wrapping refinements 2026-06-24. Remove this block to restore the previous mobile wrapping behavior. */
@media (max-width: 760px) {
  body[data-page="training"] .training-work-title {
    max-width: 100%;
    font-size: clamp(25px, 6.6vw, 31px);
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  body[data-page="privacy"] .privacy-policy .policy-date {
    width: 100%;
    min-width: 0;
    padding: 16px;
  }

  body[data-page="privacy"] .policy-date-row {
    grid-template-columns: max-content max-content max-content;
    gap: 0;
    justify-content: start;
    white-space: nowrap;
  }

  body[data-page="privacy"] .policy-date-row span,
  body[data-page="privacy"] .policy-date-name {
    white-space: nowrap;
  }

  body[data-page="privacy"] .privacy-policy-card,
  body[data-page="privacy"] .privacy-policy-list,
  body[data-page="privacy"] .privacy-policy-list dd,
  body[data-page="privacy"] .privacy-policy-list p,
  body[data-page="privacy"] .privacy-policy-list li {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    text-wrap: pretty;
  }

  body[data-page="staffing"] .relationship-copy p {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  body[data-page="staffing"] .relationship-copy .nowrap {
    white-space: nowrap;
  }

  body[data-page="recruit"] .hero-lead {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  body[data-page="environment"] .career-ratio {
    display: grid;
    grid-template-columns: minmax(0, 18.5fr) minmax(0, 81.5fr);
    min-height: 86px;
  }

  body[data-page="environment"] .career-ratio span {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 8px 4px;
  }

  body[data-page="environment"] .career-ratio strong {
    white-space: nowrap;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1;
  }

  body[data-page="environment"] .career-ratio small {
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  body[data-page="training"] .training-work-title {
    font-size: clamp(23px, 6.1vw, 28px);
  }

  body[data-page="environment"] .career-ratio strong {
    font-size: 17px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body[data-page="it"] .it-solution-summary-grid,
  body[data-page="it-solution"] .it-solution-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="it"] .it-solution-summary-card,
  body[data-page="it-solution"] .it-solution-summary-card {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
  }

  body[data-page="it"] .it-solution-summary-card img,
  body[data-page="it-solution"] .it-solution-summary-card img {
    height: 100%;
    min-height: 210px;
    aspect-ratio: auto;
  }

  body[data-page="it"] .it-solution-summary-card p,
  body[data-page="it-solution"] .it-solution-summary-card p {
    max-width: 42em;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    text-wrap: pretty;
  }
}
/* Training work title no-wrap. Remove this block to restore natural heading wrapping. */
body[data-page="training"] .training-work-title {
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 380px) {
  body[data-page="training"] .training-work-title {
    font-size: clamp(22px, 5.9vw, 26px);
  }
}
/* Staffing relationship mobile line control. Remove this block to restore natural relationship paragraph wrapping. */
@media (max-width: 760px) {
  body[data-page="staffing"] .relationship-copy-text {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  body[data-page="staffing"] .relationship-copy-text .relationship-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: clamp(13px, 3.55vw, 15px);
  }

  body[data-page="staffing"] .relationship-copy-text .nowrap {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 380px) {
  body[data-page="staffing"] .relationship-copy-text .relationship-line {
    font-size: clamp(12px, 3.35vw, 14px);
  }
}
/* Recruit hero mobile lead line break. Remove this block to restore natural hero lead wrapping. */
body[data-page="recruit"] .recruit-hero-lead-line {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  body[data-page="recruit"] .hero-lead {
    white-space: normal;
    line-height: 1.65;
  }

  body[data-page="recruit"] .recruit-hero-lead-line:first-child {
    font-size: clamp(13px, 3.6vw, 15px);
  }
}

@media (max-width: 380px) {
  body[data-page="recruit"] .recruit-hero-lead-line:first-child {
    font-size: clamp(12px, 3.35vw, 14px);
  }
}
/* Environment mobile career ratio readable columns. Remove this block to restore proportional mobile ratio widths. */
@media (max-width: 760px) {
  body[data-page="environment"] .career-ratio {
    grid-template-columns: minmax(118px, 0.42fr) minmax(0, 0.58fr);
  }

  body[data-page="environment"] .career-ratio span {
    padding-right: 8px;
    padding-left: 8px;
  }

  body[data-page="environment"] .career-ratio strong {
    font-size: clamp(18px, 4.7vw, 23px);
  }
}

@media (max-width: 380px) {
  body[data-page="environment"] .career-ratio {
    grid-template-columns: minmax(104px, 0.44fr) minmax(0, 0.56fr);
  }

  body[data-page="environment"] .career-ratio strong {
    font-size: 16px;
  }
}
/* Environment mobile career ratio no percent in bars. Remove this block to restore percent labels inside the ratio bars. */
@media (max-width: 760px) {
  body[data-page="environment"] .career-ratio {
    grid-template-columns: minmax(0, 18.5fr) minmax(0, 81.5fr);
  }

  body[data-page="environment"] .career-ratio span {
    padding-right: 4px;
    padding-left: 4px;
  }

  body[data-page="environment"] .career-ratio small {
    margin-top: 0;
    font-size: 12px;
    line-height: 1;
  }
}
/* Privacy mobile readable width refinement. Remove this block to restore the previous privacy mobile layout. */
@media (max-width: 760px) {
  body[data-page="privacy"] .section-inner.narrow.privacy-policy {
    width: min(100% - 20px, 980px);
  }

  body[data-page="privacy"] .privacy-policy-card {
    width: 100%;
    padding: 22px 15px;
  }

  body[data-page="privacy"] .privacy-policy-card h2 {
    margin-bottom: 16px;
    line-height: 1.35;
  }

  body[data-page="privacy"] .privacy-policy-card h3,
  body[data-page="privacy"] .privacy-policy-list dt {
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  body[data-page="privacy"] .policy-lead,
  body[data-page="privacy"] .privacy-policy-list p,
  body[data-page="privacy"] .privacy-policy-list li,
  body[data-page="privacy"] .privacy-policy-list dd {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.78;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-wrap: auto;
  }

  body[data-page="privacy"] .privacy-policy-list {
    gap: 20px;
  }

  body[data-page="privacy"] .privacy-policy-list dt {
    padding-left: 12px;
    font-size: 18px;
  }

  body[data-page="privacy"] .privacy-policy-list ol,
  body[data-page="privacy"] .privacy-policy-list ul {
    padding-left: 1.1em;
    gap: 9px;
  }
}
/* Staffing support heading tablet break. Remove this block to restore the previous iPad wrapping. */
.tablet-only-break {
  display: none;
}

@media (min-width: 761px) and (max-width: 1180px) {
  body[data-page="staffing"] .staffing-feature-heading p:not(.section-kicker) {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    line-height: 1.8;
  }

  body[data-page="staffing"] .staffing-feature-heading .tablet-only-break {
    display: block;
  }
}
/* Staffing relationship mobile typography cleanup. Remove this block to restore the previous relationship mobile text. */
@media (max-width: 760px) {
  body[data-page="staffing"] .relationship-layout p,
  body[data-page="staffing"] .relationship-copy-text {
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    text-wrap: auto;
  }

  body[data-page="staffing"] .relationship-layout .nowrap,
  body[data-page="staffing"] .relationship-copy-text .nowrap {
    display: inline-block;
    white-space: nowrap;
  }
}
/* Staffing apply button. Remove this block to restore the previous staffing mission section. */
body[data-page="staffing"] .staffing-apply-row {
  margin-top: 24px;
}

body[data-page="staffing"] .staffing-apply-row .button {
  min-width: 220px;
}

@media (max-width: 760px) {
  body[data-page="staffing"] .staffing-apply-row {
    margin-top: 20px;
  }

  body[data-page="staffing"] .staffing-apply-row .button {
    width: 100%;
    min-width: 0;
  }
}
/* ===========================================================
   Office conditioning page (office-conditioning.html).
   Remove this block and the `conditioning` page in js/site-data.js
   to roll the page back.
   =========================================================== */
body[data-page="conditioning"] .oc-note {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.85;
}

/* --- DEADLINE ------------------------------------------------
   NOTE: .band-blue is redefined later in this stylesheet (see the
   ".band-blue, .pillar-section, .service-lineup-section" rule) as a
   LIGHT section. Everything below therefore assumes dark text on a
   light background — do not switch these to white.
   ------------------------------------------------------------- */
body[data-page="conditioning"] .oc-deadline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

body[data-page="conditioning"] .oc-deadline-steps article {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
}

body[data-page="conditioning"] .oc-deadline-steps span {
  display: inline-flex;
  padding: 6px 14px;
  color: var(--white);
  background: var(--coral);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="conditioning"] .oc-deadline-steps h3 {
  margin: 14px 0 8px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-deadline-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

/* --- STATS / ESTIMATE ---------------------------------------- */
body[data-page="conditioning"] .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="conditioning"] .stat-grid strong {
  font-size: 40px;
}

body[data-page="conditioning"] .stat-grid p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

body[data-page="conditioning"] .oc-estimate {
  margin-top: 30px;
  padding: 30px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-estimate h3 {
  margin: 6px 0 0;
  font-size: 21px;
  line-height: 1.45;
}

body[data-page="conditioning"] .oc-estimate p {
  color: var(--ink-soft);
  font-size: 15px;
}

body[data-page="conditioning"] .oc-estimate-formula {
  margin: 16px 0 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-estimate-formula strong {
  color: var(--blue);
  font-size: 27px;
  white-space: nowrap;
}

/* --- SERVICE LAYERS ------------------------------------------ */
body[data-page="conditioning"] .oc-layer-lead {
  margin: 0;
  color: var(--ink) !important;
  font-weight: 800;
}

/* --- PROMISE -------------------------------------------------- */
body[data-page="conditioning"] .oc-promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="conditioning"] .oc-promise-card {
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
}

body[data-page="conditioning"] .oc-promise-card h3 {
  margin: 14px 0 4px;
  font-size: 22px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-promise-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

body[data-page="conditioning"] .oc-promise-card.is-yes {
  border-top: 4px solid var(--teal);
}

body[data-page="conditioning"] .oc-promise-card.is-no {
  border-top: 4px solid var(--coral);
  background: var(--paper);
}

body[data-page="conditioning"] .oc-promise-card.is-no .status-tag {
  color: #9b3b2a;
  background: #fdefec;
  border-color: #f3cec5;
}

body[data-page="conditioning"] .oc-callout {
  margin-top: 26px;
  padding: 24px 28px;
  background: var(--mint);
  border: 1px solid #cae7df;
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-callout p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.85;
}

body[data-page="conditioning"] .oc-callout strong {
  color: var(--ink);
}

/* --- CERTIFICATION -------------------------------------------- */
body[data-page="conditioning"] .oc-cert {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-top: 26px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-cert-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-cert-body h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-cert-body p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* --- PRICE ----------------------------------------------------- */
body[data-page="conditioning"] .oc-subhead {
  margin: 54px 0 20px;
}

body[data-page="conditioning"] .oc-subhead h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-subhead p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

body[data-page="conditioning"] .oc-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

body[data-page="conditioning"] .oc-plan-card.is-recommended {
  border-color: var(--teal);
  box-shadow: 0 20px 50px rgba(0, 163, 167, 0.16);
}

/* .content-card sets overflow:hidden, so the badge must sit inside the card. */
body[data-page="conditioning"] .oc-plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
}

/* 6 steps: 3 columns keeps the grid full. The shared auto-fit rule
   yields 4 columns at desktop width and leaves two empty cells. */
body[data-page="conditioning"] .flow-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="conditioning"] .oc-plan-sub {
  margin: 4px 0 0;
  color: var(--ink-soft) !important;
  font-size: 14px;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-plan-price {
  margin: 16px 0 2px;
  color: var(--ink) !important;
  line-height: 1;
}

body[data-page="conditioning"] .oc-plan-price strong {
  color: var(--blue);
  font-size: 38px;
  letter-spacing: -0.01em;
}

body[data-page="conditioning"] .oc-plan-price span {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-plan-unit {
  margin: 8px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px !important;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-initial {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-initial-price strong {
  display: block;
  color: var(--blue);
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

body[data-page="conditioning"] .oc-initial-price span {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-initial-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

body[data-page="conditioning"] .oc-initial-body .mini-list {
  margin-bottom: 0;
}

body[data-page="conditioning"] .data-table small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

/* --- INTERACTIVE: スクロール表示 -------------------------------- */
/* .oc-reveal は script.js が付与する。JS が動かない環境ではクラス自体が
   付かないため、この初期非表示は適用されない（コンテンツが隠れない）。 */
/* 動きは no-preference 環境のみ。reduce 環境ではクラスが付いても常に表示。 */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="conditioning"] .oc-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  body[data-page="conditioning"] .oc-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

body[data-page="conditioning"] .oc-num {
  font-style: normal;
}

/* --- INTERACTIVE: 姿勢タイプのタブ ------------------------------ */
body[data-page="conditioning"] .oc-tab-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="conditioning"] .oc-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body[data-page="conditioning"] .oc-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(18, 39, 58, 0.10);
}

body[data-page="conditioning"] .oc-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

body[data-page="conditioning"] .oc-tab.is-active {
  border-color: var(--teal);
  box-shadow: 0 16px 40px rgba(0, 163, 167, 0.16);
}

body[data-page="conditioning"] .oc-tab-mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--steel);
  color: var(--blue-dark);
  font-size: 17px;
  font-weight: 900;
  transition: background 0.2s ease, color 0.2s ease;
}

body[data-page="conditioning"] .oc-tab.is-active .oc-tab-mark {
  background: var(--teal);
  color: var(--white);
}

body[data-page="conditioning"] .oc-tab-copy strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-tab-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
}

body[data-page="conditioning"] .oc-tab-panels {
  margin-top: 16px;
}

body[data-page="conditioning"] .oc-tab-panel {
  display: none;
}

body[data-page="conditioning"] .oc-tab-panel.is-active {
  display: block;
  animation: ocPanelIn 0.32s ease;
}

@keyframes ocPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="conditioning"] .oc-tab-panel.is-active {
    animation: none;
  }
}

body[data-page="conditioning"] .oc-tab-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-type-about h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-type-about p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

body[data-page="conditioning"] .oc-type-trouble {
  display: inline-block;
  padding: 7px 12px;
  color: #166b45 !important;
  background: var(--mint);
  border: 1px solid #cae7df;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-type-fact {
  margin-top: 12px !important;
  font-size: 13px !important;
  color: var(--ink-soft);
}

body[data-page="conditioning"] .oc-prog-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .oc-prog-list li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  background: var(--paper);
}

body[data-page="conditioning"] .oc-prog-list span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}

body[data-page="conditioning"] .oc-prog-list strong {
  font-size: 14.5px;
  color: var(--ink);
}

/* --- INTERACTIVE: アコーディオン -------------------------------- */
body[data-page="conditioning"] .oc-acc-list {
  display: grid;
  gap: 12px;
}

body[data-page="conditioning"] .oc-price-accs {
  margin-top: 30px;
}

body[data-page="conditioning"] .oc-acc {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body[data-page="conditioning"] .oc-acc.is-open {
  border-color: rgba(0, 163, 167, 0.55);
  box-shadow: 0 16px 40px rgba(18, 39, 58, 0.09);
}

body[data-page="conditioning"] .oc-acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 20px;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  transition: background 0.2s ease;
}

body[data-page="conditioning"] .oc-acc-head:hover {
  background: #f3f8f9;
}

body[data-page="conditioning"] .oc-acc-head:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

body[data-page="conditioning"] .oc-acc-q {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mint);
  color: #166b45;
  font-size: 14px;
  font-weight: 900;
}

body[data-page="conditioning"] .oc-acc-title {
  flex: 1;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

body[data-page="conditioning"] .oc-acc-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
}

body[data-page="conditioning"] .oc-acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

body[data-page="conditioning"] .oc-acc-icon::before,
body[data-page="conditioning"] .oc-acc-icon::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 3px;
  left: 3px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--teal);
  transition: transform 0.3s ease;
}

body[data-page="conditioning"] .oc-acc-icon::after {
  transform: rotate(90deg);
}

body[data-page="conditioning"] .oc-acc.is-open .oc-acc-icon::after {
  transform: rotate(0deg);
}

body[data-page="conditioning"] .oc-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}

body[data-page="conditioning"] .oc-acc.is-open .oc-acc-panel {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="conditioning"] .oc-acc-panel {
    transition: none;
  }
}

body[data-page="conditioning"] .oc-acc-inner {
  min-height: 0;
  overflow: hidden;
}

body[data-page="conditioning"] .oc-acc-body {
  padding: 2px 20px 20px;
}

body[data-page="conditioning"] .oc-acc-body > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.85;
}

body[data-page="conditioning"] .oc-acc-body > p + p {
  margin-top: 10px;
}

body[data-page="conditioning"] .oc-acc-body .table-wrap {
  margin-top: 4px;
}

/* --- IN-HOUSE stats --------------------------------------------- */
body[data-page="conditioning"] .oc-inhouse-stats {
  margin-bottom: 26px;
}

body[data-page="conditioning"] .oc-inhouse-stats strong {
  font-size: 46px;
  letter-spacing: -0.01em;
}

/* .stat-grid span は display:block なので、単位が改行してしまう。inline に戻す。 */
body[data-page="conditioning"] .stat-grid strong .oc-unit {
  display: inline;
  margin: 0 0 0 3px;
  color: inherit;
  font-size: 20px;
  font-weight: 900;
}

/* --- REPORT ------------------------------------------------------ */
body[data-page="conditioning"] .oc-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

body[data-page="conditioning"] .oc-report-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
}

body[data-page="conditioning"] .oc-report-shot {
  display: block;
}

body[data-page="conditioning"] .oc-report-card img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}

body[data-page="conditioning"] .oc-report-card h3 {
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.4;
}

body[data-page="conditioning"] .oc-report-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}

/* --- CONTACT: Microsoft Forms embed ----------------------------
   The form is rendered by Microsoft Forms inside an iframe, so its
   inner styling is controlled by Microsoft and cannot be themed from
   here. The wrapper below gives it the same card treatment as the
   rest of the page. Microsoft Forms does not auto-resize its iframe,
   so the height is fixed and the form scrolls internally when long.
   --------------------------------------------------------------- */
body[data-page="conditioning"] .oc-form-embed {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body[data-page="conditioning"] .oc-form-embed iframe {
  display: block;
  width: 100%;
  height: 820px;
  max-height: 90vh;
  border: 0;
}

body[data-page="conditioning"] .contact-side .button-row.compact {
  margin-top: 20px;
}

/* --- RESPONSIVE ------------------------------------------------ */
@media (max-width: 1024px) {
  body[data-page="conditioning"] .oc-initial {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 1180px) {
  body[data-page="conditioning"] .oc-report-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  body[data-page="conditioning"] .oc-inhouse-stats strong {
    font-size: 38px;
  }
}

@media (max-width: 900px) {
  body[data-page="conditioning"] .oc-deadline-steps,
  body[data-page="conditioning"] .stat-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="conditioning"] .flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="conditioning"] .oc-promise-grid,
  body[data-page="conditioning"] .oc-tab-panel-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="conditioning"] .oc-cert {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body[data-page="conditioning"] .oc-cert-image {
    display: block;
    max-width: 220px;
  }
}

@media (max-width: 600px) {
  body[data-page="conditioning"] .flow-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="conditioning"] .oc-estimate {
    padding: 24px 22px;
  }

  body[data-page="conditioning"] .oc-estimate-formula {
    font-size: 16px;
  }

  body[data-page="conditioning"] .oc-estimate-formula strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
  }

  body[data-page="conditioning"] .oc-subhead {
    margin: 40px 0 18px;
  }

  body[data-page="conditioning"] .oc-subhead h3 {
    font-size: 21px;
  }

  body[data-page="conditioning"] .oc-promise-card,
  body[data-page="conditioning"] .oc-initial,
  body[data-page="conditioning"] .oc-cert,
  body[data-page="conditioning"] .oc-report-card {
    padding: 24px 22px;
  }

  body[data-page="conditioning"] .oc-report-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="conditioning"] .oc-tab-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="conditioning"] .oc-tab {
    padding: 14px 16px;
  }

  body[data-page="conditioning"] .oc-tab-panel-grid {
    padding: 22px 20px;
  }

  body[data-page="conditioning"] .oc-prog-list li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  body[data-page="conditioning"] .oc-acc-head {
    padding: 15px 16px;
    gap: 11px;
  }

  body[data-page="conditioning"] .oc-acc-title {
    font-size: 15px;
  }

  body[data-page="conditioning"] .oc-acc-body {
    padding: 2px 16px 18px;
  }

  body[data-page="conditioning"] .oc-report-card img {
    max-width: 320px;
  }

  body[data-page="conditioning"] .oc-form-embed iframe {
    height: 700px;
  }

  body[data-page="conditioning"] .oc-callout {
    padding: 20px 22px;
  }
}

/* ===========================================================
   オフィスコンディショニング：エディトリアル・レイヤー
   コンセプトは「鉛直線」。測定オーバーレイの基準線をページの
   背骨として使う。数字と英字はディスプレイ書体 Archivo。
   =========================================================== */
body[data-page="conditioning"] {
  --oc-display: "Archivo", "Noto Sans JP", "Yu Gothic", sans-serif;
  overflow-x: clip;
}

/* --- ヒーロー：スプリット＋巨大タイポ --------------------------- */
body[data-page="conditioning"] .hero {
  min-height: min(780px, 92svh);
  padding: calc(var(--header-height) + 56px) 0 72px;
  color: var(--ink);
  background: var(--paper);
}

body[data-page="conditioning"] .hero::before {
  background:
    linear-gradient(90deg, rgba(0, 163, 167, 0.05) 1px, transparent 1px) 0 0 / 90px 90px,
    linear-gradient(0deg, rgba(0, 163, 167, 0.05) 1px, transparent 1px) 0 0 / 90px 90px;
}

body[data-page="conditioning"] .hero-pattern {
  display: none;
}

body[data-page="conditioning"] .hero-media {
  left: auto;
  right: 0;
  z-index: 0;
  width: min(46%, 640px);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background-position: top center;
  filter: none;
  transform: none;
  will-change: transform;
}

body[data-page="conditioning"] .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(244, 248, 249, 0.5), transparent 30%);
}

body[data-page="conditioning"] .hero-content {
  position: relative;
  z-index: 1;
}

body[data-page="conditioning"] .hero-copy {
  max-width: 56%;
}

body[data-page="conditioning"] .hero .eyebrow {
  color: var(--teal);
  font-family: var(--oc-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

body[data-page="conditioning"] .hero h1 {
  color: var(--ink);
  font-size: clamp(46px, 6.2vw, 86px);
  line-height: 1.06;
  letter-spacing: 0.01em;
}

body[data-page="conditioning"] .hero-lead {
  max-width: 30em;
  color: var(--ink-soft);
}

/* --- マーキー帯 -------------------------------------------------- */
body[data-page="conditioning"] .oc-marquee {
  overflow: hidden;
  padding: 24px 0;
  background: var(--ink);
}

body[data-page="conditioning"] .oc-marquee-track {
  display: flex;
  width: max-content;
  animation: ocMarquee 26s linear infinite;
  will-change: transform;
}

body[data-page="conditioning"] .oc-marquee span {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-right: 64px;
  color: var(--white);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="conditioning"] .oc-marquee i {
  font-family: var(--oc-display);
  font-style: normal;
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(126, 224, 219, 0.75);
}

@keyframes ocMarquee {
  to { transform: translateX(-50%); }
}

/* --- ステートメント --------------------------------------------- */
body[data-page="conditioning"] .oc-statement {
  padding: 110px 0 96px;
}

body[data-page="conditioning"] .oc-statement-big {
  margin: 0 0 26px;
  padding-left: 26px;
  border-left: 4px solid var(--teal);
  color: var(--ink);
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 1.26;
}

body[data-page="conditioning"] .oc-statement-body {
  max-width: 40em;
  margin: 0;
  padding-left: 30px;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 2.05;
}

/* --- DEADLINE：ダークバンド＋巨大日付 --------------------------- */
body[data-page="conditioning"] .oc-deadline {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 20%, rgba(224, 93, 69, 0.25), transparent 45%),
    linear-gradient(135deg, #0c1e30, #14324a 55%, #0d2b35);
}

body[data-page="conditioning"] .oc-deadline .section-kicker {
  color: #ff9b7a;
  font-family: var(--oc-display);
  letter-spacing: 0.2em;
}

body[data-page="conditioning"] .oc-deadline h2 {
  color: var(--white);
  font-size: clamp(30px, 3.8vw, 48px);
}

body[data-page="conditioning"] .oc-deadline .section-heading p {
  color: rgba(255, 255, 255, 0.82);
}

body[data-page="conditioning"] .oc-deadline .oc-note {
  color: rgba(255, 255, 255, 0.55);
}

body[data-page="conditioning"] .oc-deadline-big {
  position: absolute;
  top: -14px;
  right: -8px;
  color: transparent;
  font-family: var(--oc-display);
  font-size: clamp(110px, 15vw, 220px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
  pointer-events: none;
  user-select: none;
}

/* --- 鉛直線モチーフ：各セクションの背骨 -------------------------- */
@media (min-width: 1240px) {
  body[data-page="conditioning"] #main .section:not(.oc-deadline):not(.oc-statement):not(.oc-ctaband) .section-inner {
    position: relative;
  }

  body[data-page="conditioning"] #main .section:not(.oc-deadline):not(.oc-statement):not(.oc-ctaband) .section-inner::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 4px;
    left: -36px;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), rgba(0, 163, 167, 0.04));
    opacity: 0.5;
  }

  body[data-page="conditioning"] #main .section:not(.oc-deadline):not(.oc-statement):not(.oc-ctaband) .section-inner::after {
    content: "";
    position: absolute;
    top: 6px;
    left: -40px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal);
  }
}

/* --- 見出しの拡大とキッカーのディスプレイ化 ---------------------- */
body[data-page="conditioning"] .section-heading h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.3;
}

body[data-page="conditioning"] .section-kicker {
  font-family: var(--oc-display);
  letter-spacing: 0.18em;
}

/* --- 統計数値をディスプレイ書体で巨大に -------------------------- */
body[data-page="conditioning"] .stat-grid strong {
  font-family: var(--oc-display);
  font-size: clamp(44px, 5vw, 76px);
  letter-spacing: -0.02em;
}

body[data-page="conditioning"] .oc-inhouse-stats strong {
  font-family: var(--oc-display);
  font-size: clamp(52px, 6vw, 88px);
  letter-spacing: -0.02em;
}

body[data-page="conditioning"] .oc-estimate-formula strong {
  font-family: var(--oc-display);
}

/* --- 測定結果ストリップ（全幅・自動横流し） ---------------------- */
body[data-page="conditioning"] .oc-strip {
  width: 100vw;
  margin: 10px 0 0 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

body[data-page="conditioning"] .oc-strip-track {
  display: flex;
  width: max-content;
  animation: ocStrip 46s linear infinite;
  will-change: transform;
}

body[data-page="conditioning"] .oc-strip:hover .oc-strip-track {
  animation-play-state: paused;
}

body[data-page="conditioning"] .oc-strip figure {
  flex: none;
  width: clamp(180px, 17vw, 252px);
  margin: 0 14px 0 0;
}

body[data-page="conditioning"] .oc-strip img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@keyframes ocStrip {
  to { transform: translateX(-50%); }
}

/* --- 導入の流れ：鉛直線タイムライン ------------------------------ */
body[data-page="conditioning"] .flow-list {
  position: relative;
  display: block;
  padding-left: 36px;
  overflow: visible;
  background: none;
  border: 0;
}

body[data-page="conditioning"] .flow-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 16px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), rgba(0, 163, 167, 0.12));
}

body[data-page="conditioning"] .flow-list article {
  position: relative;
  max-width: 680px;
  margin-bottom: 14px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body[data-page="conditioning"] .flow-list article span {
  position: absolute;
  top: 18px;
  left: -37px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--oc-display);
}

/* --- CTAバンド --------------------------------------------------- */
body[data-page="conditioning"] .oc-ctaband {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: var(--white);
  background:
    radial-gradient(circle at 12% 80%, rgba(0, 163, 167, 0.28), transparent 50%),
    var(--ink);
}

body[data-page="conditioning"] .oc-ctaband p.oc-ctaband-en {
  position: absolute;
  top: 50%;
  left: -8px;
  margin: 0;
  transform: translateY(-50%);
  color: transparent;
  font-family: var(--oc-display);
  font-size: clamp(84px, 13vw, 190px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 1.6px rgba(0, 163, 167, 0.4);
  pointer-events: none;
  user-select: none;
}

body[data-page="conditioning"] .oc-ctaband .section-inner {
  position: relative;
}

body[data-page="conditioning"] .oc-ctaband h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 52px);
}

body[data-page="conditioning"] .oc-ctaband p:not(.oc-ctaband-en) {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

/* --- reduce 環境：無限アニメーションを止める --------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-page="conditioning"] .oc-marquee-track,
  body[data-page="conditioning"] .oc-strip-track {
    animation: none;
  }

  body[data-page="conditioning"] .oc-strip {
    overflow-x: auto;
  }
}

/* --- レスポンシブ ------------------------------------------------ */
@media (max-width: 900px) {
  body[data-page="conditioning"] .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
  }

  body[data-page="conditioning"] .hero-media {
    position: relative;
    order: 2;
    width: 100%;
    height: min(56vw, 360px);
    margin-top: 34px;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }

  body[data-page="conditioning"] .hero-copy {
    max-width: 100%;
  }

  body[data-page="conditioning"] .oc-statement {
    padding: 72px 0 60px;
  }

  body[data-page="conditioning"] .oc-deadline-big {
    position: static;
    margin-bottom: 6px;
    font-size: clamp(64px, 18vw, 110px);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
  }

  body[data-page="conditioning"] .oc-ctaband {
    padding: 72px 0;
  }
}


/* --- ページ内サブナビ（追従＋スクロールスパイ） ------------------ */
body[data-page="conditioning"] .oc-subnav {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  background: rgba(250, 253, 253, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

body[data-page="conditioning"] .oc-subnav-inner {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: min(1180px, calc(100% - 40px));
  height: 52px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

body[data-page="conditioning"] .oc-subnav-inner::-webkit-scrollbar {
  display: none;
}

body[data-page="conditioning"] .oc-subnav a {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 15px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body[data-page="conditioning"] .oc-subnav a:hover {
  color: var(--ink);
}

body[data-page="conditioning"] .oc-subnav a.is-current {
  border-bottom-color: var(--teal);
  color: var(--teal);
}

body[data-page="conditioning"] .oc-subnav a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

body[data-page="conditioning"] .oc-subnav-cta {
  align-self: center;
  margin-left: auto;
  padding: 9px 18px !important;
  border-bottom: 0 !important;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white) !important;
}

body[data-page="conditioning"] .oc-subnav-cta:hover {
  filter: brightness(1.06);
}

/* サブナビの高さぶん、アンカー着地位置を下げる */
body[data-page="conditioning"] section[id] {
  scroll-margin-top: calc(var(--header-height) + 68px);
}

@media (max-width: 760px) {
  body[data-page="conditioning"] .oc-subnav-inner {
    height: 48px;
    gap: 0;
    /* 右端をフェードさせ、続きがあることを示す */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }

  body[data-page="conditioning"] .oc-subnav a {
    padding: 0 12px;
    font-size: 12.5px;
  }

  body[data-page="conditioning"] .oc-subnav-cta {
    padding: 7px 14px !important;
  }
}

/* --- 料金シミュレーター（人数選択） ----------------------------- */
body[data-page="conditioning"] .oc-price-picker {
  margin: 4px 0 28px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.07);
}

body[data-page="conditioning"] .oc-picker-label {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

body[data-page="conditioning"] .oc-picker-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="conditioning"] .oc-picker-btns button {
  padding: 10px 20px;
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body[data-page="conditioning"] .oc-picker-btns button:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}

body[data-page="conditioning"] .oc-picker-btns button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

body[data-page="conditioning"] .oc-picker-btns button.is-active {
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
}

body[data-page="conditioning"] .oc-picker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

body[data-page="conditioning"] .oc-picker-init b {
  margin: 0 2px;
  color: var(--blue);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

body[data-page="conditioning"] .oc-plan-price strong,
body[data-page="conditioning"] .oc-plan-unit b {
  font-variant-numeric: tabular-nums;
}

body[data-page="conditioning"] .oc-plan-year {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
}

body[data-page="conditioning"] .oc-plan-year b {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  body[data-page="conditioning"] .oc-price-picker {
    padding: 16px;
  }

  body[data-page="conditioning"] .oc-picker-btns button {
    flex: 1 1 calc(33% - 8px);
    padding: 10px 8px;
    font-size: 13px;
    text-align: center;
  }
}

/* ===========================================================
   健康経営アドバイザリー（トップのバンド＋ハブページ）
   =========================================================== */
body[data-page="home"] .home-kenko-band {
  background:
    radial-gradient(circle at 88% 15%, rgba(0, 163, 167, 0.14), transparent 45%),
    linear-gradient(180deg, #eefaf7, #e2f3ef);
}

body[data-page="home"] .home-kenko-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 54px;
  align-items: center;
}

body[data-page="home"] .home-kenko-copy h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.3;
}

body[data-page="home"] .home-kenko-copy p {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.95;
}

body[data-page="home"] .home-kenko-copy strong {
  color: #0f5c4a;
}

body[data-page="home"] .home-kenko-cert {
  display: block;
  padding: 22px;
  background: var(--white);
  border: 1px solid #cde8e0;
  border-radius: var(--radius);
  box-shadow: 0 22px 54px rgba(15, 92, 74, 0.14);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body[data-page="home"] .home-kenko-cert:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(15, 92, 74, 0.2);
}

body[data-page="home"] .home-kenko-cert img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}

body[data-page="home"] .home-kenko-cert span {
  display: block;
  margin-top: 12px;
  color: #0f5c4a;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 900px) {
  body[data-page="home"] .home-kenko-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body[data-page="home"] .home-kenko-cert {
    max-width: 360px;
  }
}

/* --- ハブページ ------------------------------------------------- */
body[data-page="kenkokeiei"] .kk-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body[data-page="kenkokeiei"] .kk-chain span {
  padding: 16px 22px;
  background: var(--mint);
  border: 1px solid #cae7df;
  border-radius: var(--radius);
  color: #0f5c4a;
  font-size: 15px;
  font-weight: 800;
}

body[data-page="kenkokeiei"] .kk-chain span.is-goal {
  color: var(--white);
  background: #0f5c4a;
  border-color: #0f5c4a;
}

body[data-page="kenkokeiei"] .kk-chain i {
  width: 22px;
  height: 14px;
  background: var(--teal);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
}

body[data-page="kenkokeiei"] .kk-why {
  margin-top: 30px;
  padding: 26px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
}

body[data-page="kenkokeiei"] .kk-why p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 2;
}

body[data-page="kenkokeiei"] .kk-why strong {
  color: var(--ink);
}

body[data-page="kenkokeiei"] .kk-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="kenkokeiei"] .kk-stats p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

body[data-page="kenkokeiei"] .kk-links .content-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="kenkokeiei"] .kk-links .content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.12);
}

body[data-page="kenkokeiei"] .kk-links h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

body[data-page="kenkokeiei"] .kk-links p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

body[data-page="kenkokeiei"] .kk-certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="kenkokeiei"] .kk-cert {
  display: block;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="kenkokeiei"] .kk-cert:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(18, 39, 58, 0.12);
}

body[data-page="kenkokeiei"] .kk-cert img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
}

body[data-page="kenkokeiei"] .kk-cert span {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

body[data-page="kenkokeiei"] .kk-note {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 900px) {
  body[data-page="kenkokeiei"] .kk-stats,
  body[data-page="kenkokeiei"] .kk-certs {
    grid-template-columns: 1fr;
  }

  body[data-page="kenkokeiei"] .kk-chain i {
    display: none;
  }
}

/* ナビ末尾の項目はドロップダウンを右揃えにし、画面外へのはみ出しを防ぐ
   （「健康経営」追加で全体が右に寄ったため）。 */
.site-nav .nav-item:nth-last-child(-n+2) .nav-dropdown {
  right: 0;
  left: auto;
}

/* --- 有資格者の在籍表示 ----------------------------------------- */
body[data-page="kenkokeiei"] .kk-people {
  margin-top: 26px;
  padding: 26px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
}

body[data-page="kenkokeiei"] .kk-people-label {
  margin: 0;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-page="kenkokeiei"] .kk-people-main {
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}

body[data-page="kenkokeiei"] .kk-people-main strong {
  color: #0f5c4a;
}

body[data-page="kenkokeiei"] .kk-people-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.9;
}

body[data-page="conditioning"] .oc-advisor {
  margin: 10px 0 14px !important;
  padding: 10px 14px;
  background: var(--mint);
  border-radius: var(--radius);
  color: #166b45 !important;
  font-size: 13.5px !important;
  font-weight: 700;
}

body[data-page="conditioning"] .oc-advisor strong {
  color: #0f5c4a;
}
/* Mobile overflow repair for health pages 2026-09-18. */
@media (max-width: 760px) {
  body[data-page="kenkokeiei"] .cta-box > div,
  body[data-page="kenkokeiei"] .cta-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="kenkokeiei"] .cta-box > div:first-child > p:not(.section-kicker) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="kenkokeiei"] .cta-actions {
    margin-top: 20px;
  }

  body[data-page="kenkokeiei"] .cta-actions .phone-link,
  body[data-page="kenkokeiei"] .cta-actions .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="kenkokeiei"] .cta-actions .phone-link {
    padding: 20px 16px;
  }

  body[data-page="kenkokeiei"] .cta-actions .phone-link strong {
    max-width: 100%;
    font-size: clamp(24px, 7.5vw, 30px);
  }

  body[data-page="conditioning"] .oc-subnav,
  body[data-page="conditioning"] .oc-subnav-inner {
    max-width: 100%;
  }

  body[data-page="conditioning"] .oc-subnav-inner {
    width: 100%;
    padding: 0 20px;
    scroll-padding-inline: 20px;
  }

  body[data-page="conditioning"] .oc-strip {
    width: 100%;
    max-width: 100%;
    margin: 24px 0 0;
    overflow: visible;
    transform: none;
  }

  body[data-page="conditioning"] .oc-strip-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    animation: none;
    transform: none !important;
    will-change: auto;
  }

  body[data-page="conditioning"] .oc-strip figure {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  body[data-page="conditioning"] .oc-strip figure[aria-hidden="true"] {
    display: none;
  }

  body[data-page="conditioning"] .oc-strip img {
    width: 100%;
    max-width: 100%;
  }
}

/* Event blog feature photos 2026-10-15. */
.blog-article .blog-event-photo {
  margin: 28px 0;
}

.blog-article .blog-event-photo img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: 420px;
  margin: 0 auto;
  object-fit: contain;
}

.blog-article .blog-event-photo figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) {
  .blog-article .blog-event-photo {
    margin: 22px 0;
  }

  .blog-article .blog-event-photo img {
    width: 100%;
    height: auto;
  }
}