/* 共通の背景色とボディの設定 */
body {
    background-color: #d7f4ff; /* 薄めの青背景 #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; /* タイトルの下に余白を追加 */
    --bs-btn-active-color:#fff; /* 文字色を白に固定 */
  }
/* hover / active / focus でも文字色を固定 */
.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible {
  color: #fff;
}


/* フォームグループのスタイル  */
.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;
  }
}



/* 下線を消す */
a {
  text-decoration: none;
}
/* 共通ボタンスタイル */

.btn-gradient {
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  padding: 0.5rem 1rem;

  /* 文字の縁取り */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
}

.btn-gradient:hover {
  background: linear-gradient(135deg, var(--btn-hover-from), var(--btn-hover-to));
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.btn-gradient:active {
  background: linear-gradient(135deg, var(--btn-active), var(--btn-active));
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
/* メイン */
.btn-main {
  --btn-from: #418cfd;
  --btn-to: #0d6efd;
  --btn-hover-from: #3284fd;
  --btn-hover-to: #0569ff;
  --btn-active: #0157d8;
}

/* データ */
.btn-data {
  --btn-from: #9defff;
  --btn-to: #1fdaff;
  --btn-hover-from: #78c8d8;
  --btn-hover-to: #0ec4e9;
  --btn-active: #00aacc;
}

/* 進捗 */
.btn-report {
  --btn-from: #74ecb4;
  --btn-to: #23b973;
  --btn-hover-from: #54c791;
  --btn-hover-to: #15af67;
  --btn-active: #0ab163;
}

/* キャンセル */
.btn-cancel {
  --btn-from: #9fa3a6;        /* 少し濃く */
  --btn-to: #7f8386;          /* 影側をしっかり */
  --btn-hover-from: #8b8f93;
  --btn-hover-to: #6f7376;
  --btn-active: #5c636a;      /* 押下時ははっきり暗く */
}

/* 設定ページ移動 */
.btn-settings {
  --btn-from: #b8ee3f;
  --btn-to: #98d400;
  --btn-hover-from:   #b2f02e;
  --btn-hover-to:  #89be01;
  --btn-active: #7dbb01;
}
/* 設定モーダル */
.btn-project_setting {
  --btn-from: #a889ff;
  --btn-to: #7f5af0;
  --btn-hover-from: #9d7bfa;
  --btn-hover-to: #754df0;
  --btn-active: #754df0;
}
/* お知らせ */
.btn-notice {
  padding: 0.4rem 0.8rem;
  --btn-from: #ffdc17;
  --btn-to: #ffbc14;
  --btn-hover-from: #ffd900;
  --btn-hover-to: #ffb700;
  --btn-active: #ffa500;
}

/* 削除 */
.btn-delete {
  --btn-from: #ff7676;
  --btn-to: #da2436;
  --btn-hover-from: #ff6767;
  --btn-hover-to: #d80d21;
  --btn-active: #ac1524;
}