/* =====================================================================
   kv.css — TOP メインビジュアル（KV）
   背景写真2枚のクロスフェード＋テキストコピー
   - SP/タブレット(<=1023px): コピー上部＋CTAボタン下部、波形は大きめ(<600px)
   - PC(>=1024px): コピー中央、CTAボタンなし
   ===================================================================== */
.p-kv {
  position: relative;
  height: 580px;            /* SP基準 */
  overflow: hidden;
  background: var(--bg-default);
  isolation: isolate;
}

/* 背景写真（クロスフェード） */
.p-kv__bg { position: absolute; inset: 0; z-index: 0; }
.p-kv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-kv__slide.is-active { opacity: 1; }
.p-kv__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* SP: 画像は幅100%・高さ自動（cover/height:100%を解除して原比率で表示） */
@media (max-width: 599px) {
  .p-kv__slide img { height: auto; object-fit: initial; }
}

/* 左上から白へフェードするオーバーレイ（コピー可読性） */
/* 内側コンテナ（コピー上＋CTA下） */
.p-kv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-40) var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* コピー */
.p-kv__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-kv__catch {
  font-size: clamp(30px, 9vw, 60px);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--text-default);
  text-shadow: 0 0 10px #fff, 0 0 16px #fff;
}
/* メインコピーは画像（2種）を重ねてクロスフェード。
   表示中(.is-active)だけを通常フロー、非表示は絶対配置で重ねる
   → ブロック高さ = 表示中の画像の高さ（2行版の高さに固定されない） */
.p-kv__catch { position: relative; }
.p-kv__catch-item {
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-kv__catch-item:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;                   /* 表示中の画像に重ねる（高さには影響させない） */
}
.p-kv__catch-item.is-active { opacity: 1; }
.p-kv__catch-svg {
  display: block;
  width: auto;
  height: 96px;              /* SP: 高さ基準（2種を同スケールに） */
  max-width: 100%;
  /* 写真上での可読性確保（元テキストの白にじみを再現） */
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 16px #fff);
}
/* SP: どちらのキャッチも高さ94pxに統一（幅は比率で自動） */
@media (max-width: 599px) {
  .p-kv__catch-svg { width: auto; height: 94px; }
}
.p-kv__lead {
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.6;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
  text-shadow: 0 0 8px #fff, 0 0 12px #fff;
  padding-left: var(--space-8);   /* サブコピー左に8pxの余白 */
}
/* サブキャッチ内の改行はSP（<600px）のみ。タブレット以上は1行 */
@media (min-width: 600px) {
  .p-kv__lead-br { display: none; }
}
/* SP: サブキャッチのボールドを外す */
@media (max-width: 599px) {
  .p-kv__lead { font-weight: normal; }
}

/* CTAボタン（SP/タブレットのみ） */
.p-kv__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .1));
}

/* SP: CTAを下げて緑ボタンの縦中央を弧の上端に重ねる。
   下ボタンがKV下端(overflow:hidden)で切れないよう間隔を詰める */
@media (max-width: 599px) {
  .p-kv__actions { transform: translateY(39px); gap: var(--space-16); }
}

/* 下部の白い波形 */
.p-kv__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 1;
  line-height: 0;
}
.p-kv__wave img { width: 100%; height: 100px; }
.p-kv__wave-pc { display: none; }
.p-kv__wave-sp { display: block; }

/* ---- タブレット（>=600px）: 波形は緩やかな方を使用 ---- */
@media (min-width: 600px) {
  .p-kv { height: 620px; }
  .p-kv__wave-pc { display: block; }
  .p-kv__wave-sp { display: none; }
  .p-kv__catch-svg { height: 128px; }   /* タブレット以上は大きめ */
  .p-kv__actions { display: none; }     /* タブレット以上ではKVのCTAボタンを非表示（SPのみ表示） */
}

/* ---- PC（>=1024px）: コピー中央・CTAなし ---- */
@media (min-width: 1024px) {
  .p-kv { height: 652px; }
  .p-kv__inner {
    justify-content: flex-start;   /* 中央寄せを解除して上寄せに */
    padding-top: 140px;            /* キャッチ上端をKV上辺から140pxに */
    padding-inline: var(--space-40);
    padding-bottom: 6%;
  }
  .p-kv__copy { gap: var(--space-24); }
  /* PC: キャッチは幅基準（1枚目=720px / 2枚目=500px）。高さは比率で自動 */
  .p-kv__catch-item:nth-child(1) .p-kv__catch-svg { width: 720px; height: auto; }
  .p-kv__catch-item:nth-child(2) .p-kv__catch-svg { width: 500px; height: auto; }
  .p-kv__lead { font-size: 16px; }
  .p-kv__actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p-kv__slide,
  .p-kv__catch-item { transition: none; }
}