@charset "UTF-8";

/*
	レシピ
-----------------------------------------------------------------------------------------------*/
#recipeDeat.ctsArea{
	width: 1100px;
}
.recipeDeat__ph{
	width: 580px;
}
.recipeDeat__ph img:nth-of-type(2){
	margin: 20px 0 0;
}
.recipeDeat__about{
	width: 420px;
}
.recipeDeat__txt{
	font-size: 1.6rem;
	font-weight: 700;
}
.recipeDeat__txt_tag{
	display: inline-block;
	margin: 0 0 5px;
	padding: 10px 12px 10px 40px;
	color: #fff;
	background-color: #0cacd7;
	border-radius: 5px;
	line-height: 1.0;
	position: relative;
}
.recipeDeat__txt_tag::before{
	content: "";
	width: 21px;
	height: 16px;
	background: url("../images/ico_mail.svg") center center no-repeat;
    background-size: cover;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}
.recipeDeat__txt_name{
	display: block;
	text-align: right;
}
@media screen and (max-width:668px){
	#recipeDeat.ctsArea{
		width: 100%;
	}
	.recipeDeat__ph{
		width: 100%;
	}
	.recipeDeat__ph img:nth-of-type(2){
		margin: 10px 0 0;
	}
	.recipeDeat__about{
		width: 100%;
	}
	.recipeDeat__txt{
		font-size: 1.5rem;
		margin: 15px 0 0;
	}
}

/* 使用商品 */
.listProductSubArea{
	margin: 30px 0 0;
	padding: 30px 30px 50px;
	border-radius: 10px;
	background-color: #fcf9f0;
	position: relative;
}
.listProductSubArea::after{
	content: "";
    width: 107px;
    height: 80px;
    background: url("../images/deco_character01.png") center center no-repeat;
    background-size: cover;
	position: absolute;
	right: -20px;
	bottom: -40px;
}
.listProductSubArea__tit{
	margin: 0 0 15px;
	font-weight: 700;
	color: #fff;
	text-align: center;
}
.listProductSubArea__tit span{
	display: inline-block;
	padding: 8px 30px;
	line-height: 1.0;
	border-radius: 15px;
	background-color: #4e281e;
}
@media screen and (max-width:668px){
	.listProductSubArea{
		margin: 20px 0 0;
		padding: 20px 20px 50px;
	}
	.listProductSubArea::after{
		width: 90px;
		height: 68px;
		right: -10px;
		bottom: -25px;
	}
	.listProductSubArea__tit{
		margin: 0 0 10px;
	}
}

.listProductSub{
	margin: 0 0 -30px;
}
.listProductSub__item{
	width: calc((100% - 30px)/2);
	margin: 0 30px 30px 0;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}
.listProductSub__item:only-child{
	width: 100%;
	margin: 0 0px 30px 0;
}
.listProductSub__item:nth-of-type(2n){
	margin: 0 0 30px 0;
}
.listProductSub__item a{
	display: block;
}
.listProductSub__ph{
	height: 100px;
	text-align: center;
}
.listProductSub__ph img {
    width: auto;
    height: 100%;
}
.listProductSub__tit{
	margin: 10px 0 0;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
}
/*or
--------------*/
.listProductSub_or__item{
	width: 45%;
	margin: 0;
	padding: 0 0 30px 0px;
	border-bottom: 1px solid #ddd;
}
.listProductSub_or__item02{
	width: 10%;
	margin: 0;
	padding: 0;
}
.listProductSub_or__item:only-child{
	width: 100%;
	margin: 0 0px 30px 0;
}
.listProductSub_or__item:nth-of-type(2n){
	margin: 0 0 30px 0;
}
.listProductSub_or__item a{
	display: block;
}
.listProductSub_or__tit{
	margin: 50px 0 0 0;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width:668px){
	.listProductSub{
		margin: 0 0 -30px;
	}
	.listProductSub__item{
		width: calc((100% - 15px)/2);
		margin: 0 15px 20px 0;
		padding: 0 0 10px;
	}
	.listProductSub__item:nth-of-type(2n){
		margin: 0 0 20px 0;
	}
	.listProductSub__ph{
		height: 80px;
	}
	.listProductSub_or__item{
		width: 45%;
		margin: 0;
		padding: 0 0 20px 0px;
	}
	.listProductSub_or__item02{
		width: 10%;
		margin: 0;
		padding: 0;
	}
	.listProductSub_or__item:only-child{
		width: 100%;
		margin: 0 0px 20px 0;
	}
	.listProductSub_or__item:nth-of-type(2n){
		margin: 0 0 20px 0;
	}
	.listProductSub_or__tit{
		margin: 30px 0 0 0;
		font-size: 1.4rem;
		font-weight: 700;
		text-align: center;
	}
}

.recipeDeat__list{
	margin: 50px 0 0;
	width: 500px;
	position: relative;
}
.recipeDeat__list_tit{
	margin: 0 0 15px;
	padding: 0 0 10px 37px;
	font-size: 2.2rem;
	font-weight: bold;
	position: relative;
}
.recipeDeat__list_tit_cutlery{
	padding: 0 0 10px 28px;
}
.recipeDeat__list_tit_cutlery::before{
	content: "";
    width: 19px;
    height: 22px;
    background: url("../images/ico_cutlery.svg") center center no-repeat;
    background-size: cover;
	position: absolute;
	top: 4px;
	left: 0;
}
.recipeDeat__list_tit_note::before{
	content: "";
    width: 29px;
    height: 22px;
    background: url("../images/ico_note.svg") center center no-repeat;
    background-size: cover;
	position: absolute;
	top: 4px;
	left: 0;
}
.recipeDeat__list_tit::after{
	content:' ';
	display:block;
	width:100%;
	height:4px;
	background:linear-gradient(to right, #f8834c 33%, #b7c52b 33%, #b7c52b 67%, #f8696b 67%);
	position: absolute;
	left: 0;
	bottom: 0;
}
.recipeDeat__list_tit span{
	font-size: 1.5rem;
}
@media screen and (max-width:668px){
	.recipeDeat__list{
		margin: 30px 0 0;
		width: 100%;
	}
	.recipeDeat__list_tit{
		margin: 0 0 10px;
		padding: 0 0 10px 32px;
		font-size: 2.0rem;
	}
	.recipeDeat__list_tit_cutlery{
		padding: 0 0 10px 25px;
	}
	.recipeDeat__list_tit_cutlery::before{
		width: 17px;
		height: 19px;
	}
	.recipeDeat__list_tit_note::before{
		width: 26px;
		height: 19px;
	}
}

/* 材料リスト */
#listIngredients li{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-ustify-content: space-between;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
	padding: 10px 0;
	font-size: 1.5rem;
	border-bottom: 1px solid #ddd;
}
#listIngredients li span:first-of-type{
	width: 80%;
}
#listIngredients li.half span:first-of-type{
	width: 50%;
}
#listIngredients li.full span:first-of-type{
	width: 100%;
}

/* 作り方リスト */
.olistProcess{
	counter-reset: number 0;
}
.olistProcess li{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
	min-height: 50px;
	padding: 10px 0 10px 45px;
	font-size: 1.5rem;
	border-bottom: 1px solid #DDDDDD;
	position: relative;
}
.olistProcess li:before {
	content: ' ';
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-justify-content: center;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
	background-color: #4e281e;
	border-radius: 50%;
	counter-increment: number 1;
	content: counter(number) " ";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.olistProcess li:only-child {
	padding: 10px 0 10px 0px;

}
.olistProcess li:only-child:before {
	display: none;
}

.olistProcess .tit{
	padding: 10px 0;
	font-weight: 700;
}
.olistProcess .tit::before{
	display: none;
}

/* シェア */
.shareArea{
	padding: 60px 0 30px;
	border-bottom: 1px solid #ddd;
}
.dlistBtn:last-of-type{
	margin: 0 0 0 30px;
}
.dlistBtn dt{
	font-weight: bold;
}
@media screen and (max-width:668px){
	.shareArea{
		-ms-justify-content: center;
		justify-content: center;
		padding: 30px 0;
	}
	.dlistBtn:last-of-type{
		margin: 0 0 0 20px;
	}
	.dlistBtn dt{
		font-size: 1.2rem;
	}
}

.listSns li{
	margin: 0 0 0 10px;
}
.listSns li a{
	display: block;
	width: 40px;
	height: 40px;
}

/* Twitter */
#dlistBtn_tw{
	background: url("../images/ico_twitter.svg") center center no-repeat;
}

/* X */
#dlistBtn_x{
	background: url("../images/ico_x.svg") center center no-repeat;
}

/* Facebook */
#dlistBtn_fb{
	background: url("../images/ico_fb.svg") center center no-repeat;
}

/* LINE */
#dlistBtn_line{
	background: url(../images/ico_line.svg) center center no-repeat;
}

/* 印刷 */
.listSns form{
	height: 40px;
}
input[type=button]:focus {
    outline: none;
}
#dlistBtn_print{
	width:40px;
	height:40px;
	margin:0 auto;
	padding: 0;
	border:0;
	background: url("../images/ico_print.svg") center center no-repeat;
	cursor: pointer;
	transition: opacity 0.2s;
}
#dlistBtn_print:hover{
	opacity: 0.7;
}
@media print {
	body {
		min-width: 1100px;
		font-size: 1.4rem;
		margin: 0px 10px 0px -10px;
	}
}