/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

header#header{
	width: 100%;
	background:#fff;
	max-width: 960px;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0;
	}

.stage{
	background:#cfe;
	max-width:960px;
	}
h1 { 
	font-size: 1.2em;
	padding: 0.4em 0 0.4em 0;
	margin: 0 0 0.2em; 
	background:#00c;
	color:#fff;
	}

h2 { 
	font-size: 1.1em;
	padding: 0.2em 0 0.2em 0;
	margin: 0 0 0.2em;
	border-color:0;
	background:#ccc;
	}

.naiyo{
	margin-left: 3em;
}
img{
	width:80%;
	max-width:400px;
	
}
aside{
	float:left;
	width:50%;

}
.main {
  clear: both;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding:5px 0;
  background: #eef; 
}

.migi{
	margin 0 auto;
	margin-right :10px;
	width:45%;
	max-width:450px;
	float:right;
}
.mmm1 {
	background:#88f;
	width:200px;

}
.mmm2 {
	background:#88f;
	width:200px;
	height:1.2em;
	border: solid 2px;
	border-color:#f00;
	background:#fff;
	margin:0;
	padding:0;
	clear:left;
}
#menu{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  
}
#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; 
  }
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #33a;
  background-image:url("../img/blue.png");
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background: #44C;
  background-image:url("../img/red.png");
}
#toggle{ 
 display: none;
}
@media only screen and (max-width: 768px) {
	aside{
		width:100%;
	}
img{width:80%;}
 .migi{
	margin:0 auto;
	width:100%;
	float:left;
}
    #menu li{
    width: 25%;
    border-bottom: 1px solid #444;
  }
}
@media only screen and (max-width: 480px) {
 img{width:80%;}
 .migi{
	margin:0 auto;
	width:100%;
	float:left;
}
  #menu{
    display: none;
  }
  #menu{
  	 
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #22a;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #44d;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fDf;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}