.custom-form {
  background-color: #f8f9fa !important; /* 例: 薄いグレー */
  padding: 20px;
  border-radius: 8px;
}

/* フォーム内の入力欄の背景色と文字色を変更 */
.custom-form input,
.custom-form textarea {
  background-color: #ffffff !important; /* 入力欄の背景を白に */
  color: #333333 !important; /* 文字色を黒に */
  border: 1px solid #cccccc !important; /* 枠線を薄いグレーに */
  padding: 10px;
  border-radius: 5px;
  width: 100%;
}

/* フォーム内のボタンの色を変更 */
.custom-form button {
  background-color: #007bff !important; /* 例: 青色 */
  color: white !important;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

/* フォーム内のボタンのホバー時 */
.custom-form button:hover {
  background-color: #0056b3 !important;
}

/* フォームがダークモードボタンを覆わないようにする */
.custom-form {
  position: relative;
  z-index: 1; /* 低い値にして後ろに配置 */
  pointer-events: auto !important; 
}

/* ダークモードの切り替えボタンを前面に */
.theme-toggle {
  position: relative;
  z-index: 9999 !important; /* フォームより前に出す */
  pointer-events: auto !important; /* クリックできるように */
}