@charset "UTF-8";

#hd_er {
  position: static;
  float: right;
  margin-right: 16px;
}

#atcl_er {
  clear: both;
  margin: 2em;
  padding: 2em;
  border: 8px solid #000;
  background: rgba(255,255,255,0.9);
}

footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
}
footer p {
	margin: 1em;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
}
footer a {
	color: #fff;
}
footer a:visited {
	color: #ccc;
}
footer a:hover {
	background: #444;
}
footer a:active {
	color: #fff;
	background: #222;
}

#nav_home {
  display: block;
  margin: 1em auto;
  padding: 1em;
  height: 1em;
  background: rgba(0,0,0,0.9);
  color: #fff;
}
#nav_home:hover {
  margin-top: -8px;
	background: #fff;
  border: 8px solid #000;
  color: #000;
}

/* 320px以上
---------------------------------------------*/
@media only screen and (min-width: 320px) {
html {
	background: #0842ff
}
body {
	margin: 0;
	width: 256px;
    min-height: 740px; 
	background:
	url("images/stepdown.png") no-repeat center 32px,
	url("images/bg_tile.png");
}
}

/* 640px以上
---------------------------------------------*/
@media only screen and (min-width: 480px) {

body {
	margin: 32px;
	margin-top: 64px;
	width: 440px;
    min-height: 512px;
	background:
	url("images/stepdown.png") no-repeat 64px 32px,
	url("images/bg_carpet.png");
}
}

/* 640px以上
---------------------------------------------*/
@media only screen and (min-width: 640px) {

html {
	background: url("images/bg_block.png");
}

body {
	margin: 32px;
	margin-top: 64px;
	width: 600px;
	background:
	url("images/stepdown.png") no-repeat 64px 32px,
	url("images/bg_flooring.png");
}
}

/* 980px以上
---------------------------------------------*/
@media only screen and (min-width: 980px) {
html {
	background: url("images/bg_tree.png");
}
body {
	margin: 128px;
	width: 768px;
	background:
	url("images/stepup.png") no-repeat 64px 340px,
	url("images/bg_lightgreen.png");
}

nav a:hover h2 {
	background: #ccc;
}

nav a:active h2 {
	background: #222;
	color: #eee;
}

nav a {
	color: #222;
}

footer p {
	color: #686868;
}
footer a {
	color: #000;
}
footer a:visited {
	color: #686868;
}
footer a:hover {
	background: #ccc;
}
footer a:active {
	color: #fff;
	background: #222;
}
}