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

/*モーダルを開くボタン*/
.js-modal-open{
  cursor: pointer;
}


/* これが無いとモーダルウィンドウ表示の際に余白が出る */
*{
  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: 80%;/* これが無いと「overflow:scroll」が利かない */
  width: 90%;/* これが無いと「overflow:scroll」が利かない */
  max-width: 900px;
  background: white;
  padding: 40px 40px 20px;
}
@media screen and (max-width: 767px) {
	.modal-content{
		height: 94%;
		width: 94%;
		max-width: 700px;
		padding: 30px 15px 15px;
	}
}

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

a.js-modal-close {
	position: absolute;
	right: 10px;
	top: 5px;
	color: #999;
	font-size: 30px;
	line-height: 1;
}
a:hover.js-modal-close:hover {
	color: #333;
	text-decoration: none;
}

.modal-content h4 {
	line-height: 1.6;
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.3em;
}
.modal-content h5 {
	line-height: 1.6;
}
.modal-content h6 {
	margin: 1em 0 0;
	line-height: 1.6;