/*
  Top page vertical rhythm adjustments.
  Keeps the quiet, generous layout while placing every section
  high enough to feel connected and easy to read.
*/

.home-nav {
  min-height: 58px;
}

.landing-section {
  scroll-margin-top: 58px;
}

.home-page .landing-main {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

.hero-home {
  height: clamp(500px, calc(100svh - 58px), 680px);
  margin-top: 0;
}

.hero-copy {
  transform: translateY(-50%);
}

/*
  TOPは単純な左揃えにせず、2行目だけをわずかに右へ送る。
  全角空白ではなくCSSで位置を決め、文字間の美しさを保つ。
*/
.hero-copy h1 span:nth-child(2) {
  transform: translateX(1.15em);
}

/* 大見出しが画面幅によって3行へ崩れないよう、指定した2行を保つ。 */
.fixed-two-line-title span {
  display: block;
  white-space: nowrap;
}

.minimal-section {
  padding: clamp(4.6rem, 6.5vw, 6.5rem) 0;
}

.service-section,
.software-section,
.transition-section {
  min-height: auto;
}

.service-section {
  align-items: start;
  gap: clamp(2.5rem, 5.5vw, 6rem);
  padding-top: clamp(3.3rem, 4.8vw, 4.6rem);
}

.service-section .section-copy {
  padding-top: 0.2rem;
}

.service-visual {
  align-self: start;
  margin-top: 0;
}

.service-visual img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center top;
}

.software-section {
  justify-content: flex-start;
}

.transition-section {
  display: block;
}

.software-grid {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.minimal-link {
  margin-top: 2rem;
}

@media (max-width: 1050px) {
  .service-section {
    gap: clamp(2.2rem, 4.5vw, 4rem);
  }

  .service-visual {
    width: min(860px, 100%);
  }
}

@media (max-width: 760px) {
  .home-nav {
    min-height: 56px;
  }

  .landing-section {
    scroll-margin-top: 56px;
  }

  .hero-home {
    margin-top: 0;
    padding-top: 2.4rem;
  }

  .hero-copy h1 span {
    white-space: nowrap;
  }

  .hero-copy h1 span:nth-child(2) {
    transform: translateX(0.7em);
  }

  .minimal-section {
    padding: 4.1rem 0;
  }

  .service-section {
    padding-top: 3rem;
    gap: 1.8rem;
  }

  .software-grid {
    margin-top: 2.25rem;
  }

  .transition-section {
    min-height: auto;
  }
}

@media (max-width: 420px) {
  .hero-copy h1 span:nth-child(2) {
    transform: translateX(0.5em);
  }
}

@media (max-width: 640px) {
  .home-page .landing-main {
    padding-bottom: 6.5rem;
  }

  .minimal-section {
    padding: 3.7rem 0;
  }
}