/*-------------------------------------------
mordal
-------------------------------------------*/

/* モーダルの基本スタイル */
.modal {
  display: none; /* 最初は隠す */
  position: fixed;
  z-index: 2000; /* コンテンツの上に表示 */
  left: 0;
  top: 0;
  width: 100%; /* フル幅 */
  height: 100%; /* フル高さ */
  overflow: auto; /* スクロールバーを追加 */
  background-color: rgb(0, 0, 0); /* 背景色 */
  background-color: rgba(0, 0, 0, 0.6); /* 黒の背景色 with opacity */
}

/* モーダルコンテンツ */
.modal-content {
  border-radius: 10px;
  width: 300px;
  position: absolute;
  /* top: clamp(10px, 13vw, 150px); */
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 476px; */
}

/* クローズボタン */
.close {
    color: #fff;
    float: right;
    /* font-size: 24px; */
    font-size: 16px;
    position: absolute;
    top:-1px;
    right: 0px;
    background: #888;
    padding: 10px;
    border-radius: 0 8px 0 0;
    font-weight: 800;
}


.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*-------------------------------*/