/* ========================================
   Carousel Styles - スマホ版専用
   ======================================== */

/* スマホ版の表示切り替え */
@media (max-width: 768px) {
  .home-page .carousel-pc {
    display: none;
  }
  
  .home-page .carousel-mobile {
    display: block;
    width: 100%;
    margin: 0;
  }
}

/* PC版の表示切り替え */
@media (min-width: 769px) {
  .home-page .carousel-pc {
    display: block;
  }
  
  .home-page .carousel-mobile {
    display: none;
  }
}

/* スマホ版専用スタイル */
.carousel-mobile .carousel-container {
  height: auto;
  margin-top: 0;
  overflow: hidden;
}

.carousel-mobile .carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-mobile .carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  justify-content: flex-start;
}

.carousel-mobile .carousel-title {
  font-size: 2rem;
}

.carousel-mobile .carousel-subtitle {
  font-size: 1.2rem;
}

.carousel-mobile .carousel-text {
  font-size: 1rem;
}

.carousel-mobile .carousel-logo {
  top: 1rem;
  right: 1rem;
}

.carousel-mobile .carousel-logo img {
  max-height: 60px;
}

.carousel-mobile .carousel-content {
  padding: 1rem;
  width: 100%;
}

.carousel-mobile .carousel-indicators {
  bottom: 1rem;
}

/* 小さいスマートフォン対応 */
@media (max-width: 480px) {
  .carousel-mobile .carousel-container {
    height: auto;
    margin-top: 0;
    overflow: hidden;
  }
  
  .carousel-mobile .carousel-title {
    font-size: 1.5rem;
  }
  
  .carousel-mobile .carousel-subtitle {
    font-size: 1rem;
  }
  
  .carousel-mobile .carousel-text {
    font-size: 0.9rem;
  }
  
  .carousel-mobile .carousel-logo img {
    max-height: 40px;
  }
  
  .carousel-mobile .carousel-content {
    padding: 0.5rem;
    width: 100%;
  }
  
  .carousel-mobile .carousel-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
  }
}