/* モーダル */
.modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10000000;
	overflow: auto;
	animation-name: show;
	animation-duration: 1s;
	background-color: rgba(0, 0, 0, 0.4);
}

@keyframes show {
	0% {
		display: none;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}

.modal-content {
	display: flex;
	flex-flow: column;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 30%;
}

.close-button-detail {
	position: relative;
	margin-right: 0;
}

.close-button {
	color: #fefefe;
	float: right;
	font-size: 30px;
	font-weight: bold;
	background-color: #aaaaaa;
	border-radius: 40px;
	width: 50px;
	height: 50px;
	text-align: center;
	margin: 0;
}

@media (any-hover: hover) {
	.close-button:hover,
	.close-button:focus {
		color: #fefefe;
		text-decoration: none;
		cursor: pointer;
		background-color: #000;
	}

}

.modal-img {
	margin: auto;
	text-align: center;
}

/* モーダルSP */
@media only screen and (max-width: 767.98px) {
	.modal-content {
		width: 90%;
	}

	.close-button {
		font-size: 25px;
		width: 40px;
		height: 40px;
	}
}