@charset "shift_jis";



/*全体の設定
----------------------------------------------------------------------------------------------
■壁紙を変更したい場合、imagesフォルダに背景画像を入れて、下の「kabe_box1.gif」をその画像名に変更する。
■文字サイズを固定したい場合、「font-size: 80%;」 の「80%」 部分を「14px」とか希望のものに変更する。
----------------------------------------------------------------------------------------------*/
body {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 1;
	color: #333333;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: #FFFFFF url(images/kabe_box1.gif);
}

h1,h2,h3,p,ul,li{
	margin: 0px;
	padding: 0px;
}

p {
	padding: 0px 10px 10px;
}

ul{
	list-style-type: none;
}

img {
	border: none;
	vertical-align: bottom;
}




/*ＨＰ本体のテーブルの設定
----------------------------------------------------------------------------------------------
■ＨＰ横幅を広くしたいなら、「760px」を「900px」とかにすればOK。小さくもできる。
　ここを変更した場合、下の方にある「メインコンテンツ」項目の「#main」の「width」の数値も変える。
■２行目のborder設定がＨＰを囲む枠線設定。この場合、1pxの太さで直線で色は#33333(黒っぽいグレー)という意味。
　太くしたいなら、「1px」部分を「5px」とかにする。
----------------------------------------------------------------------------------------------*/
#container {
	width: 760px;
	border: 1px solid #333333;
	text-align: left;
	background: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}




/*ヘッダー設定（学校名が入っている所）
----------------------------------------------------------------------------------------------
■文字色が「#FFFFFF」部分。希望色に変更できます。
■背景色がその下の「#333333」部分。希望色に変更できます。
----------------------------------------------------------------------------------------------*/
#header {
	color: #FFFFFF;
	background-color: #333333;
	padding: 10px;
}




/*ＨＰ上部の横並びメニュー（交通アクセス、リンク、お問い合わせ、サイトマップ）の設定
----------------------------------------------------------------------------------------------
■背景色を変更したい場合、下の「#999999」部分を希望の色番号に変える。白なら「white」とか「#ffffff」
■メニューの文字色（白）を変更したい場合、「#nav a」項目にある「#FFFFFF」を希望色に変える。
　その下の「#nav a:hover」の「#000000」はカーソルが乗った時の色（この場合「黒」）になる。
■下線を外したいなら、「#nav a」項目内に下の行に次の１行を追加する。
  text-decoration: none;
----------------------------------------------------------------------------------------------*/
#nav {
	color: #FFFFFF;
	background-color: #999999;
	text-align: right;
	border-bottom: 1px solid #333333;
	padding: 5px 0px;
}

#nav a {
	color: #FFFFFF;
}

#nav a:hover {
	color: #000000;
}




/*メインメニュー設定（左側のメニュー）
----------------------------------------------------------------------------------------------
■メニュー下に書いている「ここにも文章など入れることができます。」の背景色（灰色）を変えたいなら、
　「#menu-waku」項目の「#cccccc」を希望色に変更する。
■「#menu a」項目はメニューのリンクの設定箇所になる。メニューの文字色は「color: #333333;」の部分。
　メニューの背景色（薄い灰色）は「background」の行にある「#e5e5e5」部分。
■「#menu a:hover」項目はカーソルが乗った時の反応の設定。ここでは、背景色と矢印画像を入れ替えている。
----------------------------------------------------------------------------------------------*/
#menu-waku {
	border-right: 1px solid #333333;
	vertical-align: top;
	background: #cccccc;
}

#menu a {
	display: block;
	border-bottom: 1px solid #333333;
	color: #333333;
	text-decoration: none;
	background: #e5e5e5 url(images/arrow.gif) no-repeat left center;
	padding: 20px 0px 20px 20px;
}

#menu a:hover {
	background: #f5f5f5 url(images/arrown.gif) no-repeat left center;
}




/*メインコンテンツ（右側）
----------------------------------------------------------------------------------------------
■「#main」の「width」部分でメインコンテンツの横幅をここで設定しています。
　上の#container(HP枠)の横幅を広くした場合はここも微調整しましょう。
■「#main h2」は「このテンプレートの使い方」などの見出し部分の設定です。
　文字色変更は「color: #FFFFFF;」の「#FFFFFF」を変えればOK。
　背景色（濃い灰色）は「background-color: #666666;」の「#666666」を変えればOK。
----------------------------------------------------------------------------------------------*/
#main {
	width: 550px;
	vertical-align: top;
}

#main h2 {
	background-color: #666666;
	font-size: 100%;
	border-bottom: 2px solid #CCCCCC;
	color: #FFFFFF;
	margin-bottom: 10px;
	padding: 5px 0px 5px 10px;
}




/*フッター（最下部のコピーライト部分）設定
----------------------------------------------------------------------------------------------*/
#footer {
	color: #FFFFFF;
	background-color: #333333;
	text-align: center;
}
#footer a {
	color: #FFFFFF;
}
#footer a:hover {
	color: #000000;
}