@charset "utf-8";

/**********************************

	recipe.css
		/recipe/index.html
		
		#subVisual
			#subVisualArea
			#pankuzu
			
		#contentsArea
			#mainContents
				#monRecipe
					#monRecipeHeader
				#recipeSearch
				
			#sideContents
				#freewordSearch
				#categorySearch
				#bannerArea
			
		/recipe/detail.html
			@printCss
			#contentsArea
				#recipeHeader
				#cookInfo
				#zairyo
				#pageHead


**********************************/
/*--------------------------------- index.html -*/
/*=================================

		#subVisual

=================================*/
#subVisualWrapper{
	margin-top:-39px;
	height:457px;
	overflow:hidden;
}

#subVisual{
	position:relative;
	background:url(../images/bg_subVisual.jpg) repeat-x;
}



/*---------------------------------
		#subVisual > #subVisualArea
---------------------------------*/
#subVisual #subVisualArea{
	position:relative;
	margin:0 auto;
	width:1040px;
	height:297px;
	background:url(../images/bg_subVisual_shadow.jpg) top left no-repeat;
}

#subVisual #subVisualArea h2{
	position:relative;
	margin:0 auto;
	width:1001px;
	height:297px;
	background:url(../../recipe/images/bg_subVisual.jpg) top left no-repeat;
}

#subVisual #subVisualArea h2 img{
	display:block;
	position:absolute;
	top:108px;
	left:63px;
}


/*---------------------------------
		#subVisual > #pankuzu
---------------------------------*/
#subVisual #pankuzu{
	position:absolute;
	top:0%;
	left:50%;
	margin:-15px 0 0 -792px;
	width:1584px;
	height:362px;
	z-index:10;
}

#subVisual #pankuzu ul{
	margin:46px 0 0 350px;
}

#subVisual #pankuzu ul li{
	display:inline-block;
	/display:inline;
	/zoom:1;
	font-size:78%;
	color:#333333;
}

#subVisual #pankuzu ul li a{	color:#aca6a1;}
#subVisual #pankuzu ul li a:hover{	color:#aca6a1;}

#subVisual p.bg_btm{
	position:absolute;
	bottom:-83px;
	left:50%;
	margin:0 0 0 -792px;
	width:1584px;
	z-index:100;
}

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

		#contentsArea

=================================*/
#contentsArea{
	position:relative;
	margin:-190px auto 25px auto;
	width:980px;
	z-index:1050;
}	


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

		#mainContents

=================================*/
#mainContents{
	float:left;
	margin-right:12px;
	width:703px;
	font-size:85%;
}


/*---------------------------------
		#mainContents > #monRecipe
---------------------------------*/
#monRecipe{
	margin-bottom:16px;
	padding-bottom:24px;
	background:url(../../recipe/images/bg_monRecipe_btm.gif) left bottom no-repeat;
	overflow:hidden;
}


/*----- #mainContents > #monRecipe > #monRecipeHeader -----*/
#monRecipeHeader{
	background:url(../../recipe/images/bg_monRecipe_top.png) no-repeat;
	overflow:hidden;
}

#monRecipeHeader h3{
	float:left;
}

#monRecipeHeader p{
	float:left;
	margin-top:24px;
}

/*--------------------------------------------*/
#recommendBoxWrapper{
	background:url(../../recipe/images/bg_monRecipe.png) repeat-y;
	background-color:#ffffff;
	padding:0 28px;
	overflow:hidden;
}

#monRecipeArea div.recommendBox{
	float:left;
	margin-left:10px;
	_margin-left:5px;
	width:205px;
}

#monRecipeArea div.recommendBox dl{
	width:196px;
	background:url(../../recipe/images/bg_monRecipeBtm.gif) left bottom no-repeat;
	margin:0 auto;
}

#monRecipeArea div.recommendBox dt{
	display:table;
	text-align:center;
	font-size:125%;
	font-weight:bold;
	color:#7bbf23;
	background:url(../../recipe/images/bg_monRecipe_ballonTop.gif) left top no-repeat;
}

#monRecipeArea div.recommendBox dt span{
	display:table-cell;
	*display:inline;
	*zoom:1;
	padding:19px 26px 0 26px;
	width:146px;
	vertical-align:middle;
	height:100%;	
}

#monRecipeArea div.recommendBox dd{
	padding:9px 22px 10px 22px;
	*padding-bottom:15px;
	background:url(../../recipe/images/bg_monRecipe_ballonLine.gif) center top no-repeat;
}

#monRecipeArea div.recommendBox p{
	text-align:center;
}

#monRecipeArea div.recommendBox p a.recipeBox{
	position:relative;
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding:0px;
	border:1px solid #e5e5e5;
}

#monRecipeArea div.recommendBox p a.recipeBox .recipeBoxOv{ 
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:1050;	
}


/*---------------------------------
		#mainContents > #recipeSearch
---------------------------------*/
#recipeSearch{
	background:url(../../recipe/images/bg_monSearch.png) repeat-y;
}

#recipeSearchArea{
	margin-bottom:10px;
	padding-bottom:19px;
	background:url(../../recipe/images/bg_monSearchBtm.png) left bottom no-repeat;
	overflow:hidden;
}

/*----- #mainContents > #monRecipe > #monRecipeHeader -----*/
#recipeSearch #recipeSearchHeader{
	padding:16px 0 0 38px;
	background:url(../../recipe/images/bg_monSearchTop.png) no-repeat;
	overflow:hidden;
}

#recipeSearch #recipeSearchHeader h3{
	float:left;
	margin-right:24px;
}

#recipeSearch #recipeSearchHeader p{
	float:left;
}

/*---------------------------------
		#mainContents > #recipeSearch > #searchContents
---------------------------------*/
#searchContentsWrapper{
	margin-top:19px;
	background:url(../../recipe/images/bg_searchContentsWrapper.png) repeat-y;
}

#searchContents{
	width:687px;
	background:url(../../recipe/images/bg_searchContents_top.jpg) no-repeat;
	padding-top:3px;
	color:#81511c;
}

#searchContents a{
	color:#81511c;
	text-decoration:none;
}

#searchContents a:hover{
	color:#6dbd07;
}

#searchContents dl.category{
	position:relative;
	background:url(../../recipe/images/bg_searchContents.gif) repeat-y;
	overflow:hidden;
}


#searchContents dl.ryori,
#searchContents dl.theme{
	margin-bottom:2px;
}

#searchContents dt{
	clear:both;
	float:left;
	width:263px;
	line-height:0;
}

#searchContents dt.ryori{
	min-height:211px;
}
#searchContents dt.theme{
	min-height:230px;
}

#searchContents dt.nattotofu{
	min-height:237px;
}

#searchContents dt.cImg img{
	position:absolute;
	left:4px;
	bottom:0;
}

#searchContents .nattotofu dt.cImg img{
	bottom:-4px
}

#searchContents dd{
	float:left;
	padding:0 0 34px 17px;
}

#searchContents dd ul.itemList{
	float:left;
	padding-top:45px;
}

#searchContents .ryori dd{
	padding:0 0 14px 17px;
}

#searchContents .ryori dd ul.itemList{
	padding-top:25px;
}


#searchContents dd ul.itemList li{
	width:153px;
}

#searchContents dd.ryori ul.itemList li{
	width:133px;
}


#searchContents dd ul.itemList li{
	margin-bottom:19px;
}


#searchContents dd dl{
	padding-top:45px;
	width:163px;
	float:left;
}

#searchContents dd dl dt{
	float:none;
	height:36px;
}

#searchContents dd dl dd{
	float:none;
	margin:0;
	padding:0;
}

#searchContents dd dl dd ul.itemList{
	float:none;
	margin:0;
	padding:0;
}



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

		#sideContents

=================================*/
#sideContents{
	float:left;
	margin-top:5px;
	width:265px;
}

#sideContents li img{
	vertical-align:bottom;
}


/*--------------------------------- detail.html -*/

/*================================= #pageHeadArea */
@media print {
	#gNavi,
	#pageHead,
	#sendMail,
	#sideContents,
	#footer{ display:none;}
}
		


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

		.detail #contentsArea

=================================*/
.detail #contentsArea{
	position:relative;
	margin-top:-193px;
	overflow:hidden;
}

.detail #mainContents{
	padding-top:17px;
	background:url(../../recipe/images/bg_detail_top.png) left top no-repeat;
}

.detail #container{
	padding-bottom:14px;
	background:url(../../recipe/images/bg_detail_mainBtm.gif) left bottom no-repeat;
	overflow:hidden;
}

.detail #contents{
	padding:0 28px 0 28px;
	background:url(../../recipe/images/bg_monRecipe.png) repeat-y;
	background-color:#ffffff;
}



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

		#recipeHeader

=================================*/
#recipeHeader{
	position:relative;
	padding-top:12px;
	overflow:hidden;
}

#recipeHeader dl.recipeName{
	float:left;
	line-height:1;
	overflow:hidden;
}

#recipeHeader dl.recipeName dt{
	margin-bottom:10px;
	padding-left:7px;
	background:url(../../recipe/images/bg_recipeCategoryIconLeft.gif) left top no-repeat;
	height:20px
}

#recipeHeader dl.recipeName dt span{
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding-right:7px;
	line-height:20px;
	height:20px;
	font-size:92%;
	color:#ffffff;
	background:url(../../recipe/images/bg_recipeCategoryIconRight.gif) right top no-repeat;
}

#recipeHeader dl.recipeName h3{
	margin-bottom:10px;
	font-size:2.5em;
	color:#6a3906;
}

#recipeHeader ul{
	float:right;
	margin-top:32px;
	color:#6a3906;
}

#recipeHeader ul li{
	line-height:1;
	text-align:right;
	padding:0 0 5px 77px;
}

#recipeHeader ul li.cal{ background:url(../../recipe/images/txt_detail_cal.gif) left top  no-repeat; }
#recipeHeader ul li.time{ background:url(../../recipe/images/txt_detail_time.gif) left top  no-repeat; }

#recipeHeader .printTop{
	position:absolute;
	top:14px;
	right:0;
}



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

		#cookInfo

=================================*/
#cookInfo{
	margin-bottom:25px;
	overflow:hidden;
}

#cookInfoArea{
	float:left;
	width:323px;
	margin-right:10px;
}

#cookInfo #recipeVisual{
	margin-bottom:12px;
}

#cookInfo #socialBtn{
	margin-bottom:21px;
}

#cookInfo #socialBtn li{
	margin-right:10px;
	float:left;
}

#cookInfo #recipeSuggest{
	margin-bottom:25px;
}

#cookInfo #recipeSuggest dd ul li p{
	width:84px;
	margin:0 10px 10px 0;
	float:left;
}

#cookInfo #recipeSuggest dd ul li dl{
	float:left;
	margin-bottom:10px;
}

#cookInfo #recipeSuggest dd ul li dt{
	margin-bottom:10px;
	color:#6a3906;
}



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

		#zairyo

=================================*/
#zairyo{
	width:305px;
	float:left;
}

#zairyo thead th{
	padding-bottom:8px;
	border-bottom:1px dotted #6a3906;
	text-align:left;
}

#zairyo thead td{
	padding:9px 0 5px 0;
}

#zairyo tbody td{
	padding:5px;
	text-align:left;
	padding-left:1.5em;
}

#zairyo tbody td.group{
	text-indent:0;
}

#zairyo tbody tr.odd td{ background:#f7f1e9}
#zairyo tbody tr.even{background:#ffffff;}
#zairyo tbody tr.blank{height:2em;}



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

		#howto

=================================*/
#howto{
	margin-bottom:25px;
	background:#f4ece2;
}

#howto dt{
	margin:0 10px 0 10px;
	padding-top:10px;
	border-bottom:1px dotted #6a3906;
}

#howto dd{
	padding:11px 12px 0px 11px;
}

#howto dd li{
	padding:1px 0 16px 30px;
}

#howto dd li.p1{ background:url(../../recipe/images/icon_detail_howto01.gif) no-repeat;}
#howto dd li.p2{ background:url(../../recipe/images/icon_detail_howto02.gif) no-repeat;}
#howto dd li.p3{ background:url(../../recipe/images/icon_detail_howto03.gif) no-repeat;}
#howto dd li.p4{ background:url(../../recipe/images/icon_detail_howto04.gif) no-repeat;}
#howto dd li.p5{ background:url(../../recipe/images/icon_detail_howto05.gif) no-repeat;}
#howto dd li.p6{ background:url(../../recipe/images/icon_detail_howto06.gif) no-repeat;}
#howto dd li.p7{ background:url(../../recipe/images/icon_detail_howto07.gif) no-repeat;}
#howto dd li.p8{ background:url(../../recipe/images/icon_detail_howto08.gif) no-repeat;}
#howto dd li.p9{ background:url(../../recipe/images/icon_detail_howto09.gif) no-repeat;}
#howto dd li.p10{ background:url(../../recipe/images/icon_detail_howto10.gif) no-repeat;}
#howto dd li.p11{ background:url(../../recipe/images/icon_detail_howto11.gif) no-repeat;}
#howto dd li.p12{ background:url(../../recipe/images/icon_detail_howto12.gif) no-repeat;}
#howto dd li.p13{ background:url(../../recipe/images/icon_detail_howto13.gif) no-repeat;}
#howto dd li.p14{ background:url(../../recipe/images/icon_detail_howto14.gif) no-repeat;}
#howto dd li.p15{ background:url(../../recipe/images/icon_detail_howto15.gif) no-repeat;}
#howto dd li.p16{ background:url(../../recipe/images/icon_detail_howto16.gif) no-repeat;}
#howto dd li.p17{ background:url(../../recipe/images/icon_detail_howto17.gif) no-repeat;}
#howto dd li.p18{ background:url(../../recipe/images/icon_detail_howto18.gif) no-repeat;}
#howto dd li.p19{ background:url(../../recipe/images/icon_detail_howto19.gif) no-repeat;}
#howto dd li.p20{ background:url(../../recipe/images/icon_detail_howto20.gif) no-repeat;}



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

		div.freeArea

=================================*/
div.freeArea{
	margin-bottom:25px;
	background:#f4ece2;
}

div.freeArea p{
	margin:0 10px 0 10px;
	padding-top:10px;
	border-bottom:1px dotted #6a3906;
	color:#7e5327;
	font-size:1.4em;
}

div.freeArea dl{
	overflow:hidden;
}

div.freeArea dt{
	float:left;
	padding:11px 15px 11px 11px;
}

div.freeArea dd{
	padding:11px 12px 16px 11px;
}

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

		#sendMail

=================================*/
#sendMail{
	position:relative;
	margin:0 -28px 0 -28px;
	padding:16px 26px 0 26px;
	background:#e5e5e5;
	clear:both;
}

#sendMail dt{
	margin-bottom:10px;
}

#sendMail dd p{
	padding-bottom:10px
}

#sendMail dd form{
	margin-bottom:10px;
}


#sendMail p.memo{
	font-size:85%;
}


/*--------------------------------- ryori.html -*/
.search h3{
	padding-top:6px;
	border-bottom:3px solid #81511c;
	width:649px;
}



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

		.search #contentsArea

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

.search #contentsArea{
	position:relative;
	margin-top:-193px;
}

.search #mainContents{
	padding-top:17px;
	background:url(../../recipe/images/bg_detail_top.png) left top no-repeat;
}

.search #container{
	padding-bottom:14px;
	background:url(../../recipe/images/bg_search_mainBtm.gif) left bottom no-repeat;
}

.search #contents{
	padding:0 0 0 28px;
	background:url(../../recipe/images/bg_monRecipe.png) repeat-y;
	background-color:#ffffff;
}




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

		#categoryList

=================================*/
#categoryList{
	padding:17px 0 0 3px;
	width:650px;
}

#categoryList ul.itemList{
	float:left;
}

#categoryList ul.itemList li{
	width:120px;
	padding:0 0 20px 3px;
}

#categoryList ul.itemList li a{
	color:#81511c;
	text-decoration:none;
}

#categoryList ul.itemList li.cur a{
	color:#6dbd07;
}

#categoryList ul.itemList li a:hover{
	color:#6dbd07;
}

#categoryList dl{
	float:left;
	width:300px;
}

#categoryList dl.natto{
	position:relative;
	margin:0 25px0 0 0;
}

#categoryList dl dt{
	margin-bottom:15px;
}

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

		#categoryTitle

=================================*/
#categoryTitle{
	position:relative;
	padding-bottom:10px;
	margin:9px 0 19px -3px;
	font-size:1.5em;
	color:#ffffff;
	background:url(../../recipe/images/bg_categoryTitleBtm.png) left bottom no-repeat;
}

#categoryTitle h4{
	width:280px;
}

#categoryTitle h4.category{
	width:auto;
}


#categoryTitleInner{
	padding:16px 0 5px 20px;
	width:631px;
	background:url(../../recipe/images/bg_categoryTitleTop.png) no-repeat;
	background-color:#7cbf24;
}


#categoryTitle ul.visibleBtn{
	position:absolute;
	top:50%;
	right:36px;
	margin-top:-15px;
}

#categoryTitle ul.visibleBtn li{
	display:inline-block;
	/display:inline;
	/zoom:1;
	margin-left:9px;
}



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

		#searchResult

=================================*/
#searchResult tr{
	padding-left:3px;
	width:670px;
}

#searchResult td{
	width:168px;
	padding-bottom:20px;
}

#searchResult td a{
	display:block;
	width:148px;
	color:#4e2c06;
	text-decoration:none;
}

#searchResult td a span{
	display:block;
	margin-bottom:9px;
	text-align:center;
}

#searchResult td a img{
	border:1px solid #ebebeb;
}

#searchResult td a:hover{
	color:#63ac05;
}

#searchResult td a:hover img{
	border:1px solid #63ac05;
}

p.error{
	padding:30px 0;
	text-indent:10px;
}

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

		#pagerArea

=================================*/
#pagerArea{
	position:relative;
	width:650px;
	text-align:center;
}

#pagerArea p{
	position:absolute;
	top:3px;
}

#pagerArea p.pgLeft{ left:0;}
#pagerArea p.pgRight{ right:0;}

#pagerArea ul#pager li{
	display:inline-block;
	/display:inline;
	/zoom:1;
	width:24px;
	height:24px;
	line-height:24px;
	text-align:center;
}

#pagerArea ul#pager li.cur{
	color:#6ec104;
	background:url(../../recipe/images/bg_pager.gif) center center no-repeat;
}

#pagerArea ul#pager li.cur a{
	color:#6ec104;
}

#pagerArea ul#pager li a{
	color:#7e5327;
	text-decoration:none;
}

#pagerArea ul#pager li a:hover{
	color:#6ec104;
}