/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);  
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: .3s;
   z-index:200;

}

/* activeクラスのついたオーバーレイ */
.overlay.active {
  /* activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ */
.modal {
  max-width: 600px;
  width: 85%;
  padding: 15px 20px;
  background: #fff;
  border-radius: 7px;
  /* 位置の調整(真ん中に表示) */
  /*position: absolute;*/
  max-height:93%;
  overflow:auto;
  /* position: fixed; */
  /* top: 30px; /*50%;*/
  /* left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  transform: translate(-50%, 0);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: .3s;
  z-index:201;
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* activeクラスのついたモーダルウィンドウ */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
}

.modal h2 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 10px;
 /*  border-bottom: 1px solid #ff8cce;*/
}

.modal p {
  font-size: 0.9em;
}