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

	
/*モーダル
--------------------- */
.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 270;
}
.modal.active{
    display: block;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal___content{
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	max-width: 1000px;
    width: 80%;
}	
.modal___content .cls_prnt{
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}	

.modal___content .cls_prnt .txt_area{
	width: 100%;
	height: calc(100vh - 200px);
	background-color: #fff;
	padding: 60px 60px;
	overflow-y: scroll;
}
.modal___content .cls_prnt .txt_area p{
	font-size: 1.5rem;
}

.modal___content a.js-modal-close{
	position: absolute;
	top:-50px;
	right:0;
	width: 30px;
	height: 30px;
	transition: all .4s;
}	
.modal___content a.js-modal-close:hover{
	opacity: 0.7;
	}		
	.modal___content a.js-modal-close img{
		object-fit: contain;
	}		



/* max 767px */
@media screen and (max-width: 767px) {


/*モーダル
--------------------- */
	
body.noscroll {
    overflow: hidden;
}
	
.modal {
	z-index: 270;
}
.modal___content {
    top: 60px;
    left: 50%;
    transform: translate(-50%,0);
    width: 90%;
}

.modal___content .cls_prnt .txt_area{
	width: 100%;
	padding: 20px 20px;
	height: calc(100vh - 100px);
}
	.modal___content .cls_prnt .txt_area p{
		font-size: 1.2rem;
		letter-spacing: 0.04rem;
	}

.modal___content a.js-modal-close{
	position: absolute;
	top:-30px;
	right:0;
	width: 20px;
	height: 20px;
}		
		
	.modal___content a.js-modal-close img{
		width: 100%;
		object-fit: contain;
	}



}