@charset "utf-8";
/* CSS Document */
/*-----*/
 
.modal_box {
    position: fixed;
    z-index: 99999;
    display: none;
    width: 90%;
    max-width: 840px;
	max-height: 80vh;
    margin: 0;
    padding: 0.5em;
    border: 4px solid #ee86b4;
	border-radius: 0.5em;
    background: #fff;
    box-sizing: border-box;
	overflow-y: scroll;
}

.modal_box h3 img{
	height: 2
		em;
}

.modal_box .modal_cont{
	width: 70%;
	margin: 0 auto;
	padding: 1em;
	box-sizing: border-box;
}

.modal_box .modal_cont .modal_lead{
	color: #df1a7a;
	font-size: 1.25em;
	margin-bottom: 1em;
	padding: 0 2em;
}

.modal_box .modal_cont .modal_img img{
	width: 100%;
}

.modal_box .modal_cont .modal_extra{
	color: #df1a7a;
	background: #ffeaf4;
	margin-top: 1em;
	padding: 1em;
}

.modal_box .modal_cont .modal_text{
	margin-top: 1em;
}

.modal_box .modal_cont .modal_btn{
	width: 60%;
	text-align: center;
	margin: 1em auto 0;
	background: #ee86b4;
	border-radius: 0.5em;
}

.modal_box .modal_cont .modal_btn .modal_close {
	display: block;
	padding: 0.5em 1em;
}
 
.modal_close i {
}
 
.modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88888;
    display: none;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.7);
}


@media screen and (min-width: 641px) {
	
}

@media screen and (max-width: 640px) {
	.modal_box .modal_cont{
		width: 100%;
	}
	
	.modal_box .modal_cont .modal_btn .modal_close {
		display: block;
		padding: 1em 1em;
	}

}