@charset "utf-8";

/*全カテゴリトップ共通要素指定*/

#mainVisual {
	position: relative;
	z-index: 6;
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1) inset;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1) inset;
}

#topListContainer {
	position: relative;
	height: 890px;
/*	margin-top: -145px;
	padding-top: 145px;*/
	padding-bottom: 40px;
}

#topListContainer .topRecipeBlock {
	position: absolute;
}

#topRecipe01,
#topRecipe03,
#topRecipe04 {
	top: 0;
}

#topRecipe02,
#topRecipe09,
#topRecipe10 {
	top: 225px;
}

#topRecipe05,
#topRecipe06 {
	top: 450px;
}

#topRecipe07,
#topRecipe08,
#topRecipe11,
#topRecipe12 {
	top: 675px;
}

#topRecipe01,
#topRecipe05,
#topRecipe11 {
	left: 0;
}

#topRecipe12 {
	left: 160px;
}

#topRecipe03,
#topRecipe06,
#topRecipe07,
#topRecipe09 {
	left: 320px;
}

#topRecipe10 {
	left: 480px;
}

#topRecipe02,
#topRecipe04,
#topRecipe08 {
	left: 640px;
}


#topRecipe01:before,
#topRecipe02:before {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 8;
}


#topListContainer .topRecipeBlock .recipeName {
	background-repeat: no-repeat;
}

/* @group パネル大 */

#topListContainer .topRecipeL {
	width: 304px;
	height: 434px;
}

#topListContainer .topRecipeL .photo {
	position: relative;
	overflow: hidden;
	width: 304px;
	height: 266px;
}

#topListContainer .topRecipeL .photo img {
	position: absolute;
	top: -5px;
	left: -17px;
	width: 368px;
	height: 276px;
	max-width: 368px;
}

#topListContainer .topRecipeL .recipeName {
	padding-top: 13px;
	background-position: 12px 18px;
	line-height: 22px;
}

#topListContainer .topRecipeL .recipeSummary {
	height: 60px;
	padding-right: 130px;
	padding-bottom: 30px;
}

#topListContainer .topRecipeL .recipeName:after {
	left: 38px;
}

/* @end */

/* @group パネル中 */

#topListContainer .topRecipeM {
	width: 304px;
	height: 209px;
}

#topListContainer .topRecipeM .photo {
	float: left;
	position: relative;
	overflow: hidden;
	width: 152px;
	height: 209px;
	-moz-border-radius: 2px 0 0 2px;
	-webkit-border-radius: 2px 0 0 2px;
	border-radius: 2px 0 0 2px;
}

#topListContainer .topRecipeM .photo img {
	position: absolute;
	top: -7px;
	left: -72px;
	width: 296px;
	height: 222px;
	max-width: 296px;
}

#topListContainer .topRecipeM .recipeName,
#topListContainer .topRecipeM .recipeSummary {
	float: right;
	width: 131px;
	padding: 0 6px 0 0;
}

#topListContainer .topRecipeM .recipeName {
	padding-top: 11px;
	padding-bottom: 13px;
	background-position: 0 16px;
	font-size: 13px;
	line-height: 20px;
}

/*#topListContainer .topRecipeM.rbHarapeko .recipeName {
	padding-left: 1px;
}*/

#topListContainer .topRecipeM a.new {
	padding-right: 0;
}

#topListContainer .topRecipeM .recipeName:after {
	top: 38px;
	left: -35px;
	border-right:10px solid #fff;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
}

#topListContainer .topRecipeM.rbHarapeko .recipeName:after {
	left: -34px;
}

#topListContainer .topRecipeM a.new:after {
	top: -3px;
	right: 7px;
}

/* @end */

/* @group パネル小 */

#topListContainer .topRecipeS {
	width: 144px;
	height: 209px;
}

#topListContainer .topRecipeS .photo {
	float: left;
	position: relative;
	overflow: hidden;
	width: 144px;
	height: 209px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#topListContainer .topRecipeS .photo img {
	position: absolute;
	top: 0;
	left: -68px;
	width: 279px;
	height: 209px;
	max-width: 296px;
}

#topListContainer .topRecipeS .recipeName {
	position: absolute;
	width: 144px;
	height: auto;
	padding: 14px 11px 14px;
	left: 3px;
	bottom: 3px;
	background-color:rgba(0,0,0,0.8) !important;
	background-position: 9px 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-border-radius: 0 0 2px 2px;
	-webkit-border-radius: 0 0 2px 2px;
	border-radius: 0 0 2px 2px;
	font-size: 11px;
	line-height: 15px;
}

#topListContainer .topRecipeS .recipeName a {
	display: block;
	min-height: 30px;
	
	color: #aaa;
}

#topListContainer .topRecipeS .recipeSummary,
#topListContainer .topRecipeS .btmUtil,
#topListContainer .topRecipeS .recipeName:after {
	display: none;
}

/* @end */

#topBtmBtnArea {
	padding-top: 40px;
	padding-bottom: 18px;
	background: url(../images/body_bg02.png);
}

#topBtmBtnArea .deviceFrame {
	background: url(../images/body_bg.png);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



#btmNavigation01 {
	padding-top: 0;
}


@media screen and (max-width: 960px){
	
	
	#topListContainer {
		width: 746px;
		height: 1340px;
/*		padding: 0;*/
	}
	
	#topRecipe01,
	#topRecipe03 {
		top: 0;
	}
	
	#topRecipe04 {
		top: 225px;
	}
	
	#topRecipe02,
	#topRecipe09,
	#topRecipe10 {
		top: 450px;
	}
	
	#topRecipe05 {
		top: 675px;
	}
	
	#topRecipe06,
	#topRecipe07 {
		top: 900px;
	}
	
	#topRecipe08,
	#topRecipe11,
	#topRecipe12 {
		top: 1125px;
	}
	
	#topRecipe01,
	#topRecipe05,
	#topRecipe06,
	#topRecipe08,
	#topRecipe09 {
		left: 10px;
	}
	
	#topRecipe10 {
		left: 199px;
	}
	
	#topRecipe02,
	#topRecipe03,
	#topRecipe04,
	#topRecipe07,
	#topRecipe11 {
		left: 388px;
	}
	
	#topRecipe12 {
		left: 577px;
	}

	/* @group パネル大 */
	
	#topListContainer .topRecipeL {
		width: 362px;
	}
	
	#topListContainer .topRecipeL .photo {
		width: 362px;
	}
	
	#topListContainer .topRecipeL .photo img {
		position: absolute;
		top: -5px;
		left: -3px;
	}
		
	/* @end */
	
	/* @group パネル中 */
	
	#topListContainer .topRecipeM {
		width: 362px;
		height: 209px;
	}
	
	#topListContainer .topRecipeM .photo {
		width: 181px;
	}
	
	#topListContainer .topRecipeM .photo img {
		position: absolute;
		top: -7px;
		left: -58px;
		width: 296px;
	}
	
	#topListContainer .topRecipeM .recipeName,
	#topListContainer .topRecipeM .recipeSummary {
		width: 160px;
	}
	
	#topListContainer .topRecipeM .recipeName {
		padding-top: 10px;
		padding-bottom: 13px;
		background-position: 0 16px;
		font-size: 12px;
		line-height: 20px;
	}
	
	#topListContainer .topRecipeM .recipeName:after {
		top: 38px;
		left: -35px;
		border-right:10px solid #fff;
		border-top:10px solid transparent;
		border-bottom:10px solid transparent;
	}
	
	#topListContainer .topRecipeM a.new:after {
		top: -3px;
		right: 7px;
	}
	
	/* @end */
	
	
	#topListContainer .topRecipeS {
		width: 173px;
	}
	
	#topListContainer .topRecipeS .photo {
		width: 173px;
	}
	
	#topListContainer .topRecipeS .photo img {
		left: -53px;
	}
	
	#topListContainer .topRecipeS .recipeName {
		width: 173px;
	}
		
	
	.recipeListArea .listRecipeBlock .recipeName a.new {
		padding-right: 25px !important;
	}
}

@media screen and (max-width: 768px){
	
}

@media screen and (max-width: 640px){

	.act01 #recipeNav li#rGNav01 a {
		background-position: 50% 0;
		margin-left: 0;
		
	}

	#topListContainer {
		width: auto;
		height: auto;
		overflow: hidden;
		padding: 0 5px 15px;
	}
	
	
	#topRecipe01:before,
	#topRecipe02:before {
		display: none;
	}
	
	#topListContainer .topRecipeBlock {
		position: relative;
		top: 0;
		left: 0;
		width: 49.1%;
		height: auto;
		margin: 0 0 5px 0;
		padding: 2px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#topListContainer .topRecipeBlock:nth-child(2n) {
		float: right;
	}
	
	#topListContainer .topRecipeBlock .photo {
		overflow: visible;
		float: none;
		width: 100%;
		height: auto;
	}
	
	#topListContainer .topRecipeBlock .photo img {
		position: static;
		width: 100%;
		height: auto;
	}
	
	#topListContainer .topRecipeBlock .recipeName {
		position: relative;
		top: 0;
		left: 0;
		float: none;
		width: auto;
		padding: 14px 5px 11px;
		background-color: rgba(0,0,0,0) !important;
		background: none;
		font-size: 11px;
		line-height: 16px;
	}
	
	#topListContainer .topRecipeBlock .recipeName a {
		color: #000;
	}
	
	#topListContainer .topRecipeS .recipeName a {
		min-height: 13px;
	}
	
	#topListContainer .topRecipeBlock .recipeSummary {
		float: none;
		display: block;
		width: auto;
		height: 30px;
		padding: 0 5px 40px 5px;
		font-size: 10px;
		line-height: 15px;
	}
	
	#topListContainer .topRecipeBlock .btmUtil {
		display: block;
		right: 7px;
		bottom: 7px;
	}
	
	
	#topListContainer .topRecipeBlock .btmUtil li {
		float: left;
		width: 25px;
		height: 25px;
		margin: 0 0 0 3px;
		padding-top: 1px;
		background-size: 25px 25px !important;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 18px;
		letter-spacing: 0px;
	}
	
	
	#topListContainer .topRecipeBlock .btmUtil li.time {
		background: url(../images/recipelist_time_sp.png) no-repeat;
	}
	
	#topListContainer .topRecipeBlock .btmUtil li.kcal {
		background: url(../images/recipelist_kcal_sp.png) no-repeat;
	}
	
	#topListContainer .topRecipeBlock .btmUtil li.genre .icon {
		display: block;
		width: 25px;
		height: 25px;
		background-size: 25px 25px;
		text-indent: -999em;
	}
	
	#topListContainer .topRecipeBlock a.new:after {
		content: "";
		display: block;
		top: 0;
		right: 0;
		width: 22px;
		height: 23px;
		background: url(../images/icon_new_sp.png) no-repeat;
		background-size: 22px 23px;
	}
	
	#topListContainer .topRecipeBlock .recipeName:after,
	#topListContainer .topRecipeM .recipeName:after {
		border: none;
	}
	
	#topListContainer .topRecipeBlock .recipeName:after,
	#topListContainer .topRecipeM .recipeName:after {
		display: block;
		border-bottom:5px solid #fff !important;
		border-left:5px solid transparent !important;
		border-right:5px solid transparent !important;
		top: -5px !important;
		left: 18px !important;
	}
	
	#topBtmBtnArea {
		padding-top: 20px;
		padding-bottom: 10px;
		background-size: 50px 50px;
	}
	
	#topBtmBtnArea .deviceFrame {
		background-size: 50px 50px;
	}
}