html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  background-color: #fffaf0; /* 全体の背景色を優しいクリーム色に */
}
/* ロゴベースのカスタムカラー */
.bg-logo-dark-green {
  background-color: #00695c;
} /* ロゴの書籍部分の濃い緑 */
.text-logo-leaf-green {
  color: #8bc34a;
} /* ロゴの葉の明るい緑 */
.text-logo-leaf-orange {
  color: #ffa726;
} /* ロゴの葉のオレンジ */

/* 既存のカスタムカラー */
.bg-custom-yellow {
  background-color: #ffd700;
}
.text-custom-yellow {
  color: #ffd700;
}
.bg-custom-green {
  background-color: #98d8aa;
}
.text-custom-green {
  color: #34a853;
}
.bg-custom-blue {
  background-color: #aecbfa;
}
.text-custom-blue {
  color: #4285f4;
}
.bg-custom-orange {
  background-color: #fdba74;
}
.text-custom-orange {
  color: #fb923c;
}
.bg-custom-brown {
  background-color: #8d6e63;
}
.text-custom-brown {
  color: #5d4037;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  color: #5d4037;
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 5px;
  background-color: #ffc107;
  border-radius: 3px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.card-hover {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hero-text-shadow {
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

/* ヒーローセクションの背景画像 */
.hero-bg {
  /* スマートフォン用の背景画像 (デフォルト) */
  background-image: url("../images/HP_sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* PC用の背景画像 (画面幅が768px以上の場合) */
@media (min-width: 768px) {
  .hero-bg {
    background-image: url("../images/HP.jpg");
  }
}

/* ハンバーガーメニューのトランジション */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* ▼▼▼ 吹き出しアニメーション ▼▼▼ */
.speech-bubble {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) rotate(12deg);
  }
  40% {
    transform: translateY(-20px) rotate(12deg);
  }
  60% {
    transform: translateY(-10px) rotate(12deg);
  }
}
/* ▲▲▲ 吹き出しアニメーション ▲▲▲ */