/* 共通の背景色とボディの設定 */
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: #68a4ff;
  --btn-to: #0d6efd;
  --btn-hover-from: #4992ff;
  --btn-hover-to: #0569ff;
  --btn-active: #0157d8;
}

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

/* 成功、設定済み */
.btn-green {
  --btn-from: #7ff77f;
  --btn-to: #23b923;
  --btn-hover-from: #33fa33;
  --btn-hover-to: #009b00;
  --btn-active: #00910c;
}

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

/* 設定モーダル */
.btn-project_setting {
  --btn-from: #a97be6;
  --btn-to: #5c00d4;
  --btn-hover-from:   #8447d4;
  --btn-hover-to:  #43009b;
  --btn-active: #2e006b;
}
/* お知らせ */
.btn-notice {
  padding: 0.4rem 0.8rem;
  --btn-from: #ffef93;
  --btn-to: #ffd900;
  --btn-hover-from: #ffda62;
  --btn-hover-to: #ffae00;
  --btn-active: #ffa500;
}

/* 削除 */
.btn-delete {
  --btn-from: #ff7676;
  --btn-to: #da2436;
  --btn-hover-from: #ff6767;
  --btn-hover-to: #d80d21;
  --btn-active: #ac1524;
}
/* ストリートビュー,設定ページ移動用 */
.btn-pink {
  --btn-from: #dbb3ce;
  --btn-to: #ed10a3;
  --btn-hover-from: #da84bd;
  --btn-hover-to: #ad0374;
  --btn-active: #d32f9c;
}

/* 追加ボタン用 */
.btn-black {
  --btn-from: #acacac;
  --btn-to: #000000;
  --btn-hover-from: #5c5c5c;
  --btn-hover-to: #000000;
  --btn-active: #000000;
}

/* ズームボタン用 */
.btn-orange {
  --btn-from: #f7ba98;
  --btn-to: #ff5e00;
  --btn-hover-from: #ff9f68;
  --btn-hover-to: #ff650c;
  --btn-active: #b34100;
}