/* =========================================
   NEWS Hero Particle Slider (clean)
   対象：#newsHeroParticle のみ
========================================= */

/* ✅ 見えない原因の9割は高さ */
#newsHeroParticle{
  position: relative;
  width: 80%;
  height: 70vh;
  min-height: 360px;
  overflow: hidden;
margin:0 auto;
  /* background:#111; */ /* 確認用（不要なら削除OK） */
}

/* Swiper全体を100%に */
#newsHeroParticle .heroSwiper,
#newsHeroParticle .swiper-wrapper,
#newsHeroParticle .swiper-slide{
  width: 100%;
  height: 100%;
}

/* スライドは重ね配置の土台 */
#newsHeroParticle .swiper-slide{
  position: relative;
  overflow: hidden;
}

/* 画像：全面カバー */
#newsHeroParticle .heroSlideImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 粒子canvas（JSが描く） 
#newsHeroParticle .heroParticleCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;           
  transition: opacity .15s linear;
}*/
/* 粒子canvas：画面全体に */
#newsHeroParticle .heroParticleCanvas{
  position: fixed;   /* ← 重要：画面固定 */
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;     /* ヘッダーより前に出したいなら大きめ */
  opacity: 0;
  transition: opacity .15s linear;
}

/* ✅ 演出中はSwiperを消す（元画像が先に見える問題対策） */
/*#newsHeroParticle.isTransitioning .heroSwiper{
  opacity: 0;
}*/

#newsHeroParticle.isTransitioning .heroParticleCanvas{
  opacity: 1;
}

/* -------------------------------
   Caption（上下左右中央 + 縦並び）
-------------------------------- */
#newsHeroParticle .heroCaption{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;     /* タイトル→説明文 */
  align-items: center;         /* 横中央 */
  justify-content: center;     /* 縦中央 */
  text-align: center;
  padding: 24px;
  z-index: 20;                 /* canvasより上 */
  pointer-events: none;
  
  /* ✅ 読みやすさ（暗幕） */
  background: rgba(0,0,0,.20);
}

/* タイトル */
#newsHeroParticle .heroCaption__title{
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* 説明文（タイトルの下） */
#newsHeroParticle .heroCaption__text{
  margin-top: 14px;
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  max-width: 52ch;
}

/* ナビ位置（必要なら） */
#newsHeroParticle .swiper-button-prev,
#newsHeroParticle .swiper-button-next{
  top: 50%;
}

/* --------------------------------
   ✅ さらに“箱”にしたい場合（任意）
   ※HTMLに .heroCaption__inner を追加して使う
--------------------------------- */
/*
#newsHeroParticle .heroCaption{
  background: none;  // 暗幕を消して箱だけにするなら
}
#newsHeroParticle .heroCaption__inner{
  max-width: min(920px, 92vw);
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
*/

#newsHeroParticle.isScatter .heroSwiper{ opacity: 0; }
#newsHeroParticle.isGather  .heroSwiper{ opacity: 1; }

/* Swiperは普段表示（※演出のときだけ消す） */
#newsHeroParticle .heroSwiper{
  opacity: 1;
  transition: opacity .25s ease;
}

/* canvas（演出用） */
#newsHeroParticle .heroParticleCanvas{
  opacity: 0;
  transition: opacity .15s linear;
}

/* ✅ 演出中：Swiperを消してcanvasを出す */
#newsHeroParticle.isTransitioning .heroSwiper{
  opacity: 0;
}
#newsHeroParticle.isTransitioning .heroParticleCanvas{
  opacity: 1;
}

/* ✅ 集まり切った瞬間の切替（ここが肝）
   isTransitioning のままでも、isRevealing が付いたら Swiperを出す */
#newsHeroParticle.isTransitioning.isRevealing .heroSwiper{
  opacity: 1;
}
#newsHeroParticle.isTransitioning.isRevealing .heroParticleCanvas{
  opacity: 0;
}

#newsHeroParticle.isTransitioning .heroSwiper { opacity: 0; }
#newsHeroParticle.isTransitioning .heroParticleCanvas { opacity: 1; }

/* 完成した瞬間にスッと切り替える用 */
#newsHeroParticle.isRevealing .heroSwiper { opacity: 1; }
#newsHeroParticle.isRevealing .heroParticleCanvas { opacity: 0; }