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

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

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

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

#container {
  /* --- 内容部分の背景を設定してください --- */
  /* Note：内容部分の背景を透明にしたり，透過 GIF を利用したりして
           背景に変化をつけることができます */
  background-image: url(img/bk_green.gif); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; width: 900px;
  /* --- ドキュメント本体の位置を設定してください --- */
  /* Note：「0」のみで左寄せ，「0 auto」でセンタリング */
  margin: 10px auto 30px; border: solid 2px #380; }
/* ---------------------------------------------------------------- *
	ヘッダ部分の設定です
 * ---------------------------------------------------------------- */

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

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

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

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

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

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

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

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

#main {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background: transparent; width: 900px; }

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

.contents {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
.contents .leaf { background-image: url(img/bk_leaf.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 top; height: 685px; margin: 0 auto; }
.contents .leaf h1 { float: left; margin-top: 40px; margin-right: 20px; margin-left: 30px; }
.contents .leaf h2 { float: left; margin-top: 40px; }
.contents .leaf p { color: #8ec323; font-size: 42px; font-weight: bold; line-height: 50px; clear: both; margin-top: 5px; margin-left: 65px; }
.contents .lead { width: 800px; margin-left: 68px; }
.contents .lead h3 { color: #ffed00; font-size: 30px; font-weight: normal; line-height: 35px; margin-bottom: 10px; }
.contents .lead p { width: 760px; }
.contents .org { margin-left: 60px; width: 780px; margin-top: 50px; }
.contents .org .porepore { color: #56731b; font-size: 20px; text-align: center; width: 800px; margin-bottom: 20px; }
.contents .org .porepore h4 { font-size: 30px; font-weight: normal; }
.contents .org p { margin-top: 10px; }
.contents .org dl { margin-top: -10px; margin-bottom: 20px; margin-left: 10px; }
.contents .org .left { width: 460px; float: left; margin-right: 10px; }
.contents .org .left p { line-height: 1.4em; }
.contents .org .right { margin-left: 5px; float: left; margin-bottom: 20px; }
.contents .sweets { background-image: url(img/bk_gataux.gif); background-repeat: no-repeat; background-position: left top; width: 800px; height: 540px; margin-top: 20px; margin-left: 65px; display: block; }
.contents .sweets .caption { width: 655px; margin-top: 10px; margin-left: 40px; }
.contents .sweets .caption p { font-size: 11px; line-height: 1.2em; }
.contents .sweets .special { width: 550px; float: left; margin-top: 60px; margin-left: 20px; }
.contents .sweets .special p { line-height: 1.4em; }
.contents .sweets .special img.nobel { float: left; margin-right: 3px; }
.contents .sweets .special .chef { text-align: right; width: 170px; float: left; padding-top: 30px; }
.contents .sweets .right { width: 160px; float: left; margin-top: 65px; margin-left: 10px; }
.contents .sweets .right img {  }
.contents .houkoku { background-image: url(img/bk_houkoku.gif); background-repeat: no-repeat; background-position: left top; width: 765px; height: 588px; margin-top: 40px; margin-right: auto; margin-left: auto; }
.contents .houkoku h4 { color: #815700; font-size: 28px; font-weight: normal; text-decoration: none; text-align: center; margin-right: auto; margin-bottom: 35px; margin-left: auto; padding-top: 25px; }
.contents .houkoku img.houkoku01 { width: 390px; float: left; margin-bottom: 20px; margin-left: 28px; }
.contents .houkoku p { width: 300px; float: right; padding-top: 10px; padding-right: 30px; }
.contents .houkoku img.houkoku02 { width: 706px; clear: both; margin-right: auto; margin-left: auto; display: block; }
/* ---------------------------------------------------------------- *
	コンテンツ画像の設定です
 * ---------------------------------------------------------------- */

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

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

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

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

#footer {
  /* --- 背景を設定してください（短縮プロパティでの設定です）--- */
  background-image: url(img/bk_foot.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; height: 245px; }
#footer address { color: #fff; margin-top: 5px; }
#footer a { color: #fff; text-decoration: underline; }
#footer a:hover { color: #fff; text-decoration: none; }
#footer .adress { color: #fff; font-size: 14px; line-height: 1.4em; float: right; margin-top: 50px; margin-right: 50px; margin-bottom: 40px; }
#footer .copyright { text-align: right; float: right; clear: right; margin-right: 30px; }
#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;
}