@charset "Shift_JIS";

* {
	margin: 0;
	padding: 0;
}

a:hover {
	color: inherit;
}
a:hover img {
	-moz-opacity:0.8;
	opacity:0.8;
	filter: alpha(opacity=80);
}

a img {
	border: 0 none;
	outline: 0 none;
}

#wrap {
	max-width: 950px;
	width: 100%;
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

#wrap>.pcHead {
	margin: 0 auto;
}

#wrap .wrap_header .linkTop{
	display: none;
}

#menuHeader #search{
	display: none;
}

#wrap .wrap_header .sns ul {
	clear: both;
}

@media screen and (max-width: 640px){
	.wrap_header{
		padding: 0 0 10px;
		background: url(/enjoy/recipe/sp/img/bg.jpg) repeat 0 0;		
	}
	
	.pc {
		display:none!important;
	}
}

@media screen and (min-width: 641px){	
	.sp {
		display:none!important;
	}
}

/* メインビジュアル */
.main_image {
	position: relative;
}

.main_image > .pcOnly {
	width: 950px;
	height: 244px;
}

.main_image	h1{
	text-align: left;
	letter-spacing: -1px;
}

.ttl_logo{
	position: absolute;
	top: 11.5%;
	left: 0;
}

.ttl_main{
	width: 100%;
	line-height: 1;	
	font-weight: bold;
	text-shadow:
	#fff 5px 0px,  #fff -5px 0px,/*上、下*/
	#fff 0px -5px, #fff 0px 5px,/*右、左*/
	#fff 5px 5px , #fff -5px 5px,/*右下、左上*/
	#fff 5px -5px, #fff -5px -5px,/*右上、左下*/
	/*  */
	#fff 1px 5px,  #fff -1px 5px,
	#fff 1px -5px, #fff -1px -5px,
	#fff 5px 1px,  #fff -5px 1px,
	#fff 5px -1px, #fff -5px -1px,
		/*  */
	#fff 2px 5px,  #fff -2px 5px,
	#fff 2px -5px, #fff -2px -5px,
	#fff 5px 2px,  #fff -5px 2px,
	#fff 5px -2px, #fff -5px -2px,
		/*  */
	#fff 3px 5px,  #fff -3px 5px,
	#fff 3px -5px, #fff -3px -5px,
	#fff 5px 3px,  #fff -5px 3px,
	#fff 5px -3px, #fff -5px -3px,
		/*  */
	#fff 4px 5px,  #fff -4px 5px,
	#fff 4px -5px, #fff -4px -5px,
	#fff 5px 4px,  #fff -5px 4px,
	#fff 5px -4px, #fff -5px -4px; 
}

.ttl_1{	
	position: absolute;	
	top: 18%;
	left: 23.5%;
	color:#fc3f00;
	font-size: 58px;
}

.ttl_1 img{
	position: absolute;
	top:-55%;
	left: 27%;
}

.ttl_2{
	display: inline-block;	
	position: absolute;	
	top: 40%;
	left: 15%;
	margin-top: .5%;
	padding-left: 9%;
	color:#ff7f02;
	font-size: 52px;
}

.ttl_lede{
	position: absolute;
	top: 64%;
	bottom: 19%;
	left: 24%;
	line-height: 1.5;	
	color: #5c2e23;
	font-size: 18px;
	font-weight: bold;
}

/* IE調整 */
@media all and (-ms-high-contrast: none) {
	.ttl_1{
		top: 16%;			
	}
	
	.ttl_2{
		top: 39%;			
	}
}

@media screen and (max-width: 640px){
	.ttl_logo{
		width: 28%;
		top: 6.5%;
	}
	
	.ttl_main{
		top: 22%;
		text-shadow:
		#fff 4px 0px,  #fff -4px 0px,/*上、下*/
		#fff 0px -4px, #fff 0px 4px,/*右、左*/
		#fff 4px 4px , #fff -4px 4px,/*右下、左上*/
		#fff 4px -4px, #fff -4px -4px,/*右上、左下*/
		/*  */
		#fff 1px 4px,  #fff -1px 4px,
		#fff 1px -4px, #fff -1px -4px,
		#fff 4px 1px,  #fff -4px 1px,
		#fff 4px -1px, #fff -4px -1px,
			/*  */
		#fff 2px 4px,  #fff -2px 4px,
		#fff 2px -4px, #fff -2px -4px,
		#fff 4px 2px,  #fff -4px 2px,
		#fff 4px -2px, #fff -4px -2px,
			/*  */
		#fff 3px 4px,  #fff -3px 4px,
		#fff 3px -4px, #fff -3px -4px,
		#fff 4px 3px,  #fff -4px 3px,
		#fff 4px -3px, #fff -4px -3px 
	}
	
	.ttl_1{
		top: 16%;
		left: 28%;
		font-size: 8vw;
	}
	
	.ttl_1 img{
		width: 16%;		
		left: 27%;
		top: -60%;
	}
	
	.ttl_2{
		top: 36%;
		left: 19.5%;
		font-size: 8vw;
	}
	
	.ttl_lede{
		bottom: 0;
		left: 6%;
		right: 6%;
		font-size: 3vw;
	}
}

@media screen and (max-width: 375px){
	.ttl_main{
		text-shadow:
		#fff 3px 0px,  #fff -3px 0px,/*上、下*/
		#fff 0px -3px, #fff 0px 3px,/*右、左*/
		#fff 3px 3px, #fff -3px 3px,/*右下、左上*/
		#fff 3px -3px, #fff -3px -3px,/*右上、左下*/
		/*  */
		#fff 1px 3px,  #fff -1px 3px,
		#fff 1px -3px, #fff -1px -3px,
		#fff 3px 1px,  #fff -3px 1px,
		#fff 3px -1px, #fff -3px -1px,
			/*  */
		#fff 2px 3px,  #fff -2px 3px,
		#fff 2px -3px, #fff -2px -3px,
		#fff 3px 2px,  #fff -3px 2px,
		#fff 3px -2px, #fff -3px -2px; 
	}
	
	.ttl_2{
		left: 19%;
	}
}

@media screen and (max-width: 320px){
	.ttl_logo{
		top: 6%;
		width: 27%;
	}
	
	.ttl_main{
		text-shadow:
		#fff 2.5px 0px,  #fff -2.5px 0px,/*上、下*/
		#fff 0px -2.5px, #fff 0px 2.5px,/*右、左*/
		#fff 2.5px 2.5px, #fff -2.5px 2.5px,/*右下、左上*/
		#fff 2.5px -2.5px, #fff -2.5px -2.5px,/*右上、左下*/
		/*  */
		#fff 1px 2.5px,  #fff -1px 2.5px,
		#fff 1px -2.5px, #fff -1px -2.5px,
		#fff 2.5px 1px,  #fff -2.5px 1px,
		#fff 2.5px -1px, #fff -2.5px -1px;
	}
	
	.ttl_1{
		left: 27%;
	}
	
	.ttl_2{
		left: 18%;
	}
		
	.ttl_lede{
		top: 63%;
		line-height: 1.3;
		font-size: 3.5vw;
	}
}
	
/* レシピエリア */
.inner {
	margin: -30px 0 -1px;
	padding: 13px 0 0;
}

.container ul {
	list-style-type:none;
	overflow: hidden;
}

.container .lastList {
	padding:　0;
}

h2{
	position: relative;
	margin: 1.5% 0;
	padding: .8% 0 .7% 3.5%;
	border-radius: 10px;
	color: #5c2e23;
	text-align: left;
	font-size: 24px;
}

h2:before{
	position: absolute;
	display: inline-block;
	content: "";
	background : url(../img/deco2.png) no-repeat;
	width: 100%;
	height: 95%;
	top: 5%;
	left: 1%;
}

h2.cold{
	font-weight: bold;
	background: #90e29f;
}

h2.spicy{
	font-weight: bold;
	background: #fbb59a;
}

h2.lot{
	font-weight: bold;
	background: #ffe33b;
}

#recipe {
	width: 100%;
	max-width: inherit;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

#recipe a {
	text-decoration: none;
}

.list li {
	float:left;
	width: 21.81%;
	margin: 0 1.3% 1.5% 0;
	padding: 10px 1% 1%;
	border: 1px solid #e0d5c9;
	text-align: center;
}
.list li:nth-of-type(4n) {
	margin-right: 0;
}

.list li p,
.recipe_title {
	text-align: left;
}

.list li p {
	line-height: 1.4;
	font-size: 12px;
}
.recipe_pict {
	width: 100%;
}

.recipe_title {
	margin: 2% 0;
	color: #430b00;
	font-size: 130%;
	letter-spacing: -0.05em;
}

/* IE調整 */
@media all and (-ms-high-contrast: none) {
	h2{
		padding: 1% 0 .4% 3.5%;
	}
}

@media screen and (max-width:640px){	
	.inner {
			margin-top: 0;
			padding: 0 5px;
		}
			
	.contents {
		background: none;
	}
	
	.container h1 {
		padding: 0;
	}
	
	.container ul {
		width: 100%;
		margin-bottom: 2px;
	}
	.list li img {
		width: 100%;
	}
	.list li {
		width: 46%;
		width: calc(47% - 2px);
		min-height: 150px;
		margin: 0 0.5% 3%;
		padding: 1%;
	}
		
	h2{
		margin: 0 0 2%!important;  
		padding: 1% 0 1% 6%!important;
		font-size: 160%;
	}
	
	h2:before{
		background-size: 2.5%;
		width: 100%;
		height: 95%;
		top: 10%;
		left: 2%;
	}
			
	.recipe_title {
		width: 100%;
		font-size: 110%;
		font-weight: bold;
	}
	
	.list li p{
		font-size: 100%;
	}
}

@media screen and (max-width:375px){
	.ttl_lede{
		top: 66%;
	}
}

@media screen and (max-width:320px){
	.ttl_lede{
		top: 64%;
	}
}

/* IE調整 */
@media all and (max-width: 640px) and (-ms-high-contrast: none) {
	.inner {
			margin-top: 0;
		}
	
	h2{
			padding: 2% 0 .5% 6%!important;
		}
}

@media screen and (max-width: 375px){
	h2{
		font-size: 4.7vw;
	}
	
	h2:before{
		background-size: 3.5%;
	}
	
	.recipe_title {
		font-size: 4.2vw;
	}

	.list li p{
		font-size: 3.6vw;
	}
}

/* IE調整 */
@media screen and (max-width: 320px) and (-ms-high-contrast: none) {
	.ttl_lede{
		font-size: 3vw;
	}
}


/* 家のみ限定！ 関連リンク */
#ienomi_link{
	margin: 10px 0;
	line-height: 140%;
	text-align: left;
}

#ienomi_link ol {
overflow:hidden;
list-style: none;
margin: 0;
padding: 0;
}

#ienomi_link li {
	width: auto;
	float: left;
	margin: 5px 15px 5px 0;
	color: #999999;
	font-size: 13px;
}

@media screen and (max-width:640px){
	#ienomi_link p{
		text-indent: .8em;
		font-size: 13px;
	}
	
	#ienomi_link li a {
		color: #333;
	}

	#ienomi_link li {
		float: none;
		margin: 5px 30px 5px 0;
		color: #000;
		padding-left: 1em;
		list-style-type: disc;
	}
}

@media screen and (min-width:641px){
	#wrap {
		width: 950px;
		margin: 0 auto;
	}
	.container h1 {
		padding: 0;
		margin: 0;
	}
	.container ul {
		width: 100%;
		margin: 0 auto;
	}
	#recipe {
		margin: 0 auto;
		overflow: hidden;
	}
	#footer {
	}
}


	/*bnr_area*/
.bnr_area{
	margin: 20px 0 20px -8px;
}

.bnr_area ul{
	list-style-type: none;
}

.bnr_area ul li {
	float: left;
	margin: 0 0 0 8px;
	position: relative;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.bnr_area ul li img {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.bnr_area ul li p {
	display: block;
	width: 90%;
	padding: 5px 5%;
	position: absolute;
	bottom: 2px;
	left: 0;
	color: #ffffff;
	text-align: left;
}

@media screen and (max-width:640px){
	.bnr_area {
		margin: 0 0 20px;
	}
	.bnr_area ul {
	}
	.bnr_area ul li {
		width: 46%;
		height: auto;
		margin: 0 1% 2%;
	}
	.bnr_area ul li:nth-of-type(2n-1) {
		margin: 0 1% 3% 3%;
	}
	.bnr_area ul li:nth-of-type(2n) {
		margin: 0 0 3% 1%;
	}
	.bnr_area ul li img {
		width: 100%;
		display: block;
	}
	.bnr_area ul li p {
		padding: 3px 3%;
		width: 94%;
		bottom: 0px;
	}
}

@media screen and (min-width:641px){
	.bnr_area ul li {
		/* width: 231px; */
		height: 172px;
	}
}

a:hover img.op{
  opacity: 0.8;
}





/* アサヒフッター崩れ対応 */
@media screen and (max-width:640px){
	#commonUtility .contents-inner,
	#commonFooter .contents-inner {
		width: 100%;
	}
}
@media screen and (min-width:641px){
	#commonUtility .contents-inner,
	#commonFooter .contents-inner {
		width: 1024px;
	}
}