@charset "utf-8";

.js-modal-open {
	cursor: pointer;
}

.modal{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 1000;
	display:none;
}

.modal_bg{
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100vh;
	position: absolute;
}

.modal_content{
	background: #fff;
	width: 50%;
	border-radius: 8px;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.modal_content .inner {
	padding: 20px;
	text-align: center;
}
.js-modal-close {
	line-height: 30px;
}
@media screen and (max-width:1024px) {
	.modal_content{
	    max-width: 780px;
    height: 850px;
    width: 100%;
}
}
@media screen and (max-width:768px) {
	.modal_content{
	max-width: 640px;
    width: 100%;
    height: 810px;
}
}
@media screen and (max-width:414px) {
	.modal_content {
    max-width: 385px;
    width: 100%;
    height: 686px;
}
}
@media screen and (max-width:375px) {
   .modal_content {
    max-width: 311px;
    width: 100%;
    height: 637px;
}
}
@media screen and (max-width:360px) {
   .modal_content {
    max-width: 311px;
    width: 100%;
    height: 575px;
}
}
@media screen and (max-width:320px) {
   .modal_content {
    max-width: 280px;
    width: 100%;
    height: 523px;
}
.modal_content .inner {
    padding: 13px;
}
}