@charset "UTF-8";

/* ================================================================ *
	Web Designing 2007/10
	テンプレート D：背景写真型
	カスタマイズ CSS
	
	この CSS を書き換えることで，テンプレートをカスタマイズ
	できます。本文記事およびコメントを参考に変更し，活用して
	ください。
 * ================================================================ */

/* ---------------------------------------------------------------- *
	ドキュメント全体に関する設定です
 * ---------------------------------------------------------------- */

body {
  /* --- 基本的な前景色（文字色）を設定してください --- */
  color: #333333;
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #FFFFFF;
}

#container {
  /* --- 内容部分の背景を設定してください --- */
  /* Note：内容部分の背景を透明にしたり，透過 GIF を利用したりして
           背景に変化をつけることができます */
  background: transparent;
  /* --- ドキュメント本体の幅を設定してください --- */
  /* Note：百分率指定も可能です */
  width: 800px;
  /* --- ドキュメント本体の位置を設定してください --- */
  /* Note：「0」のみで左寄せ，「0 auto」でセンタリング */
  margin: 0 auto;
}

/* ---------------------------------------------------------------- *
	ヘッダ部分の設定です
 * ---------------------------------------------------------------- */

#header {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #FFFFFF;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-top: 0;
  margin-bottom: 0;
  /* --- パディングを設定してください --- */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* ---------------------------------------------------------------- *
	ナビゲーション部分の設定です
 * ---------------------------------------------------------------- */

#navi {
	/* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #FFFFFF url(../test/img/bg.png) repeat-x;
	/* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-top: 0;
	margin-bottom: 0;
	/* --- パディングを設定してください --- */
  /* Note：ナビゲーション部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
}

#navi ul {
  /* --- マージンを設定してください --- */
  margin: 0;
  /* --- パディングを設定してください --- */
  padding: 0;
  /* --- 高さを設定してください --- */
  height: 2.5em;
}

#navi ul li {
  /* --- マージンを設定してください --- */
  margin: 0;
  /* --- パディングを設定してください --- */
  padding: 0;
  /* --- 横並びにさせるためにフロートを指定してください --- */
  float: left;
}

#navi ul li a {
	margin: 0;
	/* --- ナビゲーション１項目あたりのクリッカブル領域をテキスト部分だけでなくボックス単位とするためには display: block;と指定してください --- */
  display: block;
	/* --- ナビゲーション１項目あたりの背景画像とリピート方向を指定してください（短縮プロパティでの設定です） --- */
  background: url(../test/img/bg.png) repeat-x;
	/* --- ナビゲーション１項目あたりのフォントの太さを指定してください --- */
  font-weight: normal;
	border-top-width: 2px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #999999;
	border-right-color: #CCCCCC;
	padding-top: 6px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
}

#navi a:hover {
	/* --- マウスオーバーしたときの背景色と、横並びリストのリストマーカ画像を設定してください（短縮プロパティでの設定です） --- */
  /* Note：16×16 ピクセル以下のものを使用してください。背景色をあわせて指定している場合は、透過処理されている画像である必要があります */
  background: #EEEEEE url(../test/img/arrow.gif) no-repeat;
	/* 通常のリンクテキストでテキストに下線がついてしまう設定になっているので、ナビゲーションのテキスト下線は不要なためここで指定して上書きしてください */
  text-decoration: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #001341;
}

/* ---------------------------------------------------------------- *
	コンテンツコンテナの設定です
 * ---------------------------------------------------------------- */

#mainbox {
	/* ★ --- 背景を設定してください（短縮プロパティでの設定です）--- */
  /* Note：背景画像は本体幅と同じ幅を持つものを設定してください */
  background-image: url(../image/top_01.jpg);
	/* --- コンテンツコンテナの高さを設定してください --- */
  height: 470px;
	/* --- マージンを設定してください --- */
  margin-top: 0;
	margin-bottom: 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}

#mainbox2 {
	/* --- コンテンツコンテナの高さを設定してください --- */
  height: auto;
	/* --- マージンを設定してください --- */
  margin-top: 0;
	margin-bottom: 0;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}

/* ---------------------------------------------------------------- *
	コンテンツ部分の設定です
 * ---------------------------------------------------------------- */

/* Note：背景写真型のコンテンツは，絶対配置されます。ボックスの
         サイズおよび位置は，注意深く設定してください */
#contentsbox {
	/* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: transparent;
	/* --- ボックスの幅を設定してください --- */
  width: 120px;
	/* --- 必要ならば，ボックスの高さを設定してください --- */
  height: auto;
	/* --- ボックスの位置（縦位置）を設定してください --- */
  /* Note：基準にしたい辺に値を与え，もう一方は auto を設定してください */
  top: 10px;
	bottom: auto;
	/* --- ボックスの位置（横位置）を設定してください --- */
  /* Note：基準にしたい辺に値を与え，もう一方は auto を設定してください */
  left: 678px;
	right: auto;
	/* --- 枠線の幅・線種・色を設定してください（短縮プロパティでの設定です）--- */
  border: 1px dotted #FFFFFF;
	padding: 0;
}

#contentsbox ul {
	/* --- リストの左マージンを設定してください --- */
  margin-left: 2em;
	/* --- パディングを設定してください --- */
  padding-top: 0.6em;
	padding-right: 0.6em;
	padding-bottom: 0.6em;
	padding-left: 0.4em;
	/* --- コンテンツのテキスト色を設定してください --- */
  /* Note:背景写真とのコントラストを意識した文字色を設定することをおすすめします --- */
  color: #0000FF;
	/* --- 領域におさまり、かつ読みやすいフォントサイズを設定 --- */
  font-size: 90%;
}



.style1 {color: #FF0000}
.style21 {color: #FFFFFF}
#apDiv3 {
	position:absolute;
	left:460px;
	top:0px;
	width:78px;
	height:430px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#apDiv1 {
	position:absolute;
	left:550px;
	top:0px;
	width:78px;
	height:430px;
	z-index:1;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}



/* ---------------------------------------------------------------- *
	バナーの設定です
 * ---------------------------------------------------------------- */

.imgbox {
	float: left;
	margin-bottom: 10px;
	margin-left: 0px;
}

/* ---------------------------------------------------------------- *
	本文写真の設定です
 * ---------------------------------------------------------------- */

.imgbox02 {
	float: left;
	padding-bottom: 300px;
	padding-right: 20px;
}

/* ---------------------------------------------------------------- *
	メインナビゲーション部分の設定です
 * ---------------------------------------------------------------- */

#navibox {
	/* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #FFFFFF;
	/* --- ボックスの幅を設定してください --- */
  width: 210px;
	/* --- 必要ならば，ボックスの高さを設定してください --- */
  height: auto;
	/* --- ボックスの位置（縦位置）を設定してください --- */
  /* Note：基準にしたい辺に値を与え，もう一方は auto を設定してください */
  top: 10px;
	/* --- ボックスの位置（横位置）を設定してください --- */
  /* Note：基準にしたい辺に値を与え，もう一方は auto を設定してください */
  left: 10px;
}

#navibox ul,
#navibox ul li {
}

#navibox ul {
  /* --- パディングを設定してください --- */
    padding: 0px;
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
    background: url(../test/img/slash.png) repeat;
}

#navibox ul li {
	/* --- 背景画像でリストマーカを指定するため、リストの行頭につく印を消します --- */
    list-style-type: none;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	background-color: #fff;
	background-image: url(../test/img/sq_arrow.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

/* ---------------------------------------------------------------- *
	フッタ部分の設定です
 * ---------------------------------------------------------------- */

#footer {
	/* --- マージンを設定してください --- */
  /* Note：上マージンは段組コンテナの下マージンとの折りたたみが
           生じます */
  margin-top: 0px;
	margin-bottom: 0;
	/* --- パディングを設定してください --- */
  /* Note：上下マージンを持つものが含まれる場合，上下パディングには
           正の値を指定してください */
  padding-top: 0.6em;
	padding-right: 0;
	padding-bottom: 0.6em;
	padding-left: 0;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #999999;
}

#footer ul {
    margin-bottom: 4px;
    padding: 0;
  /* --- フッタメニュー左端の罫線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
    border-left: 1px solid #CCCCCC;
}

#footer ul li {
	margin: 0;
	padding: 0 5px;
	/* --- 横並びリストのリストマーカ画像を設定してください --- */
  /* Note：16×16 ピクセル以下のものを使用してください */
  background-image: none;
}

/* ---------------------------------------------------------------- *
	ダウンロード部分の設定です
 * ---------------------------------------------------------------- */

#download {
	/* --- マージンを設定してください --- */
  /* Note：上マージンは段組コンテナの下マージンとの折りたたみが
           生じます */
  margin-top: 0px;
	margin-bottom: 0;
	/* --- パディングを設定してください --- */
  /* Note：上下マージンを持つものが含まれる場合，上下パディングには
           正の値を指定してください */
  padding-top: 0.6em;
	padding-right: 0;
	padding-bottom: 0em;
	padding-left: 0;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}



/* ---------------------------------------------------------------- *
	広告部分の設定です
 * ---------------------------------------------------------------- */

#kokoku {
	padding: 0px;
	margin: 0px;
	background-color: #999999;
	height: 186px;
}

/* ---------------------------------------------------------------- *
	広告バナーの設定です
 * ---------------------------------------------------------------- */

.imgkokoku {
	float: left;
	margin: 1px;
}