@charset "UTF-8";
/* base
====================================================*/
* {
	box-sizing: border-box;
}

img {
	width: 100%;
	height: auto;
}

/* layout
====================================================*/
#wrapper {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

h2 + p {
	margin-bottom: 80px;
}

h2 {
	font-size: 1.5em;
}
p {
	padding: 15px;
}

.loop_css1 {
	position: relative;
	display: flex;
	width: 100vw;
	height: calc(100vw * 2/3);
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
}

.loop_css1 img {
	width: auto;

}

@media screen and ( min-width: 900px ) {
	.loop_css1 {
		height: calc(100vw * .17);
	}
	.loop_css1 img {
		width: auto;
		min-width: 110vw;
		height: 100%;
	}
}

.loop_css1 img:first-child {
	-webkit-animation: loop 50s -25s linear infinite;
	animation: loop 50s -25s linear infinite;
	-webkit-backface-visiblity: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.loop_css1 img + img {
	-webkit-animation: loop2 50s  linear infinite;
	animation: loop2 50s linear infinite;
}

/* Animation */
@-webkit-keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

/* 画像は2回読み込む
ループする画像がウィンドウ幅より小さくなると、ループの繰り返しのなかで余白が生じる。
ウィンドウ幅が大きい場合のための対処。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@-webkit-keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}

@keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}



footer {
	background: #555;
	line-height: 3;
	max-width: 100%;

}