/*=====================================================

名　称：base.css

概　要：サイト用classライブラリ・一括指定、ヘッダー、
　　　　フッター、ナビゲーション詳細設定

制作日：2007.07.09
修正日：2007.07.09

=====================================================*/ 


/*ナビゲーション（共通）
--------------------------------------------------*/
#navigation{
  width:800px;
  height:50px;
  background-image:url(images/botton.jpg);
  clear:both;
}
#navigation li{
  display:block;
  float:left;
}
#navigation a{
  text-indent:-9999px;
  display:block;
  background:url(images/botton.jpg) no-repeat;
  background-position:left top;
  float:left;
}
#navigation a:hover{
  background:#ffffff url(images/botton.jpg) no-repeat;
  background-position:left top;
}

#navi01 a{
  width:90px;
  height:50px;
  background-position:0 0;
}
#navi02 a{
  width:150px;
  height:50px;
  background-position:-90px 0;
} 
#navi03 a{
  width:150px;
  height:50px;
  background-position:-240px -0;
}  
#navi04 a{
  width:140px;
  height:50px;
  background-position:-390px 0;
}  
#navi05 a{
  width:80px;
  height:50px;
  background-position:-530px 0;
}  
#navi06 a{
  width:80px;
  height:50px;
  background-position:-610px 0;
}  
#navi07 a{
  width:80px;
  height:50px;
  background-position:-690px 0;
}  

#navi01 a:hover{
  background-position:0 -50px;
}
#navi02 a:hover{
  background-position:-90px -50px;
} 
#navi03 a:hover{
  background-position:-240px -50px;
}  
#navi04 a:hover{
  background-position:-390px -50px;
}  
#navi05 a:hover{
  background-position:-530px -50px;
}  
#navi06 a:hover{
  background-position:-610px -50px;
}  
#navi07 a:hover{
  background-position:-690px -50px;
} 

#navi01-stay a,#navi01-stay a:hover{
  width:90px;
  height:50px;
  background-position:0 -100px;
}
#navi02-stay a,#navi02-stay a:hover{
  width:150px;
  height:50px;
  background-position:-90px -100px;
} 
#navi03-stay a,#navi03-stay a:hover{
  width:150px;
  height:50px;
  background-position:-240px -100px;
}  
#navi04-stay a,#navi04-stay a:hover{
  width:140px;
  height:50px;
  background-position:-390px -100px;
}  
#navi05-stay a,#navi05-stay a:hover{
  width:80px;
  height:50px;
  background-position:-530px -100px;
}  
#navi06-stay a,#navi06-stay a:hover{
  width:80px;
  height:50px;
  background-position:-610px -100px;
}  
#navi07-stay a,#navi07-stay a:hover{
  width:80px;
  height:50px;
  background-position:-690px -100px;
}

/*メイン（共通）
--------------------------------------------------*/ 
#main{
  background-image:url(images/main.jpg);
  background-color:#F7F0E0;
  clear:both;
}


#cafe-title,#espresso-title,#coffee-title,#drink-title,#food-title,#flower-title,,#art-title,#link-title,#map-title{
  width:800px;
  height:180px;
}
#cafe-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/cafe_title.jpg) no-repeat;
}
#espresso-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/espresso_title.jpg) no-repeat;
}
#coffee-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/coffee_title.jpg) no-repeat;
}
#drink-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/drink_title.jpg) no-repeat;
}
#food-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/food_title.jpg) no-repeat;
}
#beans-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/beans_title.jpg) no-repeat;
}
#flower-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/flower_title.jpg) no-repeat;
}
#art-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/art_title.jpg) no-repeat;
}
#link-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/link_title.jpg) no-repeat;
}
#map-title h4{
  width:800px;
  height:180px;
  text-indent:-9999px;
  display:block;
  background:url(images/map_title.jpg) no-repeat;
}



/*インデックス-メイン（index）
--------------------------------------------------*/
#index-main{
  background:url(images/index_main.jpg) no-repeat;
}


/*ニュース（index）
--------------------------------------------------*/
#news{
  position:absolute;
  left:70px;
  top:190px;
  z-index:1;
}
#news h5{
  font-family:"Century";
  font-size:20px;
  color:#FFFFFF;
  padding:0 0 5px 0;
}
#news p{
  color:#FFFFFF;
}

#news a{
  color:#FFFFFF;
  text-decoration:underline;
}

.date{
  margin:0 5px 0 0;
}

/*ショップインフォ（index）
--------------------------------------------------*/
#shop-info{
  position:absolute;
  left:500px;
  top:590px;
  z-index:2;
}
#shop-info h5{
  font-size:14px;
  color:#FFFFFF;
  padding:0 0 5px 0;
  font-weight:bold;
}
#shop-info p{
  color:#FFFFFF;
}


/*バナー（index）
--------------------------------------------------*/
#banner{
  width:780px;
  height:130px;
  padding:470px 0 0 20px;
}
#banner li{
  display:block;
  float:left;
}
#banner a{
  text-indent:-9999px;
  width:180px;
  height:110px;
  margin:0 10px 0 0;
  display:block;
  background:url(images/banner.jpg) no-repeat;
  background-position:left top;
  float:left;
}
#banner a:hover{
  background:#ffffff url(images/banner.jpg) no-repeat;
  background-position:left top;
}

#banner01 a{
  background-position:0 0;
}
#banner02 a{
  background-position:-180px 0;
}
#banner01 a:hover{
  background-position:0 -110px;
}
#banner02 a:hover{
  background-position:-180px -110px;
}   


/*キャプション（共通）
--------------------------------------------------*/
#caption{
  padding:20px 0 0 50px;
  width:450px;
  height:320px;
  float:left;
}
#caption h5{
	font-size:12px;
	font-weight:bold;
	margin:0 0 10px 0;
	color:#5A321D;
}

/*インフォ（共通）
--------------------------------------------------*/
#info{
  margin:20px 0 0 0;
  padding:5px;
  width:235px;
  float:left;
  border-left-color: #5A321D;
  border-left-style: solid;
  border-left-width: 5px;
  background-color:#FFFFFF;
}
#info-img{
  margin:20px 0 0 0;
  width:240px;
  float:left;
}

.info-small{
  font-size:10px;
  margin:0 0 5px 0;
}


/*サブナビゲーション（カフェ）
--------------------------------------------------*/
#sub-navigation{
  position:absolute;
  top:670px;
  left:100px;
  width:600px;
  height:18px;
  padding:1px;
  background-image:url(images/sub_botton.gif);
  z-index:4;
  clear:both;
}
#sub-navigation li{
  float:left;
  vertical-align:bottom;
  line-height:0;
}
#sub-navigation a{
  width:100px;
  height:18px;
  text-indent:-9999px;
  display:block;
  background:url(images/sub_botton.gif) no-repeat;
  background-position:left top;
  float:left;
  vertical-align:bottom;
  line-height:0;
}
#sub-navigation a:hover{
  background:#ffffff url(images/sub_botton.gif) no-repeat;
  background-position:left top;
}

#sub-navi01 a{
  width:100px;
  height:18px;
  background-position:-1px -41px;
}
#sub-navi02 a{
  width:100px;
  height:18px;
  background-position:-101px -41px;
} 
#sub-navi03 a{
  background-position:-201px -41px;
}  
#sub-navi04 a{
  background-position:-301px -41px;
}  
#sub-navi05 a{
  background-position:-401px -41px;
}  
#sub-navi06 a{
  background-position:-501px -41px;
}  

#sub-navi01 a:hover,#sub-navi01-stay a:hover{
  background-position:-1px -21px;
}
#sub-navi02 a:hover,#sub-navi02-stay a:hover{
  background-position:-101px -21px;
} 
#sub-navi03 a:hover,#sub-navi03-stay a:hover{
  background-position:-201px -21px;
}  
#sub-navi04 a:hover,#sub-navi04-stay a:hover{
  background-position:-301px -21px;
}  
#sub-navi05 a:hover,#sub-navi05-stay a:hover{
  background-position:-401px -21px;
}  
#sub-navi06 a:hover,#sub-navi06-stay a:hover{
  background-position:-501px -21px;
} 

#sub-navi01-stay a{
  background-position:-1px -1px;
}
#sub-navi02-stay a{
  background-position:-101px -1px;
} 
#sub-navi03-stay a{
  background-position:-201px -1px;
}  
#sub-navi04-stay a{
  background-position:-301px -1px;
}  
#sub-navi05-stay a{
  background-position:-401px -1px;
}  
#sub-navi06-stay a{
  background-position:-501px -1px;
}  
 

/*こだわり（共通）
--------------------------------------------------*/
#kodawari{
  float:left;
  width:180px;
  height:342px;
  background:url(images/kodawari_back.jpg) no-repeat;
  padding:0 80px 0 70px;
}
#kodawari h5{
  display:block;
  width:180px;
  height:65px;
  text-indent:-9999px;
  background:url(images/kodawari_title.jpg) no-repeat;

}

/*メニュー（共通）
--------------------------------------------------*/
#menu{
  float:left;
  width:422px;
  height:342px;
  background:url(images/menu_back.jpg) no-repeat;
}
#menu h5{
  display:block;
  width:422px;
  height:40px;
  text-indent:-9999px;
  background:url(images/menu_title.jpg) no-repeat;
}
.menu-list{
  margin:0 0 5px 0;
} 


/*ネクストバック（共通）
--------------------------------------------------*/
#next-back{
  position:absolute;
  top:600px;
  left:330px;
  width:580px;
  z-index:3;
}
#next-back p{
  color:#444444;
}

/*フッター（共通）
--------------------------------------------------*/
#footer address{
  font-size:10px;
  margin:5px 0 0 0;
  color:#ffffff;
  font-family:"Century";
}

/*コーヒー豆ナビゲーション（コーヒー豆）
--------------------------------------------------*/
#beans-navigation{
  width:200px;
  height:18px;
  padding:1px;
  background-image:url(images/beans_botton.gif);
  margin:0 0 10px 0;
  clear:both;
}
#beans-navigation li{
  float:left;
  vertical-align:bottom;
  line-height:0;
}
#beans-navigation a{
  width:100px;
  height:18px;
  text-indent:-9999px;
  display:block;
  background:url(images/beans_botton.gif) no-repeat;
  background-position:left top;
  float:left;
  vertical-align:bottom;
  line-height:0;
}
#beans-navigation a:hover{
  background:#ffffff url(images/beans_botton.gif) no-repeat;
  background-position:left top;
}

#beans-navi01 a{
  background-position:-1px -41px;
}
#beans-navi02 a{
  background-position:-101px -41px;
} 

#beans-navi01 a:hover,#beans-navi01-stay a:hover{
  background-position:-1px -21px;
}
#beans-navi02 a:hover,#beans-navi02-stay a:hover{
  background-position:-101px -21px;
} 

#beans-navi01-stay a{
  background-position:-1px -1px;
}
#beans-navi02-stay a{
  background-position:-101px -1px;
} 

#beans-kodawari{
  float:left;
  width:180px;
  height:342px;
  background:url(images/beans_kodawari_back.jpg) no-repeat;
  padding:0 80px 0 70px;
}
#beans-kodawari h5{
  display:block;
  width:180px;
  height:65px;
  text-indent:-9999px;
  background:url(images/beans_kodawari_title.jpg) no-repeat;

}


/*リンク（リンク）
--------------------------------------------------*/

.link-list{
  margin:0 0 10px 0;
  width:410px;
} 
.link-botton{
clear:both;
width:800px;
text-align:center;
}