/* CARELO final responsive lock — 2026-08-11
   This file is intentionally loaded last. PC and SP rules are kept separate
   so mobile adjustments cannot change the desktop layout again. */

.sp-sticky-cta {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.arrow-button,
.arrow-button:hover,
.arrow-button:focus-visible,
.arrow-button:active {
  position: relative !important;
  overflow: hidden !important;
  transform: none !important;
}

.arrow-button:hover,
.arrow-button:focus-visible {
  filter: brightness(1.07) saturate(1.08) !important;
}

.arrow-button > i {
  display: none !important;
}

.arrow-button > span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  max-width: calc(100% - 88px) !important;
  white-space: nowrap !important;
  transform: translate(-50%, -50%) !important;
}

.arrow-button::after,
.arrow-button:hover::after,
.arrow-button:focus-visible::after,
.arrow-button:active::after {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #d34700 !important;
  box-shadow: 0 0 0 2px rgba(211, 71, 0, 0.2) inset !important;
  content: "\2192" !important;
  font-family: Arial, "Noto Sans JP", sans-serif !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

.arrow-button--white::after {
  color: #009583 !important;
  box-shadow: 0 0 0 2px #009583 inset !important;
}

/* Desktop/tablet: restore the pre-SP-fix FV CTA dimensions. */
@media (min-width: 768px) {
  .hero__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 20px !important;
    width: 500px !important;
    max-width: 500px !important;
    height: 58px !important;
  }

  .hero .arrow-button {
    width: 240px !important;
    max-width: 240px !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 8px 58px 8px 18px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .hero .arrow-button > span {
    max-width: calc(100% - 64px) !important;
    font-size: clamp(14px, 1.1vw, 16px) !important;
  }

  .hero .arrow-button::after {
    right: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 23px !important;
  }

  .flow-grid {
    left: 50% !important;
    width: min(1190px, calc(100% - 64px)) !important;
    max-width: 1190px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    transform: translateX(-50%) !important;
  }

  .flow-step h3,
  .flow-step p {
    width: min(168px, calc(100% - 24px)) !important;
  }
}

/* Phone: FV copy, merchant marquee and vertical flow. */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero h1 {
    top: 35% !important;
    line-height: 1.48 !important;
    letter-spacing: 0.005em !important;
  }

  .hero__actions {
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    transform: none !important;
  }

  .hero .arrow-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 58px 0 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .hero .arrow-button > span {
    max-width: calc(100% - 72px) !important;
    font-size: 14px !important;
  }

  .arrow-button::after,
  .hero .arrow-button::after,
  .mid-cta .arrow-button::after {
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 23px !important;
  }

  .merchant-marquee--mobile {
    display: grid !important;
    grid-template-rows: repeat(2, 74px) !important;
    gap: 12px !important;
    width: 100% !important;
    height: 160px !important;
    --merchant-gap: 12px !important;
    --merchant-logo-width: calc((100vw - 48px) / 3) !important;
    --merchant-logo-height: 74px !important;
    --merchant-image-width: calc(var(--merchant-logo-width) - 26px) !important;
    --merchant-image-height: 48px !important;
  }

  .merchant-marquee--mobile .merchant-row {
    height: 74px !important;
  }

  .merchant-marquee--mobile .merchant-set {
    gap: 12px !important;
    padding-right: 12px !important;
  }

  .flow {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 44px 20px 56px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .flow > h2,
  .flow > p,
  .flow-grid {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .flow-grid {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 50px !important;
    border-top: 0 !important;
    background: linear-gradient(#b8ded8, #b8ded8) 32px 20px / 2px calc(100% - 40px) no-repeat !important;
  }

  .flow-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 64px 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 12px !important;
    min-height: 142px !important;
    height: auto !important;
    padding: 28px 0 22px !important;
    border-top: 2px solid #b8ded8 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .flow-step::before {
    left: 21px !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    transform: translateY(-50%) !important;
  }

  .flow-step > span {
    position: absolute !important;
    left: 32px !important;
    top: -30px !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transform: translateX(-50%) !important;
  }

  .flow-step > img {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
  }

  .flow-step h3 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .flow-step p {
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .form-shell--embedded .form-consent {
    margin-top: 12px !important;
    font-size: 11px !important;
    line-height: 1.7 !important;
  }
}

/* Keep one CTA affordance only. The base stylesheet already draws the arrow
   inside the real <i> element; the temporary pseudo-element duplicated it. */
.arrow-button > i {
  display: block !important;
}

.arrow-button::after,
.arrow-button:hover::after,
.arrow-button:focus-visible::after,
.arrow-button:active::after {
  display: none !important;
  content: none !important;
}

/* Phone-only flow safeguard: remove the horizontal dividers and keep every
   Japanese label inside the available column on narrow devices. */
@media (max-width: 767px) {
  .flow .flow-step {
    min-height: 136px !important;
    padding-block: 22px !important;
    border-top: 0 !important;
  }

  .flow .flow-step > span {
    top: 12px !important;
  }

  .flow .flow-step h3,
  .flow .flow-step p {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 359px) {
  .flow .flow-step {
    grid-template-columns: 48px 42px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  .flow .flow-step::before {
    left: 13px !important;
  }

  .flow .flow-step > span {
    left: 24px !important;
  }

  .flow .flow-step > img {
    width: 38px !important;
    height: 38px !important;
  }

  .flow .flow-step h3 {
    font-size: 17px !important;
  }
}

/* FV CTA icon lock. Scoped to the hero so mid-page CTAs keep their own scale. */
@media (min-width: 768px) {
  .hero .arrow-button > i {
    right: 12px !important;
    top: 50% !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    transform: translateY(-50%) !important;
  }

  .hero .arrow-button > span {
    max-width: calc(100% - 84px) !important;
  }
}

@media (max-width: 767px) {
  .hero .arrow-button > i {
    right: 10px !important;
    top: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    transform: translateY(-50%) !important;
  }

  .flow .flow-step::before {
    left: 25px !important;
    width: 14px !important;
    height: 14px !important;
  }

  .mid-cta .arrow-button > span,
  .mid-cta--2 .arrow-button > span,
  .mid-cta--3 .arrow-button > span {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

@media (min-width: 768px) {
  .mid-cta .arrow-button > span,
  .mid-cta--2 .arrow-button > span,
  .mid-cta--3 .arrow-button > span {
    max-width: calc(100% - 112px) !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

/* Figma FV replacement — CARELO_LP_FV, PC 97:2 / SP 113:64 */
.figma-site-header.figma-site-header {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  height: min(96px, 7.0278vw) !important;
  border: 0 !important;
  background: #fff !important;
  overflow: visible !important;
}

.figma-site-header .figma-site-header__inner {
  position: relative !important;
  display: block !important;
  width: min(1366px, 100%) !important;
  height: 100% !important;
  margin: 0 auto !important;
  background: #fff !important;
  overflow: visible !important;
}

.figma-site-header .figma-site-header__inner::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(2px, 0.1464vw);
  background: #b9dcd5;
  content: "";
}

.figma-site-header .header-logo {
  position: absolute !important;
  left: 4.0996% !important;
  top: 28.125% !important;
  z-index: 2 !important;
  display: block !important;
  width: 10.2489% !important;
  height: 39.5833% !important;
  padding: 0 !important;
}

.figma-site-header .header-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.figma-site-header .figma-site-header__inner > nav {
  position: absolute !important;
  left: 38.0673% !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: 27.45% 33.77% 38.78% !important;
  align-items: center !important;
  width: 33.6749% !important;
  height: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  border-left: 1px solid #b9dcd5 !important;
}

.figma-site-header .figma-site-header__inner > nav a {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  color: #102a27 !important;
  font-family: var(--font-main) !important;
  font-size: clamp(11px, 1.025vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.figma-site-header .header-actions {
  position: absolute !important;
  left: 71.8155% !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: 49.35% 50.65% !important;
  width: 28.1845% !important;
  height: 100% !important;
}

.figma-site-header .header-download,
.figma-site-header .header-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--font-main) !important;
  font-size: clamp(11px, 1.098vw, 15px) !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.figma-site-header .header-download {
  border: 1px solid #b9dcd5 !important;
  border-bottom: 0 !important;
  color: #008f82 !important;
  background: #fff !important;
}

.figma-site-header .header-contact {
  color: #fff !important;
  background: #f26a21 !important;
}

.figma-site-header .header-contact span {
  margin-left: 5px !important;
}

.hero.hero,
.hero .hero__stage {
  min-height: 0 !important;
}

.hero.hero {
  position: relative !important;
  width: 100% !important;
  height: min(655px, 47.9502vw) !important;
  overflow: hidden !important;
  background: #fbfefc !important;
}

.hero .hero__stage {
  position: relative !important;
  display: block !important;
  width: min(1366px, 100%) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fbfefc !important;
}

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

.hero .hero__employee-zone,
.hero .hero__message-zone,
.hero .hero__product-zone,
.hero .hero__person-top,
.hero .hero__person-bottom,
.hero .hero__benefits,
.hero .hero__headline,
.hero .hero__brand,
.hero .hero__dashboard,
.hero .hero__phone,
.hero img.hero__card,
.hero .hero__authority {
  position: absolute !important;
  margin: 0 !important;
}

.hero .hero__employee-zone {
  left: -4.47% !important;
  top: -20% !important;
  width: 34.46% !important;
  height: 126.11% !important;
  background: #ddf2ec !important;
  opacity: 0.96 !important;
  transform: rotate(-0.31deg) !important;
  transform-origin: center !important;
}

.hero .hero__message-zone {
  left: 26.06% !important;
  top: -14.2% !important;
  width: 40.05% !important;
  height: 120.79% !important;
  background: rgba(255, 255, 255, 0.78) !important;
  transform: rotate(-0.15deg) !important;
  transform-origin: center !important;
}

.hero .hero__product-zone {
  left: 73.08% !important;
  top: -17.1% !important;
  width: 30.92% !important;
  height: 131.3% !important;
  background: #e5f5f0 !important;
  opacity: 0.98 !important;
  transform: rotate(8deg) !important;
  transform-origin: center !important;
}

.hero .hero__person-top {
  left: 2.4158% !important;
  top: 9.0076% !important;
  width: 21.0835% !important;
  height: 27.0229% !important;
  overflow: hidden !important;
  border-radius: clamp(7px, 0.879vw, 12px) !important;
  box-shadow: 0 8px 18px rgba(5, 36, 31, 0.08) !important;
}

.hero .hero__person-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero .hero__person-bottom {
  left: 0.9517% !important;
  top: 41.5267% !important;
  width: 22.7672% !important;
  height: 47.6336% !important;
  overflow: hidden !important;
  border-radius: clamp(7px, 0.879vw, 12px) !important;
  box-shadow: 0 4px 4px rgba(5, 36, 31, 0.54) !important;
}

.hero .hero__person-bottom img {
  position: absolute !important;
  left: -40.8% !important;
  top: -0.07% !important;
  width: 186.39% !important;
  max-width: none !important;
  height: 104.76% !important;
  object-fit: fill !important;
}

.hero .hero__benefits {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero .hero__benefit {
  position: absolute !important;
  left: 27.8917% !important;
  display: flex !important;
  align-items: center !important;
  width: 31.918% !important;
  height: 9.1603% !important;
  margin: 0 !important;
  padding: 0 2% 0 4.76% !important;
  border: 1px solid rgba(5, 153, 135, 0.48) !important;
  border-radius: clamp(5px, 0.586vw, 8px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 5px 6px rgba(5, 36, 31, 0.05) !important;
  color: #123c36 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(11px, 1.4641vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hero .hero__benefit:first-child {
  top: 12.0611% !important;
}

.hero .hero__benefit:nth-child(2) {
  top: 23.9695% !important;
}

.hero .hero__benefit img {
  position: absolute !important;
  left: 3.21% !important;
  top: 5% !important;
  width: 8.7156% !important;
  height: 85% !important;
  object-fit: cover !important;
}

.hero .hero__benefit span {
  display: block !important;
}

.hero .hero__headline {
  left: 28.6237% !important;
  top: 38.4733% !important;
  z-index: 2 !important;
  display: block !important;
  width: 35.1391% !important;
  max-width: none !important;
  color: #01433a !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3.1479vw, 43px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.4651 !important;
  text-align: left !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  filter: none !important;
  white-space: nowrap !important;
  transform: none !important;
}

.hero .hero__headline span {
  display: block !important;
}

.hero .hero__brand {
  left: 22.9868% !important;
  top: 59.2366% !important;
  width: 30.5271% !important;
  height: 16.3359% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.hero .hero__dashboard {
  left: 61.2006% !important;
  top: 14.1985% !important;
  width: 37.6281% !important;
  height: 49.1603% !important;
  max-width: none !important;
  object-fit: contain !important;
}

.hero .hero__phone {
  left: 85.6515% !important;
  top: 43.5115% !important;
  width: 9.224% !important;
  height: 43.3588% !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: rotate(-1.2deg) !important;
}

.hero img.hero__card {
  left: 67.0571% !important;
  top: 68.8473% !important;
  z-index: 2 !important;
  display: block !important;
  width: 15.0805% !important;
  height: 23.2372% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  filter: none !important;
  box-shadow: 0 14px 24px rgba(5, 36, 31, 0.12) !important;
  transform: rotate(2.2deg) !important;
}

.hero .hero__authority {
  left: 33.0161% !important;
  top: 79.8473% !important;
  z-index: 3 !important;
  width: 24.0849% !important;
  height: 9.313% !important;
}

.hero .hero__authority span {
  position: absolute !important;
  top: 0 !important;
  display: block !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hero .hero__authority span:nth-child(1) { left: 0 !important; width: 21.5805% !important; }
.hero .hero__authority span:nth-child(2) { left: 27.0517% !important; width: 21.8845% !important; }
.hero .hero__authority span:nth-child(3) { left: 55.6231% !important; width: 21.8845% !important; }
.hero .hero__authority span:nth-child(4) { left: 82.3708% !important; width: 17.6292% !important; }

.hero .hero__authority img {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  max-width: none !important;
}

.hero .hero__authority span:nth-child(1) img { left: 2.36% !important; width: 386.19% !important; }
.hero .hero__authority span:nth-child(2) img { left: -99.92% !important; width: 377.61% !important; }
.hero .hero__authority span:nth-child(3) img { left: -202.16% !important; width: 381.85% !important; }
.hero .hero__authority span:nth-child(4) img { left: -374.9% !important; width: 472.01% !important; }

.hero .hero__mobile-wash {
  display: none !important;
}

@media (min-width: 768px) {
  .figma-site-header .mobile-navigation {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .figma-site-header.figma-site-header {
    height: min(64px, 16.4103vw) !important;
  }

  .figma-site-header .figma-site-header__inner {
    width: min(390px, 100%) !important;
    height: 100% !important;
  }

  .figma-site-header .figma-site-header__inner::after {
    height: 1px !important;
    background: #b9dcd5 !important;
  }

  .figma-site-header .header-logo {
    left: 6.1538% !important;
    top: 28.125% !important;
    width: 30.7692% !important;
    height: 51.5625% !important;
  }

  .figma-site-header .figma-site-header__inner > nav,
  .figma-site-header .header-actions {
    display: none !important;
  }

  .figma-site-header .mobile-navigation {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
  }

  .figma-site-header .mobile-navigation > summary {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 4 !important;
    display: block !important;
    width: 78px !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  .figma-site-header .mobile-navigation__icon {
    position: absolute !important;
    right: 26px !important;
    top: 35.9375% !important;
    display: block !important;
    width: 26px !important;
    height: 18px !important;
  }

  .figma-site-header .mobile-navigation__icon i {
    position: absolute !important;
    left: 0 !important;
    display: block !important;
    width: 26px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #00695d !important;
  }

  .figma-site-header .mobile-navigation__icon i:nth-child(1) { top: 0 !important; }
  .figma-site-header .mobile-navigation__icon i:nth-child(2) { top: 8px !important; }
  .figma-site-header .mobile-navigation__icon i:nth-child(3) { top: 16px !important; }

  .figma-site-header .mobile-navigation[open] .mobile-navigation__icon i:nth-child(1) {
    top: 8px !important;
    transform: rotate(45deg) !important;
  }

  .figma-site-header .mobile-navigation[open] .mobile-navigation__icon i:nth-child(2) {
    opacity: 0 !important;
  }

  .figma-site-header .mobile-navigation[open] .mobile-navigation__icon i:nth-child(3) {
    top: 8px !important;
    transform: rotate(-45deg) !important;
  }

  .hero.hero {
    width: 100% !important;
    height: min(836px, 214.359vw) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .hero .hero__stage {
    width: min(390px, 100%) !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 390 / 836 !important;
    margin-inline: auto !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .hero .hero__employee-zone,
  .hero .hero__message-zone,
  .hero .hero__product-zone,
  .hero .hero__person-top,
  .hero .hero__person-bottom,
  .hero .hero__dashboard {
    display: none !important;
  }

  .hero .hero__mobile-wash {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  .hero .hero__mobile-wash i {
    display: block !important;
    flex: none !important;
    opacity: 0.98 !important;
    transform: rotate(82.71deg) !important;
  }

  .hero .hero__mobile-wash--upper {
    left: -56.1538% !important;
    top: -13.8756% !important;
    width: 258.4846% !important;
    height: 123.0211% !important;
  }

  .hero .hero__mobile-wash--upper i {
    width: 236.4028% !important;
    height: 87.3575% !important;
    background: linear-gradient(-9.0323deg, rgba(229,245,240,.71) 3.1846%, rgba(255,255,255,.71) 95.223%) !important;
  }

  .hero .hero__mobile-wash--lower {
    left: -51.1769% !important;
    top: 34.8086% !important;
    width: 237.9521% !important;
    height: 48.0951% !important;
  }

  .hero .hero__mobile-wash--lower i {
    width: 31.3021% !important;
    height: 223.4405% !important;
    background: linear-gradient(-26.7717deg, rgba(229,245,240,.71) 3.1846%, rgba(255,255,255,.71) 95.223%) !important;
  }

  .hero .hero__benefits {
    inset: 0 !important;
  }

  .hero .hero__benefit {
    left: 6.1538% !important;
    width: 83.8462% !important;
    height: 5.7416% !important;
    padding: 0 2% 0 16.15% !important;
    border-color: #69c4b5 !important;
    border-radius: clamp(5px, 1.5385vw, 6px) !important;
    box-shadow: none !important;
    color: #004f43 !important;
    font-size: clamp(12px, 3.8462vw, 15px) !important;
    line-height: normal !important;
  }

  .hero .hero__benefit:first-child {
    top: 5.1435% !important;
  }

  .hero .hero__benefit:nth-child(2) {
    top: 12.0813% !important;
    font-size: clamp(11.5px, 3.5897vw, 14px) !important;
  }

  .hero .hero__benefit img {
    left: 6.422% !important;
    top: 10.4167% !important;
    width: 8.5627% !important;
    height: 77.0833% !important;
  }

  .hero .hero__headline {
    left: 0 !important;
    top: 21.2919% !important;
    width: 100% !important;
    max-width: none !important;
    color: #004f43 !important;
    font-size: clamp(24px, 7.6923vw, 30px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .hero .hero__headline span + span {
    margin-top: 0.7% !important;
  }

  .hero .hero__headline span {
    width: 100% !important;
    text-align: left !important;
  }

  .hero .hero__headline span:first-child {
    padding-left: 17.9487% !important;
  }

  .hero .hero__headline span:nth-child(2) {
    padding-left: 8.4615% !important;
  }

  .hero .hero__brand {
    left: -0.2564% !important;
    top: 32.2967% !important;
    width: 90.2564% !important;
    height: 10.7656% !important;
  }

  .hero .hero__phone {
    left: 51.5385% !important;
    top: 43.0622% !important;
    width: 32.5% !important;
    height: 33.1339% !important;
    transform: rotate(-1deg) !important;
  }

  .hero img.hero__card {
    left: 10% !important;
    top: 56.1005% !important;
    width: 44.78% !important;
    height: 15.43% !important;
    box-shadow: 0 12px 22px rgba(5, 36, 31, 0.11) !important;
    transform: rotate(2deg) !important;
  }

  .hero .hero__authority {
    left: 7.6923% !important;
    top: 82.5359% !important;
    width: 84.359% !important;
    height: 7.2967% !important;
  }
}

@media (min-width: 768px) {
  .figma-site-header > .figma-site-header__inner > .header-actions {
    display: grid !important;
  }

  .figma-site-header > .figma-site-header__inner > nav[aria-label="ページ内ナビゲーション"] {
    display: block !important;
  }

  .figma-site-header > .figma-site-header__inner > nav[aria-label="ページ内ナビゲーション"] > a {
    position: absolute !important;
    top: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 25.6522% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .figma-site-header > .figma-site-header__inner > nav[aria-label="ページ内ナビゲーション"] > a:nth-child(1) {
    left: 9.7826% !important;
  }

  .figma-site-header > .figma-site-header__inner > nav[aria-label="ページ内ナビゲーション"] > a:nth-child(2) {
    left: 36.9565% !important;
  }

  .figma-site-header > .figma-site-header__inner > nav[aria-label="ページ内ナビゲーション"] > a:nth-child(3) {
    left: 70.6522% !important;
  }
}

/* 2026-09-07: visually center the six flow items inside their equal columns.
   The timeline itself was mathematically centered, but the 168px item blocks
   were anchored to the left edge of each 198px track. */
@media (min-width: 768px) {
  .flow-grid > .flow-step {
    width: min(168px, calc(100% - 24px)) !important;
    justify-self: center !important;
  }

  .flow-grid > .flow-step h3,
  .flow-grid > .flow-step p {
    width: 100% !important;
  }
}

/* Keep the Figma card artwork seated on the FV plane. The asset already
   contains its own dimensional treatment, so an extra shadow/rotation made it
   appear detached from the background. */
.hero img.hero__card {
  box-shadow: none !important;
  transform: none !important;
}