.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex; 
    justify-content: center;
    align-items: center;
    opacity: 0; 
    transition: opacity 0.3s ease; 
  }
  .modal.show {
    display: block; /* 表示状態に切り替え */
    opacity: 1; /* フェードイン完了 */
  }
  .modal-content {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    width: 95%;
    max-width: 970px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease; 
  }
  .modal-content p{

    width: 100%;
    max-width: 970px;
    max-height: 650px;
  }
  .close {
    margin: 1rem 0;
    position: absolute;
    bottom: clamp(0.313rem, 0.17rem + 0.61vw, 0.625rem);
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    
  }
  .modal img{
    width: 100%;
    height: auto;
}
.close img{
    width:  clamp(1.875rem, 1.364rem + 2.18vw, 3rem);
}

.modal.show .modal-content {
    transform: translate(-50%, -50%) scale(1); /* 元のサイズに拡大 */
    opacity: 1; /* フェードイン完了 */
  }