/* 共通の背景色とボディの設定 */
body {
    background-color: #c0fdff; /* 薄めの青背景 #c0fdff*/
    margin: 0; /* ボディの余白を削除 */
    font-family: Arial, sans-serif; /* フォントを指定 */
  }
  
/* 見出し文字の設定 */
  h1 {
    color: #64a7ff !important; /* 色を設定 */
    font-weight: bold; /* 太字にする */
    font-size: 3em; /* フォントサイズを大きく設定 */
    margin-bottom: 1.5rem; /* タイトルの下に余白を追加 */
  }

  h2 {
    margin-bottom: 1.5rem; /* タイトルの下に余白を追加 */
  }

  /* ボタンのスタイル */
  .btn {
    display: inline-block; /* ボタンをインラインブロック要素にする */
    padding: 0.5rem 1.0rem; /* 内側の余白を設定 */
    border: none; /* 枠線を削除 */
    border-radius: 0.5rem; /* 角を丸くする */
    font-size: 1rem; /* フォントサイズを設定 */
    text-align: center; /* テキストを中央揃え */
    cursor: pointer; /* カーソルをポインターにする */
    margin-bottom: 0.5rem; /* タイトルの下に余白を追加 */
  }



/* フォームグループのスタイル  */
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 300px; /* 適切な幅を指定 */

}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; /* 入力フィールドもフォームグループ内で最大幅を設定 */
  box-sizing: border-box; /* パディング込みでの幅調整 */
}
/* フォームラベルのスタイル */
.form-group label {
  color: #64a7ff; /* 文字色を変更 */
  font-size: 1.5rem; /* フォントサイズを変更 */
  font-weight: bold; /* ラベルを太字にする */
  margin-bottom: 0.5rem; /* ラベルの下に余白を追加 */
}

/* フォームチェックラベルのスタイル */
.form-check-label {
  color: #333; /* ラベルの文字色を変更 */
  font-weight: bold; /* ラベルを太字にする */
}
/*project-detail用のスタイル*/

/* メッセージのスタイル */
.info-messages {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none; /* 初期状態では非表示 */
  max-width: 80%; /* メッセージが長すぎないように制限をつける */
}
.messages{
  margin-top: 1rem;
}
/* メッセージのアニメーション */
.fade-out {
  animation: fadeOut 3s forwards; /* 3秒でフェードアウト */
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}