/* =========================
   ファーストビュー（リクルート専用）
   ========================= */
.firstview,
.firstview-sp {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  margin: 0;
  padding: 0;
  height: auto;   /* ← もはや固定高さにしない */
}

/* テキストが中央から出現して上に移動する */
.fv-text,
.fv-text-sp {
  position: relative;
  margin-top: 30vh;   /* 初期は画面中央付近に */
  opacity: 0;
  transition: margin-top 1.2s ease, opacity 1.2s ease;
  text-align: center;
}

.fv-text.show,
.fv-text-sp.show {
  opacity: 1;
}

.fv-text.shift,
.fv-text-sp.shift {
  margin-top: 5vh;   /* ← 上に引き上げ */
}

/* PC用 */
.next-section-pc {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.next-section-pc.visible {
  opacity: 1;
  transform: translateY(0);
}

/* SP用 */
.next-section-sp {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.next-section-sp.visible {
  opacity: 1;
  transform: translateY(0);
}


/* タイトル */
.fv-text h1,
.fv-text-sp h1 {
  font-family: "Tsukushi A Round Gothic", sans-serif;
  font-size: clamp(3.7rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: #da699c;
  text-align: center;
}

/* 帯アニメーション */
.title-span,
.title-span-sp {
  color: transparent;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color 0.5ms 1s;
}
.title-span::after,
.title-span-sp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #da699c;
  transform: translateX(-100%);
}
.title-span.active,
.title-span-sp.active {
  color: #da699c;
}
.title-span.active::after,
.title-span-sp.active::after {
  animation: lineAnime 1.8s forwards;
}
@keyframes lineAnime {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* サブタイトル */
.fv-subtitle,
.fv-subtitle-sp {
  font-family: "Tsukushi A Round Gothic", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  color: #555;
  margin-top: 0.5rem !important;
  margin-bottom: 4.5rem !important;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.5s;
  text-align: center;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}