@charset "utf-8";
/* CSS Document */
body {
	padding: 0px;
	margin: 0px;
	background-image: url(img/bg.jpg);
	background-position:top center;
}
.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
	background-image:
	url("img/main.png"),
	url("img/mainbg.png"),
    url("img/earth.png"), /* 最前面の背景レイヤーの背景画像 */
    url("img/sputnik.png"),
    url("img/moon.png");

  background-repeat:
	  no-repeat, 
	no-repeat, 
    no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat,
	no-repeat;

  background-position:
	center,
	center,
    bottom center,/* 最前面の背景レイヤーに対応 */
	top 10% right 7%,
	top left;
}

footer{
    width: 100%;
    background-color: #b51c22;
    color: #fff;
    text-align: center;
    padding: 10px 0;

    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}
footer p {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
}

@media screen and (max-width: 1024px) {
.wrapper{
  background-position:
	center,
	center,
    bottom center,/* 最前面の背景レイヤーに対応 */
	top 7% right 7%,
	top left;
	
	background-size:
		600px auto,600px auto,750px auto,90px auto,280px auto;
}
}
@media screen and (max-width: 896px) {
.wrapper{
  background-position:
	center,
	center,
    bottom center,/* 最前面の背景レイヤーに対応 */
	top 4% right 4%,
	top left;
	
	background-size:
		450px auto,450px auto,600px auto,90px auto,200px auto;
}
}
@media screen and (max-width: 480px) {
.wrapper{
  background-position:
	center,
	center,
    bottom center,/* 最前面の背景レイヤーに対応 */
	top 2% right 2%,
	top left -50px;
	
	background-size:
		100%,100%,600px auto,80px auto,200px auto;
}

}