@charset "UTF-8";

div#all { width: 1000px;
          margin: 0 auto;
          background-color: #fff;  }
	  
h1,h2,h3,h4,h5,h6 { padding: 5px;  }	
	  
#top { 	margin: 0;
        border: 2PX solid #f5f5f5;
	height: 100px;
	line-height: 1;
}

#top a { text-decoration: none;
        width: 120px;
	font-size: 16px;
	font-family: serif;
	text-align: center;
	float: right;
	margin: 25px 25px;
	border: 3PX solid #a9a9a9;
	border-radius: 15px;
	padding: 5px 5px;
}

#top a:hover {color: lime;  }

#nav ul { margin: 0;
     padding-left: 0;
     height: 50px;
     background: url("./images/bg_menu.gif") 0 0 repeat-x; 
}     

#nav li { list-style-type: none;
     width: 20%;
     float: left  }  
     
#nav ul li a { display: block;
	  border-right: 1px solid white;
	  line-height: 50px;
	  font-family: Helvetica;
	  text-decoration: none;
	  text-align: center;
	  color: #00003c;
}

#nav ul a:hover { color: blue; }

#nav ul a:active {color: blue;  }

#content {display: flex; display: -webkit-flex; }
	
section img { margin: 10px 10px 10px 10px;
              float: left; }	


#main { flex: 0 0 290px; -webkit-flex:0 0 290px; 
        width: 290px; }

#main { 
        line-heigh: 2;
        float: left;  
	background-color: #ffffff; 
}

#main h1 { font-size: 30px;
           font-family: Helvetica;
	  text-align: center;
	  color: blue;  }
	   

#main a:hover {color: blue;  }	  

#main a { font-size: 16px;
          line-heigh: 25px;
          list-style-type: none;
          text-decoration: none;  }

#main ul { margin: 15px;
     padding-left: 0;
     height: 230px;
}

#main li { list-style-type: none;
} 


#main ul li a { display: block;
	  border: 1px solid  gray;
	  line-height: 30px;
	  font-family: monospace;
	  text-decoration: none;
	  text-align: center;
	  border-radius: 10px;
	  color: #00003c;
} 

section img { margin: 0px 10px 0px 10px;
              float: left; }
	      
section p { font-size: 18px;
            margin: 5px 10px 5px 10px;	}    

section a { font-size: 16px;
            padding: 0px -10px;
            margin: 0;	}

#side 	{ flex: 0 0 700px; -webkit-flex:0 0 700px; 
          width: 700px; }  

#side {	border: 1px solid #ffffff;
        float: right;  
	background-color: #ffffff; }
	
#side h1 { margin: 0px 0px;
　　　　　　　font-size: 30px;
           font-family: Helvetica;
	  text-align: center;
	  letter-spacing: 3px;
	  color: black;  }

#side h2 { margin: 0px 0px;
           font-size: 24px;
           font-family: Helvetica;
	  text-align: left;
	  color: green;  }
	
#side h3 { margin: 0px 0px;
           padding: 0px 0px;
           font-size: 20px;
           font-family: Helvetica;
	  text-align: left;
	  color: blue;  }
	  
#side h4 { margin: 0px 0px;
           font-size: 20px;
           font-family: Helvetica;
	   text-align: center;
	  color: red;  }  
	  
#side h5 { margin: 0px 0px;
           font-size: 15px;
           font-family: Helvetica;
	  color: #20b2aa;  } 

#side h6 { margin: 0px 0px;
           font-size: 20px;
           font-family: Helvetica;
	   text-align: center;
	  color: #2f4f4f;  } 	  
	  
.clear {  clear: both;
          height: 10px;
	  background-color: #ffffff;
}	  

.footer { width: 100%;
          font-size: 10px;
          text-align: center;
          padding: 20px 0 30px;
	  background-color: #cccccc;
}

.footer ul { margin: 0;
     padding-left: 0;
     height: 30px;
}

.footer ul a:hover { color: #e0ffff; }

.footer ul a:active {color: #e0ffff;
}

.footer li { list-style-type: none;
     width: 120px;
     float: right  }	

.footer ul li a { display: block;
	  border-left: 1px solid white;
	  line-height: 25px;
	  font-family: serif;
	  text-decoration: none;
	  text-align: center;
	  color: #00003c;
}