/* モーダルの背景 */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
      }
  
      /* モーダル本体 */
      .modal-content {
        position: fixed;
        top: 58%; left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        max-height: 50vh; /* 高さ制限 */
        overflow-y: auto; /* ここがポイント！ */
        padding: 20px;
        width: 250px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        
      }
  
      .modal-close {
        float: right;
        cursor: pointer;
        font-weight: bold;
        font-size: 18px;
      }
      body.modal-open {
    overflow: hidden;
    pointer-events: none; /* 全体のクリックを無効化 */
  }
  
  body.modal-open .modal-overlay,
  body.modal-open .modal-content {
    pointer-events: auto; /* モーダル内だけクリック可能に */
  }