/* モーダルダイアログを中央に配置 */
.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 2rem); /* モーダルの高さが画面の高さより小さくならないように */
}

@media (max-width: 768px) { /* スマホなどの小さい画面の場合 */
  .modal-dialog {
    min-height: calc(100% - 0.5rem); /* スマホではマージンを小さくする */
    margin: 0.25rem; /* 画面の端にぴったりくっつかないように少しマージンを入れる */
  }
}

/* モーダルボディをフレックスボックス化して中央に配置 */
.modal-body {
  padding: 0; /* モーダルボディのpaddingを削除 */
  display: flex;        /* 画像を中央に配置 */
  justify-content: center;  /* 水平方向 */
  align-items: center;      /* 垂直方向 */
  height: 100%;         /* 高さ100%にする */
}

/* 画像のサイズを調整 */
.modal-body img {
  max-width: 90vw;  /* 画像の最大幅を画面幅の90%に合わせる */
  max-height: 90vh; /* 画像の最大高さを画面の高さの90%に合わせる */
  height: auto;      /* 画像の縦横比を維持 */
}