/**
 * File: top/fv.css
 * Usage: TOPページ FV(ファーストビュー)
 */

.ly_fv {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: var(--color-black) center / cover no-repeat;
  background-image: url(../../img/top/fv-hero.webp);
  color: var(--color-white);
  overflow: hidden;
}

.ly_fv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* メイン動画(YouTube)を背景として全面カバー表示。音なし・自動再生・ループ */
/* 再生開始まではポスター(fv-hero.webp)を見せ、再生中のみフェードイン。
   開始時の再生/一時停止ボタンを見せないため。 */
.bl_fvVideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.bl_fvVideo.is_playing {
  opacity: 1;
}

/* 背景動画を全面カバー表示 */
.bl_fvVideo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

.bl_fv {
  position: relative;
  z-index: 2;
  min-height: inherit;
}

.bl_fv_head {
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 200px;
}

.bl_fv_ttl {
  line-height: 0;
}

.bl_fv_ttl_img {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.bl_fv_lead {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

/* 配信中ピックアップカード(Figma 526:23 / 200x220)。
   FV内に留めず、ページ全体でフローティング(fixed)表示する。 */
.bl_fvCard_outer {
  position: fixed;
  right: 16px; /* SP:右から16px(PCは40px) */
  bottom: 32px;
  z-index: 900; /* ヘッダー(1000)/ドロワー(999)より下、コンテンツより上 */
  width: 200px;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  /* 数秒ごとに弾んで注意を引く(prefers-reduced-motion では自動停止) */
  animation: fvCardBounce 3.5s ease-in-out infinite;
}

/* フッター表示時・閉じる時は退避(フッターのSNS/問い合わせを隠さない) */
.bl_fvCard_outer.is_hidden {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
}

/* 弾むアニメ:大半を静止、数秒に一度バウンド */
@keyframes fvCardBounce {
  0%, 55%, 100% { transform: translateY(0); }
  64% { transform: translateY(-10px); }
  73% { transform: translateY(0); }
  82% { transform: translateY(-5px); }
  90% { transform: translateY(0); }
}

.bl_fvCard {
  position: relative;
  display: block;
  width: 100%;
  padding: 24px 16px 16px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.bl_fvCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

/* 閉じるボタン(カード右上) */
.bl_fvCard_close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 28, 28, 0.55);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.3s ease;
}

.bl_fvCard_close:hover {
  background: rgba(28, 28, 28, 0.82);
}

/* バッジはカード左上の角に密着(サムネ上に重なる) */
.bl_fvCard_badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 7px 16px;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.4;
}

.bl_fvCard_thumb {
  display: block;
  aspect-ratio: 184 / 104;
  overflow: hidden;
}

.bl_fvCard_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.bl_fvCard:hover .bl_fvCard_thumb img {
  transform: scale(1.06);
}

.bl_fvCard_body {
  display: block;
  margin-top: 8px;
}

.bl_fvCard_ttl {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}

.bl_fvCard_desc {
  display: none; /* SPでは説明文を非表示(PCで表示) */
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.bl_fvCard_arrow {
  display: none; /* SPでは矢印を非表示(PCで表示) */
  width: 42px;
  margin-left: auto;
  margin-top: 8px;
  color: var(--color-main);
  transition: color 0.3s ease;
}

.bl_fvCard_arrow svg rect {
  transition: fill 0.3s ease;
}

.bl_fvCard_arrow svg path {
  transition: stroke 0.3s ease;
}

/* ホバー:ピル内側を塗りつぶし矢印を白に(枠線の赤はそのまま維持) */
.bl_fvCard:hover .bl_fvCard_arrow svg rect {
  fill: var(--color-main);
}

.bl_fvCard:hover .bl_fvCard_arrow svg path {
  stroke: var(--color-white);
}

@media screen and (min-width: 768px) {
  .bl_fv_head {
    padding-top: calc(var(--header-h) + 120px);
    padding-bottom: 120px;
  }

  .bl_fv_ttl_img {
    max-width: 626px;
  }

  .bl_fv_lead {
    margin-top: 40px;
    font-size: 16px;
    letter-spacing: 0.05em;
  }

  .bl_fvCard_outer {
    right: 40px;
    bottom: 48px;
  }

  /* PCでは説明文・矢印を表示(SPは非表示) */
  .bl_fvCard_desc,
  .bl_fvCard_arrow {
    display: block;
  }
}