/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 1000px;
}
@media (max-width:1200px) { .modal{width: 100%;} }

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -50%);
  overflow: scroll; /* はみ出た部分はスクロールさせる */
  height: 60%;/* これが無いと「overflow:scroll」が利かない */
  width: 70%;/* これが無いと「overflow:scroll」が利かない */
  background: white;
  padding: 40px;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

.js-modal-close{
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: xx-large;
  color:#aaaaaa;
}