@charset "utf-8";

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 160; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(230,230,230,0.9);
}
.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 65%;
  padding: 20px 30px;
  background-color: #fff;
  height : 70%; 
  overflow : auto; 
  line-height: 165%;
}
.closeModal {
  position: absolute;
  top: 1.0rem;
  right: 1.5rem;
  cursor: pointer;
  font-size: 400%;
  line-height: 1;
  color: #3c51cb;
}
button {
  color: #3c51cb;
  text-decoration: none;
  font-size: 15px;
  padding: 0;
  background: none;
  border: none;
  border-radius: none;
  cursor: pointer;
}
.modalContents {
	text-align: left;
}
.modalContents h2{
	font-size: 34px;
	line-height: 2;
	text-align: center;
	font-weight: 500;
	margin-bottom:1em;
}
.modalContents h3{
	font-size: 16px;
	margin-bottom: .4em;
}
.modalContents p{
	font-size: 15px;
	line-height: 220%;
	margin-bottom: 1.5em;
}
	.modalContents p.space{
		margin-bottom: 0;
	}
.modalContents p a{
	text-decoration: underline;
	transition: 0.2s;
	word-break: break-all;
}
	.modalContents ul.space{
		margin-bottom: 0;
	}
.modalContents ul{
	font-size: 15px;
	line-height: 220%;
	margin-bottom: 1.5em;
	list-style: none;
}
	.modalContents ul li{
		padding-left: 1em;
		text-indent: -1em;
	}


@media screen and (max-width: 768px) {
	.modalBg {
	  background-color: rgba(230,230,230,0.9);
	}
	.closeModal {
	  position: absolute;
	  top: 1.2rem;
	  right: .4rem;
	  cursor: pointer;
	  font-size: 350%;
	  line-height: 1;
	  color: #391d59;
	}
	.modalWrapper {
	  width: 90%;
	  padding: 5% 3%;
	  background-color: #fff;
	  height : 79%; 
	  overflow : auto; 
	  line-height: 165%;
	}
	.modalContents h2{
	  background-size: 105px 5px;
	  font-size: 6.4vw;
	}
	.modalContents h3{
		font-size: 3.8vw;
	}
	.modalContents p{
		font-size: 3.4vw;
	}
}