@charset "UTF-8";

	.top_area {
		width: 100%;
		max-width: 1280px;
		height: 600px;
		position: relative;
		background-image: url(../img/top/top_back.png);
		background-repeat: repeat-x;
		margin: 0 auto;
		overflow: hidden;
		box-shadow: 0px -5px 15px 0px inset #666;
	}
	.top_logo {
		max-width: 270px;
		height: 160px;
		position: absolute;
		top: 1em;
		left: 1em;
		z-index: 6;
	}
	.top_img_A {
		width: 100%;
		max-width: 1280px;
		height: 150px;
		position: absolute;
		bottom: 2%;
		z-index: 5;
	}
	
@media screen and (max-width: 768px) {
	.top_img_A {
 		display: flex;
		align-items: flex-end;
	}
	.top_img_A img:first-child {
		max-height: 150px;
		animation: slide1 120s -60s linear infinite;
	}
	.top_img_A img:last-child {
		max-height: 150px;
		animation: slide2 120s linear infinite;
	}
}

	.top_img_B {
		width: 100%;
		max-width: 1280px;
 		display: flex;
		align-items: flex-end;
		height: 280px;
		position: absolute;
		top: 2%;
		z-index: 3;
	}
	.top_img_B img:first-child {
		animation: slide1 300s -150s linear infinite;
	}
	.top_img_B img:last-child {
		  animation: slide2 300s linear infinite;
	}
	.top_img_C {
		width: 100%;
		max-width: 1280px;
 		display: flex;
		align-items: flex-end;
		height: 280px;
		position: absolute;
		top: 6%;
		z-index: 2;
	}
	.top_img_C img:first-child {
		animation: slide1 400s -200s linear infinite;
	}
	.top_img_C img:last-child {
		  animation: slide2 400s linear infinite;
	}
	.top_img_D {
		width: 100%;
		max-width: 1280px;
 		display: flex;
		align-items: flex-end;
		height: 280px;
		position: absolute;
		top: 0;
		z-index: 1;
	}
	.top_img_D img:first-child {
		animation: slide1 120s -60s linear infinite;
	}
	.top_img_D img:last-child {
		  animation: slide2 120s linear infinite;
	}
	.loop_bld {
		width: 100%;
		max-width: 1280px;
		display: flex;
		align-items: flex-end;
		height: 280px;
		overflow: hidden;
		position: absolute;
		bottom: 0px;
		z-index: 4;
	}
	.loop_bld img {
		width: auto;
		height: 100%;
	}
	.loop_bld img:first-child {
		animation: slide1 200s -100s linear infinite;
	}
	.loop_bld img:last-child {
		  animation: slide2 200s linear infinite;
	}

	@keyframes slide1 {
		0% {
			transform: translateX(100%);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes slide2 {
		0% {
			transform: translateX(0);
		}
		to {
			transform: translateX(-200%);
		}
	}
	@keyframes slide3 {
		0% {
			transform: translateX(100%);
		}
		50% {
			transform: translateX(50%);
		}
		100% {
			transform: translateX(100%);
		}
	}

.preview h1, .preview h2 {
	font-size: 1.5rem;
	font-weight: 500;
}
.preview h3, .preview h4 {
	font-size: 1.2rem;
	font-weight: 500;
}
.preview h5, .preview h6 {
	font-size: 1rem;
	font-weight: 500;
}