body {
  font-family: "Rounded Mplus 1c", sans-serif;
  background-color: #f7f3e9;
  color: #333;
  font-size: 18px; /* 全体の文字サイズを大きく */
}

.navbar {
  background-color: #7fb3d5;
}

.navbar-brand {
  font-weight: bold;
  color: #fff;
  font-size: 24px; /* ナビゲーションの文字サイズを大きく */
}

.navbar-nav .nav-link {
  color: #fff;
  font-size: 18px; /* ナビゲーションリンクの文字サイズを大きく */
}

.navbar-nav .nav-link:hover {
  color: #ffb347;
}

.container {
  padding: 20px;
  /* background-color: #fff; */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.card {
  background-color: #fffaf0;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
}

.card-body {
  padding: 20px;
}

.card-title {
  color: #7fb3d5;
  font-weight: bold;
  font-size: 20px; /* カードタイトルの文字サイズを大きく */
}

.btn-primary {
  background-color: #7fb3d5;
  border-color: #7fb3d5;
  font-size: 18px; /* ボタンの文字サイズを大きく */
}

.btn-primary:hover {
  background-color: #5a9bd3;
  border-color: #5a9bd3;
}

.btn-outline-danger {
  color: #ffb347;
  border-color: #ffb347;
  font-size: 18px; /* ボタンの文字サイズを大きく */
}

.btn-outline-danger:hover {
  background-color: #ffb347;
  border-color: #ffb347;
  color: #fff;
}

.alert-success {
  background-color: #dff0d8;
  color: #3c763d;
  border-color: #d6e9c6;
}

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ビューポートの高さをカバー */
}

.footer {
  /* background-color: #f8f9fa; */
  padding: 1rem 0;
  text-align: center;
  margin-top: auto; /* コンテンツが少ない場合でもフッターを下部に配置 */
  width: 100%; /* フッターを横いっぱいに表示 */
  position: relative; /* 他のコンテンツと重ならないように相対配置 */
}

.modal-dialog {
  max-width: 600px; /* 必要に応じて幅を調整 */
  margin: 1.75rem auto; /* モーダルを中央に配置 */
}

.modal-body input,
.modal-body textarea {
  width: 100%; /* 入力フィールドをモーダルの幅に合わせる */
}

.modal-body .form-group {
  margin-bottom: 1rem;
}

.modal-body label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.modal-body input,
.modal-body textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.modal-footer {
  display: flex;
  justify-content: space-between; /* ボタンを左右に配置 */
  align-items: center;
}

.modal-footer .btn {
  min-width: 100px; /* ボタンの最低幅を設定 */
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.ui-datepicker {
  z-index: 1050; /* モーダルのz-indexよりも高く設定 */
  width: auto;
  padding: 0.5rem;
}

.ui-datepicker .ui-datepicker-header {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem;
  border-radius: 4px 4px 0 0;
}