body html{
	margin: 0 !important;
	padding: 0!important;
}
.test1{
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 50%;
}
.test2{
	top: 30%;
	left: 0;
	width: 100%;
	position:absolute;
}
.test2 img{
	animation:100s linear infinite rotation;
}
.test3{
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position:absolute;
	animation:30s linear infinite name;
}
.test4 {
    top: 15%;
    left: -20%;
    width: 140%;
    position: absolute;
}
.test4 img{
	animation:10s linear infinite rotation;
}
.test5 img{
	animation:150s linear infinite rotation;
}
.test5{
	top: 10%;
	left: -15%;
	width: 130%;
	position:absolute;
}
.test6 img{
	animation:3s linear infinite rotation;
}
.test6{
	top: 53%;
	left: 15%;
	width: 70%;
	position:absolute;
}
.test9 img{
	animation:50s linear infinite rotation;
}
.test9{
	top: -57%;
	left: -40%;
	width: 180%;
	position:absolute;
}

@keyframes rotation{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(-360deg); }
}
@keyframes name {
  0% { background:#58e4f9; }
  25% { background:#58e4f9; }
  35% { background: #ea8c17; }
  45% { background:#000; }
  80% { background:#000; }
  90% { background: #ea8c17; }
  100% { background: #58e4f9; }
}
.test7{
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position:absolute;
	animation:50s linear infinite slide1;
}
@keyframes slide1 {
	0% {opacity: 1;}
	25% {opacity: 0.5;}
	50% {opacity: 0;}
	75% {opacity: 0.5;}
	100% {opacity: 1;}
}
.test8{
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position:absolute;
	animation:50s linear infinite slide2;
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0.5;}
	50% {opacity: 1;}
	75% {opacity: 0.5;}
	100% {opacity: 0;}
}
.test10{
	display: none;
}
@media all and (-ms-high-contrast: none) {
  /* ここに書く */
.test10{
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 50%;
}
	.test11{
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position:absolute;
}

	.test1{
		display: none;
	}
}







/* フッターアニメーション */

.machi1{
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 20%;
}

.machi6{
	bottom: 0;
	left: 0;
	width: 100%;
	position:absolute;
}

.machi9{
	bottom: 0;
	width: 100%;
	position:absolute;
	animation:10s linear infinite hokou;
}

@keyframes hokou{
	0%{ left: 20%}
	100%{ left:-110%; }
}

.machi10{
	display: none;
}
@media all and (-ms-high-contrast: none) {
  /* ここに書く */
.machi10{
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 20%;
}
	.machi11{
	bottom: 0;
	left: 0;
	width: 100%;
	position:absolute;
}
	.machi1{
		display: none;
	}
}