@charset "UTF-8";

.lock {
    overflow:auto;
}

.modal-content {
	position:relative;
	display:none;
	z-index:2;
	width: 600px;
	margin:0;
	overflow-y: auto;
}
.modal-content a{
	color: #fff !important;
	text-decoration: underline;
}
.modal-content a:hover{
	text-decoration: none;
	color: #fff !important;
}
.modal-close {
	margin:0 7px 30px 0;
	padding:0;
	float: right;
	display: inline-block;
}

.modal-overlay {
	z-index:1;
	display:none;
	position:fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	background-color:rgba(255,255,255,0.75);
	overflow: auto;
}
.modal-wrap {
	z-index:2;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
}

.modal-open {
	color:#00f;
	text-decoration:underline;
}

.modal-open:hover {
	cursor:pointer;
	color:#f00;
}


.modal-close:after{
	content: "";
	clear: both;
	display: block;
}

/* D&I */
.modal{
	clear: both;
	background-color: #fff;
	margin: 0;
	padding: 30px 21px 18px;
	border-radius: 8px;
}
#q1 .modal{
	background-color: #e90e8d;
}
#q2 .modal{
	background-color: #64b900;
}
#q3 .modal{
	background-color: #31c373;
}

.modal p.question{
	margin: 0 0 0 2px;
	overflow: hidden;
	font-size: 24px;
	font-weight:normal;
	line-height: 1.6;
	color: #FFFFFF;
}
.modal p.question img{
	float: left;
	margin: 0 16px 0 0;
}
.answer p{
	font-size: 18px;
	font-weight: normal;
	margin: 35px 0 0;
	line-height: 1.8;
	color: #fff;
}
.answer p + p:not(.closeBtn){
	margin: 40px 0 0;
}
.answer p span{
	font-size: 12px;
	line-height: 1.2;
	display: inline-block;
}
.answer a{
	color: #fff;
}

.answer .closeBtn{
	clear: both;
	text-align: center;
	position: relative;
	margin: 0px 0 0px 0;
	cursor: pointer;
	padding: 38px 0 0;
}



@media screen and (max-width: 767px) {
	.modal-content {
		width: 80%;
	}
.modal p.question{
	margin: 0 0 0 2px;
	font-size: 18px;
	line-height: 1.4;
}
.modal p.question img{
	float: left;
	margin: 0 16px 0 0;
	width: 32px;
	height: auto;
}
.answer p{
	font-size: 14px;
	margin: 20px 0 0;
}
.answer p + p:not(.closeBtn){
	margin: 20px 0 0;
}
.answer p span{
	font-size: 10px;
}
.answer .closeBtn{
	padding: 18px 0 0;
}

}
