@media screen and (min-width: 769px) {
/* ============================================================
   5. セクション1: ファーストビュー（FV）
   ============================================================ */

.fv {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  height: 844px;
  margin: 0 auto;
  overflow: hidden;
  background: #E9F7F6;
  /* 薄い水色のベースカラー */
}

/* --- 背景画像 --- */
.fv__bg {
  position: absolute;
  width: 100%;
  height: 817px;
  top: 0;
  left: 0;
  background: url("../images/sec1/背景.png") center top / cover no-repeat;
  z-index: var(--z-bg);
}

/* --- ポートフォリオスライダー（静的表示） --- */
.fv__slider {
  position: absolute;
  width: 1711.87px;
  height: 3424.14px;
  left: 50%;
  top: -200px; /* さらに上へずらす（元: -100px） */
  transform: translateX(calc(-50% + 100px)); /* 20px左へ戻す（元: +120px） */
  z-index: var(--z-slider);
  pointer-events: none;
}

/* --- pf1: 左側ポートフォリオ列（下→上スクロールアニメーション） --- */
.fv__pf1 {
  position: absolute;
  width: 190.65px;
  height: 3455.32px;
  left: 0px;
  top: 0px;
  /* repeat-y で縦にタイル状に繰り返し、ループ時の継ぎ目を自然にする */
  background: url("../images/sec1/pf1.webp") 0 0 / 100% auto repeat-y;
  opacity: 0.7;
  filter: drop-shadow(0px 4px 17.7px rgba(0, 0, 0, 0.07));
  transform: rotate(11.48deg);
  /* 下から上へゆっくり無限スクロール（55秒で1周） */
  animation: scrollUp-pf1 55s linear infinite;
}

@keyframes scrollUp-pf1 {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -3455px; /* 上へスクロール */
  }
}

/* --- pf2: 右側ポートフォリオ列（上→下スクロールアニメーション） --- */
.fv__pf2 {
  position: absolute;
  width: 190.65px;
  height: 3351.51px;
  left: 858px;
  top: 0px;
  /* repeat-y で縦に繰り返し */
  background: url("../images/sec1/pf2.webp") 0 0 / 100% auto repeat-y;
  opacity: 0.7;
  filter: drop-shadow(0px 4px 17.7px rgba(0, 0, 0, 0.07));
  transform: rotate(11.48deg);
  /* 上から下へゆっくり無限スクロール（55秒で1周） */
  animation: scrollDown-pf2 55s linear infinite;
}

@keyframes scrollDown-pf2 {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 3351px; /* 下へスクロール */
  }
}

/* --- メインビジュアルコンテンツ --- */
.fv__content {
  position: absolute;
  width: 773.5px;
  height: 662px;
  left: 50%;
  top: 67px;
  transform: translateX(-50%);
  z-index: var(--z-content);
  /* 下からフェードインアニメーション */
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.fv__content-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 光エフェクトオーバーレイ --- */
.fv__light {
  position: absolute;
  width: 1920px;
  height: 898px;
  top: 0;
  left: calc(50% - 1920px/2);
  background: url("../images/sec1/光素材@2x 1.png") center top / cover no-repeat;
  z-index: var(--z-light);
  pointer-events: none;
}

/* --- スポットライト装飾 --- */
.fv__spotlight {
  position: absolute;
  width: 645px;
  height: 201.5px;
  left: calc(50% - 645px/2 - 0.5px);
  top: 0px;
  background: url("../images/sec1/グループ 1@2x 1.png") center top / contain no-repeat;
  z-index: var(--z-spotlight);
  pointer-events: none;
}

/* --- CTAボタン --- */
.fv__cta {
  position: absolute;
  width: 560px;
  height: 125px;
  left: 50%;
  top: 719px;
  transform: translateX(-50%);
  z-index: var(--z-cta);
  cursor: pointer;
  overflow: hidden;
  border-radius: 60px;
  transition: transform 0.3s ease;
}

.fv__cta:hover {
  transform: translateX(-50%) scale(1.03);
}

/* --- CTAボタン: 光スウィープ（常時左右往復） --- */
.fv__cta::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: -40%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.15) 70%,
      transparent 100%);
  z-index: 3;
  pointer-events: none;
  animation: sweepLight 3s ease-in-out infinite;
}

.fv__cta-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* --- CTAボタン: 波紋エフェクト --- */
.fv__cta-ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  pointer-events: none;
  z-index: 2;
}

.fv__cta-ripple.is-active {
  animation: ripple 0.6s ease-out forwards;
}
/* --- FV下部の透過グラデーション --- */
.fv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, rgba(233, 247, 246, 0) 0%, #E9F7F6 100%);
  z-index: 3;
  pointer-events: none;
}

} /* end @media PC */