/* ----- カード内の画像を課題下に表示するための追加 ----- */
.card-img-challenge {
  display: block;
  margin: 1rem auto 0 auto; /* テキストの下に配置し、左右中央寄せ */
  max-width: 80%;          /* カード幅の80%など適宜調整 */
  height: auto;            /* アスペクト比を保つ */
}

/* 例: カスタムスタイル - 必要に応じて調整 */

/* Heroセクションで動画の上にテキストを重ねるスタイル */
header {
  position: relative;
  min-height: 80vh;
  color: #fff;
}
body {
  /* navbarの高さ分余白を付け、コンテンツと被らないように */
  padding-top: 3.5em; 
}

/* 問い合わせリンクをボタン風にする */
.nav-link-cta {
  background-color: #ff9800;
  color: #fff !important;
  border-radius: 4px;
  margin-left: 1rem;
  padding: 0.5rem 1rem;
}
.nav-link-cta:hover {
  background-color: #ffa733;
  color: #fff !important;
  text-decoration: none;
}
/* カードのテキストを少し大きく */
.card-text {
  font-size: 1rem;
  line-height: 1.4;
}

/* FAQ アコーディオンのスタイル調整 */
.accordion-button {
  font-weight: bold;
}
.accordion-button:not(.collapsed) {
  background-color: #f8f9fa;
  color: #000;
}

/* CTAボタンをより目立たせる */
.btn-warning {
  background-color: #ffc107;
  color: #000;
  border: none;
}
.btn-warning:hover {
  background-color: #ffca2c;
  color: #000;
  opacity: 0.9;
}

/* フォーム調整 */
#formSection form {
  background-color: #333;
  padding: 20px;
  border-radius: 8px;
}
#formSection label {
  font-weight: bold;
}
#formSection .form-control {
  background-color: #444;
  color: #fff;
  border: 1px solid #555;
}
#formSection .form-control:focus {
  background-color: #555;
  border-color: #777;
}

.form-body {
  max-width: 800px;
}