/* プランカードのグリッド表示用CSS */

/* PCサイズでグリッド表示 */
@media screen and (min-width: 1024px) {
  .bl_plan_grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
  }

  .bl_plan_grid .swiper-slide {
    width: 100% !important;
    height: auto;
    margin: 0 !important;
  }

  /* 最後の1つを中央配置 */
  .bl_plan_grid .swiper-slide:nth-last-child(1):nth-child(7) {
    grid-column: 2 / 3;
  }

  /* カードのスタイル調整 */
  .bl_plan_grid .bl_plan_card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .bl_plan_grid .bl_plan_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  /* Swiperを非表示 */
  .bl_plan_swiper {
    display: none !important;
  }
}

/* タブレットサイズの調整 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .bl_plan_grid {
    display: none !important;
  }

  .bl_plan_swiper {
    display: block !important;
  }
}

/* モバイルサイズ */
@media screen and (max-width: 767px) {
  .bl_plan_grid {
    display: none !important;
  }

  .bl_plan_swiper {
    display: block !important;
  }

  /* Swiperのスタイル */
  .bl_plan_swiper .swiper-wrapper {
    padding-bottom: 40px;
  }

  .bl_plan_swiper .swiper-pagination {
    bottom: 0;
  }

  .bl_plan_swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #64bcbe;
    opacity: 0.3;
  }

  .bl_plan_swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #64bcbe;
  }
}