@charset "UTF-8";

/* === モーダル非表示（初期） ============================== */
.modalNoDisp {
  display : none;
}

/* === モーダルバックグランド ============================== */
.modalBg {
  position   : fixed;
  overflow   : hidden;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background : radial-gradient(circle at 50% 50%,
                               rgba(0, 0, 0, 0.70),
                               rgba(0, 0, 0, 0.50));
  z-index    : 10;
}

/* === モーダルバックグランド：OPEN時のアニメーション ====== */
.modalBgOpen {
  animation  : bgOpenAnime 0.3s ease;
}
@keyframes bgOpenAnime {                     /* フェードイン */
   0% { opacity: 0 }
 100% { opacity: 1 }
}

/* === モーダルバックグランド：CLOSE時のアニメーション ===== */
.modalBgClose {
  bottom     : 100%;
  animation  : bgCloseAnime 0.3s ease;
}
@keyframes bgCloseAnime {                     /* フェードイン */
   0% { opacity: 1; bottom: 0 }
 100% { opacity: 0; bottom: 0 }
}

/* === モーダルウィンドウ ==================================== */
.modalBg .modalWindow {
/* モーダルウィンドウを中心に表示 */
  width:80%;
  position      : absolute;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%);
  z-index       : 11;
max-height: 100vh;
	overflow:auto;
	overflow-y:auto;
	
/* モーダルウィンドウ内のレイアウト */
  text-align    : center;
}

.modalWindow::-webkit-scrollbar{width:10px;}
.modalWindow::-webkit-scrollbar-track{background:#ddd;}
.modalWindow::-webkit-scrollbar-thumb{background:lightgreen;}

#windowArea{
	background-color:white;
	padding:10px;
}