/* ==========================================================================
   Home (トップページ固有レイアウト)
   ページ専用のレイアウトのみ記述。ボタン・見出し等の見た目は components.css を参照。
   ========================================================================== */

/* --- Hero ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-6);
}
.hero__title {
  font-size: var(--fs-h1);
  letter-spacing: 0.01em;
}
.hero__sub {
  margin-top: var(--space-5);
  color: var(--color-ink-soft);
  max-width: 30rem;
  font-size: 1rem;
}
.hero__cta { margin-top: var(--space-6); }
.hero__visual { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.hero__visual svg { width: 100%; height: 100%; }

.hero__scroll {
  position: absolute;
  bottom: var(--space-5);
  left: var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__scroll::before { content: "SCROLL"; font-size: 10px; letter-spacing: 0.2em; color: var(--color-ink-faint); }
.hero__scroll span {
  width: 1px; height: 42px;
  background: var(--color-ink-faint);
  display: block;
  position: relative;
  overflow: hidden;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--color-gold);
  animation: scrollline 2.2s var(--ease-out) infinite;
}
@keyframes scrollline {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__visual { max-width: 320px; margin-inline: auto; opacity: 0.9; }
  .hero__scroll { display: none; }
}

/* --- Problem ---------------------------------------------------- */
/* Hero / Concept の非対称2カラムと差をつけ、縦の段差構成でリズムを変える */
.problem__head { max-width: 30rem; margin-bottom: var(--space-8); }
.problem__head h2 { font-size: var(--fs-h2); }
.problem__list { display: flex; flex-direction: column; gap: var(--space-6); max-width: 40rem; margin-left: auto; }
.problem__list li {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: var(--lh-tight);
  padding-left: var(--space-5);
  position: relative;
  color: var(--color-ink);
}
.problem__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 18px; height: 1px;
  background: var(--color-gold);
}
.problem__list li:nth-child(2) { margin-left: 8%; }
.problem__list li:nth-child(3) { margin-left: 2%; }
.problem__list li:nth-child(4) { margin-left: 11%; }

@media (max-width: 900px) {
  .problem__head { margin-bottom: var(--space-6); }
  .problem__list { max-width: none; gap: var(--space-5); }
  .problem__list li:nth-child(2),
  .problem__list li:nth-child(3),
  .problem__list li:nth-child(4) { margin-left: 0; }
}

/* --- Concept ---------------------------------------------------- */
.concept { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.concept__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--space-6);
}
/* Heroとは視線の向きを反転（ビジュアル左／テキスト右）させ、連続する非対称2カラムに変化をつける */
.concept__visual { order: -1; }
.concept__text h2 { font-size: var(--fs-h2); margin-bottom: var(--space-5); }
.concept__body { color: var(--color-ink-soft); max-width: 26rem; }
.concept__visual { aspect-ratio: 4 / 3; }
.concept__visual svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .concept { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .concept__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .concept__visual { order: -1; max-width: 380px; margin-inline: auto; }
}

/* --- How it works ---------------------------------------------------- */
.howitworks h2 { font-size: var(--fs-h2); margin-bottom: var(--space-7); max-width: 26rem; }

/* --- Value ---------------------------------------------------- */
.value__inner {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-7);
  align-items: start;
}
.value__lead h2 { font-size: var(--fs-h2); }
.value-tags { padding-top: var(--space-2); }

@media (max-width: 900px) {
  .value__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- AI companion ---------------------------------------------------- */
.companion { position: relative; overflow: hidden; }
.companion__inner { position: relative; max-width: 38rem; text-align: left; z-index: 1; }
.companion h2 { font-size: var(--fs-h2); margin-bottom: var(--space-5); }
.companion__body { color: var(--color-on-navy-soft); max-width: 28rem; }
.companion__orbit {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 520px);
  opacity: 0.55;
  z-index: 0;
  animation: orbitspin 90s linear infinite;
}
@keyframes orbitspin { to { transform: translateY(-50%) rotate(360deg); } }

@media (max-width: 900px) {
  .companion__orbit { width: 70vw; right: -20%; opacity: 0.35; }
}

/* --- Manual evolves ---------------------------------------------------- */
.evolve { background: var(--color-navy-deep); padding-top: var(--space-8); }
.evolve h2 { font-size: var(--fs-h2); margin-bottom: var(--space-7); max-width: 26rem; }

/* --- Final CTA ---------------------------------------------------- */
.cta-final__inner { text-align: center; max-width: 34rem; margin-inline: auto; }
.cta-final__inner h2 { font-size: var(--fs-h2); }
.cta-final__inner p { color: var(--color-ink-soft); margin-top: var(--space-4); margin-bottom: var(--space-6); }

/* --- Home footer note (link back into existing corporate site) ------- */
.footer-note {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-ink-faint);
  padding: var(--space-5) 0;
}