.Seasonings-edit-modal {
  transition: opacity 0.5s ease; /* アニメーションを追加 */
  pointer-events: none; /* クリックを無効化 */
  opacity: 0; /* 初期状態は透明 */
  max-width: 600px; /* 最大幅を600pxに制限 */
  position: fixed;
  top: 50%; /* 親要素の中央に配置 */
  left: 50%; /* 親要素の中央に配置 */
  width: 100%; /* 親要素の幅の80% */
  height: 100%; /* 親要素の高さの80% */
  transform: translate(-50%, -50%); /* 画面中央に配置 */
  background-color: rgba(24, 24, 24, 0.5); /* 半透明の背景 */
  text-align: center;
  z-index: 10; /* 他の要素より手前に表示 */
  color: #DDDDDD;
  border-radius: 0px; /* 角を丸くする */
  overflow: auto; /* コンテンツがオーバーレイの外にはみ出た場合にスクロールする */
}


.Seasonings-edit-modal-content {
  display: flex;
  flex-direction: column; /* 子要素を縦並びに */
  align-items: center; /* 子要素を横方向に中央寄せ */
  width: 90%;
  height: 100%;
  padding: 10px 0px;
  margin: 10px auto;  /* 上下20px、左右自動で中央寄せ */
}

.Seasonings-edit-modal.active {
  opacity: 1; /* 表示時に不透明にする */
  pointer-events: auto; /* クリックを有効化 */
}


.Seasonings-edit-modal h2 {
  font-size: 16px;
  margin: 2px 0px;
    font-family: NotoSerifJP, sans-serif;
  color: #EEE;
  font-weight: bold;
}

.Seasonings-edit-modal p {
  font-size: 12px;
  margin: 2px 0px;
    font-family: NotoSerifJP, sans-serif;
  color: #EEE;
}

.Seasonings-edit-modal textarea {
  font-size: 10px;
  width: 100%;
  height: 75%;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  line-height: 1.2; /* 行間を広げる */
    font-family: maka, sans-serif;
  background: rgba(255, 255, 255, 0.7) url("https://cabtrey.web.app/photoxx/image30.png") no-repeat center center;
  background-size: cover; /* 画像を全面に拡大 */
  backdrop-filter: blur(10px); /* 背景をぼかす */
}