@charset "UTF-8";
/* CSS Document */

*{
  margin: 0;
  padding: 0;
}

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

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

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

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


#mdl_in .inne{position: relative;}
#mdl_in .closebtn{position: absolute; top: 0; right: 0;}
#mdl_in .closebtn img{width: 30px;}

#mdl_in .modal-content{border:solid 8px #73c6c8;}

#mdl_in h3{display: flex; justify-content: flex-start; align-items: center; font-size: 27px; margin-bottom: 15px;}
#mdl_in h3>div{font-size: 20px;line-height: 26px;font-weight: 600;color:#fff;background: #73c6c8;border:4px solid #73c6c8;text-align: center;height: 34px;width: 34px;border-radius: 50%;margin-right: 12px;letter-spacing: -0.1rem;padding-right: 0.12rem; letter-spacing: -0.1em; font-family : mgenplus;}

@media(max-width: 768px){

.modal-content{  height: 50%;  width: 70%; padding: 8px 10px;}
#mdl_in h3{font-size: 22px; line-height: 1.2em;}
#mdl_in .inne{font-size: 14px; padding: 20px 0 0;}
#mdl_in h3 span{display: block; font-size: 0.8em; font-feature-settings: "palt";}
#mdl_in .closebtn{top: -5px; right: -5px;}


}