/* ============================================
   下層ページ専用のスタイル
   ============================================ */

/* ============================================
   KV（キービジュアル）背景
   ============================================ */
.kv {
  margin: 105px 0 120px;
  position: relative;
  width: 100%;
  height: 190px;
  background-color: var(--boat-blue);
}

.kv--fulfilling {
  margin: 105px 0 120px;
}

/* 上部の青（右上がりの下端） - TOPと同じ */
.kv--fulfilling::before {
  content: '';
  position: absolute;
  top: -105px;
  left: 0;
  width: 100%;
  height: 105px;
  background-color: var(--boat-blue);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

/* 下部の青（右上がりの上端） - TOPと同じ */
.kv--fulfilling::after {
  content: '';
  position: absolute;
  bottom: -105px;
  left: 0;
  width: 100%;
  height: 105px;
  background-color: var(--boat-blue);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

/* 水しぶきと人物のコンテナ */
.kv--fulfilling__splash {
  position: absolute;
  top: -105px;
  left: 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 295px, 0 400px);
  z-index: 1;
}

/* 人物画像（共通） */
.kv--fulfilling__racer-img {
  position: absolute;
  object-fit: cover;
  z-index: 3;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

/* 1人目 */
.kv--fulfilling__racer-img--1 {
  top: -74px;
  left: -130px;
  width: 426px;
  height: 837px;
  animation: slideInFromLeftFulfilling1 0.6s 0.2s both;
}

/* 2人目 */
.kv--fulfilling__racer-img--2 {
  top: 0px;
  left: 60px;
  width: 280px;
  animation: slideInFromRightFulfilling2 0.6s 0.4s both;
}

@keyframes slideInFromLeftFulfilling1 {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRightFulfilling2 {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 上部の青（右上がりの下端） */
.kv::before {
  content: '';
  position: absolute;
  top: -105px;
  left: 0;
  width: 100%;
  height: 105px;
  background-color: var(--boat-blue);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

/* 下部の青（右上がりの上端） */
.kv::after {
  content: '';
  position: absolute;
  bottom: -105px;
  left: 0;
  width: 100%;
  height: 105px;
  background-color: var(--boat-blue);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

/* KV画像配置 */
.kv__bg-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kv__racer-img {
  position: absolute;
  object-fit: cover;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.kv__title {
  position: absolute;
  top: -40px;
  right: -25px;
  width: 382.15px;
  height: auto;
  z-index: 10;
  animation: slideInFromLeftTitle 0.3s 0.2s both;
}

/* ============================================
   KVレーサー画像の配置とアニメーション
   ============================================ */

/* 優勝戦_5121_定松勇樹 (kv-racer1.png) - 左から飛び込む */
.kv__racer-img--1 {
  top: -179px;
  left: -125px;
  z-index: 1;
  width: 521px;
  height: auto;
  transform: rotate(-14.72deg);
  animation: slideInFromLeft1 0.3s 0s both;
}

/* 5174 kawai (kv-racer2.png) - 左から飛び込む */
.kv__racer-img--2 {
  width: 177px;
  height: auto;
  top: -90px;
  left: 0;
  z-index: 3;
  animation: slideInFromLeft2 0.5s 0.3s both;
}

/* 5217_藤原碧生 (kv-racer5.png) - フェードイン */
.kv__racer-img--5 {
  width: 220px;
  height: 180px;
  bottom: -10px;
  right: -85px;
  z-index: 11;
  overflow: hidden;
  animation: fadeIn 0.8s 0.5s both;
}

.kv__racer-img--5 img {
  width: 100%;
  height: auto;
}


/* ============================================
   アニメーション定義
   ============================================ */

@keyframes slideInFromLeft1 {
  0% {
    transform: translate(-200%, 0) rotate(-14.72deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(-14.72deg);
    opacity: 1;
  }
}

@keyframes slideInFromLeft2 {
  0% {
    transform: translate(-200%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideInFromLeftTitle {
  0% {
    transform: translate(-80%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 水しぶき画像 */
.kv__splash--1 {
  position: absolute;
  width: 100%;
  height: auto;
  top: -140px;
  left: 0;
  z-index: 2;
}

.kv__splash--2 {
  position: absolute;
  width: 265px;
  height: auto;
  bottom: -80px;
  left: 0;
  z-index: 3;
}

/* タイトル画像 */
.kv__title-image {
  width: 353.33px;
  height: 244.66px;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/* TOPページと同様に、KVはcontainerの幅に従う（width: 100%を維持） */