/*****************************************************************
*
*   ベースとなるcssです。
*   Webページ全体のレイアウトなどはここで定義しています。
*   統一性を保つためにも個々のページのcssは必ずこのcssをインポートしています。
*
******************************************************************/
/* ------------------------------------------------------------------

	共通処理。というかむしろＩＥでの表示補正専用

--------------------------------------------------------------------*/
body {
	margin: 20px;
	padding: 0px;
}

img {
	vertical-align: bottom;
}

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

h2 {
	margin: 0px;
	padding: 5px;
	color: #ff9933;
}

/* ----------------------------------------------------------------

	 メインとなるdiv
	 ＨＰの大きな外枠の横幅や、枠線の色などを定義
	 新しいページを作る時はとにかくこのdiv内にコンテンツを書くべし

---------------------------------------------------------------------*/
#main {
	width: 800px;
	margin: auto;
	border: 1px solid #ff9933;
	border-collapse: collapse;
	position: relative;
	padding: 0px;
}

/* -------------------------------------------------------------------

	バナー定義用
	画像の大きさやら何やらをまとめたいときはこっちに書くとラク

----------------------------------------------------------------------*/

#banner {
}

/* --------------------------------------------------------------------

	リンクボタンの定義
	マウスカーソルが乗った時に色を変えたりなどはここで行っている
	リンクのフォントが気に入らなければ font-familyを変更する

----------------------------------------------------------------------*/
#menu {
	width: 800px;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
	color: #ff6600;
}

#menu td,#menu th {
	padding: 0px;
	margin: 0px;
	width: 100px;
	height: 30px;
	border: 1px solid #ff9933;
	font-family: "Impact";
	vertical-align: center;
	text-align: center;
	background-image: url("../Image/Share/none.gif");
}

/* -------------------------------------------------

	リンクボタンの上にマウスを乗せた時に色を変える。
	実際には背景画像を差し替えることで実装している。


---------------------------------------------------- */
#menu td:hover {
	background-image: url("../Image/Share/color.gif");
}

#menu #currentPage {
	background-image: url("../Image/Share/color.gif");
}

#menu a {
	text-decoration: none;
}

#menu a:link {
	color: #ff6600;
}

#menu a:visited {
	color: #ff6600;
}

/* -------------------------------------------------------------------

	ページを半分に割って二段組にしたいときに利用する。

---------------------------------------------------------------------*/
#leftBox {
	width: 400px;
	float: left;
}

#rightBox {
	width: 400px;
	float: left;
}

/* ------------------------------------------------------------------

	ページの回り込みを解除します。
	段組を使った後は必ずこのクラスを持つdivを用意して一段組みに戻してあげてください。
	（とくに書くことがなくても <div class="clear"></div>など、
	からっぽのdivを用意してあげてください。あまりよろしくないらしいが。
	でないとfirefoxでは枠線の外にボックスがはみ出します。）

--------------------------------------------------------------------- */
.clear {
	clear: both;
	height: 0px;
}

.clear hr {
	display: none;
}

.clear br {
	height: 0px;
}

/* -------------------------------------------------------------------

	ロゴ及び、コンテンツのタイトルを表示する部分

 ------------------------------------------------------------------ */

/* ベースとなる、ロゴとコンテンツのタイトルを格納するdiv */
#baseRogoSpace {
	width: 800px;
	height:100px;
	border-bottom: 1px solid #ff9933;
}

/* ロゴを格納するdiv */
#rogoSpace {
	width: 100px;
	float: left;
}

/* コンテンツ名を表示するときのスタイル */
#contentsName {
	text-align: center;
	height: 100px;
	background-color: #ffffcc;

}

#contentsName span {
	line-height: 100px;
	font-size: 30pt;
	font-weight: bold;
	color: #ff6600;
}

/* -------------------------------------------------------------------

	その他汎用

---------------------------------------------------------------------- */

/* 色をつける */
span.markColor {
	color: #ff9900;
}