@charset "UTF-8";

#modal_area {
	display: none;
}

/*infoエリアをはじめは非表示*/
#info {
	display: none;
}

.modaal-wrapper {
	background: rgb(34 34 34 / 90%);
}

/*モーダルの横幅*/
.modaal-container {
	max-width: 600px;
}

/*モーダルの上の余白*/
@media screen and (max-height: 1000px) {
	.modaal-inner-wrapper {
		padding-top: 70px;
	}
}

.modaal-wrapper .modaal-close {
	position: absolute;
	background: #005fb9;
}

/*モーダルのボタンの色*/
.modaal-close:after,
.modaal-close:before {
	background: #fff;
}

@media screen and (max-width: 500px) {

	.modaal-close:after,
	.modaal-close:before {
		top: 7px;
		left: 13px;
		width: 4px;
		height: 17px;
		border-radius: 2px;
	}
}

.modaal-wrapper .modaal-close:hover {
	background: #b8e0f2;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: #005fb9;
}

@media screen and (max-width: 500px) {
	.modaal-close {
		right: 10px;
		top: 10px;
		width: 30px;
		height: 30px;
	}
}