/* モーダルの背景 */
.modal {
  display: none; /* デフォルトでは非表示 */
  position: fixed; /* 画面に固定 */

  z-index: 1; /* 他の要素の上に表示 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  /*max-width: 800px;*/
  max-width: 900px;
  width: 100%; /* 全幅 */
  height: 100vh; /* 全高さ */
  overflow: auto; /* スクロール可能 */
  /*background-color: lemonchiffon;*/
  /* background-color: black;
   /* background-color: rgb(0,0,0); /* 背景色 */
  /* background-color: rgba(255, 250, 205, 0.7); /* 透過 */
  background-color: lightgrey;
  animation: slide-up 0.5s ease forwards;
  /*animation: fade-in 1s;
    animation-fill-mode: forwards;*/
}
@keyframes slide-up {
  0% {
    opacity: 1;
    transform: translateY(80%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* モーダルコンテンツ */
.modal-content {
  background-color: #ededed;
  margin: 0%; /*auto; /* 中央に配置 */

  padding-top: 20px;
  padding-bottom: 30px;
  padding-left: 1%;
  padding-right: 1%;
  border: 1px solid #888;
  width: auto; /*96%; /* 幅 */
  text-align: center;
}
.modal_inner {
  text-align: center;
}
.modal_inner_title {
  color: #0424f6;
  font-weight: bold;
  font-size: large;
}
.modal_inner_date {
  color: #4a4a4a;
  font-weight: bolder;
  font-size: medium;
  text-align: left;
}

.modal_inner img {
  width: 96%;
}
.modal_inner p {
  text-align: left;
  color: #000000;
}
.modal_inner h3 {
  text-align: center;
  color: blue;
}
.modal_inner h4 {
  text-align: left;
  color: darkorchid;
}
.close_button {
  margin: auto;
  width: 50%;

  background-color: rgb(32, 32, 32);
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 20px 5px 20px;
}