/* BootStrap */
:root {
  --bs-primary: #166e30; /* 新しいプライマリーカラーに変更 */
	--bs-primary-rgb: 22, 110, 48;
}
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn:hover {
	transition: background-color 0.3s ease, transform 0.3s ease; /* アニメーション追加 */
  background-color: #10B981; /* ホバー時の色 */
	transform: scale(1.05);
}


/* 全体 */
.comment {
  background-color: #ccffe5; /* 軽いグレーの背景色 */
  border-radius: 10px; /* 角の丸み */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影のスタイル */
  padding: 20px; /* 内部の余白 */
  margin-top: 64px; /* 上の要素との間隔 */
  width: 100%; /* コンテナの幅に合わせる */
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 1s ease-out;
	/* 初期状態 */
	opacity: 0;
	transform: translateY(20px);
	/* アニメーション設定 */
	animation: fadeInUp 1s ease-out forwards;
}

.fade-in-up-delay-1 { animation-delay: 0.2s; }
.fade-in-up-delay-2 { animation-delay: 0.4s; }
.fade-in-up-delay-3 { animation-delay: 0.6s; }
.fade-in-up-delay-4 { animation-delay: 0.8s; }
.fade-in-up-delay-5 { animation-delay: 1.0s; }