/* Final presentation layer: company-grade polish over earlier experiments. */

:root {
  --kf-ink: #0d1624;
  --kf-navy: #17335f;
  --kf-muted: #5f6875;
  --kf-green: #78b94f;
  --kf-red: #a64035;
  --kf-paper: #fffefa;
  --kf-line: rgba(23, 51, 95, 0.12);
  --kf-shadow: 0 26px 70px rgba(23, 51, 95, 0.12);
}

/* 2026-06-17 modern20: restrained premium agency system */
* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(circle at 86% 10%, rgba(139, 193, 92, 0.13), transparent 34%),
    linear-gradient(180deg, #fffefa 0%, #f7f3eb 58%, #fffefa 100%) !important;
  color: #111827 !important;
}

.site-header {
  width: min(100%, 1560px) !important;
  min-height: 92px !important;
  margin: 0 auto !important;
  padding: 18px clamp(22px, 4vw, 54px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 30px) !important;
  background: rgba(255, 255, 252, 0.94) !important;
  border-bottom: 1px solid rgba(24, 35, 54, 0.08) !important;
  box-shadow: 0 14px 42px rgba(24, 35, 54, 0.06) !important;
  backdrop-filter: blur(18px) !important;
}

.brand {
  min-width: 0 !important;
}

.brand-mark-old {
  width: clamp(188px, 15vw, 246px) !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(22px, 2.4vw, 42px) !important;
}

.site-nav a {
  color: #14213d !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

.lang-switch-header {
  display: flex !important;
  align-items: center !important;
  padding: 5px !important;
  gap: 4px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 12px 32px rgba(24, 35, 54, 0.08) !important;
}

.lang-switch-header button {
  min-width: 42px !important;
  height: 38px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.nav-toggle {
  display: none !important;
}

.hero {
  padding: clamp(72px, 8vw, 118px) clamp(28px, 5vw, 72px) clamp(54px, 6vw, 88px) !important;
  background:
    radial-gradient(circle at 82% 26%, rgba(132, 191, 86, 0.14), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(84, 169, 201, 0.09), transparent 38%),
    linear-gradient(90deg, rgba(255,255,252,0.98) 0%, rgba(255,255,252,0.95) 53%, rgba(244,250,240,0.92) 100%) !important;
}

.hero-grid {
  width: min(100%, 1480px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.88fr) !important;
  align-items: center !important;
  gap: clamp(54px, 7vw, 116px) !important;
}

.hero-copy {
  width: 100% !important;
  max-width: 760px !important;
}

.hero .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 26px !important;
  color: #a84233 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.24em !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 44px !important;
  height: 1px !important;
  flex: 0 0 44px !important;
  background: #a84233 !important;
}

.japan-cue {
  display: inline-flex !important;
  margin: 0 0 34px !important;
  padding: 13px 24px !important;
  border: 1px solid rgba(132, 191, 86, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 18px 44px rgba(24, 35, 54, 0.06) !important;
}

.japan-cue span {
  color: #18345e !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.hero-jp-line {
  margin: 0 0 20px !important;
  color: #18345e !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.28 !important;
  font-weight: 920 !important;
  letter-spacing: -0.035em !important;
}

.hero h1,
html[lang="ja"] .hero h1 {
  max-width: 780px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(58px, 5.8vw, 92px) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  letter-spacing: -0.065em !important;
  text-wrap: balance !important;
  word-break: normal !important;
}

html[lang="ja"] .hero h1 {
  max-width: 720px !important;
  font-size: clamp(52px, 4.7vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 680px !important;
  color: #5d6673 !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  font-weight: 720 !important;
  letter-spacing: -0.015em !important;
}

.hero-lede {
  margin: 28px 0 0 !important;
}

.hero-proof-line {
  margin: 18px 0 0 !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 30px !important;
  max-width: 650px !important;
}

.hero-scope span {
  padding: 10px 15px !important;
  border: 1px solid rgba(24, 35, 54, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #18345e !important;
  box-shadow: 0 10px 24px rgba(24, 35, 54, 0.05) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.signal-row,
.hero-company-proof,
.gtm-visual-old {
  display: none !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 34px !important;
}

.button {
  min-height: 54px !important;
  padding: 0 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 920 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.button-primary {
  background: #18345e !important;
  color: #fff !important;
  border: 1px solid #18345e !important;
  box-shadow: 0 18px 38px rgba(24, 52, 94, 0.22) !important;
}

.button-secondary {
  background: rgba(255,255,255,0.82) !important;
  color: #18345e !important;
  border: 1px solid rgba(24, 52, 94, 0.16) !important;
  box-shadow: 0 14px 30px rgba(24, 35, 54, 0.07) !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: block !important;
  min-height: 560px !important;
}

.hero-field-card {
  position: relative !important;
  width: min(100%, 620px) !important;
  margin: 0 0 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 32px 80px rgba(24, 35, 54, 0.13) !important;
}

.hero-field-card img {
  width: 100% !important;
  height: 410px !important;
  display: block !important;
  object-fit: cover !important;
  filter: saturate(0.96) contrast(1.03) !important;
}

.hero-field-card figcaption {
  display: grid !important;
  gap: 8px !important;
  padding: 24px 28px 28px !important;
  background: #fff !important;
}

.hero-field-card figcaption span {
  color: #4b8b36 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  color: #14213d !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
}

.hero-system-card {
  position: absolute !important;
  left: -34px !important;
  bottom: 42px !important;
  width: min(460px, 82%) !important;
  padding: 24px 28px !important;
  border-left: 7px solid #a84233 !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 28px 72px rgba(24, 35, 54, 0.16) !important;
}

.hero-system-card span {
  color: #4b8b36 !important;
  display: block !important;
  margin-bottom: 10px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  color: #18345e !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 clamp(28px, 5vw, 72px) 64px !important;
  background: transparent !important;
}

.focus-strip > div {
  width: min(100%, 1280px) !important;
  margin: -22px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 252, 0.94) !important;
  box-shadow: 0 24px 70px rgba(24, 35, 54, 0.09) !important;
}

.focus-strip span {
  min-height: 128px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
  color: #18345e !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b {
  color: #4b8b36 !important;
  font-size: clamp(30px, 2.8vw, 52px) !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

.focus-strip small {
  margin-top: 8px !important;
  color: #18345e !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 860 !important;
}

.section-pad {
  padding-left: clamp(28px, 5vw, 72px) !important;
  padding-right: clamp(28px, 5vw, 72px) !important;
}

.company-proof-inner,
.why-layout,
.about-grid,
.contact-panel,
.section-intro,
.section-intro.wide,
.section-intro.compact,
.sales-service-grid,
.support-section,
.owned-section,
.network-grid {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.company-proof {
  padding-top: 50px !important;
  padding-bottom: 78px !important;
  background: #fffefa !important;
}

.company-proof-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.82fr) !important;
  align-items: center !important;
  gap: clamp(42px, 6vw, 86px) !important;
}

.company-proof-copy h2,
.section-intro h2,
.why-layout h2,
.about-section h2,
.contact-panel h2 {
  color: #111827 !important;
  font-size: clamp(42px, 4.6vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

.company-proof-copy p,
.section-intro p,
.about-copy p,
.why-layout p,
.contact-panel p {
  color: #5d6673 !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  font-weight: 650 !important;
}

.company-proof-board {
  display: grid !important;
  gap: 18px !important;
}

.company-proof-photo {
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(24, 35, 54, 0.12) !important;
}

.company-proof-photo img {
  width: 100% !important;
  height: 330px !important;
  object-fit: cover !important;
  display: block !important;
}

.company-proof-photo figcaption {
  padding: 18px 22px !important;
  color: #18345e !important;
  font-weight: 900 !important;
}

.company-proof-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.company-proof-metrics article {
  padding: 18px !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.gtm-section {
  padding-top: 86px !important;
  padding-bottom: 90px !important;
  background: #f6f2e9 !important;
}

.sales-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 36px !important;
}

.sales-service-grid article {
  min-height: 270px !important;
  padding: 28px !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 18px 46px rgba(24, 35, 54, 0.07) !important;
}

.sales-service-grid article span {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 42px !important;
  border-radius: 999px !important;
  background: rgba(132,191,86,0.14) !important;
  color: #4b8b36 !important;
  font-weight: 950 !important;
}

.sales-service-grid h3 {
  color: #111827 !important;
  font-size: 27px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
}

.sales-service-grid p {
  color: #67717f !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 650 !important;
}

.pain-panel {
  margin-top: 54px !important;
  padding: clamp(34px, 5vw, 62px) !important;
  border-radius: 32px !important;
  background: #18345e !important;
  color: #fff !important;
  box-shadow: 0 30px 80px rgba(24, 52, 94, 0.22) !important;
}

.pain-panel .section-intro,
.pain-panel .section-intro.compact {
  margin-left: 0 !important;
}

.pain-panel .eyebrow,
.pain-panel h2,
.pain-panel p {
  color: #fff !important;
}

.pain-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

.pain-grid article {
  min-height: 190px !important;
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.08) !important;
}

.pain-cta {
  margin-top: 30px !important;
  background: #fff !important;
  color: #18345e !important;
  border-color: #fff !important;
}

.network-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.network-grid a {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 210px auto auto 1fr !important;
  overflow: hidden !important;
  border: 1px solid rgba(24,35,54,0.1) !important;
  border-radius: 24px !important;
  background: #fff !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: 0 18px 46px rgba(24,35,54,0.07) !important;
}

.network-grid img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
}

.network-grid strong {
  padding: 24px 24px 0 !important;
  color: #14213d !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.network-grid span {
  padding: 10px 24px 0 !important;
  color: #4b8b36 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.network-grid p {
  padding: 16px 24px 26px !important;
  color: #66717e !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
}

@media (max-width: 1080px) {
  .hero-grid,
  .company-proof-inner {
    grid-template-columns: 1fr !important;
  }

  .hero-copy {
    max-width: 820px !important;
  }

  .hero-bridge-visual {
    min-height: auto !important;
  }

  .hero-field-card {
    margin-left: 0 !important;
  }

  .hero-system-card {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .sales-service-grid,
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body {
    background: #fffefa !important;
  }

  .site-header {
    min-height: 76px !important;
    padding: 12px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .brand-mark-old {
    width: min(178px, calc(100vw - 190px)) !important;
    min-width: 138px !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    display: grid !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 50 !important;
    padding: 18px !important;
    gap: 14px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(24, 35, 54, 0.16) !important;
  }

  .lang-switch-header {
    transform: scale(0.92) !important;
    transform-origin: right center !important;
  }

  .nav-toggle {
    width: 50px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24, 35, 54, 0.13) !important;
    background: #fff !important;
  }

  .hero {
    padding: 48px 22px 34px !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    gap: 12px !important;
    margin-bottom: 20px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.19em !important;
  }

  .hero .eyebrow::before {
    width: 42px !important;
    flex-basis: 42px !important;
  }

  .japan-cue {
    width: 100% !important;
    margin-bottom: 28px !important;
    padding: 12px 16px !important;
    justify-content: center !important;
  }

  .japan-cue span {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .hero-jp-line {
    margin-bottom: 14px !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 11.5vw, 50px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 700 !important;
  }

  .hero-scope {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .hero-scope span {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .hero-bridge-visual {
    display: block !important;
    margin-top: 28px !important;
    min-height: auto !important;
  }

  .hero-field-card {
    width: 100% !important;
    border-radius: 22px !important;
  }

  .hero-field-card img {
    height: 210px !important;
  }

  .hero-field-card figcaption {
    padding: 16px 18px 18px !important;
  }

  .hero-field-card figcaption strong {
    font-size: 22px !important;
  }

  .hero-system-card {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .hero-system-card strong {
    font-size: 18px !important;
  }

  .focus-strip {
    padding: 0 22px 48px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 22px !important;
  }

  .focus-strip span {
    min-height: 110px !important;
    padding: 16px !important;
  }

  .focus-strip b {
    font-size: 30px !important;
  }

  .focus-strip small {
    font-size: 12px !important;
  }

  .section-pad {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .company-proof,
  .gtm-section,
  .why-section,
  .about-section,
  .contact-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .company-proof-inner,
  .why-layout,
  .about-grid,
  .sales-service-grid,
  .network-grid,
  .support-grid,
  .pain-grid,
  .company-proof-metrics {
    grid-template-columns: 1fr !important;
  }

  .company-proof-copy h2,
  .section-intro h2,
  .why-layout h2,
  .about-section h2,
  .contact-panel h2 {
    font-size: clamp(36px, 10vw, 46px) !important;
    line-height: 1.08 !important;
  }

  .company-proof-copy p,
  .section-intro p,
  .about-copy p,
  .why-layout p,
  .contact-panel p {
    font-size: 16px !important;
  }

  .sales-service-grid article {
    min-height: auto !important;
    padding: 24px !important;
  }

  .sales-service-grid article span {
    margin-bottom: 28px !important;
  }

  .pain-panel {
    padding: 28px 20px !important;
    border-radius: 24px !important;
  }

  .network-grid a {
    grid-template-rows: 190px auto auto auto !important;
  }

  .network-grid img {
    height: 190px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: min(164px, calc(100vw - 172px)) !important;
    min-width: 128px !important;
  }

  .lang-switch-header button {
    min-width: 38px !important;
    height: 36px !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
  }

  .hero {
    padding-inline: 20px !important;
  }

  .hero-grid,
  .focus-strip > div {
    max-width: 350px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.8vw, 46px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(33px, 8.8vw, 38px) !important;
  }
}

/* 2026-06-17 modern12: final agency-grade polish and mobile readability */
:root {
  --modern-ink: #101722;
  --modern-navy: #17345f;
  --modern-muted: #5f6875;
  --modern-paper: #fffdf8;
  --modern-wash: #f6faf2;
  --modern-line: rgba(20, 30, 44, 0.11);
  --modern-green: #7fbd4f;
  --modern-rust: #aa3b31;
}

html,
body {
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 84% 8%, rgba(127, 189, 79, 0.1), transparent 28%),
    linear-gradient(180deg, #fffefa 0%, #f7f6f0 100%) !important;
}

.site-header {
  box-shadow: 0 16px 44px rgba(16, 23, 34, 0.06) !important;
}

.brand-mark-old {
  width: 212px !important;
  height: auto !important;
  object-fit: contain !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(70px, 7vw, 104px) 0 82px !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.96) 0 50%, rgba(244, 250, 239, 0.86) 50% 100%),
    radial-gradient(circle at 82% 34%, rgba(127, 189, 79, 0.16), transparent 34%) !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero-grid {
  width: min(1200px, calc(100% - 64px)) !important;
  max-width: 1200px !important;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 0.86fr) !important;
  gap: clamp(54px, 7vw, 104px) !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 645px !important;
}

.hero .eyebrow {
  margin-bottom: 28px !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  color: var(--modern-rust) !important;
}

.hero .eyebrow::before {
  width: 34px !important;
  background: var(--modern-green) !important;
}

.japan-cue {
  margin: 0 0 42px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(127, 189, 79, 0.32) !important;
  box-shadow: 0 18px 44px rgba(23, 52, 95, 0.06) !important;
}

.japan-cue span {
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--modern-navy) !important;
}

.hero-jp-line {
  margin: 0 0 18px !important;
  max-width: 620px !important;
  font-size: clamp(23px, 2.1vw, 31px) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.035em !important;
  color: var(--modern-navy) !important;
}

.hero h1 {
  max-width: 650px !important;
  font-size: clamp(54px, 5vw, 74px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.055em !important;
  font-weight: 850 !important;
  color: var(--modern-ink) !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 680px !important;
  font-size: clamp(46px, 4.35vw, 62px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.04em !important;
}

.hero-title-line + .hero-title-line::before {
  content: none !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 610px !important;
  font-size: 17px !important;
  line-height: 1.74 !important;
  color: var(--modern-muted) !important;
  font-weight: 650 !important;
}

.hero-proof-line {
  margin-top: 18px !important;
}

.hero-scope {
  margin-top: 24px !important;
  gap: 10px !important;
}

.hero-scope span {
  padding: 10px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--modern-navy) !important;
  border: 1px solid rgba(23, 52, 95, 0.1) !important;
}

.signal-row {
  display: none !important;
}

.hero-actions {
  margin-top: 30px !important;
  gap: 14px !important;
}

.hero-actions .button,
.button {
  min-height: 56px !important;
  border-radius: 12px !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
}

.hero-actions .button-primary,
.button-primary {
  color: #fff !important;
  background: var(--modern-navy) !important;
  box-shadow: 0 18px 40px rgba(23, 52, 95, 0.18) !important;
}

.hero-actions .button-secondary,
.button-secondary {
  color: var(--modern-navy) !important;
  background: #fff !important;
  border: 1px solid rgba(23, 52, 95, 0.14) !important;
}

.hero-company-proof {
  margin-top: 26px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.hero-company-proof article {
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 52, 95, 0.09) !important;
}

.hero-company-proof strong {
  font-size: 13px !important;
  color: var(--modern-navy) !important;
}

.hero-company-proof span {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--modern-muted) !important;
}

.hero-bridge-visual {
  display: grid !important;
  align-content: center !important;
  gap: 0 !important;
}

.hero-field-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(520px, 100%) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(23, 52, 95, 0.16) !important;
  transform: none !important;
}

.hero-field-card img {
  width: 100% !important;
  aspect-ratio: 16 / 10.2 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.95) contrast(1.02) !important;
}

.hero-field-card figcaption {
  display: grid !important;
  gap: 8px !important;
  padding: 18px 22px 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.hero-field-card figcaption span {
  color: var(--modern-rust) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  color: var(--modern-navy) !important;
  font-size: 20px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
}

.hero-system-card {
  z-index: 3 !important;
  width: min(430px, calc(100% - 44px)) !important;
  margin: -52px auto 0 !important;
  padding: 22px 24px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(127, 189, 79, 0.34) !important;
  box-shadow: 0 24px 60px rgba(23, 52, 95, 0.14) !important;
}

.hero-system-card span {
  color: #4f8b3d !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
}

.hero-system-card strong {
  color: var(--modern-navy) !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 32px 76px !important;
  margin-top: -34px !important;
  position: relative !important;
  z-index: 6 !important;
}

.focus-strip > div {
  width: min(1120px, 100%) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(23, 52, 95, 0.08) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.focus-strip span {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 26px 28px !important;
  min-height: 126px !important;
}

.focus-strip b,
.focus-strip strong {
  font-size: clamp(34px, 3.3vw, 50px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
}

.section-pad {
  padding-top: clamp(78px, 8vw, 120px) !important;
  padding-bottom: clamp(78px, 8vw, 120px) !important;
}

.section-intro {
  gap: clamp(28px, 5vw, 70px) !important;
}

.section-intro h2 {
  max-width: 760px !important;
  font-size: clamp(40px, 4.7vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}

.section-intro p {
  max-width: 620px !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

.network-grid,
html[lang="ja"] .network-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.network-grid a,
html[lang="ja"] .network-grid a {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 190px auto auto 1fr !important;
  align-content: start !important;
  text-align: left !important;
  border-radius: 24px !important;
  border: 1px solid rgba(23, 52, 95, 0.11) !important;
  background: #fff !important;
  box-shadow: 0 22px 52px rgba(23, 52, 95, 0.07) !important;
  overflow: hidden !important;
}

.network-grid img,
.network-grid a img {
  height: 190px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  padding: 24px 24px 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  color: var(--modern-navy) !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  padding: 12px 24px 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.18em !important;
  color: #4f8b3d !important;
  text-align: left !important;
}

.network-grid p,
.network-grid a p {
  padding: 18px 24px 26px !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: var(--modern-muted) !important;
  text-align: left !important;
}

.pain-panel .button-primary {
  background: #fff !important;
  color: var(--modern-navy) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

@media (max-width: 1060px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-bridge-visual {
    max-width: 620px !important;
    margin: 0 auto !important;
  }

  .network-grid,
  html[lang="ja"] .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body {
    background: #fffdf8 !important;
  }

  .top-strip {
    height: 8px !important;
  }

  .site-header {
    min-height: 72px !important;
    padding: 10px 14px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
  }

  .brand,
  .brand-lockup-combo {
    min-width: 0 !important;
    gap: 0 !important;
  }

  .brand-mark-old {
    width: 148px !important;
    max-width: calc(100vw - 188px) !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .brand-lockup-combo small,
  .brand small {
    display: none !important;
  }

  .lang-switch-header {
    min-width: 92px !important;
    width: 92px !important;
    height: 48px !important;
    padding: 4px !important;
  }

  .lang-switch button {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
  }

  .hero {
    padding: 42px 0 52px !important;
    background:
      radial-gradient(circle at 100% 10%, rgba(127, 189, 79, 0.12), transparent 34%),
      linear-gradient(180deg, #fffefa 0%, #f8fbf4 100%) !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
    padding: 0 24px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18em !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin: 26px 0 12px !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.02em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(36px, 9.5vw, 41px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(30px, 7.9vw, 34px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-lede,
  .hero-proof-line,
  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    max-width: 100% !important;
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    font-weight: 620 !important;
  }

  .hero-scope {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 54px !important;
  }

  .hero-bridge-visual,
  .hero-company-proof {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 26px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(23, 52, 95, 0.1) !important;
    box-shadow: 0 18px 44px rgba(23, 52, 95, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 9.5 !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .hero-mobile-proof figcaption {
    padding: 13px 15px !important;
    color: var(--modern-navy) !important;
    font-size: 11px !important;
    letter-spacing: 0.13em !important;
    line-height: 1.3 !important;
  }

  .focus-strip {
    padding: 0 22px 50px !important;
    margin-top: 0 !important;
  }

  .focus-strip > div {
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
  }

  .focus-strip span {
    min-height: 82px !important;
    padding: 17px 18px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 30px !important;
    letter-spacing: -0.04em !important;
  }

  .section-pad {
    padding: 58px 24px !important;
  }

  .section-intro {
    display: block !important;
  }

  .section-intro h2 {
    max-width: 100% !important;
    font-size: clamp(32px, 8.8vw, 40px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.04em !important;
  }

  .section-intro p {
    margin-top: 18px !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .network-grid,
  html[lang="ja"] .network-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .network-grid a,
  html[lang="ja"] .network-grid a {
    grid-template-rows: 164px auto auto auto !important;
    border-radius: 20px !important;
  }

  .network-grid img,
  .network-grid a img {
    height: 164px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    padding: 20px 20px 0 !important;
    font-size: 23px !important;
  }

  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: 138px !important;
    max-width: calc(100vw - 176px) !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: 35px !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: 30px !important;
  }
}

/* 2026-06-17 modern6: company-grade final pass */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  background: #fbfaf5 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

main,
.hero,
.section-pad,
.muted-section,
.company-proof,
.owned-section,
.pain-panel,
.site-header,
.focus-strip,
.contact-section,
.about-section,
.why-section {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.site-header {
  min-height: 96px !important;
  height: auto !important;
  padding: 18px clamp(28px, 7vw, 112px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) 1fr auto auto !important;
  align-items: center !important;
  gap: 24px !important;
  background: rgba(255, 253, 248, 0.94) !important;
  border-bottom: 1px solid rgba(31, 42, 55, 0.08) !important;
  box-shadow: 0 16px 36px rgba(26, 39, 64, 0.05) !important;
  backdrop-filter: blur(16px) !important;
}

.brand {
  min-width: 0 !important;
}

.brand-lockup-combo {
  display: block !important;
}

.brand-lockup-combo small {
  display: none !important;
}

.brand-mark-old {
  width: 226px !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

.site-nav {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 42px) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.site-nav a {
  color: #14213a !important;
  text-decoration: none !important;
}

.lang-switch {
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  box-shadow: 0 10px 26px rgba(24, 35, 54, 0.08) !important;
}

.lang-switch button {
  min-width: 46px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  color: #19345e !important;
}

.lang-switch button.active {
  color: #fff !important;
  background: #18345e !important;
}

@media (min-width: 861px) {
  .lang-switch-header {
    display: flex !important;
  }

  .site-nav .lang-switch {
    display: none !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

.hero {
  min-height: auto !important;
  padding: clamp(72px, 7vw, 118px) 0 clamp(60px, 7vw, 106px) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(132, 191, 86, 0.13), transparent 34%),
    linear-gradient(90deg, #fffdf8 0 52%, #f3faef 52% 100%) !important;
}

.hero-grid {
  width: min(1480px, calc(100% - 120px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.96fr) minmax(440px, 0.84fr) !important;
  align-items: center !important;
  gap: clamp(64px, 7vw, 118px) !important;
}

.hero-copy {
  width: 100% !important;
  max-width: 740px !important;
  min-width: 0 !important;
}

.hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
  color: #a43a2f !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 44px !important;
  height: 1px !important;
  display: block !important;
  background: #a43a2f !important;
  flex: 0 0 auto !important;
}

.japan-cue {
  display: inline-flex !important;
  margin: 0 0 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.japan-cue span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 13px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132, 191, 86, 0.38) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #19345e !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 18px 44px rgba(43, 60, 86, 0.08) !important;
}

.hero-jp-line {
  margin: 0 0 20px !important;
  color: #19345e !important;
  font-size: clamp(24px, 1.9vw, 31px) !important;
  line-height: 1.35 !important;
  font-weight: 880 !important;
  letter-spacing: -0.035em !important;
  max-width: 680px !important;
}

.hero h1 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #101722 !important;
  font-size: clamp(58px, 5.2vw, 88px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.065em !important;
  font-weight: 920 !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 760px !important;
  font-size: clamp(48px, 4vw, 72px) !important;
  line-height: 1.09 !important;
  letter-spacing: -0.045em !important;
}

.hero-title-line {
  display: block !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 660px !important;
  color: #536070 !important;
  font-size: 19px !important;
  line-height: 1.68 !important;
  font-weight: 680 !important;
  letter-spacing: -0.015em !important;
}

.hero-lede {
  margin-top: 30px !important;
}

.hero-proof-line {
  margin-top: 18px !important;
}

.hero-scope {
  max-width: 680px !important;
  margin-top: 28px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  overflow: visible !important;
}

.hero-scope span {
  min-width: 0 !important;
  width: auto !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  color: #19345e !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.hero-scope span::before {
  display: none !important;
}

.hero-actions {
  margin-top: 34px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.button,
.hero-actions .button,
.contact-card .button,
.pain-panel .button {
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.button-primary,
.hero-actions .button-primary {
  background: #18345e !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(24, 52, 94, 0.2) !important;
}

.button-secondary,
.hero-actions .button-secondary {
  background: #fff !important;
  color: #18345e !important;
  border: 1px solid rgba(24, 35, 54, 0.14) !important;
}

.hero-bridge-visual {
  width: 100% !important;
  min-height: 620px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-bridge-visual .bridge-card {
  width: min(100%, 560px) !important;
  height: 500px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  background:
    linear-gradient(rgba(25, 52, 94, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 52, 94, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 75% 28%, rgba(176, 58, 46, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 246, 0.96)) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  box-shadow: 0 30px 80px rgba(31, 42, 55, 0.12) !important;
  overflow: hidden !important;
}

.bridge-title,
.bridge-label {
  color: #a43a2f !important;
}

.route-label,
.bridge-note,
.point-label {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  color: #18345e !important;
  box-shadow: 0 14px 34px rgba(31, 42, 55, 0.08) !important;
}

.hero-bridge-visual .hero-proof-card {
  position: absolute !important;
  left: max(0px, calc(50% - 280px)) !important;
  right: auto !important;
  bottom: 8px !important;
  width: min(520px, 92%) !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 18px 12px 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  box-shadow: 0 22px 54px rgba(31, 42, 55, 0.14) !important;
  transform: translateY(18%) !important;
}

.hero-bridge-visual .hero-proof-card img {
  width: 150px !important;
  height: 94px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.hero-bridge-visual .hero-proof-card span {
  display: block !important;
  margin-bottom: 6px !important;
  color: #4b8b38 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.hero-bridge-visual .hero-proof-card strong {
  display: block !important;
  color: #18345e !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
  letter-spacing: -0.03em !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 clamp(28px, 7vw, 112px) 76px !important;
  background: #fbfaf5 !important;
}

.focus-strip > div {
  width: min(1280px, 100%) !important;
  margin: -38px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(24, 35, 54, 0.11) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 26px 70px rgba(31, 42, 55, 0.09) !important;
  overflow: hidden !important;
}

.focus-strip span {
  min-height: 138px !important;
  padding: 30px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
  color: #18345e !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip strong {
  display: block !important;
  margin-bottom: 5px !important;
  color: #4d8d38 !important;
  font-size: clamp(36px, 3.2vw, 54px) !important;
  line-height: 0.95 !important;
  font-weight: 920 !important;
  letter-spacing: -0.06em !important;
}

.section-pad {
  padding-left: clamp(28px, 7vw, 112px) !important;
  padding-right: clamp(28px, 7vw, 112px) !important;
}

.section-shell,
.services-shell,
.owned-section,
.company-proof,
.about-inner,
.contact-card {
  width: min(1280px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-intro {
  max-width: 940px !important;
}

.section-intro h2,
.company-proof h2,
.about-copy h2,
.contact-card h2 {
  color: #151d26 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.sales-service-grid {
  margin-top: 46px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.sales-service-card {
  min-height: 312px !important;
  padding: 34px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(24, 35, 54, 0.11) !important;
  background: #fff !important;
  box-shadow: 0 22px 58px rgba(31, 42, 55, 0.06) !important;
}

.sales-service-card h3 {
  color: #172235 !important;
  font-size: 26px !important;
  line-height: 1.14 !important;
  letter-spacing: -0.04em !important;
}

.sales-service-card p {
  color: #65707e !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
}

.pain-panel {
  width: min(1280px, 100%) !important;
  margin: 72px auto 0 !important;
  padding: clamp(46px, 5vw, 72px) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #17345e, #1f416d) !important;
  background-size: 44px 44px, 44px 44px, auto !important;
  color: #fff !important;
  box-shadow: 0 34px 80px rgba(24, 52, 94, 0.18) !important;
}

.pain-panel h2 {
  max-width: 780px !important;
  color: #fff !important;
  font-size: clamp(40px, 4.5vw, 72px) !important;
  line-height: 1.04 !important;
}

.pain-panel .section-intro p,
.pain-panel p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.pain-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 34px 0 !important;
}

.pain-shot {
  min-height: 260px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.pain-shot img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
}

.pain-shot figcaption {
  padding: 14px 18px !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.pain-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.pain-card {
  min-height: 180px !important;
  padding: 24px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.pain-card strong {
  color: #f7efd1 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

.pain-card p {
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.pain-panel .button,
.pain-panel .button-primary {
  margin-top: 30px !important;
  background: #fff !important;
  color: #18345e !important;
  border: 0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
}

.network-grid {
  margin-top: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.network-grid a {
  min-height: 430px !important;
  display: grid !important;
  grid-template-rows: 190px auto auto 1fr !important;
  padding: 0 0 28px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 22px 54px rgba(31, 42, 55, 0.06) !important;
  text-align: left !important;
  text-decoration: none !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  padding: 26px 28px 0 !important;
  color: #172235 !important;
  font-size: 27px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  padding: 14px 28px 0 !important;
  color: #4d8d38 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.2em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.network-grid p,
.network-grid a p {
  padding: 14px 28px 0 !important;
  color: #66717f !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
  text-align: left !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    width: min(100% - 64px, 1120px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr) !important;
    gap: 44px !important;
  }

  .hero h1 {
    font-size: clamp(52px, 5.7vw, 72px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(43px, 4.8vw, 60px) !important;
  }

  .hero-bridge-visual .bridge-card {
    width: 100% !important;
    height: 460px !important;
  }

  .sales-service-grid,
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .color-strip {
    height: 9px !important;
  }

  .site-header {
    min-height: 78px !important;
    padding: 12px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .brand-mark-old {
    width: min(174px, calc(100vw - 182px)) !important;
    min-width: 138px !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    display: grid !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 30 !important;
    padding: 18px !important;
    gap: 14px !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(24, 35, 54, 0.16) !important;
  }

  .lang-switch-header {
    display: flex !important;
  }

  .lang-switch button {
    min-width: 42px !important;
    min-height: 40px !important;
  }

  .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24, 35, 54, 0.12) !important;
    background: #fff !important;
  }

  .hero {
    padding: 50px 0 58px !important;
    background:
      radial-gradient(circle at 96% 18%, rgba(132, 191, 86, 0.1), transparent 32%),
      #fffdf8 !important;
  }

  .hero-grid {
    width: 100% !important;
    padding: 0 24px !important;
    display: block !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.2em !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin-top: 30px !important;
    margin-bottom: 14px !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.03em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(44px, 12.2vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 9.8vw, 44px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    font-weight: 680 !important;
  }

  .hero-lede {
    margin-top: 24px !important;
  }

  .hero-scope {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 22px !important;
    max-width: 100% !important;
  }

  .hero-scope span {
    white-space: normal !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 28px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24, 35, 54, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 22px 52px rgba(24, 35, 54, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: #18345e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 20px 54px !important;
  }

  .focus-strip > div {
    margin-top: 0 !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    min-height: 112px !important;
    padding: 18px !important;
    border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
    border-bottom: 1px solid rgba(24, 35, 54, 0.1) !important;
    font-size: 13px !important;
  }

  .focus-strip strong {
    font-size: 34px !important;
  }

  .section-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .section-intro h2,
  .company-proof h2,
  .about-copy h2,
  .contact-card h2 {
    font-size: clamp(36px, 10vw, 48px) !important;
    line-height: 1.1 !important;
  }

  .sales-service-grid,
  .network-grid,
  .pain-gallery,
  .pain-grid {
    grid-template-columns: 1fr !important;
  }

  .sales-service-card {
    min-height: auto !important;
    padding: 28px !important;
  }

  .pain-panel {
    margin-top: 50px !important;
    padding: 30px 20px !important;
    border-radius: 26px !important;
  }

  .pain-panel h2 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.12 !important;
  }

  .pain-shot {
    min-height: auto !important;
  }

  .pain-shot img {
    height: 190px !important;
  }

  .pain-card {
    min-height: auto !important;
  }

  .network-grid a {
    min-height: auto !important;
    grid-template-rows: 188px auto auto auto !important;
    border-radius: 22px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    font-size: 24px !important;
    padding: 22px 22px 0 !important;
  }

  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: min(164px, calc(100vw - 174px)) !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 11vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9vw, 40px) !important;
  }

  .hero-jp-line {
    font-size: 20px !important;
  }

  .hero-scope span {
    font-size: 11px !important;
  }
}

/* 2026-06-17 modern18: hard mobile containment and cleaner first impression */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body * {
    box-sizing: border-box !important;
  }

  .site-header,
  .hero,
  .hero-grid,
  .hero-copy,
  .hero-copy > *,
  .hero-mobile-proof,
  .focus-strip,
  .section-pad,
  .network-grid,
  .sales-service-grid {
    max-width: 100% !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 11px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-mark-old {
    width: min(176px, calc(100vw - 182px)) !important;
    min-width: 132px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .lang-switch-header {
    width: auto !important;
    min-width: 104px !important;
    flex-shrink: 0 !important;
  }

  .nav-toggle {
    flex-shrink: 0 !important;
  }

  .hero {
    width: 100% !important;
    padding: 42px 0 0 !important;
  }

  .hero-grid {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .hero .eyebrow {
    width: 100% !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.16em !important;
    overflow-wrap: anywhere !important;
  }

  .hero-jp-line {
    width: 100% !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.02em !important;
    text-wrap: pretty !important;
  }

  .hero h1,
  html[lang="ja"] .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-wrap: balance !important;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 54px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.8vw, 42px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.035em !important;
  }

  .hero-lede,
  .hero-proof-line {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    overflow-wrap: break-word !important;
  }

  .hero-scope {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .hero-scope span {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-actions .button {
    min-width: 0 !important;
    width: 100% !important;
    padding-inline: 18px !important;
  }

  .hero-mobile-proof {
    width: 100% !important;
    margin: 4px 0 0 !important;
  }

  .focus-strip {
    width: 100% !important;
    padding: 20px 20px 50px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
  }

  .brand-mark-old {
    width: min(156px, calc(100vw - 164px)) !important;
    min-width: 120px !important;
  }

  .lang-switch-header {
    min-width: 94px !important;
  }

  .lang-switch button {
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .nav-toggle {
    width: 50px !important;
    height: 50px !important;
  }

  .hero-grid {
    padding-inline: 20px !important;
  }

  .hero h1 {
    font-size: clamp(39px, 12.4vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 9.4vw, 38px) !important;
  }
}

/* 2026-06-17 modern19: mobile-first conversion pass */
@media (max-width: 760px) {
  .hero {
    padding-top: 38px !important;
  }

  .hero-grid {
    width: min(100%, 430px) !important;
    padding-inline: 24px !important;
    margin-inline: auto !important;
  }

  .hero .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
  }

  .hero .eyebrow::before {
    width: 34px !important;
    flex: 0 0 34px !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin: 0 0 12px !important;
    font-size: 21px !important;
    line-height: 1.38 !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.8vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.052em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.2vw, 39px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
    max-width: 10.8em !important;
  }

  .hero-lede {
    margin-top: 22px !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
  }

  .hero-proof-line {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .hero-mobile-proof {
    margin-top: 24px !important;
  }

  .hero-mobile-proof img {
    aspect-ratio: 16 / 9 !important;
  }

  .hero-scope {
    margin-top: 20px !important;
  }

  .hero-actions {
    margin-top: 22px !important;
  }
}

@media (max-width: 430px) {
  .hero-grid {
    width: 100% !important;
    max-width: 390px !important;
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(39px, 10.4vw, 45px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 8.6vw, 36px) !important;
    max-width: 10.5em !important;
  }

  .hero-lede {
    font-size: 16px !important;
  }
}

/* 2026-06-17 modern17: cleaner premium agency presentation */
:root {
  --ink: #101722;
  --navy: #18345e;
  --navy-2: #244c82;
  --muted: #5f6875;
  --paper: #fffdf8;
  --cream: #f7f3ea;
  --line: rgba(24, 35, 54, 0.12);
  --green: #79b84d;
  --red: #a94334;
  --gold: #e6ad46;
}

body {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(121, 184, 77, 0.08), transparent 26%),
    radial-gradient(circle at 90% 18%, rgba(36, 76, 130, 0.08), transparent 30%),
    var(--paper) !important;
}

.site-header {
  min-height: 92px !important;
  border-bottom: 1px solid rgba(24, 35, 54, 0.08) !important;
  background: rgba(255, 253, 248, 0.9) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-mark-old {
  filter: drop-shadow(0 10px 20px rgba(24, 35, 54, 0.08)) !important;
}

.site-nav a,
.site-header small {
  color: var(--navy) !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(64px, 7vw, 104px) 0 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0 52%, rgba(238, 247, 232, 0.76) 52% 100%),
    radial-gradient(circle at 82% 18%, rgba(121, 184, 77, 0.14), transparent 34%) !important;
}

.hero-grid {
  width: min(100% - 64px, 1500px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.78fr) !important;
  align-items: center !important;
  gap: clamp(56px, 7vw, 118px) !important;
}

.hero-copy {
  max-width: 720px !important;
}

.hero .eyebrow {
  margin: 0 0 28px !important;
  color: var(--red) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
}

.hero .eyebrow::before {
  background: var(--red) !important;
  width: 42px !important;
}

.japan-cue {
  display: inline-flex !important;
  margin: 0 0 42px !important;
  padding: 13px 22px !important;
  border: 1px solid rgba(121, 184, 77, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 24px 60px rgba(24, 35, 54, 0.06) !important;
}

.japan-cue span {
  color: var(--navy) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  font-weight: 850 !important;
}

.hero-jp-line {
  margin: 0 0 22px !important;
  color: var(--navy) !important;
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  font-weight: 850 !important;
}

.hero h1 {
  max-width: 700px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(60px, 5.7vw, 96px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.075em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 740px !important;
  font-size: clamp(50px, 4.7vw, 78px) !important;
  line-height: 1.09 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 650px !important;
  color: #4f5b6c !important;
  font-size: clamp(18px, 1.18vw, 22px) !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em !important;
  font-weight: 650 !important;
}

.hero-lede {
  margin-top: 30px !important;
}

.hero-proof-line {
  margin-top: 18px !important;
}

.hero-scope {
  margin-top: 30px !important;
  gap: 10px 14px !important;
  max-width: 680px !important;
}

.hero-scope span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--navy) !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.hero-scope span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin: 0 8px 4px 0;
  background: var(--red);
}

.signal-row {
  display: none !important;
}

.hero-actions {
  margin-top: 34px !important;
  gap: 14px !important;
}

.button {
  min-height: 58px !important;
  border-radius: 10px !important;
  letter-spacing: 0.1em !important;
}

.button-primary {
  color: #fff !important;
  background: var(--navy) !important;
  box-shadow: 0 22px 48px rgba(24, 52, 94, 0.18) !important;
}

.button-secondary {
  color: var(--navy) !important;
  border: 1px solid rgba(24, 52, 94, 0.16) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

.hero-company-proof {
  margin-top: 32px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--line) !important;
}

.hero-company-proof article {
  padding: 18px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.hero-company-proof strong {
  display: block !important;
  color: var(--navy) !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
}

.hero-company-proof span {
  display: block !important;
  margin-top: 5px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.gtm-visual-old {
  display: none !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: block !important;
  min-height: 620px !important;
}

.hero-field-card {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: 0 34px 88px rgba(24, 35, 54, 0.14) !important;
}

.hero-field-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 42%, rgba(16, 23, 34, 0.84)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero-field-card img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block !important;
}

.hero-field-card figcaption {
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 24px !important;
  z-index: 2 !important;
  color: #fff !important;
}

.hero-field-card figcaption span {
  display: block !important;
  color: #bde896 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  display: block !important;
  max-width: 460px !important;
  margin-top: 8px !important;
  color: #fff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.hero-system-card {
  position: absolute !important;
  z-index: 3 !important;
  right: -28px !important;
  bottom: 54px !important;
  width: min(440px, 82%) !important;
  padding: 24px 26px !important;
  border-left: 6px solid var(--red) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 24px 60px rgba(24, 35, 54, 0.16) !important;
}

.hero-system-card span {
  display: block !important;
  color: var(--green) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  display: block !important;
  margin-top: 9px !important;
  color: var(--navy) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

.focus-strip {
  padding: 0 32px 70px !important;
  background: linear-gradient(180deg, rgba(238, 247, 232, 0.66), transparent) !important;
}

.focus-strip > div {
  width: min(100%, 1280px) !important;
  margin: 0 auto !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 30px 70px rgba(24, 35, 54, 0.08) !important;
}

.focus-strip span {
  min-height: 136px !important;
  padding: 30px 28px !important;
}

.focus-strip b,
.focus-strip strong {
  color: #3f862f !important;
  font-size: clamp(34px, 3.1vw, 54px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
}

.focus-strip small {
  margin-top: 8px !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.company-proof,
.gtm-section,
.why-section,
.about-section,
.contact-section {
  background: var(--paper) !important;
}

.section-intro h2,
.company-proof-copy h2,
.launch-panel h2,
.why-layout h2,
.about-section h2,
.contact-panel h2 {
  color: var(--ink) !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.sales-service-grid article,
.support-grid article,
.network-grid a,
.contact-panel {
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 22px 58px rgba(24, 35, 54, 0.06) !important;
}

.network-grid {
  align-items: stretch !important;
}

.network-grid a {
  grid-template-rows: 210px auto auto 1fr !important;
  text-align: left !important;
}

.network-grid a img {
  height: 210px !important;
  object-fit: cover !important;
}

.network-grid strong {
  padding: 24px 26px 0 !important;
  color: var(--navy) !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.network-grid span {
  padding: 10px 26px 0 !important;
  color: #3f862f !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.network-grid p {
  padding: 16px 26px 28px !important;
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

@media (max-width: 980px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header {
    width: 100% !important;
    min-height: 82px !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .brand {
    min-width: 0 !important;
  }

  .brand-lockup {
    min-width: 0 !important;
  }

  .brand-mark-old {
    width: min(178px, 47vw) !important;
    max-width: 100% !important;
  }

  .brand-lockup small {
    display: none !important;
  }

  .lang-switch-header {
    display: inline-flex !important;
    width: auto !important;
    min-width: 86px !important;
    padding: 3px !important;
  }

  .lang-switch-header button {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 12px !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
  }

  .hero {
    padding: 42px 0 0 !important;
    background:
      radial-gradient(circle at 100% 20%, rgba(121, 184, 77, 0.12), transparent 34%),
      var(--paper) !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 22px !important;
    margin: 0 !important;
    display: block !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  .hero .eyebrow {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18em !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-size: 20px !important;
    line-height: 1.38 !important;
  }

  .hero h1,
  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 11.5vw, 56px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.06em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9vw, 43px) !important;
    line-height: 1.18 !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .hero-scope {
    gap: 10px 12px !important;
    margin-top: 24px !important;
  }

  .hero-scope span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(24, 52, 94, 0.11) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-scope span::before {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 54px !important;
  }

  .hero-company-proof {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }

  .hero-company-proof article {
    padding: 16px !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin: 28px 0 0 !important;
    width: 100% !important;
    border-radius: 22px !important;
  }

  .focus-strip {
    padding: 34px 22px 54px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    border-radius: 22px !important;
  }

  .focus-strip span {
    min-height: 108px !important;
    padding: 18px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 30px !important;
  }

  .focus-strip small {
    font-size: 12px !important;
  }

  .section-pad {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .network-grid {
    grid-template-columns: 1fr !important;
  }

  .network-grid a {
    grid-template-rows: 180px auto auto auto !important;
    min-height: auto !important;
    border-radius: 22px !important;
  }

  .network-grid a img {
    height: 180px !important;
  }

  .network-grid strong {
    font-size: 24px !important;
    padding: 22px 22px 0 !important;
  }

  .network-grid span,
  .network-grid p {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 14px !important;
  }

  .brand-mark-old {
    width: min(166px, 43vw) !important;
  }

  .lang-switch-header {
    min-width: 78px !important;
  }

  .lang-switch-header button {
    min-width: 34px !important;
    height: 34px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .hero-grid,
  .section-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.8vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 8.4vw, 38px) !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 15px !important;
  }
}

/* 2026-06-17 modern16: tighten the site into a cleaner agency presentation */
:root {
  --modern-ink: #101827;
  --modern-navy: #18345e;
  --modern-muted: #5e6878;
  --modern-green: #7fbd4d;
  --modern-red: #a74638;
  --modern-cream: #fffdf8;
  --modern-line: rgba(24, 35, 54, 0.12);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.hero {
  background:
    radial-gradient(circle at 88% 14%, rgba(127, 189, 77, 0.18), transparent 34%),
    linear-gradient(90deg, #fffdf8 0%, #fffdf8 54%, #f5fbf1 54%, #f5fbf1 100%) !important;
}

.hero-grid {
  align-items: center !important;
}

.hero-copy {
  max-width: 660px !important;
}

.hero h1 {
  color: var(--modern-ink) !important;
  letter-spacing: -0.055em !important;
}

.hero-lede,
.hero-proof-line {
  color: var(--modern-muted) !important;
}

.hero-field-card,
.hero-system-card,
.hero-mobile-proof {
  box-shadow: 0 28px 80px rgba(24, 52, 94, 0.14) !important;
}

.focus-strip > div {
  box-shadow: 0 24px 60px rgba(24, 52, 94, 0.08) !important;
}

.sales-service-card,
.network-grid a,
.company-proof-board,
.contact-card {
  box-shadow: 0 24px 70px rgba(24, 52, 94, 0.08) !important;
}

@media (max-width: 860px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .color-strip,
  .site-header,
  main,
  section,
  footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-header {
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    padding: 10px 14px !important;
  }

  .brand,
  .brand-lockup,
  .brand-lockup-combo {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .brand small {
    display: none !important;
  }

  .brand-mark-old {
    width: clamp(142px, 41vw, 178px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .lang-switch-header {
    width: auto !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 4px !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
  }

  .lang-switch-header button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  .nav-toggle {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    left: 14px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px) !important;
  }

  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 42px 0 42px !important;
    background:
      radial-gradient(circle at 94% 2%, rgba(127, 189, 77, 0.12), transparent 32%),
      var(--modern-cream) !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 22px !important;
    display: block !important;
  }

  .hero-copy,
  .hero-copy > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero .eyebrow {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.45 !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin: 26px 0 14px !important;
    color: var(--modern-navy) !important;
    font-size: 19px !important;
    line-height: 1.48 !important;
    letter-spacing: -0.02em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 10.4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.048em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(31px, 8.2vw, 36px) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.03em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    font-weight: 650 !important;
  }

  .hero-scope {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .hero-scope span {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    padding: 9px 11px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .hero-actions {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 56px !important;
  }

  .hero-company-proof,
  .signal-row,
  .hero-bridge-visual,
  .gtm-visual-old {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .focus-strip {
    padding: 0 22px 46px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .focus-strip span {
    min-width: 0 !important;
    min-height: 106px !important;
    padding: 17px !important;
  }

  .focus-strip span:last-child {
    grid-column: 1 / -1;
  }

  .focus-strip strong,
  .focus-strip b {
    font-size: 31px !important;
    line-height: 0.95 !important;
  }

  .section-pad {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .section-heading h2,
  .company-proof-copy h2,
  .about h2,
  .contact-card h2 {
    font-size: clamp(31px, 8vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .sales-service-grid,
  .network-grid,
  .company-proof-inner,
  .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .sales-service-card,
  .network-grid a {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding: 9px 12px !important;
    gap: 7px !important;
  }

  .brand-mark-old {
    width: clamp(128px, 38vw, 150px) !important;
  }

  .lang-switch-header {
    height: 42px !important;
  }

  .lang-switch-header button {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .nav-toggle {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .hero-grid,
  .section-pad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero h1 {
    font-size: clamp(36px, 10vw, 42px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(29px, 7.7vw, 34px) !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 14px !important;
  }
}

/* 2026-06-17 modern15: decisive responsive polish */
@media (max-width: 860px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .color-strip,
  .site-header,
  main,
  section,
  .hero,
  .section-pad,
  .focus-strip,
  .network-section,
  .contact-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .site-header {
    min-height: 74px !important;
    padding: 12px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
  }

  .brand-lockup,
  .brand-lockup-combo {
    min-width: 0 !important;
  }

  .brand-mark-old {
    width: 172px !important;
    max-width: calc(100vw - 184px) !important;
    min-width: 132px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .lang-switch-header {
    flex: 0 0 auto !important;
  }

  .lang-switch button {
    min-width: 40px !important;
    min-height: 38px !important;
    padding-inline: 12px !important;
  }

  .nav-toggle {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .hero {
    padding: 48px 0 46px !important;
    background:
      radial-gradient(circle at 96% 14%, rgba(132, 191, 86, 0.11), transparent 34%),
      linear-gradient(180deg, #fffdfa 0%, #fbfcf6 100%) !important;
  }

  .hero-grid,
  .hero-copy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .hero-grid {
    padding: 0 20px !important;
  }

  .hero-copy > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 22px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.17em !important;
    overflow-wrap: anywhere !important;
  }

  .hero .eyebrow::before {
    width: 40px !important;
  }

  .japan-cue {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 34px rgba(24, 35, 54, 0.06) !important;
  }

  .japan-cue span {
    display: block !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .hero-jp-line {
    margin: 0 0 16px !important;
    max-width: 100% !important;
    font-size: 19px !important;
    line-height: 1.42 !important;
    letter-spacing: -0.015em !important;
  }

  .hero h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(38px, 10.2vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    font-weight: 850 !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(31px, 8.3vw, 36px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.018em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .hero-lede,
  .hero-proof-line {
    width: 100% !important;
    margin-top: 22px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 640 !important;
    color: #5f6775 !important;
  }

  .hero-proof-line {
    margin-top: 18px !important;
  }

  .hero-scope {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 24px 0 0 !important;
    overflow: visible !important;
  }

  .hero-scope span {
    flex: 1 1 calc(50% - 9px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .signal-row,
  .hero-company-proof {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin: 26px 0 0 !important;
  }

  .hero-actions .button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 15px 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hero-bridge-visual,
  .gtm-visual,
  .gtm-visual-old {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24, 35, 54, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 20px 48px rgba(24, 35, 54, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    display: block !important;
    object-fit: cover !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    color: #18345e !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 20px 44px !important;
  }

  .focus-strip > div {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .focus-strip span {
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 17px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .section-pad,
  .company-proof,
  .network-section,
  .contact-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: 158px !important;
    max-width: calc(100vw - 176px) !important;
  }

  .hero {
    padding-top: 42px !important;
  }

  .hero-grid {
    padding-inline: 18px !important;
  }

  .hero .eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.15em !important;
  }

  .japan-cue span {
    font-size: 14px !important;
  }

  .hero h1 {
    font-size: clamp(36px, 9.9vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(30px, 7.8vw, 34px) !important;
    line-height: 1.3 !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 15px !important;
  }

  .hero-scope span {
    flex-basis: 100% !important;
    font-size: 12px !important;
  }

  .focus-strip > div {
    grid-template-columns: 1fr !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 28px !important;
  }
}

/* 2026-06-17 modern14: mobile fit and readability pass */
@media (max-width: 860px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-shell,
  .page-shell,
  main,
  section,
  .hero,
  .focus-strip,
  .owned-section,
  .company-proof,
  .contact-section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-header {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .brand-mark-old {
    width: min(172px, calc(100vw - 184px)) !important;
    min-width: 0 !important;
  }

  .hero {
    padding-top: 42px !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hero-copy,
  .hero-copy > *,
  .hero-mobile-proof,
  .hero-mobile-proof img {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero .eyebrow {
    max-width: 100% !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    letter-spacing: 0.18em !important;
  }

  .hero-jp-line {
    max-width: 100% !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(40px, 10.5vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.038em !important;
    font-weight: 850 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 8.4vw, 38px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.025em !important;
    font-weight: 850 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
  }

  .hero-scope {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .hero-scope span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hero-actions,
  .hero-actions .button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .focus-strip {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .focus-strip > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  .brand-mark-old {
    width: min(160px, calc(100vw - 178px)) !important;
  }

  .hero-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 44px) !important;
    letter-spacing: -0.034em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 8.1vw, 36px) !important;
  }

  .hero .eyebrow {
    font-size: 9.5px !important;
  }
}

/* 2026-06-17 modern13: calmer agency-grade system, stronger mobile readability */
:root {
  --modern-ink: #121a28;
  --modern-navy: #1b3763;
  --modern-muted: #5f6877;
  --modern-green: #5c9b3a;
  --modern-red: #aa3d32;
  --modern-paper: #fffdf8;
  --modern-soft: #f3f7ef;
  --modern-line: rgba(27, 55, 99, 0.13);
  --modern-shadow: 0 28px 70px rgba(18, 26, 40, 0.12);
}

html,
body {
  overflow-x: hidden !important;
  background: var(--modern-paper) !important;
}

body {
  color: var(--modern-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.gtm-visual-old {
  display: none !important;
}

.site-header {
  min-height: 88px !important;
  padding: 18px clamp(28px, 5vw, 72px) !important;
  background: rgba(255, 253, 248, 0.94) !important;
  border-bottom: 1px solid rgba(18, 26, 40, 0.08) !important;
  box-shadow: 0 12px 34px rgba(18, 26, 40, 0.06) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-mark-old {
  width: 214px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: none !important;
}

.brand-lockup small {
  color: #667080 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}

.site-nav a {
  color: var(--modern-ink) !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(72px, 8vw, 106px) 0 78px !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(92, 155, 58, 0.13), transparent 30%),
    linear-gradient(90deg, #fffdf8 0 52%, #f2f8ee 52% 100%) !important;
  border-bottom: 1px solid rgba(18, 26, 40, 0.06) !important;
}

.hero-grid {
  width: min(1180px, calc(100% - 52px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr) !important;
  align-items: center !important;
  gap: clamp(56px, 6vw, 86px) !important;
}

.hero-copy {
  max-width: 650px !important;
  padding: 0 !important;
}

.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 26px !important;
  color: var(--modern-red) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.23em !important;
  text-transform: none !important;
}

.eyebrow::before {
  content: "" !important;
  width: 40px !important;
  height: 1px !important;
  background: var(--modern-red) !important;
  display: block !important;
}

.japan-cue {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 36px !important;
  padding: 12px 22px !important;
  border: 1px solid rgba(92, 155, 58, 0.26) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 18px 46px rgba(92, 155, 58, 0.08) !important;
}

.japan-cue span {
  color: #18345e !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
}

.hero-jp-line {
  margin: 0 0 18px !important;
  color: #1b3763 !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
}

.hero h1 {
  max-width: 690px !important;
  margin: 0 0 28px !important;
  color: #101722 !important;
  font-size: clamp(58px, 5.6vw, 84px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 640px !important;
  font-size: clamp(50px, 4.3vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 610px !important;
  color: #586273 !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  font-weight: 720 !important;
  letter-spacing: -0.01em !important;
}

.hero-lede {
  margin: 0 0 16px !important;
}

.hero-proof-line {
  margin: 0 !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-width: 610px !important;
  margin: 26px 0 0 !important;
}

.hero-scope span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(27, 55, 99, 0.13) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #18345e !important;
  box-shadow: 0 12px 28px rgba(18, 26, 40, 0.05) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.signal-row {
  display: none !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 32px 0 0 !important;
}

.button,
.hero-actions .button {
  min-height: 56px !important;
  padding: 0 26px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.button-primary {
  background: var(--modern-navy) !important;
  color: #fff !important;
  border-color: var(--modern-navy) !important;
  box-shadow: 0 20px 42px rgba(27, 55, 99, 0.18) !important;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--modern-navy) !important;
  border: 1px solid rgba(27, 55, 99, 0.15) !important;
}

.hero-company-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 650px !important;
  margin: 34px 0 0 !important;
}

.hero-company-proof article {
  min-height: 104px !important;
  padding: 18px !important;
  border: 1px solid rgba(27, 55, 99, 0.11) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 16px 36px rgba(18, 26, 40, 0.06) !important;
}

.hero-company-proof strong {
  display: block !important;
  color: var(--modern-green) !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}

.hero-company-proof span {
  display: block !important;
  margin-top: 8px !important;
  color: #4f5b6b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 760 !important;
}

.hero-bridge-visual {
  display: block !important;
  position: relative !important;
  min-height: 570px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-field-card {
  position: absolute !important;
  top: 12px !important;
  right: 0 !important;
  width: min(520px, 100%) !important;
  height: 382px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(27, 55, 99, 0.12) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: var(--modern-shadow) !important;
}

.hero-field-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 45%, rgba(18, 26, 40, 0.68) 100%) !important;
  pointer-events: none !important;
}

.hero-field-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  filter: saturate(0.98) contrast(1.02) !important;
}

.hero-field-card figcaption {
  position: absolute !important;
  z-index: 2 !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 24px !important;
  padding: 0 !important;
  color: #fff !important;
}

.hero-field-card figcaption span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  display: block !important;
  max-width: 390px !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
}

.hero-system-card {
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  bottom: 54px !important;
  width: min(440px, calc(100% - 42px)) !important;
  padding: 24px 26px 26px !important;
  border: 1px solid rgba(27, 55, 99, 0.12) !important;
  border-left: 7px solid var(--modern-red) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 28px 64px rgba(18, 26, 40, 0.15) !important;
}

.hero-system-card span {
  display: block !important;
  margin-bottom: 10px !important;
  color: var(--modern-green) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  display: block !important;
  color: #18345e !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 24px 76px !important;
  background: linear-gradient(180deg, #fffdf8, #fbfaf6) !important;
}

.focus-strip > div {
  width: min(1080px, calc(100% - 40px)) !important;
  margin: -26px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(27, 55, 99, 0.11) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 22px 54px rgba(18, 26, 40, 0.08) !important;
}

.focus-strip span {
  min-height: 128px !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 6px !important;
  border-right: 1px solid rgba(27, 55, 99, 0.1) !important;
  color: #18345e !important;
  text-align: left !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b,
.focus-strip strong {
  display: block !important;
  color: var(--modern-green) !important;
  font-size: clamp(34px, 3.2vw, 48px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
}

.section-pad {
  padding-left: clamp(28px, 5vw, 72px) !important;
  padding-right: clamp(28px, 5vw, 72px) !important;
}

.section-kicker,
.section-label {
  color: var(--modern-green) !important;
  letter-spacing: 0.2em !important;
  font-weight: 950 !important;
}

.sales-service-grid {
  gap: 22px !important;
}

.sales-service-grid article,
.dark-card,
.method-card {
  border-radius: 24px !important;
}

.sales-service-grid h3,
html[lang="ja"] .sales-service-grid h3 {
  font-size: clamp(27px, 2.4vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
  word-break: normal !important;
}

.network-grid,
html[lang="ja"] .network-grid {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.network-grid a,
html[lang="ja"] .network-grid a {
  min-height: 440px !important;
  display: grid !important;
  grid-template-rows: 184px auto auto 1fr !important;
  overflow: hidden !important;
  border: 1px solid rgba(27, 55, 99, 0.12) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 22px 48px rgba(18, 26, 40, 0.07) !important;
  text-align: left !important;
  transform: none !important;
}

.network-grid a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 28px 64px rgba(18, 26, 40, 0.11) !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 184px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  display: block !important;
  padding: 22px 24px 0 !important;
  color: #18345e !important;
  font-size: 26px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  display: block !important;
  padding: 12px 24px 0 !important;
  color: var(--modern-green) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.network-grid p,
.network-grid a p {
  padding: 18px 24px 24px !important;
  color: #636d7b !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 720 !important;
  text-align: left !important;
}

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .hero-copy {
    max-width: 760px !important;
  }

  .hero-bridge-visual {
    min-height: 480px !important;
    max-width: 640px !important;
  }
}

@media (max-width: 900px) {
  .site-header {
    min-height: 92px !important;
    padding: 14px 22px !important;
  }

  .brand-mark-old {
    width: 186px !important;
    max-width: calc(100vw - 210px) !important;
  }

  .brand-lockup small {
    display: none !important;
  }

  .hero {
    padding: 44px 0 52px !important;
    background:
      radial-gradient(circle at 90% 4%, rgba(92, 155, 58, 0.12), transparent 32%),
      linear-gradient(180deg, #fffdf8 0%, #f6faf2 100%) !important;
  }

  .hero-grid {
    width: 100% !important;
    padding: 0 24px !important;
    gap: 24px !important;
  }

  .eyebrow {
    margin-bottom: 18px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18em !important;
  }

  .eyebrow::before {
    width: 34px !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin-bottom: 14px !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.03em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    margin-bottom: 22px !important;
    font-size: clamp(42px, 10.5vw, 54px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 8.5vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 720 !important;
  }

  .hero-scope {
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .hero-scope span {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 26px !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .hero-company-proof {
    display: none !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin: 28px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(27, 55, 99, 0.12) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 22px 52px rgba(18, 26, 40, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: #18345e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 18px 54px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    margin-top: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    min-height: 104px !important;
    padding: 17px !important;
    border-right: 1px solid rgba(27, 55, 99, 0.1) !important;
    border-bottom: 1px solid rgba(27, 55, 99, 0.1) !important;
    font-size: 13px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 32px !important;
  }

  .section-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .network-grid,
  html[lang="ja"] .network-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .network-grid a,
  html[lang="ja"] .network-grid a {
    min-height: auto !important;
    grid-template-rows: 180px auto auto auto !important;
    border-radius: 22px !important;
  }

  .network-grid img,
  .network-grid a img {
    height: 180px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    min-height: 86px !important;
    padding: 13px 16px !important;
  }

  .brand-mark-old {
    width: min(168px, calc(100vw - 196px)) !important;
  }

  .lang-switch-header {
    transform: scale(0.92) !important;
    transform-origin: right center !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
  }

  .hero {
    padding-top: 40px !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.4vw, 48px) !important;
    line-height: 1.05 !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 8.2vw, 38px) !important;
    line-height: 1.18 !important;
  }

  .hero-jp-line {
    font-size: 19px !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 16px !important;
  }

  .focus-strip span {
    min-height: 98px !important;
    padding: 15px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 28px !important;
  }
}

/* 2026-06-17 modern11: premium agency cleanup */
:root {
  --m-ink: #111827;
  --m-navy: #17345e;
  --m-blue: #23476f;
  --m-green: #5f9f42;
  --m-red: #a8463a;
  --m-paper: #fffdf8;
  --m-soft: #f6f8f0;
  --m-line: #e6dfd2;
  --m-muted: #5d6674;
}

html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
  background: var(--m-paper) !important;
  color: var(--m-ink) !important;
}

body {
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.color-strip {
  height: 8px !important;
  box-shadow: none !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 16px max(34px, calc((100vw - 1180px) / 2)) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.045) !important;
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

.brand-lockup {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.brand-mark-old {
  width: 224px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  image-rendering: auto !important;
}

.brand small {
  display: block !important;
  margin-left: 72px !important;
  color: #697382 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

.site-nav a {
  color: var(--m-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

.lang-switch-header {
  display: flex !important;
  align-items: center !important;
}

.lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 24, 39, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06) !important;
}

.lang-switch button {
  min-width: 44px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.lang-switch button.active {
  background: var(--m-navy) !important;
  color: #fff !important;
}

.nav-toggle {
  display: none !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 78px 0 58px !important;
  background:
    radial-gradient(circle at 74% 25%, rgba(95, 159, 66, 0.14), transparent 34%),
    linear-gradient(90deg, #fffdf8 0 54%, #f4faef 54% 100%) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 36%, #000 100%) !important;
  opacity: 0.55 !important;
}

.hero-grid {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, calc(100% - 68px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 0.86fr) !important;
  gap: clamp(52px, 7vw, 96px) !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 650px !important;
}

.hero .eyebrow {
  display: inline-grid !important;
  grid-template-columns: 42px auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 28px !important;
  color: var(--m-red) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
}

.hero .eyebrow::before {
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 1px !important;
  background: var(--m-red) !important;
}

.japan-cue {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 40px !important;
  padding: 6px !important;
  border: 1px solid rgba(95, 159, 66, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 18px 42px rgba(95, 159, 66, 0.08) !important;
}

.japan-cue span {
  display: block !important;
  padding: 10px 18px !important;
  color: var(--m-navy) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.hero-jp-line {
  max-width: 610px !important;
  margin: 0 0 20px !important;
  color: var(--m-navy) !important;
  font-size: clamp(23px, 1.8vw, 30px) !important;
  font-weight: 850 !important;
  line-height: 1.34 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
}

.hero h1 {
  max-width: 650px !important;
  margin: 0 !important;
  color: var(--m-ink) !important;
  font-size: clamp(52px, 5vw, 76px) !important;
  font-weight: 850 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.hero-title-line {
  display: block !important;
}

html[lang="ja"] .hero h1 {
  max-width: 700px !important;
  font-size: clamp(43px, 4vw, 60px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.045em !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 620px !important;
  margin: 24px 0 0 !important;
  color: var(--m-muted) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.76 !important;
  letter-spacing: -0.015em !important;
}

.hero-proof-line {
  margin-top: 16px !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 28px 0 0 !important;
}

.hero-scope span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(23, 52, 94, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--m-navy) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.04) !important;
}

.hero-scope span::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--m-red) !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 32px 0 0 !important;
}

.hero-actions .button,
.button {
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.hero-actions .button-primary,
.button-primary {
  background: var(--m-navy) !important;
  color: #fff !important;
  border: 1px solid var(--m-navy) !important;
  box-shadow: 0 18px 36px rgba(23, 52, 94, 0.18) !important;
}

.hero-actions .button-secondary,
.button-secondary {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--m-navy) !important;
  border: 1px solid rgba(23, 52, 94, 0.14) !important;
}

.signal-row,
.hero-company-proof,
.gtm-visual-old {
  display: none !important;
}

.hero-bridge-visual {
  display: block !important;
  position: relative !important;
  min-height: 560px !important;
}

.hero-field-card {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(100%, 520px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 94, 0.12) !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.12) !important;
}

.hero-field-card::after {
  display: none !important;
}

.hero-field-card img {
  display: block !important;
  width: 100% !important;
  height: 330px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero-field-card figcaption {
  display: grid !important;
  gap: 8px !important;
  padding: 24px 26px 28px !important;
  background: #fff !important;
}

.hero-field-card figcaption span {
  color: var(--m-green) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  color: var(--m-navy) !important;
  font-size: 25px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.04em !important;
}

.hero-system-card {
  position: absolute !important;
  right: 30px !important;
  bottom: 40px !important;
  width: min(420px, 88%) !important;
  display: grid !important;
  gap: 10px !important;
  padding: 28px !important;
  border-left: 6px solid var(--m-red) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.14) !important;
}

.hero-system-card span {
  color: var(--m-red) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  color: var(--m-navy) !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 32px 70px !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f8f6ef 100%) !important;
}

.focus-strip > div {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid var(--m-line) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.06) !important;
}

.focus-strip span {
  min-height: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 22px 24px !important;
  border-right: 1px solid var(--m-line) !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b,
.focus-strip strong {
  color: #4d8f36 !important;
  font-size: clamp(27px, 2.6vw, 42px) !important;
  font-weight: 850 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.05em !important;
  white-space: normal !important;
}

.focus-strip small {
  color: var(--m-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em !important;
}

html[lang="ja"] .focus-strip b,
html[lang="ja"] .focus-strip strong {
  font-size: clamp(26px, 2.4vw, 36px) !important;
}

.section-pad,
.company-proof,
.gtm-section,
.why-section,
.about-section,
.contact-section {
  padding-left: max(34px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(34px, calc((100vw - 1180px) / 2)) !important;
}

.section-intro h2,
.company-proof h2,
.why-section h2,
.contact-panel h2 {
  max-width: 820px !important;
  color: var(--m-ink) !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

html[lang="ja"] .section-intro h2,
html[lang="ja"] .company-proof h2,
html[lang="ja"] .why-section h2,
html[lang="ja"] .contact-panel h2 {
  line-height: 1.16 !important;
  letter-spacing: -0.045em !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

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

.sales-service-grid article {
  min-height: 260px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(23, 52, 94, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.05) !important;
}

.owned-section {
  margin-top: 92px !important;
  padding-top: 0 !important;
}

.network-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.network-grid a {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 190px auto auto 1fr !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 94, 0.11) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.055) !important;
  text-align: left !important;
  text-decoration: none !important;
  transform: translateZ(0);
}

.network-grid a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.09) !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  display: block !important;
  padding: 24px 26px 0 !important;
  color: var(--m-navy) !important;
  font-size: 25px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  display: block !important;
  padding: 10px 26px 0 !important;
  color: var(--m-green) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.16em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.network-grid p,
.network-grid a p {
  display: block !important;
  padding: 18px 26px 28px !important;
  color: var(--m-muted) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}

.pain-panel {
  border-radius: 30px !important;
  background: linear-gradient(135deg, #17345e 0%, #244c7f 100%) !important;
  box-shadow: 0 30px 90px rgba(23, 52, 94, 0.18) !important;
}

.pain-panel .button,
.pain-panel .button-primary,
.pain-cta {
  background: #fff !important;
  color: var(--m-navy) !important;
  border-color: #fff !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    width: min(100% - 48px, 1080px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr) !important;
    gap: 44px !important;
  }

  .hero h1 {
    font-size: clamp(50px, 5vw, 68px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(42px, 4.3vw, 56px) !important;
  }

  .network-grid,
  .sales-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .site-header {
    min-height: 76px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }

  .brand-mark-old {
    width: min(176px, calc(100vw - 190px)) !important;
    min-width: 132px !important;
  }

  .brand small {
    display: none !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 16px !important;
    left: 16px !important;
    display: grid !important;
    gap: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.14) !important;
  }

  .site-nav.is-open a,
  .site-nav.open a {
    padding: 14px !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    width: 52px !important;
    height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  .lang-switch button {
    min-width: 42px !important;
    min-height: 40px !important;
  }

  .hero {
    padding: 46px 0 44px !important;
    background:
      radial-gradient(circle at 88% 12%, rgba(95, 159, 66, 0.12), transparent 38%),
      #fffdf8 !important;
  }

  .hero::before {
    opacity: 0.25 !important;
  }

  .hero-grid {
    width: 100% !important;
    display: block !important;
    padding: 0 24px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    grid-template-columns: 46px 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.2em !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    max-width: 100% !important;
    margin: 24px 0 16px !important;
    font-size: clamp(21px, 5.4vw, 25px) !important;
    line-height: 1.42 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(39px, 10vw, 45px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.056em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(31px, 8vw, 36px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.045em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    margin-top: 20px !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    font-weight: 650 !important;
  }

  .hero-scope {
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .hero-scope span {
    padding: 8px 11px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 52px !important;
  }

  .hero-bridge-visual,
  .gtm-visual-old,
  .hero-company-proof {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin: 24px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 52, 94, 0.12) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.08) !important;
  }

  .hero-mobile-proof img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: var(--m-navy) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 20px 54px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    min-height: 104px !important;
    padding: 18px !important;
    border-right: 1px solid var(--m-line) !important;
    border-bottom: 1px solid var(--m-line) !important;
  }

  .focus-strip b,
  .focus-strip strong,
  html[lang="ja"] .focus-strip b,
  html[lang="ja"] .focus-strip strong {
    font-size: 28px !important;
    line-height: 1.02 !important;
  }

  .focus-strip small {
    font-size: 12.5px !important;
  }

  .section-pad,
  .company-proof,
  .gtm-section,
  .why-section,
  .about-section,
  .contact-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .network-grid,
  .sales-service-grid {
    grid-template-columns: 1fr !important;
  }

  .network-grid a {
    grid-template-rows: 180px auto auto auto !important;
    border-radius: 22px !important;
  }

  .network-grid img,
  .network-grid a img {
    height: 180px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    padding: 22px 22px 0 !important;
    font-size: 24px !important;
  }

  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: min(166px, calc(100vw - 178px)) !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 43px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(30px, 7.8vw, 35px) !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 15px !important;
  }

  .focus-strip > div {
    grid-template-columns: 1fr !important;
  }

  .focus-strip span {
    border-right: 0 !important;
  }
}

/* 2026-06-17 modern10: company-grade cleanup layer */
:root {
  --kf-ink: #101925;
  --kf-navy: #17345e;
  --kf-muted: #5d6674;
  --kf-green: #7fbd4a;
  --kf-red: #a9473b;
  --kf-cream: #fffdf8;
  --kf-line: rgba(23, 52, 94, 0.13);
}

html,
body {
  overflow-x: hidden !important;
  background: var(--kf-cream) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.color-strip {
  height: 8px !important;
}

.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  min-height: 88px !important;
  padding: 14px clamp(22px, 6vw, 96px) !important;
  background: rgba(255, 255, 252, 0.96) !important;
  border-bottom: 1px solid rgba(16, 25, 37, 0.08) !important;
  box-shadow: 0 16px 48px rgba(16, 25, 37, 0.05) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-lockup-combo {
  gap: 12px !important;
  min-width: 0 !important;
}

.brand-mark-old {
  width: clamp(176px, 15vw, 232px) !important;
  max-height: 58px !important;
  object-fit: contain !important;
  filter: none !important;
}

.brand-lockup-combo small {
  display: block !important;
  margin-left: 58px !important;
  margin-top: -8px !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: #6f7784 !important;
}

.site-nav {
  margin-left: auto !important;
  gap: clamp(22px, 3vw, 42px) !important;
}

.site-nav a {
  color: var(--kf-ink) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
}

.lang-switch {
  border-color: rgba(16, 25, 37, 0.12) !important;
  box-shadow: 0 12px 28px rgba(16, 25, 37, 0.07) !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(56px, 7vw, 88px) 0 clamp(46px, 6vw, 70px) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(127, 189, 74, 0.13), transparent 30%),
    linear-gradient(90deg, #fffdfa 0%, #fffdfa 53%, #f4f9ef 53%, #fff8ef 100%) !important;
  overflow: hidden !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero-grid {
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.82fr) !important;
  align-items: center !important;
  gap: clamp(42px, 6vw, 76px) !important;
}

.hero-copy {
  max-width: 650px !important;
  padding: 0 !important;
}

.hero .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
  color: var(--kf-red) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.24em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 34px !important;
  height: 1px !important;
  flex: 0 0 34px !important;
  background: var(--kf-red) !important;
  opacity: 0.9 !important;
}

.japan-cue {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.japan-cue span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 13px 18px !important;
  border: 1px solid rgba(127, 189, 74, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--kf-navy) !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  line-height: 1.35 !important;
  box-shadow: 0 16px 38px rgba(23, 52, 94, 0.06) !important;
}

.hero-jp-line {
  margin: 0 0 18px !important;
  color: var(--kf-navy) !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.025em !important;
  max-width: 620px !important;
  text-wrap: balance !important;
}

.hero h1 {
  margin: 0 0 26px !important;
  color: var(--kf-ink) !important;
  font-size: clamp(50px, 5.2vw, 70px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  max-width: 680px !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  font-size: clamp(44px, 4.65vw, 60px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.04em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  max-width: 690px !important;
}

.hero-title-line {
  display: inline !important;
}

.hero-title-line + .hero-title-line::before {
  content: " " !important;
}

html[lang="ja"] .hero-title-line + .hero-title-line::before {
  content: "" !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 640px !important;
  margin: 0 0 18px !important;
  color: var(--kf-muted) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
}

.hero-proof-line {
  color: #324051 !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  margin: 28px 0 32px !important;
  max-width: 680px !important;
}

.hero-scope span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--kf-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.hero-scope span:first-child::before {
  content: "" !important;
  width: 22px !important;
  height: 2px !important;
  margin-right: 3px !important;
  background: var(--kf-red) !important;
}

.hero-scope span:not(:first-child)::before {
  display: none !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 !important;
}

.hero-actions .button,
.pain-panel .button,
.contact-card .button {
  min-height: 56px !important;
  padding: 0 26px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.hero-actions .button-primary {
  background: var(--kf-navy) !important;
  color: #fff !important;
  border-color: var(--kf-navy) !important;
  box-shadow: 0 18px 34px rgba(23, 52, 94, 0.18) !important;
}

.hero-actions .button-secondary {
  background: #fff !important;
  color: var(--kf-navy) !important;
  border: 1px solid rgba(23, 52, 94, 0.16) !important;
}

.signal-row,
.hero-company-proof,
.gtm-visual-old {
  display: none !important;
}

.hero-bridge-visual {
  display: block !important;
  position: relative !important;
  justify-self: end !important;
  width: min(100%, 500px) !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-bridge-visual::before,
.hero-bridge-visual::after,
.hero-bridge-visual .bridge-card,
.hero-bridge-visual .hero-proof-card {
  display: none !important;
}

.hero-field-card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid rgba(23, 52, 94, 0.12) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 30px 70px rgba(23, 52, 94, 0.14) !important;
}

.hero-field-card img {
  display: block !important;
  width: 100% !important;
  height: 330px !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.96) contrast(1.02) !important;
}

.hero-field-card figcaption {
  display: grid !important;
  gap: 8px !important;
  padding: 24px 26px 28px !important;
  background: linear-gradient(180deg, #fff, #fffaf3) !important;
}

.hero-field-card figcaption span {
  color: var(--kf-green) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  color: var(--kf-navy) !important;
  font-size: 25px !important;
  font-weight: 860 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
}

.hero-system-card {
  display: grid !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(88%, 390px) !important;
  margin: -38px 24px 0 auto !important;
  padding: 24px 26px !important;
  border-left: 5px solid var(--kf-red) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 24px 56px rgba(23, 52, 94, 0.16) !important;
}

.hero-system-card span {
  color: var(--kf-red) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  color: var(--kf-navy) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 0 56px !important;
  background: linear-gradient(180deg, #fffdf8, #fbfaf4) !important;
}

.focus-strip > div {
  width: min(1080px, calc(100% - 56px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  border: 1px solid rgba(23, 52, 94, 0.12) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 24px 54px rgba(23, 52, 94, 0.07) !important;
}

.focus-strip span {
  min-height: 116px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 24px 22px !important;
  border-right: 1px solid rgba(23, 52, 94, 0.12) !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b,
.focus-strip strong {
  color: #3f842f !important;
  font-size: clamp(30px, 3.3vw, 48px) !important;
  font-weight: 860 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
}

.focus-strip small {
  display: block !important;
  margin-top: 8px !important;
  color: var(--kf-navy) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
}

.network-grid {
  width: min(1120px, calc(100% - 56px)) !important;
  margin: 34px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.network-grid a {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-rows: 174px auto auto 1fr !important;
  min-height: 390px !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 94, 0.12) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 18px 46px rgba(23, 52, 94, 0.08) !important;
  text-align: left !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 174px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0 !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  display: block !important;
  padding: 24px 24px 0 !important;
  color: var(--kf-navy) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  display: block !important;
  padding: 10px 24px 0 !important;
  color: #4a8839 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-align: left !important;
}

.network-grid p,
.network-grid a p {
  padding: 18px 24px 28px !important;
  color: #626b77 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.62 !important;
  text-align: left !important;
}

.pain-panel {
  border-radius: 28px !important;
  background: #18365f !important;
  box-shadow: 0 28px 70px rgba(23, 52, 94, 0.16) !important;
}

.pain-panel .button,
.pain-panel .button-primary {
  background: #fff !important;
  color: var(--kf-navy) !important;
  border-color: #fff !important;
  opacity: 1 !important;
}

.contact-card {
  border-radius: 28px !important;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero-bridge-visual {
    justify-self: start !important;
    max-width: 640px !important;
  }

  .focus-strip > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .focus-strip span {
    border-bottom: 1px solid rgba(23, 52, 94, 0.12) !important;
  }

  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .color-strip {
    height: 7px !important;
  }

  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 86px !important;
    padding: 12px 18px !important;
  }

  .brand-mark-old {
    width: min(176px, calc(100vw - 176px)) !important;
    max-height: 50px !important;
  }

  .brand-lockup-combo small {
    display: none !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    border-color: rgba(23, 52, 94, 0.14) !important;
  }

  .lang-switch-header {
    margin-left: auto !important;
  }

  .hero {
    padding: 46px 0 38px !important;
    background:
      radial-gradient(circle at 82% 2%, rgba(127, 189, 74, 0.13), transparent 32%),
      #fffdf8 !important;
  }

  .hero-grid {
    width: 100% !important;
    display: block !important;
    padding: 0 24px !important;
    overflow: hidden !important;
  }

  .hero-copy {
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hero .eyebrow {
    margin-bottom: 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.55 !important;
  }

  .hero .eyebrow::before {
    width: 34px !important;
    flex-basis: 34px !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    max-width: 100% !important;
    margin-bottom: 16px !important;
    font-size: 20px !important;
    line-height: 1.48 !important;
    letter-spacing: -0.03em !important;
    overflow-wrap: anywhere !important;
  }

  .hero h1 {
    margin-bottom: 22px !important;
    font-size: clamp(34px, 9.3vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.055em !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.045em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .hero-lede {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.68 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-proof-line {
    display: none !important;
  }

  .hero-scope {
    max-width: 100% !important;
    margin: 24px 0 28px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .hero-scope span {
    padding: 9px 12px !important;
    border: 1px solid rgba(23, 52, 94, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  .hero-scope span:first-child::before {
    display: none !important;
  }

  .hero-scope span:nth-child(n + 5) {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    max-width: 100% !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin: 30px 0 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    border: 1px solid rgba(23, 52, 94, 0.12) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 20px 48px rgba(23, 52, 94, 0.09) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-mobile-proof figcaption {
    display: block !important;
    padding: 14px 18px !important;
    color: var(--kf-navy) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  .focus-strip {
    padding-bottom: 44px !important;
  }

  .focus-strip > div {
    width: calc(100% - 32px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 20px !important;
  }

  .focus-strip span {
    min-height: 104px !important;
    padding: 18px !important;
  }

  .focus-strip b,
  .focus-strip strong {
    font-size: 32px !important;
  }

  .focus-strip small {
    font-size: 12px !important;
  }

  .network-grid {
    width: calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .network-grid a {
    grid-template-rows: 168px auto auto auto !important;
    min-height: auto !important;
    border-radius: 20px !important;
  }

  .network-grid img,
  .network-grid a img {
    height: 168px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    padding: 22px 22px 0 !important;
    font-size: 24px !important;
    text-align: left !important;
  }

  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    padding-left: 22px !important;
    padding-right: 22px !important;
    text-align: left !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
    gap: 8px !important;
  }

  .brand-mark-old {
    width: min(154px, calc(100vw - 156px)) !important;
  }

  .lang-switch button {
    min-width: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
  }

  .nav-toggle {
    width: 46px !important;
    height: 46px !important;
  }

  .hero-grid {
    padding-inline: 20px !important;
  }

  .hero .eyebrow {
    align-items: flex-start !important;
    font-size: 10px !important;
  }

  .hero h1 {
    font-size: clamp(33px, 8.9vw, 39px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(29px, 7.6vw, 34px) !important;
  }

  .hero-jp-line {
    font-size: 18px !important;
  }

  .hero-lede {
    font-size: 16px !important;
  }
}

/* 2026-06-17 modern9: clean agency-grade hero and mobile containment */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  background: #fffdf8 !important;
}

.page,
.site-main,
main,
section,
.hero,
.section-pad {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.site-header {
  width: min(100%, 1180px) !important;
  margin-inline: auto !important;
  min-height: 92px !important;
  padding: 14px 28px !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 34px !important;
}

.brand {
  min-width: 0 !important;
}

.brand-mark-old {
  width: 226px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

.brand small {
  display: none !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 34px !important;
}

.site-nav a {
  color: #17233a !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.lang-switch-header {
  width: 116px !important;
  min-width: 116px !important;
  padding: 5px !important;
  border: 1px solid rgba(23, 35, 58, 0.1) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(23, 35, 58, 0.08) !important;
}

.lang-switch-header button {
  width: 50px !important;
  min-width: 50px !important;
  height: 42px !important;
  min-height: 42px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(64px, 7vw, 104px) 0 70px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(129, 190, 82, 0.16), transparent 32%),
    linear-gradient(90deg, #fffdf8 0 52%, #f4faef 52% 100%) !important;
  border-bottom: 1px solid rgba(23, 35, 58, 0.06) !important;
}

.hero-grid {
  width: min(1180px, calc(100% - 56px)) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.82fr) !important;
  align-items: center !important;
  gap: clamp(48px, 7vw, 90px) !important;
}

.hero-copy {
  max-width: 650px !important;
  padding: 0 !important;
}

.hero .eyebrow {
  max-width: 100% !important;
  margin: 0 0 26px !important;
  display: inline-grid !important;
  grid-template-columns: 38px minmax(0, auto) !important;
  align-items: center !important;
  gap: 13px !important;
  color: #a84235 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

.hero .eyebrow::before {
  width: 38px !important;
  height: 1px !important;
  background: #a84235 !important;
}

.japan-cue {
  margin: 0 0 34px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 13px 22px !important;
  border: 1px solid rgba(126, 188, 82, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: #172f57 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 44px rgba(23, 35, 58, 0.07) !important;
}

.hero-jp-line {
  max-width: 100% !important;
  margin: 0 0 28px !important;
  color: #18345e !important;
  font-size: clamp(20px, 1.9vw, 28px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.035em !important;
  font-weight: 900 !important;
}

.hero h1 {
  max-width: 100% !important;
  margin: 0 !important;
  color: #0c1422 !important;
  font-size: clamp(58px, 5.2vw, 84px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.06em !important;
  font-weight: 950 !important;
  text-wrap: balance !important;
}

.hero-title-line {
  display: block !important;
}

.hero-title-line + .hero-title-line::before {
  content: none !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 600px !important;
  color: #4d5869 !important;
  font-size: 18px !important;
  line-height: 1.64 !important;
  letter-spacing: -0.02em !important;
  font-weight: 720 !important;
}

.hero-lede {
  margin-top: 30px !important;
}

.hero-proof-line {
  margin-top: 18px !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 28px 0 0 !important;
  max-width: 610px !important;
}

.hero-scope span {
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 15px !important;
  border: 1px solid rgba(23, 35, 58, 0.11) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #18345e !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(23, 35, 58, 0.06) !important;
}

.hero-scope span::before {
  display: none !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 34px !important;
}

.hero-actions .button {
  min-width: 170px !important;
  min-height: 54px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 610px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.hero-bridge-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -46px -40px -36px -34px !important;
  z-index: -1 !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 70% 20%, rgba(246, 169, 178, 0.16), transparent 27%),
    radial-gradient(circle at 16% 88%, rgba(89, 183, 206, 0.14), transparent 30%),
    rgba(255, 255, 255, 0.28) !important;
  filter: blur(0) !important;
}

.hero-field-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 535px !important;
  margin: 0 0 0 auto !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  border: 1px solid rgba(23, 35, 58, 0.1) !important;
  background: #fff !important;
  box-shadow: 0 34px 84px rgba(23, 35, 58, 0.14) !important;
}

.hero-field-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.hero-field-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 15, 27, 0.72)) !important;
  pointer-events: none !important;
}

.hero-field-card figcaption {
  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  bottom: 24px !important;
  z-index: 2 !important;
  color: #fff !important;
}

.hero-field-card figcaption span {
  display: block !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.hero-field-card figcaption strong {
  display: block !important;
  margin-top: 8px !important;
  color: #fff !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  font-weight: 950 !important;
}

.hero-system-card {
  position: absolute !important;
  z-index: 3 !important;
  left: -14px !important;
  right: 44px !important;
  bottom: 18px !important;
  max-width: 500px !important;
  padding: 26px 30px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(23, 35, 58, 0.08) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 24px 70px rgba(23, 35, 58, 0.16) !important;
  backdrop-filter: blur(18px) !important;
}

.hero-system-card span {
  display: block !important;
  color: #a84235 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.hero-system-card strong {
  display: block !important;
  margin-top: 10px !important;
  color: #18345e !important;
  font-size: clamp(19px, 1.5vw, 25px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  font-weight: 950 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.gtm-visual-old,
.bridge-card,
.hero-proof-card {
  display: none !important;
}

@media (max-width: 980px) {
  .site-header {
    width: 100% !important;
    min-height: 86px !important;
    padding: 12px 18px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
  }

  .brand-mark-old {
    width: min(184px, calc(100vw - 170px)) !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    display: grid !important;
  }

  .lang-switch-header {
    width: 88px !important;
    min-width: 88px !important;
    padding: 4px !important;
  }

  .lang-switch-header button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(23, 35, 58, 0.12) !important;
    background: #fff !important;
  }

  .hero {
    padding: 52px 0 62px !important;
    background:
      radial-gradient(circle at 96% 3%, rgba(129, 190, 82, 0.16), transparent 28%),
      #fffdf8 !important;
  }

  .hero-grid {
    width: 100% !important;
    padding: 0 24px !important;
    display: block !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18em !important;
  }

  .japan-cue {
    display: block !important;
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .hero-jp-line {
    margin-top: 26px !important;
    margin-bottom: 14px !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 11.2vw, 54px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.065em !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 9.4vw, 45px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.055em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .hero-scope {
    margin-top: 22px !important;
    gap: 8px !important;
  }

  .hero-scope span {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 30px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(23, 35, 58, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 22px 58px rgba(23, 35, 58, 0.11) !important;
  }

  .hero-mobile-proof img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: #18345e !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 14px !important;
    min-height: 78px !important;
    gap: 8px !important;
  }

  .brand-mark-old {
    width: min(158px, calc(100vw - 158px)) !important;
  }

  .lang-switch-header {
    width: 78px !important;
    min-width: 78px !important;
  }

  .lang-switch-header button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.4vw, 47px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 8.9vw, 41px) !important;
  }

  .hero-lede,
  .hero-proof-line {
    font-size: 16px !important;
  }
}

/* 2026-06-17 modern8: reset the visible experience into a cleaner agency site */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body {
  background:
    radial-gradient(circle at 82% 12%, rgba(132, 191, 86, 0.12), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #f7f4ed 100%) !important;
  color: #111827 !important;
}

.color-strip {
  height: 8px !important;
}

.site-header {
  min-height: 92px !important;
  padding: 18px clamp(28px, 7vw, 120px) !important;
  display: grid !important;
  grid-template-columns: minmax(260px, auto) 1fr auto !important;
  align-items: center !important;
  column-gap: 34px !important;
  background: rgba(255, 253, 248, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(24, 35, 54, 0.08) !important;
  box-shadow: 0 14px 34px rgba(24, 35, 54, 0.05) !important;
}

.brand {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
}

.brand-mark-old {
  width: 232px !important;
  height: auto !important;
  max-width: 232px !important;
  object-fit: contain !important;
  filter: none !important;
}

.brand small {
  display: none !important;
}

.site-nav {
  grid-column: 2 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 46px) !important;
}

.site-nav a {
  color: #182336 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}

.lang-switch-header {
  grid-column: 3 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 10px 28px rgba(24, 35, 54, 0.08) !important;
}

.lang-switch-header button {
  width: 48px !important;
  min-width: 48px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.nav-toggle {
  display: none !important;
}

.hero {
  position: relative !important;
  min-height: calc(100vh - 100px) !important;
  padding: clamp(68px, 8vw, 118px) 0 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0 51%, rgba(240, 249, 238, 0.84) 51% 100%),
    radial-gradient(circle at 84% 26%, rgba(132, 191, 86, 0.12), transparent 32%) !important;
  overflow: hidden !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
  background-image:
    linear-gradient(rgba(24, 35, 54, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 35, 54, 0.045) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  mask-image: linear-gradient(180deg, #000 0%, transparent 76%) !important;
}

.hero-grid {
  position: relative !important;
  z-index: 1 !important;
  width: min(1500px, calc(100% - 112px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(480px, 0.8fr) !important;
  align-items: center !important;
  gap: clamp(54px, 8vw, 126px) !important;
}

.hero-copy {
  max-width: 760px !important;
  min-width: 0 !important;
}

.hero .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 30px !important;
  color: #a9473b !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.24em !important;
  text-transform: none !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 44px !important;
  height: 2px !important;
  flex: 0 0 44px !important;
  background: #a9473b !important;
}

.japan-cue {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 32px !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(132, 191, 86, 0.28) !important;
  box-shadow: 0 20px 48px rgba(24, 35, 54, 0.06) !important;
}

.japan-cue span {
  color: #18345e !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.hero-jp-line {
  margin: 0 0 20px !important;
  color: #18345e !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.03em !important;
  font-weight: 900 !important;
}

.hero h1 {
  max-width: 820px !important;
  margin: 0 !important;
  color: #0e1522 !important;
  font-size: clamp(62px, 5.8vw, 96px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.075em !important;
  font-weight: 950 !important;
  text-wrap: balance !important;
}

.hero-title-line {
  display: inline !important;
}

.hero-title-line + .hero-title-line::before {
  content: " " !important;
}

html[lang="ja"] .hero-title-line + .hero-title-line::before {
  content: "" !important;
}

html[lang="ja"] .hero h1 {
  max-width: 760px !important;
  font-size: clamp(54px, 5vw, 78px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 700px !important;
  color: #596473 !important;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  line-height: 1.72 !important;
  font-weight: 720 !important;
  letter-spacing: -0.02em !important;
}

.hero-lede {
  margin-top: 34px !important;
}

.hero-proof-line {
  margin-top: 22px !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
  margin-top: 30px !important;
  max-width: 680px !important;
}

.hero-scope span {
  white-space: nowrap !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(24, 35, 54, 0.11) !important;
  color: #18345e !important;
  box-shadow: 0 12px 26px rgba(24, 35, 54, 0.05) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 34px !important;
}

.hero-actions .button {
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
}

.hero-actions .button-primary {
  color: #fff !important;
  background: #18345e !important;
  border-color: #18345e !important;
  box-shadow: 0 18px 42px rgba(24, 52, 94, 0.22) !important;
}

.hero-actions .button-secondary {
  color: #18345e !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.14) !important;
}

.hero-bridge-visual {
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
}

.hero-bridge-visual .bridge-card {
  position: relative !important;
  width: 100% !important;
  min-height: 520px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 34px 82px rgba(24, 35, 54, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.2), rgba(24, 35, 54, 0.48)),
    url("assets/proof/teamz-room.jpg") center / cover no-repeat !important;
}

.hero-bridge-visual .bridge-card > * {
  display: none !important;
}

.hero-bridge-visual .bridge-card::before {
  content: "Japan-side field execution" !important;
  position: absolute !important;
  left: 28px !important;
  top: 28px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  color: #18345e !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 34px rgba(24, 35, 54, 0.16) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.hero-bridge-visual .bridge-card::after {
  content: "Strategy, localization, events, creators, and partner work handled on the ground in Japan." !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  max-width: 520px !important;
  color: #fff !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
  font-weight: 950 !important;
}

.hero-bridge-visual .hero-proof-card {
  position: absolute !important;
  right: -20px !important;
  bottom: -42px !important;
  z-index: 2 !important;
  width: min(440px, 62%) !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.93) !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 24px 52px rgba(24, 35, 54, 0.16) !important;
}

.hero-bridge-visual .hero-proof-card img {
  width: 112px !important;
  height: 78px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.hero-bridge-visual .hero-proof-card span {
  display: block !important;
  color: #4c8b3e !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.16em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.hero-bridge-visual .hero-proof-card strong {
  display: block !important;
  margin-top: 5px !important;
  color: #18345e !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 950 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 clamp(28px, 7vw, 120px) 82px !important;
  background: transparent !important;
}

.focus-strip > div {
  width: min(1320px, 100%) !important;
  margin: -28px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 24px 68px rgba(24, 35, 54, 0.08) !important;
}

.focus-strip span {
  min-height: 126px !important;
  padding: 26px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
  color: #18345e !important;
  font-size: 15px !important;
  line-height: 1.24 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip strong,
.focus-strip b {
  display: block !important;
  color: #4c8b3e !important;
  font-size: clamp(34px, 3.4vw, 54px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
  font-weight: 950 !important;
}

.section-pad {
  padding-left: clamp(28px, 7vw, 120px) !important;
  padding-right: clamp(28px, 7vw, 120px) !important;
}

.section-lead,
.section-kicker,
.split-intro,
.company-proof,
.pain-panel,
.contact-panel {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.network-grid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.network-grid a {
  min-height: 0 !important;
  grid-template-rows: 250px auto auto auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 22px 56px rgba(24, 35, 54, 0.07) !important;
}

.network-grid img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  text-align: left !important;
  padding: 26px 28px 0 !important;
  color: #18345e !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 950 !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  text-align: left !important;
  padding: 8px 28px 0 !important;
}

.network-grid p,
.network-grid a p {
  text-align: left !important;
  padding: 14px 28px 30px !important;
  color: #6b7280 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    width: min(100% - 56px, 1120px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr) !important;
    gap: 42px !important;
  }

  .hero h1 {
    font-size: clamp(56px, 6vw, 78px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(46px, 5.5vw, 66px) !important;
  }

  .hero-bridge-visual .bridge-card {
    min-height: 430px !important;
  }
}

@media (max-width: 860px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .site-header {
    min-height: 86px !important;
    padding: 16px 18px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
  }

  .brand {
    overflow: hidden !important;
  }

  .brand-mark-old {
    width: min(214px, calc(100vw - 184px)) !important;
    max-width: min(214px, calc(100vw - 184px)) !important;
  }

  .site-nav {
    display: none !important;
  }

  .lang-switch-header {
    grid-column: 2 !important;
    min-width: 90px !important;
    width: 90px !important;
    max-width: 90px !important;
    padding: 4px !important;
    gap: 3px !important;
  }

  .lang-switch-header button {
    width: 39px !important;
    min-width: 39px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 12px !important;
  }

  .nav-toggle {
    grid-column: 3 !important;
    display: inline-flex !important;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(24, 35, 54, 0.13) !important;
    box-shadow: 0 10px 24px rgba(24, 35, 54, 0.06) !important;
  }

  .hero {
    min-height: auto !important;
    padding: 50px 0 52px !important;
    background:
      radial-gradient(circle at 95% 10%, rgba(132, 191, 86, 0.11), transparent 28%),
      #fffdf8 !important;
  }

  .hero::before {
    opacity: 0.25 !important;
    background-size: 44px 44px !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    display: block !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 26px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.22em !important;
  }

  .japan-cue {
    margin-bottom: 30px !important;
    padding: 12px 16px !important;
  }

  .japan-cue span {
    font-size: 13px !important;
  }

  .hero-jp-line {
    margin-bottom: 16px !important;
    font-size: 23px !important;
    line-height: 1.42 !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(46px, 11.2vw, 56px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.065em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 9vw, 42px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-title-line {
    display: inline !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 700 !important;
  }

  .hero-lede {
    margin-top: 26px !important;
  }

  .hero-proof-line {
    margin-top: 18px !important;
  }

  .hero-scope {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .hero-scope span {
    white-space: normal !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 54px !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 28px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24, 35, 54, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 22px 52px rgba(24, 35, 54, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: #18345e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 20px 56px !important;
  }

  .focus-strip > div {
    margin-top: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    min-height: 104px !important;
    padding: 18px !important;
    border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
    border-bottom: 1px solid rgba(24, 35, 54, 0.1) !important;
    font-size: 13px !important;
  }

  .focus-strip strong,
  .focus-strip b {
    font-size: 32px !important;
  }

  .section-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .network-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .network-grid a {
    grid-template-rows: 190px auto auto auto !important;
  }

  .network-grid img {
    height: 190px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 14px !important;
  }

  .brand-mark-old {
    width: min(188px, calc(100vw - 174px)) !important;
    max-width: min(188px, calc(100vw - 174px)) !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(43px, 10.6vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 8.4vw, 38px) !important;
  }

  .hero .eyebrow {
    letter-spacing: 0.19em !important;
  }
}

/* 2026-06-17: modern5 clean agency system */
:root {
  --modern-ink: #0e1726;
  --modern-navy: #17345f;
  --modern-green: #7fbd55;
  --modern-red: #a64035;
  --modern-paper: #fffdf8;
  --modern-line: rgba(23, 52, 95, 0.13);
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.site-header {
  backdrop-filter: blur(18px) !important;
  background: rgba(255, 253, 248, 0.92) !important;
  border-bottom: 1px solid rgba(23, 52, 95, 0.09) !important;
}

.brand-mark-old {
  filter: none !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(74px, 8vw, 118px) 0 clamp(54px, 6vw, 84px) !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(127, 189, 85, 0.16), transparent 26%),
    radial-gradient(circle at 58% 84%, rgba(87, 183, 205, 0.1), transparent 30%),
    linear-gradient(90deg, #fffdf8 0%, #fffdf8 52%, #f3faef 52%, #fffaf1 100%) !important;
}

.hero-grid {
  width: min(1500px, calc(100% - 96px)) !important;
  max-width: 1500px !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(420px, 0.82fr) !important;
  align-items: center !important;
  gap: clamp(56px, 6vw, 96px) !important;
}

.hero-copy {
  max-width: 690px !important;
  padding: 0 !important;
}

.hero .eyebrow {
  margin-bottom: 24px !important;
  color: var(--modern-red) !important;
  letter-spacing: 0.24em !important;
}

.japan-cue {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 13px 22px !important;
  margin: 0 0 44px !important;
  border: 1px solid rgba(127, 189, 85, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 16px 42px rgba(23, 52, 95, 0.07) !important;
}

.japan-cue span {
  color: var(--modern-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.hero-jp-line {
  max-width: 680px !important;
  margin: 0 0 18px !important;
  color: var(--modern-navy) !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
}

.hero h1 {
  max-width: 760px !important;
  margin: 0 0 26px !important;
  color: var(--modern-ink) !important;
  font-size: clamp(62px, 5.2vw, 88px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.07em !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 760px !important;
  font-size: clamp(54px, 4.9vw, 78px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 650px !important;
  color: #4f5a68 !important;
  font-size: clamp(19px, 1.25vw, 22px) !important;
  line-height: 1.72 !important;
  font-weight: 680 !important;
}

.hero-proof-line {
  margin-top: 18px !important;
  color: #23334f !important;
}

.hero-scope {
  max-width: 650px !important;
  margin-top: 28px !important;
  gap: 10px 12px !important;
}

.hero-scope span {
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--modern-navy) !important;
  box-shadow: 0 14px 34px rgba(23, 52, 95, 0.07) !important;
}

.hero-actions {
  margin-top: 34px !important;
}

.hero-actions .button-primary,
.contact-card .button-primary,
.problem-section .button-primary {
  color: #fff !important;
  background: var(--modern-navy) !important;
  border-color: var(--modern-navy) !important;
  box-shadow: 0 18px 34px rgba(23, 52, 95, 0.22) !important;
}

.hero-actions .button-secondary {
  color: var(--modern-navy) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.signal-row,
.hero-company-proof {
  display: none !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: block !important;
  min-height: 590px !important;
  width: 100% !important;
  max-width: 600px !important;
  justify-self: end !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(180deg, rgba(14, 23, 38, 0.05), rgba(14, 23, 38, 0.34)),
    url("assets/proof/teamz-room.jpg") center / cover no-repeat !important;
  box-shadow: 0 36px 90px rgba(23, 52, 95, 0.18) !important;
  transform: translateY(8px) !important;
}

.hero-bridge-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 22px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

.hero-bridge-visual::after {
  content: "Tokyo-based field execution" !important;
  position: absolute !important;
  top: 42px !important;
  left: 42px !important;
  z-index: 2 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

.hero-bridge-visual .bridge-card {
  display: none !important;
}

.hero-bridge-visual .hero-proof-card {
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  z-index: 3 !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 24px 52px rgba(14, 23, 38, 0.22) !important;
  backdrop-filter: blur(16px) !important;
}

.hero-bridge-visual .hero-proof-card img {
  display: none !important;
}

.hero-bridge-visual .hero-proof-card figcaption {
  display: block !important;
  padding: 26px 28px !important;
}

.hero-bridge-visual .hero-proof-card span {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--modern-green) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.hero-bridge-visual .hero-proof-card strong {
  display: block !important;
  color: var(--modern-navy) !important;
  font-size: clamp(24px, 1.8vw, 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.04em !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  margin-top: -1px !important;
  padding: 0 0 70px !important;
  background: linear-gradient(180deg, #fffdf8 0%, #fbfaf3 100%) !important;
}

.focus-strip > div {
  width: min(1320px, calc(100% - 96px)) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 28px 70px rgba(23, 52, 95, 0.08) !important;
}

.focus-strip span {
  min-width: 0 !important;
  padding: 28px 24px !important;
}

.focus-strip b {
  color: #43832d !important;
  font-size: clamp(34px, 3.4vw, 58px) !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
}

.focus-strip small {
  color: var(--modern-navy) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.owned-grid {
  align-items: stretch !important;
}

.owned-card {
  text-align: left !important;
}

.owned-card h3,
.owned-card p {
  text-align: left !important;
}

@media (max-width: 1100px) {
  .hero-grid {
    width: min(100% - 52px, 980px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  .hero-copy {
    max-width: 760px !important;
  }

  .hero-bridge-visual {
    justify-self: start !important;
    max-width: 760px !important;
    min-height: 440px !important;
    transform: none !important;
  }
}

@media (max-width: 860px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .site-header,
  main,
  section,
  .hero,
  .hero-grid,
  .hero-copy,
  .section-pad,
  .focus-strip,
  .company-proof,
  .gtm-section,
  .owned-section,
  .about-section,
  .contact-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-header {
    min-height: 78px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 78px 48px !important;
  }

  .brand-mark-old {
    width: min(178px, calc(100vw - 168px)) !important;
    min-width: 0 !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .lang-switch-header {
    width: 78px !important;
    min-width: 78px !important;
    height: 38px !important;
  }

  .lang-switch-header button {
    min-width: 34px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  .nav-toggle {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  .hero {
    padding: 42px 0 44px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(127, 189, 85, 0.14), transparent 32%),
      linear-gradient(180deg, #fffdf8 0%, #fbfaf3 100%) !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 22px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.19em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hero .eyebrow::before {
    width: 42px !important;
    min-width: 42px !important;
  }

  .japan-cue {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px !important;
    padding: 12px 15px !important;
    border-radius: 20px !important;
  }

  .japan-cue span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .hero-jp-line {
    max-width: 100% !important;
    margin: 0 0 14px !important;
    font-size: 21px !important;
    line-height: 1.42 !important;
    letter-spacing: -0.035em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    margin: 0 0 20px !important;
    font-size: clamp(38px, 10vw, 47px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.058em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.2vw, 39px) !important;
    line-height: 1.17 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
  }

  .hero-lede,
  .hero-proof-line,
  html[lang="ja"] .hero-lede {
    max-width: 100% !important;
    font-size: 16.5px !important;
    line-height: 1.72 !important;
    font-weight: 650 !important;
  }

  .hero-scope {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }

  .hero-scope span {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 52px !important;
  }

  .hero-actions .button-secondary {
    display: none !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 52, 95, 0.12) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 54px rgba(23, 52, 95, 0.13) !important;
  }

  .hero-mobile-proof img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px 16px !important;
    color: var(--modern-navy) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 18px 46px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    padding: 20px 22px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(23, 52, 95, 0.1) !important;
  }

  .focus-strip b {
    font-size: 36px !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) 72px 44px !important;
    padding-inline: 10px !important;
  }

  .brand-mark-old {
    width: min(160px, calc(100vw - 156px)) !important;
  }

  .lang-switch-header {
    width: 72px !important;
    min-width: 72px !important;
  }

  .lang-switch-header button {
    min-width: 31px !important;
    font-size: 10px !important;
  }

  .nav-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .hero-grid {
    padding-inline: 18px !important;
  }

  .hero h1 {
    font-size: clamp(36px, 10vw, 42px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(32px, 8.8vw, 36px) !important;
  }
}

html,
body {
  overflow-x: hidden;
}

.site-header {
  background: rgba(255, 255, 250, 0.98) !important;
  border-bottom: 1px solid rgba(23, 51, 95, 0.08) !important;
  box-shadow: 0 12px 36px rgba(23, 51, 95, 0.05) !important;
}

.brand,
.brand:visited {
  color: var(--kf-ink) !important;
  text-decoration: none !important;
}

.brand-lockup-combo {
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 5px !important;
  align-items: start !important;
  justify-items: start !important;
  overflow: visible !important;
}

.brand-mark-old {
  display: block !important;
  width: 214px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}

.brand-wordmark {
  display: none !important;
}

.brand-lockup-combo small {
  display: block !important;
  margin-left: 76px !important;
  color: #697281 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

.hero {
  background:
    radial-gradient(circle at 74% 16%, rgba(120, 185, 79, 0.14), transparent 36%),
    linear-gradient(90deg, #fffefa 0%, #fffefa 52%, #f6fbf2 52%, #fbfaf4 100%) !important;
}

.hero-grid {
  align-items: center !important;
}

.hero .eyebrow,
.section-intro .eyebrow,
.company-proof .eyebrow {
  color: var(--kf-red) !important;
  letter-spacing: 0.19em !important;
  font-weight: 900 !important;
}

.japan-cue {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 12px 22px !important;
  border: 1px solid rgba(120, 185, 79, 0.28) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 16px 38px rgba(23, 51, 95, 0.07) !important;
}

.hero h1 {
  color: var(--kf-ink) !important;
  letter-spacing: -0.055em !important;
}

.hero-jp-line {
  color: var(--kf-navy) !important;
  font-weight: 850 !important;
}

.hero-lede,
.hero-proof-line {
  color: var(--kf-muted) !important;
  font-weight: 650 !important;
}

.hero-actions .button-primary,
.button-primary {
  background: var(--kf-navy) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(23, 51, 95, 0.18) !important;
}

.hero-actions .button-secondary,
.button-secondary {
  color: var(--kf-navy) !important;
  background: #fff !important;
  border-color: rgba(23, 51, 95, 0.14) !important;
}

.focus-strip > div {
  max-width: 1240px !important;
  border: 1px solid rgba(23, 51, 95, 0.11) !important;
  box-shadow: 0 24px 60px rgba(23, 51, 95, 0.08) !important;
}

.focus-strip span {
  text-align: left !important;
  align-items: flex-start !important;
}

.focus-strip b {
  color: #3e8732 !important;
  line-height: 0.95 !important;
}

.focus-strip small {
  color: var(--kf-navy) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.sales-service-grid article,
.network-grid a {
  background: #ffffff !important;
  border: 1px solid rgba(23, 51, 95, 0.11) !important;
  box-shadow: 0 20px 54px rgba(23, 51, 95, 0.07) !important;
}

.network-grid,
html[lang="ja"] .network-grid {
  align-items: stretch !important;
}

.network-grid a {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  overflow: hidden !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  object-position: top center !important;
  flex: 0 0 auto !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong,
.network-grid span,
html[lang="ja"] .network-grid a span,
.network-grid p,
.network-grid a p {
  margin-left: 28px !important;
  margin-right: 28px !important;
  text-align: left !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  margin-top: 24px !important;
  color: var(--kf-navy) !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  color: #3f8831 !important;
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.network-grid p,
.network-grid a p {
  color: var(--kf-muted) !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  font-weight: 650 !important;
}

.launch-panel,
.dark-panel,
.contact-card {
  box-shadow: var(--kf-shadow) !important;
}

@media (min-width: 721px) {
  .site-header {
    min-height: 96px !important;
    padding: 16px clamp(34px, 6vw, 92px) !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: clamp(76px, 7vw, 104px) !important;
    padding-bottom: clamp(68px, 7vw, 96px) !important;
  }

  .hero h1 {
    max-width: 9.4ch !important;
    font-size: clamp(64px, 6.1vw, 104px) !important;
    line-height: 0.98 !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 10.8ch !important;
    font-size: clamp(56px, 5.3vw, 86px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 690px !important;
    font-size: 19px !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 720px) {
  .color-strip {
    height: 7px !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    min-height: 74px !important;
    padding: 12px 18px !important;
    gap: 10px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: calc(100vw - 162px) !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  .brand-lockup-combo {
    display: block !important;
  }

  .brand-mark-old {
    width: min(188px, calc(100vw - 178px)) !important;
    min-width: 150px !important;
    height: auto !important;
  }

  .brand-lockup-combo small {
    display: none !important;
  }

  .lang-switch-header {
    width: 82px !important;
    min-width: 82px !important;
    height: 44px !important;
  }

  .lang-switch-header button {
    min-width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }

  .nav-toggle {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 34px 0 48px !important;
    background:
      radial-gradient(circle at 84% 8%, rgba(120, 185, 79, 0.13), transparent 34%),
      linear-gradient(180deg, #fffefa 0%, #fbfaf4 100%) !important;
  }

  .hero-grid {
    display: block !important;
    padding: 0 24px !important;
    max-width: 100% !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-bridge-visual,
  .hero-media,
  .gtm-visual-old,
  .signal-row,
  .hero-company-proof,
  .hero-mobile-proof,
  .japan-cue,
  .hero-scope {
    display: none !important;
  }

  .hero .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 28px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.16em !important;
  }

  .hero .eyebrow::before {
    content: "" !important;
    width: 36px !important;
    height: 1px !important;
    flex: 0 0 36px !important;
    background: var(--kf-green) !important;
  }

  .hero-jp-line {
    margin: 0 0 14px !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
  }

  .hero h1 {
    margin: 0 0 22px !important;
    max-width: 100% !important;
    font-size: clamp(42px, 11.2vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.2vw, 40px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.035em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .hero-lede {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .hero-proof-line {
    margin: 16px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    width: 100% !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  .hero-actions .button-secondary {
    display: none !important;
  }

  .focus-strip {
    padding: 0 18px 40px !important;
    background: #fffefa !important;
  }

  .focus-strip > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  .focus-strip span {
    min-height: 112px !important;
    padding: 22px 18px !important;
  }

  .focus-strip b {
    font-size: 28px !important;
  }

  .focus-strip small {
    font-size: 12px !important;
  }

  .section-pad {
    padding: 54px 24px !important;
  }

  .section-intro,
  .section-intro.wide {
    max-width: 100% !important;
  }

  .section-intro h2,
  .company-proof h2,
  .launch-panel h2,
  .contact-card h2 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance !important;
  }

  .sales-service-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sales-service-grid article {
    min-height: auto !important;
    padding: 24px !important;
    border-radius: 20px !important;
  }

  .sales-service-grid h3 {
    font-size: 24px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
  }

  .network-grid,
  html[lang="ja"] .network-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .network-grid a,
  .network-grid a:nth-child(1),
  .network-grid a:nth-child(2),
  .network-grid a:nth-child(3),
  .network-grid a:nth-child(4),
  .network-grid a:nth-child(5),
  .network-grid a:nth-child(6) {
    min-height: auto !important;
    border-radius: 20px !important;
  }

  .network-grid img,
  .network-grid a img {
    height: 178px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong,
  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    font-size: 24px !important;
  }
}

@media (max-width: 390px) {
  .brand-mark-old {
    width: min(170px, calc(100vw - 170px)) !important;
    min-width: 138px !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(39px, 10.4vw, 44px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(31px, 8.6vw, 36px) !important;
  }
}

/* 2026-06-17: modern agency-grade refresh. Keep markup/copy, fix hierarchy and mobile. */
:root {
  --modern-ink: #101722;
  --modern-navy: #17345f;
  --modern-blue: #255d8a;
  --modern-green: #76b84a;
  --modern-red: #aa3e31;
  --modern-cream: #fbfaf5;
  --modern-paper: #ffffff;
  --modern-line: rgba(23, 52, 95, 0.14);
  --modern-muted: #5f6876;
  --modern-shadow: 0 28px 80px rgba(24, 42, 69, 0.12);
  --modern-soft-shadow: 0 16px 44px rgba(24, 42, 69, 0.09);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--modern-ink) !important;
  background:
    radial-gradient(circle at 80% 8%, rgba(118, 184, 74, 0.14), transparent 34%),
    radial-gradient(circle at 12% 28%, rgba(37, 93, 138, 0.08), transparent 30%),
    linear-gradient(180deg, #fffef9 0%, var(--modern-cream) 100%) !important;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden !important;
}

.color-strip {
  height: 5px !important;
  background: linear-gradient(90deg, #77b94b 0 18%, #e55339 18% 34%, #225b83 34% 50%, #54aac3 50% 66%, #edae3d 66% 82%, #f1dc63 82% 100%) !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  min-height: 86px !important;
  padding: 0 max(24px, 10vw) !important;
  border-bottom: 1px solid rgba(23, 52, 95, 0.08) !important;
  background: rgba(255, 255, 251, 0.88) !important;
  box-shadow: 0 10px 32px rgba(24, 42, 69, 0.06) !important;
  backdrop-filter: blur(18px) !important;
}

.brand,
.brand-lockup,
.brand-lockup-combo {
  min-width: 0 !important;
}

.brand-mark-old {
  width: clamp(182px, 14vw, 232px) !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: contain !important;
  filter: none !important;
}

.brand-lockup small {
  margin-top: 2px !important;
  color: rgba(16, 23, 34, 0.58) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.site-nav {
  gap: clamp(26px, 3vw, 48px) !important;
}

.site-nav a {
  color: var(--modern-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.lang-switch {
  border-color: rgba(23, 52, 95, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 12px 30px rgba(24, 42, 69, 0.08) !important;
}

.lang-switch button {
  color: var(--modern-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--modern-navy) !important;
  color: #fff !important;
}

.section-pad,
.hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero {
  position: relative !important;
  min-height: calc(100svh - 91px) !important;
  padding-top: clamp(72px, 8vw, 118px) !important;
  padding-bottom: clamp(42px, 7vw, 82px) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 251, 0.98) 0 52%, rgba(239, 248, 236, 0.9) 52% 100%),
    radial-gradient(circle at 88% 15%, rgba(118, 184, 74, 0.2), transparent 34%) !important;
  overflow: hidden !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(23, 52, 95, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 52, 95, 0.045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent) !important;
  opacity: 0.58 !important;
}

.hero-grid {
  position: relative !important;
  z-index: 1 !important;
  width: min(100% - 64px, 1440px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(440px, 0.86fr) !important;
  gap: clamp(52px, 7vw, 116px) !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 720px !important;
}

.hero .eyebrow,
.section-kicker,
.owned-section .eyebrow,
.contact-section .eyebrow {
  color: var(--modern-red) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.4 !important;
}

.hero .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 44px !important;
  height: 2px !important;
  flex: 0 0 auto !important;
  background: var(--modern-green) !important;
}

.japan-cue {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 38px !important;
  padding: 11px 19px !important;
  border: 1px solid rgba(118, 184, 74, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 14px 34px rgba(24, 42, 69, 0.08) !important;
}

.japan-cue span {
  color: var(--modern-navy) !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  white-space: normal !important;
}

.hero-jp-line {
  margin: 0 0 22px !important;
  color: var(--modern-navy) !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.16 !important;
}

.hero h1 {
  max-width: 9.8ch !important;
  margin: 0 0 28px !important;
  color: #0d1522 !important;
  font-size: clamp(58px, 6.35vw, 98px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.072em !important;
  line-height: 0.96 !important;
  text-wrap: balance !important;
}

.hero-title-line {
  display: block !important;
}

html[lang="ja"] .hero h1 {
  max-width: 9.2em !important;
  font-size: clamp(58px, 5vw, 86px) !important;
  letter-spacing: -0.055em !important;
  line-height: 1.08 !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 660px !important;
  color: var(--modern-muted) !important;
  font-size: clamp(18px, 1.18vw, 21px) !important;
  font-weight: 750 !important;
  line-height: 1.72 !important;
  letter-spacing: -0.015em !important;
}

.hero-proof-line {
  margin-top: 18px !important;
  color: #263142 !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  margin: 30px 0 0 !important;
}

.hero-scope span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--modern-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.hero-scope span::before {
  content: "" !important;
  width: 12px !important;
  height: 2px !important;
  background: var(--modern-red) !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 36px !important;
}

.button,
.hero-actions .button,
.contact-section .button {
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.button-primary,
.hero-actions .button-primary,
.contact-section .button-primary {
  border-color: var(--modern-navy) !important;
  background: var(--modern-navy) !important;
  color: #fff !important;
}

.button-secondary,
.hero-actions .button-secondary {
  border: 1px solid var(--modern-line) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--modern-navy) !important;
}

.hero-company-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: 660px !important;
  margin-top: 28px !important;
}

.hero-company-proof span {
  padding: 14px 16px !important;
  border: 1px solid rgba(23, 52, 95, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--modern-navy) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 620px !important;
}

.bridge-card {
  position: relative !important;
  width: min(100%, 520px) !important;
  height: 560px !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(216, 94, 82, 0.2), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 246, 0.94)) !important;
  box-shadow: var(--modern-shadow) !important;
  overflow: hidden !important;
  transform: none !important;
}

.bridge-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(23, 52, 95, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 52, 95, 0.052) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
}

.bridge-label,
.bridge-caption {
  position: absolute !important;
  z-index: 2 !important;
}

.bridge-label {
  top: 106px !important;
  padding: 13px 20px !important;
  border: 1px solid rgba(23, 52, 95, 0.09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 30px rgba(24, 42, 69, 0.08) !important;
  color: var(--modern-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.label-left {
  left: 58px !important;
}

.label-right {
  right: 56px !important;
}

.bridge-sun {
  position: absolute !important;
  top: 74px !important;
  right: 78px !important;
  width: 132px !important;
  height: 132px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.4), rgba(199, 70, 58, 0.88) 58%, rgba(199, 70, 58, 0.52)) !important;
  box-shadow: 0 26px 60px rgba(170, 62, 49, 0.22) !important;
}

.bridge-svg {
  position: absolute !important;
  inset: auto 34px 82px !important;
  z-index: 2 !important;
  width: calc(100% - 68px) !important;
  height: 250px !important;
}

.bridge-svg path {
  stroke-linecap: round !important;
}

.motion-dot {
  filter: drop-shadow(0 6px 12px rgba(24, 42, 69, 0.18)) !important;
}

.bridge-caption {
  left: 42px !important;
  right: 42px !important;
  bottom: 34px !important;
  padding: 20px 24px !important;
  border-left: 5px solid var(--modern-red) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 48px rgba(24, 42, 69, 0.12) !important;
}

.bridge-caption small {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--modern-red) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.bridge-caption strong {
  color: var(--modern-navy) !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.hero-proof-card {
  position: absolute !important;
  right: -18px !important;
  bottom: 28px !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  width: min(430px, 88%) !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.11) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--modern-shadow) !important;
}

.hero-proof-card img {
  width: 150px !important;
  height: 124px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero-proof-card figcaption {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 18px !important;
}

.hero-proof-card span {
  color: var(--modern-green) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.hero-proof-card strong {
  color: var(--modern-navy) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  position: relative !important;
  z-index: 4 !important;
  width: min(100% - 64px, 1280px) !important;
  margin: -26px auto 0 !important;
  padding: 0 !important;
}

.focus-strip > div {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 251, 0.95) !important;
  box-shadow: var(--modern-soft-shadow) !important;
}

.focus-strip span {
  min-height: 118px !important;
  padding: 24px 26px !important;
  border-right: 1px solid rgba(23, 52, 95, 0.1) !important;
  background: transparent !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b {
  color: #3f8732 !important;
  font-size: clamp(34px, 3vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
}

.focus-strip small {
  display: block !important;
  max-width: 12em !important;
  margin-top: 8px !important;
  color: var(--modern-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
}

.company-proof,
.services-intro,
.owned-section,
.about-section,
.contact-section {
  padding-left: max(24px, calc((100vw - 1280px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1280px) / 2)) !important;
}

.company-proof {
  padding-top: clamp(82px, 9vw, 132px) !important;
  padding-bottom: clamp(76px, 8vw, 118px) !important;
}

.company-proof-inner {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.72fr) !important;
  gap: clamp(42px, 6vw, 92px) !important;
  align-items: center !important;
}

.company-proof h2,
.services-intro h2,
.about-section h2,
.contact-section h2 {
  max-width: 900px !important;
  color: var(--modern-ink) !important;
  font-size: clamp(46px, 5vw, 82px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
}

html[lang="ja"] .company-proof h2,
html[lang="ja"] .services-intro h2,
html[lang="ja"] .about-section h2,
html[lang="ja"] .contact-section h2 {
  font-size: clamp(42px, 4.2vw, 72px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1.12 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.company-proof-text p,
.services-intro p,
.about-section p,
.contact-section p {
  color: var(--modern-muted) !important;
  font-size: clamp(17px, 1.12vw, 20px) !important;
  font-weight: 650 !important;
  line-height: 1.75 !important;
}

.company-proof-media {
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: var(--modern-shadow) !important;
}

.company-proof-media img {
  width: 100% !important;
  height: clamp(320px, 32vw, 480px) !important;
  object-fit: cover !important;
}

.company-proof-metrics {
  border-top: 1px solid rgba(23, 52, 95, 0.1) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.company-proof-metrics span {
  color: var(--modern-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.company-proof-metrics strong {
  color: #3f8732 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}

.gtm-section,
.muted-section,
.services-intro {
  background: #f5f4ef !important;
}

.services-intro {
  padding-top: clamp(82px, 9vw, 132px) !important;
  padding-bottom: clamp(40px, 5vw, 68px) !important;
}

.sales-service-grid {
  width: min(100% - 64px, 1280px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.sales-card {
  min-height: 320px !important;
  padding: 30px !important;
  border: 1px solid rgba(23, 52, 95, 0.11) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88)) !important;
  box-shadow: 0 16px 44px rgba(24, 42, 69, 0.08) !important;
  text-align: left !important;
}

.sales-card::after {
  display: none !important;
}

.sales-card .sales-number {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(118, 184, 74, 0.13) !important;
  color: #3f8732 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.sales-card h3 {
  max-width: 10.8em !important;
  margin-top: 54px !important;
  color: var(--modern-ink) !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
  text-align: left !important;
  text-wrap: balance !important;
}

html[lang="ja"] .sales-card h3 {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.sales-card p {
  max-width: 22em !important;
  color: var(--modern-muted) !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
}

.pain-panel {
  width: min(100% - 64px, 1280px) !important;
  margin: clamp(82px, 8vw, 122px) auto !important;
  padding: clamp(42px, 5vw, 70px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(23, 52, 95, 0.98), rgba(23, 42, 74, 0.94)),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
  background-size: auto, 42px 42px !important;
  color: #fff !important;
  box-shadow: var(--modern-shadow) !important;
}

.pain-panel h2,
.pain-panel p,
.pain-panel strong {
  color: #fff !important;
}

.pain-panel p {
  max-width: 820px !important;
  opacity: 0.86 !important;
}

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

.pain-card {
  min-height: 190px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.pain-card h3 {
  color: #fff9c9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

.pain-card p {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.pain-panel .button,
.pain-panel .button-primary {
  margin-top: 32px !important;
  background: #fff !important;
  color: var(--modern-navy) !important;
  border-color: #fff !important;
}

.owned-section {
  padding-top: clamp(80px, 8vw, 126px) !important;
  padding-bottom: clamp(80px, 8vw, 126px) !important;
}

.owned-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.owned-card {
  min-height: 500px !important;
  overflow: hidden !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: var(--modern-soft-shadow) !important;
  text-align: left !important;
}

.owned-card img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.owned-card-content {
  padding: 28px !important;
  text-align: left !important;
}

.owned-card .eyebrow,
.owned-card h3,
.owned-card p {
  text-align: left !important;
}

.owned-card h3 {
  color: var(--modern-navy) !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}

.owned-card p {
  color: var(--modern-muted) !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
}

.owned-card .text-link {
  color: #3f8732 !important;
  font-weight: 900 !important;
}

.contact-section {
  padding-top: clamp(72px, 8vw, 122px) !important;
  padding-bottom: clamp(52px, 6vw, 92px) !important;
}

.contact-card {
  width: min(100%, 1080px) !important;
  margin: 0 auto !important;
  padding: clamp(36px, 5vw, 70px) !important;
  border: 1px solid rgba(23, 52, 95, 0.12) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--modern-soft-shadow) !important;
}

.contact-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
}

.footer {
  width: min(100% - 64px, 1280px) !important;
  margin: 0 auto !important;
  padding: 28px 0 42px !important;
  color: rgba(16, 23, 34, 0.48) !important;
}

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero-bridge-visual {
    min-height: 480px !important;
  }

  .bridge-card {
    width: min(100%, 620px) !important;
    height: 470px !important;
  }

  .hero-proof-card {
    right: calc(50% - 300px) !important;
  }

  .sales-service-grid,
  .owned-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .company-proof-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .color-strip {
    height: 4px !important;
  }

  .site-header {
    min-height: 76px !important;
    padding: 0 18px !important;
  }

  .brand-mark-old {
    width: min(176px, calc(100vw - 190px)) !important;
    min-width: 138px !important;
    max-height: 44px !important;
  }

  .brand-lockup small {
    display: none !important;
  }

  .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #fff !important;
  }

  .lang-switch-header {
    margin-left: auto !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 56px !important;
    padding-bottom: 46px !important;
    background:
      radial-gradient(circle at 86% 16%, rgba(118, 184, 74, 0.16), transparent 36%),
      linear-gradient(180deg, #fffef9, #fbfaf5) !important;
  }

  .hero-grid {
    width: min(100% - 44px, 520px) !important;
    display: block !important;
  }

  .hero-copy {
    max-width: none !important;
  }

  .hero .eyebrow {
    gap: 12px !important;
    margin-bottom: 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }

  .hero .eyebrow::before {
    width: 34px !important;
  }

  .japan-cue {
    display: flex !important;
    margin-bottom: 30px !important;
    padding: 11px 16px !important;
    border-radius: 22px !important;
  }

  .japan-cue span {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  .hero-jp-line {
    margin-bottom: 18px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.035em !important;
  }

  .hero h1,
  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    margin-bottom: 22px !important;
    font-size: clamp(44px, 12.4vw, 58px) !important;
    letter-spacing: -0.065em !important;
    line-height: 1.02 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(40px, 10.4vw, 50px) !important;
    letter-spacing: -0.05em !important;
    line-height: 1.13 !important;
    word-break: keep-all !important;
  }

  .hero-lede,
  .hero-proof-line,
  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-scope {
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .hero-scope span {
    padding: 10px 14px !important;
    border: 1px solid rgba(23, 52, 95, 0.1) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-scope span::before {
    display: none !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }

  .button,
  .hero-actions .button {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    padding: 0 18px !important;
    font-size: 12px !important;
  }

  .hero-company-proof {
    grid-template-columns: 1fr !important;
    margin-top: 22px !important;
  }

  .hero-company-proof span {
    padding: 12px 14px !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 52, 95, 0.12) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: var(--modern-soft-shadow) !important;
  }

  .hero-mobile-proof img {
    height: 180px !important;
    object-position: center !important;
  }

  .hero-mobile-proof figcaption {
    padding: 13px 16px !important;
    color: var(--modern-navy) !important;
  }

  .focus-strip {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 18px 34px !important;
    overflow: hidden !important;
  }

  .focus-strip > div {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .focus-strip span {
    flex: 0 0 168px !important;
    min-height: 112px !important;
    padding: 18px !important;
    border: 1px solid rgba(23, 52, 95, 0.1) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    scroll-snap-align: start !important;
  }

  .focus-strip b {
    font-size: 30px !important;
  }

  .focus-strip small {
    font-size: 12px !important;
  }

  .company-proof,
  .services-intro,
  .owned-section,
  .about-section,
  .contact-section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .company-proof,
  .services-intro,
  .owned-section {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }

  .company-proof h2,
  .services-intro h2,
  .about-section h2,
  .contact-section h2,
  html[lang="ja"] .company-proof h2,
  html[lang="ja"] .services-intro h2,
  html[lang="ja"] .about-section h2,
  html[lang="ja"] .contact-section h2 {
    max-width: 100% !important;
    font-size: clamp(34px, 9vw, 45px) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.12 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .company-proof-text p,
  .services-intro p,
  .about-section p,
  .contact-section p {
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  .company-proof-media img {
    height: 240px !important;
  }

  .sales-service-grid,
  .owned-grid {
    width: min(100% - 44px, 520px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sales-card {
    min-height: auto !important;
    padding: 24px !important;
  }

  .sales-card h3 {
    max-width: 100% !important;
    margin-top: 36px !important;
    font-size: 26px !important;
    line-height: 1.14 !important;
  }

  .pain-panel {
    width: min(100% - 44px, 520px) !important;
    margin: 60px auto !important;
    padding: 28px !important;
    border-radius: 22px !important;
  }

  .pain-grid {
    grid-template-columns: 1fr !important;
  }

  .pain-card {
    min-height: auto !important;
  }

  .owned-card {
    min-height: auto !important;
  }

  .owned-card img {
    height: 188px !important;
  }

  .owned-card h3 {
    font-size: 24px !important;
  }

  .contact-card {
    padding: 28px 22px !important;
    border-radius: 22px !important;
  }

  .footer {
    width: min(100% - 44px, 520px) !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    padding: 0 14px !important;
  }

  .brand-mark-old {
    width: min(164px, calc(100vw - 178px)) !important;
    min-width: 124px !important;
  }

  .lang-switch-header {
    transform: scale(0.9) !important;
    transform-origin: right center !important;
  }

  .nav-toggle {
    width: 50px !important;
    height: 50px !important;
  }

  .hero-grid {
    width: min(100% - 36px, 520px) !important;
  }

  .japan-cue {
    padding: 10px 14px !important;
  }

  .japan-cue span {
    font-size: 12.5px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 11.8vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.2vw, 42px) !important;
  }

  .hero-lede,
  .hero-proof-line,
  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    font-size: 15.5px !important;
  }
}

/* Company-grade mobile polish: tighter first view, clearer proof, less freelancer-site feel. */
.brand-mark-old {
  image-rendering: auto !important;
  transform: translateZ(0);
}

.brand-lockup-combo small {
  display: none !important;
}

@media (min-width: 721px) {
  .hero {
    padding-top: clamp(72px, 7vw, 104px) !important;
    padding-bottom: clamp(76px, 7vw, 108px) !important;
  }

  .hero-grid {
    max-width: 1180px !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr) !important;
    gap: clamp(54px, 6vw, 92px) !important;
  }

  .hero h1 {
    max-width: 10.8ch !important;
    font-size: clamp(60px, 6.1vw, 88px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 8.6em !important;
    font-size: clamp(54px, 5.3vw, 74px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.045em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 650px !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    height: 66px !important;
    min-height: 66px !important;
    padding: 8px 16px !important;
  }

  .brand {
    max-width: calc(100vw - 166px) !important;
  }

  .brand-lockup-combo {
    row-gap: 0 !important;
  }

  .brand-mark-old {
    width: min(158px, calc(100vw - 178px)) !important;
    min-width: 128px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }

  .brand-lockup-combo small {
    display: none !important;
  }

  .lang-switch-header {
    width: 72px !important;
    min-width: 72px !important;
    height: 38px !important;
    padding: 3px !important;
  }

  .lang-switch-header button {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  .nav-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 30px 0 36px !important;
    background:
      radial-gradient(circle at 92% 6%, rgba(120, 185, 79, 0.12), transparent 34%),
      radial-gradient(circle at 0% 96%, rgba(82, 169, 196, 0.08), transparent 34%),
      linear-gradient(180deg, #fffefa 0%, #fbfaf4 100%) !important;
  }

  .hero-grid {
    display: block !important;
    max-width: 100% !important;
    padding: 0 22px !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-bridge-visual,
  .hero-media,
  .gtm-visual-old,
  .signal-row,
  .hero-company-proof,
  .japan-cue {
    display: none !important;
  }

  .hero .eyebrow {
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 20px !important;
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.14em !important;
  }

  .hero .eyebrow::before {
    width: 28px !important;
    flex-basis: 28px !important;
  }

  .hero-jp-line {
    margin: 0 0 10px !important;
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.02em !important;
  }

  .hero h1 {
    margin: 0 0 18px !important;
    max-width: 11ch !important;
    font-size: clamp(34px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 11em !important;
    font-size: clamp(30px, 8vw, 35px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.025em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .hero-lede {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    font-weight: 650 !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .hero-proof-line {
    display: none !important;
  }

  .hero-scope {
    display: flex !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding-bottom: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .hero-scope::-webkit-scrollbar {
    display: none !important;
  }

  .hero-scope span {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(23, 51, 95, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  .hero-actions .button-secondary {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin: 20px 0 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 51, 95, 0.1) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(23, 51, 95, 0.12) !important;
  }

  .hero-mobile-proof img {
    display: block !important;
    width: 100% !important;
    height: 136px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-mobile-proof figcaption {
    display: block !important;
    padding: 11px 14px !important;
    color: var(--kf-navy) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 18px 34px !important;
  }

  .focus-strip > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 18px !important;
  }

  .focus-strip span {
    min-height: 92px !important;
    padding: 18px 15px !important;
  }

  .focus-strip b {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .focus-strip small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 390px) {
  .brand-mark-old {
    width: min(148px, calc(100vw - 170px)) !important;
    min-width: 122px !important;
  }

  .hero-grid {
    padding-inline: 20px !important;
  }

  .hero h1 {
    font-size: clamp(32px, 8.7vw, 36px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(28px, 7.8vw, 32px) !important;
  }

  .hero-lede,
  html[lang="ja"] .hero-lede {
    font-size: 14.5px !important;
  }
}

/* 2026-06-17: modern agency-grade stabilizing pass */
:root {
  --modern-navy: #12284b;
  --modern-ink: #111820;
  --modern-muted: #5d6675;
  --modern-green: #78b84f;
  --modern-rust: #a64636;
  --modern-paper: #fffdf8;
}

body {
  background: #fbfaf4 !important;
  color: var(--modern-ink) !important;
}

.site-header {
  max-width: none !important;
  width: 100% !important;
  padding: 18px clamp(28px, 8vw, 150px) !important;
  border-bottom: 1px solid rgba(18, 40, 75, 0.08) !important;
  background: rgba(255, 255, 252, 0.92) !important;
  backdrop-filter: blur(18px) !important;
}

.brand-mark-old {
  width: 222px !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.brand-lockup-combo small {
  margin-top: 3px !important;
  color: rgba(18, 40, 75, 0.62) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.site-nav a {
  color: #111820 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.hero {
  min-height: calc(100vh - 98px) !important;
  padding: clamp(64px, 8vw, 118px) 0 clamp(48px, 7vw, 92px) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 76% 30%, rgba(121, 184, 79, 0.13), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(82, 169, 196, 0.09), transparent 30%),
    linear-gradient(90deg, #fffdf8 0%, #fffdf8 52%, #f3faef 52%, #fbf6eb 100%) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(18, 40, 75, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 40, 75, 0.03) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 82%) !important;
}

.hero-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 0.93fr) minmax(440px, 0.82fr) !important;
  gap: clamp(52px, 7vw, 112px) !important;
  align-items: center !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 clamp(32px, 7vw, 126px) !important;
}

.hero-copy {
  max-width: 720px !important;
}

.hero .eyebrow {
  margin-bottom: 24px !important;
  color: var(--modern-rust) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.2em !important;
}

.japan-cue {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 42px !important;
  padding: 10px 19px !important;
  border: 1px solid rgba(121, 184, 79, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 18px 48px rgba(18, 40, 75, 0.06) !important;
}

.japan-cue span {
  color: var(--modern-navy) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.hero-jp-line {
  max-width: 700px !important;
  margin: 0 0 18px !important;
  color: var(--modern-navy) !important;
  font-size: clamp(24px, 2.35vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance !important;
}

.hero h1 {
  max-width: 680px !important;
  margin: 0 0 26px !important;
  color: #0e1522 !important;
  font-size: clamp(60px, 6vw, 104px) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.07em !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 11.5em !important;
  font-size: clamp(54px, 5.2vw, 86px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 680px !important;
  color: rgba(18, 40, 75, 0.72) !important;
  font-size: 18px !important;
  font-weight: 740 !important;
  line-height: 1.7 !important;
}

.hero-proof-line {
  margin-top: 14px !important;
}

.hero-scope {
  max-width: 650px !important;
  gap: 11px !important;
  margin-top: 26px !important;
}

.hero-scope span {
  padding: 9px 13px !important;
  border: 1px solid rgba(18, 40, 75, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--modern-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 12px 28px rgba(18, 40, 75, 0.04) !important;
}

.hero-actions {
  margin-top: 30px !important;
  gap: 14px !important;
}

.hero-actions .button {
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
}

.hero-actions .button-primary {
  background: var(--modern-navy) !important;
  color: #fff !important;
  box-shadow: 0 18px 42px rgba(18, 40, 75, 0.18) !important;
}

.hero-actions .button-secondary {
  border: 1px solid rgba(18, 40, 75, 0.14) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--modern-navy) !important;
}

.hero-company-proof {
  display: none !important;
}

.hero-bridge-visual {
  display: block !important;
  position: relative !important;
  min-height: 620px !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

.bridge-card {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(100%, 560px) !important;
  height: 530px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 40, 75, 0.09) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 72% 23%, rgba(180, 58, 49, 0.19), transparent 24%),
    radial-gradient(circle at 18% 92%, rgba(121, 184, 79, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(249, 252, 244, 0.9)) !important;
  box-shadow: 0 38px 90px rgba(18, 40, 75, 0.13) !important;
}

.bridge-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(18, 40, 75, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 40, 75, 0.04) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.72 !important;
}

.bridge-grid,
.bridge-arc,
.bridge-deck,
.bridge-pillars,
.route-dot,
.sakura-petals,
.sun-disc {
  display: none !important;
}

.bridge-motion {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  bottom: 86px !important;
  width: 82% !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.motion-arch,
.motion-road,
.motion-route,
.motion-beams path,
.motion-pillars path {
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
}

.motion-arch-base {
  stroke: #19345e !important;
  stroke-width: 7 !important;
}

.motion-arch-accent {
  stroke: #7fbd55 !important;
  stroke-width: 6 !important;
}

.motion-road {
  stroke: rgba(180, 58, 49, 0.13) !important;
  stroke-width: 18 !important;
}

.motion-route,
.motion-beams path {
  stroke: url("#motionSignalLine") !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 12 22 !important;
}

.motion-beams {
  opacity: 0.7 !important;
}

.motion-pillars path {
  stroke: rgba(18, 40, 75, 0.18) !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
}

.motion-node {
  stroke: #fff !important;
  stroke-width: 4 !important;
}

.motion-node-start {
  fill: #57b7cd !important;
}

.motion-node-mid {
  fill: #7fbd55 !important;
}

.motion-node-end {
  fill: #b43b31 !important;
}

.motion-traveler,
.motion-flow-dot {
  fill: #b43b31 !important;
}

.route-label {
  z-index: 3 !important;
  top: 150px !important;
  padding: 12px 22px !important;
  border: 1px solid rgba(18, 40, 75, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--modern-navy) !important;
  box-shadow: 0 14px 34px rgba(18, 40, 75, 0.08) !important;
}

.route-label-global {
  left: 56px !important;
}

.route-label-japan {
  right: 50px !important;
}

.bridge-note {
  z-index: 4 !important;
  left: 38px !important;
  right: 38px !important;
  bottom: 34px !important;
  padding: 24px 26px !important;
  border-left: 7px solid var(--modern-rust) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 46px rgba(18, 40, 75, 0.13) !important;
}

.bridge-note span {
  color: #4f8b3f !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.2em !important;
}

.bridge-note strong {
  margin-top: 8px !important;
  color: var(--modern-navy) !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
}

.hero-proof-card {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  position: absolute !important;
  z-index: 8 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(470px, 88%) !important;
  min-height: 118px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 40, 75, 0.1) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 24px 66px rgba(18, 40, 75, 0.16) !important;
}

.hero-proof-card img {
  width: 100% !important;
  height: 100% !important;
  min-height: 118px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.hero-proof-card figcaption {
  padding: 20px 20px 18px !important;
}

.hero-proof-card span {
  color: #4f8b3f !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.18em !important;
}

.hero-proof-card strong {
  margin-top: 8px !important;
  color: var(--modern-navy) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.focus-strip {
  margin: -34px auto 0 !important;
  padding: 0 clamp(32px, 7vw, 126px) 74px !important;
  background: linear-gradient(180deg, transparent 0, #fbfaf4 44%) !important;
}

.focus-strip > div {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 40, 75, 0.1) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 28px 72px rgba(18, 40, 75, 0.08) !important;
}

.focus-strip span {
  display: flex !important;
  min-height: 126px !important;
  padding: 28px 26px !important;
  border-right: 1px solid rgba(18, 40, 75, 0.1) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip b {
  color: #4b8b35 !important;
  font-size: clamp(30px, 3vw, 48px) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
}

.focus-strip small {
  max-width: 160px !important;
  margin-top: 8px !important;
  color: var(--modern-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html[lang="ja"] .focus-strip b {
  font-size: clamp(25px, 2.5vw, 39px) !important;
  letter-spacing: -0.04em !important;
}

html[lang="ja"] .focus-strip small {
  font-size: 12px !important;
  line-height: 1.32 !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr) !important;
    gap: 44px !important;
  }

  .hero h1 {
    font-size: clamp(54px, 6vw, 78px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(48px, 5.2vw, 68px) !important;
  }

  .hero-bridge-visual {
    max-width: 500px !important;
    min-height: 560px !important;
  }

  .bridge-card {
    height: 485px !important;
  }
}

@media (max-width: 860px) {
  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 74px !important;
    height: auto !important;
    padding: 11px 18px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: none !important;
  }

  .brand-mark-old {
    width: min(190px, calc(100vw - 174px)) !important;
    min-width: 135px !important;
    max-height: 48px !important;
  }

  .brand-lockup-combo small {
    display: none !important;
  }

  .lang-switch-header {
    display: flex !important;
    width: 78px !important;
    min-width: 78px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  .lang-switch-header button {
    min-width: 35px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  .nav-toggle {
    display: flex !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
  }

  .hero {
    min-height: auto !important;
    padding: 42px 0 38px !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(121, 184, 79, 0.1), transparent 30%),
      linear-gradient(180deg, #fffdf8 0%, #fbfaf4 100%) !important;
  }

  .hero::before {
    opacity: 0.45 !important;
    background-size: 44px 44px !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 22px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .japan-cue {
    display: block !important;
    margin-bottom: 28px !important;
    padding: 9px 14px !important;
    border-radius: 18px !important;
  }

  .japan-cue span {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .hero .eyebrow {
    margin-bottom: 20px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.16em !important;
  }

  .hero-jp-line {
    margin-bottom: 14px !important;
    font-size: clamp(21px, 6vw, 28px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.035em !important;
  }

  .hero h1 {
    max-width: 10.5ch !important;
    margin-bottom: 18px !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.065em !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 9.7em !important;
    font-size: clamp(35px, 10vw, 46px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-lede {
    font-size: 17px !important;
    line-height: 1.68 !important;
    font-weight: 740 !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }

  .hero-proof-line {
    display: block !important;
    margin-top: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }

  .hero-scope {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
  }

  .hero-scope::-webkit-scrollbar {
    display: none !important;
  }

  .hero-scope span {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 8px 11px !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
  }

  .hero-actions .button-secondary {
    display: none !important;
  }

  .hero-bridge-visual,
  .gtm-visual-old,
  .signal-row,
  .hero-company-proof {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 22px !important;
  }

  .focus-strip {
    margin: 0 !important;
    padding: 0 18px 46px !important;
    overflow: visible !important;
  }

  .focus-strip > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 22px !important;
  }

  .focus-strip span {
    min-height: 96px !important;
    padding: 18px 16px !important;
    border-right: 1px solid rgba(18, 40, 75, 0.09) !important;
    border-bottom: 1px solid rgba(18, 40, 75, 0.09) !important;
  }

  .focus-strip b,
  html[lang="ja"] .focus-strip b {
    font-size: clamp(25px, 8vw, 34px) !important;
    white-space: normal !important;
  }

  .focus-strip small,
  html[lang="ja"] .focus-strip small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 16px !important;
  }

  .brand-mark-old {
    width: min(174px, calc(100vw - 168px)) !important;
    min-width: 128px !important;
  }

  .hero-grid {
    padding-inline: 20px !important;
  }

  .japan-cue {
    padding: 8px 12px !important;
  }

  .hero h1 {
    max-width: 11ch !important;
    font-size: clamp(38px, 11.1vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 10em !important;
    font-size: clamp(32px, 9.1vw, 39px) !important;
  }
}

/* 2026-06-17: modern4 conversion-grade composition */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  background: #fbfaf4 !important;
}

.site-header {
  border-bottom: 1px solid rgba(24, 35, 54, 0.08) !important;
  box-shadow: 0 18px 42px rgba(20, 34, 59, 0.06) !important;
}

.brand-mark-old {
  image-rendering: auto !important;
}

.hero {
  min-height: calc(100vh - 92px) !important;
  padding: clamp(74px, 7vw, 104px) 0 clamp(58px, 7vw, 88px) !important;
  background:
    radial-gradient(circle at 79% 23%, rgba(126, 186, 82, 0.15), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(188, 58, 46, 0.07), transparent 23%),
    linear-gradient(90deg, #fffdf7 0%, #fffdf7 51%, #f4faef 51%, #fffaf1 100%) !important;
}

.hero::before {
  opacity: 0.22 !important;
  background-size: 50px 50px !important;
}

.hero-grid {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.78fr) !important;
  gap: clamp(54px, 6vw, 96px) !important;
  align-items: center !important;
  padding: 0 clamp(36px, 5.5vw, 78px) !important;
}

.hero-copy {
  max-width: 660px !important;
}

.hero .eyebrow {
  margin-bottom: 22px !important;
  color: #a74336 !important;
  letter-spacing: 0.24em !important;
}

.japan-cue {
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: clamp(34px, 4.2vw, 54px) !important;
  padding: 12px 24px !important;
  border: 1px solid rgba(126, 186, 82, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 18px 46px rgba(21, 48, 84, 0.08) !important;
}

.japan-cue span {
  white-space: normal !important;
  color: #17315a !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

.hero-jp-line {
  max-width: 620px !important;
  margin-bottom: 16px !important;
  color: #1d3c6c !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
}

.hero h1 {
  max-width: 700px !important;
  margin-bottom: 22px !important;
  color: #101723 !important;
  font-size: clamp(62px, 5.3vw, 90px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.062em !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  max-width: 8.8em !important;
  font-size: clamp(54px, 4.6vw, 76px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance !important;
}

.hero-lede,
.hero-proof-line {
  max-width: 650px !important;
  color: #536070 !important;
  font-size: 18px !important;
  line-height: 1.76 !important;
  font-weight: 680 !important;
}

.hero-proof-line {
  margin-top: 12px !important;
}

.hero-scope {
  max-width: 680px !important;
  gap: 10px 12px !important;
  margin-top: 28px !important;
}

.hero-scope span {
  border-color: rgba(20, 45, 82, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #17315a !important;
  box-shadow: 0 14px 32px rgba(21, 48, 84, 0.06) !important;
}

.hero-actions {
  margin-top: 32px !important;
  gap: 14px !important;
}

.hero-actions .button-primary {
  background: #19345e !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px rgba(25, 52, 94, 0.18) !important;
}

.hero-actions .button-secondary {
  background: rgba(255, 255, 255, 0.76) !important;
  color: #19345e !important;
}

.hero-bridge-visual {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 520px !important;
  min-height: 0 !important;
  margin-left: auto !important;
}

.bridge-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: clamp(370px, 35vw, 455px) !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  background:
    radial-gradient(circle at 76% 25%, rgba(185, 61, 49, 0.2), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 244, 0.92)) !important;
  box-shadow: 0 28px 68px rgba(20, 35, 64, 0.12) !important;
}

.bridge-grid {
  opacity: 0.55 !important;
}

.bridge-motion {
  left: 8% !important;
  right: auto !important;
  bottom: 70px !important;
  width: 84% !important;
  height: 74% !important;
  opacity: 0.92 !important;
}

.route-label {
  top: 132px !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  box-shadow: 0 14px 26px rgba(20, 35, 64, 0.09) !important;
}

.route-label-global {
  left: 56px !important;
}

.route-label-japan {
  right: 48px !important;
}

.bridge-note {
  left: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  padding: 21px 24px !important;
  border-left: 5px solid #a74336 !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 40px rgba(20, 35, 64, 0.1) !important;
}

.hero-proof-card {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 118px !important;
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(126, 186, 82, 0.28) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 24px 54px rgba(20, 35, 64, 0.1) !important;
}

.hero-proof-card img {
  width: 100% !important;
  height: 100% !important;
  min-height: 118px !important;
  object-fit: cover !important;
}

.hero-proof-card figcaption {
  align-self: center !important;
  padding: 20px 22px !important;
}

.focus-strip {
  margin-top: -1px !important;
  padding-bottom: clamp(72px, 8vw, 110px) !important;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.02), #fffdf7 78%) !important;
}

.focus-strip > div {
  box-shadow: 0 20px 60px rgba(20, 35, 64, 0.08) !important;
}

.section-pad {
  padding-top: clamp(78px, 8vw, 120px) !important;
  padding-bottom: clamp(78px, 8vw, 120px) !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(390px, 0.82fr) !important;
    gap: 46px !important;
  }

  .hero h1 {
    font-size: clamp(58px, 5.4vw, 78px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(50px, 5vw, 66px) !important;
  }
}

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-bridge-visual {
    max-width: 100% !important;
    margin: 20px 0 0 !important;
  }
}

@media (max-width: 860px) {
  .color-strip {
    height: 7px !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    min-height: 74px !important;
    padding: 11px 16px !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .brand-mark-old {
    width: min(178px, calc(100vw - 174px)) !important;
    min-width: 132px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .lang-switch-header {
    width: 76px !important;
    min-width: 76px !important;
    height: 38px !important;
  }

  .lang-switch-header button {
    min-width: 34px !important;
    height: 32px !important;
  }

  .nav-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 42px 0 46px !important;
    background:
      radial-gradient(circle at 95% 4%, rgba(126, 186, 82, 0.12), transparent 28%),
      linear-gradient(180deg, #fffdf7 0%, #fbfaf3 100%) !important;
  }

  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    gap: 0 !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.2em !important;
  }

  .hero .eyebrow::before {
    flex: 0 0 44px !important;
  }

  .japan-cue {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 34px !important;
    padding: 13px 18px !important;
    border-radius: 22px !important;
  }

  .japan-cue span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .hero-jp-line {
    max-width: 100% !important;
    margin-bottom: 14px !important;
    font-size: 24px !important;
    line-height: 1.38 !important;
    letter-spacing: -0.03em !important;
    text-wrap: pretty !important;
  }

  .hero h1 {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    font-size: clamp(43px, 11.6vw, 54px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.058em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 9.6vw, 46px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.04em !important;
  }

  .hero-lede,
  .hero-proof-line,
  html[lang="ja"] .hero-lede {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.74 !important;
    font-weight: 660 !important;
  }

  .hero-proof-line {
    margin-top: 14px !important;
  }

  .hero-scope {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    max-width: 100% !important;
    margin-top: 22px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hero-scope span {
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hero-actions {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }

  .hero-actions .button-primary {
    display: flex !important;
  }

  .hero-actions .button-secondary {
    display: none !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 26px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(24, 35, 54, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 22px 50px rgba(20, 35, 64, 0.12) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hero-mobile-proof figcaption {
    padding: 13px 16px 15px !important;
    color: #19345e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 18px 54px !important;
  }

  .focus-strip > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 14px !important;
  }

  .brand-mark-old {
    width: min(164px, calc(100vw - 164px)) !important;
    min-width: 124px !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }

  .japan-cue {
    padding: 12px 16px !important;
  }

  .japan-cue span {
    font-size: 14px !important;
  }

  .hero-jp-line {
    font-size: 22px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 10.7vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(35px, 9.1vw, 40px) !important;
  }
}

/* 2026-06-17 modern7: final professional polish */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  background: #fbfaf5 !important;
}

* {
  box-sizing: border-box !important;
}

main,
.hero,
.section-pad,
.site-header,
.focus-strip,
.network-grid,
.pain-panel {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.site-header {
  min-height: 92px !important;
  padding: 18px clamp(28px, 7vw, 112px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) 1fr auto auto !important;
  gap: 24px !important;
  align-items: center !important;
  background: rgba(255, 253, 248, 0.96) !important;
  border-bottom: 1px solid rgba(20, 30, 44, 0.08) !important;
  box-shadow: 0 16px 36px rgba(26, 39, 64, 0.05) !important;
}

.brand-lockup-combo small {
  display: none !important;
}

.brand-mark-old {
  width: 220px !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  image-rendering: auto !important;
}

.site-nav {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 42px) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

.site-nav a {
  color: #111b2a !important;
  text-decoration: none !important;
}

@media (min-width: 861px) {
  .lang-switch-header {
    display: flex !important;
  }

  .site-nav .lang-switch {
    display: none !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

.hero {
  padding: clamp(72px, 7vw, 112px) 0 clamp(64px, 7vw, 104px) !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(132, 191, 86, 0.13), transparent 35%),
    linear-gradient(90deg, #fffdf8 0 52%, #f4faef 52% 100%) !important;
}

.hero-grid {
  width: min(1460px, calc(100% - 120px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(430px, 0.82fr) !important;
  gap: clamp(64px, 7vw, 112px) !important;
  align-items: center !important;
}

.hero-copy {
  max-width: 740px !important;
  padding: 0 !important;
}

.hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
  color: #a43a2f !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  font-weight: 900 !important;
}

.hero .eyebrow::before {
  content: "" !important;
  width: 44px !important;
  height: 1px !important;
  background: #a43a2f !important;
  flex: 0 0 auto !important;
}

.japan-cue {
  display: inline-flex !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.japan-cue span {
  padding: 13px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132, 191, 86, 0.38) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #19345e !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.hero-jp-line {
  font-size: clamp(24px, 1.9vw, 31px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.035em !important;
  color: #19345e !important;
  margin: 0 0 18px !important;
  max-width: 680px !important;
}

.hero h1 {
  font-size: clamp(58px, 5.1vw, 84px) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.06em !important;
  color: #101722 !important;
  margin: 0 !important;
  max-width: 760px !important;
  text-wrap: balance !important;
}

html[lang="ja"] .hero h1 {
  font-size: clamp(46px, 3.9vw, 68px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
}

.hero-title-line {
  display: block !important;
}

.hero-lede,
.hero-proof-line {
  font-size: 19px !important;
  line-height: 1.68 !important;
  font-weight: 680 !important;
  color: #536070 !important;
  max-width: 660px !important;
}

.hero-lede {
  margin-top: 28px !important;
}

.hero-proof-line {
  margin-top: 16px !important;
}

.hero-scope {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 26px !important;
  max-width: 680px !important;
  overflow: visible !important;
}

.hero-scope span {
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  color: #19345e !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

.hero-scope span::before {
  display: none !important;
}

.hero-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 34px !important;
}

.hero-actions .button,
.button {
  min-height: 56px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.hero-actions .button-primary,
.button-primary {
  background: #18345e !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(24, 52, 94, 0.2) !important;
}

.hero-actions .button-secondary,
.button-secondary {
  background: #fff !important;
  color: #18345e !important;
  border: 1px solid rgba(24, 35, 54, 0.14) !important;
}

.hero-bridge-visual {
  min-height: 600px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-bridge-visual .bridge-card {
  width: min(100%, 560px) !important;
  height: 490px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  background:
    linear-gradient(rgba(25, 52, 94, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 52, 94, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 75% 28%, rgba(176, 58, 46, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 246, 0.96)) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  box-shadow: 0 30px 80px rgba(31, 42, 55, 0.12) !important;
  overflow: hidden !important;
}

.hero-bridge-visual .hero-proof-card {
  position: absolute !important;
  left: max(0px, calc(50% - 280px)) !important;
  bottom: 10px !important;
  width: min(520px, 92%) !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 12px 18px 12px 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(24, 35, 54, 0.12) !important;
  box-shadow: 0 22px 54px rgba(31, 42, 55, 0.14) !important;
  transform: translateY(18%) !important;
}

.hero-bridge-visual .hero-proof-card img {
  width: 150px !important;
  height: 94px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

.hero-bridge-visual .hero-proof-card span {
  display: block !important;
  margin-bottom: 6px !important;
  color: #4b8b38 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.hero-bridge-visual .hero-proof-card strong {
  display: block !important;
  color: #18345e !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
  letter-spacing: -0.03em !important;
}

.hero-mobile-proof {
  display: none !important;
}

.focus-strip {
  padding: 0 clamp(28px, 7vw, 112px) 76px !important;
  background: #fbfaf5 !important;
}

.focus-strip > div {
  width: min(1280px, 100%) !important;
  margin: -38px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(24, 35, 54, 0.11) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 26px 70px rgba(31, 42, 55, 0.09) !important;
  overflow: hidden !important;
}

.focus-strip span {
  min-height: 132px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
  color: #18345e !important;
  font-size: 15px !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.focus-strip span:last-child {
  border-right: 0 !important;
}

.focus-strip strong,
.focus-strip b {
  display: block !important;
  margin-bottom: 5px !important;
  color: #4d8d38 !important;
  font-size: clamp(34px, 3.1vw, 52px) !important;
  line-height: 0.95 !important;
  font-weight: 920 !important;
  letter-spacing: -0.06em !important;
}

.section-pad {
  padding-left: clamp(28px, 7vw, 112px) !important;
  padding-right: clamp(28px, 7vw, 112px) !important;
}

.section-shell,
.services-shell,
.owned-section,
.company-proof,
.about-inner,
.contact-card {
  width: min(1280px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sales-service-grid,
.network-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.network-grid a {
  min-height: 430px !important;
  display: grid !important;
  grid-template-rows: 190px auto auto 1fr !important;
  padding: 0 0 28px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(24, 35, 54, 0.1) !important;
  box-shadow: 0 22px 54px rgba(31, 42, 55, 0.06) !important;
  text-align: left !important;
  text-decoration: none !important;
}

.network-grid img,
.network-grid a img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

.network-grid strong,
html[lang="ja"] .network-grid strong {
  padding: 26px 28px 0 !important;
  color: #172235 !important;
  font-size: 27px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
  text-align: left !important;
}

.network-grid span,
html[lang="ja"] .network-grid a span {
  padding: 14px 28px 0 !important;
  color: #4d8d38 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.2em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.network-grid p,
.network-grid a p {
  padding: 14px 28px 0 !important;
  color: #66717f !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
  text-align: left !important;
}

.pain-panel {
  background: linear-gradient(135deg, #17345e, #1f416d) !important;
  color: #fff !important;
}

.pain-panel .button,
.pain-panel .button-primary {
  background: #fff !important;
  color: #18345e !important;
  border: 0 !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    width: min(100% - 64px, 1120px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr) !important;
    gap: 44px !important;
  }

  .hero h1 {
    font-size: clamp(52px, 5.7vw, 72px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(43px, 4.8vw, 60px) !important;
  }

  .sales-service-grid,
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .color-strip {
    height: 9px !important;
  }

  .site-header {
    min-height: 78px !important;
    padding: 12px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .brand {
    min-width: 0 !important;
  }

  .brand-mark-old {
    width: min(176px, calc(100vw - 182px)) !important;
    min-width: 138px !important;
  }

  .site-nav {
    display: none !important;
  }

  .site-nav.is-open,
  .site-nav.open {
    display: grid !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 30 !important;
    padding: 18px !important;
    gap: 14px !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(24, 35, 54, 0.16) !important;
  }

  .lang-switch-header {
    display: flex !important;
  }

  .lang-switch button {
    min-width: 42px !important;
    min-height: 40px !important;
  }

  .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(24, 35, 54, 0.12) !important;
    background: #fff !important;
  }

  .hero {
    padding: 48px 0 58px !important;
    background: radial-gradient(circle at 96% 18%, rgba(132, 191, 86, 0.1), transparent 32%), #fffdf8 !important;
  }

  .hero-grid {
    width: 100% !important;
    padding: 0 24px !important;
    display: block !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero .eyebrow {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.2em !important;
  }

  .japan-cue {
    display: none !important;
  }

  .hero-jp-line {
    margin-top: 30px !important;
    margin-bottom: 14px !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.03em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(44px, 12.2vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
    text-wrap: balance !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(34px, 9.1vw, 40px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    font-weight: 680 !important;
  }

  .hero-lede {
    margin-top: 24px !important;
  }

  .hero-scope {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 22px !important;
    max-width: 100% !important;
  }

  .hero-scope span {
    white-space: normal !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .hero-actions .button {
    width: 100% !important;
  }

  .hero-bridge-visual {
    display: none !important;
  }

  .hero-mobile-proof {
    display: block !important;
    margin-top: 28px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24, 35, 54, 0.1) !important;
    background: #fff !important;
    box-shadow: 0 22px 52px rgba(24, 35, 54, 0.1) !important;
  }

  .hero-mobile-proof img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .hero-mobile-proof figcaption {
    padding: 14px 16px !important;
    color: #18345e !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .focus-strip {
    padding: 0 20px 54px !important;
  }

  .focus-strip > div {
    margin-top: 0 !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  .focus-strip span {
    min-height: 112px !important;
    padding: 18px !important;
    border-right: 1px solid rgba(24, 35, 54, 0.1) !important;
    border-bottom: 1px solid rgba(24, 35, 54, 0.1) !important;
    font-size: 13px !important;
  }

  .focus-strip strong,
  .focus-strip b {
    font-size: 34px !important;
  }

  .section-pad {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .sales-service-grid,
  .network-grid {
    grid-template-columns: 1fr !important;
  }

  .network-grid a {
    min-height: auto !important;
    grid-template-rows: 188px auto auto auto !important;
    border-radius: 22px !important;
  }

  .network-grid strong,
  html[lang="ja"] .network-grid strong {
    font-size: 24px !important;
    padding: 22px 22px 0 !important;
  }

  .network-grid span,
  html[lang="ja"] .network-grid a span,
  .network-grid p,
  .network-grid a p {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px !important;
  }

  .brand-mark-old {
    width: min(164px, calc(100vw - 174px)) !important;
  }

  .hero-grid {
    padding-inline: 22px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 11vw, 48px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(33px, 8.7vw, 39px) !important;
  }

  .hero-jp-line {
    font-size: 20px !important;
  }

  .hero-scope span {
    font-size: 11px !important;
  }
}