body {
	margin: 0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: top;
}



.p-loader {
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: #9b9dbb;
}
body.is-loaded .p-loader {
	animation: load_complete 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.p-loader.is-loaded {
	display: none;
}
.p-loader-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	transform-origin: top left;
}
.p-loader-circle-parts {
	transition: stroke-dashoffset 10s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	fill: transparent;
	stroke: #fff;
	stroke-width: 2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
}
.is-animated .p-loader-circle-parts {
	opacity: 0;
	transform: translateY(5%);
}
.p-loader-circle-parts-bg {
	transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	fill: transparent;
	stroke: #70709c;
	stroke-width: 2px;
	stroke-dasharray: 500;
	stroke-dashoffset: 0;
}
.is-animated .p-loader-circle-parts-bg {
	opacity: 0;
	transform: translateY(5%);
}
@keyframes load_complete {
	0% {}
	100% {
		opacity: 0;
	}
}



.images_contents {
	max-width: 728px;
	margin: 0 auto;
	padding: 20px;
	background: #f2f2f2;
}
.images_title {
	font-weight: bold;
}
.hover_image_wrap {
	display: flex;
	margin: 0 0 3em;
}
.col04 .hover_image {
	width: 24%;
}
.col03 .hover_image {
	width: 32.4%;
}
.col02 .hover_image {
	width: 49.3%;
}
.hover_image {
	margin: 0 8px 0 0;
}
.hover_image:last-child {
	margin: 0;
}
.copyright {
	text-align: center;
	padding-top: 2em;
	font-size: 14px;
}
@media screen and (max-width: 640px) {
	.hover_image_wrap {
		flex-wrap: wrap;
	}
	.col04 .hover_image,
	.col03 .hover_image,
	.col02 .hover_image {
		width: 100%;
	}
	.hover_image {
		margin: 0 0 10px 0;
	}
}