@charset "UTF-8";
@import url(common.css);
@import url(textsettings.css);

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

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

body {
	/* --- 基本的な前景色（文字色）を設定してください --- */
  color: #333333;
	padding: 0px;
	background-color: #FFFFFF;
	background-position: left top;
	background-repeat: repeat-x;
	background-image: url(../img/bg_3.jpg);
	margin: 0px;
}

#container {
	/* --- ドキュメント本体の幅を設定してください --- */
  /* Note：百分率指定も可能です */
  width: 800px;
	background-color: transparent;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

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

#header {
	padding: 0;
	background-color: #FFFFFF;
	height: 120px;
	width: 801px;
	margin: 0;
}


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

#navi {
	/* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #FFFFFF url(../img/bg.png) repeat-x;
	/* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-top: 0;
	margin-bottom: 0;
	/* --- 必要に応じて、ボックスの下線を設定してください（短縮プロパティでの設定です） --- */
  border-bottom: 1px solid #EEEEEE;
	padding: 0;
	width: 800px;
}
#back {
	background-image: url(../img/back.gif);
	padding: 0px;
	height: 100%;
	width: 807px;
	background-position: center top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-repeat: repeat-y;
}

#contents {
	
}


#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(../img/bg.png) repeat-x;
	/* --- ナビゲーション１項目あたりのフォントの太さを指定してください --- */
  font-weight: bold;
	border-right-width: 1px;
	border-bottom-width: 5px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #006600;
	padding-top: 6px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-align: center;
	letter-spacing: 0.2px;
}

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

#navi a.on {
	background: #EEEEEE url(../img/arrow.gif) no-repeat;
	text-decoration: none;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #009900;
	color: #009900;
}


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

#mainbox {
  /* --- コンテンツコンテナの高さを設定してください --- */
  height: 420px;
  /* --- マージンを設定してください --- */
  margin-top: 0;
  margin-bottom: 0;
/* --- 下に配置するナビゲーションとの境界線をつくり引き締めるために必要に応じて線の太さ、線種、色を指定 --- */
  border-bottom: 3px solid #ddd;
}

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

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

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

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

.imgbox {
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  /* Note：ボックス内の最初のボックスの上マージンは折りたたまれない
           ので，「0」を指定することをおすすめします */
  margin-top: 0;
  margin-bottom: 8px;
}

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

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

#navibox ul,
#navibox ul li {
  /* --- マージンを設定してください --- */
    margin: 0;
  /* --- パディングを設定してください --- */
    padding: 0;
}

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

#navibox ul li {
	/* --- パディングを設定してください（短縮プロパティでの設定です） --- */
    padding: 5px 20px 5px 25px;
	/* --- 背景を設定してください（短縮プロパティでの設定です） --- */
    background: #fff url(../img/sq_arrow.gif) no-repeat 5px 7px;
	/* --- 背景画像でリストマーカを指定するため、リストの行頭につく印を消します --- */
    list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #19802F;
}

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

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

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

#footer ul li {
  margin: 0;
  padding: 0 5px;
  /* --- フッタメニュー右側の区切り線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
  border-right: 1px solid #CCCCCC;
  /* --- 横並びリストのリストマーカ画像を設定してください --- */
  /* Note：16×16 ピクセル以下のものを使用してください */
  background-image: none;
}
#back #container .adress_bg {
	background-image: url(../img/gaiyou_bg.jpg);
	width: 487px;
	height: 123px;
	margin-left: auto;
	margin-right: auto;
}
#back #container .q {
	margin-right: auto;
	margin-left: auto;
	width: 500px;
	background-repeat: no-repeat;
	height: 100%;
	background-position: right bottom;
	padding-top: 12px;
	margin-top: 40px;
	background-image: url(../img/frame.jpg);
	border: 1px solid #CCCCCC;
}
#back #container .a {
	background-image: url(../img/qanda_bar.gif);
	background-repeat: no-repeat;
	height: 30px;
	width: 491px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	background-position: center center;
	padding: 0px;
	margin-bottom: 0px;
}
#container .dotline {
	width: 500px;
	border-top-width: 2px;
	border-top-style: dotted;
	border-top-color: #666666;
	margin-right: auto;
	margin-left: auto;
}
#container .under_img {
	background-image: url(../img/saku7.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	height: 200px;
	width: 100%;
	margin-bottom: -20px;
}
#container .under_img2 {
	background-image: url(../img/rg_chr001.jpg);
	background-repeat: repeat-x;
	width: 800px;
	height: 135px;
	margin: 0px;
	padding: 0px;
}
#container .under_img3 img {
	margin-left: 600px;
	margin-top: -90px;
}
#container .under_img4 img {
	height: 234px;
	width: 433px;
}
/*
#container .under_img4 {
	background-image: url(../img/lotuscontn001.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 231px;
	width: 429px;
	margin-left: 380px;
	margin-top: -240px;
	margin-bottom: -40px;
}
*/
#container .under_img4 {
   background: transparent url(../img/lotuscontn001.png) no-repeat left top !important;
   background: none;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/lotuscontn001.png", sizingMethod="scale");
   background-repeat: no-repeat;
	background-position: right top;
	height: 231px;
	width: 406px;
	margin-left: 395px;
	margin-top: -290px;
	margin-bottom: 40px;
   }