/* ────────────────
  Swiper
──────────────── */
.slider-area {
height: 800px;
}


.swiper-slide {
margin: 0;
font-size: 2.4rem;
color: white;
background: rgba(255,255,255,0);
display: flex;
justify-content: center;
align-items: center;
}


/* ────────────────
  Slide
──────────────── */
.slide-box{
    height:600px;
    width: 100%;
}

.swiper-slide .content {
  position: relative;
  z-index: 10; /* 動画の上に表示 */
  color: #fff;
}


/* ────────────────
  BG
──────────────── */

.swiper-bg1 {
  width: 100%;
  height: 600px;
  background-image: url('../img/bg/slide2.png');
  background-size: cover;    /* アスペクト比維持 + 全体カバー */
  background-position: center; /* 中心から切れる */
  background-repeat: no-repeat;
}

.swiper-bg2 {
  width: 100%;
  height: 600px;
  background-image: url('../img/bg/slide1.png');
  background-size: cover;    /* アスペクト比維持 + 全体カバー */
  background-position: center; /* 中心から切れる */
  background-repeat: no-repeat;
}


.mvbg1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比維持+切れOK */
  z-index: -10; 
}


/* ────────────────
  スマホ用
──────────────── */
@media screen and (max-width: 768px) {

  .slider-area,
  .swiper,
  .swiper-slide,
  .slide-box,
  .swiper-bg1,
  .swiper-bg2 {
    width: 100vw;
    aspect-ratio: 16 / 9;  /* ← PCと同じ比率にする値を指定 */
    height: auto;          /* 自動で決まる */
  }

  .mvbg1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
    
     .swiper-pagination {
    display: none !important;
  }

}



/* ────────────────
  Swiper下のドット
──────────────── */

/* デフォルトの丸を消す */
.swiper-pagination-bullet {
  position: relative;
  width: auto !important;
  height: auto !important;
  background: none !important;
  opacity: 1 !important;
  margin: 0 16px !important;

  font-size: 2em;
  line-height: 1;
  color: #FFC3DF;
  transition: transform 0.3s ease, color 0.3s ease;
}



/* ────────────────
  ✦ アクティブ時の星形発光
──────────────── */

.swiper-pagination-bullet-active {
  transform: scale(1.2);
  color: #FFC3DF; /* アクティブの色 */

  /* box-shadow（丸い光）は削除！ */
  box-shadow: none !important;
}

/* ✦ 発光（アクティブ時だけ出す） */
.swiper-pagination-bullet-active::before {
  content: "✦";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.7);
  color: #B9A9FF;
  opacity: 1;
  pointer-events: none;

  text-shadow:
    0 0 5px #FFF,
    0 0 5px #FFF,
    0 0 5px #FFF,
    0 0 5px rgba(255, 155, 246, 0.6);
}


/* ────────────────
  ✦ キラキラの瞬き（通常）
──────────────── */

.swiper-pagination-bullet-active::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  color: #fff;
  opacity: 0;
  pointer-events: none;

  text-shadow:
    0 0 10px #ff9bf6,
    0 0 10px #22d3ee;

  animation: sparkle 1.6s infinite ease-in-out;
}

/* ✦ の瞬きアニメーション */
@keyframes sparkle {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 0;
  }
}

/* 位置調整 */
.swiper-pagination {
  bottom: 27px !important;

}