@charset "UTF-8";

input#modal2425 {
	display: none;
}

input#modal2425 + label {
	width: 100%;
	height: 120%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2147483646;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	animation-name: bgfade;
	animation-duration: 3s;
}

input#modal2425 + label div {
	position: fixed;
	width: 300px; /*画像の横幅*/
	top: 50%;
	left: 50%;
	margin: -217px 0 0 -150px; /*画像の高さと幅の半分 marginをマイナス */
	background: none;
	border: none;
	animation-name: popfade;
	animation-duration: 3s;
}

@keyframes popfade{
	0%{opacity: 0;}
	70%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes bgfade{
	0%{opacity: 0;}
	70%{opacity: 0;}
	100%{opacity: 1;}
}

input#modal2425 + label div img {
	filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.3));
}

input#modal2425 + label div::before {
	content: "× Close";
    position: absolute;
    bottom: -14%;
    right: 40%;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff;
}

input#modal2425:checked + label {
	display: none;
}