@charset "Shift_JIS";

/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; padding:0; 	/*全要素のマージン・パディングをリセット*/
	line-height:1.5;	/*全要素の行の高さを1.5倍にする*/
} 


#body{
     margin-top:0px;
     margin-left:auto;
     margin-right:auto;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */ 
     overflow: hidden;    /* はみ出た部分をどうするか */
     }

a {
     color: #666666;
     text-decoration:none;
}

a:hover{
     color: silver;
}

#header{
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width:1080px;
    height:106px;
   }    

          
#main{
     margin-top:0px;
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width : 1080px;         /* 幅を決定する */
     height: 30px;      
     color: #FFFFFF;
    }

#free{
     margin-top:0px;
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
}

#footer{
     margin-top: 0px;
     margin-left: auto;
     margin-right: auto;
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
     width :1200px;      /* 幅を決定する */
     height:106px;       /* 萬さを決定する */
}



/*============================================
メインメニュー
============================================*/


ul#menu {
	width:1010px; 
       height:30px; 
       margin-top:0px; 
       margin-left:auto;
       margin-right:auto;
       padding-left:70px;
       background-color:#717071;
}

li#menu01,li#menu02,li#menu03,li#menu04,li#menu05 {
	float:left;			/*リスト項目を横に並べる*/
	display:inline;			/*リスト項目をインライン表示にする*/
       color: #FFFFFF;
	list-style-type:none;		/*リストマーカー無しにする*/
	padding-top;5px;
}

.a:hover {
    color: #FFFFFF;
    background-color: #595959;
}

.noline {
    color: #FFFFFF;
    text-decoration:none;
}


/*ボタン01〜05には同じ背景画像を指定する*/
li#menu01 {
	width:175px; height:30px; line-height:30px;	/*背景画像に合わせたサイズ指定*/
    color: #FFFFFF;			/*リストの文字の色を指定する*/
    font-family: 'メイリオ';
    font-size:14px;			/*リストの文字のサイズを指定する*/
    text-align: center;      	/*リスト項目をセンタリングする*/
    background-color: #717071;
}
li#menu01:hover {
    color: #FFFFFF;
    background-color: #595959;
}
	
li#menu02 {
	width:60px; height:30px; line-height:30px;	/*背景画像に合わせたサイズ指定*/
    color: #FFFFFF;			/*リストの文字の色を指定する*/
    font-family: 'メイリオ';
    font-size:14px;			/*リストの文字のサイズを指定する*/
    text-align: center;	       /*リスト項目をセンタリングする*/
    background-color: #717071;
}

li#menu02:hover {
    color: #FFFFFF;
    background-color: #595959;
}

li#menu03 {
	width:62px; height:30px; line-height:30px;	/*背景画像に合わせたサイズ指定*/
    color: #FFFFFF;			/*リストの文字の色を指定する*/
    font-family: 'メイリオ';
    font-size:14px;			/*リストの文字のサイズを指定する*/
    text-align: center;       	/*リスト項目をセンタリングする*/
    background-color: #717071;
}

li#menu03:hover {
    color: #FFFFFF;
    background-color: #595959;
}

li#menu04 {
	width:127px; height:30px; line-height:30px;	/*背景画像に合わせたサイズ指定*/
    color: #FFFFFF;			/*リストの文字の色を指定する*/
    font-family: 'メイリオ';
    font-size:14px;			/*リストの文字のサイズを指定する*/
    text-align: center;     	/*リスト項目をセンタリングする*/
    background-color: #717071;
}

li#menu04:hover {
    color: #FFFFFF;
    background-color: #595959;
}

li#menu05 {
	width:130px; height:30px; line-height:30px;	/*背景画像に合わせたサイズ指定*/
    color: #FFFFFF;			/*リストの文字の色を指定する*/
    font-family: 'メイリオ';
    font-size:14px;			/*リストの文字のサイズを指定する*/
    text-align: center  ;    	/*リスト項目をセンタリングする*/
    background-color: #717071;
}

li#menu05:hover {
    color: #FFFFFF;
    background-color: #595959;
}


/*============================================
フリースペース
============================================*/

div#free {
    width: 920px; 
    height: 100%; 
    background-color: #EEEEEE;
    color: #666666;
    text-align:left;
    padding: 50px 80px ;
}



/*============================================
フッター
============================================*/

div#footer {
    width:1080px;
    height:250px;
    text-align:left;
    padding:30px 0;
    background-color: #333333 ;
    color: silver;
}


#box1 {
    height: 200px;
    width: 300px;
    float: left;
    margin-left: 70px;
    background-color: #333333 ;
}

#box2 {
    height: 200px;
    width: 300px;
    float: left;
    margin-left: 30px;  
    background-color: #333333 ;
}

#box3 {
    height: 200px;
    width: 250px;
    float: left;
    margin-left: 30px;  
    background-color: #333333 ;
}


/* ↓id="nav"の中のulに対してCSSを適用*/

#nav ul {
  list-style-type: none;     /*箇条書きのポッチを消す*/
  text-align:left;         /*左右中央寄せは親要素に対して指定*/
  color: silver;
}


/* ↓id="nav"の中のulの中のliに対してCSSを適用*/

#nav ul li { 
  display: inline-block;      /*inline-blockにします*/
  width: 250px;                /*幅を指定*/
　height: 100px;               /*高さを指定*/
  padding-left: 30px;　　　　　/*左側の余白を指定*/
  vertical-align: middle;　　 /*縦の表示位置を指定*/
  background: skyblue;　　　　/*背景色を指定*/
  font-weight: bold;　　　　　/*文字を太字に*/
  color: silver;　　　　　　　  /*文字色を指定*/
}