@charset "utf-8";

#pop_c {
	width: 100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:200;
}
#hidden {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 640px;
	height:490px;
	text-align:center;
	background:none;

}

#hidden img {
	width:100%;
	height:100%;
	overflow:hidden;
	
}


.br {
	width:40px;
	height:40px;
	position: absolute;
	top: calc(50% - 40px);
	right: 8%;
}
.bl {
	width:40px;
	height:40px;
	position: absolute;
	top: calc(50% - 40px);
	left: 8%;
}
#gallery_close {
			width:50px;
			height:50px;
			background:transparent;
			position:absolute;
			right:18px;
			top:20px;
}
.close_1 {
			width:80%;
			height:2px;
			background:#fff;
			display:block;
			transform:rotate(-45deg);
			position:absolute;
			top:50%;
			left:10%;
}
.close_2 {
			width:80%;
			height:2px;
			background:#fff;
			display:block;
			transform:rotate(45deg);
			position:absolute;
			top:50%;
			left:10%;
}
#gallery_left {
			width:80%;
			height:80%;
			border-top:2px solid #fff;
			border-left:2px solid #fff;
			background:transparent;
			position:absolute;
			/*上下の位置は後で中央になるように変更*/
			top:50%;
			left:50%;
			transform:rotate(-45deg);
}
#gallery_right {
			width:80%;
			height:80%;
			border-bottom:2px solid #fff;
			border-right:2px solid #fff;
			background:transparent;
			position:absolute;
			/*上下の位置は後で中央になるように変更*/
			top:40%;
			right:50%;
			transform:rotate(-45deg);
}
#gallery_close:hover,
#gallery_left:hover,
#gallery_right:hover {
			cursor: pointer;
}
@media (max-width:768px) {
			#hidden {
					width:100%;
					height:67vw;
			}
			.bl {
					left:0%;
			}
			.br {
					right:0%;
			}
}