/* ====== フェードイン共通 ====== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-in { opacity: 0; animation: fadeInUp 1s forwards; }
.fade-delay-1 { animation-delay: 0.3s; }
.fade-delay-2 { animation-delay: 0.6s; }
.fade-delay-3 { animation-delay: 0.9s; }
.fade-delay-4 { animation-delay: 1.2s; }

/* ====== セクション全体 ====== */
.case-studies {
  max-width: 1200px;
  margin: 80px auto 100px;
  padding: 0 20px;
  text-align: center;
  color: #fff;
}

/* ====== タイトル ====== */
.case-title {
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 20px 30px;
  border-radius: 12px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: bold;
  margin-bottom: 60px;
}

/* ====== ケースカード ====== */
.case-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.case-card {
  padding: 25px 20px;
  border-radius: 12px;
  text-align: center;
  color: #000;
}

/* カードごとのパステル背景 */
.case-card:nth-child(1) { background: rgba(255, 223, 223, 0.6); } /* 薄ピンク */
.case-card:nth-child(2) { background: rgba(223, 255, 223, 0.6); } /* 薄グリーン */
.case-card:nth-child(3) { background: rgba(223, 223, 255, 0.6); } /* 薄ブルー */

/* カード内要素 */
.case-card h3 {
  font-size: clamp(20px, 2.5vw, 28px);
  margin-bottom: 15px;
  font-weight: bold;
  color: #000;
}

.case-price {
  background: #ff7a00;
  color: #fff;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: bold;
  margin-bottom: 15px;
}

.case-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #000;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
  text-align: left;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .case-card ul { text-align: left; }
}