/* Top-page first view; the shared navigation remains available via the menu. */
.fv-nav { display: none; }

#top #p-business { margin-bottom: 140px; }
#top #p-contact { position: relative; z-index: 3; margin-bottom: 140px; }
@media (min-width: 751px) {
  #top #p-contact .c-download__inner { gap: 80px; }
  #top #p-contact .c-download-illust { margin-left: 0; flex-shrink: 0; }
}
#top .contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 56px 48px;
  border-radius: 24px;
  background: #fabf02;
  color: #171b1d;
  box-shadow: 0 12px 32px rgba(111, 80, 0, .1);
}
.contact-card__title { margin: 0; }
.contact-card__en {
  display: block;
  font-family: Lato, Arial, sans-serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.2;
}
.contact-card__jp { display: block; margin-top: 10px; font-size: 20px; font-weight: 700; }
.contact-card__lead { margin-top: 20px; font-size: 16px; line-height: 1.9; }
.contact-card__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 72px;
  padding: 20px 24px;
  border: 0;
  border-radius: 12px;
  background: #171b1d;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.contact-card__button:disabled { opacity: 1; cursor: default; }
.contact-card__button svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 750px) {
  #top #p-business { margin-bottom: 64px; }
  #top #p-contact { margin-bottom: 80px; }
  #top .contact-card { flex-direction: column; align-items: stretch; gap: 28px; padding: 32px 24px; border-radius: 18px; }
  .contact-card__lead { font-size: 14px; }
  .contact-card__button { width: 100%; min-height: 64px; padding: 16px 12px; gap: 10px; font-size: 14px; }
}

#top #p-business-illust .p-illust { position: relative; }
#top #p-business-illust .p-illust > img { display: block; width: 100%; height: auto; }
#top #p-business-illust .recruit-lp-placeholder {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 44%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: .04em;
}
@media (min-width: 751px) {
  #top #p-business .p-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
  }
  #top #p-business-illust {
    position: relative;
    width: 100%;
    top: auto;
    right: auto;
  }
}
@media (max-width: 750px) {
  #top #p-business-illust {
    width: 100%;
    left: auto;
    padding-top: 32px;
    margin-bottom: 32px;
  }
}

#top #p-networks .p-section__inner { display: block; }
#top #p-networks .p-section-title-textbox .en {
  font-size: clamp(40px, 7vw, 112px);
}
#top #p-networks .company-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: 40px;
  align-items: stretch;
}
#top #p-networks .company-map { min-width: 0; min-height: 400px; }
#top #p-networks .company-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}
#top #p-networks .company-profile {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-top: 1px solid rgba(23, 27, 29, .2);
}
#top #p-networks .company-profile__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(23, 27, 29, .2);
  font-size: 16px;
  line-height: 1.9;
}
.company-profile dt { font-weight: 700; }
.company-profile dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 750px) {
  #top #p-networks .company-layout { grid-template-columns: 1fr; gap: 28px; }
  #top #p-networks .company-map,
  #top #p-networks .company-map iframe { min-height: 320px; }
  #top #p-networks .company-profile__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
    font-size: 14px;
  }
}

@media (min-width: 751px) {
  #top .fv-nav {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 29.54%;
    background: #fabf02;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fv-nav__list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3vh, 32px);
    margin: 0;
    padding: clamp(32px, 8vh, 88px) clamp(18px, 2vw, 40px);
    list-style: none;
  }
  .fv-nav__list li { margin: 0; }
  .fv-nav__list a,
  .fv-nav__pending {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: clamp(10px, 1.1vw, 22px);
    row-gap: 6px;
    padding: 16px 0;
    color: #fff;
    font-family: inherit;
    font-size: clamp(18px, 1.65vw, 30px);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .fv-nav__list .en {
    font-family: Lato, Arial, sans-serif;
    font-size: clamp(23px, 2.8vw, 48px);
    font-weight: 900;
    letter-spacing: .025em;
    line-height: 1.3;
  }
  .fv-nav__list .jp {
    font-size: clamp(10px, .78vw, 14px);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .fv-nav__list a { transition: opacity .2s; }
  .fv-nav__list a:hover { opacity: .75; }
  .fv-nav__list a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

  #top #l-kv:not(.is-start) #l-kv-contents__inner { top: 0; }
  #top #l-kv:not(.is-start) { overflow: hidden; }
  #top #l-kv.is-start .fv-nav { visibility: hidden; }
  #top:has(#l-kv:not(.is-start)) #p-top-kv-sns,
  #top:has(#l-kv:not(.is-start)) #c-scrolldown { visibility: hidden; }
  #top:has(#l-kv:not(.is-start)) #l-header-trigger__inner {
    width: 50px;
    height: 50px;
    transform: scale(.72);
    transform-origin: top left;
  }
  #top:has(#l-kv:not(.is-start)) #c-sidebtn {
    top: 80px;
    transform: scale(.7);
    transform-origin: right center;
  }
}

#top #l-kv-contents { visibility: hidden !important; pointer-events: none; }
#top .care-hero { position: absolute; inset: 70px 24px 54px; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
#top .care-hero img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 750px) { #top .care-hero { inset: 80px 12px 44px; } }

/* Slightly enlarge the care illustration within the hero. */
#top .care-hero img { transform: scale(1.12); }
#top .care-hero { overflow: hidden; }

/* Independent decorative layer above the hero artwork. */
#top .care-float-layer {
  position: absolute;
  inset: 80px 24px 60px;
  z-index: 4;
  pointer-events: none;
}
.care-float { position: absolute; width: clamp(48px, 5vw, 76px); height: auto; filter: drop-shadow(0 5px 9px rgba(255, 131, 40, .12)); animation: care-float-drift 6s ease-in-out infinite; }
.care-float--heart { top: 9%; left: 14%; }
.care-float--home { top: 15%; right: 7%; animation-duration: 7.5s; animation-delay: -2s; }
.care-float--leaf { bottom: 8%; left: 36%; animation-duration: 8s; animation-delay: -4s; }
@keyframes care-float-drift { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }

@media (max-width: 750px) {
  #top .care-float-layer { inset: 94px 16px 56px; }
  .care-float { width: 44px; }
  .care-float--heart { top: 22%; left: 4%; }
  .care-float--home { top: 26%; right: 3%; }
  .care-float--leaf { bottom: 23%; left: 24%; }
}
@media (prefers-reduced-motion: reduce) { .care-float { animation: none; } }

/* The hero scrolls away instead of following the next section. */
#top #l-kv { position: absolute !important; top: 0 !important; height: 100svh !important; overflow: hidden; }
#top #p-about .p-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 56px; }
#top #p-about .p-section-content { width: 100%; }
#top .about-care-visual { margin: 0; width: 100%; }
#top .about-care-visual img { display: block; width: 100%; height: auto; }
@media (max-width: 750px) {
 #top #p-about .p-section__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* The following sections slide over the stationary hero. */
#top #l-kv { position: fixed !important; z-index: 0; }
#top #l-scroll-body { position: relative; z-index: 2; }
#top #l-body { position: relative; isolation: isolate; padding-top: 100svh !important; }
#top #l-body::before {
  content: '';
  position: absolute;
  top: 100svh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #fffdf8;
  box-shadow: 0 -16px 36px rgba(80, 53, 20, .06);
}
#top #l-footer { position: relative; background: #fffdf8; }

/* Full-canvas SVG layers preserve the composition while drifting independently. */
#top .care-hero-part { position: absolute; inset: 0; animation: care-scene-drift 9s ease-in-out infinite; }
#top .care-hero-part--2 { animation-duration: 11s; animation-delay: -3s; }
#top .care-hero-part--3 { animation-duration: 12s; animation-delay: -5s; }
#top .care-hero-part--4 { animation-duration: 10s; animation-delay: -2s; }
#top .care-hero-part--5 { animation-duration: 13s; animation-delay: -7s; }
@keyframes care-scene-drift { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #top .care-hero-part { animation: none; } }

/* Place the existing edge decorations above the new scrolling surface. */
#top .l-body-bg.type-sky { z-index: 3; }
#top #l-footer { background: var(--brand-primary); }

/* Home-care decoration follows the section along the left edge. */
#top :is(#p-howtouse, #p-networks) { position: relative; }
#top :is(#p-howtouse, #p-networks) .home-care-edge {
  position: absolute;
  top: 24px;
  left: -5px;
  width: clamp(130px, 18vw, 260px);
  opacity: 0.4;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 750px) {
  #top :is(#p-howtouse, #p-networks) .home-care-edge { left: calc(-8vw - 1px); width: 84px; }
}

#top :is(#p-howtouse, #p-networks) > .p-section__inner { position: relative; z-index: 1; }

/* Matching right-edge decoration on the about section. */
#top #p-about { position: relative; }
#top #p-about .home-care-edge-right {
  position: absolute;
  top: 24px;
  right: -5px;
  width: clamp(130px, 18vw, 260px);
  height: auto;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
#top #p-about > .p-section__inner { position: relative; z-index: 1; }
@media (max-width: 750px) {
  #top #p-about .home-care-edge-right { right: calc(-8vw - 1px); width: 84px; }
}

/* Lower the second left-edge decoration. */
#top #p-networks .home-care-edge { top: 280px; }
@media (max-width: 750px) {
  #top #p-networks .home-care-edge { top: 160px; }
}

/* Slightly reduce the new service artwork while retaining its alignment. */
#top #p-howtouse-list .illust img[src*="home-care-service-"] {
  width: 90%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Remove the original artwork-specific horizontal offset. */
#top #p-howtouse-list li.step3 .illust { left: 0; }

/* The fixed care hero is covered by the following sections.
   Ignore legacy scroll transforms/opacity, which can survive reload restoration. */
#top #l-kv {
  transform: none !important;
  opacity: 1 !important;
}

/* Future recruitment LP link, centered inside the illustrated ring. */
#top #p-business-illust .recruit-center-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  min-height: 56px;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: #ff8328;
  color: #191d1d;
  font: inherit;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 700;
  opacity: 1;
}
@media (max-width: 750px) {
  #top #p-business-illust .recruit-center-button {
    min-height: 44px;
    padding: 10px 6px;
    gap: 5px;
    font-size: 12px;
  }
}

/* Enlarge the ring around the fixed-size centered recruitment button. */
#top #p-business-illust .p-illust > img {
  width: 112%;
  max-width: none;
  margin-left: -6%;
}
#top #p-business-illust .recruit-center-button { border-radius: 12px; }

@media (min-width: 751px) {
  #top #p-business .p-section-lead { line-height: 2; }
}

/* Foreground message stays centered independently of the hero artwork and menu. */
#top .hero-message {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(56vw, 780px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #fffdf8) drop-shadow(0 0 8px rgb(255 253 248 / 85%));
}
@media (max-width: 750px) {
  #top .hero-message { width: 74vw; }
}