@charset "utf-8";
.modal {
  display: none;
}
.modal.is-open {
	display: block;
}
.modal__overlay {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 999;
}
.modal__container {
	background: white;
	padding: var(--space-10);
	border-radius: 0;
	max-width: 1200px;
	width: 90vw;
	max-height: 90vh; /* 追加 */
	overflow-y: auto;  /* 追加 */
	position:relative;
}
.modal__header,
.modal__footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.modal__close {
	display:block;
	position:absolute;
	top:10px;
	right:10px;
	border:1px solid #222;
	color:#222;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	cursor: pointer;
	border-radius: 50%;
}
.modal__close:hover{
	background-color:#222;
	color:#FFF;
	}