.form-container {
  align-items: center;
  display: flex;
  flex-direction: column; /* 縦に並べるための設定 */
  /* margin-bottom: 20px; */
}

.form-container.search-form {
  width: 100%;
}

h1, h2 {
  text-align: center;
}


textarea {
  margin:  10px 0; /* 上下に余白を追加 */
  width: 100%;
  height: 80px;
  padding: 8px;
  border: 1px solid #ccc; /* ボーダーの設定 */
  border-radius:  4px; /* 角を丸める */
}

input {
  margin:  10px 0; /* 上下に余白を追加 */
  width: 80%;
  padding: 8px;
  border: 1px solid #ccc; /* ボーダーの設定 */
  border-radius:  4px; /* 角を丸める */
}

.post {
  max-width: 90%;  /* 投稿の最大幅を設定 */
  margin:  0px auto; /* 上下の余白を20px、左右の余白を自動にして中央揃え */
  padding:  20px; /* 内側の余白 */
  border: 1px solid bisque; /* 境界線 */
  /*border-radius:  8px; /* 角を丸める */
  background-color:  bisque; /* 背景色 */
  box-shadow: inset 0 0 4px rgba(0,0,0, 0.5) /* 影を追加 */
}


form {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 中央揃え */
}

button.submit-button {
  text-align:center;
  width: 100px;
  background-color: green;
  font-weight: bold;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

button.submit-button:hover {
  background: darkgreen;
}

button.search-button {
  text-align:center;
  width: 100px;
  height: 100%;
  background-color: green;
  font-weight: bold;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.search-button:hover {
  background: darkgreen;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

button.prev-button {
  width: 80px;
  font-weight: bold;
  background-color: gray;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

button.prev-button:hover {
  background-color: darkgray;
}

button.next-button {
  width: 80px;
  font-weight: bold;
  background-color: blue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

button.next-button:hover {
  background-color: darkblue;
}

button.delete-button {
  display: block; /* ボタンをブロック要素に */
  margin: 0 auto; /* 自動余白で中央揃えで */
  width: 80px;
  font-weight: bold;
  background-color: red;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

button.delete-button:hover {
  background-color: darkred;
}

.submit-button, .prev-button, .next-button, .delete-button {
  align-items: center;
  margin: 0 20px; /* ボタン同士の間隔を調整 */
}

.error {
  margin-top: 20px;
  text-align: center;
  color: red;
}

.active-page {
  font-weight: bold;
  color: blue;
  border-bottom: 2px solid blue;
}

.page-button {
  font-size: 18px;
  background-color: transparent; /* 背景を透明にする */
  border: none; /* ボーダーをなくす */
  color: blue;
  cursor: pointer;
  margin: 0 15px; /* 左右に10pxの余白を追加 */
}

.page-button:hover {
  text-decoration: underline;
}