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

/* ================================================================ *
	カスタマイズ CSS
	
	この CSS を書き換えることで，テンプレートをカスタマイズ
	できます。本文記事およびコメントを参考に変更し，活用して
	ください。
	「★」が付されている設定項目は相互に依存します。注意して
	設定してください。
 * ================================================================ */

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

body {
  /* --- 基本的な前景色（文字色）を設定してください --- */
  color: #333333;
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #fffacd url(img/bgline.gif) repeat-y center;
  height: 100%;
}

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


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

#header {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #FFFFFF url(img/head.gif) repeat-x;
  /* --- マージンを設定してください --- */
  /* Note：下マージンはナビゲーションの上マージンと折りたたみが
           生じます */
  margin-top: 0;
  margin-bottom: 0;
  /* --- パディングを設定してください --- */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  height: 100px;
}

#logo {
  padding: 25px 0 0 0;
  margin: 0px 10px 0 245px;
}

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

#headnavi {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: transparent;
  /* --- マージンを設定してください --- */
  /* Note：上マージンはヘッダの下マージンとの折りたたみが生じます */
  /* Note：下マージンはコンテンツの上マージンとの折りたたみが
           生じます */
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  /* --- パディングを設定してください --- */
  /* Note：ナビゲーション部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  padding-top: 0;
  padding-right: 10px;
  padding-bottom: 0;
  padding-left: 0;
  /* --- 必要に応じて、ボックスの上下線を設定してください（短縮プロパティでの設定です） --- */
  border-top: 0px solid #CCCCCC;
  border-bottom: 0px solid #B22222;
}

#headnavi ul {
  /* --- マージンを設定してください --- */
  margin: 0;
  /* --- パディングを設定してください --- */
  padding: 0;
  /* --- 高さを設定してください --- */
  height: 1.6em;
  position: absolute;
  right: 0px;
  top: 72px
}

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

#headnavi ul li a {
  margin: 0;
  padding: 2px 15px 1px 15px;
  /* --- ナビゲーション１項目あたりのクリッカブル領域をテキスト部分だけでなくボックス単位とするためには   display: block;と指定してください --- */
  display: inline;
  /* --- ナビゲーション１項目あたりの右側の境界線の線種と色と太さを指定してください（短縮プロパティでの設定です） --- */
  border-left: 1px solid #CCCC99;
  /* --- ナビゲーション１項目あたりの背景画像とリピート方向を指定してください（短縮プロパティでの設定です） --- */
  background: transparent;
}

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

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

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

#navi {
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #ffffff url(img/bg.png) repeat-x;
  /* --- マージンを設定してください --- */
  /* Note：上マージンはヘッダの下マージンとの折りたたみが生じます */
  /* Note：下マージンはコンテンツの上マージンとの折りたたみが
           生じます */
  margin-top: 0;
  margin-bottom: 0;
  /* --- パディングを設定してください --- */
  /* Note：ナビゲーション部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  /* --- 必要に応じて、ボックスの下線を設定してください（短縮プロパティでの設定です） --- */
  border-bottom: #CC9 solid 1px;
}

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

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

#navi ul li a {
  margin: 0;
  padding: 4px 20px 3px 20px;
  display: inline;
  /* --- ナビゲーション１項目あたりの右側の境界線の線種と色と太さを指定してください（短縮プロパティでの設定です） --- */
  border-right: 1px solid #ffffff;
  /* --- ナビゲーション１項目あたりの下側の境界線の線種と色と太さを指定してください（短縮プロパティでの設定です） --- */
  
  /* --- ナビゲーション１項目あたりの背景画像とリピート方向を指定してください（短縮プロパティでの設定です） --- */
  background: url(img/bg.png) repeat-x;
  /* --- ナビゲーション１項目あたりのフォントの太さを指定してください --- */
  font-weight: bold;
}

#navi a:hover {
  /* --- マウスオーバーしたときの下側の境界線の線種と色と太さを指定してください（短縮プロパティでの設定です） --- */

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



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

#main {
  /* ★ --- レイアウト調整：左右カラムの設定に応じて設定 --- */
  /* Note：padding-left をサイドメニューの幅＋マージンとし，
           padding-right をサイドコンテンツの幅＋マージンとして
           ください */
  padding: 0 0 0 0;
  margin:0 0 0 0;
  background: transparent;
}

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

#left{
  /* ★ --- レイアウト調整：左右カラムの設定に応じて設定 --- */
  /* Note：padding-left をサイドメニューの幅＋マージンとし，
           padding-right をサイドコンテンツの幅＋マージンとして
           ください */
  padding-left: 10px;
  padding-right: 0;
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  /* Note：サイドメニュー部分全体に背景を適用させるには，この部分で
           背景を指定しておく必要があります */
  background: transparent;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 580px;
  float: left;
}

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

#right{
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  /* Note：ここでの背景設定はメニュー部分の内容がある部分にしか適用
           されません。サイドメニュー部分全体に背景を適用させる場合は
           コンテンツコンテナの背景として，サイドメニュー部分の背景を
           作ってください */
  background: transparent;
  /* ★ --- メニューの幅を設定してください --- */

  margin: 0px 0 10px 0;
  margin-left: 590px;
  width: 200px;
  /* --- パディングを設定してください --- */
  /* Note：コンテンツ部分に上下マージンを持つものが含まれる場合，
           上下パディングには正の値を指定してください */
  padding-top: 10px;
  padding-left: 0;
  padding-bottom: 0;
}



/* ---------------------------------------------------------------- *
	説明TEXT用
 * ---------------------------------------------------------------- */
p.text1 {
} 


  
/* ---------------------------------------------------------------- *
	ムービーコンテンツ
 * ---------------------------------------------------------------- */
#flashmovie {
  border-top: 0px solid #ffffff;
  border-bottom: 0px solid #ffffff;
  padding-left: 0px;
  margin-left: 10px;
  margin-top: 0px;
  background-color: #ffffff;
}

#fmovie {
  background-color: transparent;
}

/* ---------------------------------------------------------------- *
	サイドナビコンテンツ
 * ---------------------------------------------------------------- */
#sncontents {
  border-top: 0px solid #ffffff;
  border-bottom: 0px solid #ffffff;
  padding-left: 0px;
  margin-left: 10px;
  margin-top: 0px;
  background-color: #ffffff;
}


#button {
  padding-top: 35px;
  padding-left: 22px;
}


#add {
  background: #fffacd url(img/reservebg.gif) no-repeat;
  width: 200px;
  height: 175px;
}



/* ---------------------------------------------------------------- *
	文字、画像のボックスを作る場合の設定です
 * ---------------------------------------------------------------- */

.textbox {
  color: #333333;
  background-color: #ffffe0;
  padding: 10px 10px 5px 10px;
  width: 545px;
  float: left;
  border-color: #cccc99;
  border-style: solid;
  border-width: 1px;
}

.bannerbox {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: transparent;
  /* --- マージンを設定してください --- */
  /* Note：上下マージンの折りたたみに注意してください */
  margin-top: 0px;
  margin-bottom: 2px;
}

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

.topicbox {
  border-color: #cccc99;
  border-style: dotted;
  border-width: 1px;
  padding: 0px 0px 10px 0px;
  margin-top: 10px;
  margin-left: 0px;
  width: 565px;
  background-color: #fffafa;
  float: left;
}


.topicbox ul{
  background-color: transparent;
  margin-left: 0px;
  padding-left: 22px;
  padding-right: 10px;
}

.topicbox ul li {
  list-style-type: square;
  background-color: transparent;
}

.title {
  color: #996600;
  padding-left: 5px;
  font-weight: bold;
  background-color: #eee8aa;  
}


/* ---------------------------------------------------------------- *
	サムネイルリストの設定です
 * ---------------------------------------------------------------- */

.thumbslist {
  /* ★--- マージンを設定してください --- */
  margin-left: 0px;
  /* ★--- パディングを設定してください --- */
  padding: 0px 0px 0px 0px;
}

.thumbslist li {
  float: left;
  list-style: none;
  display: inline;/*for winIE6 --- */
  /* --- 背景を設定してください（短縮プロパティでの設定です） --- */
  background: #FFFFFF;
  /* Note:サムネイルのリストアイテム（サムネイルとキャプションを囲むボックス）に関する設定です。 */
  /* ★--- マージンを設定してください --- */
  /* Note:float:left;をすでに設定しているため、左方向のマージンは0にし、右方向のマージンでリスト同士の間隔を調整してください */
  margin-right: 6px;
  margin-bottom: 0px;
  /* ★--- パディングを設定してください --- */
  /* Note:このオブジェクトはフロートさせるため、0と設定し、余白はさらに内側のボックスで設定いただくことをおすすめします */
  padding: 0;
  /* ★--- ボックスの幅と高さを設定してください --- */
  /* Note：ボックスからはみ出す分は出力されません；内容の量にに対して
           余裕をもって設定してください */
  width: 185px;
  height: 175px;

/* ★Note:（このボックスの幅[width]＋左右線幅[border]＋右マージン[margin]）x １列のボックスの数　で算出される寸法が、#mainの横幅以内に収まるように設計してください */
}



/* ---------------------------------------------------------------- *
	説明キャプションについての設定です
 * ---------------------------------------------------------------- */

ul#thumbslist li p {
  /* マージンを設定してください */
  margin-top: 0;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 10px;
  /* テキストの行の高さを設定してください */
  line-height: 1.5;
}
  

/* ---------------------------------------------------------------- *
	コンテンツ内見出し
 * ---------------------------------------------------------------- */
p.ctitle {
  clear: left;
  font-weight: bold;
  font-size: 100%;
  margin-left: 10px;
} 


/* ---------------------------------------------------------------- *
	コンテンツ内見出し（マージン無）
 * ---------------------------------------------------------------- */
p.ctitle2 {
  clear: left;
  font-weight: bold;
  font-size: 100%;
  margin-left: 0px;
} 




/* ---------------------------------------------------------------- *
	コンテンツ上の見出しの設定です
 * ---------------------------------------------------------------- */
 
.contenthead {
  background-color: #ffffffff;
  border-style: double;
  border-width: 3px;
  border-color: #CCCC99;
  width: 556px;
  padding-top: 5px;
  padding-left: 5px;
}

.contenthead img.tit {
  /* --- 画像をどちらに回り込ませるか設定してください --- */
  /* Note：left（左）または right（右）を指定します；この指定によって
           以降のマージンの指定方法が異なります */
  margin-right: 10px;
  margin-bottom: 10px
} 

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

.contents {
  padding: 10px 10px 2px 10px;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  width: 547px;
  background-color: #f5f5f5;
  border-bottom: 0px solid #cccccc;
}


/* ---------------------------------------------------------------- *
	コンテンツ画像の設定です
 * ---------------------------------------------------------------- */
.contents img {
  /* --- 画像をどちらに回り込ませるか設定してください --- */
  /* Note：left（左）または right（右）を指定します；この指定によって
           以降のマージンの指定方法が異なります */
  float: left;
  /* --- 画像のマージンを設定してください --- */
  /* Note：前記の回り込みについて「left」のとき→左マージン 0，
           「right」のとき→右マージン 0 としてください */
  margin-top: 0;
  margin-right: 1em;
  margin-bottom: 0;
  margin-left: 0;
}


/* ---------------------------------------------------------------- *
	空室ボタンの設定です
 * ---------------------------------------------------------------- */
.kusitu {
  /* --- 画像をどちらに回り込ませるか設定してください --- */
  /* Note：left（左）または right（右）を指定します；この指定によって
           以降のマージンの指定方法が異なります */
  clear: left;
  margin-left: 425px;
}


/* ---------------------------------------------------------------- *
	回り込み解除
 * ---------------------------------------------------------------- */
p.text {
  clear: left;
}


table {
  letter-spacing: 0.1em;
}
.bc {
  border-collapse: collapse;
}
.bc th {
  color: #cc3300 ;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-right: 1px dotted #cccccc;
}
.bc td {
  padding: 0.4em 0.4em 0.4em 0.4em;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}


.bc2 {
  border-collapse: collapse;
}
.bc2 th {
  color: #cc3300 ;
  padding: 0.4em 0;
  border-top: 1px solid #cccccc;
  border-bottom: 0px solid #cccccc;
  border-right: 1px dotted #cccccc;
}
.bc2 td {
  padding: 0.4em 0;
  border-top: 1px solid #cccccc;
  border-bottom: 0px solid #cccccc;
}

 

/* ---------------------------------------------------------------- *
	パンくずリスト
 * ---------------------------------------------------------------- */
p.path {
  font-size: 90%;
  color: #ffffff;
  width: 775px;
  text-align: right;
  margin-left: auto;
  margin-right: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  background-color: #999999;
  padding: 0 5px 2px 0;
  clear: right;
}


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

#footer {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: #FFFFFF url(img/foot.gif) repeat-x;
  /* --- マージンを設定してください --- */
  /* Note：上マージンは段組コンテナの下マージンとの折りたたみが
           生じます */

  margin-top: 0px;
  margin-bottom: 0px;
  /* --- パディングを設定してください --- */
  /* Note：上下マージンを持つものが含まれる場合，上下パディングには
           正の値を指定してください */
  padding-top: 10px;
  padding-right: 0;
  padding-bottom: 0px;
  padding-left: 0;
  /* --- フッタ上の罫線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
  border-top: 0px solid #cccc99 ;
  height: 30px;
}

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

#footer ul li {
  margin: 0;
  padding: 0;
  /* --- フッタメニュー右側の区切り線の太さ・線種・色を設定してください（短縮プロパティでの設定です） --- */
  border-right: 1px solid #cccc99;
  /* --- 横並びリストのリストマーカ画像を設定してください --- */
  /* Note：16×16 ピクセル以下のものを使用してください */
  background-image: none;
}


#footer ul li a {
  margin: 0;
  padding: 2px 10px 1px 10px;
  /* --- ナビゲーション１項目あたりのクリッカブル領域をテキスト部分だけでなくボックス単位とするためには   display: block;と指定してください --- */
  display: inline;
}


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